:root{--ink:#0c0c0e;--paper:#eeece2;--acid:#e7ff00;--line:#eeece22c}*{box-sizing:border-box}body{margin:0;background:var(--ink);color:var(--paper);font-family:Arial,Helvetica,sans-serif}button,a,input,select{touch-action:manipulation}button,select{font:10px monospace;color:inherit;background:transparent;border:1px solid var(--line);border-radius:0;padding:12px;cursor:pointer}button:hover,button[aria-pressed=true]{border-color:var(--acid);color:var(--acid)}button:focus-visible,a:focus-visible,select:focus-visible{outline:2px solid #00e5d4;outline-offset:4px}button:disabled{opacity:.35;cursor:default}a{color:inherit;text-decoration:none}header{height:64px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 3vw;font:10px monospace;letter-spacing:.1em}header>div{display:flex;gap:8px}header button{padding:9px}.exit{color:var(--acid)}main{display:grid;grid-template-columns:minmax(0,1fr) 285px;min-height:calc(100svh - 64px)}.arena{min-width:0;padding:24px 3vw;display:flex;flex-direction:column}.title{display:flex;align-items:center;justify-content:space-between;gap:15px}.eyebrow{font:9px/1.6 monospace;letter-spacing:.12em;margin:0 0 10px}h1{font-size:clamp(36px,5.6vw,86px);line-height:.94;letter-spacing:-.07em;margin:0;font-weight:800}h1 em{font-family:Georgia,serif;color:var(--acid);font-weight:400}.practice{font:8px/1.8 monospace;color:#9d9b94;text-align:right}.hud{display:flex;align-items:center;gap:35px;border-block:1px solid var(--line);padding:15px 0;margin-top:24px}.hud div{display:grid;gap:4px}.hud span{font:8px monospace;letter-spacing:.1em;color:#aaa89f}.hud strong{font:22px Georgia,serif}.hud button{margin-left:auto}.board-stage{display:grid;place-items:center;flex:1;position:relative;min-height:390px;padding:25px 10px;background:radial-gradient(ellipse at center,#252129 0%,transparent 70%)}#board{--n:3;--tile:100px;display:grid;grid-template-columns:repeat(var(--n),var(--tile));gap:6px;padding:9px;perspective:1200px}.cell{width:var(--tile);height:var(--tile);padding:0;border:none;background:transparent;position:relative;perspective:650px;touch-action:none;isolation:isolate}.cell[aria-pressed=true]{outline:2px solid var(--acid);outline-offset:4px;z-index:2}.cell::after{content:attr(data-number);position:absolute;left:4px;bottom:4px;background:#0c0c0ecc;color:white;font:8px monospace;padding:2px 4px;pointer-events:none}.cell.correct::before{content:'✓';position:absolute;right:4px;top:4px;background:var(--acid);color:#0c0c0e;font:10px monospace;padding:2px 4px;z-index:3;pointer-events:none}.cube{display:block;position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .23s cubic-bezier(.2,.65,.3,1);pointer-events:none}.face{position:absolute;inset:0;display:block;background-size:calc(var(--n)*100%) calc(var(--n)*100%);background-repeat:no-repeat;backface-visibility:hidden;border:1px solid #ffffff28}.face:nth-child(1){transform:translateZ(calc(var(--tile)/2))}.face:nth-child(2){transform:rotateY(90deg) translateZ(calc(var(--tile)/2))}.face:nth-child(3){transform:rotateY(180deg) translateZ(calc(var(--tile)/2))}.face:nth-child(4){transform:rotateY(-90deg) translateZ(calc(var(--tile)/2))}.face:nth-child(5){transform:rotateX(90deg) translateZ(calc(var(--tile)/2))}.face:nth-child(6){transform:rotateX(-90deg) translateZ(calc(var(--tile)/2))}.below{display:flex;justify-content:space-between;gap:12px;font:8px/1.8 monospace;letter-spacing:.08em;border-top:1px solid var(--line);padding-top:14px;color:#bab8b0}aside{border-left:1px solid var(--line);padding:25px 20px;overflow:auto}.target-head{display:flex;justify-content:space-between;gap:10px}.target-head span{font:9px monospace;color:var(--acid)}#reference{display:block;width:100%;aspect-ratio:1;object-fit:contain;border:1px solid var(--line)}#targets{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;margin:10px 0 23px}#targets button{padding:0;aspect-ratio:1;background-size:cover;border:2px solid transparent}#targets button[aria-pressed=true]{border-color:var(--acid);outline:1px solid var(--acid);outline-offset:2px}.settings{display:grid;gap:12px;margin-bottom:23px}.settings label{display:grid;gap:7px;font:8px monospace;color:#bdbbb4;letter-spacing:.1em}select{width:100%;color:var(--paper);background:#19191b;padding:10px 6px}.control-head{display:flex;justify-content:space-between;font:8px monospace;gap:8px;margin-bottom:10px}.control-head span:first-child{color:var(--acid)}.directions{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.directions button{font-size:23px;padding:7px;background:#171719}.actions{display:flex;gap:7px;margin:12px 0 20px}.actions button{flex:1;font-size:9px}.actions button:last-child{background:var(--acid);color:var(--ink)}.help,details p{font-size:11px;line-height:1.7;color:#aaa89f}.help em{color:var(--paper)}#status{font:10px/1.7 monospace;color:#00e5d4;min-height:34px}details{font:9px/1.7 monospace;border-top:1px solid var(--line);padding-top:12px;margin-top:12px}summary{cursor:pointer}#overlay{position:absolute;inset:15px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#0c0c0eec;z-index:10;text-align:center;padding:25px}#overlay h2{font-size:clamp(30px,5vw,70px);letter-spacing:-.05em;margin:0;color:var(--acid)}#overlay p{font:13px/1.8 monospace;max-width:450px}#overlay button{background:var(--acid);color:var(--ink);margin-top:15px}body.paused .cube{visibility:hidden}[hidden]{display:none!important}@media(min-width:1000px){main{height:calc(100svh - 64px)}.board-stage{min-height:0}}@media(max-width:700px){header{padding:0 15px;height:55px}header>span{display:none}main{grid-template-columns:1fr}.arena{padding:22px 18px}.practice{display:none}h1{font-size:55px}.hud{gap:25px}.board-stage{min-height:340px;padding:25px 0}aside{border-left:0;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:12px 20px;padding:20px}.target-head,#targets,.settings,.control-head,.directions,.actions,.help,#status,details{grid-column:1/-1}#reference{width:140px;grid-column:1/-1;margin:auto}#targets{max-width:300px;width:100%;margin:0 auto 10px}.settings{grid-template-columns:1fr 1fr}.help{margin:0}.below{font-size:7px}}@media(prefers-reduced-motion:reduce){.cube{transition:none}}
:root .cube{transition:none}
.cell:disabled{opacity:1}
#board.celebrating .cell{outline:3px solid #a45bff;outline-offset:3px;animation:signal-frames 1s linear 2;box-shadow:0 0 12px #a45bff66}
#board.celebrating .cell:nth-child(5n+2){animation-delay:-.2s}#board.celebrating .cell:nth-child(5n+3){animation-delay:-.4s}#board.celebrating .cell:nth-child(5n+4){animation-delay:-.6s}#board.celebrating .cell:nth-child(5n){animation-delay:-.8s}
@keyframes signal-frames{0%,100%{outline-color:#a45bff;box-shadow:0 0 12px #a45bff66}20%{outline-color:#ff2b91;box-shadow:0 0 12px #ff2b9166}40%{outline-color:#e7ff00;box-shadow:0 0 12px #e7ff0066}60%{outline-color:#00e5d4;box-shadow:0 0 12px #00e5d466}80%{outline-color:#ff6a1a;box-shadow:0 0 12px #ff6a1a66}}
#overlay.victory{animation:signal-reveal .45s ease-out both}
@keyframes signal-reveal{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:scale(1)}}
#victory-score{display:grid;gap:5px;margin-top:20px;color:#ff2b91}#victory-score span{font:12px monospace;letter-spacing:.2em}#victory-score strong{font:bold clamp(52px,8vw,110px)/1 Arial,sans-serif;letter-spacing:-.06em}
#overlay.victory #overlay-copy{font:11px monospace;letter-spacing:.12em}
@media(prefers-reduced-motion:reduce){#board.celebrating .cell{animation:none}#overlay.victory{animation:none}}
.scoreboard{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;padding:15px 0;border-bottom:1px solid var(--line)}
@media(min-width:701px){main{height:calc(100svh - 64px);min-height:0}.arena,.board-stage{min-height:0}}
.scoreboard div{display:grid;gap:6px}.scoreboard span{font:8px monospace;color:#aaa89f;letter-spacing:.08em}.scoreboard strong{font:30px Georgia,serif;color:var(--acid)}
body.paused #reference,body.paused #targets{visibility:hidden}
#targets button.has-best{position:relative}#targets button.has-best:after{content:'✓';position:absolute;right:0;bottom:0;background:var(--acid);color:var(--ink);font:10px monospace;padding:2px}
.game-name{display:block;font:700 20px/1.2 Arial,Helvetica,sans-serif;letter-spacing:-.04em;color:var(--paper);margin-bottom:8px}
.mode-bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 0}
#mode-switch{display:flex;border:1px solid var(--line)}
#mode-switch button{min-height:44px;border:0;padding:10px 16px;font:11px monospace}
#mode-switch button[aria-pressed="true"]{background:var(--acid);color:#090909}
#game-help{min-width:44px;min-height:44px;border-radius:50%;font:18px Georgia,serif}
#mode-note{font:11px/1.5 monospace;color:#aaa89f;margin:0;flex:1;min-width:190px}
.ab-guide{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:#eeece2;overflow:hidden}
.ab-guide::backdrop{background:#0009}
.ab-guide-ring{position:fixed;outline:3px solid #e6ff00;outline-offset:5px;pointer-events:none}
.ab-guide-card{position:fixed;right:20px;bottom:20px;width:min(380px,calc(100vw - 40px));padding:24px;background:#111;border:1px solid #ff2b91;box-shadow:0 12px 50px #0008}
.ab-guide-card>span{font:10px monospace;letter-spacing:.13em;color:#ff2b91}
.ab-guide-card h2{font:700 26px/1.1 Arial,sans-serif;margin:14px 0;color:#eeece2}
.ab-guide-card p{font:14px/1.6 Arial,sans-serif;color:#eeece2}
.ab-guide-card>div{display:flex;justify-content:space-between;gap:10px;margin-top:20px}
.ab-guide-card button{min-height:44px;font:11px monospace;padding:12px}
.ab-guide-card [data-next]{background:#e6ff00;color:#090909}
.ab-mode-confirm{box-sizing:border-box;width:min(520px,calc(100vw - 32px));max-height:calc(100svh - 32px);padding:clamp(24px,5vw,40px);margin:auto;background:#111;color:#eeece2;border:1px solid #ff2b91;box-shadow:0 24px 100px #0009}
.ab-mode-confirm::backdrop{background:#000b;backdrop-filter:blur(4px)}
.ab-login[open]{position:fixed;inset:0;z-index:1000;height:fit-content}
.ab-rewards{border-top:1px solid #444;margin-top:28px;padding-top:20px}.ab-rewards h2{font:700 24px Arial,sans-serif;color:#ff2b91}.ab-rewards li{padding:12px 0;border-bottom:1px solid #333;font:12px/1.6 monospace}.ab-rewards p{font:13px/1.6 Arial,sans-serif}
.ab-confirm-kicker{font:10px monospace;letter-spacing:.13em;color:#ff2b91}
.ab-mode-confirm h2{font:700 clamp(30px,6vw,48px)/1.05 Arial,sans-serif;letter-spacing:-.04em;margin:22px 0}
.ab-mode-confirm h2 em{font-family:Georgia,serif;color:#e6ff00}
.ab-mode-confirm p{font:15px/1.6 Arial,sans-serif;color:#d0cec6}
.ab-confirm-actions{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
.ab-confirm-actions button{flex:1;min-height:48px;padding:12px;font:12px monospace}
.ab-confirm-actions [data-switch]{background:#e6ff00;color:#090909;border-color:#e6ff00}
.ab-mode-confirm button:focus-visible{outline:2px solid #ff2b91;outline-offset:4px}
.ab-login [data-wallet-choices]{display:flex;flex-direction:column;gap:10px}
.ab-login [data-wallet-choices] button{background:#e6ff00;color:#090909;min-height:48px}
.ab-login [data-login-status]{font:12px/1.5 monospace;color:#ff2b91}
.ab-login>a{font:12px monospace;color:#eeece2}
.ab-player-button{font:10px monospace}
.ab-holding-hints{font:12px/1.6 monospace}
.ab-holding-hints label{display:block;margin:12px 0}
.ab-holding-hints input{box-sizing:border-box;width:100%;padding:10px;background:#151515;color:#eee;border:1px solid #555}
/* Faces settle square-on. Animate an explicit world-axis quarter turn, never matrix decomposition. */
.face{border:0;background-origin:border-box}
.scoreboard #stars{color:#ff2b91;font:clamp(20px,3vw,32px)/1.2 Arial,sans-serif;letter-spacing:.06em;white-space:nowrap}
#targets button.has-best:after{content:attr(data-stars);background:#0b0b0b;color:#ff2b91;font:11px/1.2 Arial,sans-serif;padding:3px}
/* Natural document flow keeps growing controls and completion content above the leaderboard. */
main{height:auto;min-height:calc(100svh - 64px)}
.board-stage{min-height:360px}
aside{overflow:visible;min-width:0}
.reference-frame{position:relative;aspect-ratio:1;width:100%}
.reference-frame>#reference{position:absolute;inset:0;width:100%;height:100%}
@media(max-width:700px){.reference-frame{width:140px;grid-column:1/-1;margin:auto}}
/* Keep the desktop puzzle and reference together; extra sidebar content scrolls. */
@media(min-width:701px){
main{height:calc(100svh - 64px);min-height:0}
.arena{display:grid;grid-template-rows:auto auto auto auto minmax(0,1fr) auto;min-height:0;padding:12px 3vw}
.arena .title h1{font-size:clamp(32px,5.5svh,56px)}
.arena .eyebrow{margin-bottom:6px}
.arena .game-name{font-size:16px;margin-bottom:4px}
.arena .hud{margin-top:12px;padding:8px 0}
.arena .scoreboard{padding:8px 0;gap:12px}
.arena .scoreboard strong{font-size:24px}
.arena .mode-bar{padding:8px 0}
.arena .board-stage{min-height:0;contain:size;padding:14px 10px}
.arena .below{padding-top:8px}
aside{min-height:0;overflow:auto;padding:16px 20px}
}

/* Integrated Q00Bz campaign — hot pink / gold. */
/* SIDXO / Q00Bz campaign 1.0.0 — colour only; no artwork, game-state or layout overrides. */
:is(.sx-drop-intro,.sidxo-drop-launcher,.sidxo-q00bz-commerce,.q00bz-x,.sx-q00bz-feature,.sx-ab-board),
body:has(.arena #board) {
  --q-pink:#ff0080;
  --q-pink-hover:#ff4da6;
  --q-gold:#c8ab65;
  --q-ink:#0c0c0e;
  --q-panel:#171315;
  --q-paper:#eeece2;
  --q-line:#c8ab654d;
}

/* Standalone AfterBURN: shell only. Keep puzzle and status indicators unchanged. */
body:has(.arena #board) {background-color:var(--q-ink);--line:var(--q-line)}
body:has(.arena #board) :is(h1 em,.game-name,#overlay h2) {color:var(--q-pink)}
body:has(.arena #board) :is(.eyebrow,.exit,.scoreboard strong,.target-head span,.control-head span:first-child) {color:var(--q-gold)}
body:has(.arena #board) :is(.actions button:last-child,#overlay button,#mode-switch button[aria-pressed=true],.ab-guide-card [data-next],.ab-confirm-actions [data-switch],.ab-login [data-wallet-choices] button) {
  background:var(--q-pink);color:var(--q-ink);border-color:var(--q-pink);
}
body:has(.arena #board) :is(.ab-guide-card,.ab-mode-confirm) {border-color:var(--q-gold)}
body:has(.arena #board) .ab-mode-confirm h2 em {color:var(--q-pink)}
body:has(.arena #board) :is(.ab-confirm-kicker,.ab-guide-card>span) {color:var(--q-gold)}
body:has(.arena #board) :is(.actions,.directions,header) button:hover:not(:disabled) {border-color:var(--q-gold);color:var(--q-gold)}
body:has(.arena #board) .actions button:last-child:hover:not(:disabled) {background:var(--q-pink-hover);color:var(--q-ink)}
body:has(.arena #board) .sidxo-shared-wallet-modal .sidxo-shared-wallet-choice:hover:not(:disabled) {background:#21191c;border-color:var(--q-gold)}
