/* A screen-sized play stage, with the campaign below the fold. */
canvas.pointer-focus:focus{outline:none}
.run-total{text-align:center;font-size:12px;margin:8px 0;color:#fff0df}
.primary:disabled{background:#ddd3c9;color:#71665e;cursor:default}
.topbar{max-width:none;width:100%;height:72px;padding:14px 4%;background:#101012;border-bottom:1px solid #ffffff12;box-shadow:0 5px 24px #21000624;position:relative;z-index:3}
.brand{width:116px;flex-shrink:0}
.brand img{filter:drop-shadow(0 2px 1px #ffffff16) drop-shadow(0 5px 7px #0009)}
.preview-note{background:#19191c;padding:6px 4%;font-size:10px;color:#bdb8b4}
main{max-width:none;min-height:calc(100svh - 99px);padding:20px 4%;grid-template-columns:minmax(220px,.65fr) minmax(0,1.65fr);gap:4vw}
.intro{max-width:360px;padding:0}
h1{font-size:clamp(58px,6.8vw,100px);letter-spacing:-.5px}
.pitch{font-size:18px}
.play-column{width:100%;min-width:0;justify-self:stretch}
.player-strip{background:#30000830;border:1px solid #ffffff25;color:#fff8ed;border-radius:10px;padding:10px 16px;margin:0 0 8px}
.player-strip span{color:#ffd6c4}
.small-button{background:#fff8ed;color:#211f21}
.play-column .game{width:100%;min-width:0;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible}
.arena{width:min(100%,calc((100svh - 254px)*.9697));aspect-ratio:640/660;margin:0 auto;max-height:none}
.scoreboard{padding:20px 8px;z-index:2}
.cargo{border:0;background:none;padding:6px 12px;max-height:48px}
.game-footer{padding:8px 4px;min-height:40px;border-top:1px solid #ffffff22;font-size:11px}
.game-footer button{min-height:32px}
@media(max-width:780px){
 .topbar{height:60px;padding:10px 5%}.brand{width:94px}.prototype{font-size:8px}.preview-note{font-size:8px;padding:5px 4%}
 main{display:flex;flex-direction:column;gap:10px;min-height:calc(100svh - 82px);padding:12px 4% 8px}
 .intro{max-width:none;width:100%;display:flex;justify-content:space-between;align-items:center;gap:12px}
 .intro h1{font-family:inherit;font-size:18px;letter-spacing:-.4px;line-height:1.2;margin:0}.intro h1 br,.intro h1 span,.intro .location,.intro .pitch,.intro .desktop-hint{display:none}
 .watch{margin:0;padding:8px 0;font-size:10px}.intro .howto{display:none}
 .player-strip{padding:8px 12px}.player-strip strong{font-size:11px}
 .intro h1{font-size:14px}.intro h1 span{display:inline;margin:0 .25em}
 .play-column{flex:1;display:flex;flex-direction:column}.play-column .game{flex:1;display:flex;flex-direction:column;justify-content:center}
 .arena{width:min(100%,calc((100svh - 284px)*.9697));min-width:220px;margin:auto}
 .scoreboard{padding:14px 5px}.scoreboard strong{font-size:28px}
 .game-footer{font-size:10px}.campaign{margin-top:0}
}
@media(max-height:600px) and (min-width:781px){main{min-height:500px}.arena{width:330px}.intro h1{font-size:60px}.intro .desktop-hint{display:none}}

.game-nav{display:flex;justify-content:center;gap:8px;position:sticky;top:0;z-index:5;background:#101012;padding:6px 16px;border-top:1px solid #ffffff12}
.game-nav button{min-height:44px;padding:10px 20px;border-radius:8px;color:#dedadd;background:transparent;font-size:13px;font-weight:700}
.game-nav button[aria-current],.game-nav button:hover{background:#ffffff15;color:#fff}
main{min-height:calc(100svh - 155px);scroll-margin-top:56px}
.arena{width:min(100%,calc((100svh - 310px)*.9697))}
.campaign-dialog,.result{position:fixed;inset:0;margin:auto;max-height:calc(100dvh - 32px);overscroll-behavior:contain}
.result{width:min(420px,calc(100% - 32px));height:fit-content;overflow:auto;z-index:20}
.result::backdrop{background:#18000899;backdrop-filter:blur(5px)}
.dialog-close{min-width:44px;min-height:44px}
.welcome-dialog h2{font-size:38px;line-height:1.08;letter-spacing:-1px}
.quick-rules{padding:0;list-style:none;display:grid;gap:18px;margin:24px 0}
.quick-rules li{display:flex;gap:13px;font-size:13px;line-height:1.6;color:#76685e}
.quick-rules li>b{display:grid;place-items:center;flex:0 0 30px;height:30px;background:#fbe6df;border-radius:50%;color:#ce1026}
.quick-rules strong{display:block;color:#242225;font-size:14px}
.challenge-note{border-top:1px solid #e4dace;padding-top:16px}
.welcome-dialog .dialog-secondary{width:100%;min-height:44px;margin-top:8px}
#board-dialog{max-width:520px;padding:48px 16px 16px}#board-dialog .board-card{border:0;padding:12px;background:transparent}

/* A quieter arcade stage lets the products and carton carry the movement. */
body{background:radial-gradient(ellipse at 72% 38%,#f42b34 0,transparent 48%),linear-gradient(135deg,#b90018,#dd071b 56%,#a60019)}
main{gap:3vw;padding-top:18px;padding-bottom:18px}
.player-strip{border-color:#ffffff24;background:#71021836;box-shadow:inset 0 1px #ffffff0d;border-radius:12px}
.small-button,.primary{box-shadow:0 3px 0 #62001428,inset 0 1px #ffffff22;transition:transform .16s,background .16s,box-shadow .16s}
.small-button:hover,.primary:hover{transform:translateY(-1px);box-shadow:0 5px 12px #62001430}
.small-button:active,.primary:active{transform:translateY(1px)}
.play-column .game{border-radius:22px;background:radial-gradient(ellipse at 50% 63%,#ffb48312,transparent 66%),linear-gradient(180deg,#79051b16,#67011628);box-shadow:inset 0 1px #ffffff16}
.scoreboard{padding:18px 22px}
.scoreboard span{opacity:.8;letter-spacing:1.5px}.scoreboard strong{font-variant-numeric:tabular-nums;font-size:34px;letter-spacing:-1px}.scoreboard .best strong{opacity:1}
.game-footer{margin:0 18px;padding:8px 0 12px;color:#fff0e8}
.game-footer button{text-decoration:none;border-bottom:1px solid #ffffff60}
.run-total{font-size:11px;color:#ffd9d8;margin:0 0 8px}
.cargo{gap:6px;padding:4px 16px 10px;max-height:50px}
.cargo-item{flex-basis:26px;width:26px;height:26px;border-radius:7px;background:#51031835}.cargo-item img{width:20px;height:22px}.cargo-item.caught{background:#fff3da;border-color:#fff3da}.cargo-item.caught:after{background:#272329;color:white}
.cue{font-size:12px;letter-spacing:.1px;bottom:8%}
.prototype{letter-spacing:1.5px}.pitch{line-height:1.55}.watch{min-height:44px}
@media(max-width:780px){
 main{padding:10px 3% 12px}.play-column .game{border-radius:16px}.scoreboard{padding:14px}.scoreboard strong{font-size:26px}
 .game-footer{margin:0 12px;gap:8px}.game-footer #status{max-width:65%;line-height:1.4}.player-strip{border-radius:10px}
 .cargo{max-height:40px;padding-bottom:6px}.cargo-item{flex-basis:22px;width:22px;height:22px}.cargo-item img{width:17px;height:18px}
 .small-button{font-size:11px;padding:10px 12px}.arena{min-width:0}
}
@media(prefers-reduced-motion:reduce){.small-button,.primary{transition:none}.small-button:hover,.primary:hover,.small-button:active,.primary:active{transform:none}}
/* Keep the complete play loop visible; the HUD already gives the catch count. */
.cargo{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%)}
@media(min-width:781px) and (max-height:800px){
 .topbar{height:60px;padding-top:10px;padding-bottom:10px}
 main{padding-top:12px;padding-bottom:12px}
 .intro .desktop-hint{display:none}.intro h1{font-size:clamp(60px,6vw,86px)}
 .game-footer{min-height:44px;padding-top:4px;padding-bottom:6px}
}
@media(max-width:780px){
 .game-nav{gap:4px;padding:5px 10px}.game-nav button{flex:1;padding:10px 5px;font-size:12px}
 main{min-height:calc(100svh - 148px)}.arena{width:min(100%,calc((100svh - 340px)*.9697));min-width:200px}
 .intro{display:none}.campaign-dialog{padding:30px 22px 20px}
 .welcome-dialog h2{font-size:34px}.quick-rules{gap:14px;margin:18px 0}
 .game-footer button{min-height:44px}.game-footer{padding-bottom:max(8px,env(safe-area-inset-bottom))}
}

/* Dialog headings receive initial reading focus, not an interactive focus ring. */
#welcome-title:focus,#result-title:focus{outline:none}
/* One catch counter in the HUD. Keep the lower play instruction unobstructed. */
.scoreboard .best strong{font-size:clamp(22px,2.7vw,34px);font-variant-numeric:tabular-nums;letter-spacing:.03em;white-space:nowrap}