/* Palette tokens: generated from src/theme.ts seeds (main.ts rewrites them at boot, so seeds stay the source of truth). */
:root{--primary:#C1121F;--secondary:#A45A3A;--tertiary:#5C8DBA;--neutral:#0A0A0C;--p0:#000000;--p4:#210600;--p6:#290900;--p8:#320900;--p10:#3c0800;--p12:#460500;--p15:#550000;--p17:#5d0001;--p20:#690006;--p22:#710009;--p25:#7e000d;--p30:#930012;--p35:#a90016;--p40:#be0b1d;--p45:#ce2528;--p50:#de3633;--p55:#ee463e;--p60:#fe554a;--p65:#ff7162;--p70:#ff8a7a;--p75:#ff9f91;--p80:#ffb4a8;--p85:#ffc7be;--p87:#ffcfc7;--p90:#ffdad4;--p92:#ffe2dd;--p94:#ffe9e5;--p95:#ffedea;--p96:#fff0ee;--p98:#fff8f6;--p99:#fffbfb;--p100:#ffffff;--s0:#000000;--s4:#1c0900;--s6:#230e00;--s8:#2a1100;--s10:#321300;--s12:#391500;--s15:#451800;--s17:#4d1a00;--s20:#591d00;--s22:#602002;--s25:#68270a;--s30:#763316;--s35:#843f21;--s40:#924b2c;--s45:#a05737;--s50:#af6343;--s55:#bd704e;--s60:#cc7d5a;--s65:#db8a67;--s70:#ea9773;--s75:#f9a480;--s80:#ffb596;--s85:#ffc8b2;--s87:#ffd0bd;--s90:#ffdbcc;--s92:#ffe2d7;--s94:#ffeae1;--s95:#ffede6;--s96:#fff1eb;--s98:#fff8f5;--s99:#fffbfa;--s100:#ffffff;--t0:#000000;--t4:#00101d;--t6:#001525;--t8:#00192c;--t10:#001e32;--t12:#002238;--t15:#002841;--t17:#002d48;--t20:#003351;--t22:#003858;--t25:#003f62;--t30:#014b73;--t35:#1a5680;--t40:#2c628d;--t45:#3b6f9a;--t50:#497ba7;--t55:#5788b5;--t60:#6495c2;--t65:#72a2d0;--t70:#80b0de;--t75:#8ebded;--t80:#9ccbfb;--t85:#b4d8ff;--t87:#bfddff;--t90:#cee5ff;--t92:#d8eaff;--t94:#e2efff;--t95:#e7f2ff;--t96:#ecf4ff;--t98:#f6faff;--t99:#fafcff;--t100:#ffffff;--n0:#000000;--n4:#0e0e10;--n6:#131314;--n8:#171719;--n10:#1b1b1d;--n12:#1f1f21;--n15:#262627;--n17:#2a2a2b;--n20:#303031;--n22:#353536;--n25:#3b3b3c;--n30:#474748;--n35:#525254;--n40:#5e5e60;--n45:#6a6a6c;--n50:#777778;--n55:#848485;--n60:#909092;--n65:#9e9e9f;--n70:#ababac;--n75:#b8b8ba;--n80:#c6c6c8;--n85:#d4d4d6;--n87:#dadadb;--n90:#e2e2e4;--n92:#e8e8ea;--n94:#eeeeef;--n95:#f0f0f2;--n96:#f3f3f5;--n98:#f9f9fb;--n99:#fcfcfe;--n100:#ffffff}
:root{--paper:var(--n8);--ink:var(--n75);--muted:var(--n45);--line:var(--n20);--orange:var(--s35);--mint:var(--n30);--cream:var(--n4);--shadow:var(--n80);--mono:'Courier New',monospace;--display:'Arial Black',Impact,'Arial',sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif}button,input,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}button:focus-visible,a:focus-visible,input:focus-visible,canvas:focus-visible{outline:3px solid var(--p55);outline-offset:4px}button:hover:not(:disabled){filter:brightness(.96)}[hidden]{display:none!important}.shell{max-width:1220px;margin:auto;padding:0 36px}.masthead{height:100px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;gap:14px;align-items:center;color:var(--ink);text-decoration:none;font-weight:900;font-size:23px;letter-spacing:-1.2px}.brand-mark{background:var(--orange);display:grid;place-items:center;width:48px;height:48px;font-size:24px;border-radius:12px;transform:rotate(-8deg);box-shadow:2px 3px 0 var(--ink);letter-spacing:-2px}.brand-sub{display:block;font:9px var(--mono);font-weight:700;letter-spacing:1.2px;margin-top:7px}.top-tools{display:flex;align-items:center;gap:18px}.tool,.mode{background:none;border:0;font:10px var(--mono);font-weight:700;padding:10px 0;color:var(--ink);white-space:nowrap}.tool span{border:1px solid var(--n30);display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;margin-left:4px}.mode{padding:9px 11px;background:var(--n10);border:1px solid var(--n20);border-radius:5px;display:flex;align-items:center;gap:7px}.mode i,.kicker i{display:inline-block;width:6px;height:6px;background:var(--orange);border-radius:50%}.mode.live i{background:var(--t55)}.game-shell{border:2px solid var(--ink);border-radius:14px;overflow:hidden;box-shadow:0 7px 0 var(--n25);background:var(--cream)}.scoreboard{height:78px;display:flex;justify-content:space-between;align-items:center;padding:12px 23px;border-bottom:1px solid var(--line)}.score{display:flex;align-items:center;gap:12px;width:40%}.rival-score{text-align:right;justify-content:flex-end}.avatar{width:39px;height:39px;display:grid;place-items:center;border:1.5px solid var(--ink);font-weight:900;font-size:20px}.human-avatar{border-radius:50%;background:var(--s25)}.robot-avatar{border-radius:9px;background:var(--n22)}.eyebrow{display:block;font:9px var(--mono);font-weight:700;letter-spacing:1px;color:var(--n50);margin-bottom:4px}.score strong{display:block;font:900 27px var(--display);line-height:1}.score small{font:10px var(--mono);font-weight:700;letter-spacing:0;color:var(--n50)}.flair{font:9px var(--mono);padding:6px 8px;border:1px solid var(--n15);border-radius:4px;color:var(--n45)}.clock{position:relative;text-align:center;min-width:100px}.clock .eyebrow{font-size:8px}.clock strong{font:700 28px var(--mono);letter-spacing:-2px}.clock.urgent strong{color:var(--p55)}#pause-wrap{position:absolute;left:calc(100% + 2px);top:15px}#pause{border:0;background:var(--n8);color:var(--ink);border-radius:4px;font:12px var(--mono);width:22px;height:23px;padding:0}.project-bar{padding:11px 23px;display:flex;align-items:center;gap:22px;background:var(--n6);border-bottom:1px solid var(--n20);min-height:57px}.project-bar .eyebrow{font-size:8px;margin-bottom:3px}.project-bar strong{font-size:12px;letter-spacing:.6px}.recipe{display:flex;gap:7px;flex:1}.recipe button{font:9px var(--mono);font-weight:700;padding:7px 8px;border:1px solid var(--n45);border-radius:4px;color:var(--n65);background:var(--n8);white-space:nowrap}.recipe button.got{opacity:.55;text-decoration:line-through}.recipe span{font:12px var(--mono);align-self:center;color:var(--n35)}.project-tip{font:10px var(--mono);color:var(--n40);text-align:right;max-width:190px;line-height:1.4}.stage{position:relative;isolation:isolate;background:var(--n75)}canvas{display:block;width:100%;height:auto;aspect-ratio:1100 / 650;touch-action:none}.menu{position:absolute;inset:0;pointer-events:none;display:flex;align-items:center}.menu-copy{pointer-events:auto;margin-left:7%;max-width:53%;padding:6px 0 20px}.kicker{font:9px var(--mono);letter-spacing:1.7px;font-weight:700;display:block}.kicker i{margin-right:6px}h1{font-family:var(--display);font-weight:900;font-size:clamp(34px,5.3vw,69px);line-height:.99;letter-spacing:-3.5px;margin:20px 0 17px}h1 em,h2 em{color:var(--s45);font-style:normal}.menu-copy>p{font-size:14px;line-height:1.65;margin:0;color:var(--n50)}.menu-options{display:flex;align-items:center;gap:13px;margin:19px 0 13px;font:9px var(--mono);font-weight:700}.menu-options>span{color:var(--n40)}.menu-options button{border:0;border-bottom:1px dashed var(--n35);background:none;font:10px var(--mono);font-weight:700;padding:3px 0;color:var(--ink)}.primary{background:var(--orange);color:var(--n75);border:1.5px solid var(--ink);border-radius:5px;padding:15px 22px;font:900 11px var(--mono);letter-spacing:1px;box-shadow:3px 3px 0 var(--ink);white-space:nowrap}.primary:active:not(:disabled){transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}.start{min-width:246px;display:flex;justify-content:space-between;align-items:center;text-align:left}.start span{font-size:20px;line-height:1}.menu-note{display:block;font:9px var(--mono);color:var(--n40);margin-top:14px}.toast{position:absolute;bottom:8%;left:50%;transform:translate(-50%,10px);opacity:0;background:var(--n75);color:var(--n6);font:11px var(--mono);line-height:1.4;max-width:85%;width:max-content;padding:12px 18px;border:1px solid var(--n25);border-radius:5px;text-align:center;pointer-events:none;transition:opacity .18s,transform .18s;z-index:6}.toast.show{opacity:1;transform:translate(-50%,0)}.jev-line{display:flex;align-items:center;gap:10px;min-height:54px;padding:10px 21px;border-top:1px solid var(--ink);background:var(--n8)}.mini-jev{display:inline-grid;place-items:center;background:var(--n40);border:1px solid var(--n65);width:26px;height:24px;border-radius:6px;font:bold 11px var(--mono);flex-shrink:0}.jev-tag{font:bold 9px var(--mono);white-space:nowrap;letter-spacing:.5px}.jev-line p{margin:0;flex:1;font:12px Georgia,serif;font-style:italic;color:var(--n55);line-height:1.4}.inspect{font:bold 8px var(--mono);background:none;border:0;padding:8px;color:var(--n50);white-space:nowrap}.controls{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:23px 0 15px}.movement{display:flex;align-items:center;gap:12px}.movement strong{font:bold 9px var(--mono);letter-spacing:.5px;display:block}.movement>div>span{font:9px var(--mono);display:block;color:var(--n40);margin-top:5px}.key-grid{display:flex;flex-direction:column;align-items:center;gap:2px}.key-grid span{display:flex;gap:3px}kbd{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--n30);border-bottom-width:2px;border-radius:3px;font:bold 9px var(--mono);min-width:18px;height:17px;color:var(--n50);background:var(--n4)}.actions{display:flex;gap:8px}.action{display:flex;align-items:center;gap:9px;background:var(--n4);border:1px solid var(--n25);border-bottom-width:3px;border-radius:5px;font:bold 9px var(--mono);color:var(--ink);padding:12px 14px;min-height:45px}.action kbd{min-width:21px;padding:0 4px}.action-work{background:var(--n8)}.action.idea{background:var(--s22);border-color:var(--s40)}.energy-mini{font:bold 9px var(--mono);background:var(--s10);border-radius:3px;padding:3px}.bottomline{display:flex;justify-content:space-between;gap:18px;padding:4px 0 16px;font:8px var(--mono);font-weight:700;color:var(--n40);line-height:1.5}.bottomline span:first-child{max-width:60%}.bottomline b{color:var(--s40);font-size:14px;margin-left:8px}.pause-panel,.end-panel{position:absolute;inset:9% 19%;z-index:8;background:var(--n4);border:2px solid var(--ink);border-radius:9px;box-shadow:7px 8px 0 color-mix(in srgb,var(--n0) 50%,transparent);display:flex;align-items:center;justify-content:center;flex-direction:column;padding:30px;text-align:center}h2{font:900 43px/.99 var(--display);letter-spacing:-2px;margin:20px 0 15px}.pause-panel p,.end-panel>p{font-size:12px;line-height:1.5;color:var(--n45);margin:0 0 20px}.text-button{background:none;border:0;border-bottom:1px dotted var(--n35);font:10px var(--mono);padding:3px;margin-top:16px;color:var(--n45)}.end-stats{display:flex;gap:25px;margin:0 0 18px}.end-stats strong{display:block;font:900 30px var(--mono)}.end-stats span{font:9px var(--mono)}.end-panel .end-quip{font:italic 12px Georgia,serif;margin:0 0 20px}.end-panel h2{font-size:40px;margin-top:14px}.end-panel .kicker{font-size:8px}dialog{color:var(--ink);background:var(--n6);border:2px solid var(--ink);border-radius:12px;padding:35px;box-shadow:7px 9px 0 color-mix(in srgb,var(--n0) 40%,transparent);max-width:calc(100vw - 28px);width:640px;max-height:90dvh}dialog::backdrop{background:color-mix(in srgb,var(--n0) 77%,transparent);backdrop-filter:blur(3px)}dialog h2{font-size:42px;margin:17px 0}dialog p{font-size:12px;color:var(--n45);line-height:1.6}dialog .close{position:absolute;right:16px;top:12px;width:30px;height:30px;border:0;background:none;font:27px Arial;color:var(--n50)}dialog label{display:block;font:bold 9px var(--mono);letter-spacing:1px;margin:25px 0 9px}.idea-entry{display:flex;gap:10px}.idea-entry input{min-width:0;flex:1;border:1.5px solid var(--n35);border-radius:5px;padding:13px;background:var(--n0);color:var(--ink);font:12px Arial}.idea-entry button{padding:13px 17px}.example-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:18px}.example-chips button{background:var(--n10);border:1px solid var(--n20);border-radius:4px;font:10px var(--mono);padding:8px;color:var(--n55);line-height:1.4}.idea-result{min-height:34px}.dialog-foot{display:flex;justify-content:space-between;gap:12px;padding-top:16px;border-top:1px solid var(--n17);font:8px var(--mono);color:var(--n45)}.info-dialog{width:600px}.info-dialog h3{font:bold 12px var(--mono);margin:22px 0 7px}.info-dialog p{margin:6px 0 10px}.info-dialog code{font:10px var(--mono);background:var(--n10);padding:3px 5px;overflow-wrap:anywhere}.info-dialog .primary{margin-top:18px}.inspector-row{display:flex;justify-content:space-between;gap:15px;font:11px var(--mono);padding:9px 0;border-bottom:1px solid var(--n17)}.inspector-row span{color:var(--n45)}footer{text-align:center;font:8px/1.5 var(--mono);padding:10px 25px 18px;color:var(--n35)}body.in-menu .scoreboard{opacity:.65}body.in-menu .controls{opacity:.65}body.in-menu #pause{visibility:hidden}@media(min-width:1450px){.shell{max-width:1280px}.masthead{height:105px}}@media(max-width:950px){.shell{padding:0 18px}.brand{font-size:18px;gap:10px}.brand-sub{font-size:7px;letter-spacing:.7px}.top-tools{gap:10px}.tool{font-size:9px}.project-tip{display:none}.flair{display:none}.menu-copy{margin-left:7%}h1{font-size:6.3vw;letter-spacing:-2.5px}.menu-copy>p{font-size:12px}.kicker{font-size:8px}.menu-options{margin:12px 0 10px}.menu-note{font-size:8px}.start{min-width:205px;padding:12px 16px}.controls{gap:8px}.action{padding:10px;font-size:8px;gap:6px}.movement>div>span{max-width:170px;line-height:1.5}.bottomline{font-size:7px}.pause-panel,.end-panel{inset:6% 15%;padding:20px}.end-panel h2{font-size:30px}.end-panel>p{margin-bottom:10px;font-size:11px}.end-stats{margin-bottom:8px}.end-stats strong{font-size:24px}}@media(max-width:650px){.masthead{height:77px}.shell{padding:0 10px}.brand-mark{width:34px;height:34px;font-size:20px;border-radius:9px}.brand{font-size:15px;letter-spacing:-.8px}.brand-sub{font-size:5.5px;letter-spacing:.3px;margin-top:5px}.top-tools{gap:8px}.mode{font-size:7px;padding:7px;gap:5px}.tool{font-size:0}.tool span{font-size:11px;width:20px;height:20px;margin:0}#sound{font-size:7px;max-width:28px;white-space:normal;line-height:1.4}.game-shell{border-radius:9px}.scoreboard{height:60px;padding:9px 12px}.score{gap:7px}.avatar{width:27px;height:27px;font-size:14px}.eyebrow{font-size:7px;letter-spacing:.4px}.score strong{font-size:20px}.score small{font-size:7px}.clock{min-width:58px}.clock strong{font-size:23px}.clock .eyebrow{font-size:6px}#pause-wrap{top:12px;left:calc(100% + 1px)}#pause{width:15px;height:20px;font-size:9px}.project-bar{padding:8px 10px;gap:12px;min-height:49px}.project-bar strong{font-size:9px}.project-bar .eyebrow{font-size:6px}.recipe{gap:4px}.recipe button{font-size:7px;padding:6px 5px}.recipe span{font-size:9px}.stage{min-height:350px;overflow:hidden}canvas{width:100%;height:100%;position:absolute;inset:0;object-fit:contain}.menu-copy{margin-left:6%;max-width:58%;padding:0}.menu{background:linear-gradient(90deg,var(--n8) 0%,var(--n8) 45%,color-mix(in srgb,var(--n8) 85%,transparent) 55%,transparent 80%)}h1{font-size:40px;margin:14px 0;letter-spacing:-2px}.menu-copy .kicker{font-size:6px;letter-spacing:1px}.menu-copy>p{font-size:10px;line-height:1.5}.menu-options{margin:12px 0 8px;font-size:7px;gap:8px}.menu-options button{font-size:8px}.start{min-width:184px;font-size:9px;padding:12px}.menu-note{font-size:6px;line-height:1.5;max-width:210px;margin-top:10px}.jev-line{padding:8px 10px;gap:7px;min-height:54px}.jev-tag{font-size:7px}.jev-line p{font-size:10px}.inspect{font-size:0;width:23px;padding:0}.inspect::after{content:'↗';font-size:18px}.mini-jev{width:21px;height:22px}.controls{padding-top:20px;flex-direction:column-reverse;align-items:stretch;gap:12px}.actions{gap:6px}.action{flex:1;justify-content:center;padding:12px 6px;min-height:48px;gap:5px;font-size:8px}.action kbd{font-size:7px;min-width:14px;padding:0 3px}.energy-mini{font-size:7px}.movement{justify-content:center;gap:10px}.movement strong{font-size:8px}.movement>div>span{max-width:none;font-size:8px}.key-grid{display:none}.bottomline{flex-direction:column;align-items:center;text-align:center;gap:4px;padding-top:5px}.bottomline span:first-child{max-width:100%;font-size:7px}.bottomline span:last-child{font-size:6px}.toast{font-size:9px;max-width:95%;bottom:4%;padding:8px 11px}.pause-panel,.end-panel{inset:12px;padding:20px}.pause-panel h2,.end-panel h2{font-size:29px}.pause-panel p,.end-panel p{font-size:10px}.end-panel .kicker{font-size:7px}.end-stats{gap:22px;margin:0 0 12px}.end-stats strong{font-size:22px}.end-stats span{font-size:7px}.end-panel .end-quip{font-size:10px}.end-panel .primary,.pause-panel .primary{font-size:9px;padding:13px 17px}.end-panel .text-button{font-size:8px;margin-top:13px}dialog{padding:27px 22px}.idea-entry{flex-wrap:wrap}.idea-entry input{flex-basis:100%;font-size:16px}.idea-entry button{flex:1}dialog h2{font-size:34px}dialog p{font-size:11px}.dialog-foot{font-size:7px}.example-chips button{font-size:9px}.info-dialog h3{font-size:11px}.inspector-row{font-size:9px}footer{font-size:6px}}@media(max-width:650px) and (orientation:landscape){.stage{min-height:310px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important;animation:none!important}}



