/* Layout: one-screen cockpit — HUD strip on top, track canvas in the middle, control deck below; overlays for menu, lobby, hand-off and results */
:root{
  --bg:#121518; --panel:#1b1f23; --panel2:#23282d; --line:#323940; --fg:#eef1f3; --muted:#8d97a0;
  --p1:#ff5a3c; --p2:#3ea6ff; --go:#ffd23f; --async:#ff9f1c; --ok:#4fd18b;
  --display:'Russo One','Arial Black',Impact,sans-serif;
  --body:'Golos Text',system-ui,-apple-system,'Segoe UI',sans-serif;
  color-scheme:dark;
}
[hidden]{display:none!important}
html,body{height:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--body);overflow:hidden;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
#app{height:100%;display:grid;grid-template-rows:auto 1fr auto}
.wrap{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
button:focus-visible,input:focus-visible{outline:2px solid var(--go);outline-offset:2px}

/* HUD */
.hud{background:var(--panel);border-bottom:1px solid var(--line)}
.hud .wrap{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;padding-block:8px}
.pchip{display:flex;flex-direction:column;gap:2px;min-width:0}
.pchip.right{align-items:flex-end;text-align:right}
.pname{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.pchip.right .pname{flex-direction:row-reverse}
.dot{width:9px;height:9px;border-radius:2px;flex:none}
.net{font-size:10px;font-weight:600;letter-spacing:.04em}
.net.on{color:var(--ok)} .net.off{color:var(--muted)}
.pspeed{font-family:var(--display);font-size:22px;line-height:1;font-variant-numeric:tabular-nums}
.pspeed small{font-family:var(--body);font-size:11px;color:var(--muted);margin-left:3px;font-weight:500}
.pips{display:flex;gap:3px;align-items:center;font-size:10px;color:var(--muted);letter-spacing:.04em}
.pchip.right .pips{flex-direction:row-reverse}
.pip{width:10px;height:4px;border-radius:1px;background:var(--line)}
.pip.on{background:var(--async)}
.pstat{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.mode{display:flex;flex-direction:column;align-items:center;gap:3px}
.modechip{font-family:var(--display);font-size:12px;letter-spacing:.08em;padding:3px 8px;border-radius:3px;background:var(--go);color:#14110a}
.modechip.async{background:var(--async)}
.turnno{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}

/* Stage */
#stage{position:relative;overflow:hidden;min-height:0}
#cv{position:absolute;inset:0;width:100%;height:100%;touch-action:none;display:block}
#toasts{position:absolute;top:10px;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.toast{background:rgba(18,21,24,.92);border:1px solid var(--line);padding:7px 12px;border-radius:6px;font-size:13px;font-weight:500;max-width:100%;text-align:center;animation:tin .2s ease-out}
.toast.warn{border-color:var(--async);color:var(--async)}
.toast.bad{border-color:var(--p1)}
@keyframes tin{from{transform:translateY(-6px);opacity:0}}
.hint{position:absolute;left:0;right:0;bottom:10px;text-align:center;font-size:12px;color:var(--muted);pointer-events:none;padding-left:16px;padding-right:16px}

/* Deck */
.deck{background:var(--panel);border-top:1px solid var(--line)}
.deck .wrap{display:flex;flex-direction:column;gap:8px;padding-block:8px 10px}
.tbar{height:5px;background:var(--line);border-radius:3px;overflow:hidden}
.tbar i{display:block;height:100%;width:100%;background:var(--go);transform-origin:left;transition:background .2s}
.tbar.low i{background:var(--p1)}
.status{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:13px;min-height:18px}
.status b{font-family:var(--display);font-weight:400;font-size:18px;font-variant-numeric:tabular-nums}
#statusText{color:var(--muted);min-width:0}
.btns{display:grid;grid-template-columns:auto auto 1fr;gap:8px}
.btn{height:46px;padding:0 14px;border-radius:8px;background:var(--panel2);border:1px solid var(--line);font-weight:600;font-size:14px;white-space:nowrap}
.btn.on{border-color:var(--async);color:var(--async)}
.btn.go{background:var(--go);color:#14110a;border-color:var(--go);font-family:var(--display);font-weight:400;font-size:17px;letter-spacing:.04em}
.btn:disabled{opacity:.35;cursor:default}

/* Overlays */
.ov{position:fixed;inset:0;background:rgba(10,12,14,.86);display:flex;align-items:center;justify-content:center;z-index:20;overflow:auto;padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px;width:100%;max-width:440px;display:flex;flex-direction:column;gap:16px;margin:auto}
.logo{font-family:var(--display);font-size:34px;line-height:.95;letter-spacing:.01em;transform:skewX(-8deg);transform-origin:left}
.logo span{color:var(--go)}
.sub{color:var(--muted);font-size:13px;margin-top:6px}
.lbl{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.seg button,.cars button{border:1px solid var(--line);background:var(--panel2);border-radius:8px;padding:10px;text-align:left;font-size:13px;font-weight:600;line-height:1.25}
.seg button[aria-pressed="true"],.cars button[aria-pressed="true"]{border-color:var(--go);box-shadow:inset 0 0 0 1px var(--go)}
.cars{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.cars button{padding:8px;display:flex;flex-direction:column;gap:6px;min-width:0}
.cars button:disabled{opacity:.45;cursor:default}
.carimg{display:block;width:100%;height:34px;object-fit:contain;margin-bottom:2px}
.tracks{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.tracks button{border:1px solid var(--line);background:var(--panel2);border-radius:8px;padding:6px 6px 8px;display:flex;flex-direction:column;gap:4px;text-align:left;font-size:12px;font-weight:600;line-height:1.2;min-width:0}
.tracks button[aria-pressed="true"]{border-color:var(--go);box-shadow:inset 0 0 0 1px var(--go)}
.tracks button:disabled{opacity:.45;cursor:default}
.tracks svg{display:block;width:100%;height:44px}
.tracks small{font-weight:500;font-size:10px;color:var(--muted);line-height:1.25}
.bars{display:grid;grid-template-columns:auto 1fr;gap:3px 6px;align-items:center;font-size:10px;font-weight:500;color:var(--muted)}
.bar{height:4px;background:var(--line);border-radius:2px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--fg)}
.rules{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:13px;line-height:1.4;color:#c9d0d6}
.rules b{color:var(--fg)}
.big{height:52px;border-radius:10px;background:var(--go);color:#14110a;font-family:var(--display);font-size:19px;letter-spacing:.04em}
.big:disabled{opacity:.4;cursor:default}
.ghostbtn{height:46px;border-radius:10px;border:1px solid var(--line);background:var(--panel2);font-weight:600;padding:0 14px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.h2{font-family:var(--display);font-size:24px;line-height:1.1;text-wrap:balance}
.p{font-size:14px;line-height:1.5;color:#c9d0d6;margin:0}
.small{font-size:12px;line-height:1.45;color:var(--muted);margin:0}
.res{width:100%;border-collapse:collapse;font-size:13px;font-variant-numeric:tabular-nums}
.res th{font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:600;text-align:right;padding:6px 4px;border-bottom:1px solid var(--line)}
.res th:first-child,.res td:first-child{text-align:left}
.res td{padding:8px 4px;text-align:right;border-bottom:1px solid var(--line)}
.res td.t{font-family:var(--display);font-size:16px}
.countdown{font-family:var(--display);font-size:44px;font-variant-numeric:tabular-nums;color:var(--go)}
.joinrow{display:grid;grid-template-columns:1fr auto;gap:8px}
.inp{height:46px;border-radius:10px;border:1px solid var(--line);background:var(--panel2);color:var(--fg);font:600 16px var(--body);padding:0 12px;min-width:0;text-transform:lowercase;-webkit-user-select:text;user-select:text}
.codebox{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.code{font-family:var(--display);font-size:26px;letter-spacing:.12em;color:var(--go)}
.linkbox{font-size:12px;color:var(--muted);word-break:break-all;-webkit-user-select:all;user-select:all;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.prow{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);font-size:14px}
.prow:last-child{border-bottom:0}
.prow .who{font-weight:600}
.prow .st{font-size:12px;font-weight:600;letter-spacing:.04em}
.st.ready{color:var(--ok)} .st.wait{color:var(--muted)} .st.off{color:var(--async)}
.err{color:var(--async);font-size:13px;line-height:1.45;margin:0}
@media (prefers-reduced-motion:reduce){.toast{animation:none}}
@media (max-width:360px){.btn{padding:0 10px;font-size:13px}.pspeed{font-size:19px}.seg button{font-size:12px;padding:8px}}

/* ---------- Mini App screens ---------- */
.scr{position:fixed;inset:0;background:var(--bg);overflow-y:auto;z-index:10;padding:max(12px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(20px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.scr .inner{max-width:480px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.topbar{display:flex;align-items:center;gap:10px;min-height:36px}
.topbar .h2{font-size:20px;flex:1}
.back{height:36px;padding:0 12px;border-radius:8px;border:1px solid var(--line);background:var(--panel2);font-weight:600;font-size:13px}
.pcard{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center}
.ava{width:48px;height:48px;border-radius:50%;background:var(--panel2);display:grid;place-items:center;font-family:var(--display);font-size:20px;overflow:hidden;border:1px solid var(--line)}
.ava img{width:100%;height:100%;object-fit:cover}
.pnick{font-weight:700;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prank{font-size:12px;color:var(--muted);margin-top:2px}
.rbox{text-align:right}
.rnum{font-family:var(--display);font-size:28px;line-height:1;color:var(--go)}
.rlbl{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.statrow{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:8px;text-align:center}
.stat b{display:block;font-family:var(--display);font-size:18px;font-weight:400}
.stat span{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.menu{display:flex;flex-direction:column;gap:8px}
.mbtn{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 10px;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px}
.mbtn b{font-size:16px}
.mbtn small{grid-column:1;font-size:12px;color:var(--muted);line-height:1.35}
.mbtn i{grid-row:1/3;grid-column:2;font-style:normal;color:var(--muted);font-size:20px}
.mbtn.primary{border-color:var(--go);background:linear-gradient(180deg,#2a2614,var(--panel))}
.mbtn.primary b{color:var(--go)}
.rooms{display:flex;flex-direction:column;gap:6px}
.roomrow{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.roomrow .who{font-weight:700}
.roomrow .meta{font-size:12px;color:var(--muted);margin-top:2px}
.roomrow button{height:38px;padding:0 14px;border-radius:8px;background:var(--go);color:#14110a;font-weight:700}
.roomrow button:disabled{background:var(--panel2);color:var(--muted);border:1px solid var(--line)}
.roomrow.mine{border-color:var(--go)}
.empty{font-size:13px;color:var(--muted);text-align:center;padding:18px 8px;border:1px dashed var(--line);border-radius:10px}
.searching{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--go);border-radius:12px;padding:12px}
.spin{width:18px;height:18px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--go);animation:spin 1s linear infinite;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}
.searching .txt{flex:1;font-size:13px;line-height:1.4}
.toprow{display:grid;grid-template-columns:32px 1fr auto;gap:8px;align-items:center;padding:9px 4px;border-bottom:1px solid var(--line);font-size:14px}
.toprow.me{background:rgba(255,210,63,.08);border-radius:6px}
.toprow .pl{font-family:var(--display);color:var(--muted);text-align:center}
.toprow .rt{font-family:var(--display)}
.toprow small{display:block;font-size:11px;color:var(--muted)}
.hist{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px}
.badge{font-size:11px;font-weight:700;padding:3px 7px;border-radius:4px;letter-spacing:.04em}
.badge.win{background:rgba(79,209,139,.15);color:var(--ok)} .badge.loss{background:rgba(255,90,60,.15);color:var(--p1)} .badge.draw{background:var(--panel2);color:var(--muted)}
.delta{font-family:var(--display);font-size:15px}
.delta.up{color:var(--ok)} .delta.down{color:var(--p1)}
.rdelta{font-family:var(--display);font-size:36px;text-align:center}
.center{text-align:center}
.netbar{position:fixed;left:0;right:0;top:0;z-index:50;background:var(--async);color:#14110a;font-size:12px;font-weight:700;text-align:center;padding:4px}
.field{display:flex;flex-direction:column;gap:6px}
.chip{display:inline-block;font-size:11px;padding:2px 6px;border-radius:4px;background:var(--panel2);border:1px solid var(--line);color:var(--muted);margin-left:6px;vertical-align:middle}