/* Unblocked arcade presentation. */
.qp-page{padding:20px 0 64px;background:#0c1020}
.qp-heading .breadcrumb{margin:0 0 14px;font-size:.82rem;gap:9px}
.qp-heading h1{font-size:clamp(1.9rem,5vw,3rem);line-height:1.15;margin:8px 0 10px;letter-spacing:-.035em}
.qp-heading h1>span{color:#88dfff}.qp-heading p{color:#bdc7de;margin:0 0 22px;line-height:1.5}
.arcade{position:relative;isolation:isolate;display:grid;justify-items:center;gap:4px;max-width:900px;margin-inline:auto;padding:22px 24px 24px;border:1px solid #7784db50;border-radius:30px;background:radial-gradient(ellipse at 35% 25%,#2456aa80,transparent 60%),radial-gradient(ellipse at 80% 85%,#6035a970,transparent 60%),linear-gradient(145deg,#112b59,#141b3b 65%,#222052);box-shadow:inset 0 1px #b4d7ff22,0 24px 60px #0003;overflow:hidden}
.arcade::before,.arcade::after{content:"";position:absolute;pointer-events:none;z-index:-1;border:1px solid #b4a9ff12;border-radius:50%;width:460px;height:460px;background:radial-gradient(circle,#7560ea12,transparent 65%)}
.arcade::before{left:-310px;top:18%}.arcade::after{right:-320px;bottom:-60px}
.arcade-board{min-width:0;width:100%;max-width:440px;justify-self:center;filter:drop-shadow(0 14px 18px #0004)}
.arcade-board canvas{display:block;width:100%;height:auto;aspect-ratio:648/960}
.arcade-stats{display:grid;grid-template-columns:minmax(0,1fr);width:100%;max-width:280px;gap:10px;min-width:0}
.arcade-stats>div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 17px;border:1px solid #7c99ce40;background:linear-gradient(145deg,#10274ee6,#091831e6);box-shadow:inset 0 1px #c4dcff12,0 5px 12px #0002;border-radius:16px;min-width:0}
.arcade-stats>div>span{color:#dce8fa;font-size:.82rem;line-height:1.25}

.arcade-count strong{display:flex;align-items:center;gap:10px;font-size:1.45rem;color:#fff;white-space:nowrap}
.arcade-dots{display:flex;gap:3px}.arcade-dots i{display:block;width:9px;height:9px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#fff4b9,#ffd645 50%,#c38121);box-shadow:0 2px 3px #0004}.arcade-dots i:nth-child(2){background:radial-gradient(circle at 30% 25%,#d3faff,#37cbff 50%,#1475c1)}.arcade-dots i:nth-child(3){background:radial-gradient(circle at 30% 25%,#ffe0f0,#ff6cae 50%,#b82d78)}
.arcade-panel{min-width:0;width:100%;max-width:430px;padding:0 4px}
.arcade-drop{width:100%;min-height:68px;display:flex;align-items:center;justify-content:center;gap:12px;border:1px solid #b8ff7a;border-radius:24px;background:radial-gradient(ellipse at 30% 0,#d2ff8790,transparent 55%),linear-gradient(#79e947,#32b62b);box-shadow:inset 0 3px 3px #edffc2aa,inset 0 -3px 3px #24941e55,0 5px 0 #217c2b,0 9px 25px #42e74730;color:#103018;line-height:1.2;font-family:inherit;font-size:1.4rem;font-weight:850;cursor:pointer;touch-action:manipulation;text-shadow:0 1px #dcffb870}
.arcade-drop>span{font-size:2rem;line-height:1}.arcade-drop:hover{filter:brightness(1.06)}.arcade-drop:active{transform:translateY(2px);box-shadow:inset 0 2px 3px #edffc288,0 3px 0 #217c2b}.arcade-drop:focus-visible{outline:3px solid #fff;outline-offset:5px}.arcade-drop:disabled{opacity:.65;cursor:wait}
.arcade-feedback{min-height:2.8em;display:flex;align-items:center;justify-content:center;margin:17px 0 0;color:#e0ebfb;font-size:.85rem;text-align:center;line-height:1.4;overflow-wrap:anywhere}.arcade-hint{text-align:center;font-size:.77rem;color:#aebedf;margin:6px 0 0}
.qp-disclaimer{text-align:center;color:#a8b4cb;font-size:.8rem;margin:14px 0 0}/* Content uses the same site container, card and disclosure components as guides. */
.qp-copy.container{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-7);margin-top:var(--space-7);font-size:1.0625rem;line-height:1.75;color:#c5cede}
.qp-copy .qp-info-panel{min-width:0;margin:0;padding:0;border:0;border-radius:0;background:none}
.qp-copy h2{font-size:clamp(1.3rem,2.3vw,1.65rem);line-height:1.3;margin:0 0 var(--space-5);text-wrap:balance;color:var(--color-text)}
.qp-copy h3{font-size:1rem;line-height:1.5;letter-spacing:normal;color:var(--color-text)}
.qp-copy p{color:inherit;line-height:inherit;margin:0 0 var(--space-4)}
.qp-copy :is(section,div)>:last-child{margin-bottom:0}
.qp-copy strong{color:var(--color-text);font-weight:700}
.qp-copy a{color:#b9a0ff;text-decoration:underline;text-underline-offset:4px}
.qp-copy a:hover{color:#ded0ff}
.qp-copy :is(a,summary):focus-visible{outline:2px solid var(--color-primary-strong);outline-offset:4px;border-radius:var(--radius-sm)}
.qp-text-grid{display:grid;gap:var(--space-5)}
.qp-copy .qp-step-grid{display:grid;gap:var(--space-4);margin:0 0 var(--space-5);padding:0 0 0 1.6em}
.qp-copy .qp-step-grid li{padding:var(--space-5);margin:0;min-width:0}
.qp-copy li::marker{color:var(--color-secondary);font-weight:800}
.qp-copy li>strong:first-child{display:block;margin-bottom:var(--space-2);color:var(--color-secondary)}
.qp-copy .qp-info-panel.card{padding:var(--space-6);border:1px solid var(--color-border);border-radius:var(--radius-md);background:linear-gradient(145deg,var(--color-surface-raised),var(--color-surface));box-shadow:var(--shadow-sm)}
.qp-copy .qp-jars{border-top:2px solid #88dfff}
.qp-copy .qp-bumpers{border-top:2px solid var(--color-secondary)}
.qp-copy :is(.qp-colors,.qp-compare,.qp-faq){padding-top:var(--space-6);border-top:1px solid var(--color-border)}
.qp-related{margin-top:var(--space-5);padding:var(--space-5);border-left:3px solid var(--color-primary);border-radius:var(--radius-sm);background:var(--color-primary-soft)}
.qp-copy summary h3{display:inline;margin:0;font-size:inherit}
.qp-copy .disclosure-shell details p{font-size:1rem;line-height:1.75;color:#c5cede}
@media(min-width:900px){
 .qp-copy.container{grid-template-columns:repeat(2,minmax(0,1fr))}
 .qp-copy .qp-info-panel{grid-column:1/-1}
 .qp-copy :is(.qp-jars,.qp-bumpers,.qp-access,.qp-mobile){grid-column:auto}
 .qp-text-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-7)}
 .qp-copy .qp-step-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--space-7)}
}
@media(max-width:600px){
 .qp-copy.container{font-size:1rem;gap:var(--space-6)}
 .qp-copy .qp-info-panel.card{padding:var(--space-5)}
 .qp-copy .qp-step-grid li{padding:var(--space-4)}
}
@media(max-width:700px){
 .arcade::before,.arcade::after{border:0}
 .qp-page{padding-top:12px}.qp-heading h1{font-size:1.85rem;margin:6px 0}.qp-heading p{font-size:.88rem;margin-bottom:14px}.qp-heading .breadcrumb{font-size:.76rem;margin-bottom:10px}
 .arcade{gap:2px;padding:12px 8px 17px;border-radius:22px}.arcade-stats{gap:7px;padding-inline:5px;max-width:260px}.arcade-stats>div{gap:8px;padding:9px 12px;border-radius:13px}.arcade-stats>div>span{font-size:.75rem}.arcade-count strong{font-size:1.25rem;gap:7px}.arcade-dots{gap:2px}.arcade-dots i{width:7px;height:7px}
 .arcade-board{max-width:380px}.arcade-panel{max-width:390px;padding-inline:6px}.arcade-drop{min-height:62px;border-radius:22px;font-size:1.25rem}.arcade-feedback{font-size:.79rem;margin-top:14px}.arcade-hint{font-size:.73rem;margin-top:4px}
 .qp-info-columns{grid-template-columns:1fr;gap:16px}
}
@media(prefers-reduced-motion:reduce){.arcade-drop:active{transform:none}}

/* Compact, keyboard-accessible sound control beside the existing status. */
.arcade-stats{grid-template-columns:minmax(0,1fr) auto;max-width:360px}
.arcade-sound{min-height:44px;padding:8px 10px;border:1px solid #91bade60;border-radius:13px;background:#102746;color:#dceefa;font:600 .75rem system-ui;cursor:pointer;touch-action:manipulation;white-space:nowrap}
.arcade-sound[aria-pressed=true]{border-color:#8bd8d9aa;background:#153b51}
.arcade-sound:focus-visible{outline:3px solid #fff;outline-offset:3px}
.arcade-sound:disabled{opacity:.55;cursor:default}
@media(max-width:700px){.arcade-stats{max-width:340px;gap:6px}.arcade-stats>div{padding-inline:9px}.arcade-count strong{gap:5px}.arcade-sound{padding-inline:8px;font-size:.7rem}}

/* Compact sound HUD and a platform-independent Drop smiley. */
.arcade .arcade-stats{display:flex;justify-content:flex-end;width:100%;max-width:440px;padding:0;background:none}
.arcade .arcade-sound{display:grid;place-items:center;width:44px;height:44px;min-height:44px;padding:10px;border-radius:50%;font-size:0}
.arcade-sound svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.arcade-sound[aria-pressed=true] .sound-muted,.arcade-sound[aria-pressed=false] .sound-waves{display:none}
.arcade-smiley{width:34px;height:34px;flex:none}

.arcade .arcade-stats{gap:8px;align-items:center}
.arcade-new-game{min-height:44px;padding:8px 12px;border:1px solid #91bade60;border-radius:13px;background:#102746;color:#dceefa;font:600 .75rem system-ui;cursor:pointer;touch-action:manipulation}
.arcade-new-game:hover{background:#153b51}
.arcade-new-game:focus-visible{outline:3px solid #fff;outline-offset:3px}
.arcade-new-game:disabled{opacity:.55;cursor:default}

/* One internal real-money CTA, aligned with the existing arcade container. */
.qp-money-cta{max-width:900px;margin:var(--space-6) auto 0;padding:clamp(24px,4vw,38px);display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center;border-color:#789ac438;background:radial-gradient(ellipse at 50% 0,#24456c38,transparent 70%),linear-gradient(145deg,var(--color-surface-raised),var(--color-surface));box-shadow:inset 0 1px 0 #ffffff08,var(--shadow-sm)}
.qp-money-cta h2{font-size:clamp(1.3rem,2.5vw,1.65rem);font-weight:780;line-height:1.25;letter-spacing:-.025em;margin:0 0 12px;color:#f3f6ff}
.qp-money-cta__copy{min-width:0;max-width:610px}
.qp-money-cta__copy p{font-size:1rem;line-height:1.6;color:#becbdd;text-wrap:pretty}
.qp-money-cta .qp-money-cta__button{background:linear-gradient(180deg,#239956,#18733e);border:1px solid #62d08c60;color:#fff;min-height:48px;padding:12px 26px;border-radius:var(--radius-sm);font-size:1rem;text-align:center;white-space:normal;max-width:100%;box-shadow:inset 0 1px 0 #ffffff20,0 5px 14px #0003}
.qp-money-cta .qp-money-cta__button:hover{background:linear-gradient(180deg,#29a65f,#1b8147);border-color:#7ae2a0a0}
.qp-money-cta .qp-money-cta__fine{max-width:640px;font-size:.8125rem;line-height:1.6;color:#a8b4cb}
@media(max-width:700px){.qp-money-cta{gap:18px;padding:26px 20px}.qp-money-cta__button{width:100%}.qp-money-cta__copy p{font-size:.9375rem}}
/* Controls belong to the optional side module, never to its physics world. */
.arcade-board{position:relative}
 .arcade-spring{position:absolute;transform:translate(-50%,-50%);width:44px;height:52px;min-height:44px;padding:0;border:0;border-radius:14px;background:transparent;box-shadow:none;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.arcade-spring:disabled{cursor:default}
.arcade-spring:focus:not(:focus-visible){outline:none}
.arcade-spring:focus-visible{outline:3px solid white;outline-offset:2px}
.arcade .arcade-stats{max-width:440px;gap:7px;margin-bottom:0}
.arcade{padding-top:12px}
.arcade-fullscreen{display:grid;place-items:center;width:44px;height:44px;flex-shrink:0;padding:10px;border:1px solid #91bade60;border-radius:50%;background:#102746;color:#dceefa;cursor:pointer;touch-action:manipulation}
.arcade-fullscreen[hidden]{display:none}
.arcade-fullscreen svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.arcade-fullscreen:focus-visible{outline:3px solid white;outline-offset:3px}
body.arcade-expanded-open{overflow:hidden}
.arcade.arcade--expanded{position:fixed;inset:0;z-index:100000;width:100%;max-width:none;height:100dvh;margin:0;border:0;border-radius:0;overflow-x:hidden;overflow-y:auto;align-content:start;padding:calc(8px + env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));overscroll-behavior:contain}

/* Suppress double-tap zoom only in the game; preserve panning and pinch zoom. */
.arcade,.arcade-board,.arcade-board canvas,.arcade button{touch-action:manipulation}

.arcade--complete-accent{animation:arcade-board-complete 2s ease-out}
@keyframes arcade-board-complete{0%,100%{box-shadow:inset 0 1px #b4d7ff22,0 24px 60px #0003}25%{box-shadow:inset 0 0 36px #ffe8a333,0 0 14px #ffe8a322}}
@media(prefers-reduced-motion:reduce){.arcade--complete-accent{animation:none;border-color:#d5c99a}}

/* Fit the complete desktop game below the sticky navigation. Scale the entire
   board proportionally; the canvas world and pointer mapping stay unchanged. */
@media(min-width:901px){
 .arcade{--arcade-chrome-space:290px;padding-bottom:16px}
 .arcade .arcade-stats{max-width:none;justify-self:stretch}
 .arcade-board{max-width:min(440px,calc((100dvh - var(--arcade-chrome-space))*var(--arcade-board-aspect,.55)))}
 .arcade-drop{min-height:56px;font-size:1.25rem;border-radius:20px}
 .arcade-feedback{margin-top:10px;min-height:2.8em}
 .arcade.arcade--expanded{--arcade-chrome-space:190px}
}

/* Reserve fixed-size controls and copy before sizing the physical scene. svh
   stays stable while mobile browser bars collapse; pinch zoom remains native. */
.arcade{--game-height:calc(100svh - var(--arcade-nav-height,60px) - 12px);display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:6px;padding:8px 12px 10px;scroll-margin-top:var(--arcade-scroll-margin,0px)}
.arcade .arcade-stats{position:absolute;right:10px;top:10px;z-index:2;display:flex;flex-direction:column;gap:6px;width:44px;max-width:none;margin:0;padding:0}
.arcade .arcade-stats button{width:44px;height:44px;min-width:44px;min-height:44px;padding:10px;border-radius:50%;flex:none}
.arcade-new-game svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.arcade .arcade-board{width:min(440px,calc(100% - 100px),calc((var(--game-height) - var(--arcade-copy-height,90px) - 24px)*var(--arcade-board-aspect,.55)));max-width:none}
.arcade .arcade-panel{width:100%;max-width:440px;padding:0}
.arcade .arcade-drop{height:52px;min-height:52px;font-size:1.1rem;border-radius:18px;gap:8px}
.arcade .arcade-smiley{width:28px;height:28px}
.arcade .arcade-feedback{font-size:.78rem;line-height:1.35;min-height:2.7em;margin:8px 0 0}
/* Expanded mode fills the current viewport, including space freed by browser bars. */
.arcade.arcade--expanded{--game-height:100dvh;height:100dvh;align-content:center;overflow:hidden;padding:calc(8px + env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left))}
.arcade.arcade--expanded .arcade-stats{right:max(10px,env(safe-area-inset-right));top:calc(10px + env(safe-area-inset-top))}
.arcade.arcade--expanded .arcade-board{width:min(440px,calc(100% - 100px),calc((var(--game-height) - var(--arcade-copy-height,90px) - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom))*var(--arcade-board-aspect,.55)))}