/* ── Visible scoring, race context and HUD motion ─────────────────────────── */
.score>div{min-width:0}
.flair{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:54px;padding:5px 9px;border:1.5px solid var(--n17);border-radius:6px;background:var(--n4);color:var(--n45);transform-origin:center}
.flair strong{font:900 20px var(--mono);letter-spacing:-1px;color:var(--ink);line-height:1}
.flair span{font:bold 7px var(--mono);letter-spacing:1px}
.player-score .flair{border-color:var(--s22)}.rival-score .flair{border-color:var(--n22)}
.pips{display:flex;gap:4px;margin-top:6px}.rival-score .pips{justify-content:flex-end}
.pips i{width:16px;height:6px;border-radius:3px;background:var(--n10);border:1px solid var(--n20);transition:background .3s,transform .3s}
.player-score .pips i.on{background:var(--s30);border-color:var(--s55)}.rival-score .pips i.on{background:var(--n35);border-color:var(--n60)}
.pips i.on{transform:scaleY(1.25)}
.lead-tag{display:none;font:900 7px var(--mono);letter-spacing:1px;background:var(--p50);color:var(--n4);border-radius:3px;padding:2px 5px;margin:0 4px;vertical-align:1px}
.score.leading .lead-tag{display:inline-block;animation:lead-in .35s ease-out}
.score.leading .avatar{box-shadow:0 0 0 3px var(--s20),0 0 14px color-mix(in srgb,var(--s20) 60%,transparent)}
.bump{animation:bump .45s cubic-bezier(.3,1.6,.5,1)}
/* A ship pops the avatar and the number, not the whole block, so nothing clips the scoreboard edge. */
.score.bump{animation:none}
.score.bump .avatar,.score.bump>div>strong{animation:bump .5s cubic-bezier(.3,1.6,.5,1)}
.player-score>div>strong{transform-origin:left center}.rival-score>div>strong{transform-origin:right center}
@keyframes bump{0%{transform:scale(1)}35%{transform:scale(1.22)}100%{transform:scale(1)}}
@keyframes lead-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.clock.urgent strong{animation:urgent 1s ease-in-out infinite}
@keyframes urgent{50%{transform:scale(1.1);color:var(--p45)}}
.project-tip{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.rival-tip{font:bold 9px var(--mono);color:var(--n60);background:var(--n8);border:1px solid var(--n20);border-radius:10px;padding:3px 8px;white-space:nowrap}
.energy-meter{position:relative;width:46px;height:7px;border-radius:4px;background:var(--s10);border:1px solid var(--s40);overflow:hidden}
.energy-meter i{position:absolute;inset:0 auto 0 0;width:100%;background:linear-gradient(90deg,var(--p40),var(--s17));transition:width .25s}
.action.idea.charged{animation:charged 1.6s ease-in-out infinite}
.action.idea.cooling .energy-meter i{background:var(--n30)}
@keyframes charged{50%{box-shadow:0 0 0 3px color-mix(in srgb,var(--s17) 53%,transparent)}}
.end-breakdown{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:0 0 14px;font:9px var(--mono);color:var(--n50)}
.end-breakdown span{background:var(--n8);border:1px solid var(--n17);border-radius:4px;padding:5px 7px}
.end-breakdown b{color:var(--ink);font-size:11px}
.end-breakdown .best{background:var(--n8);border-color:var(--n20);color:var(--n60);font-weight:700}
.end-breakdown .best.new{background:var(--s20);border-color:var(--s50);color:var(--n75);animation:bump .6s cubic-bezier(.3,1.6,.5,1) .3s both}
@media(max-width:950px){.project-tip{display:none}.flair{display:flex;min-width:44px;padding:4px 6px}.flair strong{font-size:16px}.pips i{width:12px}}
@media(max-width:650px){.score{width:42%;gap:6px}.score .avatar{display:none}.score>div{white-space:nowrap}.flair{min-width:34px;padding:3px 4px;border-radius:4px}.flair strong{font-size:13px}.flair span{font-size:5px;letter-spacing:.3px}.pips{gap:2px;margin-top:4px}.pips i{width:8px;height:4px}.lead-tag{font-size:5px;padding:1px 3px;margin:0 2px}.energy-meter{width:26px;height:5px}.end-breakdown{font-size:7px;gap:4px;margin-bottom:8px}.end-breakdown span{padding:3px 5px}.end-breakdown b{font-size:9px}}
.action.throw{background:var(--n12);border-color:var(--p35)}
.action.throw span{min-width:92px;text-align:left}
.action.throw.armed{background:var(--p17);animation:charged 1.6s ease-in-out infinite}
@media(max-width:950px){.action.throw span{min-width:0}}
@media(max-width:650px){.actions{display:grid;grid-template-columns:1fr 1fr;gap:6px}.action{padding:10px 6px;min-height:44px}}

/* ── Dark tonal theme roles (from the reference design system) ──────────────
   primary = red #C1121F, secondary = rust #A45A3A, tertiary = blue #5C8DBA, neutral = #0A0A0C.
   You are primary; Jev is tertiary; Big Ideas are secondary. */
:root{--paper:var(--n4);--ink:var(--n90);--muted:var(--n60);--line:var(--n22);--orange:var(--p80);--mint:var(--t70);--cream:var(--n10);--shadow:var(--n0);color-scheme:dark}
body{background:var(--paper);color:var(--ink)}
button:focus-visible,a:focus-visible,input:focus-visible,canvas:focus-visible{outline-color:var(--p70)}
.brand{color:var(--n95)}.brand-mark{background:var(--primary);color:var(--n98);box-shadow:2px 3px 0 var(--p20)}
.tool,.mode{color:var(--n85)}.tool span{border-color:var(--n40)}
.mode{background:var(--n15);border-color:var(--n30)}.mode i,.kicker i{background:var(--p60)}.mode.live i{background:var(--t60)}
.game-shell{border-color:var(--n25);background:var(--n10);box-shadow:0 7px 0 var(--n0)}
.scoreboard,.project-bar{border-color:var(--line)}.project-bar{background:var(--n8)}
.eyebrow,.score small{color:var(--n60)}
.human-avatar{background:var(--primary);color:var(--n98);border-color:var(--p30)}.robot-avatar{background:var(--t60);color:var(--t10);border-color:var(--t30)}
.flair{background:var(--n12);border-color:var(--n30);color:var(--n60)}.flair strong{color:var(--n95)}
.player-score .flair{border-color:var(--p40)}.rival-score .flair{border-color:var(--t40)}
.pips i{background:var(--n20);border-color:var(--n30)}.player-score .pips i.on{background:var(--p60);border-color:var(--p30)}.rival-score .pips i.on{background:var(--t60);border-color:var(--t30)}
.lead-tag{background:var(--primary);color:var(--n98)}
.score.leading .avatar{box-shadow:0 0 0 3px var(--p80),0 0 16px color-mix(in srgb,var(--p60) 60%,transparent)}
.rival-score.leading .avatar{box-shadow:0 0 0 3px var(--t80),0 0 16px color-mix(in srgb,var(--t60) 60%,transparent)}
.clock strong{color:var(--n95)}.clock.urgent strong{color:var(--p60)}@keyframes urgent{50%{transform:scale(1.1);color:var(--p70)}}
#pause{background:var(--n20);color:var(--n90)}
.recipe button{background:var(--n20);border-color:var(--n35);color:var(--n90)}.recipe span{color:var(--n50)}
.project-tip{color:var(--n60)}.rival-tip{background:var(--t20);border-color:var(--t40);color:var(--t90)}
.stage{background:var(--neutral)}
h1,h2{color:var(--n95)}h1 em,h2 em{color:var(--p80)}
.menu-copy>p,.menu-note,.menu-options>span{color:var(--n60)}.menu-options button{color:var(--n90);border-color:var(--n40)}
.primary{background:var(--p80);color:var(--p20);border-color:var(--p30);box-shadow:3px 3px 0 var(--p30)}
.primary:active:not(:disabled){box-shadow:1px 1px 0 var(--p30)}
.text-button{color:var(--n70);border-color:var(--n40)}
.toast{background:var(--n90);color:var(--n10);border-color:var(--n60)}
.jev-line{background:var(--n8);border-top-color:var(--n25)}.mini-jev{background:var(--t60);border-color:var(--t30);color:var(--t10)}
.jev-tag{color:var(--n80)}.jev-line p{color:var(--t80)}.inspect{color:var(--n60)}
.movement strong{color:var(--n90)}.movement>div>span{color:var(--n50)}
kbd{background:var(--n8);border-color:var(--n35);color:var(--n70)}
.action{background:var(--n15);border-color:var(--n30);color:var(--n90)}.action-work{background:var(--n20)}
.action.idea{background:var(--s25);border-color:var(--s50);color:var(--s90)}.action.idea kbd{background:var(--s15);border-color:var(--s40);color:var(--s80)}
.energy-mini{background:var(--s15);color:var(--s90)}.energy-meter{background:var(--s15);border-color:var(--s40)}.energy-meter i{background:linear-gradient(90deg,var(--primary),var(--s70))}
.action.idea.cooling .energy-meter i{background:var(--n40)}
@keyframes charged{50%{box-shadow:0 0 0 3px color-mix(in srgb,var(--s70) 55%,transparent)}}
.action.throw{background:var(--p20);border-color:var(--p40);color:var(--p90)}.action.throw kbd{background:var(--p10);border-color:var(--p40);color:var(--p80)}
.action.throw.armed{background:var(--p30)}
.bottomline{color:var(--n55)}.bottomline b{color:var(--s70)}
.pause-panel,.end-panel{background:var(--n12);border-color:var(--n30);box-shadow:7px 8px 0 color-mix(in srgb,var(--n0) 60%,transparent)}
.pause-panel p,.end-panel>p{color:var(--n70)}.end-panel .end-quip{color:var(--t80)}.end-stats strong{color:var(--n95)}.end-stats span{color:var(--n60)}
.end-breakdown{color:var(--n65)}.end-breakdown span{background:var(--n17);border-color:var(--n30)}.end-breakdown b{color:var(--n95)}
.end-breakdown .best{background:var(--t20);border-color:var(--t40);color:var(--t90)}.end-breakdown .best.new{background:var(--p80);border-color:var(--p40);color:var(--p20)}
dialog{background:var(--n12);color:var(--n90);border-color:var(--n30);box-shadow:7px 9px 0 color-mix(in srgb,var(--n0) 60%,transparent)}
dialog::backdrop{background:color-mix(in srgb,var(--n0) 78%,transparent)}dialog p{color:var(--n70)}dialog .close{color:var(--n70)}
.idea-entry input{background:var(--n6);border-color:var(--n35);color:var(--n90)}
.example-chips button{background:var(--n20);border-color:var(--n30);color:var(--n85)}
.dialog-foot{border-top-color:var(--n25);color:var(--n60)}.info-dialog code{background:var(--n20)}
.inspector-row{border-bottom-color:var(--n25)}.inspector-row span{color:var(--n60)}
footer{color:var(--n45)}
@media(max-width:650px){.menu{background:linear-gradient(90deg,var(--n8) 0%,var(--n8) 45%,color-mix(in srgb,var(--n8) 85%,transparent) 55%,transparent 80%)}}

/* ── Full-viewport layout ────────────────────────────────────────────────────
   The page is one column exactly the height of the window. HUD bars take what they need; the stage
   takes the rest, and .frame fills it edge to edge. The renderer fits the workshop inside and draws
   extra tabletop out to the edges (no letterbox bars), so the canvas and its overlays (menu,
   toasts, panels) always line up. */
html,body{height:100%}body{overflow:hidden}
.shell{max-width:none;height:100dvh;display:flex;flex-direction:column;padding:0 clamp(10px,1.6vw,28px)}
.masthead{height:auto;flex:none;padding:10px 0}
.game-shell{flex:1;min-height:0;display:flex;flex-direction:column}
.scoreboard,.project-bar,.jev-line,.controls,.bottomline,footer{flex:none}
.stage{flex:1;min-height:0;container-type:size;position:relative;overflow:hidden}
.frame{position:absolute;inset:0;container-type:inline-size}
canvas{width:100%;height:100%;aspect-ratio:auto}
.controls{padding:10px 0 6px}.bottomline{padding:0 0 4px}footer{padding:0 0 8px}
@media(min-width:651px){
  /* Overlay type scales with the board, not the window. */
  .menu-copy h1{font-size:clamp(26px,6.2cqw,69px);letter-spacing:-.05em;margin:1.6cqw 0 1.4cqw}
  .menu-copy>p{font-size:clamp(11px,1.3cqw,14px)}.start{min-width:clamp(180px,22cqw,246px)}
  .pause-panel,.end-panel{overflow:auto}.pause-panel h2,.end-panel h2{font-size:clamp(22px,3.7cqw,43px)}
  .end-stats strong{font-size:clamp(20px,2.8cqw,30px)}.end-panel>p,.end-panel .end-quip{margin-bottom:clamp(6px,1.6cqw,20px)}
}
/* Phones: the frame still fills the stage; the canvas draws at exactly its box's shape. */
@media(max-width:650px){.stage{min-height:0}canvas{position:static;object-fit:fill}}
/* Short windows: tighten the chrome so the board keeps the space. */
@media(max-height:820px){.masthead{padding:6px 0}.brand-mark{width:38px;height:38px;font-size:20px}.brand{font-size:19px}.controls{padding:8px 0 4px}.jev-line{min-height:44px;padding-top:6px;padding-bottom:6px}}
@media(max-height:620px){.brand-sub,.bottomline,.controls .movement{display:none}.scoreboard{height:54px;padding-top:6px;padding-bottom:6px}.project-bar{min-height:38px;padding-top:4px;padding-bottom:4px}.jev-line{min-height:34px}.action{min-height:38px;padding-top:7px;padding-bottom:7px}.pips{margin-top:3px}}
@media(max-height:460px){.masthead{padding:4px 0}.brand-mark{width:28px;height:28px;font-size:15px;border-radius:7px}.brand{font-size:15px}.jev-line,footer{display:none}.scoreboard{height:46px}.score strong{font-size:20px}.clock strong{font-size:22px}.project-bar{min-height:32px}.controls{padding:5px 0 3px}.action{min-height:34px;padding:5px 8px}}
/* True full screen (Fullscreen API): drop the page furniture, keep every game control. */
body.is-fullscreen .brand-sub,body.is-fullscreen .bottomline,body.is-fullscreen footer{display:none}
body.is-fullscreen .masthead{padding:4px 0}body.is-fullscreen .shell{padding:0 clamp(8px,1vw,20px)}
body.is-fullscreen .game-shell{border-radius:10px}
#fullscreen[aria-pressed="true"]{color:var(--p80)}
/* Controls now live inside the game card. */
.controls{padding:10px clamp(12px,1.6vw,23px);border-top:1px solid var(--line)}
@media(max-width:650px){.controls{padding:12px 10px 10px}}
/* Landscape windows: the board is height-limited, so HUD panels move into a left rail and the
   board takes every remaining pixel of height. Portrait windows keep the stacked layout. */
@media(min-width:640px) and (min-aspect-ratio:13/10){
  .game-shell{display:grid;grid-template-columns:clamp(200px,18vw,290px) minmax(0,1fr);grid-template-rows:auto auto auto minmax(0,1fr);grid-template-areas:"score score" "project stage" "controls stage" "jev stage"}
  .scoreboard{grid-area:score}.stage{grid-area:stage}
  .project-bar,.controls,.jev-line{border-right:1px solid var(--line)}
  .project-bar{grid-area:project;flex-direction:column;align-items:stretch;gap:9px;min-height:0;padding:12px 14px;border-bottom:0}
  .recipe{flex:none;flex-wrap:wrap}
  .project-tip{display:flex;align-items:flex-start;text-align:left;max-width:none}
  .controls{grid-area:controls;flex-direction:column;align-items:stretch;gap:9px;padding:12px 14px}
  .controls .movement{order:2;justify-content:flex-start}.movement>div>span{max-width:none}
  .actions{flex-direction:column;gap:6px}.action{width:100%;justify-content:flex-start}.action.idea .energy-meter{margin-left:auto}
  .jev-line{grid-area:jev;flex-wrap:wrap;align-content:flex-start;gap:8px;border-top:1px solid var(--line);padding:12px 14px}
  .jev-line p{flex-basis:100%;order:3}.inspect{margin-left:auto;padding:4px 0}
  .bottomline #world-line{display:none}.bottomline{justify-content:flex-end}
}
/* Short landscape windows (phones on their side): two-by-two buttons and no quote panel. */
@media(min-width:640px) and (min-aspect-ratio:13/10) and (max-height:620px){
  .actions{display:grid;grid-template-columns:1fr 1fr}.action{justify-content:center;padding:6px 5px;min-height:34px}.action.idea .energy-meter{display:none}
  .project-bar{padding:8px 10px;gap:6px}.controls{padding:8px 10px}.project-tip>span:first-child{display:none}
}
@media(min-width:640px) and (min-aspect-ratio:13/10) and (max-height:460px){.game-shell{grid-template-areas:"score score" "project stage" "controls stage" "controls stage"}.recipe button{padding:4px 5px}}
/* Taller landscape windows (16:10 and squarer): the board is width-limited there, so a slimmer rail
   hands its spare width to the board. */
@media(min-width:640px) and (min-aspect-ratio:13/10) and (max-aspect-ratio:16/10){.game-shell{grid-template-columns:212px minmax(0,1fr)}}
@media(min-width:640px) and (min-aspect-ratio:13/10) and (max-aspect-ratio:16/10) and (min-height:621px){.action.idea{white-space:nowrap}.action.idea .energy-meter{width:30px}}
/* Very narrow phones: a long status badge ("JEV / LOCAL FALLBACK") wraps instead of pushing HELP off screen. */
@media(max-width:400px){.mode{white-space:normal;max-width:112px;line-height:1.25;text-align:left}}
/* Portrait phones in a match: the board is width-limited, so the stage stops at a board-friendly shape
   and the spare height goes to bigger touch buttons instead of empty floor. The title screen keeps it all. */
@media(max-width:650px) and (orientation:portrait){
  body:not(.in-menu) .stage:not(:has(.pause-panel:not([hidden]),.end-panel:not([hidden])))){flex:100 1 0;max-height:calc((100vw - 24px)/1.45)}
  body:not(.in-menu) .controls{flex:1 1 auto}body:not(.in-menu) .actions{flex:1}
}
/* Phones, paused or finished: the panel takes the room the idle action buttons were using, and scrolls
   (from its top, never clipping it) if it still needs more. */
