* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  width: 100%; height: 100%; overflow: hidden;
  background: #14142a;
  color: #fff;
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  touch-action: none;
  overscroll-behavior: none;
  user-select: none;
  -webkit-user-select: none;
  position: fixed;
}

.screen {
  position: absolute; inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 20px;
  text-align: center;
}
.screen.active { display: flex; }

h1 { font-size: 34px; color: #ffd93d; }
h2 { font-size: 26px; }
.msg { color: #bbb; font-size: 15px; }

#name-input, #code-input {
  font-size: 22px; padding: 12px 16px;
  border-radius: 12px; border: 2px solid #444;
  background: #22223c; color: #fff;
  text-align: center; width: min(320px, 80vw);
  outline: none;
}
#name-input:focus, #code-input:focus { border-color: #ffd93d; }
#code-input {
  text-transform: uppercase;
  letter-spacing: 6px;
  font-weight: bold;
  color: #ffd93d;
}

.big-btn {
  font-size: 24px; font-weight: bold;
  padding: 18px 44px; border-radius: 16px; border: none;
  background: #ffd93d; color: #1a1a2e;
  box-shadow: 0 5px 0 #b89a12;
  cursor: pointer;
}
.big-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #b89a12; }
.big-btn.ready-on { background: #43d963; box-shadow: 0 5px 0 #1f8f38; color: #fff; }

.install-btn {
  font-size: 15px; padding: 10px 20px;
  border-radius: 10px; border: 1px solid #555;
  background: #22223c; color: #ddd;
  cursor: pointer;
}
.install-btn.hidden { display: none; }

.lobby-card {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.kart-img { width: 110px; height: auto; image-rendering: auto; }
.player-name { font-size: 26px; font-weight: bold; }

/* --- game screen --- */
#screen-game { padding: 0; }
#hud {
  position: absolute; top: 0; left: 0; right: 0;
  height: 44px;
  display: flex; align-items: center; justify-content: space-around;
  background: rgba(0,0,0,0.45);
  font-size: 17px; font-weight: bold;
  z-index: 5;
  padding-top: env(safe-area-inset-top);
}
#hud-item { font-size: 22px; }

#steer-zone {
  position: absolute; left: 0; top: 44px; bottom: 0; width: 46%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.03);
}
#steer-track {
  width: 84%; height: 74px;
  background: rgba(255,255,255,0.10);
  border-radius: 40px;
  position: relative;
  border: 2px solid rgba(255,255,255,0.18);
}
#steer-knob {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 66px; height: 66px;
  background: #ffd93d; color: #1a1a2e;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px; font-weight: bold;
  box-shadow: 0 3px 8px rgba(0,0,0,0.5);
}
.zone-label { margin-top: 12px; color: rgba(255,255,255,0.4); font-size: 13px; letter-spacing: 2px; }

#right-zone { position: absolute; right: 0; top: 44px; bottom: 0; width: 54%; }
.ctl-btn {
  position: absolute;
  border: none; border-radius: 50%;
  font-weight: bold; color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.ctl-btn.gas {
  right: 4vw; bottom: 6vh;
  width: min(34vh, 160px); height: min(34vh, 160px);
  background: radial-gradient(circle at 35% 30%, #4fdc72, #1f9e42);
  font-size: 26px;
  box-shadow: 0 6px 0 #14682b;
}
.ctl-btn.gas.pressed { transform: translateY(4px); box-shadow: 0 2px 0 #14682b; filter: brightness(1.2); }
.ctl-btn.brake {
  left: 5vw; bottom: 7vh;
  width: min(20vh, 96px); height: min(20vh, 96px);
  background: radial-gradient(circle at 35% 30%, #ff7a6e, #c62828);
  font-size: 15px;
  box-shadow: 0 5px 0 #7d1a1a;
}
.ctl-btn.brake.pressed { transform: translateY(3px); box-shadow: 0 2px 0 #7d1a1a; filter: brightness(1.2); }
.ctl-btn.item {
  right: 6vw; top: 4vh;
  width: min(22vh, 104px); height: min(22vh, 104px);
  background: radial-gradient(circle at 35% 30%, #6f86ff, #3d4fc9);
  font-size: 40px;
  box-shadow: 0 5px 0 #232f80;
}
.ctl-btn.item.empty { filter: grayscale(1) brightness(0.5); }
.ctl-btn.item.pressed { transform: translateY(3px); }

.overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(10,10,30,0.72);
  z-index: 10;
  font-size: 60px;
  gap: 10px;
  /* overlays are informational: touches must reach the controls beneath
     (hold gas through the countdown, re-grip during the spin flash) */
  pointer-events: none;
}
.overlay.hidden { display: none; }
#countdown-num { font-size: 110px; font-weight: bold; color: #ffd93d; }
#spin-overlay { background: rgba(200,30,30,0.35); }
#finished-overlay { font-size: 30px; }
#finished-place { font-size: 56px; font-weight: bold; color: #ffd93d; }

#result-place { font-size: 70px; font-weight: bold; color: #ffd93d; }

#rotate-hint {
  position: fixed; inset: 0; z-index: 50;
  display: none;
  align-items: center; justify-content: center;
  background: #14142a;
  font-size: 26px; text-align: center; padding: 30px;
}
@media (orientation: portrait) {
  #rotate-hint { display: flex; }
}

#conn-dot {
  position: fixed; top: 6px; right: 6px;
  width: 10px; height: 10px; border-radius: 50%;
  background: #43d963; z-index: 60;
}
#conn-dot.down { background: #ff5252; animation: blink 0.8s infinite; }
@keyframes blink { 50% { opacity: 0.2; } }