/* QB Play — upright phone "Handheld" layout (Variant A). Phones in portrait only; computers keep sideways.
   Original pixel art; no third-party marks. Toggled by body.qbp-on (js/qbportrait.js). */
.qbp-bug,.qbp-panel,.qbp-tipbar,.qbp-menu{display:none}
.qbp-screen,.qbp-bezel{display:contents}
body.qbp-on .qb-board,body.qbp-on .qb-menu,body.qbp-on [data-testid=qbplay-stick],body.qbp-on .qb-rotate,body.qbp-on .qb-fs-tip{display:none!important}
body.qbp-on .qb-full.qb-need-rotate .qbplay-stage{visibility:visible!important}
body.qbp-on .qbplay{background:#070b18!important;--qbp-gold:#f0c020;--qbp-gold2:#ffe566;--qbp-edge:#2b3f8f}

/* ---------- TV score bug ---------- */
body.qbp-on .qbp-bug{flex:0 0 auto;display:grid;grid-template-columns:1fr auto 1fr;background:#060a16;border-bottom:3px solid #000;box-shadow:inset 0 -2px 0 var(--qbp-edge);color:#fff;position:relative;z-index:5;user-select:none;-webkit-user-select:none}
.qbp-team{display:flex;align-items:center;gap:7px;padding:5px 8px 3px;min-width:0}
.qbp-team.opp{flex-direction:row-reverse}
.qbp-slab{width:9px;align-self:stretch;box-shadow:inset 0 0 0 2px rgba(0,0,0,.35)}
.qbp-ab{font:400 14px "PS2P",monospace;letter-spacing:1px;line-height:1}
.qbp-score{font:400 38px/0.8 "VT",monospace;margin-left:auto;min-width:1.2em;text-align:center;text-shadow:2px 2px 0 #000}
.qbp-team.opp .qbp-score{margin-left:0;margin-right:auto}
.qbp-poss{width:0;height:0;border:6px solid transparent;border-left:9px solid var(--qbp-gold2);margin-left:-2px}
.qbp-poss[hidden]{display:none}
.qbp-mid{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3px 10px;background:#0c1430;border-left:2px solid #000;border-right:2px solid #000}
.qbp-qtr{font:400 10px "PS2P",monospace;color:var(--qbp-gold2)}
.qbp-clock{font:400 28px/0.9 "VT",monospace;letter-spacing:1px}
.qbp-row2{grid-column:1/-1;display:flex;align-items:stretch;justify-content:space-between;background:linear-gradient(#f0c020,#d9a514);color:#111;border-top:2px solid #000}
.qbp-dd{font:400 13px "PS2P",monospace;padding:6px 10px 5px;letter-spacing:.5px;white-space:nowrap}
.qbp-spot{font:400 11px "PS2P",monospace;padding:7px 8px 5px;background:rgba(0,0,0,.12);white-space:nowrap}
.qbp-pc{display:flex;align-items:center;gap:6px;padding:0 10px;background:#111;color:var(--qbp-gold2);font:400 10px "PS2P",monospace}
.qbp-pc b{font:400 24px/0.8 "VT",monospace;color:#fff;min-width:1.1em;text-align:right}
.qbp-pc.hot b{color:#ff5a5a}

/* ---------- one-time home-screen tip ---------- */
body.qbp-on .qbp-tipbar{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:5px 6px 5px 10px;background:#12182a;border-bottom:2px solid #000;color:#e8ecf4;font:600 12px/1.3 system-ui,sans-serif}
body.qbp-on .qbp-tipbar[hidden]{display:none}
.qbp-tipbar b{color:var(--qbp-gold2)}
.qbp-tipbar span{flex:1 1 auto}
.qbp-tipbar button{flex:0 0 auto;min-width:44px;min-height:36px;border:2px solid #000;background:#2a3878;color:#fff;font:400 9px "PS2P",monospace;cursor:pointer}

/* ---------- screen bezel ---------- */
body.qbp-on .qbp-screen{flex:1 1 auto;min-height:0;display:flex;padding:5px 8px 0;background:#0f1a3c;position:relative}
body.qbp-on .qbp-bezel{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;padding:4px;background:#05070f;box-shadow:0 0 0 3px #000,0 0 0 6px var(--qbp-edge),0 0 0 9px #000;margin:3px 3px 6px;position:relative}
body.qbp-on .qbp-bezel .qbplay-stage{flex:1 1 auto;min-height:0;border:none!important;border-radius:0!important}
.qbp-sum{position:absolute;left:6%;right:6%;top:6%;z-index:4;background:#060a18;box-shadow:0 0 0 3px #000,0 0 0 6px var(--qbp-gold),0 0 0 9px #000;padding:12px 12px 10px;color:#fff;line-height:1.2}
.qbp-sum[hidden]{display:none}
.qbp-sum h3{margin:0 0 4px;font:400 10px "PS2P",monospace;color:var(--qbp-gold2);letter-spacing:1px}
.qbp-sum .res{font:400 20px "PS2P",monospace;margin:6px 0 10px;text-shadow:3px 3px 0 #c8202c;word-break:break-word}
.qbp-sum .who{font:400 10px "PS2P",monospace;line-height:1.6;color:#ffd23c;margin:-4px 0 10px;word-break:break-word}
.qbp-sum .grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;margin-bottom:8px}
.qbp-sum .grid div{background:#101a3c;box-shadow:inset 0 0 0 2px #24357a;padding:6px 4px;text-align:center;font:400 7px "PS2P",monospace;color:#9fb0ff}
.qbp-sum .grid b{display:block;font:400 24px/1 "VT",monospace;color:#fff;margin-top:4px}
.qbp-sum .lines{font:400 18px/1.25 "VT",monospace;color:#d6defc}
.qbp-sum .lines span{color:var(--qbp-gold2)}
.qbp-sum .star{margin-top:6px;font:400 8px/1.5 "PS2P",monospace;color:#7cf29b}
.qbp-sum .opp{margin-top:6px;font:400 8px/1.5 "PS2P",monospace;color:#ffb3b3}

/* ---------- console panel ---------- */
body.qbp-on .qbp-panel{flex:0 0 auto;position:relative;box-sizing:border-box;height:var(--qbp-panel-h,240px);padding:6px 10px 8px;display:flex;flex-direction:column;gap:6px;color:#fff;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 2px,transparent 2px 4px),radial-gradient(circle at 30% 20%,rgba(255,255,255,.06),transparent 60%),linear-gradient(180deg,#1b2b6a,#111d4a 55%,#0c1638);
  border-top:4px solid #000;box-shadow:inset 0 3px 0 #3a54b8,inset 0 -3px 0 #08102c;user-select:none;-webkit-user-select:none;touch-action:none;-webkit-touch-callout:none}
.qbp-panel::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='6'><rect width='1' height='1' fill='%23ffffff' fill-opacity='.18'/><rect x='3' y='3' width='1' height='1' fill='%23000000' fill-opacity='.35'/></svg>")}
.qbp-screw{position:absolute;width:7px;height:7px;background:#7c8bc4;box-shadow:inset -2px -2px 0 #3a4680,0 0 0 2px #000;top:7px}
.qbp-screw.a{left:4px}.qbp-screw.b{right:4px}
.qbp-lcd{position:relative;flex:0 0 26px;display:flex;align-items:center;gap:6px;padding:0 8px;background:#0b1f1a;color:#9df5b2;font:400 8px/1.2 "PS2P",monospace;box-shadow:inset 0 0 0 2px #000,inset 0 0 0 4px #1f3a33,0 2px 0 #000;margin:0 8px;white-space:nowrap;overflow:hidden}
.qbp-lcd .msg{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis}
.qbp-lcd .msg.two{white-space:normal;font-size:7px;line-height:1.3;text-overflow:clip;max-height:22px}
.qbp-tag{color:#111;background:var(--qbp-gold2);padding:3px 4px;flex:0 0 auto}
.qbp-tag.bad{background:#ff6b6b}.qbp-tag.boost{background:#ff9b2f}
.qbp-stam{display:flex;gap:2px;align-items:center;flex:0 0 auto}
.qbp-stam i{width:6px;height:11px;background:#174a2b;box-shadow:inset 0 0 0 1px #000}
.qbp-stam i.on{background:#7cf29b}.qbp-stam.low i.on{background:#f0c020}
.qbp-meter{position:relative;flex:0 0 110px;height:10px;background:#000;box-shadow:0 0 0 2px #1f3a33}
.qbp-meter::before{content:"";position:absolute;left:41%;right:41%;top:0;bottom:0;background:#f0c020}
.qbp-meter i{position:absolute;top:-3px;bottom:-3px;width:3px;background:#fff;left:50%;margin-left:-1px}
.qbp-main{flex:1 1 auto;min-height:0;display:flex;align-items:stretch;gap:4px;position:relative}
.qbp-stickzone{flex:1 1 auto;position:relative;display:flex;align-items:center;justify-content:center;touch-action:none}
.qbp-stick{position:relative;width:118px;height:118px;pointer-events:none}
.qbp-cross b{position:absolute;background:#0a1230;box-shadow:inset 0 0 0 3px #000,inset 3px 3px 0 3px #24357a,inset -3px -3px 0 3px #050a1e}
.qbp-cross b.h{left:0;right:0;top:36%;height:28%}.qbp-cross b.v{top:0;bottom:0;left:36%;width:28%}
.qbp-cross em{position:absolute;width:0;height:0;border:5px solid transparent;opacity:.8}
.qbp-cross em.u{left:50%;top:5px;margin-left:-5px;border-bottom:7px solid #8fa3ff;border-top:0}
.qbp-cross em.d{left:50%;bottom:5px;margin-left:-5px;border-top:7px solid #8fa3ff;border-bottom:0}
.qbp-cross em.l{top:50%;left:5px;margin-top:-5px;border-right:7px solid #8fa3ff;border-left:0}
.qbp-cross em.r{top:50%;right:5px;margin-top:-5px;border-left:7px solid #8fa3ff;border-right:0}
.qbp-well{position:absolute;left:50%;top:50%;width:78px;height:78px;margin:-39px 0 0 -39px;background:#050916;clip-path:var(--qbp-pix78);opacity:.85}
.qbp-knob{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;clip-path:var(--qbp-pix56);background:radial-gradient(circle at 38% 32%,#fff6b8 0 14%,#ffd84a 15% 46%,#d29a12 47% 72%,#7a5208 73%);will-change:transform}
.qbp-knob::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.12) 0 2px,transparent 2px 4px)}
.qbp-stickzone.off .qbp-stick{opacity:.4;filter:saturate(.35)}
.qbp-stickzone.held .qbp-knob{filter:brightness(1.18)}
.qbp-caps{flex:0 0 212px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;position:relative}
.qbp-cap{position:relative;border:0;padding:0;margin:0;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent;color:#fff}
.qbp-cap.c0,.qbp-cap.c1{transform:translateX(10px)}.qbp-cap.c2,.qbp-cap.c3{transform:translateX(-6px)}
.qbp-cap .rim{position:relative;width:62px;height:62px;background:#000;clip-path:var(--qbp-pix62);flex:0 0 auto}
.qbp-cap .face{position:absolute;inset:3px;clip-path:var(--qbp-pix56);display:flex;align-items:center;justify-content:center;text-align:center;font:400 8px/1.25 "PS2P",monospace;text-shadow:1px 1px 0 rgba(0,0,0,.65);
  background:radial-gradient(circle at 36% 30%,rgba(255,255,255,.55) 0 10%,transparent 11%),radial-gradient(circle at 50% 50%,var(--c1) 0 52%,var(--c2) 53% 74%,var(--c3) 75%)}
.qbp-cap .face::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.10) 0 2px,transparent 2px 4px)}
.qbp-cap .cd{position:absolute;inset:3px;clip-path:var(--qbp-pix56);background:conic-gradient(rgba(0,0,0,.62) var(--cd,0%),transparent 0);pointer-events:none}
.qbp-cap.r{--c1:#ff5560;--c2:#c8202c;--c3:#6e0c14}.qbp-cap.b{--c1:#5b8dff;--c2:#2856c8;--c3:#112a6e}
.qbp-cap.g{--c1:#5ee07c;--c2:#22963e;--c3:#0c4a1c}.qbp-cap.y{--c1:#ffe36b;--c2:#d8a414;--c3:#6e4e06}.qbp-cap.y .face{color:#1a1200;text-shadow:1px 1px 0 rgba(255,255,255,.4)}
.qbp-cap.k{--c1:#5a6276;--c2:#353b4c;--c3:#1a1d26}
.qbp-cap.dim .rim{opacity:.35;filter:saturate(.3)}
.qbp-cap.press .face{transform:translateY(2px);filter:brightness(1.3)}
.qbp-cap.lit .rim{filter:drop-shadow(0 0 6px #ffb347)}
.qbp-cap.lit .face{box-shadow:inset 0 0 0 3px #fff}
.qbp-cap .on{position:absolute;right:-2px;top:-2px;font:400 7px "PS2P",monospace;background:#ff9b2f;color:#111;padding:2px 3px;box-shadow:0 0 0 2px #000}
.qbp-foot{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:10px;padding-bottom:4px}
.qbp-pill{min-height:56px!important;height:56px!important;max-height:none!important;box-sizing:border-box;border:0;border-radius:28px;padding:0 16px;font:400 13px "PS2P",monospace;color:#111;cursor:pointer;position:relative;touch-action:manipulation;
  background:linear-gradient(180deg,#fff1a0 0 18%,#f0c020 19% 70%,#a87808 71%);box-shadow:0 0 0 3px #000,0 4px 0 3px #000,inset 0 -4px 0 rgba(0,0,0,.25)}
.qbp-pill.snap{white-space:nowrap;flex:1 1 auto;max-width:170px;min-width:120px!important;font-size:14px;letter-spacing:2px}
.qbp-pill.dark{flex:0 0 auto;background:linear-gradient(180deg,#5a6aa8 0 18%,#2a3878 19% 70%,#151e48 71%);color:#e6ecff;font-size:8px;line-height:1.4;padding:0 10px;min-width:78px!important}
.qbp-pill.dark.on{background:linear-gradient(180deg,#8ff0a6 0 18%,#2fae4f 19% 70%,#145a26 71%);color:#04140a}
.qbp-pill.dim{opacity:.35;filter:saturate(.3)}
.qbp-pill.pulse{box-shadow:0 0 0 3px #000,0 4px 0 3px #000,0 0 14px 6px rgba(255,220,80,.55)}
/* MENU sheet covers the panel only, never the field */
body.qbp-on .qbp-menu{position:absolute;left:0;right:0;bottom:0;z-index:9;display:flex;flex-direction:column;gap:8px;padding:12px 14px 14px;background:#0c1638;border-top:4px solid #000;box-shadow:inset 0 3px 0 #3a54b8}
body.qbp-on .qbp-menu[hidden]{display:none}
.qbp-menu button{min-height:48px;border:0;font:400 11px "PS2P",monospace;color:#fff;background:#2a3878;box-shadow:0 0 0 3px #000,inset 0 -4px 0 rgba(0,0,0,.3);cursor:pointer}
.qbp-menu button.gold{background:#f0c020;color:#111}
.qbp-menu p{margin:0;color:#c8d0e0;font:600 12px/1.35 system-ui,sans-serif}

.qbp-pill.menu{min-width:72px!important}
.qbp-pill.snap.long{font-size:11px;letter-spacing:1px}

/* ---------- play cards (non-run phases): 2x2 pixel cards with the phase's choices ---------- */
.qbp-caps{gap:6px;padding:2px 0}
.qbp-caps[hidden],.qbp-runbtns[hidden]{display:none!important}
.qbp-cap.c0,.qbp-cap.c1,.qbp-cap.c2,.qbp-cap.c3{transform:none}
.qbp-cap{min-height:56px;--st:4px}
.qbp-cap .rim{width:100%;height:100%;min-height:56px;border-radius:0;
  clip-path:polygon(var(--st) 0,calc(100% - var(--st)) 0,calc(100% - var(--st)) 2px,calc(100% - 2px) 2px,calc(100% - 2px) var(--st),100% var(--st),100% calc(100% - var(--st)),calc(100% - 2px) calc(100% - var(--st)),calc(100% - 2px) calc(100% - 2px),calc(100% - var(--st)) calc(100% - 2px),calc(100% - var(--st)) 100%,var(--st) 100%,var(--st) calc(100% - 2px),2px calc(100% - 2px),2px calc(100% - var(--st)),0 calc(100% - var(--st)),0 var(--st),2px var(--st),2px 2px,var(--st) 2px)}
.qbp-cap .face{inset:3px;clip-path:none;border-radius:0;font:400 9px/1.3 "PS2P",monospace;padding:0 4px 0 10px;justify-content:flex-start;text-align:left;
  background:linear-gradient(90deg,var(--c1) 0 6px,transparent 6px),linear-gradient(180deg,rgba(255,255,255,.16) 0 30%,transparent 31%),linear-gradient(180deg,#26357a,#141d48);box-shadow:inset 0 -3px 0 rgba(0,0,0,.35)}
.qbp-cap.y .face{color:#fff;text-shadow:1px 1px 0 rgba(0,0,0,.65);background:linear-gradient(90deg,var(--c1) 0 6px,transparent 6px),linear-gradient(180deg,rgba(255,255,255,.18) 0 30%,transparent 31%),linear-gradient(180deg,#6b5410,#3a2c06)}
.qbp-cap .cd{display:none}
.qbp-cap.dim .rim{opacity:.25}
.qbp-cap.press .face{transform:translateY(2px);filter:brightness(1.35)}

/* ---------- run: two big arcade buttons, MOVE (context) + BOOST (tap toggle) ---------- */
.qbp-runbtns{flex:0 0 212px;position:relative}
.qbp-rb{position:absolute;border:0;padding:0;margin:0;background:transparent;cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent;color:#fff;display:flex;align-items:center;justify-content:center}
.qbp-rb.move{right:4px;top:0;width:112px;height:100%}      /* generous hit area */
.qbp-rb.boost{left:0;bottom:0;width:94px;height:100%}
.qbp-rb .rim{position:relative;background:#000;flex:0 0 auto}
.qbp-rb.move .rim{width:84px;height:84px;clip-path:var(--qbp-pix84);margin-bottom:22px}
.qbp-rb.boost .rim{width:66px;height:66px;clip-path:var(--qbp-pix66);margin-top:42px}
.qbp-rb .face,.qbp-rb .cd{position:absolute;inset:3px}
.qbp-rb.move .face,.qbp-rb.move .cd{clip-path:var(--qbp-pix78)}
.qbp-rb.boost .face,.qbp-rb.boost .cd{clip-path:var(--qbp-pix62)}
.qbp-rb .face{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;text-shadow:1px 1px 0 rgba(0,0,0,.65);
  background:radial-gradient(circle at 36% 30%,rgba(255,255,255,.55) 0 10%,transparent 11%),radial-gradient(circle at 50% 50%,var(--c1) 0 52%,var(--c2) 53% 74%,var(--c3) 75%)}
.qbp-rb .face::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.10) 0 2px,transparent 2px 4px)}
.qbp-rb .face b{font:400 11px "PS2P",monospace}
.qbp-rb.boost .face b{font-size:9px}
.qbp-rb .face small{font:400 7px "PS2P",monospace;opacity:.92;min-height:7px}
.qbp-rb .cd{background:conic-gradient(rgba(0,0,0,.62) var(--cd,0%),transparent 0);pointer-events:none}
.qbp-rb.r{--c1:#ff5560;--c2:#c8202c;--c3:#6e0c14}
.qbp-rb.y{--c1:#ffe36b;--c2:#d8a414;--c3:#6e4e06}.qbp-rb.y .face{color:#1a1200;text-shadow:1px 1px 0 rgba(255,255,255,.4)}
.qbp-rb.press .face{transform:translateY(2px);filter:brightness(1.3)}
.qbp-rb.move.hot .rim{filter:drop-shadow(0 0 7px #ff6b6b)}
.qbp-rb.boost.lit .rim{filter:drop-shadow(0 0 8px #ffb347)}
.qbp-rb.boost.lit .face{box-shadow:inset 0 0 0 3px #fff}
.qbp-rb.boost.lit .face small{background:#ff9b2f;color:#111;padding:2px 3px;text-shadow:none}