/* TURBO GP 样式：深色赛事 HUD + 明黄点缀 */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #101318; }
body {
  font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  color: #eef1f4;
  user-select: none;
  -webkit-user-select: none;
}
#app, #app canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hidden { display: none !important; }

/* ---------- HUD ---------- */
#hud { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
#hud > div { position: absolute; }

#top-left { top: 18px; left: 22px; }
.pos {
  font: italic 900 54px/1 "Arial Black", Arial, sans-serif;
  text-shadow: 0 3px 10px rgba(0,0,0,.55);
}
.pos.p1 { color: #ffd53f; }
.pos.p2 { color: #d7dde3; }
.pos.p3 { color: #e39a5b; }
.pos.p4 { color: #9fb3c8; }
#lap {
  margin-top: 4px;
  font: 700 20px/1.2 Arial, sans-serif;
  color: #ffd53f;
  text-shadow: 0 2px 6px rgba(0,0,0,.6);
}

#top-right {
  top: 18px; right: 22px;
  background: rgba(10,14,20,.55);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  padding: 10px 14px;
  backdrop-filter: blur(4px);
}
.time-row { display: flex; justify-content: space-between; gap: 16px; font: 500 14px/1.9 Arial; color: #aab6c2; }
.time-row b { font: 700 15px/1.9 "Courier New", monospace; color: #fff; }
.time-row.best b { color: #ffd53f; }

#bottom-right { bottom: 24px; right: 26px; text-align: right; }
#speed-wrap {
  font: italic 900 64px/1 "Arial Black", Arial, sans-serif;
  text-shadow: 0 4px 14px rgba(0,0,0,.6);
  transform: skewX(-6deg);
}
#speed-unit { font: italic 700 18px/1 Arial; color: #ffd53f; margin-left: 8px; }
#rpm-bar {
  margin-top: 8px; width: 220px; height: 10px;
  background: rgba(255,255,255,.14);
  border-radius: 6px; overflow: hidden;
  transform: skewX(-18deg);
}
#rpm-fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, #37c26b, #ffd53f 65%, #e8402f 92%);
}

#bottom-left { bottom: 24px; left: 22px; }
#minimap {
  background: rgba(10,14,20,.55);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  backdrop-filter: blur(4px);
}

#msg {
  top: 22%; left: 50%; transform: translateX(-50%);
  font: italic 900 44px/1.2 "Arial Black", "PingFang SC", sans-serif;
  color: #fff; text-shadow: 0 4px 16px rgba(0,0,0,.7);
  opacity: 0; transition: opacity .25s;
  white-space: nowrap;
}
#msg.show { opacity: 1; }
#msg.gold { color: #ffd53f; }
#msg.warn { color: #ff5545; animation: blink .5s steps(2) infinite; }
@keyframes blink { 50% { opacity: .35; } }

#countdown {
  top: 34%; left: 50%; transform: translate(-50%, -50%);
  font: italic 900 130px/1 "Arial Black", Arial, sans-serif;
  color: #ffd53f;
  text-shadow: 0 8px 30px rgba(0,0,0,.75);
}
#countdown.pop { animation: pop .9s ease-out; }
@keyframes pop {
  0% { transform: translate(-50%,-50%) scale(1.8); opacity: 0; }
  18% { transform: translate(-50%,-50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(.92); opacity: .92; }
}

#mute-tag {
  top: 18px; left: 50%; transform: translateX(-50%);
  font: 600 13px/1 Arial; color: #cdd6df;
  background: rgba(10,14,20,.6); padding: 6px 12px; border-radius: 14px;
}

#help {
  bottom: 6px; left: 50%; transform: translateX(-50%);
  font: 500 12px/1 Arial; color: rgba(230,236,240,.5);
  white-space: nowrap;
}

/* ---------- 触屏 ---------- */
#touch-ui { display: none; }
@media (pointer: coarse) {
  #touch-ui { display: flex; position: absolute; inset: auto 0 70px 0; justify-content: space-between; padding: 0 18px; z-index: 6; }
  #touch-ui button {
    width: 74px; height: 74px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,.3);
    background: rgba(20,26,34,.55); color: #fff;
    font: 700 18px/1 "PingFang SC", sans-serif;
    touch-action: none;
  }
  #touch-ui .t-left, #touch-ui .t-right { display: flex; gap: 14px; }
  #help { display: none; }
}

/* ---------- 菜单 / 弹窗 ---------- */
#menu, #pause, #finish {
  position: absolute; inset: 0; z-index: 10;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 35%, rgba(24,32,44,.88), rgba(8,10,14,.96));
  backdrop-filter: blur(6px);
}
.menu-inner { text-align: center; max-width: 560px; padding: 24px; }
#menu h1 {
  font: italic 900 84px/1 "Arial Black", Arial, sans-serif;
  background: linear-gradient(180deg, #fff 30%, #ffd53f 70%, #e88f1c);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.6));
  letter-spacing: 2px;
}
#menu .sub {
  margin-top: 6px;
  font: 700 26px/1.4 "PingFang SC", sans-serif;
  color: #ffd53f; letter-spacing: 14px;
}
#menu .desc { margin: 14px 0 22px; color: #aab6c2; font-size: 14px; }
#progress-wrap {
  height: 10px; border-radius: 6px;
  background: rgba(255,255,255,.12); overflow: hidden;
}
#progress-fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, #e88f1c, #ffd53f);
  transition: width .2s;
}
#load-note { margin: 10px 0 18px; font-size: 13px; color: #8fa0b0; }
#start-btn, #restart-btn {
  pointer-events: auto;
  font: italic 900 24px/1 "Arial Black", "PingFang SC", sans-serif;
  color: #141414;
  background: linear-gradient(180deg, #ffe27a, #f5b81f);
  border: none; border-radius: 12px;
  padding: 16px 58px;
  cursor: pointer;
  box-shadow: 0 6px 24px rgba(245,184,31,.35);
  transition: transform .12s, box-shadow .12s;
}
#start-btn:hover:not(:disabled), #restart-btn:hover { transform: translateY(-2px) scale(1.03); }
#start-btn:disabled { filter: grayscale(.8); opacity: .5; cursor: wait; }
#menu .controls {
  margin-top: 26px;
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 8px 26px;
  font-size: 13.5px; color: #b9c5d1; text-align: left;
}
#menu .controls b { color: #ffd53f; font-family: "Courier New", monospace; }
#menu .tip { margin-top: 18px; font-size: 12px; color: #74828f; }

.panel {
  text-align: center;
  background: rgba(16,21,28,.92);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: 38px 52px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
}
.panel h2 { font: italic 900 34px/1.3 "Arial Black", "PingFang SC", sans-serif; color: #ffd53f; }
.panel p { margin-top: 12px; color: #aab6c2; }
#finish-table { margin: 22px auto; border-collapse: collapse; min-width: 300px; }
#finish-table td {
  padding: 7px 18px; font: 500 15px/1.4 Arial;
  color: #cdd6df; border-bottom: 1px solid rgba(255,255,255,.08);
}
#finish-table tr.best td { color: #ffd53f; font-weight: 700; }
#restart-btn { margin-top: 6px; font-size: 19px; padding: 13px 40px; }