/* page reset (from the single-file version's document shell) */
:root{color-scheme:light;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;padding:0;font:14px -apple-system,BlinkMacSystemFont,sans-serif;background:#fff;color:#000}
img{max-width:100%}
[hidden]:not([hidden=until-found i]){display:none!important}
:root{
  /* Layout: full-bleed pixel scene behind everything; thin HUD on top, dark console fading up from the bottom */
  --bg:#150f29; --shade:12,8,24; --panel2:#3b2c6b; --ink:#fff3d6; --muted:#c9bce6;
  --gold:#ffc93c; --hot:#ff5a36; --line:#0c0818; --ok:#5ee07a;
  --f-display:"Secular One",system-ui,sans-serif;
  --f-body:"Secular One",system-ui,sans-serif;
  --f-pix:"Press Start 2P",ui-monospace,monospace;
  --gl:max(16px,env(safe-area-inset-left,0px)); --gr:max(16px,env(safe-area-inset-right,0px));
  color-scheme:dark;
}
html,body{height:100%;margin:0;overflow:hidden;background:var(--bg);color:var(--ink)}
body{font-family:var(--f-body);font-size:16px;line-height:1.5;-webkit-font-smoothing:none;font-smooth:never;overscroll-behavior:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
#app{position:fixed;top:0;bottom:0;left:0;right:0;margin-inline:auto;width:min(100%,440px);overflow:hidden;background:#000}
@media (min-width:480px){#app{box-shadow:0 0 0 3px var(--line),0 0 0 6px var(--panel2),0 0 80px rgba(0,0,0,.7)}}
#cv{position:absolute;left:0;top:0;display:block;image-rendering:pixelated;image-rendering:crisp-edges;transform-origin:0 0}
.ui{position:absolute;left:0;right:0;top:0;height:100%;display:flex;flex-direction:column;pointer-events:none}

.top{pointer-events:auto;padding-top:calc(env(safe-area-inset-top,0px) + 10px);padding-bottom:22px;padding-left:var(--gl);padding-right:var(--gr);
  display:flex;flex-direction:column;gap:8px}
.qbox{display:flex;flex-direction:column;gap:8px;padding:8px var(--gr) 26px var(--gl);margin:-8px calc(-1 * var(--gr)) -22px calc(-1 * var(--gl));position:relative;isolation:isolate;will-change:transform}
.qbox::before{content:"";position:absolute;inset:0 -28px;z-index:-1;background:rgba(var(--shade),.85);
  -webkit-mask-image:linear-gradient(#000 calc(100% - 26px),transparent),linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(#000 calc(100% - 26px),transparent),linear-gradient(90deg,transparent,#000 28px,#000 calc(100% - 28px),transparent);mask-composite:intersect}
.qbox .q{text-shadow:2px 2px 0 var(--line)}
.bar{display:flex;align-items:center;gap:12px}
.logo{font-family:var(--f-display);font-size:24px;line-height:1;color:var(--gold);text-shadow:2px 2px 0 var(--hot),3px 3px 0 var(--line);margin-inline-end:auto}
.stat{font-family:var(--f-pix);font-size:11px;font-variant-numeric:tabular-nums;text-shadow:2px 2px 0 var(--line)}
.stat.gold{color:var(--gold)}
/* the HUD's icon buttons: back, sound and the menu, each a pixel icon (Pix.jsx); border-box as a <button> is, so a link (the back arrow out of an archive game) is the same size */
.iconbtn{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;background:rgba(var(--shade),.6);color:var(--ink);border:2px solid var(--line);padding:5px 6px;cursor:pointer;min-height:32px;min-width:36px}
.pix{display:block;flex:0 0 auto;fill:currentColor;shape-rendering:crispEdges}
.slots{display:flex;gap:5px;justify-content:center}
.slot{flex:0 1 34px;height:10px;border:2px solid var(--line);background:rgba(var(--shade),.55);position:relative}
.slot.now{outline:2px solid var(--gold);outline-offset:1px}
.slot.x{display:flex;align-items:center;justify-content:center;color:var(--hot)}

.mid{flex:1;min-height:0;position:relative}
.ov{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding-left:var(--gl);padding-right:var(--gr)}
#titleOv{flex-direction:column;gap:6px;justify-content:flex-start;padding-top:4vh}
#titleOv h1{margin:0;font-family:var(--f-display);font-weight:400;font-size:64px;line-height:1.2;color:var(--gold);
  text-shadow:3px 3px 0 var(--hot),6px 6px 0 var(--line);animation:bob 1.6s steps(4) infinite}
#titleOv p{margin:0;font-size:16px;text-shadow:2px 2px 0 var(--line)}
@keyframes bob{50%{transform:translateY(-4px)}}
#banner{align-items:flex-start;padding-top:2vh}
.bcard{background:var(--line);border:3px solid var(--gold);padding:8px 16px 10px;display:flex;flex-direction:column;align-items:center;gap:4px;box-shadow:4px 4px 0 rgba(0,0,0,.5);animation:pop .35s steps(5)}
.bcard .chip{width:64px;height:12px;border:2px solid var(--ink)}
.bcard b{font-family:var(--f-display);font-weight:400;font-size:clamp(22px,6vw,30px);line-height:1.1}
.bcard span{font-size:14px;color:var(--muted)}
.bcard i{font-style:normal;font-family:var(--f-pix);font-size:10px;color:var(--gold)}
@keyframes pop{0%{transform:scale(.3)}70%{transform:scale(1.12)}100%{transform:scale(1)}}
#meter{align-items:flex-start;flex-direction:column;gap:6px;justify-content:flex-start;padding-top:1vh}
#meter .num{font-family:var(--f-pix);font-size:clamp(22px,7vw,40px);text-shadow:3px 3px 0 var(--line)}
#meter .bio{font-size:clamp(26px,7vw,34px);line-height:1;color:var(--gold);text-shadow:2px 2px 0 var(--line)}
#meter,#toast{align-items:center}
.rcard{display:grid;grid-template-columns:auto 1fr;gap:2px 14px;align-items:center;border:3px solid var(--bc);background:rgba(0,0,0,.35);padding:12px;animation:pop .25s steps(4)}
.rcard .tile{grid-row:1/5;width:64px;height:64px;background:var(--bc);box-shadow:inset -6px -6px 0 rgba(0,0,0,.25),inset 6px 6px 0 rgba(255,255,255,.3)}
.rcard .tile.blk{outline:3px solid #c58bff}
.rcard .tile.miss{background:var(--bg);color:var(--hot);font-size:44px;line-height:64px;font-weight:800;text-align:center}
.rcard .cq{font-size:16px;color:var(--muted)}
.rcard .cans{font-family:var(--f-display);font-size:32px;line-height:1.3;overflow-wrap:anywhere}
.rcard .cbelt{font-size:16px}
.rcard .cm{font-family:var(--f-pix);font-size:16px;color:var(--gold);text-shadow:2px 2px 0 #000}
.rcard .ctot{grid-column:1/-1;font-family:var(--f-pix);font-size:9px;color:var(--muted);margin-top:6px}
.rcard .btn{grid-column:1/-1;margin-top:8px}
#toast{justify-content:flex-end;flex-direction:column;padding-bottom:2vh}
#toast div{font-family:var(--f-display);font-size:16px;background:var(--line);color:var(--gold);border:3px solid var(--gold);padding:4px 14px;animation:pop .3s steps(4)}

.bottom{pointer-events:auto;max-height:75%;overflow-y:auto;padding-top:52px;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 16px);padding-left:var(--gl);padding-right:var(--gr);
  background:linear-gradient(rgba(var(--shade),0),rgba(var(--shade),.82) 52px,rgba(var(--shade),.96))}
.panel{max-width:620px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.qnum{font-family:var(--f-pix);font-size:9px;color:var(--muted)}
.q{font-family:var(--f-display);font-weight:400;font-size:24px;line-height:1.4;margin:0;text-wrap:balance}
.timer{height:10px;background:rgba(255,255,255,.08);border:2px solid var(--line);position:relative;overflow:hidden}
.timer div{position:absolute;inset:0;background:repeating-linear-gradient(270deg,var(--ok) 0 10px,transparent 10px 12px)}
.timer.low div{background:repeating-linear-gradient(270deg,var(--hot) 0 10px,transparent 10px 12px)}
.ansf{display:flex;gap:8px;align-items:stretch}
.ansf input{flex:1 1 auto;min-width:0;font-family:var(--f-body);font-size:16px;padding:12px;background:rgba(0,0,0,.45);color:var(--ink);border:3px solid var(--gold);border-radius:0}
/* every placeholder in one grey, Chrome's own on a dark page: iOS's is darker and Firefox's is a fade of the text color.
   A disabled box keeps its text in ink, where browsers grey it (iOS through -webkit-text-fill-color, which the placeholder sets back) */
::placeholder{color:#757575;-webkit-text-fill-color:#757575;opacity:1}
.ansf input:disabled{opacity:1;-webkit-text-fill-color:var(--ink)}
canvas.pxc{display:block;image-rendering:pixelated;image-rendering:crisp-edges;max-width:100%}
.px,.cq,.cans,.cbelt,.ctot,#fSub,.fb{display:flex;flex-direction:column;align-items:flex-start}
#titleOv p{align-items:center}#titleOv h1,#titleOv p{display:flex;flex-direction:column;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--f-display);font-size:24px;min-height:52px;background:var(--hot);color:var(--ink);border:3px solid var(--line);box-shadow:0 4px 0 var(--line);padding:8px 18px;cursor:pointer;border-radius:0}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--line)}
.btn.ghost{background:var(--panel2);font-size:16px}
/* ink, not the dark --line: pixel text lifts the top of its letters toward white, which turns a dark color grey */
.btn.gold{background:var(--gold);color:var(--ink)}
.btn.wide{width:100%}
.btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
a.btn{text-decoration:none;box-sizing:border-box}
.iconbtn:focus-visible,.btn:focus-visible,input:focus-visible,.qr:focus-visible,.flt button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.fb{min-height:1.3em;margin:0;color:var(--muted);font-size:16px;text-shadow:1px 1px 0 var(--line)}
.beltline{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;animation:pop .18s steps(3)}
.beltline.fin{animation:pop .35s steps(5)}
.atkline{display:flex;flex-direction:column;align-items:center;color:var(--gold);margin-top:6px}
.beltline b{font-family:var(--f-display);font-weight:400;font-size:24px;line-height:1.3;text-shadow:2px 2px 0 var(--line)}
.beltline i{font-style:normal;font-family:var(--f-pix);font-size:12px;color:var(--gold)}
.bchip{display:inline-block;width:44px;height:16px;border:3px solid var(--line);box-shadow:inset -3px -3px 0 rgba(0,0,0,.25)}
.qbox .btn{min-height:0;font-size:24px;padding:6px 16px;flex:0 0 auto}
.shake{animation:shake .3s steps(6)}
@keyframes shake{25%{transform:translateX(6px)}50%{transform:translateX(-6px)}75%{transform:translateX(3px)}}
.res-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.res-head .chip{width:56px;height:14px;border:2px solid var(--line)}
.res-head b{font-family:var(--f-display);font-weight:400;font-size:26px}
.res-head i{font-style:normal;font-family:var(--f-pix);font-size:11px;color:var(--gold)}
.kv{margin:0;display:flex;flex-direction:column;gap:2px;line-height:1.5}
.kv span{color:var(--muted)}
.big{font-family:var(--f-pix);font-size:clamp(28px,9vw,44px);color:var(--gold);text-shadow:3px 3px 0 var(--line);margin:0}
/* the end screen's distance, with "שיא חדש!" beside it on a new personal best */
.fdist{display:flex;align-items:center;flex-wrap:wrap;gap:4px 14px}
.rec{color:var(--hot)}
/* standings chart under the distance (FinalPanel.jsx): SVG units are chart pixels, 3-wide columns with a lit top row.
   The columns rise one after another in stepped frames, then the marker drops onto the run's own column */
.rank{display:flex;flex-direction:column;gap:6px}
.rank svg{display:block;width:100%;height:auto;shape-rendering:crispEdges;overflow:visible}
.rank g{fill:var(--panel2);transform-box:fill-box;transform-origin:50% 100%;animation:rise .3s steps(3) calc(var(--i) * 14ms) both}
.rank .cap{fill:var(--muted);fill-opacity:.35}
.rank .won{fill:var(--gold)}
.rank .me{fill:var(--hot)}
.rank .won .cap,.rank .me .cap{fill:var(--ink);fill-opacity:1}
.rank .base{fill:var(--panel2)}
.rank .pin{fill:var(--hot);animation:drop .3s steps(3) .6s both}
@keyframes rise{from{transform:scaleY(0)}}
@keyframes drop{from{transform:translateY(-5px);opacity:0}}
.rank .ax{position:relative;height:8px;direction:ltr;font-family:var(--f-pix);font-size:8px;line-height:1;color:var(--muted)}
.rank .ax span{position:absolute;top:0;white-space:nowrap}
.rank .ax .me{color:var(--hot)}
.rkt{color:var(--gold)}
/* the way on to past days (FinalPanel.jsx): a green button to the next unplayed one, a quiet link to the archive list;
   an archive game's results end in "עוד משחק" beside the way back to today's game, over the same link */
.btn.go{background:var(--ok)}
.more{display:flex;flex-direction:column;align-items:center;gap:10px}
.more>.btns{align-self:stretch}
.quiet{color:var(--gold);font-size:16px;text-decoration:underline;text-underline-offset:4px}
.btns.kp{grid-template-columns:1fr 1fr}
.sub2{color:var(--muted)}
/* the rewarded ad's card before an archive game (Console.jsx) */
.rw,.rws{margin:0;display:flex;flex-direction:column;align-items:center}
.rws{color:var(--muted)}
/* a 320x50 banner under its label (Banner.jsx): its space is held before the ad loads, so the console doesn't jump,
   and an unfilled unit folds away with its label */
.adslot{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:16px;min-height:72px}
.adlbl{margin:0;font-size:12px;line-height:18px;color:var(--muted)}
/* the footer under the end screen (Console.jsx): Instagram's purple to orange as hard pixel bands */
.foot{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:16px}
.btn.ig{min-height:0;gap:10px;padding:6px 14px;background:linear-gradient(90deg,#833ab4 0 25%,#c13584 25% 50%,#e1306c 50% 75%,#f77737 75%)}
/* the side menu (Menu.jsx): the scene dims and a drawer slides in from the left, the end of the HUD's line, in stepped frames */
.menu{position:absolute;inset:0;z-index:5;pointer-events:auto}
.scrim{position:absolute;inset:0;background:rgba(var(--shade),.7)}
.drawer{position:absolute;top:0;bottom:0;left:0;width:min(300px,84%);box-sizing:border-box;overflow-y:auto;display:flex;flex-direction:column;
  padding:calc(env(safe-area-inset-top,0px) + 10px) 16px calc(env(safe-area-inset-bottom,0px) + 16px) var(--gl);
  background:var(--bg);box-shadow:3px 0 0 var(--line),6px 0 0 var(--panel2);animation:slide .2s steps(4)}
@keyframes slide{from{transform:translateX(-100%)}}
.dh{display:flex;align-items:center;min-height:46px;margin-bottom:6px}
.dsec{margin:16px 0 2px;font-size:13px;color:var(--muted)}
.mi{display:flex;align-items:center;gap:12px;padding:10px 4px;font:inherit;font-size:20px;line-height:1.3;color:var(--ink);text-decoration:none;
  background:none;border:0;border-bottom:2px solid var(--panel2);text-align:start;cursor:pointer}
.mi .pix{color:var(--gold)}
.mi[aria-current]{color:var(--gold)}
.mi:focus-visible{outline:3px solid var(--gold);outline-offset:-3px}
.dtag{margin:auto 0 0;padding-top:24px;font-size:14px;color:var(--muted);text-align:center}
/* the privacy, terms and accessibility pages, under the tagline */
.dleg{margin:4px 0 0;font-size:14px;color:var(--muted);text-align:center}
.dleg a{display:inline-block;padding:4px 2px;color:inherit}
.dleg a:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.adslot ins{display:block;width:320px;height:50px}
.adslot:has(ins[data-ad-status="unfilled"]){display:none}
/* the goal above the start button (Console.jsx); its example answers are .ach chips like the reveal's */
.goal{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 12px 12px;background:rgba(0,0,0,.35);border:3px solid var(--gold);box-shadow:4px 4px 0 rgba(0,0,0,.5)}
.goal .gh{margin:0;display:flex;flex-direction:column;align-items:center;color:var(--gold)}
.goal .gq{display:flex;flex-direction:column;align-items:center;color:var(--muted)}
.gx{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;margin-top:2px}
.gx .ach{font-size:15px;padding:3px 8px}
.gx small{font-size:12px;color:var(--muted)}
/* the belt ladder (BeltLadder.jsx): rising steps in the belts' colors, unlit past the belt reached, which wears the gold outline */
.ladder{display:flex;align-items:flex-end;justify-content:center;gap:3px}
.ladder i{width:14px;height:calc(6px + var(--h) * 3px);box-sizing:border-box;border:2px solid var(--line);background:rgba(255,255,255,.06);box-shadow:0 0 0 1px var(--panel2)}
.ladder .on{background:var(--bc);box-shadow:inset -2px -2px 0 rgba(0,0,0,.25),0 0 0 1px var(--panel2)}
.ladder .on:last-child{box-shadow:inset -2px -2px 0 rgba(0,0,0,.25),0 0 0 2px #c58bff}
.ladder .now{outline:2px solid var(--gold);outline-offset:1px;transform-origin:50% 100%;animation:pop .25s steps(4)}
/* daily: title line, countdown */
#titleOv .tsub{color:var(--muted)}
.cd{display:flex;flex-direction:column;align-items:center;color:var(--muted)}
/* answers under the results (Answers.jsx): one folded row per question, the open one with belt filters and every answer */
.answers{display:flex;flex-direction:column;margin-top:10px}
.ah{margin:0;font-family:var(--f-display);font-weight:400;font-size:22px;line-height:1.2}
.hint{margin:2px 0 4px;font-size:14px;color:var(--muted)}
.qr{display:flex;align-items:center;gap:10px;width:100%;padding:10px 0;background:none;border:0;border-bottom:2px solid var(--panel2);color:var(--ink);font:inherit;text-align:start;cursor:pointer}
.qr[aria-expanded="true"]{border-bottom-color:transparent}
.qr .no{flex:0 0 14px;font-family:var(--f-pix);font-size:10px;color:var(--muted)}
.qr .bc{flex:0 0 auto;position:relative;width:22px;height:14px;border:2px solid var(--line);box-shadow:0 0 0 1px var(--panel2)}
.qr .bc.x::after{content:"✕";position:absolute;inset:-6px 0 0;text-align:center;font-size:13px;font-weight:800;color:var(--hot)}
.qr .tx{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.qr .tx small{font-size:13px;color:var(--muted)}
.qr .tx span{font-size:18px}
.qr .mm{direction:ltr;unicode-bidi:isolate;font-family:var(--f-pix);font-size:11px;color:var(--gold)}
.qr .pm{flex:0 0 12px;font-family:var(--f-pix);font-size:12px;color:var(--muted);text-align:center}
.exp{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:2px 0 14px;border-bottom:2px solid var(--panel2)}
.flt{display:flex;flex-wrap:wrap;gap:5px}
.flt button{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;font:inherit;font-size:13px;color:var(--ink);background:rgba(0,0,0,.35);border:2px solid var(--panel2);cursor:pointer}
.flt b{font-family:var(--f-pix);font-weight:400;font-size:8px;color:var(--muted)}
.flt .on{border-color:var(--gold);color:var(--gold)}
.st{margin:0;font-size:13px;color:var(--muted)}
.srch{align-self:stretch;box-sizing:border-box;font:inherit;font-size:16px;padding:8px 12px;background:rgba(0,0,0,.45);color:var(--ink);border:2px solid var(--panel2);border-radius:0}.chips{display:flex;flex-wrap:wrap;gap:6px}
.ach{display:inline-flex;align-items:center;gap:6px;font-size:16px;line-height:1.3;padding:4px 10px;background:rgba(0,0,0,.35);border:2px solid var(--panel2)}
.ach.me{border:3px solid var(--gold);box-shadow:0 0 0 2px var(--line)}
.ach.hit{border-color:var(--gold);background:rgba(255,201,60,.2)}
/* an answer the lists lack or a belt that doesn't fit, reported from the end screens (Report.jsx), beside the daily game's Instagram button and under סומו!'s rounds:
   a button, then a dialog with what's reported, the question by its number, the answer, the belt that fits and why. The dialog sits high, so a phone's
   keyboard leaves its answer box in sight; it's dimmed behind with the drawer's shade, written out since a ::backdrop doesn't inherit the custom
   properties in older browsers. Its classes start with r, and its question is rqt, since סומו!'s round card has an .rq of its own */
.rbtn.btn{min-height:0;padding:6px 14px}
.report{display:flex;margin-top:16px}
.rdlg{box-sizing:border-box;width:min(400px,calc(100% - 24px));max-width:none;margin:max(12px,8vh) auto auto;padding:0;color:var(--ink);background:var(--bg);
  border:3px solid var(--line);box-shadow:0 0 0 3px var(--panel2)}
.rdlg::backdrop{background:rgba(12,8,24,.7)}
.rin{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:10px 14px 16px}
.rh{align-self:stretch;display:flex;align-items:center;justify-content:space-between;gap:8px}
.rqt{margin:0;font-size:14px;line-height:1.3;color:var(--muted)}
.rk button{font-size:14px;padding:4px 10px}
.rf{align-self:stretch;display:flex;flex-direction:column;gap:8px}
.rf .srch{min-width:0}
.rf .rx{resize:none;font-size:15px;line-height:1.35}
.rf .btn{align-self:flex-start;min-height:0;padding:6px 16px}
.rl{margin:2px 0 -2px;font-size:14px}
.rbl{align-self:stretch;display:flex;gap:5px}
.rbl button{flex:1 1 0;min-width:0;display:inline-flex;align-items:center;justify-content:center;padding:6px 0;background:rgba(0,0,0,.35);border:2px solid var(--panel2);cursor:pointer}
.rbl .on{border-color:var(--gold);background:rgba(255,201,60,.2)}
.rbl button:focus-visible,.rsw:focus-visible,.rf .rx:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.rdlg .st{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:15px;color:var(--ink)}
.rsw{padding:0;font:inherit;color:var(--gold);background:none;border:0;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
@media (prefers-reduced-motion:reduce){#titleOv h1,.bcard,#toast div,.rank g,.beltline,.ladder .now,.drawer{animation:none}}
/* a short phone: a smaller logo on the title screen, so the title, the judokas and the goal above the start button all fit */
@media (max-height:740px) and (max-width:899px){
  :root{--px-title:2}
  #titleOv{padding-top:2vh;gap:2px}
}
@media (max-height:690px) and (max-width:899px){
  :root{--px-title:1.5}
  #titleOv{padding-top:0;gap:0}
}

/* desktop: the scene fills the window, the HUD runs across the top and the question and panels sit in a centered
   720px column. Same query as DESK in render/view.js. ui/pixelText.js reads --px-<kind> (pixel text scale) and
   --px-wrap (the width text wraps to, in px: its column here less 8 font px of canvas padding at its scale) */
@media (min-width:900px) and (min-height:560px){
  :root{--gl:32px;--gr:32px;--px-small:1.5;--px-title:4}
  /* the console's shade color, so where the canvas ends above the console (render/view.js lifts it) there's no seam */
  #app{width:100%;box-shadow:none;background:rgb(var(--shade))}
  .top{position:relative;isolation:isolate;padding-top:18px;padding-bottom:30px;gap:12px}
  /* a shade behind the HUD line: on a landscape screen the dojo's windows and pennants sit right under it */
  .top::before{content:"";position:absolute;left:0;right:0;top:0;height:110px;z-index:-1;background:linear-gradient(rgba(var(--shade),.7),rgba(var(--shade),0))}
  .bar{height:48px;gap:16px}
  .stat{font-size:14px}
  .iconbtn{padding:8px 10px;min-height:42px;min-width:44px}
  .drawer{width:340px}
  .mi{font-size:22px}
  .slots{gap:8px}
  .slot{flex:0 0 44px;height:14px;border-width:3px}
  .slot .pix{width:12px;height:12px}
  .slot.now{outline-width:3px;outline-offset:2px}

  /* the question as a framed window over the scene, in the double border the phone-width column used to wear */
  .qbox{width:720px;max-width:calc(100% - 12px);box-sizing:border-box;margin:10px auto -30px;padding:18px 24px 14px;gap:12px;--px-wrap:656}
  .qbox::before{inset:0;background:rgba(var(--shade),.92);-webkit-mask-image:none;mask-image:none;
    box-shadow:0 0 0 3px var(--line),0 0 0 6px var(--panel2),10px 10px 0 6px rgba(0,0,0,.3)}
  .qnum{font-size:11px}
  .qbox .q{--px-big:2}
  .timer{height:14px}
  .ansf{gap:10px}
  .ansf input{font-size:20px;padding:12px 16px}

  #titleOv{padding-top:7vh;gap:10px}
  #meter{padding-top:3vh}
  #meter .num{font-size:56px;text-shadow:4px 4px 0 var(--line)}
  #toast{padding-bottom:3vh}
  #toast div{font-size:20px;padding:6px 18px}

  /* render/view.js puts the ground 40px below the console's top edge and sets --ps (screen px per scene px):
     a fallen opponent reaches about 15 scene px under the ground, so the panels start below that */
  .bottom{--fall:calc(40px + var(--ps,5) * 15px);padding-top:calc(var(--fall) + 24px);padding-bottom:28px;
    background:linear-gradient(rgba(var(--shade),0) calc(var(--fall) - 40px),rgba(var(--shade),.82) calc(var(--fall) + 24px),rgba(var(--shade),.95) calc(var(--fall) + 120px))}
  .panel{max-width:720px;gap:14px}
  #p-title{max-width:440px}
  .beltline{gap:16px}
  .beltline b,.atkline{--px-big:2}
  .beltline i{font-size:16px}
  .bchip{width:56px;height:20px}
  .ladder{gap:4px}
  .ladder i{width:20px;height:calc(8px + var(--h) * 4px)}
  /* result card: the button shares the last line with the running total instead of spanning the card;
     the text column is 720 - 6 border - 36 padding - 64 tile - 20 gap = 594px, and --px-wrap leaves 16px for the canvas padding */
  .rcard{gap:2px 20px;padding:16px 18px;--px-wrap:578}
  .rcard .cans{--px-big:2}
  .rcard .ctot,.rcard .btn{grid-row:5;margin-top:10px}
  .rcard .ctot{align-self:center}
  .rcard .btn{grid-column:2;justify-self:end;width:auto;min-width:240px}
  /* final screen in two columns: the distance, the day's standings and when the next game opens, beside the share and online-match buttons and the way on,
     then the answers across both. Wider than the 720px column so each line of text fits on one line: the first column is at least 836 - 28 - 300 = 508px */
  #p-final{max-width:840px;display:grid;grid-template-columns:1fr 300px;grid-template-areas:"dist btns" "rank more" "cd more" "ad ad" "ans ans";gap:10px 28px;align-items:start}
  #fDist{grid-area:dist}
  #fRank{grid-area:rank;--px-wrap:492}
  /* the chart keeps its phone proportions, so it stops at 392px wide (about 65px tall) and sits at the column's start */
  .rank svg,.rank .ax{max-width:392px}
  .rank .ax{height:10px;font-size:10px}
  #fSub{grid-area:sub;--px-wrap:492}
  #p-final>.btns{grid-area:btns}
  #p-final>.cd,#p-final>.btn.gold.wide{grid-area:cd}
  #p-final>.cd{align-items:flex-start}
  #p-final>.more{grid-area:more}
  #p-final>.adslot{grid-area:ad;justify-self:center}
  /* an archive game's results: no standings or countdown, the share button over the way on;
     the empty fr row takes what the way on needs beyond the two text lines, so they keep together */
  #p-final.arc{grid-template-areas:"dist copy" "sub more" "sub2 more" ". more" "ans ans";grid-template-rows:auto auto auto 1fr auto}
  #p-final.arc>.sub2{grid-area:sub2;--px-wrap:492}
  #p-final.arc .kp{grid-template-columns:1fr}
  #p-final.arc>#copyBtn{grid-area:copy}
  #p-final>.answers{grid-area:ans;margin-top:18px}
  .rqt,.rl{font-size:15px}
  .rdlg .st{font-size:17px}
  .ah{font-size:26px}
  .hint,.flt button,.st{font-size:15px}
  .srch{font-size:18px}
  .qr{padding:12px 0}
  .qr .tx small{font-size:15px}
  .qr .tx span{font-size:20px}
  .ach{font-size:18px}
  .big{font-size:56px;line-height:1.2}
}
/* wide enough to hold the belt slots between the logo and the meters */
@media (min-width:1180px) and (min-height:560px){
  .slots{position:absolute;top:18px;left:50%;height:48px;transform:translateX(-50%);align-items:center}
}
/* a short desktop window (a laptop's browser is often 580 to 720px tall), in steps, so the title and its two lines end above the
   goal: a smaller logo nearer the HUD, and the title screen's console just under the judokas' feet (nobody has fallen there);
   then only the HUD's logo, sooner with a banner under the start button; then, with the banner, no tagline either, and a tighter question box.
   Under 1180px wide the belt slots take a second line in the HUD, so each step comes 40px sooner.
   ui/pixelText.js redraws when the window crosses the logo's two heights */
@media (min-width:1180px) and (min-height:560px) and (max-height:819px),(min-width:900px) and (max-width:1179px) and (min-height:560px) and (max-height:859px){
  :root{--px-title:3}
  #titleOv{padding-top:3vh;gap:6px}
  .bottom:has(>#p-title:not([hidden])){--fall:40px}
}
@media (min-width:1180px) and (min-height:560px) and (max-height:739px),(min-width:900px) and (max-width:1179px) and (min-height:560px) and (max-height:779px){
  :root{--px-title:2}
  #titleOv{padding-top:1vh;gap:4px}
}
@media (min-width:1180px) and (min-height:560px) and (max-height:679px),(min-width:900px) and (max-width:1179px) and (min-height:560px) and (max-height:719px){
  #app:has(#p-title:not([hidden]) .adslot) #titleOv h1{display:none}
  #app:has(#p-title:not([hidden]) ins[data-ad-status="unfilled"]) #titleOv h1{display:flex}
}
@media (min-width:1180px) and (min-height:560px) and (max-height:599px),(min-width:900px) and (max-width:1179px) and (min-height:560px) and (max-height:639px){
  #titleOv h1{display:none!important}
  #app:has(#p-title:not([hidden]) .adslot) #titleOv p:not(.tsub){display:none}
  #app:has(#p-title:not([hidden]) ins[data-ad-status="unfilled"]) #titleOv p:not(.tsub){display:flex}
  /* and a tighter question box, so a two-line question still clears the judokas; the HUD already counts the round */
  .top{padding-top:10px}
  .qbox{margin-top:4px;padding:10px 20px 8px;gap:8px}
  .qnum{display:none}
}
/* a mouse: buttons lift under the pointer, and the two buttons Enter also presses say so */
@media (hover:hover) and (pointer:fine){
  .btn:hover{filter:brightness(1.12);transform:translateY(-2px);box-shadow:0 6px 0 var(--line)}
  .btn:disabled:hover{filter:none;transform:none;box-shadow:0 4px 0 var(--line)}
  .btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--line)}
  .iconbtn:hover{color:var(--gold);border-color:var(--gold)}
  .mi:hover,.dleg a:hover{color:var(--gold)}
  .qr:hover .pm,.qr:hover .no{color:var(--gold)}
  .flt button:hover{border-color:var(--muted)}
}
@media (min-width:900px) and (min-height:560px) and (hover:hover) and (pointer:fine){
  #startBtn:not(:disabled)::after,#cBtn::after{content:"ENTER";font-family:var(--f-pix);font-size:8px;line-height:1;padding:5px 6px 4px;margin-inline-start:14px;
    border:2px solid currentColor;box-shadow:0 2px 0 currentColor;opacity:.7}
}