:root{
  --bg:#0d0f12; --panel:rgba(22,25,29,.86); --text:#eceff3; --muted:#9aa3ad;
  --accent:#ffc21c; --ok:#3ec46d; --bad:#e5453a; --line:rgba(255,255,255,.12);
  --display:"Rubik",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--text);font-family:var(--display);overflow:hidden}
#app{position:fixed;inset:0;touch-action:none;user-select:none;-webkit-user-select:none}
/* поле имени — единственное место, где нужны и выделение текста, и обычные жесты */
#app input[type=text]{touch-action:auto;user-select:text;-webkit-user-select:text}
canvas#gl{position:absolute;inset:0;width:100%;height:100%;display:block}

/* ---------- HUD ---------- */
#hud{position:absolute;inset:0;pointer-events:none;padding:calc(10px + env(safe-area-inset-top)) 12px 0}
.hud-row{display:flex;gap:8px;justify-content:center}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:6px 12px;
  min-width:84px;text-align:center;backdrop-filter:blur(6px)}
.tile b{display:block;font-size:22px;line-height:1.05;font-variant-numeric:tabular-nums}
.tile span{display:block;font-size:10px;color:var(--muted);letter-spacing:.04em;text-transform:uppercase}
#hGapTile.warn{border-color:var(--accent);color:var(--accent)}
#hGapTile.bad{border-color:var(--bad);color:var(--bad)}
/* Счётчик до встречной. Появляется, только когда игрок сам на встречной полосе, —
   в остальное время это шум, а там это единственный способ оценить сближение под 60 м/с. */
#hOnc{margin:10px auto 0;width:max-content;min-width:186px;padding:7px 14px 9px;
  background:rgba(22,25,29,.88);border:1px solid var(--line);border-radius:12px;
  backdrop-filter:blur(6px);text-align:center}
#hOnc[hidden]{display:none}
.onc-top{display:flex;align-items:baseline;justify-content:center;gap:6px}
.onc-top b{font-size:24px;line-height:1;font-variant-numeric:tabular-nums}
.onc-top span{font-size:10px;color:var(--muted);letter-spacing:.04em;text-transform:uppercase}
.onc-bar{margin-top:6px;height:4px;border-radius:2px;background:rgba(255,255,255,.12);overflow:hidden}
.onc-bar i{display:block;height:100%;width:0;background:var(--ok);transition:width .08s linear,background .15s}
#hOnc.warn{border-color:var(--accent)}
#hOnc.warn .onc-top b{color:var(--accent)}
#hOnc.bad{border-color:var(--bad);background:rgba(70,18,16,.90)}
#hOnc.bad .onc-top b{color:var(--bad)}
#hMsg{margin:18px auto 0;width:max-content;max-width:80%;font-size:16px;font-weight:600;
  padding:7px 16px;border-radius:10px;opacity:0;transition:opacity .18s;text-align:center}
#hMsg.show{opacity:1}
#hMsg.chase{background:rgba(23,25,28,.82);color:#ffb257}
#hMsg.critical{background:rgba(120,20,20,.88);color:#fff}
#hMsg.close{background:rgba(90,60,10,.88);color:#ffe0a3}
#hMsg.gravel{background:rgba(72,60,36,.90);color:#e8d9a8}
#hBar{position:absolute;left:12px;right:12px;bottom:calc(8px + env(safe-area-inset-bottom));
  height:5px;border-radius:3px;background:rgba(255,255,255,.10);overflow:hidden}
#hBarFill{display:block;height:100%;width:0;background:var(--ok);transition:width .1s linear,background .2s}

/* ---------- экранные кнопки ---------- */
#ctl{position:absolute;inset:auto 0 0 0;display:flex;justify-content:space-between;
  padding:0 10px calc(12px + env(safe-area-inset-bottom));gap:10px;pointer-events:none}
