/* Approved 5–8 and 10 landscape compositions from states.html. */
.runtime-state.buy.land .bcard{left:50%;right:auto;width:560px;top:50%;translate:-50% -50%}
.runtime-state.buy.land .bhero{position:absolute;left:14px;top:26px;translate:none;width:220px;z-index:3}
.runtime-state.buy.land .bcard .pcard{display:grid;grid-template-columns:220px 1fr;grid-template-rows:auto auto auto auto auto;gap:5px 18px;align-items:center;padding:12px 18px 14px;text-align:center;background:none;clip-path:none}
.runtime-state.buy.land .pcard:before{content:"";grid-column:1;grid-row:1/-1}
.runtime-state.buy.land .buyname{grid-column:2;grid-row:1;margin-top:0;justify-self:center;font-size:30px;padding:10px 18px 13px}
.runtime-state.buy.land .bpow{grid-column:2;grid-row:2;margin-top:0}
.runtime-state.buy.land .bpow span{display:block;font-size:8px;line-height:1.5}
.runtime-state.buy.land .ledger{grid-column:2;grid-row:3}
.runtime-state.buy.land .ledger div{padding:3px 2px}
.runtime-state.buy.land .short{grid-column:2;grid-row:4;padding:6px 8px 7px;margin-top:4px}
.runtime-state.buy.land .earn{display:none!important}
.runtime-state.buy.land .bbtns{grid-column:2;grid-row:4;gap:6px}
.runtime-state.buy.land.poor .bbtns{grid-row:5}
.runtime-state.buy.land .btn{min-height:32px;font-size:12px;padding:4px 10px 6px}
.runtime-state.buy.land .btn.go{min-height:36px;font-size:14px}
.runtime-state.buy.land .ledger div{padding:2px 2px}
.runtime-state.buy.land .ledger b{font-size:15px}
.runtime-state.buy.land .bbtns{gap:4px}
.runtime-state.buy.land .cgrid{grid-template-columns:repeat(8,1fr);top:70px}
.runtime-state.buy.land .cprog{top:46px}
.runtime-state.buy.land .hw.sh-title{display:none}
.runtime-state.net.land.disc .ncard{inset:0;width:auto;translate:none;filter:none}
.runtime-state.net.land.disc .ncard .pcard{display:block;position:static;padding:0;background:none;clip-path:none}
.net.land.disc .hw.nt,.net.land.disc .clock-w,.runtime-state.net.land.disc .nbtns{position:absolute;margin:0;translate:-50% 0}
.runtime-state.net.land.disc .hw.nt{left:calc(196px + var(--safe-left)/2);top:116px;translate:-50% -50%}
.runtime-state.net.land.disc .nt .hw-px{width:250px!important;filter:drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(0 0 6px rgba(200,24,16,.8)) drop-shadow(0 0 14px rgba(180,20,12,.5))!important}
.runtime-state.net.land.disc .cp{display:none}
.runtime-state.net.land.disc .clock-w{display:block;left:calc(196px + var(--safe-left)/2);top:171px;filter:drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff)}
.runtime-state.net.land.disc .clock{gap:6px;padding:10px 22px 12px;font:400 16px/16px var(--f-pixel)}
.runtime-state.net.land.disc .clock b{font-size:28px}
.runtime-state.net.land.disc .nbtns{left:calc(486px - var(--safe-right)/2);top:111px;width:230px}
.runtime-state.net.land.disc .btn{min-height:46px;font-size:16px}
.net.land.disc .hme,.runtime-state.net.land.disc .hf{display:none}
.runtime-state.net.disc.land .dim{background:rgba(11,31,63,.4)}
.net.land.disc .htimer,.net.land.disc .hleft,.runtime-state.net.land.disc .hstrip{opacity:.4}
.runtime-state.land.rx .htimer,.runtime-state.land.rx .hleft,.runtime-state.land.rx .hstrip{opacity:.4}
.runtime-state.land.net.rx .dim{background:rgba(11,31,63,.4)}
.runtime-state.land.rx .rc-title,.runtime-state.land.rx .rc-run,.runtime-state.land.rx .rc-plate,.runtime-state.land.rx .rc-cancel{position:absolute;z-index:8;translate:-50% 0}
.runtime-state.land.rx .rc-title{translate:-50% -50%}
.runtime-state.land.rx .rc-title .hw-px{display:block;animation:none!important;image-rendering:pixelated;filter:drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff)!important}
.runtime-state.land.rx .rc-run .walker{width:100%;height:100%;filter:none}
.runtime-state.land.rx .rc-plate{filter:drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff)}
.runtime-state.land.rx .rc-pin{display:flex;flex-direction:column;align-items:center;gap:8px;background:var(--ink);clip-path:var(--step6);padding:10px 16px 12px}
.runtime-state.land.rx .rc-line{display:flex;align-items:baseline;gap:2px;margin:0;font:400 16px/16px var(--f-pixel);color:#fff}
.runtime-state.land.rx .rc-line .dots i{width:4px;height:4px;background:#fff}
.runtime-state.land.recon.rx .rbar{display:block;width:100%;height:14px;background:#2a4c86;padding:3px;clip-path:var(--step4);overflow:hidden}
.runtime-state.land.rx .rbar i{display:block;height:100%;width:40%;background:var(--sky);animation:scan 1.6s steps(8,end) infinite}
.runtime-state.land.rx .rc-cancel{width:200px}
.runtime-state.land.rx .rc-cancel .btn{min-height:42px;font-size:16px}
.runtime-state.land.rb .rc-plate{left:calc(196px + var(--safe-left)/2);top:179px;width:250px}
.runtime-state.land.rb .rc-run{left:calc(486px - var(--safe-right)/2);top:75px;width:110px;aspect-ratio:1}
.runtime-state.land.rb .rc-cancel{left:calc(486px - var(--safe-right)/2);top:197px}
.runtime-state.spec.land .hme{top:52%}
.runtime-state.spec.land .spot{top:calc(52% - 80px)}
.runtime-state.spec.land .sfoot{left:calc(20px + var(--safe-left));right:auto;bottom:calc(18px + var(--safe-bottom));align-items:flex-start}
.runtime-state.spec.land .play-wrap{left:auto;right:calc(20px + var(--safe-right));width:220px;bottom:calc(22px + var(--safe-bottom))}
.runtime-state.spec.land .play{font-size:16px;padding:11px 0 13px}
.runtime-state.spec.land .specbar{background:none;padding:calc(10px + var(--safe-top)) calc(12px + var(--safe-right)) 0 calc(12px + var(--safe-left))}
.runtime-state.spec.land .spec-clock{top:calc(12px + var(--safe-top))!important;left:50%!important;translate:-50% 0}
.runtime-state.buy.land .ledger{background:var(--ink);padding:6px 12px;clip-path:var(--step6)}
.runtime-state.buy.land .ledger div{color:#a9d8ff;box-shadow:0 2px 0 #2a4c86}
.runtime-state.buy.land .ledger div:last-child{box-shadow:none}
.buy.land .ledger b,.runtime-state.buy.land .ledger .after b{color:#fff}
.runtime-state.buy.land.poor .ledger .have b{color:#ff7a6b}

#device.land{width:640px;height:320px;--safe-top:calc(env(safe-area-inset-top,0px)/var(--ui-scale,1));--safe-left:calc(env(safe-area-inset-left,0px)/var(--ui-scale,1));--safe-right:calc(env(safe-area-inset-right,0px)/var(--ui-scale,1));--safe-bottom:calc(env(safe-area-inset-bottom,0px)/var(--ui-scale,1))}
.phone.land{width:640px;height:320px;aspect-ratio:2;border:0;border-radius:0;box-shadow:none}
body:has(#device.land){padding:0;gap:0;min-height:100dvh;display:flex;justify-content:center;align-items:center;overflow:hidden;background:var(--ink)}
body:has(#device.land) #desktop-help{display:none}
.runtime-state.land.recon .ncard{display:none}
.runtime-state.land.net .htimer,.runtime-state.land.net .hleft,.runtime-state.land.net .hstrip{opacity:.4}
.runtime-state.land.net .dim{background:rgba(11,31,63,.4)}
.runtime-state.land.spec .spec-clock{top:calc(12px + var(--safe-top))!important;left:50%!important;translate:-50% 0}
.runtime-state.land.buy .bpow span{color:#fff}
.runtime-state.land.buy .buyname{font-size:24px}
.runtime-state.land.buy .bpow b,.runtime-state.land.buy .ledger div,.runtime-state.land.buy .short{font-size:8px}
.runtime-state.land.spec .sfoot small{font-size:8px}
/* Keep the name/ledger/button stack inside real left/right and home-bar insets. */
.runtime-state.land.buy .bcard{left:var(--safe-left);right:var(--safe-right);width:auto;top:0;bottom:var(--safe-bottom);translate:none;display:flex;align-items:center;justify-content:center}
.runtime-state.land.buy .bcard .pcard{width:560px;max-width:100%;grid-template-columns:minmax(160px,220px) minmax(0,1fr);gap:4px 18px;padding:8px 18px 10px}
.runtime-state.land.buy .bhero{left:calc(50% - 266px);top:50%;translate:0 -50%;max-width:40%}
.runtime-state.land.buy .bpow span{max-height:none;overflow:visible}
.runtime-state.land.buy .btn.off{font-size:12px}

.runtime-state.land .reconnect-landscape[hidden]{display:contents!important}
.runtime-state.net.land.disc .clock-w{display:block!important}

.runtime-state.land.rb .rc-title{left:calc(196.5px + var(--safe-left)/2);top:118px}
.runtime-state.land.rb .rc-title .hw-px{width:309px!important}

.runtime-state.land.buy .buyname.long{font-size:16px}
.runtime-state.land.spec .swho{max-width:calc(114px - var(--safe-left));overflow-wrap:anywhere}
.runtime-state.land.spec .swho b{font:700 8px/1.2 var(--f-pixel)}

.runtime-state.land.spec .sout{font-size:8px}

/* ===== landscape 1 to 4: style A "split" (picked 2026-10-18). dimmed stadium; left column = title and choices,
   right column = the thing you act on; both centred top to bottom. CSS box is 626 x 306 inside the bezel ===== */
.runtime-state.land{--rim:drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff)}
.runtime-state:is(.set,.lvl,.load).land:not(.sty){background-color:#2f6fb8}
.runtime-state:is(.set,.lvl,.load).land:not(.sty) :is(.stands,.ground,.dirt){filter:brightness(.45) saturate(.6)}
.runtime-state:is(.set,.lvl,.load).land:not(.sty) .stands{width:112%}
/* the button bob animates translate, so buttons centre with a negative margin */
.runtime-state:is(.set,.lvl).land:not(.sty) .play-wrap{right:auto;bottom:auto;rotate:-2deg;width:var(--w);margin-left:calc(var(--w) / -2)}
.runtime-state:is(.set,.lvl).land:not(.sty) .play{font-size:20px;padding:12px 0 14px}
/* 1 settings: SETTINGS, tabs stacked, DONE | rows */
.runtime-state.set.land:not(.sty) .pb-back{display:none}
.runtime-state.set.land:not(.sty) .hw.st-title{left:calc(160px + var(--safe-left)/2);right:auto;width:auto;top:38px;translate:-50% -50%}
.runtime-state.set.land:not(.sty) .st-title .hw-px{display:block;width:200px!important;image-rendering:pixelated;filter:var(--rim)!important}
.runtime-state.set.land:not(.sty) .tabs{left:calc(160px + var(--safe-left)/2);right:auto;translate:-50% 0;top:76px;width:200px;flex-direction:column;gap:6px;filter:drop-shadow(3px 0 0 var(--ink)) drop-shadow(-3px 0 0 var(--ink)) drop-shadow(0 3px 0 var(--ink)) drop-shadow(0 -3px 0 var(--ink)) drop-shadow(0 4px 0 var(--ink)) var(--rim)}
/* Silkscreen only stays sharp at multiples of 8px */
.runtime-state.set.land:not(.sty) .tab{flex:none;height:30px;font:400 16px/16px var(--f-pixel);clip-path:var(--step4)!important}
.runtime-state.set.land:not(.sty) .rows{left:calc(300px + var(--safe-left)/2);right:calc(22px + var(--safe-right));top:50%;translate:0 -50%;gap:6px;filter:drop-shadow(3px 0 0 var(--ink)) drop-shadow(-3px 0 0 var(--ink)) drop-shadow(0 3px 0 var(--ink)) drop-shadow(0 -3px 0 var(--ink))}
.runtime-state.set.land:not(.sty) .row{min-height:44px;padding:4px 10px 8px 12px}
.runtime-state.set.land:not(.sty) .play-wrap{--w:200px;left:calc(160px + var(--safe-left)/2);top:230px}
/* 2 loading and 3 load failed: logo | trio over the progress plate (or NO SIGNAL) */
.runtime-state.load.land .logo{position:absolute;left:calc(166px + var(--safe-left)/2);top:50%;translate:-50% -50%;width:260px;margin:0;z-index:3}
.runtime-state.load.land .squad{left:calc(450px - var(--safe-right)/2);right:auto;translate:-50% 0;width:270px;top:24px;bottom:auto;height:150px;align-items:flex-end}
.runtime-state.load.land .w-burger{width:52%}
.runtime-state.load.land .w-donut,.runtime-state.load.land .w-sushi{width:36%}
/* dizzy stars belong to the failed state only */
.runtime-state.load.land:not(.fa) .dizzy{display:none}
.runtime-state.load.land .prog{left:calc(450px - var(--safe-right)/2);right:auto;bottom:auto;top:188px;width:260px;margin-left:-130px;gap:8px;padding:13px 17px 15px;background:#fff;clip-path:var(--step8);isolation:isolate}
.runtime-state.load.land .prog:before{content:"";position:absolute;inset:3px;z-index:-1;background:var(--ink);clip-path:var(--step6)}
.runtime-state.load.land .lstep{font:400 16px/16px var(--f-pixel);text-shadow:none}
.runtime-state.load.land .lbar{height:22px;padding:4px;background:#2a4c86}
.runtime-state.load.land .pb-back b{font:400 16px/16px var(--f-pixel);padding:8px 12px;filter:var(--rim)}
.runtime-state.load.land.fa .squad{top:14px}
.runtime-state.load.land.fa .nosig{left:calc(450px - var(--safe-right)/2);right:auto;top:176px;bottom:auto;width:260px;margin-left:-130px}
.runtime-state.load.land.fa .nosig .hw-px{width:200px!important;filter:var(--rim) drop-shadow(0 0 6px rgba(200,24,16,.8)) drop-shadow(0 0 14px rgba(180,20,12,.5))!important}
.runtime-state.load.land.fa .nosig .pxt{margin-top:-6px;font:400 16px/16px var(--f-pixel)}

/* Portrait's scroll-height budget does not apply to the right-hand landscape column. */
.runtime-state.set.land .rows{max-height:none;overflow:visible}


/* Approved Waiting B: centered count, seat row, bots plate and paired actions. */
.runtime-state.wait .wcount,.runtime-state.wait .wbtns>.btnwrap,.runtime-state.wait .landscape-extra{display:none}
.runtime-state.wait .wbtns{display:contents}
.runtime-state.wait.land{background-color:#2f6fb8}
.runtime-state.wait.land :is(.stands,.ground,.dirt){filter:brightness(.45) saturate(.6)}
.runtime-state.wait.land :is(.q-head,.q-count,.squad,.home,.bots-label){display:none}
.runtime-state.wait.land .wcount{display:block;position:absolute;z-index:3;left:calc(50% + 10px);top:calc(1px + var(--safe-top));translate:-50% 0}
.runtime-state.wait.land .wc-num{position:relative;margin:0;rotate:none}
.runtime-state.wait.land .wc-num .hw-px{display:block;width:130px!important;image-rendering:pixelated;filter:var(--rim)!important}
.runtime-state.wait.land .seats{position:absolute;left:calc(18px + var(--safe-left));right:calc(18px + var(--safe-right));top:84px;width:auto;margin:0;display:flex;gap:8px;padding:6px 6px 10px;overflow-x:auto;scrollbar-width:none}
.runtime-state.wait.land .seats::-webkit-scrollbar{display:none}
.runtime-state.wait.land .seat{display:block;flex:0 0 calc((100% - 56px)/8)}
.runtime-state.wait.land .bots{position:absolute;z-index:3;left:50%;right:auto;top:168px;translate:-50% 0;margin:0;display:flex;align-items:center;gap:10px;padding:7px 18px 8px;background:#fff;clip-path:var(--step8);isolation:isolate;box-shadow:none;rotate:none;font:400 16px/16px var(--f-pixel);color:#fff;text-shadow:none;white-space:nowrap}
.runtime-state.wait.land .bots:before{content:"";position:absolute;inset:3px;z-index:-1;background:var(--ink);clip-path:var(--step6)}
.runtime-state.wait.land .bots:after{content:"BOTS FILL IN";order:-1}
.runtime-state.wait.land .bots b{font:24px/1 var(--f-display);color:#fff;text-shadow:none;background:none;box-shadow:none;padding:0}
.runtime-state.wait.land .wbtns{position:absolute;z-index:4;left:50%;translate:-50% 0;top:222px;display:flex;align-items:center;gap:22px}
.runtime-state.wait.land .wbtns .btnwrap{display:block;width:150px}
.runtime-state.wait.land .wbtns .btn{min-height:46px;font-size:16px}
.runtime-state.wait.land .wbtns .play-wrap{position:relative;left:auto;right:auto;bottom:auto;width:230px;rotate:-1deg}