* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  background: #0a0f1c;
  overflow: hidden;
  font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
}

#game, #hud { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
#hud { pointer-events: none; }
.hidden { display: none !important; }

/* ---------- start menu / lobby ---------- */
#menu {
  position: fixed; inset: 0; z-index: 20;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; padding: 24px;
  background: rgba(5, 9, 20, 0.55);
  overflow-y: auto;
}
#menu h1 {
  font-size: clamp(34px, 8vw, 72px); color: #ffd54d; letter-spacing: 2px;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.5);
}
#menu .names { display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; }
#menu label { display: flex; flex-direction: column; align-items: center; gap: 6px; font: bold 14px "Trebuchet MS"; letter-spacing: 0.04em; }
#menu .p1 { color: #ff5a4d; } #menu .p2 { color: #37d0ff; }
#menu input {
  width: 160px; padding: 10px; text-align: center; font: bold 18px "Trebuchet MS";
  color: #fff; background: rgba(8, 12, 24, 0.9); border: 2px solid currentColor; border-radius: 10px; outline: none;
}
#modeButtons, #onlinePanel, #lobby { display: flex; flex-direction: column; gap: 10px; align-items: center; width: min(420px, 92vw); }
.start:disabled { opacity: 0.4; cursor: not-allowed; filter: grayscale(0.5); }
button { cursor: pointer; font-family: inherit; }
.big {
  width: 100%; padding: 16px 18px; font: bold 19px "Trebuchet MS"; color: #fff;
  background: linear-gradient(180deg, #2a3a66, #1a2742); border: 2px solid #4a6bb0; border-radius: 14px;
}
.big:hover, .big:active { border-color: #7dffb0; }
.start {
  width: min(420px, 92vw); padding: 18px; margin-top: 4px; font: bold 24px "Trebuchet MS"; color: #08210f;
  background: linear-gradient(180deg, #9dffb0, #4fd07a); border: none; border-radius: 16px;
}
.small { padding: 8px 14px; font: bold 13px "Trebuchet MS"; color: #dfe6f5; background: rgba(8, 12, 24, 0.85); border: 2px solid #5a6b85; border-radius: 10px; }
#joinBox { display: flex; gap: 8px; }
#joinBox input { width: 120px; text-transform: uppercase; letter-spacing: 4px; }
#joinBox button { padding: 0 18px; background: #37d0ff; border: none; border-radius: 10px; font: bold 16px "Trebuchet MS"; }
#codeBox { text-align: center; font: 16px "Trebuchet MS"; color: #dfe6f5; }
#codeBox b { font-size: 40px; letter-spacing: 8px; color: #ffd54d; display: block; margin: 6px 0; }
.hint, .foot { font-size: 12px; color: #9fb0d0; text-align: center; }
#netStatus { font: bold 14px "Trebuchet MS"; color: #7dffb0; text-align: center; min-height: 18px; }

/* ---------- touch controls ---------- */
#touch { position: fixed; inset: 0; z-index: 15; pointer-events: none; }
#touch .pad { position: fixed; bottom: max(18px, env(safe-area-inset-bottom)); display: flex; gap: 14px; }
#touch .left { left: 18px; }
#touch .right { right: 18px; flex-wrap: wrap-reverse; width: 180px; justify-content: flex-end; }
.tbtn {
  pointer-events: auto; width: 78px; height: 78px; border-radius: 50%;
  font-size: 30px; color: #fff; background: rgba(20, 30, 55, 0.55);
  border: 3px solid rgba(255, 255, 255, 0.45); display: grid; place-items: center;
  touch-action: none;
}
.tbtn.gas { width: 96px; height: 96px; background: rgba(60, 160, 90, 0.5); border-color: #7dffb0; }
.tbtn.nitro { background: rgba(200, 140, 30, 0.5); border-color: #ffd54d; }
.tbtn.fire { background: rgba(180, 60, 50, 0.5); border-color: #ff8a7a; }
.tbtn.active { filter: brightness(1.6); transform: scale(0.94); }