/* PLN BOX SHOW RIG · 1080x1920 vertical composition. Loaded after overlay.css. Same DOM, same modules, same event feed: only the composition changes. This is a purpose-built 9:16 layout, not a crop of the program output, so nothing important sits where a phone platform puts its own chrome. Reading order top to bottom: who is playing, what they are worth, what just came out of the box, what the crowd and the Broker say, where the ladder is. */ #stage { width: 1080px; height: 1920px; } /* ── header band ── */ #bug { top: 40px; left: 40px; } #bug .plnmark { height: 52px; } #bug .show .name { height: 26px; } #fair { right: auto; left: 40px; top: 1790px; width: 1000px; justify-content: center } #fair .barcode { display: none } #vaultchip { right: 40px; top: 40px; padding: 10px 18px; } #vaultchip b { font-size: var(--t-5); } /* ── lower third becomes a stacked scorebar under the header ── */ #lower { left: 40px; right: 40px; bottom: auto; top: 130px; width: 1000px } #lower .lt-body { flex-direction: column } #lower .who .name { font-size: 62px } #lower .ledger { width: 100%; border-left: none; border-top: 2px solid var(--hairline) } .delta { top: -34px; font-size: var(--t-4) } /* ── the reveal owns the middle of the frame ── Vertical bands, all top-anchored so nothing can collide: 40 bug · 130 scorebar · 430 reveal · 1060 panels · 1400 ladder 1510 lever · 1600 stakes · 1790 fairness */ #reveal { top: 500px; bottom: 880px; } #slate { top: -60px; font-size: var(--t-5); } #crate { width: 340px; height: 340px; margin: -170px 0 0 -170px; } #card { width: 900px } #card .slab-window { height: 420px } #card .cat { width: 300px; height: 300px } #card .iname { font-size: 62px } #card .value { font-size: 110px } #card .odds { font-size: var(--t-3) } #card .seal { width: 190px; height: 190px; top: 90px; right: -60px } #card .seal b { font-size: 44px } /* Docking travels up out of the phone's centre, where the camera lives. Less extreme than 16:9: there is more room to give here. */ #card.docked { transform: translateY(-70px) scale(.6); } #stamp { font-size: 62px; } #shockwave { width: 420px; height: 420px; margin: -210px 0 0 -210px; } /* ── panel family sits under the reveal, full width ── */ #slot { left: 40px; top: 1060px; bottom: auto; width: 1000px; } .panel { padding: 24px 26px 28px; } .panel .ptitle { font-size: var(--t-4); } .panel .ptag { font-size: var(--t-2); } .duel .amount { font-size: 62px; } .brokerline { font-size: var(--t-2); } .bar { grid-template-columns: 110px 1fr 92px; } .bar .bname { font-size: var(--t-4); } .bar .pct { font-size: var(--t-4); } .bar .track { height: 28px; } #verdict { font-size: var(--t-5); } #grade .gletter { width: 130px; min-width: 130px; font-size: 96px; } #grade .gline { font-size: var(--t-2); } #grade .gopt .ov { font-size: var(--t-4); } /* The Broker's camera window is a 16:9 luxury: in 9:16 the frame is already carrying the contestant, so it stays off unless explicitly asked for. */ #brokerCam, #brokerCam.on { display: none; } body.brokercam-on #brokerCam { left: 40px; top: 1400px; bottom: auto; width: 1000px; } body.brokercam-on #brokerCam.on { display: block; } body.brokercam-on #brokerCam .bc-window { height: 180px; } body.brokercam-on #ladder, body.brokercam-on #lever, body.brokercam-on #decision { display: none; } /* ── ladder becomes a horizontal rail across the bottom ── */ #ladder { right: auto; left: 40px; top: 1400px; bottom: auto; transform: none; width: 1000px; flex-direction: row; gap: 8px; } #ladder.pkg.from-r.out { transform: translateX(36px); } #ladder .rung { flex: 1; flex-direction: column; gap: 4px; padding: 12px 8px; text-align: center; } #ladder .rung .tier { font-size: 11px; } #ladder .rung .price { font-size: var(--t-3); } #ladder .rung.cleared .check { right: -6px; top: -6px; } #ladder .rung .dtag { left: 50%; transform: translateX(-50%); bottom: -9px; font-size: 9px; padding: 1px 5px; } /* ── crowd lever under the ladder ── */ #lever { top: 1520px; bottom: auto; width: 1000px; left: 40px; right: auto; } #lever .track { height: 22px; } /* ── decision stakes banner spans the frame ── */ #decision { right: auto; left: 40px; top: 1610px; bottom: auto; width: 1000px; height: auto; padding: 18px 24px; } #decision .question { font-size: var(--t-5); } #decision .next { font-size: var(--t-5); } #decision .choices { font-size: var(--t-2); gap: 22px; } /* ── battles stack rather than split ── */ .bhalf { position: absolute; top: auto; bottom: auto; width: 1000px; left: 40px; padding: 20px 0; text-align: left; } .bhalf.p1 { top: 430px; border-left: 5px solid var(--team-a); padding-left: 22px; } .bhalf.p2 { top: 900px; right: auto; border-right: none; border-left: 5px solid var(--team-b); padding-left: 22px; text-align: left; } .bhalf.p2 .brounds { justify-content: flex-start; } .bhalf.p2 .bpulls { align-items: flex-start; } .bhalf .bname { font-size: 56px; } .bhalf .btotal { font-size: 84px; } #bvs { top: 856px; font-size: var(--t-4); } /* Tug of war runs horizontally in 9:16. */ #tug { left: 40px; right: auto; top: 1380px; bottom: auto; width: 1000px; height: 46px } #bround { top: 380px; } #bsit { top: 1450px; font-size: var(--t-5); } #bleadflag { top: 1380px; font-size: var(--t-5); } /* ── full-frame cards scale to the taller stage ── */ #title .t2 img { height: 118px; } #intro .icard, #settle .scard, #actout .ao-card, #tape .tape-card { width: 960px; } #intro .iname { font-size: 84px; } #settle .stake { font-size: 132px; } #actout .ao-name { font-size: 76px; } #winner .wtext { font-size: 86px; } #replayBug { top: 132px; left: 40px; } /* ── rip battles ── The cascade strip moves up into the reveal band's own vertical range (500 to 1040 in this taller stage) rather than the 16:9 bottom:240 spot, which would otherwise land inside the decision stakes band this layout stacks at top:1610. Placed near the bottom of that band, clear of #card and #crate above it. Note: unlike the 16:9 composite (test/composite.test.ts), this layout has no measured head-zone contract of its own yet for any element, this one included; a dedicated vertical composite test is real work this task did not have room for. */ #ripCascade{bottom:900px} /* ── platform-safe: keep clear of the phone app's own chrome ── Right rail for action buttons, bottom band for captions and the account bar. */ body.safe-platform #ladder, body.safe-platform #lever, body.safe-platform #decision, body.safe-platform #slot, body.safe-platform #fair { width: 820px; } body.safe-platform #lever { left: 40px; right: auto; } body.safe-platform #slot { top: 1000px; } body.safe-platform #ladder { top: 1300px; } body.safe-platform #lever { top: 1416px; } body.safe-platform #decision { top: 1500px; } body.safe-platform #fair { top: 1660px; } body.safe-platform #brokerCam { display: none !important; } body.safe-platform #reveal { top: 400px; bottom: 960px; }