@media(max-width:650px){
  .game-shell:has(.pause-panel:not([hidden]),.end-panel:not([hidden])) .controls{display:none}
  .game-shell:has(.end-panel:not([hidden])) .project-bar{display:none}
  .pause-panel,.end-panel{overflow:auto;justify-content:flex-start;justify-content:safe center}
}

/* ── First-run onboarding tour ─────────────────────────────────────────────── */
.onboarding{width:min(1000px,calc(100vw - 24px));padding:0;overflow:auto}
.ob-top{display:flex;align-items:center;gap:14px;padding:20px 26px 0}.ob-top .kicker{color:var(--p80)}
.ob-count{font:bold 9px var(--mono);color:var(--n55);margin-right:auto}
.ob-progress{height:3px;margin:12px 26px 0;background:var(--n20);border-radius:2px;overflow:hidden}.ob-progress i{display:block;height:100%;width:20%;background:var(--p70);transition:width .35s ease}
.ob-body{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:26px;align-items:center;padding:18px 26px}
.ob-visual{position:relative;border-radius:10px;overflow:hidden;border:1px solid var(--n25);background:var(--neutral)}
.ob-visual canvas{display:block;position:static;width:100%;height:auto;aspect-ratio:1100/650}
.ob-live{position:absolute;left:10px;top:10px;font:bold 8px var(--mono);letter-spacing:1px;color:var(--p90);background:color-mix(in srgb,var(--p30) 85%,transparent);border-radius:4px;padding:4px 6px}
.ob-live::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--p70);margin-right:5px;vertical-align:1px;animation:ob-blink 1.2s steps(2) infinite}
@keyframes ob-blink{50%{opacity:.2}}
.ob-copy h2{font-size:clamp(30px,3.6vw,46px);margin:0 0 14px}.ob-copy p{font-size:13px;line-height:1.65;color:var(--n75);margin:0}
.ob-keys{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.ob-key{display:inline-flex;align-items:center;gap:7px;font:9px var(--mono);color:var(--n75);background:var(--n17);border:1px solid var(--n30);border-radius:5px;padding:5px 8px 5px 5px}
.ob-key kbd{min-width:24px;padding:0 5px;height:19px;font-size:9px;color:var(--n95);background:var(--n8);border-color:var(--n40)}
.ob-foot{display:flex;align-items:center;gap:16px;padding:14px 26px 22px;border-top:1px solid var(--n22)}
.ob-dots{display:flex;gap:6px;margin-right:auto}
.ob-dots button{width:9px;height:9px;padding:0;border:0;border-radius:5px;background:var(--n30);transition:width .25s,background .25s}
.ob-dots button[aria-selected="true"]{width:24px;background:var(--p70)}
#ob-back:disabled{visibility:hidden}
.tour-link{display:block;margin-top:12px;color:var(--p80);border-bottom-color:var(--p40)}
@media(max-width:760px){.ob-body{grid-template-columns:1fr;gap:14px;padding:14px 18px}.ob-top,.ob-foot{padding-left:18px;padding-right:18px}.ob-progress{margin-left:18px;margin-right:18px}.ob-copy h2{font-size:30px;margin-bottom:10px}.ob-copy p{font-size:12px}.ob-count{display:none}}
@media(max-height:520px){.ob-body{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;padding:10px 18px}.ob-copy h2{font-size:24px;margin-bottom:6px}.ob-copy p{font-size:11px;line-height:1.5}.ob-keys{margin-top:8px}.ob-top{padding-top:12px}.ob-foot{padding-top:8px;padding-bottom:12px}}
/* Jev is talking: the quote bar pulses in his color. */
.jev-line.speaking .mini-jev{animation:talk .32s ease-in-out infinite alternate}.jev-line.speaking p{color:var(--t90)}
@keyframes talk{to{transform:scaleY(.82) translateY(1px)}}
#voice[aria-pressed="false"]{opacity:.6}
/* ── Voice cast panel ── */
.voice-dialog{width:620px}
.vc-master{display:flex;align-items:center;gap:10px;font:bold 10px var(--mono);letter-spacing:.5px;margin:6px 0 16px;color:var(--n90)}.vc-master span{color:var(--n55);font-weight:400}
.vc-master input{width:18px;height:18px;accent-color:var(--p60)}
.vc-row{display:grid;grid-template-columns:62px 92px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--n25)}
.vc-who{font:900 10px var(--mono);text-align:center;border-radius:5px;padding:6px 0}
.vc-jev{background:var(--t60);color:var(--t10)}.vc-you{background:var(--primary);color:var(--n98)}.vc-host{background:var(--s60);color:var(--s10)}
.vc-role{font:10px var(--mono);color:var(--n60)}
.vc-row select{min-width:0;background:var(--n8);color:var(--n90);border:1px solid var(--n35);border-radius:5px;padding:8px;font:11px Arial}
.vc-test{background:var(--n20);color:var(--n90);border:1px solid var(--n35);border-radius:5px;padding:8px 10px;font:bold 9px var(--mono)}
.vc-note{font-size:11px;margin-top:14px}
@media(max-width:650px){.vc-row{grid-template-columns:52px minmax(0,1fr) auto}.vc-role{display:none}}

