/* ===== GAMES (design 06 §7, Phase 2): arcade hub, Sky Obby run, question card, result. Pixel skin only. =====
   Canvases are art-resolution and scaled by an integer in JS (image-rendering: pixelated). No blur, no glass over the canvas.
   Question card = study layer: opaque paper, system font, KaTeX maths (§3.4). Tap targets >= 48 px. */
.arc-page{display:flex;flex-direction:column;gap:20px;max-width:1100px}
@media (max-width:600px){.arc-page .arc-seg{display:flex;flex-wrap:wrap;max-width:100%}}   /* QA 17/10: 3-option View seg overflowed 390 px sideways */
.arc-head{display:flex;flex-direction:row;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px}
.arc-meta{display:flex;flex-wrap:wrap;gap:8px}
.arc-chip{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;background:var(--bp-paper);color:var(--bp-ink);box-shadow:inset 0 0 0 3px var(--px-line,#2B5CA8);font:600 15px/1 var(--lg-font)}
.arc-chip b.px{font-size:20px}
.arc-title{font:600 24px/1.1 var(--px-font,var(--gm-px));-webkit-font-smoothing:antialiased;letter-spacing:.03em;margin:0 0 6px}
.arc-cab-cv,.obby-cv{display:block;image-rendering:pixelated;image-rendering:crisp-edges;flex:none}
.arc-hero{display:grid;grid-template-columns:auto 1fr;gap:24px;align-items:center}
.arc-hero-art{display:flex;align-items:flex-end;gap:8px}
.arc-hero-av{min-width:64px;min-height:112px;display:flex;align-items:flex-end}
.arc-hero-txt p{margin:0 0 10px}
.arc-play{min-height:52px}
.arc-note{color:var(--bp-warn);font-weight:600}
.arc-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.arc-cab{display:flex;gap:16px;align-items:center;margin:0}
.arc-cab .arc-title{font-size:16px}
.arc-cab p{margin:0 0 8px}
.arc-soon{display:inline-flex;align-items:center;min-height:28px;padding:0 10px;background:var(--bp-neu-soft);color:var(--bp-ink-2);box-shadow:inset 0 0 0 2px var(--px-line-2,#8FB0DD);font:600 14px/1 var(--px-font,var(--lg-font))}
.arc-cab .arc-cab-cv{filter:saturate(.55)}
.arc-foot{margin:0}
.arc-off h2{margin-top:0}
.arc-ready{display:flex;flex-direction:column;gap:12px;align-items:flex-start;max-width:640px}
.arc-ready p{margin:0}
.arc-h{font:700 16px/1.2 var(--lg-font);margin:8px 0 0}
.arc-tickets{display:flex;align-items:baseline;gap:4px;font-weight:600;color:var(--bp-ink-2)}
.arc-tickets b{font-size:32px;color:var(--bp-ink)}
.arc-start{min-height:52px}
.arc-home{display:flex;align-items:center;gap:16px}
.arc-home h2{margin:2px 0 6px}
.arc-home-body{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.arc-home .btn{min-height:48px}

/* ---- Sky Obby run */
.obby{display:flex;flex-direction:column;gap:12px}
.obby-hud{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.obby-pill{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 10px;background:var(--bp-paper);color:var(--bp-ink);box-shadow:inset 0 0 0 3px var(--px-line,#2B5CA8);font:600 14px/1 var(--lg-font)}
.obby-pill b{font:600 18px/1 var(--px-font,var(--gm-px));-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
.obby-hud .btn{min-height:48px}
.obby-main{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
.obby-stage{position:relative;min-width:0;display:flex;justify-content:center;background:#6AB6FF;box-shadow:0 0 0 3px var(--px-line,#2B5CA8)}
.obby-veil{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(11,22,38,.55);padding:16px}
.obby-veil[hidden]{display:none}
.obby-veil-card{background:var(--bp-paper);color:var(--bp-ink);padding:20px 24px;box-shadow:0 0 0 3px var(--px-line,#2B5CA8),6px 6px 0 0 var(--px-drop,rgba(11,22,38,.24));text-align:center}
.obby-veil-card h2{margin:0 0 6px}.obby-veil-card p{margin:0 0 14px}
.obby-side{min-width:0}
@media(min-width:1100px){.obby-main{grid-template-columns:minmax(0,1fr) 380px}}

/* ---- question card (study layer) */
.q-card.obq{display:flex;flex-direction:column;gap:14px;margin:0}
.obq-head{display:flex;justify-content:space-between;gap:8px;font:600 14px/1.2 var(--lg-font);color:var(--bp-ink-2)}
.obq-stem{display:flex;flex-direction:column;gap:6px}
.obq-ask{font:600 15px/1.3 var(--lg-font);color:var(--bp-ink-2)}
.obq-eq{font-size:24px;color:var(--bp-ink);overflow-x:auto;overflow-y:hidden;padding:2px 0}
.obq-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.obq-choice{position:relative;display:flex;align-items:center;gap:10px;min-height:64px;padding:8px 12px;border:0;background:var(--bp-paper);color:var(--bp-ink);box-shadow:inset 0 0 0 3px var(--px-line-2,#8FB0DD);font:500 20px/1.2 var(--lg-font);text-align:left;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.obq-choice:focus-visible{outline:3px solid var(--bp-focus);outline-offset:2px}
@media(hover:hover){.obq-choice:not(:disabled):hover{background:var(--bp-paper-2);box-shadow:inset 0 0 0 3px var(--px-line,#2B5CA8)}}
.obq-choice:disabled{cursor:default;opacity:1}
.obq-k{display:inline-flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;background:var(--bp-neu-soft);color:var(--bp-ink-2);font:600 15px/1 var(--lg-font)}
.obq-choice.right{background:var(--bp-pos-soft);box-shadow:inset 0 0 0 3px var(--bp-pos)}
.obq-choice.wrong{background:var(--bp-neg-soft);box-shadow:inset 0 0 0 3px var(--bp-neg)}
.obq-choice.right::after,.obq-choice.wrong::after{position:absolute;right:8px;top:6px;font:700 12px/1 var(--lg-font)}
.obq-choice.right::after{content:"Right";color:var(--bp-pos)}
.obq-choice.wrong::after{content:"Your pick";color:var(--bp-neg)}
.obq-typed{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.obq-var{font:600 20px/1 var(--lg-font)}
.obq-typed .mf,.obq-typed .ans{flex:1 1 180px;min-width:0;min-height:52px;font-size:20px}
.obq-check{min-height:52px}
.obq-fb{display:flex;flex-wrap:wrap;align-items:center;gap:4px;min-height:24px;font:600 16px/1.35 var(--lg-font);color:var(--bp-ink-2)}
.obq-fb.ok{color:var(--bp-pos)}.obq-fb.no{color:var(--bp-neg)}
.obq-tip{margin:0;padding:8px 10px;background:var(--bp-info-soft);color:var(--bp-info);font:500 15px/1.35 var(--lg-font)}
.obq-wait-t{margin:0;font:500 16px/1.4 var(--lg-font);color:var(--bp-ink-2)}

/* ---- result */
.arc-result{display:flex;flex-direction:column;gap:16px}
.arc-res-top{display:flex;flex-wrap:wrap;align-items:flex-end;gap:20px}
.arc-res-av{min-width:96px;min-height:168px;display:flex;align-items:flex-end}.arc-res-av{flex:none}.arc-res-av.has-fx{box-sizing:content-box;min-width:0;min-height:0;overflow:hidden}   /* 17/10: the slot holds the whole effects canvas, never over the title */
.arc-res-hd h1{margin:2px 0 8px}.arc-res-hd p{margin:6px 0 0}
.arc-stars{display:flex;gap:6px}
.arc-star .px-ico{filter:grayscale(1);opacity:.35}.arc-star.on .px-ico{filter:none;opacity:1}
.arc-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.arc-stat{display:flex;flex-direction:column;gap:4px;padding:12px;background:var(--bp-paper-2);box-shadow:inset 0 0 0 2px var(--px-line-2,#8FB0DD)}
.arc-stat-l{font:600 13px/1.2 var(--lg-font);color:var(--bp-ink-2)}
.arc-stat b.px{font-size:24px;color:var(--bp-ink)}
.arc-credit{display:flex;align-items:center;gap:6px;margin:0;padding:10px 12px;background:var(--bp-pos-soft);color:var(--bp-pos);font-weight:600}
.arc-hit h2{margin:0 0 6px}
.arc-result>.row{flex-wrap:wrap;gap:10px}
.arc-result .btn{min-height:48px}
@media(max-width:820px){.arc-grid{grid-template-columns:minmax(0,1fr)}.arc-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.arc-hero{grid-template-columns:minmax(0,1fr)}.arc-hero-art{justify-content:center}.obq-choice{font-size:18px;min-height:60px}.obby-pl{display:none}}
@media(forced-colors:active){.obq-choice,.obby-pill,.arc-chip,.arc-stat{border:2px solid CanvasText}.obq-choice.right,.obq-choice.wrong{border-width:4px}}
/* ===== end GAMES ===== */

/* ===== BOBA SHOP (game #2): shop-day tycoon. Reuses the obby run layout; the side panel holds opaque study cards. ===== */
.arc-cab.is-live .arc-cab-cv{filter:none}
.arc-cab .arc-play{margin-top:4px}
.bq-stage{align-items:flex-start;background:#EAF4FF}
.bq-bubble{position:absolute;top:8px;right:8px;max-width:min(64%,360px);padding:8px 12px;background:var(--bp-paper);color:var(--bp-ink);box-shadow:0 0 0 3px var(--px-line,#2B5CA8),4px 4px 0 0 var(--px-drop,rgba(11,22,38,.24));font:500 15px/1.35 var(--lg-font)}
.bq-bubble[hidden]{display:none}
.bq-bubble::after{content:"";position:absolute;right:28%;bottom:-9px;width:10px;height:6px;background:var(--bp-paper);box-shadow:3px 3px 0 0 var(--px-line,#2B5CA8)}
.bq-side{display:flex;flex-direction:column;gap:12px}
.bq-panel{display:flex;flex-direction:column;gap:10px;margin:0}
.bq-panel>p{margin:0}
.bq-h{margin:0;font:700 20px/1.2 var(--lg-font)}
.q-card.bq{gap:10px}
.bq-topic{font-weight:500;color:var(--bp-ink-3,var(--bp-ink-2))}
.bq-stem{margin:0;font:500 17px/1.45 var(--lg-font);color:var(--bp-ink)}
.bq-ask{margin:0;font:700 16px/1.35 var(--lg-font);color:var(--bp-ink)}
.bq-why{margin:0;padding:8px 10px;background:var(--bp-info-soft);color:var(--bp-ink);font:500 15px/1.4 var(--lg-font)}
.bq-choice .obq-v{font:600 19px/1.2 var(--lg-font);font-variant-numeric:tabular-nums}
.bq-out{display:flex;flex-direction:column;gap:8px;padding:10px 12px;background:var(--bp-paper-2);box-shadow:inset 0 0 0 2px var(--px-line-2,#8FB0DD)}
.bq-out.ok{box-shadow:inset 0 0 0 2px var(--bp-pos)}.bq-out.no{box-shadow:inset 0 0 0 2px var(--bp-neg)}
.bq-out p{margin:0}
.bq-line{font:500 15px/1.4 var(--lg-font)}
.bq-chips{display:flex;flex-wrap:wrap;gap:6px}
.bq-pos{color:var(--bp-pos)}.bq-neg{color:var(--bp-neg)}
.bq-review{font:500 14px/1.4 var(--lg-font);color:var(--bp-ink-2)}
.bq-rv-stars{color:#B87A00;letter-spacing:1px}
.bq-expose{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:0;padding:8px 10px;background:var(--bp-neg-soft);color:var(--bp-ink);font:500 14px/1.4 var(--lg-font)}
.bq-deals{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.bq-deal{display:flex;flex-direction:column;gap:2px;padding:10px;background:var(--bp-paper-2);box-shadow:inset 0 0 0 2px var(--px-line-2,#8FB0DD);font:500 15px/1.3 var(--lg-font)}
.bq-deal .px{font-size:20px}
.bq-skip,.bq-next,.bq-open,.bq-again{min-height:48px;align-self:flex-start}
.bq-cols{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
@media(min-width:700px){.bq-cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.bq-side .bq-cols{grid-template-columns:minmax(0,1fr)}}
.bq-menu,.bq-shop,.bq-ledger,.bq-reviews{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.bq-menu li,.bq-ledger li{display:flex;align-items:center;gap:8px;font:500 15px/1.3 var(--lg-font)}
.bq-dot{width:12px;height:12px;flex:none;box-shadow:0 0 0 2px var(--px-line,#2B5CA8)}
.bq-shop li{display:flex;align-items:center;gap:10px;padding:8px 10px;background:var(--bp-paper-2);font:500 14px/1.35 var(--lg-font)}
.bq-shop li b{display:block}
.bq-shop li.is-locked{opacity:.7}
.bq-shop .btn{min-height:48px;min-width:80px}
.bq-ledger li{padding:2px 0;border-bottom:1px solid var(--bp-line,rgba(16,35,63,.12))}
.bq-ledger li.is-total{border-top:1.5px solid var(--px-line,rgba(26, 102, 217, .3));border-bottom:0;padding-top:6px;font-weight:700}
.bq-pbt{margin:0;font:600 16px/1.3 var(--lg-font)}
.bq-cust{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.bq-cust b{font:700 18px/1.2 var(--lg-font)}
.bq-cust-n{width:100%;font:600 13px/1.2 var(--lg-font);color:var(--bp-ink-2)}
.bq-stars{display:inline-flex;gap:1px;align-items:center}
.bq-pill .arc-star .px-ico{width:16px;height:16px}
.bq-sum{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.bq-paper{display:flex;gap:14px;align-items:center;padding:12px 14px;background:#F2EEE6;color:#10233F;box-shadow:0 0 0 3px var(--px-line,#2B5CA8)}
.bq-paper p{margin:0}
.bq-paper-mast{font:700 13px/1.2 Georgia,"Times New Roman",serif;letter-spacing:.12em;text-transform:uppercase;border-bottom:2px solid #10233F;padding-bottom:4px;margin-bottom:6px!important}
.bq-paper-h{font:800 21px/1.2 Georgia,"Times New Roman",serif}
.bq-rv{margin:4px 0}
.bq-report .bq-cols{align-items:start}
@media(max-width:560px){.bq-bubble{font-size:14px;max-width:80%}.bq-deals{grid-template-columns:minmax(0,1fr)}.bq-paper-h{font-size:18px}}
@media(forced-colors:active){.bq-bubble,.bq-out,.bq-deal,.bq-paper{border:2px solid CanvasText}}
/* ===== end BOBA SHOP ===== */
/* ===== generic question card lockout (games/qcard.js) ===== */
.obq-lock{height:4px;border-radius:2px;background:var(--bp-line,#d9dee8);overflow:hidden;margin-top:8px}
.obq-lock[hidden]{display:none}
.obq-lock>i{display:block;height:100%;width:100%;background:var(--bp-ink-2,#667);transform-origin:left;animation:obq-lock 1.5s linear forwards}
@keyframes obq-lock{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@media(prefers-reduced-motion:reduce){.obq-lock>i{animation:none!important}}
.bq-after{display:flex;flex-direction:column;gap:10px}
.bq-rv-stars{color:var(--bp-warn,#7A4500)}
/* how-to card (games/howto.js): big pictures, short text */
.arc-how{max-width:640px}.arc-how-h{display:flex;align-items:center;justify-content:space-between;gap:12px}.arc-how-h .arc-h{margin:0}
.arc-steps{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px}
.arc-steps li{display:flex;align-items:center;gap:14px;padding:10px 14px;background:var(--bp-paper-2,#EAF4FF);border-radius:12px}
.arc-pic{font-size:24px;line-height:1;flex:0 0 auto}.arc-sn{flex:0 0 28px;height:28px;display:grid;place-items:center;background:var(--bp-accent,#1A66D9);color:#fff;font:700 15px/1 var(--lg-font,system-ui);border-radius:50%}
.arc-st{font:600 18px/1.3 var(--lg-font,system-ui);color:var(--bp-ink,#10233F)}
/* ---- Game Town (#/games): one frame, storefronts you walk into */
.tn-page{display:flex;flex-direction:column;gap:8px;height:calc(100vh - 150px);min-height:420px}
.tn-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.tn-head h1{margin:0}
.tn-frame{flex:1 1 auto;min-height:0;display:grid;place-items:center;overflow:hidden;box-shadow:0 0 0 3px var(--px-line,#2B5CA8);background:#7DC0FF}
.tn-stage{position:relative;margin:auto;transition:transform .65s cubic-bezier(.6,0,.9,.4),opacity .65s;will-change:transform}
.tn-frame{container-type:size}.tn-stage{height:min(100cqh,calc(100cqw * var(--h) / var(--w)));width:min(100cqw,calc(100cqh * var(--w) / var(--h)))}
.tn-stage.zoom{transform:scale(5.5);opacity:.1}
.tn-cv{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}
.tn-av{position:absolute;transform:translate(-50%,-100%);transition:left .7s linear,top .7s linear;pointer-events:none;z-index:2}
.tn-b{position:absolute;transform:translate(-50%,0);border:0;background:none;cursor:pointer;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;z-index:3;-webkit-tap-highlight-color:transparent}
.tn-b:hover,.tn-b:focus-visible{outline:3px solid #FFC94A;outline-offset:2px;background:rgba(255,255,255,.18)}
.tn-b.opening{outline:3px solid #fff}.tn-b.is-off{opacity:.5;cursor:default}
.tn-name{position:absolute;bottom:calc(100% + 1px);left:50%;transform:translateX(-50%);white-space:nowrap;padding:1px 6px;background:#fff;color:#10233F;font:700 clamp(10px,1.7cqw,16px)/1.25 var(--lg-font,system-ui);box-shadow:0 0 0 2px #2B5CA8}
.tn-sub{display:none}
.tn-b:hover .tn-sub,.tn-b:focus-visible .tn-sub{display:block;position:absolute;top:100%;left:50%;transform:translateX(-50%);white-space:nowrap;padding:1px 6px;background:#FFC94A;color:#3A2600;font:700 clamp(10px,1.5cqw,14px)/1.25 var(--lg-font,system-ui)}
.tn-note{margin:0;text-align:center;font:600 16px/1.3 var(--lg-font,system-ui);color:var(--bp-ink,#10233F)}
html:has(.tn-page){overflow:hidden}
/* boba shop cutscene */
.tn-cut{position:relative;height:min(100cqh,calc(100cqw * 9 / 16));width:min(100cqw,calc(100cqh * 16 / 9));margin:auto;animation:tncut .35s ease-out}
.tn-cut-cv{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}
.tn-cut-av{position:absolute;left:30%;bottom:34%;transform-origin:bottom}
.tn-cut-cap{position:absolute;left:50%;bottom:4%;transform:translateX(-50%);margin:0;padding:6px 14px;background:#fff;color:#10233F;font:700 clamp(14px,2.2cqw,22px)/1.3 var(--lg-font,system-ui);box-shadow:0 0 0 3px #2B5CA8;white-space:nowrap}
@keyframes tncut{from{opacity:0;transform:scale(1.15)}to{opacity:1;transform:none}}

/* ===== BOBA SHOP, one-screen frame: the game fills the viewport, the side panel scrolls INSIDE it, Next sits on top ===== */
body.in-game:has(.bq-game){overflow:hidden;min-height:0}
body.in-game:has(.bq-game) .foot,body.in-game:has(.bq-game) .tabnav{display:none!important}
.bq-game{min-height:0;overflow:hidden;gap:8px}
.bq-game .obby-main{flex:1;min-height:0;grid-template-rows:auto minmax(0,1fr);align-items:start}
.bq-game .bq-side{min-height:0;max-height:100%;overflow-y:auto;overscroll-behavior:contain;padding:0 4px 56px 0;scrollbar-gutter:stable}
@media(min-width:1100px){.bq-game .obby-main{grid-template-rows:minmax(0,1fr)}.bq-game .bq-side{height:100%}}
body.in-game .bq-game .bq-side:not(:empty){position:static;margin:0;box-shadow:none;max-height:100%;background:none}
body.in-game .bq-game .bq-stage,body.in-game .bq-game .bq-stage canvas{max-height:none}
.bq-after{position:sticky;top:0;z-index:4;gap:8px;padding:0 0 8px;background:var(--bp-paper-2,#fff)}
.bq-after .bq-next{align-self:stretch;justify-content:center}
.bq-out{gap:4px;padding:8px 10px}
.bq-bubble{max-width:min(78%,420px);max-height:calc(100% - 16px);overflow:auto;font-size:14px}
.bq-ticket{display:flex;justify-content:space-between;align-items:center;gap:12px}
.bq-tk{display:flex;flex-direction:column;gap:2px;padding:8px 12px;background:#FFF6D8;color:#10233F;border:2px dashed #B87A00;flex:1}
.bq-tk b{font:700 18px/1.2 var(--lg-font)}.bq-tk-h{font:700 11px/1 var(--lg-font);letter-spacing:.14em;color:#7A4500}
.bq-cup{position:relative;width:60px;height:80px;flex:none;border:1.5px solid var(--px-line,rgba(26, 102, 217, .3));border-radius:0 0 10px 10px;background:rgba(255,255,255,.7);display:flex;align-items:flex-end;overflow:visible}
.bq-cup-in{border-radius:0 0 6px 6px}
.bq-cup-in{width:100%;height:0;display:flex;flex-direction:column-reverse;overflow:hidden;transition:height .7s ease-out}
.bq-cup.is-full .bq-cup-in{height:100%}
.bq-layer{display:block;min-height:0}
.bq-cup.is-botched{transform:rotate(-6deg)}.bq-cup.is-botched .bq-cup-in{filter:saturate(.5)}
.bq-cup-straw{position:absolute;right:12px;top:-16px;width:5px;height:30px;background:#E94B4B;transform:rotate(12deg)}
@media(prefers-reduced-motion:reduce){.bq-cup-in{transition:none}}
.bq-replies{display:flex;flex-direction:column;gap:8px}
.bq-reply{position:relative;display:flex;align-items:flex-start;gap:10px;min-height:56px;padding:8px 12px;border:0;text-align:left;background:var(--bp-paper);color:var(--bp-ink);box-shadow:inset 0 0 0 2px var(--px-line-2,#8FB0DD);font:500 15px/1.35 var(--lg-font);cursor:pointer}
.bq-reply:focus-visible{outline:3px solid var(--bp-focus);outline-offset:2px}
@media(hover:hover){.bq-reply:not(:disabled):hover{background:var(--bp-paper-2);box-shadow:inset 0 0 0 3px var(--px-line,#2B5CA8)}}
.bq-reply:disabled{cursor:default;opacity:1}
.bq-reply.right{background:var(--bp-pos-soft);box-shadow:inset 0 0 0 3px var(--bp-pos)}.bq-reply.wrong{background:var(--bp-neg-soft);box-shadow:inset 0 0 0 3px var(--bp-neg)}
.bq-hint{display:flex;flex-wrap:wrap;gap:4px;margin:0;padding:8px 10px;background:var(--bp-info-soft);color:var(--bp-ink);font:600 14px/1.4 var(--lg-font)}
.bq-sealed{border:3px solid #B3261E;background:#FFF1EF;text-align:center;align-items:center}
.bq-stamp{padding:6px 14px;border:4px solid #B3261E;color:#B3261E;font:800 clamp(22px,3.4vw,34px)/1 var(--lg-font);letter-spacing:.08em;transform:rotate(-3deg)}
.bq-seal-t{font:500 14px/1.4 var(--lg-font);color:var(--bp-ink)}.bq-prog{font:700 18px/1.2 var(--lg-font);color:#7A1812}
.bq-dots{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}.bq-dots i{width:20px;height:20px;border-radius:50%;border:3px solid #B3261E;background:transparent}.bq-dots i.on{background:#2E9E55;border-color:#1F7A40}
@media(max-width:819px){.bq-hud-wrap,.bq-game .obby-hud{gap:6px}.bq-game .obby-pill{min-height:34px}.bq-game .obby-hud .btn{min-height:40px}.bq-stage canvas{max-width:100%}.bq-stamp{font-size:20px}}
/* free-walking avatar in Game Town */
.tn-av{position:absolute;transform:translate(-50%,-100%);width:0;height:0;pointer-events:none;z-index:2;transition:none}
.tn-av-in{position:absolute;left:0;bottom:0;width:32px;height:56px;margin-left:-16px;transform-origin:50% 100%}
.tn-stage{touch-action:none;cursor:pointer}

/* ===== BOBA SHOP part B: hands-on brew bar (bq-bar) + stock room (bq-kho). Pixel sprites are canvases scaled by an integer --k. ===== */
.bq-game .obby-main.is-full{display:block;position:relative;min-height:0}
.bq-spr{display:block;image-rendering:pixelated;width:calc(var(--w) * var(--kc,var(--k,2)) * 1px);height:auto;max-width:100%}
.bq-bg{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;z-index:0}
.bq-bar{--k:3;position:absolute;inset:0;display:grid;gap:8px;padding:8px;overflow:auto;align-content:start;background:#EAF4FF;box-shadow:0 0 0 3px var(--px-line,#2B5CA8);font-family:var(--lg-font)}
.bq-bar *,.bq-kho *{transition:none!important}
.bq-bar>*:not(.bq-bg):not(.bq-bar-q){position:relative;z-index:1;min-width:0}
.bq-bar-top{grid-area:top;display:flex;gap:10px;align-items:center;padding:6px 10px;background:var(--bp-paper,#fff);box-shadow:0 0 0 3px var(--px-line,#2B5CA8)}
.bq-bar-top .bq-face{--k:2;flex:none}
.bq-say{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.bq-say p{margin:0}.bq-say-t{font:500 15px/1.3 var(--lg-font);color:var(--bp-ink)}.bq-say-o{font:600 14px/1.3 var(--lg-font);color:var(--bp-ink-2)}
.bq-pat{height:8px;max-width:260px;background:#D9DEE8;box-shadow:0 0 0 2px var(--px-line,#2B5CA8);overflow:hidden}
.bq-pat i{display:block;height:100%;width:100%;background:#4DBA6B;animation:bq-pat 160s linear forwards}.bq-pat.is-still i{animation:none;width:80%}
@keyframes bq-pat{to{width:35%;background:#E0A21B}}
.bq-banner{grid-area:ban;padding:8px 12px;text-align:center;background:#2272E6;color:#fff;box-shadow:0 0 0 3px var(--px-line,#2B5CA8);font:700 clamp(14px,2.2vw,19px)/1.25 var(--lg-font)}
.bq-banner[data-step=done]{background:#2E9E55}.bq-b-h{display:block}.bq-b-m{display:block;min-height:17px;font:600 13px/1.3 var(--lg-font);color:#FFF1C2}
.st-cups{grid-area:cups}.st-taps{grid-area:taps}.st-tops{grid-area:tops}.st-fin{grid-area:fin}.st-cup{grid-area:cup}
@media(min-aspect-ratio:1/1){.bq-cup-cv{--kc:calc(var(--k) + 1)}.bq-bar{grid-template-columns:minmax(0,1.25fr) minmax(0,1.2fr) minmax(0,1fr);grid-template-rows:auto auto minmax(min-content,1fr) minmax(min-content,1fr);grid-template-areas:"top top top" "ban ban ban" "cups taps cup" "fin tops cup"}}
@media(max-aspect-ratio:1/1){.bq-bar{grid-template-columns:minmax(0,1fr);grid-template-areas:"top" "ban" "cup" "cups" "taps" "tops" "fin"}}
.bq-st{display:flex;flex-direction:column;gap:4px;padding:6px 8px 8px;background:#FFF8EB;box-shadow:0 0 0 3px var(--px-line,#2B5CA8)}
.bq-st-h{margin:0;font:700 12px/1 var(--lg-font);letter-spacing:.12em;text-transform:uppercase;color:var(--bp-ink-2)}
.bq-st-b{flex:1;display:flex;flex-wrap:wrap;gap:4px 6px;justify-content:center;align-items:flex-end;align-content:center}
.bq-hs{position:relative;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:44px;min-height:44px;padding:4px;border:0;background:transparent;color:var(--bp-ink);font:600 13px/1.1 var(--lg-font);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none}
@media(hover:hover){.bq-hs:hover{background:rgba(255,255,255,.55)}}
.bq-hs:focus-visible,.bq-cupbtn:focus-visible{outline:3px solid var(--bp-focus,#1A66D9);outline-offset:2px}
.bq-hs.is-next{outline:3px solid #FFC94A;outline-offset:1px;background:rgba(255,201,74,.28);animation:bq-nx 1.1s ease-in-out infinite}
@keyframes bq-nx{50%{outline-color:#fff}}
.bq-bar.is-calm .bq-hs.is-next,.bq-bar.is-rm .bq-hs.is-next{animation:none}
.bq-badge{position:absolute;top:0;right:0;min-width:22px;padding:2px 4px;background:#fff;color:#10233F;box-shadow:0 0 0 2px var(--px-line,#2B5CA8);font:700 12px/1.1 var(--lg-font);text-align:center}
.bq-badge.is-low{background:#FFE1DE;color:#B3261E}
.bq-kbd{position:absolute;left:0;top:0;min-width:18px;padding:1px 4px;background:var(--px-line,#2B5CA8);color:#fff;font:700 12px/1.2 var(--lg-font);text-align:center}
.st-cup .bq-st-b{flex-direction:column;align-items:stretch;gap:6px}
.bq-cupwrap{display:flex;gap:8px;align-items:flex-end;justify-content:center}
.bq-cupbtn{display:flex;justify-content:center;border:0;background:rgba(255,255,255,.5);padding:0;cursor:default;min-height:44px}
.bq-cup-cv{--kc:var(--k)}
.bq-gauge{display:flex;flex-direction:column;gap:3px}.bq-gauge[hidden]{display:flex;visibility:hidden}
.bq-g-t{font:700 13px/1.2 var(--lg-font);color:var(--bp-ink)}
.bq-g-bar{position:relative;height:22px;background:#fff;box-shadow:0 0 0 3px var(--px-line,#2B5CA8);overflow:hidden}
.bq-g-bar i{position:absolute;top:0;bottom:0}.bq-g-good{background:#A8DDB1}.bq-g-perf{background:#2E9E55}
.bq-g-fill{left:0;width:0;background:rgba(34,114,230,.6);border-right:3px solid #10233F}
.bq-recipe{padding:6px 8px;background:#FFF6D8;color:#10233F;border:2px dashed #B87A00}
.bq-recipe-h{margin:0 0 3px;font:700 12px/1.2 var(--lg-font);letter-spacing:.1em;text-transform:uppercase;color:#7A4500}
.bq-recipe-l{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px;font:600 14px/1.3 var(--lg-font)}
.bq-recipe-l li{display:flex;gap:6px}.bq-recipe-l .is-done{opacity:.6;text-decoration:line-through}.bq-recipe-l .is-now{font-weight:800;color:#0B4FB3}
.bq-ck{width:16px;text-align:center}
.bq-serve{min-height:48px}.bq-serve.is-next{outline:3px solid #FFC94A;outline-offset:2px}
@media(max-aspect-ratio:1/1){
  .bq-bar{grid-template-areas:"top" "ban" "cup" "cups" "taps" "tops" "fin"}
  .st-cup .bq-st-b{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"g g" "c r" "s r";align-items:start;gap:6px 10px}
  .st-cup .bq-gauge{grid-area:g}.st-cup .bq-cupwrap{grid-area:c}.st-cup .bq-recipe{grid-area:r}.st-cup .bq-serve{grid-area:s}
  .bq-cup-cv{--kc:var(--k)}.bq-st-h{display:none}
}
@media(max-aspect-ratio:1/1) and (min-width:601px){.bq-bar{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);grid-template-areas:"top top" "ban ban" "cup cup" "cups cups" "taps taps" "tops fin"}.bq-cup-cv{--kc:calc(var(--k) + 1)}}
@media(max-aspect-ratio:1/1) and (max-width:600px){
  .bq-bar :is(.st-cups,.st-taps,.st-tops,.st-fin){display:none}
  .bq-bar:is([data-step=cup],[data-step=calc]) .st-cups,.bq-bar[data-step=pour] .st-taps,.bq-bar:is([data-step=top],[data-step=ice]) .st-tops,.bq-bar[data-step=seal] .st-fin{display:flex}
  .bq-hs{padding:2px;min-width:40px}.bq-st-b{gap:2px}.bq-st{padding:4px}
  .bq-bar-top .bq-face{--k:1}.bq-say-t{font-size:13px}.bq-bar-top{padding:4px 8px}.bq-banner{padding:6px 8px}
}
.bq-bar-q{position:absolute;inset:8px;z-index:6;overflow:auto;display:flex;flex-direction:column;gap:10px;padding:12px;background:var(--bp-paper-2,#EAF4FF);box-shadow:0 0 0 3px var(--px-line,#2B5CA8);max-width:760px;margin:0 auto}
.bq-bar-q[hidden]{display:none}.bq-q-h{margin:0;font:700 18px/1.2 var(--lg-font)}.bq-q-after{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.bq-q-after .bq-line{margin:0;font:600 15px/1.4 var(--lg-font)}
/* stock room */
.bq-kho{position:absolute;inset:0;display:flex;justify-content:center;align-items:stretch;padding:10px;overflow:hidden;background:#EAF4FF;box-shadow:0 0 0 3px var(--px-line,#2B5CA8);--k:2}
.bq-kho-panel{position:relative;z-index:1;width:min(780px,100%);display:flex;flex-direction:column;min-height:0;background:var(--bp-paper,#fff);box-shadow:0 0 0 3px var(--px-line,#2B5CA8),6px 6px 0 rgba(11,22,38,.24)}
.bq-kho-head{padding:8px 12px 4px}.bq-kho-head p{margin:0}
@media(max-height:760px),(max-width:560px){.bq-welcome{display:none}}
.bq-tabs{display:flex;gap:2px}
.bq-tabs.main{background:var(--bp-paper-2,#EAF4FF)}
.bq-tab{flex:1;min-width:0;min-height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:4px 2px;border:0;background:transparent;color:var(--bp-ink-2);font:700 14px/1.1 var(--lg-font);cursor:pointer;touch-action:manipulation}
.bq-tab.is-on{background:var(--bp-paper,#fff);color:var(--bp-ink);box-shadow:inset 0 -4px 0 #2272E6}
.bq-tab:focus-visible{outline:3px solid var(--bp-focus,#1A66D9);outline-offset:-3px}
.bq-tabs.sub{gap:8px;margin:4px 0 8px}.bq-tabs.sub .bq-tab{flex-direction:row;min-height:44px;background:var(--bp-paper,#fff);box-shadow:inset 0 0 0 2px var(--px-line-2,#8FB0DD)}
.bq-tabs.sub .bq-tab.is-on{background:#2272E6;color:#fff;box-shadow:inset 0 0 0 2px #2B5CA8}
@media(max-width:560px){.bq-tabs.main .bq-tab .px-ico,.bq-tabs.main .bq-tab svg{display:none}.bq-tab{font-size:13px}}
.bq-kho-body{flex:1;min-height:0;overflow:auto;padding:10px 12px;overscroll-behavior:contain}
.bq-kho-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;border-top:2px solid var(--px-line-2,#8FB0DD)}
.bq-foot-i{font:600 14px/1.3 var(--lg-font);color:var(--bp-ink-2)}.bq-foot-i.is-warn{color:#B3261E}
.bq-open{min-height:48px}
.bq-fore{display:flex;align-items:center;gap:6px;margin:0 0 6px;padding:8px 12px;background:var(--bp-paper-2,#EAF4FF);font:700 16px/1.3 var(--lg-font)}
.bq-waste{display:flex;align-items:center;gap:6px;margin:0 0 6px;padding:6px 10px;background:#FFF1EF;color:#7A1812;font:600 14px/1.3 var(--lg-font)}
.bq-stepnote{margin:0 0 4px!important}
.bq-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.bq-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--bp-line,rgba(16,35,63,.14))}
.bq-row.is-locked{opacity:.65}
.bq-row-ico{--k:2;flex:none}
.bq-row-i{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:2px 8px}
.bq-row-n{font:700 17px/1.2 var(--lg-font)}.bq-row-m{flex-basis:100%;font:500 14px/1.3 var(--lg-font);color:var(--bp-ink-2)}
.bq-chip{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;background:#FFF0C2;color:#7A4500;font:700 12px/1.3 var(--lg-font)}
.bq-chip.is-warn{background:#FFE1DE;color:#B3261E}.bq-chip.is-ok{background:#E3F6E8;color:#1F7A40}
.bq-step{display:flex;align-items:center;gap:4px;flex:none}
.bq-step-b{width:44px;height:44px;border:0;background:var(--bp-paper,#fff);color:var(--bp-ink);box-shadow:inset 0 0 0 3px var(--px-line,#2B5CA8);font:700 22px/1 var(--lg-font);cursor:pointer;touch-action:manipulation}
.bq-step-b:disabled{opacity:.35;cursor:default}.bq-step-b:focus-visible{outline:3px solid var(--bp-focus,#1A66D9);outline-offset:2px}
.bq-step-v{min-width:54px;text-align:center;font:700 18px/1 var(--lg-font);font-variant-numeric:tabular-nums}
.bq-cart{position:sticky;bottom:-10px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin-top:10px;padding:8px 0;background:var(--bp-paper,#fff);border-top:2px solid var(--px-line-2,#8FB0DD)}
.bq-cart-l{margin:0;font:600 15px/1.3 var(--lg-font)}.bq-confirm{min-height:48px}
.bq-pnote{margin:8px 0 0;padding:8px 10px;background:var(--bp-info-soft,#E4F0FF);font:600 14px/1.4 var(--lg-font)}
.bq-flow{display:flex;flex-direction:column;gap:10px}
.bq-avg{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:10px}.bq-avg-n{font-size:40px}
.bq-bars{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-direction:column;gap:8px}
.bq-bar-row{display:grid;grid-template-columns:34px minmax(0,1fr) 34px;align-items:center;gap:8px;font:700 15px/1 var(--lg-font)}
.bq-bar-t{height:18px;background:#E3E8F1;box-shadow:inset 0 0 0 2px var(--px-line-2,#8FB0DD)}.bq-bar-t i{display:block;height:100%;background:#E0A21B}
.bq-bar-n{text-align:right;font-variant-numeric:tabular-nums}
.bq-chart{display:flex;align-items:flex-end;gap:8px;height:170px;margin:10px 0;padding:8px;background:var(--bp-paper-2,#EAF4FF);box-shadow:inset 0 0 0 2px var(--px-line-2,#8FB0DD)}
.bq-chart-d{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;align-items:center;gap:4px}
.bq-chart-b{flex:1;width:100%;display:flex;align-items:flex-end;justify-content:center;gap:2px}
.bq-chart-b i{display:block;width:30%;max-width:22px;min-height:2px}
.bq-chart-b .rev,.bq-key.rev{background:#2272E6}.bq-chart-b .cost,.bq-key.cost{background:#E8836F}.bq-chart-b .prof,.bq-key.prof{background:#2E9E55}.bq-chart-b .prof.neg{background:#B3261E}
.bq-chart-l{font:600 12px/1 var(--lg-font);color:var(--bp-ink-2)}
.bq-key{display:inline-block;width:12px;height:12px;vertical-align:-1px}
.bq-sum-h{margin:0 0 4px;font:700 17px/1.2 var(--lg-font)}.bq-sum-y p{margin:0 0 4px}
@media(max-width:560px){.bq-kho{padding:6px}.bq-row{gap:8px}.bq-row-n{font-size:16px}.bq-kho-body{padding:8px}.bq-bar{padding:6px;gap:6px}.bq-say-t{font-size:14px}}
@media(prefers-reduced-motion:reduce){.bq-pat i,.bq-hs.is-next{animation:none!important}}
@media(forced-colors:active){.bq-st,.bq-banner,.bq-kho-panel,.bq-step-b{border:2px solid CanvasText}}
/* Maths text (games/mathtext.js): always the readable UI font, never the pixel display font; exponents are real <sup>; KaTeX keeps its own maths fonts */
.obq,.obq :is(.obq-ask,.obq-eq,.obq-v,.obq-k,.obq-fb,.obq-choice,.obq-tip,.bq-stem,.bq-ask,.bq-why,.bq-choice){font-family:var(--lg-font)}
.obq sup,.mt-sup{font-size:.72em;line-height:0;vertical-align:.45em;font-variant-numeric:tabular-nums}
.mt-math{display:inline-block}.mt-block{display:block;text-align:center}
.obq .katex{font-size:1.08em;font-family:KaTeX_Main,"Times New Roman",serif}

/* purpose line on every game question card: what answering does */
.obq-goal { margin: 2px 0 8px; padding: 6px 10px; border-radius: 10px; background: #FFF7D6; color: #10233F; font: 600 13px/1.35 system-ui, sans-serif; }
.obq-goal small { font-weight: 500; color: #36506F; }