.pad{display:flex;gap:8px;pointer-events:auto}
.btn{width:78px;height:78px;border-radius:16px;border:2px solid var(--line);
  background:rgba(35,38,43,.72);backdrop-filter:blur(6px);color:var(--text);
  font-family:var(--display);font-size:15px;font-weight:600;display:flex;align-items:center;
  justify-content:center;touch-action:none;-webkit-tap-highlight-color:transparent}
.btn.on{background:var(--accent);color:#1a1200;border-color:var(--accent)}
.btn.gas.on{background:var(--ok);color:#03200e}
.btn.brk.on{background:var(--bad);color:#fff}
/* руль упёрся в край дороги — кнопка дрожит */
.btn.bump{animation:bump .26s ease-out}
@keyframes bump{
  0%{transform:translateX(0)}25%{transform:translateX(-5px)}
  55%{transform:translateX(4px)}80%{transform:translateX(-2px)}100%{transform:translateX(0)}}
@media (min-width:900px){#ctl{opacity:.35}}

/* ---------- экраны ---------- */
.screen{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(8,10,13,.72);backdrop-filter:blur(8px);padding:16px;z-index:5}
.screen[hidden]{display:none}
.card{width:min(420px,100%);max-height:92vh;overflow:auto;background:var(--panel);
  border:1px solid var(--line);border-radius:18px;padding:20px}
.card h1{margin:0 0 6px;font-size:26px;letter-spacing:.03em}
.sub{margin:0 0 16px;color:var(--muted);font-size:13px;line-height:1.45}
.hint{color:var(--muted);font-size:11px;line-height:1.5;margin:12px 0 0}
.fld{display:block;font-size:13px;color:var(--muted);margin:0 0 14px}
.fld b{color:var(--text)}
.fld input[type=range]{width:100%;margin-top:6px;accent-color:var(--accent)}
.fld select{width:100%;margin-top:6px;padding:9px;border-radius:10px;background:#1b1f24;
  color:var(--text);border:1px solid var(--line);font-family:var(--display);font-size:13px}
.seg{display:flex;gap:6px;margin-top:6px}
.seg button{flex:1;padding:9px;border-radius:10px;border:1px solid var(--line);background:#1b1f24;
  color:var(--text);font-family:var(--display);font-size:13px}
.seg button.on{background:var(--accent);color:#1a1200;border-color:var(--accent)}
.go{width:100%;margin-top:6px;padding:13px;border-radius:12px;border:0;background:var(--accent);
  color:#1a1200;font-family:var(--display);font-size:16px;font-weight:700;letter-spacing:.04em}
.go.ghost{margin-top:8px;background:transparent;color:var(--text);border:1px solid var(--line)}
/* auto-fit, чтобы новая графа в итогах заезда не ломала сетку на телефоне */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(62px,1fr));gap:8px;
  margin:14px 0 14px;text-align:center}
.stats b{display:block;font-size:18px;font-variant-numeric:tabular-nums}
.stats span{display:block;font-size:10px;color:var(--muted);text-transform:uppercase}

/* ---------- таблица рекордов ---------- */
.fld input[type=text]{width:100%;margin-top:6px;padding:9px;border-radius:10px;background:#1b1f24;
  color:var(--text);border:1px solid var(--line);font-family:var(--display);font-size:14px}
.fld input[type=text]:focus{outline:0;border-color:var(--accent)}
.card.wide{width:min(560px,100%)}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
#bTable{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
#bTable th{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;
  font-weight:600;text-align:left;padding:0 6px 6px;border-bottom:1px solid var(--line)}
#bTable td{padding:7px 6px;border-bottom:1px solid rgba(255,255,255,.06);white-space:nowrap}
#bTable .num{text-align:right}
#bTable .nm{max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#bTable .strong{font-weight:700}
#bTable .dim{color:var(--muted)}
#bTable tr.me td{background:rgba(255,194,28,.10);color:var(--accent)}
#oSent{min-height:16px}
#oSent.bad{color:var(--bad)}
#oSent.ok{color:var(--ok)}