/* ── Usability pass (from the live evaluation) ─────────────────────────────── */
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* The title copy starts below the board's top bar, whatever the board size. */
@media(min-width:651px){.menu{padding-top:7.6cqw;padding-bottom:1.5cqw}}
/* Title screen: no game panels until there is a game. The rail slides in when the match starts. */
body.in-menu .project-bar,body.in-menu .controls,body.in-menu .jev-line{display:none}
@media(min-width:640px) and (min-aspect-ratio:13/10){
  .game-shell{transition:grid-template-columns .35s ease}
  body.in-menu .game-shell{grid-template-columns:0 minmax(0,1fr)}
  .rival-tip{white-space:normal;line-height:1.45;border-radius:8px}
}
@media(prefers-reduced-motion:reduce){.game-shell{transition:none}}
.menu-options button{white-space:nowrap}
/* Results on smaller boards: tighter, no inner scrolling. */
@media(min-width:651px){@container (max-width:900px){
  .end-panel{inset:5% 12%;padding:14px 22px}.end-panel .kicker{font-size:7px}.end-panel h2{margin:8px 0 6px}
  .end-panel>p{margin-bottom:8px}.end-stats{gap:16px;margin-bottom:8px}.end-stats strong{font-size:20px}.end-stats span{font-size:8px}
  .end-breakdown{margin-bottom:8px;gap:4px}.end-breakdown span{padding:3px 6px}.end-panel .end-quip{margin-bottom:8px;font-size:11px}
  .end-panel .primary{padding:11px 18px}.end-panel .text-button{margin-top:8px}
}}