*{box-sizing:border-box}body{margin:0;background:#f8f4ee;color:#51394f;font-family:ui-rounded,'Segoe UI',sans-serif}main{max-width:510px;margin:auto;padding:24px 20px 30px}button,input,summary{cursor:pointer}button{font:inherit;color:inherit}button:focus-visible,summary:focus-visible,input:focus-visible{outline:3px solid #51394f;outline-offset:3px}header{display:flex;justify-content:space-between;align-items:center}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:700;color:#756575}h1{font-size:28px;letter-spacing:-1px;margin:6px 0}h1 span{display:block;font-size:11px;font-weight:500;letter-spacing:1px;margin-top:5px;color:#756575}header button,#restartTop{border:1px solid #d7cbd3;background:#fffaf5;border-radius:18px;padding:10px 14px;font-size:12px}#settings{background:#eee6ed;padding:16px;border-radius:16px;margin-top:12px;font-size:13px}#settings label{display:block;margin-bottom:12px}#settings p{font-size:12px}.companion{display:grid;grid-template-columns:1fr 1.7fr 1fr;align-items:center;height:172px}.scorebox span{font-size:10px;letter-spacing:2px}.scorebox strong{display:block;font-size:39px;line-height:1.25}.scorebox small{font-size:11px;color:#756575}.pet{height:175px;position:relative}.pet svg{height:100%;width:100%;overflow:visible}#message{text-align:center;font-size:13px;min-height:34px;margin:0 0 12px;line-height:1.5}#board{display:grid;grid-template-columns:repeat(8,1fr);gap:5px;background:#e7dfdf;padding:10px;border-radius:20px;box-shadow:0 5px 0 #d7cccf;border:1px solid #dbd0d5}.cell{aspect-ratio:1;border:0;border-radius:6px;background:#f7f0e9;min-width:0;padding:0;position:relative;transition:background .12s}.cell.filled:after,.mini:after{content:'';position:absolute;inset:5px;border-radius:3px;border-top:2px solid #ffffff60}.c1{background:#7fc5bd!important;box-shadow:inset 0 -3px #65a9a2}.c2{background:#b9a0d7!important;box-shadow:inset 0 -3px #a48ac4}.c3{background:#efb399!important;box-shadow:inset 0 -3px #d99c82}.cell.ghost{outline:2px dashed #51394f;outline-offset:-3px;opacity:.7}.cell.invalid{background:#edc2c6!important}.boardwrap{position:relative}#gameover{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background:#fff9eef2;border-radius:20px;padding:24px;text-align:center}#gameover[hidden]{display:none}#gameover h2{font-size:26px}#gameover button{background:#51394f;color:#fff9ed;border:0;border-radius:20px;padding:13px 24px;margin:6px}#gameover #rescue{background:#d8ebe4;color:#51394f}.traylabel{display:flex;justify-content:space-between;font-size:9px;font-weight:700;letter-spacing:1.7px;margin:25px 2px 12px}#tray{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.piece{height:100px;background:#fffaf5;border:1px solid #e3d8da;border-radius:17px;display:flex;justify-content:center;align-items:center;position:relative}.piece.selected{border:2px solid #51394f;background:#eee5f3;box-shadow:0 3px 0 #d4c3dd}.piece:disabled{opacity:.35;cursor:default}.piecegrid{display:grid;gap:3px;pointer-events:none}.mini{width:19px;height:19px;border-radius:4px;position:relative}.mini:after{inset:3px}.instructions{font-size:12px;text-align:center;line-height:1.7;color:#756575;margin:16px 0}footer{display:flex;justify-content:space-between;gap:6px;font-size:10px;padding:12px 0;border-top:1px solid #e0d5d9;align-items:center}input{accent-color:#715573}details{font-size:12px;color:#756575;line-height:1.7;margin-top:10px}summary{min-height:35px}.spark{position:absolute;right:0;top:30px;font-size:25px;color:#9a7cb5;opacity:0}.celebrate .spark{animation:spark 1s}.celebrate .bear{animation:hop .5s 2}.eyes{transform-origin:110px 78px;animation:blink 5s infinite}.bear{transform-origin:center;animation:breathe 4s infinite}body.reduced *{animation:none!important;transition:none!important}@keyframes breathe{50%{transform:translateY(-3px)}}@keyframes blink{0%,42%,46%,100%{transform:scaleY(1)}44%{transform:scaleY(.08)}}@keyframes hop{50%{transform:translateY(-12px) rotate(-4deg)}}@keyframes spark{30%,70%{opacity:1;transform:translateY(-10px)}}@media(max-width:400px){main{padding:16px 13px}.companion{height:152px}.pet{height:160px}#board{gap:4px;padding:8px}.piece{height:88px}h1{font-size:25px}.traylabel{margin-top:20px}.mini{width:17px;height:17px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.clear-glow{animation:clearGlow .7s ease-out}@keyframes clearGlow{35%{box-shadow:0 0 0 7px #b9dcd4,0 5px 0 #d7cccf}}

#saveStatus{font-size:11px;text-align:center;margin:0 0 10px;color:#617269;min-height:14px}#homeScreen.cloud-wait :is(.modes button,#settingsButton,#cubikinButton){opacity:.55;transition:opacity .15s}#saveStatus[data-kind=warning]{color:#835341;font-weight:600}#legacyStatus{font-size:11px;color:#835341;text-align:center;margin:0}#legacyStatus:empty{display:none}#runDialog{border:1px solid #d7cbd3;border-radius:22px;background:#fffaf5;color:#51394f;padding:24px;width:calc(100% - 24px);max-width:410px;max-height:85%;overflow:auto;box-shadow:0 12px 55px #51394f44}#runDialog::backdrop{background:#51394f66}#runDialog h2{margin:0 0 14px;font-size:23px;line-height:1.2}#runDialog p{font-size:14px;line-height:1.6}#dialogActions{display:grid;gap:10px;margin-top:20px}#dialogActions button,#retrySave{min-height:44px;padding:11px 16px;border:1px solid #d7cbd3;border-radius:15px;background:#eee5f3;color:#51394f}#dialogActions button:first-child{background:#51394f;color:#fffaf5}button:disabled{cursor:default}.cell:disabled{opacity:1}#settingsButton{min-height:44px}#gameMain[inert]{pointer-events:none}

.modes{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}.modes button{min-height:44px;border:1px solid #d7cbd3;border-radius:15px;background:#fffaf5;font-weight:600}.modes button[aria-pressed=true]{background:#51394f;color:#fffaf5}.modes #returnPractice{grid-column:1/-1}.modeinfo{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;padding:12px 3px 0;font-size:12px}.modeinfo p{flex-basis:100%;margin:0;line-height:1.6;color:#756575}.modeinfo strong{color:#51394f}.modes button:disabled{opacity:.5}#nextLevel{min-height:44px}button[hidden]{display:none!important}

/* Intrinsic end-state content grows the shared row; the board stays square. */
.boardwrap{display:grid;align-items:start}#board,#gameover{grid-area:1/1;min-width:0}#board{align-self:start;width:100%;aspect-ratio:1}#gameover{position:relative;inset:auto;align-self:stretch;padding:clamp(12px,4vw,24px);overflow-wrap:anywhere}#gameover h2,#gameover p{max-width:100%}#gameover #resultsHome{background:#fffaf5;color:#51394f;border:1px solid #d7cbd3}#endbest{font-size:12px;line-height:1.5;margin:6px 0;color:#756575}#gameover button{max-width:100%;min-height:44px;padding:12px 16px;white-space:normal;overflow-wrap:anywhere}#tray{grid-template-columns:repeat(3,minmax(0,1fr))}.piece{min-width:0;container-type:inline-size}.piecegrid{gap:clamp(1px,2cqw,3px)}.mini{width:clamp(6px,18cqw,19px);height:clamp(6px,18cqw,19px)}main{container-type:inline-size}@container(max-width:250px){header{flex-wrap:wrap;gap:8px}header>div{min-width:0;max-width:100%}.scorebox{min-width:0}.companion{height:auto;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:16px 0}.pet{grid-column:1/-1;grid-row:1;height:140px}.scorebox{grid-row:2}}

/* Saved Solo record provenance wraps at the existing readable text size. */
#bestRecord{display:block;line-height:1.5;overflow-wrap:anywhere;font-size:11px}#bestRecord[hidden],#bestRecord [hidden]{display:none}#bestEmpty,#bestRules,#bestAssistance,#bestEarlier{display:block}.companion{height:auto;min-height:172px}@media(max-width:400px){.companion{min-height:152px}}
#bestRecord span{font:inherit;letter-spacing:normal}

/* Core guidance retains native controls, readable wrapping and local safe-area space. */
#howToPlay,#resetOptions{min-height:44px;padding:10px 14px;border:1px solid #d7cbd3;border-radius:15px;background:#fffaf5;margin:6px 4px 0 0;white-space:normal}main{padding-left:max(13px,env(safe-area-inset-left));padding-right:max(13px,env(safe-area-inset-right));padding-bottom:max(30px,env(safe-area-inset-bottom))}#settings label{min-height:30px;display:flex;align-items:center;gap:6px}#settings button{max-width:100%;overflow-wrap:anywhere}#entryHelp{display:block;width:100%;margin:12px 0 0}

/* Full supported numbers wrap within shrinkable tracks; no data is clipped. */
.companion{grid-template-columns:minmax(0,1fr) minmax(0,1.7fr) minmax(0,1fr)}
.companion>*,.scorebox{min-width:0;max-width:100%}
#score,#bestRecord,#goal,#coins,#stock,#endtext,.modeinfo>span{overflow-wrap:anywhere;word-break:normal}
#score{max-width:100%}
.modeinfo>*{min-width:0;max-width:100%}

@container(max-width:250px){.companion{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* First mobile slice: scene Home, explicit entries, and a height-aware Play surface. */
[hidden]{display:none!important}main{padding: max(12px,env(safe-area-inset-top,0px)) max(13px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(13px,env(safe-area-inset-left,0px))}button{touch-action:manipulation}h1{font-size:32px;letter-spacing:-1px}header{gap:12px}header h1{margin:8px 0}#homeScreen{min-height:calc(100svh - 32px)}.home-wallet{text-align:right;font-size:13px;margin-top:4px}.home-scene{position:relative;display:grid;place-items:center;height:clamp(210px,43svh,360px);margin:18px 0 10px;border-radius:46% 46% 28px 28px;background:linear-gradient(#e2efeb 65%,#cddfd0 65%);isolation:isolate;overflow:hidden}#cubikinButton{border:0;background:none;width:78%;height:90%;align-self:end;z-index:1;display:grid;place-items:end center;padding:0 0 4%;border-radius:28px}.scene-cloud{position:absolute;border-radius:60px;background:#fffaf5;width:84px;height:25px;top:42px}.cloud-one{left:12px}.cloud-two{right:-20px;top:74px}.scene-flower{position:absolute;bottom:12px;right:26px;font-size:44px;color:#866a9c}.modes{margin-top:12px;gap:12px}.modes button{font-size:16px;min-height:48px}.modes #modeArcade{grid-column:1/-1;background:#51394f;color:#fffaf5;font-size:20px;min-height:56px}.modes #modeSolo{grid-column:1/-1;background:#d5eae3;color:#51394f}#entryScreen{padding-top:4px}#entryScreen h1{text-align:center;margin:32px 0 12px}#entryDetail{text-align:center;line-height:1.7;overflow-wrap:anywhere}#entryScreen>button,#menuButton{border:1px solid #d7cbd3;background:#fffaf5;border-radius:16px;min-height:44px;padding:10px 16px}#entryPrimary,#entryNew{display:block;width:100%;margin-top:12px}#entryPrimary{background:#51394f!important;color:#fffaf5!important;font-size:20px;min-height:56px!important}.entry-art{height:clamp(140px,30svh,260px);display:flex;justify-content:center;align-items:center;gap:8px}.entry-art span{display:block;width:56px;height:56px;background:#7fc5bd;border-radius:12px;box-shadow:inset 0 -5px #65a9a2;transform:rotate(-8deg)}.entry-art span:nth-child(2){background:#b9a0d7;box-shadow:inset 0 -5px #a48ac4;transform:translateY(-24px) rotate(4deg)}.entry-art span:nth-child(3){background:#efb399;box-shadow:inset 0 -5px #d99c82;transform:rotate(9deg)}
#playScreen{--board-size:min(100%,calc(100svh - 250px));display:flex;flex-direction:column;align-items:stretch;gap:0}.companion{height:auto;min-height:64px;grid-template-columns:minmax(0,1fr) auto;gap:8px;margin:0 0 4px}.scorebox strong{font-size:39px;line-height:1.15}.scorebox>span{font-size:10px}#bestRecord{display:none}.modeinfo{padding:0 0 8px;min-height:26px;justify-content:center;font-size:12px}.modeinfo p{line-height:1.45;text-align:center}.boardwrap{width:var(--board-size);max-width:100%;align-self:center}#board{gap:4px;padding:8px;border-radius:16px}.cell{min-width:24px;min-height:24px}.traylabel{font-size:9px;letter-spacing:1px;margin:14px 2px 8px}#tray{gap:8px}.piece{height:76px;border-radius:14px}#message{font-size:12px;line-height:1.45;min-height:18px;margin:10px 0 4px}#saveStatus{font-size:11px;line-height:1.5;margin:6px 0 0;min-height:16px}footer{display:none}#settings{margin:0;padding:12px;font-size:14px}#settings button{min-height:44px}#settings label{min-height:36px}#runDialog{max-height:calc(100svh - 24px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));padding:20px;overflow-wrap:anywhere}#runDialog #settings{background:#eee6ed}#dialogActions button{overflow-wrap:anywhere;white-space:normal}#gameover h2{margin:8px 0;font-size:24px}#gameover p{margin:8px 0}
@media(min-width:510px){#playScreen{--board-size:min(100%,calc(100svh - 270px))}.piece{height:84px}}
@media(max-height:600px) and (min-width:350px){#playScreen{--board-size:min(100%,calc(100svh - 250px))}}
@container(max-width:250px){.companion{grid-template-columns:minmax(0,1fr) auto;gap:10px}.scorebox{grid-row:auto}.boardwrap{width:100%}.home-scene{min-height:210px}.modes{grid-template-columns:minmax(0,1fr)}.modes>*{grid-column:1!important}.home-wallet{overflow-wrap:anywhere}header{align-items:start}#settingsButton{max-width:100%}}

#profileDetails #bestRecord{display:block}#profileDetails p{font-size:13px;margin:8px 0}#profileDetails{overflow-wrap:anywhere}#profileDetails #legacyStatus{text-align:left}#playScreen #message{margin:0 0 8px;min-height:18px}.boardwrap{min-width:242px}#playScreen{--board-size:min(100%,calc(100svh - 270px))}

@container(max-width:250px){.boardwrap{min-width:0}.cell{min-width:0;min-height:0}}
.scorebox{position:relative}.scorebox>span{font-size:12px}#scoreBest{display:block;font-size:22px;line-height:1.15;font-weight:800;color:#51394f;margin-top:2px;overflow-wrap:anywhere}#scoreBest[hidden]{display:none}
#scorePop{position:absolute;left:0;top:-6px;z-index:2;white-space:nowrap;background:#51394f;color:#fffaf5;font-size:22px;font-weight:800;line-height:1.2;padding:2px 10px;border-radius:999px;pointer-events:none;opacity:0}#scorePop[hidden]{display:none}#scorePop.pop{animation:scorePop .8s ease-out forwards}@keyframes scorePop{0%{opacity:0;transform:translateY(14px) scale(.8)}20%{opacity:1;transform:translateY(0) scale(1.08)}75%{opacity:1;transform:translateY(-4px) scale(1)}100%{opacity:0;transform:translateY(-12px)}}
#playScreen.arcade-goal{--board-size:min(100%,calc(100svh - 300px))}#playScreen.arcade-goal .modeinfo{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 10px;padding:0 2px 10px}#playScreen.arcade-goal #goal{text-align:left;font-size:13px;flex:1 1 140px}#toGo{flex:0 1 auto;min-width:0;max-width:100%}#toGo{margin:0;font-size:24px;font-weight:800;line-height:1.15;color:#51394f;text-align:right;overflow-wrap:anywhere}#toGo.reached{color:#2b7268}#toGo[hidden],.goal-track[hidden]{display:none}.goal-track{flex:1 0 100%;height:12px;background:#e7dfdf;border-radius:999px;overflow:hidden;box-shadow:inset 0 1px 2px #0000001f}#goalFill{display:block;height:100%;width:0;background:#3d877d;border-radius:inherit;transition:width .35s ease-out}#goalFill[hidden]{display:none}
@container(max-width:250px){#scoreBest{display:none}}
/* Power-ups (PLAN 0008 section 4): one row of four 44px buttons under the tray; the price, or the reason in its place. */







.coinline{display:block;font-size:12px;line-height:1.2;font-weight:700;color:#51394f;overflow-wrap:anywhere}.coinline::before{content:'';display:inline-block;width:9px;height:9px;margin-right:4px;border-radius:50%;background:#e2b94e;box-shadow:inset 0 -1px #b88d2a}
.cell.blast{outline:2px dashed #b4553f;outline-offset:-3px}
#entryReplay{display:block;width:100%;margin-top:12px}
.menubox{display:flex;flex-direction:column;align-items:center;gap:4px;max-width:96px}.menubox .coinline{text-align:center;max-width:100%}
@media(max-width:400px){.companion{grid-template-columns:minmax(0,1fr) auto}#menuButton{padding:10px 8px}.menubox{max-width:76px}}
/* Board budget with the toolbar (44px + 4px gap), measured in the browser at 320x568 to 390x844 (PLAN 0008 section 4; the 24px cell floor decides).
   Short screens (600px tall or less) trim the tray label row and tray height in both modes, and in Arcade also the goal sentence (kept in the bar's label) and the companion row. */
#playScreen{--board-size:min(100%,calc(100svh - 350px - env(safe-area-inset-bottom,0px)))}
#playScreen.arcade-goal{--board-size:min(100%,calc(100svh - 362px - env(safe-area-inset-bottom,0px)))}
@media(max-width:400px){#playScreen #message{min-height:35px}}
@media(max-height:600px){#playScreen{--board-size:min(100%,calc(100svh - 326px - env(safe-area-inset-bottom,0px)))}#playScreen #message{margin:0 0 4px}#playScreen.arcade-goal .modeinfo{padding-bottom:4px}#playScreen .traylabel{margin:6px 2px 4px}#playScreen .piece{height:64px}#playScreen.arcade-goal{--board-size:min(100%,calc(100svh - 328px - env(safe-area-inset-bottom,0px)))}#playScreen.arcade-goal .companion{min-height:54px}#playScreen.arcade-goal #goal{display:none}}
/* Bonus squares (PLAN 0009 section 4): a tinted fill, a solid top-left notch (2x one dot, 3x two dots, 4x solid) and a bold label.
   Notch and label live in .bonusmark, above every preview. Squares use no outline and no dashed line, so no preview looks like a square. */
.cell.bonus{--tint:#cfe9e4;--tint-ghost:#cfe9e4b3;container-type:inline-size}.cell.b3{--tint:#d8dff6;--tint-ghost:#d8dff6b3}.cell.b4{--tint:#f5e3a6;--tint-ghost:#f5e3a6b3}
.cell.bonus:not(.filled){background:var(--tint)}
.bonusmark{position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;overflow:hidden}
.bonusmark .notch{position:absolute;left:0;top:0;width:32cqw;height:32cqw;background-color:#51394f;clip-path:polygon(0 0,100% 0,0 100%)}
.b2 .bonusmark .notch{background-image:radial-gradient(circle at 30% 30%,#fffaf5 0 13%,transparent 14%)}
.b3 .bonusmark .notch{background-image:radial-gradient(circle at 20% 46%,#fffaf5 0 12%,transparent 13%),radial-gradient(circle at 46% 20%,#fffaf5 0 12%,transparent 13%)}
.bonusmark .blabel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:clamp(11px,32cqw,15px);font-weight:800;line-height:1;color:#51394f;white-space:nowrap}
.cell.filled .bonusmark .blabel{left:auto;top:1px;right:1px;transform:none;font-size:clamp(8px,22cqw,11px);padding:1px 2px;border-radius:999px;background:#fffaf5}
/* The placement preview fades the fill only (a see-through background, not the whole cell), so the notch and label keep full strength. */
.cell.ghost{opacity:1;background:#f7f0e9b3}.cell.bonus.ghost{background:var(--tint-ghost)}
/* On a square, the ghost and bomb rings are drawn under the marker instead of as an outline over it. */
.cell.bonus.ghost,.cell.bonus.blast{outline:none}.cell.bonus.ghost::before,.cell.bonus.blast::before{content:'';position:absolute;inset:1px;border:2px dashed #51394f;border-radius:5px;pointer-events:none}.cell.bonus.blast::before{border-color:#b4553f}
/* The cell a square hopped to pulses once (300ms); reduced motion turns it off (app.mjs never adds it, and the global guard above stops animation). */
.cell.hop{animation:bonusHop .3s ease-out both}@keyframes bonusHop{0%{transform:scale(.84);filter:drop-shadow(0 0 0 #e2b94e)}55%{transform:scale(1.1);filter:drop-shadow(0 0 5px #e2b94e)}100%{transform:none;filter:none}}
/* Bonus pop: a gold edge; it stays inside the score column so it never covers Menu. */
#scorePop.bonus{box-shadow:0 0 0 2px #e2b94e;max-width:100%;white-space:normal}@media(max-width:400px){#scorePop.bonus{font-size:18px}}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* Drag to place (PLAN 0011 D5, D6). A gesture that starts on a tray piece never pans, zooms or pulls to refresh; the board and the rest of the page keep pinch-zoom. */
.piece{touch-action:none}html:has(body[data-screen=play]){overscroll-behavior:none}#tray,#board{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.piece.lifted{opacity:.25}
/* The floating piece: a fixed overlay at board cell size, moved by transform only. Over the board it drops to 30% so the landing preview and any bonus square stay readable. */
#dragPiece{position:fixed;left:0;top:0;z-index:20;display:grid;pointer-events:none;contain:layout paint;will-change:transform;transform-origin:50% 100%}#dragPiece.over{opacity:.3}
#dragPiece .dcell{display:block;position:relative;border-radius:6px}#dragPiece .dcell:after{content:'';position:absolute;inset:5px;border-radius:3px;border-top:2px solid #ffffff60}
#dragPiece.grow{animation:dragGrow .12s ease-out}@keyframes dragGrow{from{scale:var(--grow,.6)}}
/* A spot that does not fit (drag and tap): a stronger red fill plus a solid dark-red frame, a shape cue as well as a colour, so it reads at 3:1 or better against empty and fitting cells even under the 30% floating piece. On a bonus square the frame sits under the marker. */
.cell.invalid{background:#eeb0b6!important}.cell.invalid::before{content:'';position:absolute;inset:1px;border:3px solid #952531;border-radius:5px;pointer-events:none}
/* The 100-level campaign (PLAN 0010 section 4). Stones: a cool slate with diagonal hatching and a 2px inset bevel. No outline, border or frame,
   so a stone never looks like a preview or the no-fit frame, and no label or notch, so it never looks like a square; it differs from a block
   by pattern, not only colour. Both hatch colours read 3:1 or better against the empty cell and every block colour (HL-10 receipt). */
.cell.stone{background:repeating-linear-gradient(135deg,#4b5866 0 3px,#323c47 3px 6px);box-shadow:inset 2px 2px #7d8a98,inset -2px -2px #232b33}
/* A preview over a stone shows invalid: the no-fit frame sits on the stone, which stays visible under it. */
.cell.stone.invalid{background:repeating-linear-gradient(135deg,#4b5866 0 3px,#323c47 3px 6px)!important}
/* One, two or three tray slots share the same tray height; pieces keep their size caps in wider slots. */
#tray{grid-template-columns:repeat(var(--tray,3),minmax(0,1fr))}
/* Moves left: a pill in the goal row, accent from 5 down. Where the row is tight the goal sentence steps aside (its text stays in the bar's label). */
#movesLeft{flex:0 0 auto;margin:0;padding:3px 10px;border-radius:999px;background:#eee5f3;color:#51394f;font-size:12px;line-height:16px;font-weight:600;white-space:nowrap}
#movesLeft.low{background:#51394f;color:#fffaf5;font-weight:800}
@media(max-width:400px){#playScreen.limited #goal{display:none}}
/* PLAN 0017: where the goal line is hidden on a phone, the level number stays in the pill row beside moves left. */
#levelTag{display:none;flex:0 0 auto;margin:0;padding:2px 9px;border:1px solid #d9cbe0;border-radius:999px;color:#51394f;font-size:12px;line-height:16px;font-weight:700;white-space:nowrap}
@media(max-width:400px){#playScreen.limited .modeinfo{column-gap:6px}#playScreen.limited #levelTag{display:block}#playScreen.limited #levelTag~#movesLeft{margin-right:auto}}
@media(max-height:600px){#playScreen.arcade-goal .modeinfo{column-gap:6px}#playScreen.arcade-goal #levelTag{display:block}#playScreen.arcade-goal #levelTag~#movesLeft{margin-right:auto}}
/* What is new on this level (start screen), the finished card after level 100, and the next level's line above Next level. */
#entryIntro{margin:2px auto 0;max-width:360px;padding:8px 12px;border-radius:14px;background:#eee5f3;color:#51394f;font-size:13px;line-height:1.4;font-weight:600;text-align:center;overflow-wrap:anywhere}
#gameover #nextIntro{margin:2px 0 4px;font-size:13px;line-height:1.4;font-weight:700;color:#51394f}
#entryCredits{display:block;width:100%;margin-top:12px}
/* Beating level 100: a short confetti in the three block colours over the board (none under reduced motion; app.mjs never adds it then). */
#confetti{grid-area:1/1;align-self:stretch;position:relative;z-index:3;pointer-events:none;overflow:hidden;border-radius:16px}
#confetti span{position:absolute;top:-6%;width:9px;height:14px;border-radius:3px;opacity:0;animation:confettiFall 1s ease-in forwards}
@keyframes confettiFall{0%{top:-6%;opacity:1;transform:translateX(0) rotate(0)}85%{opacity:1}100%{top:100%;opacity:0;transform:translateX(var(--drift,0)) rotate(var(--spin,180deg))}}
/* A tall piece (the four-long bar) keeps inside its slot on every tray size and screen height: each block is also capped by the slot's
   height for that piece's row count, so short pieces keep their size and only tall ones shrink. The results panel sits above square markers. */
.piece{container-type:size}.mini{--fit:calc((100cqh - 12px - (var(--rows,1) - 1)*3px)/var(--rows,1));width:clamp(6px,min(18cqw,var(--fit)),19px);height:clamp(6px,min(18cqw,var(--fit)),19px)}
#gameover{z-index:2}
/* The How to play tour and its gift chest (PLAN 0012 D5, D6, D16, D17). No new rows: the panel sits in the board's place, like the results panel. */
html:has(body[data-screen=tour]){overscroll-behavior:none}
/* The gold gift tag rides the top edge of How to play, so the button keeps its height; it is decoration (aria-hidden), the gift is in the description. */
#homeHelp,#entryHelp,#dialogActions button{position:relative}
.gift-tag{position:absolute;top:-9px;right:10px;z-index:1;font-size:12px;line-height:16px;font-weight:800;letter-spacing:0;padding:0 8px;border-radius:999px;background:#f5e3a6;color:#51394f;border:1px solid #8a6514;white-space:nowrap;pointer-events:none}
/* Glowing target cells: a gold fill with a dark-gold ring (shape as well as colour; not dashed like the landing outline, not red like a no-fit). */
.cell.glow:not(.ghost):not(.invalid){background:#f5e3a6}
.cell.glow::after{content:'';position:absolute;inset:2px;border:2px solid #8a6514;border-radius:4px;pointer-events:none;animation:tourGlow 1.4s ease-in-out infinite alternate}
@keyframes tourGlow{to{opacity:.45}}
#tourPanel{grid-area:1/1;align-self:stretch;position:relative;z-index:2;container-type:size;display:flex;flex-direction:column;align-items:center;justify-content:safe center;gap:8px;padding:clamp(8px,3cqw,14px);overflow:auto;background:#fff9eef2;border-radius:16px;text-align:center;overflow-wrap:anywhere}
#tourText{margin:0;max-width:32ch;font-size:14px;line-height:1.45;font-weight:600;color:#51394f}
#tourChestSlot{display:flex;justify-content:center;flex:0 0 auto}
#tourAction{flex:0 0 auto;min-height:44px;min-width:44px;padding:11px 22px;border:0;border-radius:18px;background:#51394f;color:#fffaf5;font-weight:700}
#tourAction:disabled{opacity:.6}
/* The tour's goal row ("Tour · step N of 5" and the to-go count) shows on short screens too and stays one row on a 320px phone, so the board keeps the Arcade height budget. */
#playScreen.tour #goal{display:block;flex:1 1 auto;white-space:nowrap}#playScreen.tour #toGo{font-size:22px}
#powerUps.tour-outline{outline:2px dashed #51394f;outline-offset:4px;border-radius:16px}
/* The won power-up: gold with a ring, and a 300ms pop at the reveal (none with reduced motion). It wins over the inert dashed look. */

#powerUps button.pu-pop{animation:puPop .3s ease-out}
@keyframes puPop{50%{transform:scale(1.12)}}
/* The chest (chest-view.mjs): two stacked drawings, closed and open, so reduced motion can cross-fade between them. */
.chest-view{display:flex;flex-direction:column;align-items:center;gap:6px}
.chest{display:grid;place-items:center;border:0;background:none;padding:2px;border-radius:14px;min-width:44px;min-height:44px;width:min(120px,37.5cqh);height:min(96px,30cqh)}
.chest:focus-visible{outline:3px solid #51394f;outline-offset:2px}
.chest[aria-disabled=true]{cursor:default}
.chest-art{grid-area:1/1;display:block;width:100%;height:100%}
.chest-art svg{display:block;width:100%;height:100%;overflow:visible}
.chest-fade{transition:opacity .2s linear}
.chest-open,.chest-view[data-state=open] .chest-closed{opacity:0}
.chest-view[data-state=open] .chest-open{opacity:1}
.chest-closed.shake{transform-origin:50% 90%;animation:chestShake .36s ease-in-out}
@keyframes chestShake{0%,100%{transform:rotate(0)}8%{transform:rotate(4deg)}25%{transform:rotate(-4deg)}42%{transform:rotate(4deg)}58%{transform:rotate(-4deg)}75%{transform:rotate(4deg)}92%{transform:rotate(-4deg)}}
.chest-lid{transform-box:fill-box;transform-origin:50% 100%;transition:transform .24s ease-out}
.chest-closed.lifting .chest-lid{transform:translateY(-10px) rotate(-8deg)}
.chest-prize{margin:0;display:flex;align-items:center;gap:6px;padding:4px 12px;border:1px solid #d7cbd3;border-radius:12px;background:#fffaf5;color:#51394f;font-size:16px;font-weight:800;line-height:1.3}
.chest-glyph{font-size:18px;line-height:1}
.chest-prize.rise{animation:prizeRise .2s ease-out both}
@keyframes prizeRise{from{opacity:0;transform:translateY(10px)}}
/* Reduced motion keeps one narrow exception to the reduce-all rules above: the chest's 200ms opacity cross-fade (no size, shape or position
   change, so not motion animation under WCAG 2.3.3). Scoped by panel; a later shop chest panel (PLAN 0014) joins the :is() list. */
body.reduced :is(#tourPanel,#shopChestPanel) .chest-fade{transition:opacity .2s linear!important}
@media(prefers-reduced-motion:reduce){:is(#tourPanel,#shopChestPanel) .chest-fade{transition:opacity .2s linear!important}}
/* Rewarded ads (PLAN 0013 section 4). Home: the last row of the nav, full width, two lines like the power-up buttons, the coin dot before
   the count. After the day's last ad the same spot holds plain text. Results panel: the token-help look, in the token-help slot. */
.modes #adReward{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:56px;padding:8px 14px;background:#fffaf5;border:1px solid #d7cbd3;color:#51394f}
#adReward .ad-name{font-size:16px;font-weight:700;line-height:1.2}#adReward .ad-line{font-size:12px;font-weight:600;line-height:1.3;color:#665463;overflow-wrap:anywhere}
#adReward .ad-line::before{content:'';display:inline-block;width:9px;height:9px;margin-right:4px;border-radius:50%;background:#e2b94e;box-shadow:inset 0 -1px #b88d2a;vertical-align:0}
#adReward[aria-disabled=true]{background:#f3eeea;border-style:dashed;cursor:default}
#adRewardDone{grid-column:1/-1;margin:0;min-height:44px;display:flex;align-items:center;justify-content:center;padding:8px 14px;border:1px dashed #d7cbd3;border-radius:15px;font-size:13px;font-weight:600;color:#665463;text-align:center}
#gameover #adReward2{background:#d8ebe4;color:#51394f}#gameover #adReward2[aria-disabled=true]{opacity:.7;cursor:default}
#nextLevel[aria-disabled=true],#restartTop[aria-disabled=true],#entryNew[aria-disabled=true]{opacity:.75;cursor:progress}
/* Options: the ads line (ads build only), the Privacy link and Google's Privacy choices, each a 44px target. */
#adsLine{font-weight:600;margin:12px 0 4px}
#privacyLink,#privacyChoices{display:inline-flex;align-items:center;min-height:44px;padding:10px 14px;border:1px solid #d7cbd3;border-radius:15px;background:#fffaf5;color:#51394f;margin:6px 4px 0 0;font:inherit}
#privacyLink{text-decoration:underline;text-underline-offset:3px}#privacyLink:focus-visible{outline:3px solid #51394f;outline-offset:3px}
/* Next level (results, Options and the start screen): a tap never selects the label or flashes a highlight box; keyboard focus keeps its outline. */
#nextLevel,#restartTop,#entryNew{user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
/* Your Cubikin, the Shop and the Wardrobe (docs/plan/0014-shop-chests/PLAN.md D3, D9, D10, section 4). Paper look: cream page, ink
   outlines, the block colours. The Cubikin is the one bold thing; cards, tabs and tiles stay quiet. Text never under 12px. */
.cubikin{display:block;overflow:visible}
/* PLAN 0019: the Cubikin's parts pivot in the drawing's own space; cubikin-motion.mjs moves them. idle breathes (Home, Wardrobe), hop is
   one gravity hop (results), still never moves. Under reduced motion every pose is still, so nothing here runs. */
.cubikin g,.cubikin ellipse,.cubikin rect,.cubikin path{transform-box:view-box}
.cubikin .cb-jump,.cubikin .face{transform-origin:60px 70px}.cubikin .cb-squash,.cubikin .cb-pose,.cubikin .cb-breathe,.cubikin .cb-dance{transform-origin:60px 110px}.cubikin .shadow{transform-origin:60px 113px}.cubikin .eyes-lid{transform-origin:60px 66px}
.cubikin .eyes{transition:transform .25s ease}.cubikin .cb-pose{transition:transform .5s ease}
.cubikin[data-pose=idle] .cb-breathe{animation:cubikinBreathe 3.6s ease-in-out infinite}
.cubikin[data-pose=hop] .cb-jump{animation:cubikinHop .62s linear 1}
@keyframes cubikinBreathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.018,.972)}}
@keyframes cubikinHop{0%{transform:translateY(0);animation-timing-function:cubic-bezier(.25,.6,.45,1)}45%{transform:translateY(-13px);animation-timing-function:cubic-bezier(.55,0,.85,.45)}90%,100%{transform:translateY(0)}}
/* Moods: calm shows the face slot's own drawing; every other mood swaps in its eyes and mouth. */
.cubikin :is(.eyes-dots,.eyes-happy,.eyes-star,.eyes-wide,.eyes-heart,.lids,.eyes-shut,.m-smile,.m-big,.m-wobble,.m-sad,.m-o,.sweat,.zz){display:none}
.cubikin:not([data-mood=calm]) .face-own{display:none}
.cubikin:is([data-mood=happy],[data-mood=worried],[data-mood=sad],[data-mood=sleepy]) .eyes-dots{display:inline}
.cubikin:is([data-mood=cheer],[data-mood=giggle],[data-mood=wiggle]) .eyes-happy,.cubikin[data-mood=star] .eyes-star,.cubikin[data-mood=surprised] .eyes-wide,.cubikin[data-mood=love] .eyes-heart,.cubikin[data-mood=sleepy] .lids{display:inline}
.cubikin:is([data-mood=happy],[data-mood=cheer],[data-mood=star],[data-mood=giggle],[data-mood=wiggle],[data-mood=love]) .m-big,.cubikin[data-mood=sleepy] .m-smile,.cubikin[data-mood=sad] .m-sad,.cubikin[data-mood=surprised] .m-o{display:inline}
.cubikin[data-mood=worried] .m-wobble{display:inline;transform-box:fill-box;transform-origin:center;animation:cubikinWobble .5s ease-in-out infinite}
.cubikin[data-mood=worried] .sweat{display:inline;animation:cubikinDrip 1.6s ease-in infinite}
.cubikin[data-mood=worried] .eyes{transform:translate(-3px,2.5px)}.cubikin[data-mood=sad] .eyes{transform:translate(0,3.5px)}.cubikin[data-mood=sad] .cb-pose{transform:scale(1.04,.92)}
.cubikin[data-mood=sleepy] .zz{display:inline;transform-box:fill-box;transform-origin:center;animation:cubikinZz 2.8s ease-out infinite}
.cubikin[data-mood=star] .eyes-star polygon{transform-box:fill-box;transform-origin:center;animation:cubikinTwinkle .7s ease-in-out infinite alternate}
.cubikin .hrt{transform-box:fill-box;transform-origin:center}
.cubikin.blink .eyes-lid{visibility:hidden}.cubikin.blink .eyes-shut{display:inline}
.cubikin .front3d .sq{display:none}.cubikin.turning .front3d .sq{display:inline}.cubikin.turning .front3d .rnd{display:none}
@keyframes cubikinWobble{0%,100%{transform:translateX(0)}50%{transform:translateX(1.2px) scaleY(.85)}}
@keyframes cubikinDrip{0%{opacity:0;transform:translateY(-2px)}25%{opacity:1}80%{opacity:1;transform:translateY(5px)}100%{opacity:0;transform:translateY(7px)}}
@keyframes cubikinZz{0%{opacity:0;transform:translate(0,0) scale(.6)}25%{opacity:1}100%{opacity:0;transform:translate(8px,-14px) scale(1.2)}}
@keyframes cubikinTwinkle{to{transform:scale(1.18) rotate(18deg)}}
.cubikin[data-pose=still] :is(.m-wobble,.sweat,.zz,.eyes-star polygon){animation:none}.cubikin[data-pose=still] .sweat{opacity:1}
.reduced-motion .cubikin *{animation:none!important;transition:none!important}
.home-cubikin{display:block;width:min(200px,100%);height:auto;max-height:96%;aspect-ratio:1}.home-cubikin svg{width:100%;height:100%}
#cubikinButton:focus-visible{outline:3px solid #51394f;outline-offset:-3px}
.shop-screen{padding-bottom:28px}
.shop-head{position:sticky;top:0;z-index:3;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:6px 8px;padding:8px 0 8px;background:#f8f4ee;box-shadow:0 1px 0 #e6dce1}
.shop-head.unstuck{position:static}
.shop-head h1{margin:0;font-size:24px;line-height:1.2;text-align:center;overflow-wrap:anywhere}
.shop-head h1:focus{outline:none}.shop-head h1:focus-visible{outline:3px solid #51394f;outline-offset:3px}
.shop-head>button{min-height:44px;min-width:64px;border:1px solid #d7cbd3;background:#fffaf5;border-radius:16px;padding:10px 14px;font-size:16px}
.coin-chip{justify-self:end;display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:6px 12px;border-radius:18px;background:#fbf0cf;font-size:16px;font-weight:800;white-space:nowrap}
.coin-chip::before,.tile-line.price::before{content:'';display:inline-block;width:10px;height:10px;border-radius:50%;background:#e2b94e;box-shadow:inset 0 -1.5px #b88d2a;flex:none}
.tile-line.price::before{width:9px;height:9px}
.shop-message{grid-column:1/-1;margin:0;font-size:14px;line-height:1.4;text-align:center;font-weight:600}
.shop-message:empty{margin-top:-6px}
.shop-card{display:grid;grid-template-columns:72px minmax(0,1fr);align-items:center;gap:10px 14px;margin:14px 0;padding:14px;border:1px solid #e3d8da;border-radius:22px;background:#fffaf5;box-shadow:0 3px 0 #ebe1e4}
.card-art{display:grid;place-items:center;width:72px;height:72px}.card-art svg{width:72px;height:58px;overflow:visible}
.rotate-art{border-radius:20px;background:#d5eae3;box-shadow:inset 0 -4px #b9dacf;font-size:34px;font-weight:800;color:#51394f}
.shop-card h2{margin:0 0 2px;font-size:19px;line-height:1.25}
.shop-card p{margin:2px 0;font-size:14px;line-height:1.45}
.shop-card .earned-line{font-size:13px;color:#756575}
.card-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.card-actions button{min-height:44px;padding:10px 18px;border:1px solid #51394f;border-radius:16px;background:#51394f;color:#fffaf5;font-size:16px;font-weight:700}
.card-actions button.link{border:0;background:none;color:#51394f;font-weight:700;padding:10px 6px;text-decoration:underline;text-underline-offset:3px}
#chestOpen.waiting,#rotateBuy.owned,#rotateBuy.short{background:#e4efea;border-color:#cfe1da;color:#51394f}
.outfits>h2{margin:22px 0 10px;font-size:19px}
#shopPreview{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:6px 14px;border:1px solid #cfe1da;border-radius:22px;background:linear-gradient(#e2efeb 72%,#cddfd0 72%);text-align:left}
.preview-art svg{width:96px;height:96px}
.preview-copy{display:grid;gap:2px;font-size:14px;line-height:1.35}.preview-copy b{font-size:16px}
.slot-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin:14px 0 12px;padding:4px;border-radius:18px;background:#efe7ec}
.slot-tabs [role=tab]{min-height:44px;min-width:0;padding:6px 2px;border:0;border-radius:14px;background:none;color:#665566;font-size:15px;font-weight:700;overflow-wrap:anywhere}
.slot-tabs [role=tab][aria-selected=true]{background:#fffaf5;color:#51394f;box-shadow:0 2px 0 #d7cbd3}
.slot-tabs [role=tab]:focus-visible{outline:3px solid #51394f;outline-offset:1px}
.tile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px}
.tile{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;min-height:44px;padding:8px 6px 12px;border:1px solid #e3d8da;border-radius:20px;background:#fffaf5;text-align:center}
.tile-art svg{width:64px;height:64px}
.tile-name{font-size:14px;font-weight:700;line-height:1.25;overflow-wrap:anywhere}
.tile-line{display:inline-flex;align-items:center;gap:4px;font-size:13px;line-height:1.3;overflow-wrap:anywhere}
.tile-need{font-size:12px;line-height:1.3;color:#756575}
.tile.wearing{border:2px solid #51394f;background:#eef6f2;padding:7px 5px 11px}
.tile.wearing .tile-line{font-weight:800}
.tile.muted .tile-line{color:#756575}
.lock{width:12px;height:12px;flex:none}
.wardrobe-stage{display:grid;place-items:center;margin:14px 0 0;padding:10px 0 6px;border-radius:40% 40% 24px 24px;background:linear-gradient(#e2efeb 74%,#cddfd0 74%)}
.wardrobe-stage svg{width:140px;height:140px}
.cards-line{margin:16px 0 0;font-size:14px;text-align:center;color:#756575}
@media(max-width:360px){.wardrobe-stage svg{width:112px;height:112px}.preview-art svg{width:80px;height:80px}}
#shopChestPanel{position:fixed;inset:0;z-index:6;display:grid;place-items:center;padding:16px;overflow:auto;background:#f8f4eef2}
#shopChestPanel .panel-box{width:min(360px,100%);display:flex;flex-direction:column;align-items:center;gap:10px;padding:20px 18px;border:1px solid #e3d8da;border-radius:26px;background:#fffaf5;text-align:center;box-shadow:0 12px 40px #51394f2e}
#shopChestPanel h2{margin:0;font-size:21px}
#shopChestPanel .chest{width:min(132px,100%);height:auto;aspect-ratio:132/106}
#shopChestPrompt{margin:0;font-size:16px;line-height:1.45}
.prize-cubikin svg{width:72px;height:72px}
.panel-actions{display:grid;gap:10px;width:100%}
.panel-actions button{min-height:44px;padding:11px 16px;border:1px solid #d7cbd3;border-radius:16px;background:#eee5f3;color:#51394f;font-size:16px}
#shopChestWear{background:#51394f;color:#fffaf5;border-color:#51394f}
#dialogArt{display:grid;place-items:center;margin:-4px 0 4px}#dialogArt svg{width:96px;height:96px}
#dialogList{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(130px,100%),1fr));gap:6px 10px;margin:12px 0 0;padding:0;list-style:none;font-size:14px;line-height:1.5}
#dialogList li.odds{grid-column:1/-1;padding:8px 12px;border-radius:14px;background:#f3ecf1}
#dialogList li.set-piece{display:flex;gap:6px;padding:0 4px}
#dialogList li.set-piece::before{content:'\25CB';color:#756575}
#dialogList li.set-piece.owned::before{content:'\2713';color:#2f6f63;font-weight:800}
#endCubikin{display:grid;place-items:center;margin:0 0 2px}#endCubikin svg{width:56px;height:56px}
/* Very narrow layouts (200% zoom on a small phone): the header wraps (Back and the coin chip share a row only when both fit, the title gets its own
   row), cards stack the drawing above the words, tabs go 2 by 2, and the chest panel keeps its padding small so the chest fits. */
@container(max-width:260px){.shop-head{display:flex;flex-wrap:wrap}.shop-head>:nth-child(3){order:1;margin-left:auto;max-width:100%}.shop-head h1{order:2;flex:1 1 100%;text-align:left}.shop-head .shop-message{order:3;flex:1 1 100%}.coin-chip{white-space:normal;overflow-wrap:anywhere}#shopChestPanel{padding:8px}#shopChestPanel .panel-box{padding:16px 12px}.shop-card{grid-template-columns:minmax(0,1fr)}.card-actions button{width:100%}.slot-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}#shopPreview{flex-direction:column;text-align:center}}

/* Coin packs, No ads, the payment card, Purchases, Restore and the Home Screen tip (docs/plan/0015-stripe-purchases/PLAN.md section 6).
   Same Paper look as the Shop: cream rows with an ink outline and the gold coin dot; one column at every width; rows at least 56px,
   every control at least 44px, text never under 12px. At 200% zoom or on a narrow phone the price wraps under the coins. */
.store-packs>h2{margin:24px 0 10px;font-size:19px}
.pack-list{display:grid;gap:10px}
.pack-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px;width:100%;min-height:56px;padding:10px 16px;border:1px solid #d7cbd3;border-radius:18px;background:#fffaf5;box-shadow:0 3px 0 #ebe1e4;text-align:left;font-size:16px;line-height:1.3}
.pack-row:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 #ebe1e4}
.pack-coins{display:inline-flex;align-items:center;gap:8px;font-weight:800;overflow-wrap:anywhere}
.pack-list .pack-coins::before{content:'';display:inline-block;width:12px;height:12px;border-radius:50%;background:#e2b94e;box-shadow:inset 0 -1.5px #b88d2a;flex:none}
.pack-price{margin-left:auto;font-weight:700;white-space:nowrap}
.pack-row:disabled{cursor:default;box-shadow:none;background:#f3eeea;border-style:dashed}
.pack-row:disabled .pack-price{white-space:normal;font-size:14px;font-weight:600;color:#665463}
.pack-row .pack-price:not(:only-child){text-align:right}
#packsNotice{margin:0 0 10px;padding:10px 14px;border-radius:14px;background:#f3ecf1;font-size:14px;line-height:1.45}
.pack-tax{margin:10px 2px 0;font-size:14px;line-height:1.45;color:#665463}
.pack-row.no-ads{display:grid;grid-template-columns:minmax(0,1fr) auto;margin-top:14px;background:#eef6f2;border-color:#cfe1da}
.no-ads .pack-coins{grid-column:1}.no-ads .pack-sub{grid-column:1;font-size:14px;font-weight:600;color:#59655d}.no-ads .pack-price{grid-column:2;grid-row:1/span 2}
.store-links{display:flex;flex-wrap:wrap;gap:4px 8px;margin-top:12px}
.store-links a,.store-links button{display:inline-flex;align-items:center;min-height:44px;padding:10px 8px;border:0;background:none;color:#51394f;font:inherit;font-size:15px;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.store-links a:focus-visible{outline:3px solid #51394f;outline-offset:3px;border-radius:6px}
.store-card{display:grid;gap:8px;margin:14px 0 0;padding:14px 16px;border:1px solid #e3d8da;border-radius:20px;background:#fffaf5;box-shadow:0 3px 0 #ebe1e4;font-size:15px}
.store-card p{margin:0;line-height:1.45;overflow-wrap:anywhere}
#storeCardText{font-weight:800;font-size:16px}
.store-card.open #storeCardText{font-weight:600;color:#665463}
.store-keep{font-size:14px;color:#665463}
.store-card-actions{display:flex;flex-wrap:wrap;gap:8px}
.store-card button{min-height:44px;padding:10px 16px;border:1px solid #d7cbd3;border-radius:15px;background:#eee5f3;color:#51394f;font-weight:700}
.code{font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;font-weight:800;letter-spacing:.04em;user-select:text;-webkit-user-select:text}
#storeList{display:grid;gap:8px;margin:12px 0 0;padding:0;list-style:none}
#storeList li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 10px;padding:8px 8px 8px 12px;border-radius:14px;background:#f3ecf1;font-size:14px;line-height:1.45}
#storeList li.empty{display:block;padding:12px;text-align:center}
#storeList li.refunded{color:#665463;background:#f6f2f0}
#storeList .pl-text{font-weight:700;overflow-wrap:anywhere}#storeList .pl-code{grid-column:1;overflow-wrap:anywhere}
#storeList button{grid-column:2;grid-row:1/span 2;min-height:44px;min-width:64px;padding:8px 12px;border:1px solid #d7cbd3;border-radius:14px;background:#fffaf5;color:#51394f;font-weight:700}
#restoreForm{display:grid;gap:4px;margin-top:6px}
#restoreForm label{margin-top:8px;font-size:14px;font-weight:700}
#restoreForm input{width:100%;min-height:44px;padding:10px 12px;border:1px solid #cdbfc9;border-radius:12px;background:#fff;color:#51394f;font:inherit;font-size:16px}
#restoreForm input[aria-invalid=true]{border-color:#835341;box-shadow:0 0 0 1px #835341}
#restoreCode{font-family:ui-monospace,'Cascadia Mono',Consolas,monospace;letter-spacing:.06em}
#restoreHint{margin:2px 0 0;font-size:13px;color:#665463}
#storeDialogMessage{margin:12px 0 0;font-size:14px;font-weight:700;line-height:1.45}
#storeDialogMessage:empty{display:none}
#dialogList li.note{grid-column:1/-1;padding:0;font-size:14px}
#dialogList li.note::before{content:'\2022';margin-right:6px;color:#756575}
#purchasesButton,#restoreButton,#termsLink{display:inline-flex;align-items:center;min-height:44px;padding:10px 14px;border:1px solid #d7cbd3;border-radius:15px;background:#fffaf5;color:#51394f;margin:6px 4px 0 0;font:inherit}
#termsLink{text-decoration:underline;text-underline-offset:3px}
.earned-count{font-size:13px;font-weight:700;color:#665463}
@media(prefers-reduced-motion:reduce){.pack-row:active:not(:disabled){transform:none}}
/* One-tap speaker (PLAN 0018): 44px target on Home and in Play; the shape (waves or a cross) says the state, not colour alone. */
.head-tools{display:flex;align-items:center;gap:8px}
.sound-btn{display:inline-grid;place-items:center;flex:none;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;border:1px solid #d7cbd3;border-radius:16px;background:#e4efea;color:#51394f}
.sound-btn[aria-pressed=false]{background:#fffaf5}
.sound-btn svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sound-btn .sp{fill:currentColor}
.sound-btn[aria-pressed=true] .off,.sound-btn[aria-pressed=false] .on{display:none}
.sound-btn:disabled{opacity:.5;cursor:default}
.menubox{flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;max-width:124px}
.menubox .coinline{flex:1 0 100%}
@media(max-width:400px){.menubox{max-width:116px;gap:4px}}
@media(max-width:340px){#menuButton{padding:10px 4px;min-width:44px}.menubox{max-width:124px;gap:4px}.companion{grid-template-columns:minmax(0,1fr) auto;gap:6px}}
/* Enlarged or tiny layouts: the speaker drops under Menu rather than squeezing the score. */
@container(max-width:250px){.menubox{max-width:76px}}
/* PLAN 0019: the play Cubikin perches on the board's top-right edge, feet on the frame (owner's choice, variant B of
   .local/mockups/corner-cubikin-layout.html). Its size and place are set here and nowhere else; it never takes a tap. The message and goal lines
   keep 70px clear on the right so their text never runs under it; app.mjs shrinks it, then hides it, if large text still reaches it. */
#playScreen .boardwrap{position:relative}
#playCubikin{--cubikin-size:64px;position:absolute;right:6px;top:-55px;width:var(--cubikin-size);height:var(--cubikin-size);pointer-events:none;z-index:2}
#playCubikin.small{--cubikin-size:40px;top:-31px}#playCubikin.off{visibility:hidden}
#playCubikin svg,#winStage svg{width:100%;height:100%;overflow:visible;display:block}
#playScreen #message,#playScreen .modeinfo{padding-right:var(--pet-clear,70px)}
@media(min-width:401px){#playScreen #message{min-height:35px}#playScreen{--board-size:min(100%,calc(100svh - 367px - env(safe-area-inset-bottom,0px)))}#playScreen.arcade-goal{--board-size:min(100%,calc(100svh - 379px - env(safe-area-inset-bottom,0px)))}}
@media(min-width:401px) and (max-height:600px){#playScreen{--board-size:min(100%,calc(100svh - 343px - env(safe-area-inset-bottom,0px)))}#playScreen.arcade-goal{--board-size:min(100%,calc(100svh - 345px - env(safe-area-inset-bottom,0px)))}}
/* Line-clear effects: one canvas over the whole screen that never takes a tap, the word, the glow and the shimmer over the board. */
#fxLayer{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:50}
#boardFx{position:absolute;left:0;top:0;width:100%;aspect-ratio:1;overflow:hidden;border-radius:16px;pointer-events:none;z-index:1}
#boardShimmer{position:absolute;inset:0;opacity:0;background:linear-gradient(105deg,transparent 30%,#fff8 45%,#ffffffcc 50%,#fff8 55%,transparent 70%);transform:translateX(-100%)}
#boardGlow{position:absolute;left:-4px;top:-4px;width:calc(100% + 8px);aspect-ratio:1;border-radius:20px;pointer-events:none;opacity:0;box-shadow:0 0 0 4px #f5e3a6,0 0 22px 6px #e2b94e}
#tierWord{position:fixed;left:0;top:0;white-space:nowrap;text-align:center;font-size:40px;line-height:1.1;font-weight:800;letter-spacing:-1px;color:#51394f;background:#fffaf5;border-radius:18px;padding:8px 20px 10px;box-shadow:0 0 0 2px #51394f,0 5px 0 2px #51394f;pointer-events:none;opacity:0;z-index:51}#tierWord:empty{display:none}
/* The win show: a soft dim and the Cubikin grown to the centre. Neither takes a tap; a tap or key ends the show. */
#winBackdrop{position:fixed;inset:0;background:radial-gradient(circle at 50% 42%,#fff9eedd,#51394f66);pointer-events:none;z-index:40}
#winStage{position:fixed;pointer-events:none;z-index:45}#winBackdrop[hidden],#winStage[hidden]{display:none}
/* The card tray (PLAN 0020; demo .local/mockups/card-hand-tray.html). The same buttons and tray box the old tray had, so the board never
   moves. Each card's face reaches up by --lift (the label row plus --reach over the board's bottom edge, both set by app.mjs) and is cut at the
   tray's bottom edge, so a lowered card slides out of sight and never reaches the power-ups. The look is only the --k-* values of the skin. */
#tray.cards{--lift:0px;--reach:0px;position:relative;z-index:3;padding:0 4px;clip-path:inset(-100vh -100vw 0 -100vw)}
#tray.cards .piece{--t:translateY(0);background:none;border:0;box-shadow:none;padding:0;border-radius:var(--k-r);transform:var(--t);transform-origin:50% 100%;transition:transform .28s cubic-bezier(.3,.7,.4,1),opacity .2s}
#tray.cards .piece:first-child:not(:last-child){--t:translateY(6px) rotate(-5deg)}#tray.cards .piece:last-child:not(:first-child){--t:translateY(6px) rotate(5deg)}#tray.cards .piece:nth-child(2){z-index:1}
#tray.cards .cardface{position:absolute;left:0;right:0;bottom:0;top:calc(-1 * var(--lift));border-radius:var(--k-r);border:var(--k-border);box-shadow:var(--k-shadow);background:var(--k-texture),var(--k-bg)}
#tray.cards .frame{position:absolute;inset:var(--k-inset);border:var(--k-frame);border-radius:var(--k-fr)}
#tray.cards .frame::before,#tray.cards .frame::after{content:'';position:absolute;width:10px;height:10px;border:var(--k-orn)}
#tray.cards .frame::before{left:3px;top:3px;border-right:0;border-bottom:0}#tray.cards .frame::after{right:3px;bottom:3px;border-left:0;border-top:0}
#tray.cards .pip{position:absolute;font-size:12px;line-height:1;font-weight:800;color:var(--k-accent);font-family:var(--k-font)}#tray.cards .pip::before{content:var(--k-pip)}
#tray.cards .pip.a{left:calc(var(--k-inset) + 9px);top:calc(var(--k-inset) + 11px)}#tray.cards .pip.b{right:calc(var(--k-inset) + 9px);bottom:calc(var(--k-inset) + 11px);transform:rotate(180deg)}
#tray.cards .well{position:absolute;left:calc(var(--k-inset) + 12px);right:calc(var(--k-inset) + 12px);top:calc(var(--k-inset) + 22px);bottom:calc(var(--k-inset) + 22px);background:var(--k-well);border-radius:var(--k-wr);display:flex;justify-content:center;align-items:center;box-shadow:inset 0 1px 3px #0002;container-type:size}
#tray.cards .mini{--fit:calc((100cqh - 6px - (var(--rows,1) - 1)*3px)/var(--rows,1));width:clamp(6px,min(20cqw,var(--fit)),19px);height:clamp(6px,min(20cqw,var(--fit)),19px);outline:1.5px solid var(--k-edge);border-radius:var(--k-mr)}
#tray.cards .piece.selected .cardface{box-shadow:0 0 0 3px var(--k-sel),var(--k-shadow)}
#tray.cards .piece.turnpick:not(:disabled) .cardface{outline:2px dashed var(--k-sel);outline-offset:-5px}
#tray.cards .piece:focus-visible{outline:none}#tray.cards .piece:focus-visible .cardface{outline:3px solid var(--k-sel);outline-offset:-3px}
#tray.cards .piece.lifted .piecegrid{visibility:hidden}
/* The next tap belongs to the board (a picked piece, Bomb, Mallow help) or a panel covers it: the hand lowers clear of the bottom row, still solid
   and tappable. Holding a piece: the cards fade, stop catching touches and dip; near the bottom rows they slide most of the way out. */
#tray.cards.low .piece{transform:translateY(calc(var(--reach) + 4px)) var(--t)}
#tray.cards.holding .piece{opacity:.15;pointer-events:none;transform:translateY(calc(var(--reach) + 12px)) var(--t)}
#tray.cards.holding.low .piece{transform:translateY(calc(var(--lift) + 40px)) var(--t)}
/* A panel over the board can grow past it (large text, zoom): the cards always stay under it, so they never cover its buttons. */
#tray.cards.under-panel{z-index:1}
/* A tilted card's corner must never widen the page. */
body[data-screen=play] main{overflow-x:clip}
/* Reduce motion: a straight row that never reaches over the board; holding is a fade only. */
#tray.cards.flat .piece{transform:none!important;transition:opacity .2s}
#playScreen.hand-cards .traylabel{position:relative;z-index:4;pointer-events:none}#playScreen.hand-cards .traylabel>span:first-child{visibility:hidden}#playScreen.hand-cards #combo{text-shadow:0 1px 0 #fffaf5,0 0 6px #fffaf5}
/* The five card looks (values from the approved demo). A future visual theme can simply pick one. */
#tray.cards[data-skin=paper],.skin-swatch[data-skin=paper]{--k-bg:#fffaf5;--k-texture:radial-gradient(circle at 20% 15%,#ffffff 0,#fff0 40%),repeating-linear-gradient(0deg,#51394f05 0 2px,#0000 2px 5px);--k-border:1px solid #d7cbd3;--k-r:14px;--k-shadow:0 6px 18px #51394f2e;--k-inset:6px;--k-frame:3px double #c9b6c4;--k-fr:9px;--k-orn:2px solid #b9a0d7;--k-pip:'\2666';--k-accent:#9b7fbf;--k-well:#f7f0e9;--k-wr:8px;--k-edge:#51394f;--k-mr:4px;--k-sel:#51394f;--k-font:inherit}
#tray.cards[data-skin=midnight],.skin-swatch[data-skin=midnight]{--k-bg:#1f1d33;--k-texture:radial-gradient(circle at 30% 0,#3a3760 0,#0000 60%),radial-gradient(1px 1px at 70% 30%,#fff8 50%,#0000 51%),radial-gradient(1px 1px at 25% 80%,#fff6 50%,#0000 51%);--k-border:1px solid #c9a44c;--k-r:14px;--k-shadow:0 8px 20px #0008;--k-inset:5px;--k-frame:1.5px solid #c9a44c;--k-fr:10px;--k-orn:2px solid #e2c06a;--k-pip:'\2605';--k-accent:#e2c06a;--k-well:#2c2a48;--k-wr:8px;--k-edge:#0000;--k-mr:4px;--k-sel:#e2c06a;--k-font:inherit}
#tray.cards[data-skin=jewel],.skin-swatch[data-skin=jewel]{--k-bg:linear-gradient(150deg,#3b1f6b,#1d4a5c 55%,#5c1d3f);--k-texture:linear-gradient(120deg,#fff0 40%,#ffffff26 50%,#fff0 60%);--k-border:2px solid #e2b94e;--k-r:16px;--k-shadow:0 8px 22px #2f1d5577;--k-inset:6px;--k-frame:2px ridge #e9cf86;--k-fr:11px;--k-orn:2px solid #ffe6a3;--k-pip:'\25C6';--k-accent:#ffd76e;--k-well:#fff6e8;--k-wr:10px;--k-edge:#2f1d55;--k-mr:4px;--k-sel:#ffd76e;--k-font:inherit}
#tray.cards[data-skin=retro],.skin-swatch[data-skin=retro]{--k-bg:#14162b;--k-texture:repeating-linear-gradient(0deg,#ffffff08 0 1px,#0000 1px 3px);--k-border:3px solid #39e6ff;--k-r:0px;--k-shadow:4px 4px 0 #ff3fa4;--k-inset:6px;--k-frame:2px dashed #ff3fa4;--k-fr:0px;--k-orn:3px solid #39e6ff;--k-pip:'1UP';--k-accent:#39e6ff;--k-well:#0b0c1a;--k-wr:0px;--k-edge:#0000;--k-mr:0px;--k-sel:#ffe14d;--k-font:ui-monospace,Consolas,monospace}
#tray.cards[data-skin=autumn],.skin-swatch[data-skin=autumn]{--k-bg:#fbf0dc;--k-texture:radial-gradient(circle at 85% 90%,#e8a05a44 0,#0000 35%),radial-gradient(circle at 10% 10%,#c9782c22 0,#0000 30%);--k-border:1px solid #b5651d;--k-r:14px;--k-shadow:0 6px 18px #6b3a1a33;--k-inset:6px;--k-frame:2px solid #c9782c;--k-fr:8px;--k-orn:2px solid #8a4a14;--k-pip:'\2766';--k-accent:#b5481d;--k-well:#fff8ec;--k-wr:8px;--k-edge:#6b3a1a;--k-mr:4px;--k-sel:#8a4a14;--k-font:inherit}
/* Options: "Pieces" and "Card look", each row at least 44px tall. */
#settings .tray-choice{border:0;padding:0;margin:0 0 12px;min-width:0}#settings .tray-choice legend{font-weight:700;padding:0;margin:0 0 2px}#settings .tray-choice label{min-height:44px;margin:0}
#settings .skin-swatch{width:20px;height:28px;flex:none;border-radius:5px;border:1px solid #0003;background:var(--k-texture),var(--k-bg)}
/* Short cards (a 64px tray, reduce motion, or both): the frame band thins, the corner symbols shrink into the corners and the well takes nearly
   the whole card, so every piece keeps squares of at least 11px. The pieces sit centred, so the corner symbols land in the well's empty corners. */
#tray.cards.compact .pip{font-size:9px;z-index:1}#tray.cards.compact .pip.a{left:calc(var(--k-inset) + 3px);top:calc(var(--k-inset) + 3px)}#tray.cards.compact .pip.b{right:calc(var(--k-inset) + 3px);bottom:calc(var(--k-inset) + 3px)}
#tray.cards.compact .well{left:calc(var(--k-inset) + 3px);right:calc(var(--k-inset) + 3px);top:calc(var(--k-inset) + 3px);bottom:calc(var(--k-inset) + 3px)}
#tray.cards.compact .frame::before,#tray.cards.compact .frame::after{display:none}
#tray.cards.compact .mini{--fit:calc((100cqh - 2px - (var(--rows,1) - 1)*3px)/var(--rows,1));width:clamp(6px,min(23cqw,var(--fit)),19px);height:clamp(6px,min(23cqw,var(--fit)),19px)}

/* PLAN 0023: the account screens. One full-screen layer, sized to what the keyboard leaves visible. Look approved in .local/mockups/account-screens.html. */
#accountScreen{position:fixed;inset:0 0 auto 0;height:100dvh;z-index:90;background:#f8f4ee;color:#51394f;line-height:1.4;--line:#d7cbd3;--paper:#fffaf5;--lilac:#eee5f3;--soft:#665463}
#accountScreen .ac-screen{display:flex;flex-direction:column;height:100%;max-width:510px;margin:auto;min-width:0}
#accountScreen .ac-scroll{flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto;padding:12px max(16px,env(safe-area-inset-right,0px)) 20px max(16px,env(safe-area-inset-left,0px));scroll-padding:16px}
#accountScreen .center{display:flex;flex-direction:column;justify-content:center;text-align:center}
#accountScreen p{overflow-wrap:anywhere}
.ac-top{flex:none;display:grid;grid-template-columns:minmax(64px,auto) minmax(0,1fr) minmax(64px,auto);align-items:center;gap:6px;padding:max(8px,env(safe-area-inset-top,0px)) 10px 8px;border-bottom:1px solid #e3d8da}
.ac-top h1{margin:0;font-size:1.25rem;line-height:1.2;text-align:center;overflow-wrap:anywhere}
.ac-top button{min-height:44px;padding:8px 12px;border:1px solid var(--line);border-radius:16px;background:var(--paper)}
.ac-perch{display:flex;align-items:flex-end;gap:10px;min-height:76px;margin:0 0 12px;padding:8px 12px 0;border-radius:18px;background:linear-gradient(#e2efeb 72%,#cddfd0 72%)}
.ac-perch svg{flex:none;width:72px;height:72px;margin-bottom:-2px}
.ac-perch p{margin:0 0 12px;font-weight:600;line-height:1.3;align-self:center}
.ac-field{margin:0 0 12px;min-width:0}
.ac-field label{display:block;margin:0 0 4px;font-weight:700}
.ac-field input{display:block;width:100%;min-height:44px;padding:9px 12px;border:1px solid #9c8a98;border-radius:12px;background:#fff;color:inherit;font:inherit;font-size:max(1rem,16px)}
.ac-hint{margin:4px 0 0;font-size:.875rem;color:var(--soft);line-height:1.35}
.ac-err{margin:4px 0 0;font-size:.875rem;color:#7e3c2c;font-weight:700;line-height:1.35}
.ac-field.bad input{border:2px solid #7e3c2c}
.ac-pw{display:flex;gap:6px}.ac-pw input{flex:1 1 0;min-width:0}
.ac-pw button{flex:none;min-height:44px;min-width:64px;padding:6px 10px;border:1px solid var(--line);border-radius:12px;background:var(--lilac);font-weight:700}
.ac-q{margin:0 0 12px;padding:12px;border:2px solid #51394f;border-radius:16px;background:var(--paper)}
.ac-q p{margin:0 0 8px;font-weight:700}.ac-q div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.ac-q button{min-height:44px;border:1px solid var(--line);border-radius:14px;background:var(--lilac);font-weight:700}
.ac-check{display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 10px;margin:0;border:1px solid var(--line);border-radius:12px;background:var(--paper);font-weight:700;cursor:pointer}
.ac-check input{flex:none;width:24px;height:24px;margin:0;accent-color:#715573}
.ac-links{margin:4px 0 12px;padding:0;list-style:none}
.ac-links a{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;padding:6px 10px;color:#51394f;font-weight:700;text-underline-offset:3px;border-bottom:1px solid #e3d8da}
.ac-links svg{flex:none;width:18px;height:18px;fill:none;stroke:#51394f;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ac-human{display:grid;justify-items:center;gap:4px;margin:0 auto 12px;min-height:65px;text-align:center}
.ac-human-note{margin:0;font-weight:700;font-size:.875rem}
.ac-retry{min-height:44px;padding:6px 12px;border:1px solid var(--line);border-radius:12px;background:var(--lilac);font-weight:700}
.ac-notice{margin:0 0 12px;padding:10px 12px;border-left:4px solid #7e3c2c;border-radius:6px 12px 12px 6px;background:#f9e9e2;font-weight:600;font-size:.875rem}
.ac-notice.good{border-color:#2b7268;background:#e4efea}
.ac-textrow{display:flex;align-items:center;justify-content:center;min-height:44px;width:100%;padding:6px 8px;border:0;background:none;color:#51394f;font-size:max(.9375rem,15px);font-weight:700;text-decoration:underline;text-underline-offset:3px;text-align:center}
.ac-bar{flex:none;padding:8px 16px calc(8px + env(safe-area-inset-bottom,0px));background:#f8f4ee;border-top:1px solid #e3d8da;box-shadow:0 -4px 12px #51394f14}
.ac-go{display:block;width:100%;min-height:52px;padding:8px 14px;border:1px solid #51394f;border-radius:16px;background:#51394f;color:#fffaf5;font-size:1.125rem;font-weight:700}
.ac-go:disabled{background:#e7dfdf;color:#51394f;border-color:#d7cbd3;cursor:default}
.ac-plain{display:block;width:100%;min-height:48px;margin-top:8px;padding:8px 14px;border:1px solid var(--line);border-radius:16px;background:var(--paper);font-weight:700}
.ac-danger{display:block;width:100%;min-height:48px;margin-top:8px;padding:8px 14px;border:1px solid #7e3c2c;border-radius:15px;background:#fffaf5;color:#7e3c2c;font-weight:700}
.ac-danger:disabled{background:#e7dfdf;color:#51394f;border-color:#d7cbd3}
#accountScreen .big svg{width:clamp(110px,34vw,150px);height:auto;margin:0 auto 8px;display:block}
#accountScreen .big h1{margin:0 0 8px;font-size:1.5rem;line-height:1.2}#accountScreen .big p{margin:0 0 14px;line-height:1.45}
.ac-lead{font-size:1.25rem;font-weight:700}.ac-lead-plain{margin:0 0 12px}.ac-small{margin:0;font-size:max(.875rem,14px)}
.ac-h{margin:8px 0 4px;font-size:1.5rem;line-height:1.2;font-weight:800}
.ac-gamecard{display:grid;gap:10px;margin:0 0 12px;padding:14px;border:1px solid var(--line);border-radius:20px;background:var(--paper);box-shadow:0 3px 0 #ebe1e4}
.ac-gamecard h2{margin:0;font-size:1rem;font-weight:700}
.ac-gamecard .nums{margin:0;font-size:1.375rem;font-weight:800;line-height:1.25}
.ac-gamecard button{min-height:48px;padding:8px 12px;border:1px solid #51394f;border-radius:15px;background:var(--lilac);font-weight:700}
.ac-coin{display:inline-block;width:.7em;height:.7em;margin:0 .25em 0 .1em;border-radius:50%;background:#e2b94e;box-shadow:inset 0 -1px #b88d2a}
.ac-scrim{flex:1;display:grid;align-items:center;padding:12px;background:#51394f66;overflow-y:auto}
.ac-dialog{padding:20px;border:1px solid var(--line);border-radius:22px;background:var(--paper);box-shadow:0 12px 55px #51394f44;min-width:0}
.ac-dialog h1{margin:0 0 10px;font-size:1.4375rem;line-height:1.2}.ac-dialog p{margin:0 0 10px;font-size:max(.875rem,14px);line-height:1.5}
#saveOnlineRow{display:flex;align-items:center;gap:10px;width:100%;min-height:56px;margin-top:10px;padding:8px 14px;border:1px solid #bda76a;border-radius:15px;background:#fbf0cf;text-align:left;color:#51394f}
#saveOnlineRow svg{flex:none;width:28px;height:28px;fill:none;stroke:#51394f;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
#saveOnlineRow b{display:block}#saveOnlineRow span span{display:block;font-size:.875rem;line-height:1.3}
#onlineTip{margin:10px 0 0;padding:10px 12px;border-radius:14px;background:#eee5f3;font-size:.875rem;font-weight:600}
#accountOptions{display:grid;gap:8px;margin:0 0 8px}#accountOptions p{margin:0}#accountOptions button{min-height:44px}
#accountStatus{font-size:.875rem}
/* The little friends (PLAN 0025): five characters under the cards. Chips overhang 4 px into the 4 px gap, so they never touch the cards. */
#powerUps{display:flex;flex-wrap:wrap;gap:4px;min-height:44px;margin-top:4px;--r-face:#fffaf5;--r-text:#51394f;--r-line:#d7cbd3;--r-off:#f3eeea;--r-offtext:#5c4a59;--r-rad:14px;--r-well:transparent}
#powerUps[data-skin=midnight]{--r-face:#1f1d33;--r-text:#f6ecd2;--r-line:#c9a44c;--r-off:#17152a;--r-offtext:#e9dfc6;--r-well:#fff6e8}
#powerUps[data-skin=jewel]{--r-face:#3b1f6b;--r-text:#fff6e8;--r-line:#e2b94e;--r-off:#2b1750;--r-offtext:#f4ead8;--r-well:#fff6e8}
#powerUps[data-skin=retro]{--r-face:#14162b;--r-text:#dffaff;--r-line:#39e6ff;--r-off:#0b0c1a;--r-offtext:#dffaff;--r-rad:4px;--r-well:#fff6e8}
#powerUps[data-skin=autumn]{--r-face:#fbf0dc;--r-text:#5c2f12;--r-line:#b5651d;--r-off:#f4e6cc;--r-offtext:#5c2f12}
#powerUps button{position:relative;flex:1 1 auto;min-width:44px;min-height:44px;padding:0 3px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:0;line-height:1;background:var(--r-face);color:var(--r-text);border:1px solid var(--r-line);border-radius:var(--r-rad)}
#powerUps button[hidden]{display:none}
#powerUps .pu-icon{display:block;width:26px;height:26px;flex:none;border-radius:50%;background:var(--r-well)}
#powerUps .pu-icon svg{display:block;width:100%;height:100%;overflow:visible}
#powerUps .pu-name,#powerUps .pu-help-name{display:block;font-size:11px;line-height:12px;font-weight:800;white-space:nowrap;padding-bottom:3px}
#powerUps small{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#powerUps .pu-line,#powerUps .pu-mark{position:absolute;top:-4px;right:-1px;z-index:1;min-width:16px;height:15px;padding:0 3px;display:flex;align-items:center;gap:2px;font-size:10px;line-height:15px;font-weight:800;border-radius:8px;background:#fff3d0;color:#51394f;box-shadow:0 0 0 1px #51394f2e;white-space:nowrap}
#powerUps .pu-mark:not([data-mark]),#powerUps .pu-mark[data-mark='']{display:none}
#powerUps .pu-mark::after{content:attr(data-text)}
#powerUps button.pu-price .pu-line::before{content:'';display:inline-block;flex:none;width:7px;height:7px;border-radius:50%;background:#e2b94e;box-shadow:inset 0 -1px #b88d2a}
#powerUps .pu-mark[data-mark=short]::before{content:'';display:inline-block;flex:none;width:7px;height:7px;border-radius:50%;background:#e2b94e;box-shadow:inset 0 -1px #b88d2a}
#powerUps .pu-mark[data-mark^=token]::before{content:'';display:inline-block;flex:none;width:7px;height:7px;background:#7fc5bd;transform:rotate(45deg);border-radius:1px}
#powerUps .pu-mark[data-mark=tick]{background:#e7dfdf;padding:0 2px}
#powerUps .pu-mark[data-mark=tick] svg{display:block;width:11px;height:11px}
#powerUps .pu-mark[data-mark=short],#powerUps .pu-mark[data-mark=token-short]{background:#f7dfd8;color:#7a2f20}
/* A reason stays in the page and the spoken label; the chip shows only a price or a free word. */
#powerUps button.pu-reason .pu-line,#powerUps button[aria-pressed=true] .pu-line{top:auto;right:auto;min-width:0;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);background:none;box-shadow:none}
#powerUps button[aria-disabled=true],#powerUps button:disabled{background:var(--r-off);border-style:dashed;color:var(--r-offtext);cursor:default}
#powerUps button:disabled{pointer-events:none}
#powerUps button[aria-disabled=true] .pu-icon svg,#powerUps button:disabled .pu-icon svg{filter:saturate(.45)}
#powerUps button.pu-gift{background:#f5e3a6;border:1px solid #8a6514;color:#51394f;box-shadow:0 0 0 2px #f5e3a6,0 0 0 3px #8a6514}
#powerUps button.pu-gift .pu-icon{background:transparent}
#powerUps button[aria-pressed=true]{background:#51394f;color:#fffaf5;border:1px solid #51394f}
#powerUps button[aria-pressed=true] .pu-icon{background:#fffaf5}
#powerUps button.pu-tap,#powerUps button.pu-refuse{box-shadow:0 0 0 3px #e2b94e}
@media(prefers-reduced-motion:no-preference){
 body:not(.reduced) #powerUps button.pu-tap,body:not(.reduced) #powerUps button.pu-refuse{box-shadow:none}
 body:not(.reduced) #powerUps button.pu-gift.pu-tap,body:not(.reduced) #powerUps button.pu-gift.pu-refuse{box-shadow:0 0 0 2px #f5e3a6,0 0 0 3px #8a6514}
 body:not(.reduced) #powerUps button.pu-tap{animation:puWiggle .42s cubic-bezier(.3,.7,.4,1)}
 body:not(.reduced) #powerUps button.pu-tap .pu-icon{animation:puHop .42s ease-out}
 body:not(.reduced) #powerUps button.pu-refuse{animation:puShake .32s linear}
 body:not(.reduced) #powerUps button[aria-pressed=true] .pu-icon svg{animation:puBreathe 1.3s ease-in-out infinite}
}
@keyframes puWiggle{20%{transform:rotate(-5deg)}45%{transform:rotate(4deg)}70%{transform:rotate(-2deg)}}
@keyframes puHop{40%{transform:translateY(-3px)}}
@keyframes puShake{25%{transform:translateX(-2px)}75%{transform:translateX(2px)}}
@keyframes puBreathe{50%{transform:scale(1.1)}}
@media(max-width:340px){#powerUps button{min-width:44px;padding:0 1px}#powerUps .pu-name,#powerUps .pu-help-name{font-size:10px}}
/* The top strip (R3): Arcade keeps the height Mallow help's wrapped wording gave it, so the board does not move. */
@media(min-width:341px) and (max-width:400px){#playScreen.arcade-goal .companion{min-height:78px}}
/* The question (PLAN 0025 3A): a small paper bubble above the row. Its holder has no height, so nothing moves. */
#puAskHold{position:relative;height:0;z-index:30}
#puAsk{position:absolute;left:0;bottom:4px;width:max-content;min-width:180px;touch-action:none;padding:5px 10px 7px;background:#fffaf5;color:#51394f;border-radius:20px;box-shadow:0 0 0 2px #51394f,0 3px 0 2px #51394f;transform-origin:var(--tail,50%) 100%}
#puAsk::after{content:'';position:absolute;left:var(--tail,50%);bottom:-9px;width:13px;height:13px;margin-left:-6.5px;background:#fffaf5;border:solid #51394f;border-width:0 2px 2px 0;border-bottom-right-radius:3px;transform:rotate(45deg)}
#puAsk .ask-head{display:flex;align-items:center;gap:6px;margin-bottom:3px}
#puAsk.flip .ask-head{flex-direction:row-reverse;text-align:right}
#puAsk .ask-face{flex:none;width:28px;height:28px}
#puAsk .ask-face svg{display:block;width:100%;height:100%;overflow:visible}
#puAsk .ask-text{font-size:14px;line-height:1.15}
#puAsk .ask-text b{font-weight:800}
#puAsk .ask-btns{display:flex;flex-wrap:wrap;gap:24px;position:relative;z-index:1}
#puAsk.flip .ask-btns{justify-content:flex-end}
#puAsk .ask-btns button{min-width:68px;min-height:44px;padding:0 10px;border-radius:16px;font-size:15px;font-weight:800;border:2px solid #51394f;background:#fffaf5;color:#51394f;touch-action:manipulation}
#puAsk .ask-btns [data-a=yes]{background:#e2b94e;box-shadow:0 3px 0 #b88d2a}
#puAsk .ask-btns [data-a=yes][aria-disabled=true]{background:#efe7df;border-color:#b5a7b1;color:#6b5a69;box-shadow:none}
@media(prefers-reduced-motion:no-preference){
 body:not(.reduced) #puAsk{animation:puAskPop .2s cubic-bezier(.3,1.5,.5,1)}
 body:not(.reduced) #puAsk .ask-btns .nudge{animation:puShake .24s linear}
 body:not(.reduced) #puAsk .ask-btns [data-a=yes]{transition:background-color .12s}
}
@keyframes puAskPop{from{opacity:0;transform:scale(.7) translateY(6px)}}
#puAsk .ask-btns.tight button{min-width:64px;padding:0 4px}
#puAsk .ask-btns.swap{flex-direction:row-reverse}
#puAsk .ask-btns.far{justify-content:flex-end}
#puAsk.flip .ask-btns.far{justify-content:flex-start}
#puAsk .ask-btns.swap.far{justify-content:flex-end}
/* Tap to Install (docs/plan/0027-tap-to-install/PLAN.md). I1: with the block, Home's scene and Cubikin shrink so Arcade stays on screen. */
#homeScreen.has-install .home-scene{height:clamp(96px,21svh,178px);min-height:0;margin:8px 0 0;background:linear-gradient(#e2efeb 72%,#cddfd0 72%)}
#homeScreen.has-install .home-cubikin{width:clamp(84px,16svh,136px);height:clamp(84px,16svh,136px);max-height:none}
#homeScreen.has-install #cubikinButton{height:100%;padding:0;margin-bottom:-5px}
#homeScreen.has-install .scene-flower{font-size:30px;bottom:6px;right:18px}
#homeScreen.has-install .modes{margin-top:6px}
.install-wrap{position:relative;z-index:1;margin-top:-1px}
.install-block{display:flex;align-items:center;gap:12px;width:100%;min-height:84px;padding:10px 14px;border:3px solid #51394f;border-radius:22px;background:#f6cf6a;color:#51394f;box-shadow:0 6px 0 #51394f;text-align:left;transition:transform .08s,box-shadow .08s}
.install-block:active{transform:translateY(5px);box-shadow:0 1px 0 #51394f}
.install-art{flex:none;display:block;width:60px;height:60px;line-height:0}.install-art svg{border-radius:14px}
.install-words{min-width:0}.install-words b{display:block;font-size:1.6rem;line-height:1.05;letter-spacing:-.5px}.install-words span{display:block;font-size:.84rem;margin-top:3px}
@container(max-width:250px){.install-block{flex-direction:column;align-items:flex-start}.install-words b{overflow-wrap:anywhere}}
.install-later{display:block;min-height:44px;margin:7px auto 0;padding:0 16px;border:0;background:none;font-size:.875rem;text-decoration:underline;text-underline-offset:3px}
#cubikinButton.hop{animation:install-hop .55s ease-out .35s 2 both}
@keyframes install-hop{35%{transform:translateY(-14px)}70%{transform:translateY(0) scale(1.05,.95)}100%{transform:none}}
.install-row{display:flex;align-items:center;gap:10px;padding:10px;margin:0 0 12px;border-radius:15px;background:#fffaf5}
.install-row-art{flex:none;display:block;width:40px;height:40px;line-height:0}.install-row-art svg{border-radius:9px}
.install-row-words{flex:1;min-width:0;font-size:.875rem;line-height:1.25}
#settings .install-row button{flex:none;min-height:44px;padding:0 14px;border:1px solid #d7cbd3;border-radius:14px;background:#fffaf5;font-weight:700}
.install-sheet{width:100%;max-width:510px;max-height:92svh;margin:auto auto 0;padding:0;border:0;border-radius:24px 24px 0 0;background:#fffaf5;color:#51394f;overflow:auto;overflow-wrap:anywhere}
.install-sheet::backdrop{background:#51394f66}
.install-sheet[open]:not(.calm){animation:install-rise .22s ease-out}
@keyframes install-rise{from{transform:translateY(40px);opacity:.3}}
#installSheetBox{padding:18px 16px calc(14px + env(safe-area-inset-bottom,0px));outline:0}
.install-sheet h2{margin:0 0 4px;font-size:1.4rem;line-height:1.15;letter-spacing:-.3px}
.install-sheet .lead{margin:0;font-size:.9rem;line-height:1.4}
.install-sheet .sheet-actions{display:grid;gap:8px;margin-top:14px}
.install-sheet .sheet-btn{min-height:48px;padding:8px 14px;border:1px solid #d7cbd3;border-radius:15px;background:#eee5f3;font-weight:600;font-size:1rem}
.install-sheet .sheet-btn.main{background:#51394f;border-color:#51394f;color:#fffaf5}
.install-sheet .small-note{margin:10px 0 0;padding:10px 12px;border-radius:14px;background:#eef6f2;font-size:.82rem;line-height:1.4}
.install-sheet #installAddress{user-select:all;-webkit-user-select:all;font-weight:700}
.install-sheet .steps{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:12px}
.install-sheet .step{display:grid;grid-template-columns:30px minmax(0,1fr);gap:8px;align-items:start}
.install-sheet .num{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#f6cf6a;border:2px solid #51394f;font-weight:800;font-size:.875rem}
.install-sheet .step p{margin:0;font-size:.95rem;line-height:1.3;font-weight:600;padding-top:4px}
.install-sheet .step small{display:block;font-weight:400;font-size:.82rem;line-height:1.35;margin-top:2px}
.install-sheet .pic{margin-top:7px;border:1px solid #d7cbd3;border-radius:14px;background:#fff;overflow:hidden;font-size:.82rem}
.install-sheet .pic-bar{display:flex;align-items:center;gap:6px;padding:7px 8px}
.install-sheet .pic-url{flex:1;min-width:0;text-align:center;padding:5px;border-radius:14px;background:#f0edef;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.install-sheet .pic-icon{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%}
.install-sheet .pic svg[viewBox="0 0 24 24"]{flex:none;width:22px;height:22px;fill:none;stroke:#51394f;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.install-sheet .ring{background:#fbe6ae;box-shadow:0 0 0 3px #e2a72e}
.install-sheet .list-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 11px;border-top:1px solid #eee8ec}
.install-sheet .list-row:first-child{border-top:0}
.install-sheet .list-row.ring{background:none;box-shadow:inset 0 0 0 3px #e2a72e;font-weight:700}
.install-sheet .muted{color:#756575}
.install-sheet .add-head{display:flex;justify-content:space-between;align-items:center;padding:6px 8px 6px 11px;border-bottom:1px solid #eee8ec;font-weight:700}
.install-sheet .add-head span:last-child{padding:5px 13px;border-radius:14px;color:#51394f}
.install-sheet .add-body{display:flex;align-items:center;gap:10px;padding:10px 11px}
.install-sheet .add-body svg{flex:none;border-radius:10px}
.install-sheet .switch{flex:none;position:relative;width:36px;height:20px;border-radius:12px;background:#7fc5bd}.install-sheet .switch::after{content:"";position:absolute;right:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#fff}
.install-sheet .homescreen{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:12px;background:#d5eae3}
.install-sheet .homescreen div{min-width:0;text-align:center;font-size:.75rem}
.install-sheet .homescreen svg,.install-sheet .homescreen i{display:block;width:44px;height:44px;margin:0 auto 3px;border-radius:11px}.install-sheet .homescreen i{background:#ffffff99}
.install-toast{position:fixed;inset:auto 13px calc(16px + env(safe-area-inset-bottom,0px));z-index:30;width:auto;max-width:484px;margin:0 auto;padding:12px 14px;border:0;border-radius:15px;background:#51394f;color:#fffaf5;font-size:.875rem;line-height:1.35;pointer-events:none}
@media(prefers-reduced-motion:reduce){#cubikinButton.hop,.install-sheet[open]{animation:none}.install-block{transition:none}}
/* The longer name at very large text on a small phone: the title sits on its own line, a little smaller, and stays on screen. */
@container(max-width:260px){#homeScreen>header{flex-wrap:wrap}#homeTitle{font-size:26px}}

/* Options: the boom box and a tidy list with no boxes (PLAN 0028). Approved look: .wiki/mockups/boombox-options.html. Keep this file free of outside addresses: the security policy forbids them. */
#runDialog #settings{background:none;padding:0;border:0;margin:0}
#settings .opt-list,#settings .tray-choice,#settings .opt-links{margin:16px 4px 0}
#settings .opt-list label,#settings .tray-choice label{min-height:44px;gap:10px;margin:0;line-height:1.25}
#settings .opt-list input,#settings .tray-choice input{width:22px;height:22px;accent-color:#715573;flex:none;margin:0}
#settings .tray-choice{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(9rem,100%),1fr));column-gap:8px}
#settings .tray-choice legend{padding:0 0 2px}
#settings .install-row{display:flex;align-items:center;gap:10px;min-height:44px;padding:0;margin:0;border:0;background:none}
#settings .install-row-words{flex:1;min-width:0}
#settings .opt-links>button,#settings .opt-links>a,#accountOptions button,#settings #installRowButton{display:flex;align-items:center;justify-content:flex-start;width:100%;min-height:44px;margin:0;padding:6px 0;border:0;border-radius:4px;background:none;color:#51394f;font:inherit;font-weight:600;line-height:1.25;text-align:left;box-shadow:none;text-decoration:underline;text-decoration-color:#b9a0d7;text-decoration-thickness:2px;text-underline-offset:4px}
#settings #installRowButton{width:auto;flex:none}
#settings .opt-links>[hidden],#accountOptions [hidden]{display:none}
#settings #accountOptions{display:flex;flex-direction:column;margin:0}#accountName{order:-2}#accountOpen,#accountSignInAgain{order:-1}#accountOptions p{font-size:.8125rem;line-height:1.4;color:#665463;margin:6px 0}#accountOptions p:empty{display:none}
#settings #adsLine{font-size:.8125rem;margin:6px 0;font-weight:400;color:#665463}
#settings #localNote{margin:10px 4px 0;font-size:.8125rem;line-height:1.4;color:#665463}
#audioMuteNote{margin:10px 4px 0;color:#835341}
#profileDetails{margin:14px 4px 0;font-size:.8125rem;color:#665463}#runDialog #profileDetails p{margin:0;font-size:.8125rem;line-height:1.5}
#dialogTitle:focus{outline:none}
#settings{font-size:1rem}#settings .opt-links>button,#settings .opt-links>a,#accountOptions button,#settings #installRowButton,#settings .opt-list label,#settings .tray-choice label,#settings .tray-choice legend{font-size:1rem}
#runDialog:has(#settings:not([hidden])){padding:18px 14px 16px}
#runDialog:has(#settings:not([hidden])) h2{margin:0;font-size:1.45rem}
#runDialog:has(#settings:not([hidden])) #dialogText{margin:2px 0 8px;font-size:.8125rem;line-height:1.4;color:#665463}
#runDialog:has(#settings:not([hidden])) #dialogActions button{display:block;width:100%;min-height:44px;margin-top:14px;border:0;border-radius:15px;background:#51394f;color:#fffaf5;font-weight:600}
:is(#settings .opt-links>button,#settings .opt-links>a,#accountOptions button,#settings #installRowButton):focus-visible{outline:3px solid #51394f;outline-offset:3px}
#boombox{container-type:inline-size;width:100%;--ink:#2e2230;--plastic:#3b2d3d;--plastic2:#231924;--teal:#7fc5bd;--lilac:#b9a0d7;--coral:#efb399;line-height:1.4}
#boombox .bb-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#boombox .unit{position:relative;padding-top:24px;padding-bottom:7px}
#boombox .handle{position:absolute;top:0;left:17%;right:17%;height:34px;padding:8px 8px 0;border-radius:18px 18px 0 0;background:linear-gradient(180deg,#fff 0,#d9d6dc 16%,#8f8a94 58%,#c9c5cc 100%);-webkit-mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
#boombox .pivot{position:absolute;top:13px;width:24px;height:16px;border-radius:7px 7px 0 0;background:linear-gradient(#57465a,#2e2230);box-shadow:inset 0 1px #ffffff40}
#boombox .pivot.l{left:calc(17% - 8px)}#boombox .pivot.r{right:calc(17% - 8px)}
#boombox .shell{position:relative;border-radius:20px 20px 24px 24px;padding:6px;background:linear-gradient(180deg,#54425a 0,var(--plastic) 12%,var(--plastic2) 100%);box-shadow:inset 0 2px #ffffff30,inset 0 -7px #150e16,inset 2px 0 #ffffff12,inset -2px 0 #00000040,0 16px 22px -8px #51394f88}
#boombox .foot{position:absolute;bottom:0;width:44px;height:11px;border-radius:0 0 9px 9px;background:#150e16}#boombox .foot.l{left:13%}#boombox .foot.r{right:13%}
#boombox .fascia{border-radius:15px 15px 6px 6px;padding:6px 8px 8px;color:var(--ink);background:repeating-linear-gradient(90deg,#ffffff1f 0 1px,#0000 1px 3px),linear-gradient(180deg,#f7f5f8 0,#cfccd3 45%,#aeaab3 55%,#dcd9df 100%);box-shadow:inset 0 1px #fff,inset 0 -1px #6f6a75,0 2px 3px #0009}
#boombox .topline{display:flex;align-items:center;gap:6px;min-height:22px;flex-wrap:wrap}
#boombox .badge{display:inline-flex;align-items:center;gap:5px;font-weight:900;font-style:italic;font-size:1rem;letter-spacing:.5px;line-height:1;font-family:'Segoe UI Black','Arial Black',ui-rounded,sans-serif;text-shadow:0 1px #ffffffb0}
#boombox .cubes{display:inline-grid;grid-template-columns:repeat(2,7px);gap:1px}#boombox .cubes i{width:7px;height:7px;border-radius:2px;box-shadow:inset 0 -2px #0002}
#boombox .cubes i:nth-child(1){background:var(--teal)}#boombox .cubes i:nth-child(2){background:var(--lilac)}#boombox .cubes i:nth-child(3){background:var(--coral);grid-column:1/-1;width:15px}
#boombox .model{font-size:.6875rem;font-weight:700;color:#3f3342;font-style:italic}
#boombox .state{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:.6875rem;font-weight:700;color:#3f3342}
#boombox .lamp{width:10px;height:10px;border-radius:50%;background:#6d5a62;box-shadow:inset 0 1px 2px #0008,0 1px #fff9;flex:none;transition:background .12s,box-shadow .12s}
#boombox.on .lamp{background:#ff6d5c;box-shadow:inset 0 -1px 1px #b4553f,0 0 7px 2px #ff6d5ccc}
#boombox .tuner{position:relative;height:28px;margin-top:5px;border-radius:7px;overflow:hidden;background:repeating-linear-gradient(90deg,#51394f 0 1.5px,#0000 1.5px 20px) 9px 100%/calc(100% - 18px) 11px no-repeat,repeating-linear-gradient(90deg,#51394f 0 .8px,#0000 .8px 5px) 9px 100%/calc(100% - 18px) 6px no-repeat,linear-gradient(#fff6dc,#f6e4b6);box-shadow:inset 0 2px 3px #6b4d2e77,inset 0 0 0 1.5px #3f3342}
#boombox .travel{position:absolute;top:0;bottom:0;left:9px;right:9px;pointer-events:none}
#boombox .needle{position:absolute;inset:0;transition:transform .55s cubic-bezier(.3,1.25,.5,1)}
#boombox .needle::after{content:'';position:absolute;top:2px;bottom:2px;left:-1.5px;width:3px;border-radius:2px;background:#d24a3a;box-shadow:1px 0 1px #0004}
#boombox .mid{display:grid;grid-template-columns:minmax(0,31fr) minmax(0,38fr) minmax(0,31fr);grid-template-rows:auto 1fr;grid-template-areas:"sl vu sr" "sl deck sr";gap:6px;margin-top:6px}
#boombox .sl{grid-area:sl}#boombox .sr{grid-area:sr}#boombox .vu{grid-area:vu}#boombox .deck{grid-area:deck}
#boombox .spk{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;gap:4px;overflow:hidden;padding:6px 4px;border-radius:12px;min-height:100%;background:#2a1f2d;box-shadow:inset 0 0 0 2px #8c7d90,inset 0 3px 7px #000}
#boombox .spk::after{content:'';position:absolute;inset:2px;border-radius:10px;pointer-events:none;background:linear-gradient(90deg,#160f17 0 1.5px,#0000 1.5px) 0 0/5px 5px,linear-gradient(180deg,#160f17 0 1.5px,#0000 1.5px) 0 0/5px 5px,linear-gradient(135deg,#ffffff2e,#0000 42%)}
#boombox .cone{position:relative;width:88%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 50%,#fff 0 7%,#e2dee6 14%,#8f8796 21%,#4a3d50 22.5%,#8a7a90 26%,#6d5d74 45%,#94859b 58%,#4a3d50 61%,#3a2e3f 63%,#f1eff3 65%,#fff 67%,#9b96a1 70%);box-shadow:0 0 0 1px #000}
#boombox .tw{width:38%;aspect-ratio:1;min-width:22px;border-radius:50%;background:radial-gradient(circle at 42% 38%,#fff 0 12%,#b2acb8 24%,#4e4152 34%,#2c222f 60%,#d6d2da 66%,#fff 74%,#8c8791 80%);box-shadow:0 0 0 1px #000;flex:none}
#boombox .vu{display:grid;grid-template-columns:1fr 1fr;gap:4px}#boombox .vu svg{display:block;width:100%;height:auto;border-radius:7px;box-shadow:inset 0 0 0 1.5px #000;background:#120c13}
#boombox .deck{position:relative;border-radius:10px;padding:5px;background:linear-gradient(#150e16,#2b202d);box-shadow:inset 0 0 0 1.5px #6a5a6e,inset 0 2px 4px #000;display:flex}
#boombox .deck::after{content:'';position:absolute;inset:5px;border-radius:6px;pointer-events:none;background:linear-gradient(118deg,#ffffff40 0 13%,#fff0 13.5% 30%,#ffffff18 30.5% 37%,#fff0 37.5%)}
#boombox .tape{flex:1;min-width:0;display:flex;flex-direction:column;border-radius:6px;padding:4px 4px 3px;background:linear-gradient(#fff8e8,#ecdfc6);box-shadow:inset 0 -2px #cdbd9f}
#boombox .label{flex:1;display:flex;flex-direction:column;justify-content:center;border-radius:3px;background:#fffdf7;overflow:hidden;box-shadow:0 0 0 1px #d9c9a8}
#boombox .stripes{height:7px;flex:none;background:linear-gradient(180deg,var(--teal) 0 33%,var(--lilac) 33% 66%,var(--coral) 66%)}
#boombox .title{display:flex;flex:1;align-items:center;justify-content:center;min-height:2.35em;padding:1px 3px;text-align:center;color:#2e2230;font-family:'Segoe Print','Bradley Hand','Marker Felt',ui-rounded,cursive;font-size:.8125rem;font-weight:700;line-height:1.08;overflow-wrap:anywhere}
#boombox .reels{display:block;width:100%;height:auto;max-height:44px;margin-top:3px;flex:none;border-radius:5px}
#boombox .reels .spin,#boombox .reels .pack{transform-box:fill-box;transform-origin:center}
#boombox .keys{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;margin-top:6px;padding:5px 5px 11px;border-radius:9px;background:linear-gradient(#0c070d,#241a26);box-shadow:inset 0 3px 5px #000,0 1px #ffffff1f}
#boombox .key{--cap:#f1eef3;--edge:#a7a2ad;--skirt:#6e6973;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-width:44px;min-height:3.65rem;margin:0;padding:6px 1px 5px;color:#2e2230;font-size:.6875rem;font-weight:800;line-height:1.1;border:0;border-radius:5px 5px 8px 8px;cursor:pointer;background:linear-gradient(180deg,#0000 0,#00000012 18%,#0000 40%,#ffffff55 86%,#0000 100%),var(--cap);box-shadow:inset 0 -3px var(--edge),inset 0 1px #fff8,0 6px 0 var(--skirt),0 7px 2px #000;transform-origin:50% 0;transform:perspective(260px) rotateX(0);transition:transform .2s cubic-bezier(.3,1.7,.45,1),box-shadow .2s ease-out;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
#boombox .key svg{width:22px;height:18px;fill:currentColor;display:block;flex:none}
#boombox .key.play{--cap:var(--teal);--edge:#57a097;--skirt:#34716a}#boombox .key.stop{--cap:var(--coral);--edge:#d3896c;--skirt:#9a5a42}#boombox .key.shuf{--cap:var(--lilac);--edge:#9379b5;--skirt:#634c80}
#boombox .key:active{transform:perspective(260px) rotateX(-13deg) translateY(4px);box-shadow:inset 0 -3px var(--edge),inset 0 3px 3px #0003,0 2px 0 var(--skirt),0 2px 1px #000;transition-duration:.05s}
#boombox .key[aria-pressed=true]{transform:perspective(260px) rotateX(-10deg) translateY(3px);box-shadow:inset 0 -3px var(--edge),inset 0 3px 4px #0004,0 3px 0 var(--skirt),0 3px 1px #000;transition-duration:.07s}
#boombox .key:focus-visible{outline:3px solid #fffaf5;outline-offset:1px;z-index:2;box-shadow:inset 0 -3px var(--edge),0 6px 0 var(--skirt),0 0 0 7px #2e2230}
#boombox .vol{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:8px;padding:7px 6px 8px;border-radius:9px 9px 16px 16px;color:#f8eff3;background:linear-gradient(#150e16,#2b202d);box-shadow:inset 0 2px 4px #000,0 1px #ffffff1a}
#boombox .ch{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:0;text-align:center}
#settings #boombox .ch label{display:block;min-height:0;font-size:.8125rem;font-weight:700;line-height:1.15}
#boombox .ch output{font-size:.8125rem;font-weight:800;font-variant-numeric:tabular-nums;color:#ffe39a}
#boombox .slot{position:relative;width:100%;display:flex;justify-content:center;background:repeating-linear-gradient(180deg,#a99fac 0 1.5px,#0000 1.5px 13px) 50% 10px/calc(100% - 20px) calc(100% - 20px) no-repeat}
#boombox .slot::before{content:'';position:absolute;top:0;bottom:0;left:50%;width:66px;margin-left:-33px;background:#1a121c;border-radius:8px}
#boombox .vol input{position:relative;display:block;width:60px;height:124px;margin:0;padding:0;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer;writing-mode:vertical-lr;direction:rtl;touch-action:none}
#boombox .vol input::-webkit-slider-runnable-track{width:12px;height:100%;border-radius:6px;box-shadow:inset 0 2px 3px #000,0 1px #ffffff2e;background:linear-gradient(to top,var(--teal) var(--fill,40%),#0c070d var(--fill,40%))}
#boombox .vol input.fi::-webkit-slider-runnable-track{background:linear-gradient(to top,var(--coral) var(--fill,70%),#0c070d var(--fill,70%))}
#boombox .vol input::-webkit-slider-thumb{-webkit-appearance:none;width:44px;height:32px;margin-left:-16px;border-radius:7px;border:0;background:linear-gradient(180deg,#0000 45%,#d24a3a 45% 55%,#0000 55%),repeating-linear-gradient(180deg,#fff 0 2px,#a8a3ae 2px 4px),#ddd;box-shadow:inset 0 2px #fff,inset 0 -3px #76717c,0 3px 4px #000}
#boombox .vol input::-moz-range-track{width:12px;border-radius:6px;background:#0c070d}
#boombox .vol input::-moz-range-progress{width:12px;border-radius:6px;background:var(--teal)}
#boombox .vol input.fi::-moz-range-progress{background:var(--coral)}
#boombox .vol input::-moz-range-thumb{width:44px;height:32px;border-radius:7px;border:0;background:repeating-linear-gradient(180deg,#fff 0 2px,#a8a3ae 2px 4px)}
#boombox .vol input:focus-visible{outline:3px solid #fffaf5;outline-offset:-1px;border-radius:10px}
@container (max-width:16rem){#boombox .mid{grid-template-columns:minmax(0,1fr) minmax(0,1.22fr) minmax(0,1fr);grid-template-rows:auto auto;grid-template-areas:"sl vu sr" "deck deck deck"}#boombox .cone{width:92%}#boombox .vu{grid-template-columns:1fr;align-content:center}#boombox .model{display:none}#boombox .title{font-size:.9375rem;min-height:1.6em}}
@container (max-width:13rem){#boombox .keys{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:12px}#boombox .key[aria-pressed=true],#boombox .key:active{transform:translateY(3px)}#boombox .state{margin-left:0}}
@container (max-width:8.5rem){#boombox .keys{grid-template-columns:repeat(2,minmax(0,1fr))}#boombox .key.shuf{grid-column:1/-1}}
#boombox.still *,#boombox.still *::before,#boombox.still *::after{transition:none!important;animation:none!important}
@media (prefers-reduced-motion:reduce){#boombox *,#boombox *::before,#boombox *::after{transition:none!important;animation:none!important}}
#settingsButton{-webkit-tap-highlight-color:transparent}