#ui {
  position: fixed; inset: 0; pointer-events: none; z-index: 5;
  font: 500 14px/1.4 system-ui, sans-serif; color: #dfe4ee;
  user-select: none;
}
#ui .panel {
  background: rgba(8, 10, 16, 0.62);
  border: 1px solid rgba(120, 140, 180, 0.18);
  border-radius: 10px;
  backdrop-filter: blur(6px);
}

/* menu */
#menu {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 18px;
  background: radial-gradient(ellipse at center, rgba(7, 8, 13, 0.25) 0%, rgba(7, 8, 13, 0.82) 80%);
  pointer-events: auto;
}
#menu.hidden { display: none; }
#menu h1 {
  margin: 0; font-size: clamp(52px, 9vw, 110px); font-weight: 900; letter-spacing: 0.08em;
  color: #ff3355; text-shadow: 0 0 34px rgba(255, 51, 85, 0.55), 0 0 90px rgba(255, 51, 85, 0.25);
}
#menu .sub {
  margin: 0; letter-spacing: 0.42em; text-transform: uppercase; font-size: 13px; color: #7ea0c8;
}
#menu .rules { margin: 8px 0 0; color: #93a0b8; font-size: 13px; text-align: center; line-height: 2; }
#menu kbd {
  display: inline-block; min-width: 22px; padding: 2px 7px; margin: 0 3px;
  border: 1px solid rgba(140, 160, 200, 0.35); border-radius: 5px;
  background: rgba(20, 26, 40, 0.8); color: #cfd8ea; font: 600 12px system-ui;
}
#startBtn {
  pointer-events: auto; cursor: pointer; margin-top: 10px;
  padding: 14px 46px; font: 800 15px system-ui; letter-spacing: 0.3em; text-transform: uppercase;
  color: #fff; background: linear-gradient(180deg, #ff3355, #b01f3c);
  border: 0; border-radius: 8px;
  box-shadow: 0 0 26px rgba(255, 51, 85, 0.5);
}
#startBtn:hover { filter: brightness(1.15); }

/* countdown */
#countdown {
  position: absolute; top: 7vh; left: 50%; transform: translateX(-50%);
  display: none; gap: 14px;
}
#countdown.show { display: flex; }
#countdown .lamp {
  width: 34px; height: 34px; border-radius: 50%;
  background: #26141a; border: 2px solid #3a2028;
}
#countdown .lamp.on {
  background: #ff2233; border-color: #ff5566;
  box-shadow: 0 0 22px #ff2233, 0 0 44px rgba(255, 34, 51, 0.5);
}
#goFlash {
  position: absolute; top: 26vh; left: 50%; transform: translateX(-50%);
  font: 900 64px system-ui; letter-spacing: 0.2em; color: #52e07a;
  text-shadow: 0 0 30px rgba(82, 224, 122, 0.8); display: none;
}

/* hud */
#hud { position: absolute; inset: 0; display: none; }
#hud.show { display: block; }
#posLap {
  position: absolute; top: 18px; left: 18px; padding: 10px 16px;
  display: flex; gap: 18px; align-items: baseline;
}
#posLap .pos { font: 900 30px system-ui; color: #fff; }
#posLap .pos em { font-style: normal; font-size: 14px; color: #7ea0c8; }
#posLap .lap { font: 700 16px system-ui; color: #cfd8ea; }
#times {
  position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
  padding: 8px 18px; text-align: center; font-variant-numeric: tabular-nums;
}
#times .cur { font: 700 22px system-ui; color: #fff; }
#times .row { font-size: 12px; color: #8fa0bc; margin-top: 2px; }
#times .row b { color: #c9d3e4; font-weight: 600; }
#minimap { position: absolute; top: 18px; right: 18px; padding: 8px; }
#speedo {
  position: absolute; right: 22px; bottom: 20px; text-align: right;
}
#speedo .kmh { font: 900 58px system-ui; color: #fff; line-height: 1; font-variant-numeric: tabular-nums; }
#speedo .kmh small { font: 700 14px system-ui; color: #7ea0c8; margin-left: 6px; }
#speedo .gear { font: 800 20px system-ui; color: #ff3355; }
#nitro {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  width: 260px; padding: 8px 12px;
}
#nitro .label { font-size: 10px; letter-spacing: 0.3em; color: #37c6ff; margin-bottom: 5px; }
#nitro .bar { height: 8px; border-radius: 4px; background: rgba(55, 198, 255, 0.12); overflow: hidden; }
#nitro .fill { height: 100%; width: 50%; border-radius: 4px; background: linear-gradient(90deg, #1b6f9c, #37c6ff); box-shadow: 0 0 12px rgba(55, 198, 255, 0.7); }
#keys {
  position: absolute; left: 18px; bottom: 20px; padding: 8px 14px;
  font-size: 11px; color: #75839c; line-height: 1.9;
}
#keys kbd {
  padding: 1px 6px; border: 1px solid rgba(140, 160, 200, 0.3); border-radius: 4px;
  background: rgba(20, 26, 40, 0.7); color: #b9c4d8; font: 600 10px system-ui;
}

/* toasts */
#toasts { position: absolute; top: 84px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 6px; align-items: center; }
#toasts .toast {
  padding: 7px 20px; border-radius: 20px; font: 700 13px system-ui; letter-spacing: 0.08em;
  background: rgba(10, 14, 22, 0.85); border: 1px solid rgba(120, 140, 180, 0.25);
  color: #e8edf6; animation: toastIn 0.25s ease-out;
}
#toasts .toast.gold { color: #ffc23d; border-color: rgba(255, 194, 61, 0.4); }
#toasts .toast.cyan { color: #37c6ff; border-color: rgba(55, 198, 255, 0.4); }
@keyframes toastIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; } }

/* results */
#results {
  position: absolute; inset: 0; display: none; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px;
  background: rgba(7, 8, 13, 0.72); pointer-events: auto;
}
#results.show { display: flex; }
#results h2 { margin: 0; font: 900 40px system-ui; letter-spacing: 0.12em; color: #ffc23d; text-shadow: 0 0 30px rgba(255, 194, 61, 0.4); }
#results table { border-collapse: collapse; font-variant-numeric: tabular-nums; }
#results td { padding: 7px 22px; border-bottom: 1px solid rgba(120, 140, 180, 0.12); font-size: 15px; }
#results td.place { color: #7ea0c8; font-weight: 800; }
#results td.t { text-align: right; color: #cfd8ea; }
#results tr.me td { color: #fff; font-weight: 700; }
#results .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; }
#restartBtn {
  pointer-events: auto; cursor: pointer; margin-top: 8px;
  padding: 11px 34px; font: 800 13px system-ui; letter-spacing: 0.26em; text-transform: uppercase;
  color: #fff; background: linear-gradient(180deg, #37c6ff, #1b6f9c); border: 0; border-radius: 8px;
  box-shadow: 0 0 20px rgba(55, 198, 255, 0.4);
}