:root{
  --y:#ffd21a; --k:#111; --r:#e8322b; --paper:#f3ead2; --ink:#1a1613; --o:#ff7b1c; --g:#46d160;
  --font: Impact, Haettenschweiler, "Arial Narrow Bold", "Arial Black", sans-serif;
  --body: "Trebuchet MS", "Segoe UI", sans-serif;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px);
}
[hidden]{display:none!important}
html,body{margin:0;height:100%;overflow:hidden;background:#14110e;color:#fff;font-family:var(--body);
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:none}
#c{position:fixed;inset:0;width:100vw;height:100vh;display:block}
#loadmsg{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);font:28px var(--font);color:var(--y);letter-spacing:.06em;margin:0;text-align:center}
button{font-family:var(--font);letter-spacing:.04em;cursor:pointer;-webkit-appearance:none;appearance:none}

/* ---------- number chips and tags ---------- */
.chip{display:inline-block;min-width:1.7em;padding:0 .28em;text-align:center;font:inherit;font-family:var(--font);font-weight:normal;
  background:var(--c,#888);color:var(--k,#fff);border:2px solid rgba(0,0,0,.75);border-radius:3px;line-height:1.15;
  text-shadow:0 0 2px rgba(0,0,0,.35);box-sizing:border-box}
.chip.pk{background:#2a2a2a;border-color:#000;padding:0 .2em}
#tags{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.tag{position:absolute;left:0;top:0;font-size:12px;white-space:nowrap;will-change:transform;
  display:flex;flex-direction:column;align-items:center;margin-left:-14px;margin-top:-18px;opacity:.9}
.tag .chip{font-size:12px}
.tag.on .chip{box-shadow:0 0 0 2px var(--y),0 0 10px rgba(255,210,26,.8);font-size:14px}
.tag.me{margin-top:-34px;opacity:1}
.tag.me .you{font:13px var(--font);color:#111;background:var(--o);padding:0 5px;border:2px solid #111;border-radius:3px;position:relative;margin-bottom:5px}
.tag.me .you::after{content:"";position:absolute;left:50%;bottom:-8px;margin-left:-5px;border:5px solid transparent;border-top-color:#111}
.tag.pk{opacity:.8}

/* ---------- HUD ---------- */
#hud{position:fixed;inset:0;pointer-events:none;font-family:var(--font)}
#hud button{pointer-events:auto}
#h-tl{position:absolute;left:calc(12px + var(--safe-l));top:calc(10px + var(--safe-t));text-shadow:0 2px 0 #000}
#h-tl .brand{font-size:12px;letter-spacing:.12em;color:#f3ead2;opacity:.85}
#h-tl .row{display:flex;gap:8px;align-items:center;margin-top:3px}
.flag{font-size:13px;padding:1px 7px;border:2px solid #000;color:#111;background:#bbb;text-shadow:none;border-radius:2px}
.flag.green{background:#2fbf57}.flag.yellow{background:var(--y);animation:blink .6s steps(2) infinite}
.flag.checker{background:repeating-conic-gradient(#111 0 25%,#f2f2ea 0 50%) 0 0/10px 10px;color:#111;text-shadow:0 0 3px #fff,0 0 3px #fff}
.flag.rolling{background:#ddd}
#h-time{font-size:24px;color:#fff;min-width:54px}
#h-time.low{color:var(--r);animation:blink .5s steps(2) infinite}
#h-mode{font-size:12px;color:var(--y);letter-spacing:.08em;background:rgba(0,0,0,.55);padding:1px 6px}
@keyframes blink{50%{opacity:.35}}

#h-board{position:absolute;left:50%;top:calc(8px + var(--safe-t));transform:translateX(-50%);min-width:300px;max-width:min(430px,92vw);
  background:rgba(14,12,10,.62);border-top:4px solid #555;padding:4px 8px 6px;transition:border-color .3s,background .3s}
#h-board.hot{border-top-color:var(--y);background:rgba(14,12,10,.8)}
#h-board .bt{font-size:12px;letter-spacing:.16em;color:#bbb;text-align:center;margin-bottom:2px}
#h-board.hot .bt{color:var(--y)}
#h-occ .empty{font-size:15px;color:#8d877c;text-align:center;letter-spacing:.06em}
.occ{display:flex;align-items:center;gap:7px;height:27px;font-size:17px}
.occ .nm{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:130px}
.occ .bar{flex:1;height:18px;background:#2b2621;position:relative;border:2px solid #000;min-width:110px}
.occ .bar i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#d8a50f,var(--y));transition:width .2s linear}
.occ .bar em{position:absolute;right:5px;top:0;font-style:normal;font-size:14px;line-height:15px;color:#fff;text-shadow:0 1px 0 #000,0 0 3px #000}
.occ.me .nm{color:var(--o)}
.occ.wob{animation:wob .18s infinite}
.occ.slip .bar i{background:linear-gradient(90deg,#a3150e,var(--r))}
.occ.slip{animation:wob .1s infinite}
@keyframes wob{0%,100%{transform:translateX(0)}50%{transform:translateX(2px)}}
#h-rec{font-size:11px;color:#9b9486;text-align:center;letter-spacing:.08em;margin-top:2px}
#h-rec:empty{display:none}

#h-tr{position:absolute;right:calc(10px + var(--safe-r));top:calc(10px + var(--safe-t));display:flex;gap:6px}
#h-tr button{width:40px;height:36px;background:rgba(14,12,10,.7);color:#fff;border:2px solid #444;font-size:16px;border-radius:3px;padding:0}
#h-tr button.off{opacity:.45;text-decoration:line-through}

#h-caption{position:absolute;left:50%;bottom:calc(22% + var(--safe-b));transform:translate(-50%,10px);max-width:88vw;text-align:center;
  font-size:26px;color:#fff;letter-spacing:.03em;text-shadow:0 3px 0 #000,0 0 14px rgba(0,0,0,.8);opacity:0;transition:opacity .25s,transform .25s;white-space:nowrap}
#h-caption.show{opacity:1;transform:translate(-50%,0)}
#h-caption.big{font-size:40px;color:var(--y)}
#h-caption::before{content:"📣 ";font-size:.7em;vertical-align:middle}

#h-flash{position:absolute;left:50%;top:30%;transform:translate(-50%,-50%) scale(.8);font-size:64px;color:var(--y);opacity:0;
  text-shadow:0 5px 0 #000,0 0 30px rgba(0,0,0,.6);transition:opacity .2s,transform .3s cubic-bezier(.2,1.6,.4,1);white-space:nowrap}
#h-flash.show{opacity:1;transform:translate(-50%,-50%) scale(1)}

#h-me{position:absolute;left:calc(12px + var(--safe-l));bottom:calc(12px + var(--safe-b));max-width:min(440px,70vw);text-shadow:0 2px 0 #000}
#h-me .st{font-size:28px;color:#fff;line-height:1.05}
#h-me .st.good{color:var(--g)}#h-me .st.warn{color:var(--y)}#h-me .st.bad{color:var(--r)}
#h-me .st.blink{animation:blink .45s steps(2) infinite}
#h-me .sub{font-family:var(--body);font-size:14px;color:#eee;margin-top:1px}
#h-me .mini{font-size:12px;color:#bdb6a8;letter-spacing:.06em;margin-top:4px}
#h-me .dash{display:flex;align-items:flex-end;gap:14px;background:rgba(14,12,10,.62);padding:6px 12px 6px 8px;border-left:5px solid var(--y)}
#h-me .spd{font-size:52px;line-height:.9;color:#fff;min-width:78px;text-align:right}
#h-me .spd small{display:block;font-size:12px;color:#aaa;letter-spacing:.1em}
#h-me .dc{font-size:16px;color:#ddd;line-height:1.3}
#h-me .dc b{color:#fff;font-weight:normal}#h-me .dc b.hot{color:var(--r)}

#h-hint{position:absolute;left:50%;bottom:calc(12px + var(--safe-b));transform:translateX(-50%);font-size:14px;letter-spacing:.06em;color:#fff;
  background:rgba(14,12,10,.7);padding:4px 10px;opacity:0;transition:opacity .6s;white-space:nowrap}
#h-hint.show{opacity:1}
#h-arrow{position:absolute;top:50%;font-size:22px;color:#111;background:var(--y);padding:2px 10px;border:3px solid #111;opacity:0;transition:opacity .3s}
#h-arrow.show{opacity:1;animation:blink 1s steps(2) infinite}

#h-win{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;background:radial-gradient(ellipse at center,rgba(0,0,0,.35),rgba(0,0,0,0) 70%)}
#h-win .card{pointer-events:auto;background:rgba(14,12,10,.88);border:4px solid var(--y);padding:16px 24px 14px;text-align:center;min-width:300px;max-width:92vw;
  box-shadow:0 10px 0 rgba(0,0,0,.5);animation:pop .45s cubic-bezier(.2,1.5,.4,1)}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
#h-win .t{font-size:52px;color:var(--y);line-height:1;text-shadow:0 4px 0 #000}
#h-win .who{display:flex;align-items:center;justify-content:center;gap:10px;margin:8px 0 2px;font-size:30px}
#h-win .who .chip{font-size:30px}
#h-win .who .drv{font-family:var(--body);font-size:14px;color:#aaa}
#h-win .ln{font-family:var(--body);font-size:14px;color:#ddd;margin-bottom:10px}
#h-win table{margin:0 auto 12px;border-collapse:collapse;font-size:16px}
#h-win td,#h-win th{padding:1px 8px;text-align:right}
#h-win th{font-size:11px;color:#999;letter-spacing:.1em;font-weight:normal}
#h-win td.n{text-align:left;min-width:130px}
#h-win tr.me td{color:var(--o)}
#h-win .btns{display:flex;gap:10px;justify-content:center}
#h-win .auto{font-family:var(--body);font-size:12px;color:#999;margin-top:8px}
.btns button,.pcard button,#h-win button{font-size:22px;padding:8px 20px;background:var(--y);color:#111;border:3px solid #111;box-shadow:0 4px 0 #000;border-radius:2px}
.btns button:active,.pcard button:active,#h-win button:active{transform:translateY(3px);box-shadow:0 1px 0 #000}
button.ghost{background:transparent!important;color:#eee!important;border-color:#666!important;box-shadow:none!important}

/* ---------- screens ---------- */
#screens{position:fixed;inset:0;pointer-events:none}
.screen{position:absolute;inset:0;pointer-events:auto;display:flex}
.screen.dim{background:rgba(10,8,6,.55);align-items:center;justify-content:center}
#s-title{align-items:stretch;background:linear-gradient(90deg,rgba(12,10,8,.9) 0,rgba(12,10,8,.72) 34%,rgba(12,10,8,0) 62%)}
.tcard{width:min(520px,92vw);padding:calc(26px + var(--safe-t)) 26px calc(18px + var(--safe-b)) calc(30px + var(--safe-l));display:flex;flex-direction:column;justify-content:center;gap:12px;box-sizing:border-box;overflow:auto}
.tcard .kicker{font:14px var(--font);letter-spacing:.2em;color:#f3ead2;opacity:.8}
.tcard h1{margin:0;font:88px/0.86 var(--font);color:var(--y);letter-spacing:.01em;text-shadow:0 6px 0 #000,6px 6px 0 #7a1f1f;transform:rotate(-2deg);transform-origin:left}
.tcard .rule{font-size:15px;line-height:1.4;color:#eee;border-left:4px solid var(--r);padding-left:10px}
.tcard .rule b{color:#fff}
.modes{display:flex;flex-direction:column;gap:9px;margin-top:4px}
.modes button{display:flex;align-items:center;gap:12px;text-align:left;background:var(--paper);color:var(--ink);border:3px solid #111;padding:9px 14px;box-shadow:0 5px 0 #000;border-radius:2px;transition:transform .1s}
.modes button:hover{transform:translate(4px,0);background:#fff7de}
.modes button:active{transform:translateY(3px);box-shadow:0 2px 0 #000}
.modes button:nth-child(1){border-left:12px solid var(--o)}
.modes button:nth-child(2){border-left:12px solid #8e9297}
.modes button:nth-child(3){border-left:12px solid #2fbf57}
.modes .ic{font-size:32px;line-height:1}
.modes .tx b{display:block;font-size:26px;font-weight:normal;letter-spacing:.03em}
.modes .tx small{display:block;font-family:var(--body);font-size:13px;color:#4a4238;letter-spacing:0}
.keys{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
.keys span{font:11px var(--font);letter-spacing:.08em;color:#cfc8b8;border:1px solid #544c40;padding:2px 6px;border-radius:2px}
.pcard{background:rgba(14,12,10,.92);border:4px solid var(--y);padding:18px 28px;display:flex;flex-direction:column;gap:10px;min-width:260px;text-align:center}
.pcard h2{margin:0;font:48px var(--font);color:var(--y);text-shadow:0 4px 0 #000}
.pcard .sub{font-size:13px;color:#aaa;margin-top:-8px}
.pcard .toggles{display:flex;gap:8px}
.pcard button.small{font-size:14px;padding:6px 8px;flex:1}

/* ---------- touch controls ---------- */
#touch{position:fixed;inset:0;pointer-events:none;font-family:var(--font)}
#touch .tbtn,#touch .tpad{position:absolute;pointer-events:auto;background:rgba(14,12,10,.45);border:3px solid rgba(255,255,255,.35);color:rgba(255,255,255,.85);
  display:flex;align-items:center;justify-content:center;text-align:center;font-size:18px;line-height:1;border-radius:14px;touch-action:none}
#touch .tbtn.on{background:rgba(255,210,26,.55);border-color:var(--y);color:#111}
#touch .tbtn small{font-family:var(--body);font-size:10px}
#touch .tsteer{left:calc(14px + var(--safe-l));bottom:calc(18px + var(--safe-b));width:min(46vw,300px);height:110px;border-radius:55px}
#touch .tsteer span{font-size:12px;opacity:.5;position:absolute;bottom:8px}
#touch .tknob{width:84px;height:84px;border-radius:50%;background:rgba(255,210,26,.8);border:3px solid #111}
#touch .tgas{right:calc(14px + var(--safe-r));bottom:calc(18px + var(--safe-b));width:108px;height:150px;font-size:26px}
#touch .tbrake{right:calc(132px + var(--safe-r));bottom:calc(18px + var(--safe-b));width:100px;height:100px}
#touch .thand{right:calc(132px + var(--safe-r));bottom:calc(128px + var(--safe-b));width:100px;height:56px;font-size:14px}
#touch .ttow{left:calc(14px + var(--safe-l));bottom:calc(140px + var(--safe-b));width:70px;height:44px;font-size:15px}

/* ---------- small screens ---------- */
@media (max-width:760px), (max-height:520px){
  #h-tl .brand{display:none}
  #h-board{min-width:0;width:min(330px,56vw);padding:3px 6px 4px}
  .occ{font-size:14px;height:22px;gap:5px}.occ .nm{width:74px}.occ .bar{min-width:60px;height:15px}.occ .bar em{font-size:11px;line-height:12px}
  #h-caption{font-size:18px;white-space:normal;width:86vw}#h-caption.big{font-size:26px}
  #h-me .st{font-size:20px}#h-me .sub{font-size:12px}#h-me .spd{font-size:38px}
  #h-flash{font-size:40px}
  #h-win .t{font-size:36px}#h-win .who{font-size:22px}#h-win table{font-size:13px}
  .tcard h1{font-size:62px}
  .modes .tx b{font-size:20px}
  #h-hint{font-size:11px;white-space:normal;width:90vw;text-align:center}
  .tag,.tag .chip{font-size:10px}
}
html.touch #h-me{bottom:calc(178px + var(--safe-b))}
html.touch #h-hint{bottom:calc(160px + var(--safe-b))}
html.touch #h-caption{bottom:calc(210px + var(--safe-b))}
/* phone in portrait: everything the thumbs don't own stacks down the middle, nothing sits on the controls */
@media (orientation:portrait) and (max-width:760px){
  #s-title{background:linear-gradient(180deg,rgba(12,10,8,.92) 0,rgba(12,10,8,.8) 65%,rgba(12,10,8,.3) 100%)}
  .tcard{width:100vw;padding:calc(18px + var(--safe-t)) 18px calc(14px + var(--safe-b))}
  #h-board{top:calc(46px + var(--safe-t));width:min(340px,94vw)}
  #h-tr button{width:34px;height:30px;font-size:13px}
  #h-caption,html.touch #h-caption{bottom:calc(262px + var(--safe-b));font-size:17px;width:94vw}
  html.touch #h-me{bottom:calc(196px + var(--safe-b))}
  html.touch #h-me .mini{display:none}
  html.touch #h-hint{bottom:calc(172px + var(--safe-b));font-size:10px}
  #h-caption.big{font-size:22px}
  #h-flash{top:26%;font-size:32px}
  #h-me{max-width:94vw}
  #h-win .card{padding:12px 14px 10px}
  #touch .tsteer{width:min(52vw,220px);height:96px;border-radius:48px}
  #touch .tknob{width:72px;height:72px}
  #touch .tgas{width:92px;height:128px}
  #touch .tbrake{right:calc(112px + var(--safe-r));width:86px;height:86px}
  #touch .thand{right:calc(112px + var(--safe-r));bottom:calc(112px + var(--safe-b));width:86px;height:48px;font-size:12px}
  #touch .ttow{bottom:calc(126px + var(--safe-b));width:62px;height:40px;font-size:13px}
}