:root {
  --ink: #2b1e3d; --paper: #fff6e3; --sun: #ffd166; --coral: #ef476f;
  --teal: #06d6a0; --violet: #7d5ba6;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif; color: var(--ink); background: #17102a; }
body.game { overflow: hidden; }
canvas#gl { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
.hidden { display: none !important; }
.btn {
  display: inline-block; border: 0; border-radius: 14px; cursor: pointer;
  background: linear-gradient(135deg, var(--coral), #ff8f5e);
  color: #fff; font-weight: 800; font-size: 1.15rem; letter-spacing: .06em;
  padding: .9em 2.2em; box-shadow: 0 6px 0 #b0264c, 0 12px 24px rgba(0,0,0,.35);
  text-decoration: none;
}
.btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #b0264c; }
#ui { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
#hud { position: absolute; inset: 0; }
#hud-top {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 14px; font-weight: 800; font-size: clamp(.9rem, 2.6vw, 1.35rem);
}
#hud-top span, #hud-bottom span {
  background: rgba(43,30,61,.72); color: var(--paper);
  padding: .35em .8em; border-radius: 10px; border: 1px solid rgba(255,209,102,.5);
}
#hud-bottom { position: absolute; bottom: 14px; right: 14px; display: flex; gap: 10px; }
#hud-speed::after { content: " km/h"; font-weight: 400; font-size: .8em; }
#hud-score { color: var(--sun); font-weight: 800; font-size: clamp(.9rem, 2.6vw, 1.35rem); }
#msg {
  position: absolute; top: 22%; left: 50%; transform: translateX(-50%);
  font-size: clamp(2.2rem, 9vw, 5rem); font-weight: 900; color: var(--sun);
  text-shadow: 0 3px 0 #b0264c, 0 10px 30px rgba(0,0,0,.5);
}
.panel {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(560px, 92vw); text-align: center; pointer-events: auto;
  background: rgba(30,20,48,.92); color: var(--paper);
  border: 2px solid var(--sun); border-radius: 20px; padding: 28px 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.panel h1 { margin: 0 0 10px; color: var(--sun); letter-spacing: .08em; font-size: clamp(1.6rem, 6vw, 2.6rem); }
.panel p { line-height: 1.5; margin: 10px 0; }
.panel .keys { font-size: .85rem; color: #cbb8e8; }
#touch { position: absolute; inset: auto 0 0 0; height: 34vh; pointer-events: none; }
#touch button {
  position: absolute; pointer-events: auto; touch-action: none;
  width: 17vw; max-width: 92px; height: 17vw; max-height: 92px; border-radius: 50%;
  border: 2px solid var(--sun); background: rgba(43,30,61,.6); color: var(--paper);
  font-weight: 800; font-size: clamp(.8rem, 2.5vw, 1.1rem);
}
#btn-left { left: 4vw; bottom: 5vh; }
#btn-right { left: 25vw; bottom: 5vh; }
#btn-brake { right: 25vw; right: calc(4vw + 19vw); bottom: 5vh; }
#btn-gas { right: 4vw; bottom: 5vh; background: rgba(6,214,160,.45); }