/* BOXXY v476: restore the original transparent disabled desktop Undo treatment. */
/* BOXXY v475: full portrait Zen keypad and clear mobile trophy badges. */
/* BOXXY v474: restore over-medal mobile gold count, enlarge the gold medal, and refresh Static Noise art. */
/* BOXXY v457 — Puzzle Packs exposes the Secret Level Editor on iPad/tablet and desktop, not phones. */
/* BOXXY v449 — rare-character modal portraits use opaque-bound fitting; fixed-character frame warm-up is handled in the renderer. */
/* BOXXY v448 — rare-character modal uses the fixed sprite sheet directly and rare colour keys no longer expose PARTYGOERS. */
/* BOXXY v447 — live Indi/Oli selector previews and super-rare character unlock modal. */
/* BOXXY v446 — hidden FLUFFBALLS family and responsive secret-family tabs. */
/* BOXXY v442 — smooth desktop utility-tray board fitting; Level Maker rotate control and Basement Daily ordering. */
/* BOXXY v441 — release refresh for direct PeerJS/WebRTC /beta gameplay; normal styles unchanged. */
/* BOXXY v439 — keep the desktop board inside the live Undo/Restart boundary as the utility tray opens and closes. */
/* BOXXY v438 — restore the established desktop Full Screen/Zen layout after the v435 utility-tray restructure. */
/* BOXXY v437 — square desktop actions, visible collapsed tray edge and Daily archive streak badge. */
/* BOXXY v412 — cached/paged Daily leaderboard controls and 30-score pagination. */
/* BOXXY v411 — restores established Character Style name typography and prevents arbitrary mid-word wrapping. */
/* BOXXY v325 — board-style default choices sit in a dedicated aligned column; palette wrapping no longer breaks row continuity. */
/* BOXXY v324 — compact crate-art board-style choices with explicit default separation and responsive wrapping. */
/* BOXXY v323 — responsive standard board-style controls in Menu. */
/*
 * BOXXY — Pushbox Puzzle
 * Copyright © 2026 Sam Cornwell. All rights reserved.
 * Personal non-commercial use only. See LICENSE.md.
 * BOXXY v322: Fastest Today uses one consistent stacked leaderboard layout at every screen width.
 * BOXXY v321: Daily puzzle details show the player's stats and highlight their signed-in leaderboard row.
 * BOXXY v320: Daily puzzle-detail modal and compact-card time refinement.
 * BOXXY v317: first-move timers, hundredth-second completion times, and new/returning analytics classification.
 * BOXXY v316: Daily leaderboard adds move counts and improves name/time readability.
 * BOXXY v315: Mouse Control Daily leaderboard eligibility warning.
 * BOXXY v314: mobile typography/readability pass across common player-facing UI.
 * BOXXY v233: secret click-to-move mouse support and box destination planning.
 * BOXXY v227: prevent accidental iPhone/iPad text, icon and image selection while preserving editable fields.
 * BOXXY v166: fifteen dedicated box and target sprite colours.
 * BOXXY v219: Daily completion destination choices.
 * BOXXY v205: shorter mobile Daily Complete modal and single-line heading.
 * BOXXY v203: corrected Daily share emoji, copy-text control and coming-soon wording.
 * BOXXY v202: optically aligned, equally spaced streak and completion badges.
 * BOXXY v201: supplied streak-flame artwork with coded day count inside the flame.
 * BOXXY v196: reliable first-load splash and startup loading gate.
 * BOXXY v195: legal modal, Zen next-level control, lower landscape arrows and mobile music pause.
 */
:root{
  --paper:#efe5d4;--paper2:#f7f0e5;--ink:#171719;--red:#db3b27;--yellow:#e5b32a;--blue:#20539a;--green:#2f8f5b;--line:#cbbfae;
  --cols:9;--rows:9;--ratio:1;--max-cell:76px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--paper);color:var(--ink)}
body{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overscroll-behavior:none;touch-action:manipulation;background:radial-gradient(circle at 25% 10%,rgba(255,255,255,.42),transparent 38%),linear-gradient(180deg,#f4ecdf,#e7dac6)}

/* BOXXY v227 — prevent accidental selection/callouts on touch devices.
   Editable controls and copyable links are deliberately restored below. */
html.touch-ui .app,
html.touch-ui .app *,
html.touch-ui .modal,
html.touch-ui .modal *,
html.touch-ui .splash-screen,
html.touch-ui .splash-screen *,
html.touch-ui .legal-link,
html.touch-ui .maker-return,
html.touch-ui .zen-next-btn{
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}
html.touch-ui .app img,
html.touch-ui .modal img,
html.touch-ui .splash-screen img{
  -webkit-user-drag:none;
}
html.touch-ui .app input,
html.touch-ui .app textarea,
html.touch-ui .app select,
html.touch-ui .app [contenteditable="true"],
html.touch-ui .app a[href],
html.touch-ui .modal input,
html.touch-ui .modal textarea,
html.touch-ui .modal select,
html.touch-ui .modal [contenteditable="true"],
html.touch-ui .modal a[href]{
  -webkit-user-select:auto;
  user-select:auto;
  -webkit-touch-callout:default;
}
html.touch-ui .app textarea,
html.touch-ui .app input[type="text"],
html.touch-ui .app input[type="search"],
html.touch-ui .app input[type="number"],
html.touch-ui .app [contenteditable="true"],
html.touch-ui .modal textarea,
html.touch-ui .modal input[type="text"],
html.touch-ui .modal input[type="search"],
html.touch-ui .modal input[type="number"],
html.touch-ui .modal [contenteditable="true"]{
  -webkit-user-select:text;
  user-select:text;
}
button{font:inherit;color:inherit;cursor:pointer}
.app{width:min(1600px,100%);height:100dvh;min-height:0;margin:auto;display:grid;grid-template-columns:minmax(0,1fr) clamp(310px,24vw,360px);overflow:hidden;background:rgba(248,242,232,.88);border-inline:1px solid var(--line)}
.play-area{min-width:0;min-height:0;overflow:hidden;display:grid;grid-template-rows:clamp(92px,14dvh,132px) minmax(0,1fr) clamp(52px,8dvh,76px)}
.masthead{min-height:0;display:flex;justify-content:space-between;align-items:center;padding:clamp(10px,1.4dvh,16px) clamp(22px,2.5vw,36px);border-bottom:1px solid var(--line)}
.title{min-width:0;max-width:56%;flex:0 1 auto}.title-word-row > strong,.title > span{display:block;max-width:100%;font-weight:950;line-height:.86;letter-spacing:.04em;white-space:nowrap}.title-word-row > strong{font-size:clamp(32px,min(4.2vw,6dvh),60px)}.title > span{font-size:clamp(18px,min(2.55vw,3.5dvh),32px);letter-spacing:.025em;color:var(--red);margin-top:clamp(5px,.8dvh,9px)}
.collection{text-align:right;font-size:clamp(15px,1.8vw,24px);font-style:normal}.collection b{display:block;line-height:1.02}.collection i{display:block;width:clamp(100px,11vw,150px);height:clamp(5px,.8dvh,8px);background:var(--ink);margin:9px 0 6px auto}.collection span{font-weight:900;font-size:1.12em}
.board-wrap{position:relative;min-width:0;min-height:0;display:grid;place-items:center;overflow:hidden;padding:clamp(16px,2.8dvh,30px);background:linear-gradient(135deg,#f4ebdd,#eadcca)}
.board{position:relative;width:320px;max-width:100%;max-height:100%;aspect-ratio:var(--ratio);flex:none;background-color:#f4ecdf;background-image:linear-gradient(rgba(80,65,45,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(80,65,45,.09) 1px,transparent 1px),linear-gradient(135deg,rgba(255,255,255,.26),rgba(110,85,50,.05));background-size:calc(100% / var(--cols)) calc(100% / var(--rows)),calc(100% / var(--cols)) calc(100% / var(--rows)),100% 100%;box-shadow:0 34px 62px rgba(37,26,15,.42),0 12px 24px rgba(37,26,15,.25);isolation:isolate;outline:0;overflow:hidden;border:0}
.board::before{display:none}.layer{position:absolute;inset:0;pointer-events:none;overflow:visible}#voidLayer{z-index:20}#wallLayer{z-index:100}#goalLayer{z-index:200}#pieceLayer{z-index:3000;overflow:visible}
.cell{position:absolute;left:calc(var(--x) * 100% / var(--cols));top:calc(var(--y) * 100% / var(--rows));width:calc(100% / var(--cols));height:calc(100% / var(--rows))}.void-cell{background:linear-gradient(135deg,#eee2cf,#e8dac5);box-shadow:inset 0 0 0 1px rgba(80,65,45,.02)}
.wall{z-index:var(--z)}
.wall::before{content:"";position:absolute;inset:5% 5% 18%;background:linear-gradient(145deg,#393a3d,#202124 62%,#161719);box-shadow:0 3px 6px rgba(31,23,15,.10);border:1px solid rgba(255,255,255,.045)}
.wall::after{content:"";position:absolute;left:5%;right:5%;bottom:5%;height:16%;background:linear-gradient(#111214,#050506)}
.goal{display:block;z-index:var(--z);overflow:visible}
.board-art{display:block;background-repeat:no-repeat;background-position:center bottom;background-size:contain}
.goal .board-art-goal{position:absolute;left:-3.5%;bottom:-1%;width:107%;height:107%;background-image:var(--goal-sprite,var(--boxxy-standard-goal-sprite,url("assets/board/goals/goal-red.png?v=226")));transform:scaleY(.86);transform-origin:50% 100%;opacity:.96}
.piece{position:absolute;left:calc((var(--x) + .5) * 100% / var(--cols));top:calc((var(--y) + 1) * 100% / var(--rows));z-index:var(--z);pointer-events:none;overflow:visible}
.piece.box{width:calc(104% / var(--cols));height:calc(142% / var(--rows));transform:translate(-50%,-100%);transition:left var(--boxxy-step-transition,.17s) cubic-bezier(.2,.82,.32,1),top var(--boxxy-step-transition,.17s) cubic-bezier(.2,.82,.32,1),transform var(--boxxy-step-transition,.17s) ease;display:grid;place-items:end center}
.piece.box::before{content:"";position:absolute;left:50%;bottom:2%;width:64%;height:13%;transform:translateX(-42%);border-radius:50%;background:rgba(48,34,18,.32);filter:blur(4px);box-shadow:7px 5px 7px rgba(48,34,18,.16);z-index:0}
.piece.box .board-art-box{position:absolute;left:0;bottom:0;z-index:1;width:100%;height:73.25%;background-image:var(--boxxy-standard-box-sprite,url("assets/board/boxes/box-default-yellow.png?v=226"))}
.piece.box.on-goal .board-art-box{background-image:var(--box-sprite,var(--boxxy-standard-target-box-sprite,url("assets/board/boxes/box-red.png?v=226")))}
.piece.player{width:calc(207% / var(--cols));height:0;transform:translateX(-50%);transition:left var(--boxxy-step-transition,.17s) cubic-bezier(.2,.82,.32,1),top var(--boxxy-step-transition,.17s) cubic-bezier(.2,.82,.32,1);display:block;overflow:visible;z-index:99999!important;pointer-events:auto}
.piece.player::before{content:"";position:absolute;left:50%;bottom:3px;width:30%;height:8px;transform:translateX(-38%);border-radius:50%;background:rgba(48,34,18,.34);filter:blur(3px);box-shadow:6px 4px 6px rgba(48,34,18,.14);z-index:0}
.piece.player img{position:absolute;left:50%;bottom:0;z-index:1;display:block;width:100%;height:auto;max-width:none;max-height:none;object-fit:contain;overflow:visible;clip-path:none;transform:translateX(-50%);transform-origin:50% 100%;filter:none}
.piece.player.pushing.facing-left,.piece.player.pushing.facing-right,.piece.player.pushing.facing-front,.piece.player.pushing.facing-back{width:calc(207% / var(--cols))}
.piece.player.board-step{animation:boardPieceMove var(--boxxy-motion-duration,.105s) cubic-bezier(.2,.82,.32,1) both}
.piece.box.pushing.board-step{animation:boardPieceMove var(--boxxy-motion-duration,.105s) cubic-bezier(.2,.82,.32,1) both,boxPush var(--boxxy-motion-duration,.105s) ease both}
.piece.player.walking :is(img,canvas){animation:playerWalk var(--boxxy-motion-duration,.105s) linear}
.piece.player.pushing :is(img,canvas){animation:playerPush var(--boxxy-motion-duration,.105s) ease}
.piece.player.bumping :is(img,canvas){animation:playerBump .16s ease}
@keyframes boardPieceMove{0%{left:calc((var(--from-x) + .5) * 100% / var(--cols));top:calc((var(--from-y) + 1) * 100% / var(--rows))}100%{left:calc((var(--x) + .5) * 100% / var(--cols));top:calc((var(--y) + 1) * 100% / var(--rows))}}
@keyframes boxPush{50%{transform:translate(-50%,-101%)}}@keyframes playerWalk{50%{transform:translateX(-50%) translateY(-2%)}}@keyframes playerPush{50%{transform:translateX(-50%) translateY(-1%)}}@keyframes playerBump{50%{transform:translateX(-50%) translateY(2%)}}
.celebration{position:absolute;inset:0;z-index:2400;pointer-events:none;overflow:hidden}.confetti{position:absolute;width:12px;height:12px;animation:confetti 1.2s ease-out forwards}@keyframes confetti{to{transform:translate(var(--dx),var(--dy)) rotate(540deg);opacity:0}}
.deco{position:absolute;z-index:0;pointer-events:none}.deco-red{width:clamp(75px,10vw,125px);height:clamp(75px,10vw,125px);left:16px;top:24px;background:var(--red);border-radius:0 0 100% 0}.deco-yellow{width:82px;height:62px;right:22px;top:150px;background:var(--yellow)}.stripes{position:absolute;width:58px;height:145px;background:repeating-linear-gradient(90deg,var(--ink) 0 7px,transparent 7px 16px);z-index:0}.stripes-a{right:26px;top:18px}.stripes-b{left:22px;bottom:28px}.semicircle{position:absolute;right:-42px;bottom:20px;width:135px;height:135px;background:var(--ink);border-radius:100% 0 0 100%;z-index:0}
.instruction{position:relative;min-height:0;display:flex;align-items:center;gap:14px;padding:9px 28px 9px 24px;border-top:1px solid rgba(23,23,25,.18);background:linear-gradient(90deg,rgba(229,179,42,.20),rgba(247,240,229,.82) 24%,rgba(247,240,229,.96));box-shadow:inset 6px 0 0 var(--yellow),inset 0 1px 0 rgba(255,255,255,.75);font-weight:780;font-style:italic;font-size:clamp(12px,1.1vw,17px);letter-spacing:.01em}.instruction .thought-text{min-width:0;line-height:1.24;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;transition:opacity .42s ease,transform .42s ease}.instruction.thought-changing .thought-text{opacity:0;transform:translateY(5px)}.info{width:clamp(32px,4.2dvh,42px);height:clamp(32px,4.2dvh,42px);border-radius:9px 9px 9px 2px;display:grid;place-items:center;background:var(--red);color:#fff;font:bold clamp(24px,3.3dvh,32px)/1 Georgia,serif;flex:none;box-shadow:4px 4px 0 rgba(23,23,25,.16)}
.side-panel{position:relative;min-width:0;min-height:0;overflow:hidden;border-left:2px solid var(--ink);display:grid;grid-template-rows:auto auto auto minmax(138px,1fr) auto 34px;background:rgba(249,244,235,.74)}
.credit{padding:12px 16px 10px;border-bottom:1px solid var(--line);min-width:0}.credit strong{display:block;font-size:clamp(14px,1.5vw,18px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.credit span{display:block;margin-top:3px;font-size:9px;letter-spacing:.075em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line)}.stats>div,.stats .time{grid-column:auto;min-width:0;padding:8px 3px;text-align:center;border-right:1px solid var(--line);border-bottom:0}.stats>div:last-child{border-right:0}.stats>div:nth-child(odd){border-right:1px solid var(--line)}.stats span{display:block;font-size:8px;font-weight:850;letter-spacing:.055em}.stats strong{display:block;font-size:clamp(18px,2.8dvh,25px);margin-top:2px;font-variant-numeric:tabular-nums;white-space:nowrap}.stats .time strong{font-size:clamp(12px,2.1dvh,19px);letter-spacing:-.035em}
.top-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;padding:9px 10px}.bottom-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;padding:8px 10px}.action{min-width:0;min-height:58px;border:1px solid var(--line);background:#f8f1e6;box-shadow:0 4px 10px rgba(55,38,20,.08);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}.action span{font-size:clamp(25px,4dvh,34px);line-height:1}.action b{max-width:100%;white-space:normal;overflow-wrap:anywhere;text-align:center;line-height:1.05;font-size:10px;letter-spacing:.035em;white-space:nowrap}.action.undo{background:linear-gradient(#e14b32,#c92e1f);color:#fff;border-color:#ae281c}.action.save-position{background:linear-gradient(#f4e2a7,#e5b32a);border-color:#b98b12}.action.save-position.has-checkpoint{box-shadow:inset 0 0 0 2px rgba(32,83,154,.36),0 4px 10px rgba(55,38,20,.08)}.action.save-position.saved-current{background:linear-gradient(#d8eadc,#a9d2b2);border-color:#6b9d75}.action.small{min-height:54px}.action.small span{font-size:24px}.action.small b{font-size:8px}.fullscreen-action b{max-width:58px!important;white-space:normal!important;overflow-wrap:normal!important;font-size:7px!important;line-height:.94;letter-spacing:.01em}
.dpad{align-self:center;justify-self:center;width:min(20dvh,190px);aspect-ratio:1;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:5px;grid-template-areas:". up ." "left centre right" ". down ."}.dpad button{min-width:0;min-height:0;border:1px solid var(--line);background:#f8f1e6;box-shadow:0 4px 10px rgba(55,38,20,.08);font-size:clamp(20px,3dvh,26px)}.dpad [data-dir=up]{grid-area:up}.dpad [data-dir=left]{grid-area:left}.dpad [data-dir=right]{grid-area:right}.dpad [data-dir=down]{grid-area:down}.centre{grid-area:centre;position:relative;background:linear-gradient(145deg,#fffaf0 0 72%,#e1b735 72% 100%)!important;color:var(--ink)!important;display:grid;place-items:center;overflow:hidden;padding:6px!important;border:2px solid var(--ink)!important;box-shadow:0 5px 0 rgba(23,23,25,.22),0 9px 16px rgba(55,38,20,.12)!important}
.centre::before{content:"";position:absolute;left:7px;top:7px;width:15px;height:15px;background:var(--red);z-index:0}
.centre::after{content:"";position:absolute;right:7px;bottom:7px;width:16px;height:16px;border-radius:50%;background:var(--blue);z-index:0}
.style-outfit-icon{display:block;width:72%;height:72%;pointer-events:none;overflow:visible;position:relative;z-index:1;filter:none}
.style-outfit-icon .style-hanger-hook,.style-outfit-icon .style-hanger-bar{fill:none;stroke:var(--ink);stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.style-outfit-icon .style-shirt-body{fill:#df3526;stroke:var(--ink);stroke-width:4;stroke-linejoin:round}
.style-outfit-icon .style-shirt-seam{fill:none;stroke:#fff8eb;stroke-width:3;stroke-linecap:round;opacity:.92}
.centre:active{transform:translateY(2px);box-shadow:0 3px 0 rgba(23,23,25,.22),0 6px 12px rgba(55,38,20,.10)!important}
.centre:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.level-picker{position:absolute;z-index:7000;left:10px;right:10px;bottom:42px;margin:0;padding:12px;border:2px solid var(--ink);background:#f7efe4;box-shadow:0 15px 35px rgba(35,25,15,.23)}.level-picker[hidden]{display:none}.level-picker-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}.level-picker strong{display:block;margin:0;font-size:inherit;line-height:1}.level-picker-tools{display:flex;align-items:center;gap:6px;flex:none}.level-reset{height:28px;padding:0 10px;border:1px solid var(--ink);background:#ece4d7;color:var(--ink);font-weight:900;font-size:9px;letter-spacing:.07em;line-height:1}.level-close{width:22px;height:22px;padding:0;border:0;background:transparent;color:var(--ink);display:flex;align-items:center;justify-content:center}.level-close span{display:block;font-size:22px;line-height:1;transform:translateY(-1px)}.level-picker #levelButtons{display:grid;grid-template-columns:repeat(10,1fr);gap:5px;overflow:visible}.level-picker #levelButtons button{min-width:0;height:32px;padding:0;border:1px solid var(--line);background:#fff;font-weight:900;font-size:11px;line-height:1;display:grid;place-items:center;text-align:center;font-variant-numeric:tabular-nums}.level-picker #levelButtons button.current{background:var(--red);border-color:var(--red);color:#fff}.level-picker #levelButtons button.completed{background:#4d9a5f;border-color:#3f814e;color:#fff}.level-picker #levelButtons button.assisted{background:#f2c121;border-color:#d1a317;color:#2f2410}.level-picker #levelButtons button.locked,.level-picker #levelButtons button:disabled{background:#d7d1c8;border-color:#c4bdb2;color:#8c857b;cursor:not-allowed;box-shadow:none;opacity:1}.palette{height:34px;display:grid;grid-template-columns:repeat(5,1fr);align-self:end}.palette i:nth-child(1){background:var(--blue)}.palette i:nth-child(2){background:var(--yellow)}.palette i:nth-child(3){background:#f6efe4}.palette i:nth-child(4){background:var(--red)}.palette i:nth-child(5){background:var(--ink)}
@media (max-width:760px){.level-picker{position:fixed;left:12px;right:12px;top:50%;bottom:auto;transform:translateY(-50%);max-height:78dvh;padding:13px}.level-picker-head{margin-bottom:10px}.level-picker #levelButtons{grid-template-columns:repeat(5,1fr);gap:5px}.level-picker #levelButtons button{height:36px;font-size:12px}.level-reset{height:26px;padding:0 8px;font-size:9px}.level-close{width:22px;height:22px}.level-close span{font-size:20px}}
.modal{position:fixed;inset:0;background:rgba(235,224,207,.76);display:grid;place-items:center;z-index:9000;backdrop-filter:blur(4px)}.modal[hidden]{display:none}.modal-card{width:min(390px,86vw);padding:27px;text-align:center;background:#f7f0e5;border:2px solid var(--ink);box-shadow:0 25px 55px rgba(35,25,15,.25)}.modal-card h2{margin:16px 0 6px}.modal-card p{line-height:1.45}.modal-card button{border:0;padding:14px 20px;background:var(--red);color:#fff;font-weight:900}.reset-confirm-card{width:min(360px,84vw);padding:24px 24px 20px;text-align:left}.reset-confirm-card h2{margin:10px 0 8px;line-height:.95}.reset-confirm-card p{margin:0 0 18px;color:#5f564b}.reset-confirm-actions{display:flex;justify-content:flex-end;gap:10px}.reset-confirm-actions button{padding:11px 16px;border:1px solid var(--ink);font-size:12px;letter-spacing:.06em}.reset-cancel{background:#ece4d7!important;color:var(--ink)!important}.reset-confirm{background:var(--red)!important;color:#fff!important;border-color:var(--red)!important}
.complete-modal{background:rgba(21,21,21,.46);backdrop-filter:blur(6px)}
.complete-card{position:relative;width:min(560px,90vw);padding:0;text-align:left;display:grid;grid-template-columns:170px minmax(0,1fr);overflow:hidden;background:#f7f0e5;border:3px solid var(--ink);box-shadow:14px 14px 0 rgba(21,21,21,.24),0 30px 70px rgba(21,21,21,.34);animation:completeCardIn .34s cubic-bezier(.2,.8,.2,1) both}
.complete-art{position:relative;min-height:360px;overflow:hidden;background:var(--yellow);border-right:3px solid var(--ink)}
.complete-art span{position:absolute;left:50%;top:50%;width:76px;height:76px;display:grid;place-items:center;transform:translate(-50%,-50%);background:#f7f0e5;border:3px solid var(--ink);border-radius:50%;font:900 42px/1 Inter,ui-sans-serif,sans-serif;z-index:4;box-shadow:7px 7px 0 rgba(21,21,21,.18)}
.complete-circle{position:absolute;width:142px;height:142px;left:-58px;top:-42px;border-radius:50%;background:var(--red);border:3px solid var(--ink)}
.complete-square{position:absolute;width:104px;height:104px;right:-42px;bottom:35px;background:var(--blue);border:3px solid var(--ink);transform:rotate(12deg)}
.complete-line{position:absolute;left:28px;right:28px;bottom:60px;height:12px;background:var(--ink);transform:rotate(-24deg);transform-origin:center}
.complete-copy{position:relative;display:flex;flex-direction:column;justify-content:center;padding:34px 38px 32px;background:linear-gradient(135deg,rgba(255,255,255,.36),transparent 52%),#f7f0e5}
.complete-copy::before{content:"";position:absolute;left:0;top:0;width:84px;height:12px;background:var(--red)}
.complete-kicker{font-size:11px;font-weight:950;letter-spacing:.18em}
.complete-card h2{margin:10px 0 13px;font-size:clamp(38px,6vw,62px);line-height:.84;letter-spacing:-.055em;font-weight:950}
.complete-card p{margin:0 0 25px;max-width:30ch;font-size:15px;line-height:1.42;font-weight:720}

.complete-actions{display:flex;align-items:flex-start;flex-wrap:wrap;gap:12px}
.completion-action-set[hidden]{display:none!important}
.standard-completion-actions{display:flex;align-items:flex-start;flex-wrap:wrap;gap:12px;min-width:0}
.daily-completion-actions{width:min(620px,100%);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.complete-secondary{min-height:58px;padding:12px 16px;border:2px solid var(--ink);background:var(--yellow);color:var(--ink);font-weight:950;letter-spacing:.08em;box-shadow:5px 5px 0 var(--blue)}
.complete-secondary:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--blue)}
.complete-secondary:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--blue)}
.complete-secondary[hidden]{display:none!important}
.complete-primary{align-self:flex-start;min-width:190px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 15px 14px 18px;background:var(--ink);color:#fff;border:2px solid var(--ink);box-shadow:6px 6px 0 var(--red);font-weight:950;letter-spacing:.08em;transition:transform .12s ease,box-shadow .12s ease}
.complete-primary b{width:28px;height:28px;display:grid;place-items:center;background:var(--yellow);color:var(--ink);font-size:20px}
.complete-primary:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--red)}
.complete-primary:active{transform:translate(4px,4px);box-shadow:2px 2px 0 var(--red)}
@keyframes completeCardIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:560px){.complete-card{grid-template-columns:108px minmax(0,1fr)}.complete-art{min-height:330px}.complete-art span{width:62px;height:62px;font-size:34px}.complete-circle{width:108px;height:108px}.complete-square{width:78px;height:78px}.complete-copy{padding:28px 22px 26px}.complete-card h2{font-size:clamp(35px,12vw,50px)}.complete-primary{min-width:170px}}
button:active{transform:translateY(1px);filter:brightness(.96)}button:disabled{opacity:.35;cursor:default}
body.autoplaying .action,body.autoplaying .dpad button{opacity:.55;pointer-events:none}

@media(max-height:720px) and (min-width:761px){
  :root{--max-cell:64px}.play-area{grid-template-rows:82px minmax(0,1fr) 46px}.masthead{padding-block:7px}.title-word-row > strong{font-size:34px}.title > span{font-size:18px;margin-top:4px}.collection{font-size:14px}.collection i{width:92px;height:5px;margin-block:6px 4px}.instruction{padding-block:7px}.side-panel{grid-template-rows:auto auto auto minmax(112px,1fr) auto 26px}.credit{padding-block:8px}.stats>div,.stats .time{padding-block:5px}.stats strong{font-size:18px}.top-actions{padding-block:6px}.action{min-height:48px}.dpad{width:min(19dvh,150px)}.bottom-actions{padding-block:6px}.action.small{min-height:44px}.palette{height:26px}}

@media(max-width:760px){
  :root{--max-cell:56px}
  .app{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) clamp(205px,29dvh,252px);border:0}
  .play-area{grid-template-rows:clamp(64px,9dvh,78px) minmax(0,1fr) clamp(34px,5dvh,44px)}
  .masthead{padding:8px 13px}.title-word-row > strong{font-size:30px}.title > span{font-size:17px;margin-top:6px}.collection{font-size:11px}.collection i{width:72px;height:4px;margin:5px 0 3px auto}.board-wrap{padding:10px}.deco,.stripes,.semicircle{opacity:.28}.deco-red{width:65px;height:65px;left:8px;top:8px}.deco-yellow{width:52px;height:38px;right:8px;top:60px}.stripes{display:none}.semicircle{width:82px;height:82px;right:-28px;bottom:8px}.instruction{padding:5px 10px;gap:8px;font-size:10px}.info{width:25px;height:25px;font-size:15px}
  .side-panel{border-left:0;border-top:2px solid var(--ink);grid-template-columns:minmax(78px,1fr) minmax(132px,156px) minmax(78px,1fr);grid-template-rows:25px 39px minmax(132px,1fr) 11px;overflow:hidden}
  .credit{grid-column:1/-1;grid-row:1;padding:4px 8px;display:flex;align-items:center;justify-content:center;gap:6px;text-align:center}.credit strong{font-size:10px}.credit span{font-size:8px;margin:0}.stats{grid-column:1/-1;grid-row:2}.stats>div,.stats .time{padding:4px 2px}.stats span{font-size:8px}.stats strong{font-size:16px;margin-top:0}
  .top-actions{grid-column:1;grid-row:3;grid-template-columns:1fr;grid-template-rows:repeat(3,1fr);gap:4px;padding:7px 5px 7px 8px}.bottom-actions{grid-column:3;grid-row:3;grid-template-columns:1fr;grid-template-rows:repeat(2,1fr);gap:4px;padding:7px 8px 7px 5px}.fullscreen-action{display:none!important}.action,.action.small{min-height:0;height:100%}.action span,.action.small span{font-size:23px}.action b,.action.small b{font-size:8px}.fullscreen-action b{max-width:58px!important;white-space:normal!important;overflow-wrap:normal!important;font-size:7px!important;line-height:.94;letter-spacing:.01em}
  .dpad{grid-column:2;grid-row:3;width:min(37vw,148px);max-height:100%;align-self:center}.dpad button{font-size:20px}.palette{grid-column:1/-1;grid-row:4;height:11px}.level-picker{position:fixed;left:12px;right:12px;top:50%;bottom:auto;transform:translateY(-50%);max-height:78dvh;padding:13px}.level-picker #levelButtons{grid-template-columns:repeat(5,1fr);gap:5px}.level-picker #levelButtons button{height:36px;font-size:12px}
}

@media(max-height:520px) and (orientation:landscape){
  :root{--max-cell:52px}.app{grid-template-columns:minmax(0,1fr) 270px;grid-template-rows:1fr}.play-area{grid-template-rows:52px minmax(0,1fr) 28px}.masthead{padding:4px 12px}.title-word-row > strong{font-size:23px}.title > span{font-size:13px;margin-top:3px}.collection{font-size:9px}.collection i{width:60px;height:3px;margin:3px 0 2px auto}.instruction{padding:3px 10px;font-size:8px}.info{width:20px;height:20px;font-size:12px}.side-panel{border-top:0;border-left:2px solid var(--ink);grid-template-columns:1fr;grid-template-rows:22px 33px 48px minmax(92px,1fr) 46px 10px}.credit{grid-column:1;grid-row:1;padding:3px 6px}.credit strong{font-size:9px}.credit span{font-size:6px}.stats{grid-column:1;grid-row:2}.stats>div,.stats .time{padding:2px}.stats strong{font-size:13px}.top-actions{grid-column:1;grid-row:3;grid-template-columns:repeat(3,1fr);grid-template-rows:1fr;padding:4px 7px}.dpad{grid-column:1;grid-row:4;width:min(26dvh,118px)}.bottom-actions{grid-column:1;grid-row:5;grid-template-columns:repeat(2,1fr);grid-template-rows:1fr;padding:4px 7px}.fullscreen-action{display:none!important}.palette{grid-column:1;grid-row:6;height:10px}.action,.action.small{min-height:0}.action span,.action.small span{font-size:18px}.action b,.action.small b{font-size:7px}.level-picker{position:absolute;top:auto;bottom:12px;left:10px;right:10px;transform:none}.level-picker #levelButtons{grid-template-columns:repeat(10,1fr)}}

/* Konami-code background movement: static until the code is entered. */
body.konami-background .bg-shape.static.konami-a{animation:konamiFloatA var(--kdur,10s) ease-in-out infinite alternate!important;animation-delay:var(--kdelay,0s)!important}
body.konami-background .bg-shape.static.konami-b{animation:konamiFloatB var(--kdur,11.3s) ease-in-out infinite alternate!important;animation-delay:var(--kdelay,0s)!important}
body.konami-background .bg-shape.static.konami-c{animation:konamiFloatC var(--kdur,10.7s) ease-in-out infinite alternate!important;animation-delay:var(--kdelay,0s)!important}
@keyframes konamiFloatA{from{translate:0 0;rotate:0deg}to{translate:var(--kx,18px) var(--ky,-12px);rotate:var(--kr,4deg)}}
@keyframes konamiFloatB{from{translate:0 0;rotate:0deg}to{translate:var(--kx,-16px) var(--ky,14px);rotate:var(--kr,-3deg)}}
@keyframes konamiFloatC{from{translate:0 0;rotate:0deg}to{translate:var(--kx,14px) var(--ky,10px);rotate:var(--kr,4deg)}}

/* Character wardrobe */
body.style-open{overflow:hidden}
.piece.player canvas{position:absolute;left:50%;bottom:0;z-index:1;display:block;width:100%;height:auto;max-width:none;max-height:none;transform:translateX(-50%);transform-origin:50% 100%;pointer-events:none}
.style-modal{padding:18px;overflow:auto}
.style-card{position:relative;width:min(760px,94vw);max-height:min(760px,94dvh);overflow:auto;background:var(--paper2);border:2px solid var(--ink);box-shadow:0 28px 70px rgba(35,25,15,.32);padding:clamp(18px,3vw,30px)}
.style-close{position:absolute;right:14px;top:12px;width:42px;height:42px;border:0;border-radius:50%;background:var(--ink);color:#fff;font-size:28px;line-height:1;z-index:2}
.style-preview{display:grid;grid-template-columns:150px minmax(0,1fr);align-items:center;gap:24px;padding-right:48px;margin-bottom:18px}
.style-preview-disc{width:150px;height:150px;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:var(--yellow);box-shadow:inset 0 0 0 2px rgba(0,0,0,.1)}
.style-preview-disc canvas{display:block;width:160%;height:auto;transform:translateY(-30%)}
.style-kicker{font-size:11px;font-weight:950;letter-spacing:.16em;color:var(--red)}
.style-preview h2{margin:5px 0 5px;font-size:clamp(28px,5vw,48px);line-height:.9;letter-spacing:.025em}
.style-preview p{margin:0;font-weight:700;color:#5a5044}
.style-controls{display:grid;gap:8px}
.style-group{margin:0;padding:8px 10px 10px;border:1px solid var(--line);background:#f8f1e6}
.style-group legend{padding:0 8px;font-size:11px;font-weight:950;letter-spacing:.11em}
.style-swatches{display:grid;grid-template-columns:repeat(8,minmax(30px,1fr));gap:7px}
.style-swatch{position:relative;height:36px;border:1px solid rgba(23,23,25,.5);border-radius:8px;background:var(--swatch);box-shadow:inset 0 0 0 2px rgba(255,255,255,.14);padding:0;transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.style-swatch::after{content:"";position:absolute;inset:5px;border:1px solid transparent;border-radius:5px}
.style-swatch.selected{border-color:var(--ink);transform:translateY(-1px);box-shadow:0 2px 0 rgba(23,23,25,.35),inset 0 0 0 2px rgba(255,255,255,.28)}
.style-swatch.selected::after{border-color:rgba(255,255,255,.88)}
.style-footer{display:flex;justify-content:flex-end;gap:12px;margin-top:17px}
.style-footer button{min-width:122px;padding:13px 18px;border:1px solid var(--ink);border-radius:9px;font-weight:950;letter-spacing:.06em;transition:background-color .15s ease,color .15s ease,transform .15s ease,box-shadow .15s ease}
.style-footer button:active{transform:translateY(1px)}
.style-reset{background:#ece4d7;color:var(--ink)}
.style-done{background:var(--red);color:#fff}
@media(max-width:620px){
  .style-modal{padding:9px}.style-card{width:100%;max-height:95dvh;padding:15px}.style-preview{grid-template-columns:90px 1fr;gap:12px;padding-right:34px;margin-bottom:12px}.style-preview-disc{width:88px;height:88px}.style-preview h2{font-size:27px}.style-preview p{font-size:11px}.style-controls{gap:7px}.style-group{padding:7px 8px 9px}.style-swatches{grid-template-columns:repeat(6,minmax(30px,1fr));gap:6px}.style-swatch{height:34px}.style-footer{margin-top:11px}.style-footer button{min-width:105px;padding:10px 13px}.style-close{right:8px;top:8px;width:35px;height:35px;font-size:24px}
}


/* Dynamic Bauhaus background */
.bg-decor{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;opacity:1;transition:opacity .45s ease}
.bg-shape{position:absolute;opacity:var(--shape-opacity,.92);transform:translate3d(0,0,0);will-change:transform;mix-blend-mode:multiply;--dx:42px;--dy:-26px;--rot:5deg;transform-origin:center center}
.bg-decor.fading{opacity:0}
.bg-shape.shape-quarter{border-radius:0 0 100% 0}
.bg-shape.shape-rect{border-radius:0}
.bg-shape.shape-pill{border-radius:999px}
.bg-shape.shape-circle{border-radius:50%}
.bg-shape.shape-semi-left{border-radius:100% 0 0 100%}
.bg-shape.shape-semi-right{border-radius:0 100% 100% 0}
.bg-shape.shape-semi-top{border-radius:100% 100% 0 0}
.bg-shape.shape-semi-bottom{border-radius:0 0 100% 100%}
.bg-shape.shape-ring{border-radius:50%;background:transparent!important;border:10px solid currentColor;color:var(--shape-color)}
.bg-shape.shape-stripes{background:repeating-linear-gradient(90deg,var(--shape-color) 0 7px,transparent 7px 16px)!important}
.bg-shape.shape-stripes-thin{background:repeating-linear-gradient(90deg,var(--shape-color) 0 5px,transparent 5px 12px)!important}
.bg-shape.shape-triangle{clip-path:polygon(50% 0,0 100%,100% 100%)}
.bg-shape.shape-dots{background:radial-gradient(circle,var(--shape-color) 0 28%,transparent 31%) 0 0/18px 18px!important}
.bg-shape.shape-steps{background:
linear-gradient(135deg,transparent 0 34%,var(--shape-color) 34% 42%,transparent 42% 100%) 0 0/26px 26px,
linear-gradient(135deg,transparent 0 58%,var(--shape-color) 58% 66%,transparent 66% 100%) 0 0/26px 26px!important}
.bg-shape.static{animation:none!important}
.bg-motif{position:absolute;pointer-events:none;z-index:0}
.bg-motif .motif-part{position:absolute;box-sizing:border-box}
.bg-motif.motif-lines{overflow:visible}
.bg-motif.motif-lines .lines{inset:0;opacity:.88}
.bg-motif.motif-lines.axis-vertical .lines{background:repeating-linear-gradient(90deg,var(--motif-color) 0 6px,transparent 6px 15px)}
.bg-motif.motif-lines.axis-horizontal .lines{background:repeating-linear-gradient(0deg,var(--motif-color) 0 6px,transparent 6px 15px)}
.bg-motif.motif-lines .gap{opacity:.96;filter:blur(1.2px)}
.bg-motif.motif-lines.axis-vertical .gap{left:-6%;width:112%;height:18px;background:linear-gradient(180deg,transparent 0,var(--paper-color) 24%,var(--paper-color) 76%,transparent 100%);animation:lineGapY var(--dur,24s) ease-in-out infinite}
.bg-motif.motif-lines.axis-horizontal .gap{top:-6%;height:112%;width:18px;background:linear-gradient(90deg,transparent 0,var(--paper-color) 24%,var(--paper-color) 76%,transparent 100%);animation:lineGapX var(--dur,24s) ease-in-out infinite}
.bg-motif.motif-lines .runner{opacity:.22;filter:blur(1.6px);background:var(--motif-color)}
.bg-motif.motif-lines.axis-vertical .runner{left:-2%;width:104%;height:4px;animation:lineRunnerY var(--dur,24s) ease-in-out infinite}
.bg-motif.motif-lines.axis-horizontal .runner{top:-2%;height:104%;width:4px;animation:lineRunnerX var(--dur,24s) ease-in-out infinite}
.bg-motif.motif-lines .pulse{inset:-2px;border:2px solid transparent;animation:linePulse var(--dur,24s) ease-in-out infinite}
.bg-motif.motif-lines.axis-vertical .pulse{border-top-color:var(--motif-color);border-bottom-color:var(--motif-color);opacity:.12}
.bg-motif.motif-lines.axis-horizontal .pulse{border-left-color:var(--motif-color);border-right-color:var(--motif-color);opacity:.12}
.bg-motif.motif-knock{overflow:visible}
.bg-motif.motif-knock .circle{border-radius:50%;background:var(--circle-color);animation:knockCircle var(--dur,30s) ease-in-out infinite}
.bg-motif.motif-knock .triangle{background:var(--triangle-color);clip-path:polygon(50% 0,0 100%,100% 100%);animation:knockTriangle var(--dur,30s) ease-in-out infinite}
.bg-motif.motif-knock .burst{left:50%;top:50%;width:0;height:0;transform:translate(-50%,-50%);animation:burstSpin var(--dur,30s) ease-in-out infinite}
.bg-motif.motif-knock .dot{width:10px;height:10px;border-radius:50%;background:var(--burst-color);opacity:0;animation:dotBurst var(--dur,30s) ease-in-out infinite}
.bg-motif.motif-knock.small .dot{width:8px;height:8px}
.bg-motif.motif-orbit{overflow:visible}
.bg-motif.motif-orbit .ring{inset:0;border-radius:50%;border:6px solid var(--orbit-color);opacity:.82}
.bg-motif.motif-orbit .dot-wrap{left:50%;top:50%;width:0;height:0;animation:orbitSpin var(--dur,28s) linear infinite}
.bg-motif.motif-orbit .dot{width:14px;height:14px;border-radius:50%;background:var(--dot-color);transform:translate(var(--radius),-50%)}
.bg-motif.motif-orbit .bar{left:50%;top:50%;width:54%;height:8px;background:var(--bar-color);transform-origin:left center;transform:translate(0,-50%) rotate(var(--bar-rot,0deg));opacity:.75}

.bg-motif.motif-zcard{overflow:visible}
.bg-motif.motif-zcard.anim-x{animation:orthSlideX var(--dur,26s) ease-in-out infinite alternate}
.bg-motif.motif-zcard.anim-y{animation:orthSlideY var(--dur,30s) ease-in-out infinite alternate}
.bg-motif.motif-zcard .card{position:absolute;inset:0;background:#fbf7f0;border:4px solid #111;border-radius:12px;box-shadow:7px 7px 0 rgba(17,17,17,.16)}
.bg-motif.motif-zcard .symbol{position:absolute;left:50%;top:50%;width:64%;height:64%;transform:translate(-50%,-50%);color:#111}
.bg-motif.motif-zcard .symbol.circle{border:5px solid currentColor;border-radius:50%}
.bg-motif.motif-zcard .symbol.square{border:5px solid currentColor}
.bg-motif.motif-zcard .symbol.plus .bar-h,.bg-motif.motif-zcard .symbol.plus .bar-v,.bg-motif.motif-zcard .symbol.star .ray{position:absolute;background:currentColor}
.bg-motif.motif-zcard .symbol.plus .bar-h{left:8%;right:8%;top:42%;height:16%}
.bg-motif.motif-zcard .symbol.plus .bar-v{top:8%;bottom:8%;left:42%;width:16%}
.bg-motif.motif-zcard .symbol.waves .wave{position:absolute;top:8%;bottom:8%;width:18%;border:4px solid currentColor;border-top-color:transparent;border-bottom-color:transparent;border-radius:999px}
.bg-motif.motif-zcard .symbol.waves .wave.w1{left:8%;transform:rotate(10deg)}
.bg-motif.motif-zcard .symbol.waves .wave.w2{left:41%;transform:rotate(-10deg)}
.bg-motif.motif-zcard .symbol.waves .wave.w3{right:8%;transform:rotate(10deg)}
.bg-motif.motif-zcard .symbol.star .ray.r1{left:45%;top:6%;bottom:6%;width:10%}
.bg-motif.motif-zcard .symbol.star .ray.r2{top:45%;left:6%;right:6%;height:10%}
.bg-motif.motif-zcard .symbol.star .ray.r3{left:45%;top:10%;bottom:10%;width:10%;transform:rotate(45deg);transform-origin:center}
.bg-motif.motif-zcard .symbol.star .ray.r4{left:45%;top:10%;bottom:10%;width:10%;transform:rotate(-45deg);transform-origin:center}
@keyframes orthSlideX{from{transform:translateX(-12px)}to{transform:translateX(12px)}}
@keyframes orthSlideY{from{transform:translateY(-10px)}to{transform:translateY(10px)}}
@keyframes lineGapY{0%,10%{transform:translateY(-20px);opacity:0}18%{opacity:1}82%{opacity:1}100%{transform:translateY(calc(100% + 20px));opacity:0}}
@keyframes lineGapX{0%,10%{transform:translateX(-20px);opacity:0}18%{opacity:1}82%{opacity:1}100%{transform:translateX(calc(100% + 20px));opacity:0}}
@keyframes lineRunnerY{0%,10%{transform:translateY(-8px);opacity:0}20%{opacity:.22}80%{opacity:.22}100%{transform:translateY(calc(100% + 8px));opacity:0}}
@keyframes lineRunnerX{0%,10%{transform:translateX(-8px);opacity:0}20%{opacity:.22}80%{opacity:.22}100%{transform:translateX(calc(100% + 8px));opacity:0}}
@keyframes linePulse{0%,100%{opacity:.06}46%,58%{opacity:.16}}
@keyframes orbitSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes knockCircle{0%,34%,100%{transform:translate(0,0)}46%{transform:translate(-10px,0)}54%{transform:translate(-14px,0)}68%{transform:translate(-2px,0)}}
@keyframes knockTriangle{0%,34%,100%{transform:translate(0,0)}46%{transform:translate(12px,0)}54%{transform:translate(16px,0)}68%{transform:translate(3px,0)}}
@keyframes burstSpin{0%,40%,100%{transform:translate(-50%,-50%) rotate(0deg)}56%{transform:translate(-50%,-50%) rotate(18deg)}80%{transform:translate(-50%,-50%) rotate(34deg)}}
@keyframes dotBurst{0%,42%,100%{opacity:0;transform:translate(var(--x0),var(--y0)) scale(.4)}50%{opacity:.95;transform:translate(var(--x1),var(--y1)) scale(1)}72%{opacity:0;transform:translate(var(--x2),var(--y2)) scale(1.18)}}
.bg-shape.anim-a{animation:bgDriftA var(--dur,18s) ease-in-out infinite alternate}
.bg-shape.anim-b{animation:bgDriftB var(--dur,22s) ease-in-out infinite alternate}
.bg-shape.anim-c{animation:bgDriftC var(--dur,20s) ease-in-out infinite alternate}
@keyframes bgDriftA{from{transform:translate3d(0,0,0) rotate(0deg)}to{transform:translate3d(var(--dx),var(--dy),0) rotate(var(--rot))}}
@keyframes bgDriftB{from{transform:translate3d(0,0,0) rotate(0deg)}to{transform:translate3d(calc(var(--dx) * -0.8),calc(var(--dy) * 0.7),0) rotate(calc(var(--rot) * -0.65))}}
@keyframes bgDriftC{from{transform:translate3d(0,0,0) rotate(0deg)}50%{transform:translate3d(calc(var(--dx) * 0.45),calc(var(--dy) * 0.35),0) rotate(calc(var(--rot) * 0.4))}to{transform:translate3d(calc(var(--dx) * 0.8),calc(var(--dy) * 0.6),0) rotate(calc(var(--rot) * 0.7))}}


.style-type-choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.style-family-choices.has-partygoers,.style-family-choices.has-fluffballs{grid-template-columns:repeat(4,minmax(0,1fr))}
.style-family-choices.has-partygoers.has-fluffballs{grid-template-columns:repeat(5,minmax(0,1fr))}
.style-type-btn{position:relative;border:1px solid var(--ink);border-radius:9px;background:#ece4d7;color:var(--ink);font:900 13px/1 var(--font,inherit);letter-spacing:.08em;padding:11px 10px;min-height:42px;text-align:center;cursor:pointer;transition:background-color .16s ease,color .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease}
.style-type-btn:hover{background:#f7efe4}
.style-type-btn.is-active-tab{background:var(--yellow);box-shadow:inset 0 0 0 1px rgba(23,23,25,.18)}
.style-type-btn:active{transform:translateY(1px)}
.style-family-spooky{position:relative;overflow:hidden;background:#111114;border-color:#68686c;color:#dedee0;text-shadow:none}
.style-family-spooky::before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:#a3151d;pointer-events:none}
.style-family-spooky::after{content:"";position:absolute;left:18%;top:0;width:8px;height:10px;border-radius:0 0 7px 7px;background:#a3151d;box-shadow:28px 0 0 -2px #a3151d,63px 0 0 1px #a3151d;pointer-events:none}
.style-family-spooky:hover{background:#19191c}
.style-family-spooky.is-active-tab{background:#08080a;border-color:#88888d;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.style-family-partygoers{display:flex;align-items:center;justify-content:center;gap:8px;overflow:hidden;background:var(--green);border-color:#226f3d;color:#fff;padding-left:10px;padding-right:10px}
.style-family-partygoers::before,.style-family-partygoers::after{content:"★";position:static;transform:none;flex:0 0 auto;color:var(--yellow);font-size:12px;line-height:1;text-shadow:none}
.style-family-partygoers:hover{background:#3f9154}
.rare-character-unlock-modal{z-index:9850;padding:18px}
.rare-character-unlock-card{position:relative;width:min(430px,calc(100vw - 28px));padding:28px 30px 26px;text-align:center;background:#fff8ec;border:2px solid var(--ink);box-shadow:10px 10px 0 rgba(23,23,25,.16)}
.rare-character-unlock-close{position:absolute;right:10px;top:8px;width:38px;height:38px;border:0;background:transparent;color:var(--ink);font:900 28px/1 inherit;cursor:pointer}
.rare-character-unlock-kicker{display:block;margin-bottom:4px;font-size:11px;font-weight:900;letter-spacing:.14em}
.rare-character-unlock-avatar-wrap{display:grid;place-items:center;width:202px;height:202px;margin:5px auto 8px;border-radius:50%;background:#f2e5c9;border:1px solid rgba(23,23,25,.16)}
.rare-character-unlock-avatar{display:block;width:190px;height:190px}
.rare-character-unlock-card h2{margin:0;font-size:27px;line-height:.96;letter-spacing:-.02em}
.rare-character-unlock-card h2 span{color:var(--red)}
.rare-character-unlock-card p{max-width:340px;margin:15px auto 20px;font-size:13px;font-weight:700;line-height:1.45}
.rare-character-unlock-done{min-width:150px;padding:11px 18px;border:1px solid var(--ink);background:var(--yellow);color:var(--ink);font:900 12px/1 inherit;letter-spacing:.06em;cursor:pointer}
@media (max-width:560px){.rare-character-unlock-modal{padding:10px}.rare-character-unlock-card{padding:24px 18px 20px}.rare-character-unlock-avatar-wrap{width:168px;height:168px}.rare-character-unlock-avatar{width:158px;height:158px}.rare-character-unlock-card h2{font-size:23px}}
.style-family-partygoers.is-active-tab{background:var(--green);border-color:var(--ink);box-shadow:inset 0 0 0 2px var(--yellow)}
.style-character-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px 9px}
.style-partygoers-group .style-character-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
.style-single-character-grid{grid-template-columns:minmax(112px,150px);justify-content:start}
.style-character-choice{min-width:0;display:grid;gap:5px;align-content:start;justify-items:center;padding:5px;border:1px solid transparent;border-radius:11px;transition:background-color .16s ease,border-color .16s ease,box-shadow .16s ease}
.style-character-choice.selected{background:#fff7d8;border-color:var(--ink);box-shadow:inset 0 0 0 1px rgba(23,23,25,.08)}
.style-character-thumb{display:block;width:100%;aspect-ratio:300/197;border:0;border-radius:8px;padding:0;background-color:transparent;background-repeat:no-repeat;background-size:400% auto;background-position:0 10.8%;box-shadow:none;cursor:pointer}
.style-character-thumb.is-live-preview{background-size:100% auto;background-position:center bottom}
.style-character-thumb:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.style-character-name{width:100%;min-height:34px;padding:7px 4px;border:1px solid var(--ink);border-radius:8px;background:#ece4d7;color:var(--ink);font-family:inherit;font-size:10px;font-weight:900;line-height:1.05;letter-spacing:.035em;text-align:center;overflow-wrap:normal;word-break:normal;hyphens:none;cursor:pointer;transition:background-color .15s ease,color .15s ease}
.style-character-choice.selected .style-character-name{background:var(--yellow)}
.style-character-name:hover{background:#f7efe4}
.style-character-choice[data-body-type="mr-pjkuylasg"] .style-character-name{font-size:8px;letter-spacing:0;white-space:nowrap;padding-left:2px;padding-right:2px}
.style-spooky-music-btn{width:100%;margin-top:10px;padding:11px 12px;border:1px solid #171719;border-radius:9px;background:#171719;color:#fff;font:950 12px/1 var(--font,inherit);letter-spacing:.08em;transition:background-color .15s ease,transform .15s ease,box-shadow .15s ease}
.style-spooky-music-btn[aria-pressed="true"]{background:#b52222;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.style-spooky-music-btn:active{transform:translateY(1px)}
@media(max-width:620px){
  .style-family-choices.has-partygoers,.style-family-choices.has-fluffballs,.style-family-choices.has-partygoers.has-fluffballs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .style-character-grid:not(.style-single-character-grid),.style-partygoers-group .style-character-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px 7px}
  .style-character-name{font-size:9px;padding:7px 3px}
  .style-character-choice[data-body-type="mr-pjkuylasg"] .style-character-name{font-size:7px}
}


/* BOXXY splash screen */
.splash-screen{position:fixed;inset:0;z-index:500000;display:grid;place-items:center;background:#000;opacity:1;visibility:visible;transition:opacity .66s ease,visibility 0s linear .66s}
.splash-screen.hide{opacity:0;visibility:hidden;pointer-events:none}
.splash-inner{width:min(84vw,760px);padding:clamp(14px,2.6vw,24px)}
.splash-logo-wrap{position:relative;display:block;width:100%;max-width:min(640px,82vw);margin:0 auto}
.splash-logo-wrap img{display:block;width:100%;height:auto;opacity:0;filter:drop-shadow(0 16px 28px rgba(255,150,0,.16));transition:opacity .18s ease}
.splash-screen.logo-ready .splash-logo-wrap img{opacity:1}
.splash-loading{width:min(520px,76vw);margin:clamp(18px,3.2vh,30px) auto 0;text-align:center;color:#f6efe3;font:800 11px/1.2 Arial,Helvetica,sans-serif;letter-spacing:.18em}
.splash-progress-track{width:100%;height:8px;overflow:hidden;border:1px solid rgba(255,255,255,.42);border-radius:999px;background:rgba(255,255,255,.12);box-shadow:inset 0 1px 4px rgba(0,0,0,.55)}
.splash-progress-track span{display:block;width:100%;height:100%;border-radius:inherit;background:#f2c121;box-shadow:0 0 12px rgba(242,193,33,.68);transform:scaleX(.035);transform-origin:left center;transition:transform .24s ease}
#splashProgressText{display:block;margin-top:10px;min-height:1.2em}
.splash-sheen{opacity:0;transition:opacity .18s ease;position:absolute;left:23%;top:19%;width:64%;height:34%;pointer-events:none;overflow:hidden}
.splash-sheen::before{content:"";position:absolute;top:-10%;bottom:-10%;width:18%;left:-28%;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.03) 22%,rgba(255,255,255,.24) 42%,rgba(255,255,255,.70) 50%,rgba(255,255,255,.24) 58%,rgba(255,255,255,.03) 78%,rgba(255,255,255,0));transform:skewX(-18deg);mix-blend-mode:screen;filter:blur(.4px);animation:splashSheen 2.8s cubic-bezier(.2,.72,.27,.98) infinite}
.splash-screen.logo-ready .splash-sheen{opacity:1}
@keyframes splashSheen{0%{left:-28%;opacity:0}10%{opacity:.18}26%{opacity:.98}46%{opacity:.98}64%{opacity:.24}100%{left:112%;opacity:0}}
@media (max-width: 700px){
  .splash-inner{width:min(92vw,560px);padding:14px}
  .splash-logo-wrap{max-width:min(520px,92vw)}
  .splash-sheen{left:22.5%;top:18.5%;width:65%;height:35%}
}


/* Collection switcher */
.collection{border:0;background:transparent;padding:0;color:inherit;cursor:pointer}
.collection:hover b,.collection:focus-visible b{text-decoration:none}.collection:hover i,.collection:focus-visible i{background:var(--red)}
.theme-card{position:relative;width:min(720px,92vw);padding:28px;background:var(--paper2);border:2px solid var(--ink);box-shadow:0 28px 70px rgba(35,25,15,.32)}
.theme-close{position:absolute;right:14px;top:10px;border:0;background:transparent;font-size:28px;font-weight:900}
.theme-kicker{font-size:11px;font-weight:950;letter-spacing:.16em;color:var(--red)}
.theme-card h2{margin:7px 0 20px;font-size:clamp(30px,5vw,52px);line-height:.9}
.theme-options{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.theme-option{padding:12px;border:2px solid var(--ink);background:#f8f1e6;text-align:left;box-shadow:5px 5px 0 rgba(23,23,25,.14)}
.theme-option.active{box-shadow:7px 7px 0 var(--ink);transform:translate(-2px,-2px)}
.theme-option b,.theme-option small{display:block}.theme-option b{margin-top:10px;font-size:16px}.theme-option small{margin-top:5px;line-height:1.35;color:#5a5044}
.theme-preview{height:150px;display:block;border:1px solid var(--line)}
.bauhaus-preview{background:linear-gradient(90deg,#20539a 0 25%,#e5b32a 25% 50%,#f7f0e5 50% 75%,#db3b27 75%)}


@media(max-width:620px){.theme-card{padding:20px 15px}.theme-options{grid-template-columns:1fr}.theme-preview{height:90px}}


.palette i{transition:background .2s}


/* H. INK PAPER & PUZZLE — v84 full asset integration */
#floorLayer{z-index:10}


/* Version 94: level-maker panel proportions refined */
.collection.is-static,
.collection.is-static:hover,
.collection.is-static:focus-visible{
  cursor:default;
  opacity:1;
}
.collection.is-static:hover b,
.collection.is-static:focus-visible b{
  text-decoration:none;
}
.title strong .maker-hotspot{
  display:inline;
  max-width:none;
  font:inherit;
  line-height:inherit;
  letter-spacing:inherit;
  white-space:inherit;
  cursor:default;
  user-select:none;
}

.maker-return{
  position:fixed;
  left:max(14px,env(safe-area-inset-left));
  bottom:max(14px,env(safe-area-inset-bottom));
  z-index:8200;
  border:2px solid var(--ink);
  padding:11px 15px;
  background:var(--yellow);
  color:var(--ink);
  box-shadow:5px 5px 0 var(--ink);
  font-weight:950;
  font-size:11px;
  letter-spacing:.09em;
}
.maker-return:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}

.maker-modal{
  z-index:12000;
  padding:18px;
  overflow:auto;
  background:rgba(23,23,25,.62);
  backdrop-filter:blur(7px);
}
.maker-card{
  width:min(1320px,97vw);
  max-height:96dvh;
  overflow:auto;
  background:var(--paper2);
  border:2px solid var(--ink);
  box-shadow:12px 12px 0 rgba(23,23,25,.35),0 28px 80px rgba(0,0,0,.32);
  padding:14px;
}
.maker-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  padding-bottom:6px;
  border-bottom:2px solid var(--ink);
}
.maker-head h2{margin:1px 0;font-size:clamp(22px,2.2vw,30px);line-height:.96;letter-spacing:-.03em}
.maker-head p{margin:5px 0 0;max-width:700px;color:#5f5548;font-size:11px;line-height:1.32}
.maker-close{
  flex:none;
  width:42px;
  height:42px;
  border:2px solid var(--ink);
  background:#fff8ed;
  font-size:29px;
  font-weight:950;
  line-height:1;
}
.maker-layout{
  display:grid;
  grid-template-columns:minmax(500px,1fr) minmax(520px,600px);
  gap:14px;
  padding-top:10px;
}
.maker-workbench{min-width:0}
.maker-toolbar{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:7px;
  margin-bottom:10px;
}
.maker-toolbar button{
  min-width:0;
  min-height:45px;
  padding:6px;
  border:1px solid var(--ink);
  background:#eee5d8;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  font-size:9px;
  font-weight:950;
  letter-spacing:.045em;
}
.maker-toolbar button.selected{
  background:var(--yellow);
  box-shadow:3px 3px 0 var(--ink);
  transform:translate(-2px,-2px);
}
.maker-rainbow-switch{display:flex;align-items:center;gap:7px;flex:none;cursor:pointer}
.maker-rainbow-switch input{position:absolute;opacity:0;pointer-events:none}
.maker-rainbow-switch span{position:relative;width:40px;height:22px;border:2px solid var(--ink);border-radius:999px;background:#d4c9ba;box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}
.maker-rainbow-switch span::after{content:"";position:absolute;left:2px;top:2px;width:14px;height:14px;border:1px solid var(--ink);border-radius:50%;background:#fff8ed;transition:transform .16s ease,background .16s ease}
.maker-rainbow-switch input:checked+span{background:linear-gradient(90deg,#ec2826,#f9bc18,#328545,#1553ca,#7433ac)}
.maker-rainbow-switch input:checked+span::after{transform:translateX(18px)}
.maker-rainbow-switch input:focus-visible+span{outline:3px solid var(--blue);outline-offset:2px}
.maker-rainbow-switch b{min-width:25px;font-size:9px;letter-spacing:.08em;text-align:center}
.maker-goal-palette[hidden],.maker-legend[hidden],.maker-colour-codes[hidden]{display:none!important}

.maker-goal-palette{
  --selected-goal-colour:var(--red);
  display:flex;
  align-items:center;
  gap:10px;
  margin:-2px 0 10px;
  padding:7px 8px;
  border:1px solid var(--ink);
  background:#e7ddcf;
  box-shadow:inset 4px 0 0 var(--red);
  transition:box-shadow .15s ease,background .15s ease;
}
.maker-goal-palette.active{box-shadow:inset 4px 0 0 var(--selected-goal-colour)}
.maker-rainbow-inline{display:flex;align-items:center;gap:9px;flex:none;padding-right:10px;border-right:1px solid rgba(23,23,25,.32)}
.maker-rainbow-inline>strong{font-size:8px;letter-spacing:.09em;white-space:nowrap}
.maker-goal-colour-controls{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:9px;min-width:0;flex:1}
.maker-goal-colour-controls>strong{font-size:8px;letter-spacing:.09em;white-space:nowrap}
.maker-goal-colour-controls>small{font-size:7px;line-height:1.15;color:#5d554b;max-width:110px}
.maker-rainbow-description{margin-left:auto;max-width:none!important;font-size:7px;line-height:1.2;color:#5d554b;white-space:nowrap}
.maker-rainbow-description code{font-weight:950;color:var(--ink);background:#f7f0e5;padding:1px 3px;border:1px solid rgba(23,23,25,.25)}
.maker-goal-palette.rainbow-on>.maker-rainbow-description{display:none}
.maker-goal-palette.rainbow-off .maker-goal-colour-controls{display:none}
.maker-goal-palette.rainbow-off{background:#f6eee2;box-shadow:inset 4px 0 0 var(--ink)}
.maker-goal-swatches{display:grid;grid-template-columns:repeat(15,minmax(14px,1fr));gap:3px;min-width:0}
.maker-goal-swatches button{position:relative;min-width:0;height:25px;padding:3px;border:1px solid rgba(23,23,25,.55);background:#f8f0e4}
.maker-goal-swatches button span{display:block;width:100%;height:100%;background:var(--goal-colour);box-shadow:inset 0 0 0 1px rgba(255,255,255,.24)}
.maker-goal-swatches button.selected{outline:2px solid var(--ink);outline-offset:1px;transform:translateY(-1px)}
.maker-goal-swatches button.selected::after{content:"";position:absolute;right:1px;bottom:1px;width:5px;height:5px;background:#fff;border:1px solid var(--ink);border-radius:50%}
.maker-tool-icon{
  position:relative;
  display:block;
  width:26px;
  height:26px;
  flex:none;
  border:1px solid rgba(23,23,25,.32);
  background:#f4eadb;
}
.maker-tool-icon.wall{background:#222326;box-shadow:inset 0 -6px #050506}
.maker-tool-icon.floor{background:#f2e7d6;background-image:linear-gradient(rgba(70,55,35,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(70,55,35,.12) 1px,transparent 1px);background-size:8px 8px}
.maker-tool-icon.player::before,.maker-tool-icon.playergoal::before{content:"";position:absolute;left:50%;top:50%;width:13px;height:18px;transform:translate(-50%,-50%);border-radius:50% 50% 42% 42%;background:var(--blue);box-shadow:0 3px 0 #15345f}
.maker-tool-icon.box::before,.maker-tool-icon.boxgoal::before{content:"";position:absolute;inset:5px;background:var(--yellow);border:2px solid #8b6816;box-shadow:2px 2px 0 rgba(23,23,25,.3)}
.maker-tool-icon.goal::before,.maker-tool-icon.boxgoal::after,.maker-tool-icon.playergoal::after{content:"";position:absolute;left:50%;top:50%;width:17px;height:17px;transform:translate(-50%,-50%);border-radius:50%;border:3px solid var(--selected-goal-colour,var(--red))}
.maker-tool-icon.boxgoal::before,.maker-tool-icon.playergoal::before{z-index:2}
.maker-tool-icon.boxgoal::after,.maker-tool-icon.playergoal::after{z-index:1}
.maker-tool-icon.void{background:repeating-linear-gradient(135deg,#ddd2c2 0 5px,#f2eadf 5px 10px)}

.maker-grid-shell{
  min-height:330px;
  display:grid;
  place-items:center;
  overflow:auto;
  padding:14px;
  border:2px solid var(--ink);
  background:#d8cdbd;
  box-shadow:inset 0 0 0 6px rgba(255,255,255,.3);
}
.maker-grid{
  --maker-cols:10;
  width:min(100%,720px);
  display:grid;
  grid-template-columns:repeat(var(--maker-cols),minmax(18px,1fr));
  border:2px solid var(--ink);
  background:#c8bdad;
  touch-action:none;
  user-select:none;
}
.maker-cell{
  position:relative;
  min-width:18px;
  aspect-ratio:1;
  padding:0;
  border:0;
  border-right:1px solid rgba(40,30,20,.18);
  border-bottom:1px solid rgba(40,30,20,.18);
  background:#f1e7d7;
}
.maker-cell.type-void{background:repeating-linear-gradient(135deg,#d4c9ba 0 5px,#e4dbce 5px 10px)}
.maker-cell.type-floor{background:#f1e7d7}
.maker-cell.type-wall{background:linear-gradient(145deg,#3a3b3e,#1c1d20 68%,#09090a)}
.maker-cell.type-wall::after{content:"";position:absolute;left:3px;right:3px;bottom:3px;height:18%;background:#050506}
.maker-cell.type-goal::before,.maker-cell.type-playergoal::before{content:"";position:absolute;left:50%;top:50%;width:72%;height:72%;transform:translate(-50%,-50%);background:center/contain no-repeat var(--goal-sprite);z-index:1}
.maker-cell.type-box::after{content:"";position:absolute;inset:17%;background:linear-gradient(145deg,#f2c33b,#d89f16);border:2px solid #77570e;box-shadow:2px 2px 0 rgba(23,23,25,.35);z-index:2}
.maker-cell.type-boxgoal::before{content:"";position:absolute;left:50%;top:50%;width:84%;height:84%;transform:translate(-50%,-50%);background:center/contain no-repeat var(--box-sprite);z-index:2}
.maker-cell.type-boxgoal::after{display:none}
.maker-cell.type-player::after,.maker-cell.type-playergoal::after{content:"";position:absolute;left:50%;top:50%;width:36%;height:55%;transform:translate(-50%,-50%);border-radius:50% 50% 42% 42%;background:var(--blue);box-shadow:0 3px 0 #15345f;z-index:2}
.maker-cell:focus-visible{outline:3px solid var(--red);outline-offset:-3px;z-index:5}

.maker-controls{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-areas:
    "generator paste"
    "save paste"
    "status status"
    "actions actions";
  align-content:start;
  gap:8px;
  min-width:0;
}
.maker-panel{min-width:0;border:2px solid var(--ink);padding:10px;background:#eee5d8}
.maker-panel h3{margin:0 0 8px;font-size:10px;letter-spacing:.12em}
.maker-generator-fields{display:grid;grid-template-columns:1fr auto 1fr 1fr;align-items:end;gap:7px}
.maker-generator-fields label{font-size:8px;font-weight:900;letter-spacing:.08em}
.maker-generator-fields input{display:block;width:100%;height:34px;margin-top:3px;border:1px solid var(--ink);background:#fff9ef;text-align:center;font-weight:950;font-size:15px}
.maker-generator-fields>span{padding-bottom:8px;font-weight:950}
.maker-generator-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:8px}
.maker-check-option{display:grid;grid-template-columns:auto 1fr;align-items:start;gap:6px;min-width:0;padding:7px;border:1px solid #b6aa98;background:#fff8ed;cursor:pointer}
.maker-check-option input{width:17px;height:17px;margin:0;accent-color:var(--red)}
.maker-check-option span{display:block;min-width:0}
.maker-check-option b{display:block;font-size:9px;letter-spacing:.08em}
.maker-check-option small{display:block;margin-top:2px;color:#675d50;font-size:7px;line-height:1.2}
.maker-generate{width:100%;min-height:38px;margin-top:8px;border:2px solid var(--ink);background:var(--yellow);color:var(--ink);font-size:10px;font-weight:950;letter-spacing:.08em;box-shadow:3px 3px 0 var(--ink)}
.maker-generate:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.maker-generate:disabled{opacity:.62;cursor:wait;transform:none;box-shadow:1px 1px 0 var(--ink)}
.maker-mini-actions button,.maker-save-row button,.maker-load-row button{border:1px solid var(--ink);background:#fff8ed;font-weight:950;font-size:8px;letter-spacing:.055em}
.maker-mini-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:7px}
.maker-mini-actions.maker-three-actions{grid-template-columns:repeat(3,1fr)}
.maker-mini-actions button{min-height:30px;padding:5px}
.maker-save-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px}
.maker-save-row input,.maker-load-row select{min-width:0;height:34px;border:1px solid var(--ink);background:#fff9ef;color:var(--ink);font-size:10px;font-weight:850}
.maker-save-row input{padding:0 8px}
.maker-save-row button{padding:0 10px}
.maker-load-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px;margin-top:6px}
.maker-load-row select{padding:0 6px;text-overflow:ellipsis}
.maker-load-row button{padding:0 8px}
.maker-load-row button:disabled{opacity:.45}
.maker-paste-panel{
  grid-area:paste;
  display:flex;
  flex-direction:column;
  min-height:0;
}
.maker-paste-panel textarea{
  width:100%;
  height:auto;
  min-height:150px;
  flex:1 1 auto;
  resize:none;
  border:1px solid var(--ink);
  padding:10px;
  background:#fffaf1;
  color:var(--ink);
  font:700 13px/1.12 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  white-space:pre;
  tab-size:2;
}
.maker-legend{margin:7px 0 0;font-size:8px;line-height:1.4;color:#62584c}
.maker-legend code{padding:1px 4px;border:1px solid #b7aa97;background:#fff8ed;color:var(--ink);font-weight:900}
.maker-colour-codes{margin-top:6px;border-top:1px solid #c8baa7;padding-top:5px;font-size:8px;line-height:1.45;color:#62584c}
.maker-colour-codes summary{cursor:pointer;font-weight:950;letter-spacing:.09em;color:var(--ink)}
.maker-colour-codes p{margin:5px 0 0}
.maker-colour-codes code{display:inline-block;min-width:29px;margin:1px 2px 1px 0;padding:1px 3px;border:1px solid #b7aa97;background:#fff8ed;text-align:center;font-weight:950;color:var(--ink)}
.maker-generator-panel{grid-area:generator}
.maker-save-panel{grid-area:save}
.maker-status{grid-area:status}
.maker-main-actions{grid-area:actions}
.maker-status{min-height:38px;padding:8px 10px;border-left:6px solid var(--blue);background:#e7e0d5;font-size:11px;font-weight:800;line-height:1.3}
.maker-status.error{border-color:var(--red);background:#f4dcd5;color:#7d2118}
.maker-status.success{border-color:#398550;background:#dcebdc;color:#245b31}
.maker-main-actions{display:flex;gap:8px;margin-top:0}
.maker-main-actions button{min-height:44px;border:2px solid var(--ink);font-weight:950;letter-spacing:.07em}
.maker-exit{flex:0 0 auto;padding:0 13px;background:#eee5d8}
.maker-test{flex:1;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;gap:16px}
.maker-test b{font-size:22px}
body.maker-testing .level-picker{display:none!important}

.complete-card.final-complete{box-shadow:12px 12px 0 var(--yellow),-12px -12px 0 var(--blue),0 28px 80px rgba(0,0,0,.38)}
.complete-card.final-complete .complete-art span{font-size:60px}

@media(max-width:1120px){
  .maker-layout{grid-template-columns:1fr}
  .maker-controls{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
  .maker-grid-shell{min-height:300px}
}
@media(max-width:900px){
  .maker-card{padding:14px}
}
@media(max-width:620px){
  .maker-modal{padding:7px;place-items:start center}
  .maker-card{width:100%;max-height:98dvh;padding:12px}
  .maker-head{gap:8px;padding-bottom:11px}
  .maker-head h2{font-size:24px}
  .maker-head p{font-size:9px}
  .maker-close{width:36px;height:36px;font-size:25px}
  .maker-layout{gap:12px;padding-top:12px}
  .maker-toolbar{grid-template-columns:repeat(4,1fr);gap:4px}
  .maker-toolbar button{min-height:45px;gap:3px;padding:4px;flex-direction:column;font-size:7px}
  .maker-tool-icon{width:21px;height:21px}
  .maker-grid-shell{min-height:255px;padding:7px}
  .maker-controls{
    display:grid;
    grid-template-columns:1fr;
    grid-template-areas:
      "generator"
      "save"
      "paste"
      "status"
      "actions";
  }
  .maker-generator-options{grid-template-columns:1fr}
  .maker-check-option small{font-size:7px}
  .maker-paste-panel textarea{height:180px;min-height:180px;flex:none;resize:vertical}
  .maker-return{left:8px;bottom:8px;padding:8px 10px;font-size:8px}
}
.complete-card.final-complete h2{font-size:clamp(30px,4.3vw,45px);line-height:.9;letter-spacing:-.045em}
@media(max-width:560px){.complete-card.final-complete h2{font-size:clamp(25px,8.5vw,36px)}}
@media(min-width:901px){.maker-grid{width:min(100%,360px)}.maker-grid-shell{align-content:center}}
.title strong .maker-hotspot{color:inherit!important;margin:0!important}

/* Version 95: structured room-and-path level generation */


/* Version 96 — end-of-pack congratulations and future collection placeholders */
.final-pack-picker[hidden]{display:none}
.final-pack-picker{margin:0 0 24px;padding-top:17px;border-top:2px solid var(--ink)}
.final-pack-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:10px}
.final-pack-heading strong{font-size:11px;line-height:1.1;letter-spacing:.12em;font-weight:950}
.final-pack-heading span{font-size:10px;line-height:1.2;font-weight:760;color:#5d564d;text-align:right}
.final-pack-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.final-pack-option{position:relative;min-width:0;padding:0;border:2px solid var(--ink);background:#f7f0e5;color:var(--ink);box-shadow:3px 3px 0 var(--ink);cursor:pointer;text-align:left;transition:transform .12s ease,box-shadow .12s ease}
.final-pack-option:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink)}
.final-pack-option:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.final-pack-art{position:relative;display:block;height:62px;overflow:hidden;border-bottom:2px solid var(--ink);background:#ddd}
.final-pack-art i{position:absolute;width:54px;height:54px;left:-15px;top:-14px;border:2px solid var(--ink);border-radius:50%;background:rgba(255,255,255,.48)}
.final-pack-art>b:not(.pack-no){position:absolute;right:8px;bottom:4px;font-size:28px;line-height:1;font-weight:950;letter-spacing:-.07em}
.final-pack-art.image-art{background:#000;color:#fff}
.final-pack-art.image-art picture,.final-pack-art.image-art img{display:block;width:100%;height:100%}
.final-pack-art.image-art img{object-fit:cover;object-position:center}
.final-pack-art.image-art .pack-no{position:absolute;z-index:3;left:10px;top:9px;min-width:34px;padding:5px 7px 4px;border:2px solid #fff;background:rgba(23,23,25,.83);color:#fff;box-shadow:3px 3px 0 rgba(0,0,0,.42);font-size:15px;line-height:1;font-weight:1000;letter-spacing:-.03em;text-align:center}
.pack-red .final-pack-art:not(.image-art){background:var(--red);color:#fff}
.pack-green .final-pack-art:not(.image-art){background:var(--green);color:#fff}
.pack-blue .final-pack-art:not(.image-art){background:var(--blue);color:#fff}
.pack-yellow .final-pack-art:not(.image-art){background:var(--yellow)}
.pack-purple .final-pack-art:not(.image-art){background:#8e44ad;color:#fff}
.pack-teal .final-pack-art:not(.image-art){background:#00a6b2;color:#fff}
.final-pack-name{display:block;padding:9px 8px 8px;font-size:10px;line-height:1.08;font-weight:950;letter-spacing:.04em}
.final-pack-name small{display:block;margin-top:4px;font-size:8px;letter-spacing:.12em;font-weight:900;color:#6f675d}
.final-pack-status{min-height:1.2em!important;margin:9px 0 0!important;max-width:none!important;font-size:10px!important;line-height:1.25!important;font-weight:800!important;color:#655d53}
.complete-card.final-complete{width:min(760px,94vw);grid-template-columns:150px minmax(0,1fr)}
.complete-card.final-complete .complete-art{min-height:500px}
.complete-card.final-complete .complete-copy{padding:28px 32px 28px}
.complete-card.final-complete h2{margin-bottom:10px}
.complete-card.final-complete #completeText{max-width:48ch;margin-bottom:18px}
@media(max-width:680px){
  .complete-card.final-complete{grid-template-columns:82px minmax(0,1fr);width:min(96vw,620px)}
  .complete-card.final-complete .complete-art{min-height:540px}
  .complete-card.final-complete .complete-copy{padding:24px 17px 22px}
  .final-pack-heading{display:block}
  .final-pack-heading span{display:block;margin-top:4px;text-align:left}
  .final-pack-grid{grid-template-columns:1fr}
  .final-pack-option{display:grid;grid-template-columns:76px minmax(0,1fr);align-items:stretch}
  .final-pack-art{height:52px;border-bottom:0;border-right:2px solid var(--ink)}
  .final-pack-art.image-art .pack-no{left:5px;top:5px;min-width:24px;padding:3px 4px;border-width:1px;box-shadow:2px 2px 0 rgba(0,0,0,.4);font-size:10px}
  .final-pack-name{display:flex;flex-direction:column;justify-content:center}
}
@media(max-height:720px){
  .complete-modal{align-items:flex-start;overflow:auto;padding:18px 0}
  .complete-card.final-complete .complete-art{min-height:470px}
  .final-pack-art{height:50px}
}

/* Version 97 — puzzle packs and expanded level workshop */
.pack-modal{
  z-index:11000;
  padding:18px;
  overflow:auto;
  background:rgba(23,23,25,.58);
  backdrop-filter:blur(7px);
}
.pack-card{
  width:min(980px,94vw);
  max-height:94dvh;
  overflow:auto;
  padding:24px;
  background:var(--paper2);
  border:2px solid var(--ink);
  box-shadow:12px 12px 0 rgba(23,23,25,.35),0 28px 80px rgba(0,0,0,.32);
}
.pack-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding-bottom:16px;border-bottom:2px solid var(--ink)}
.pack-head h2{margin:5px 0 4px;font-size:clamp(30px,5vw,54px);line-height:.88;letter-spacing:-.055em}
.pack-head p{margin:9px 0 0;max-width:620px;color:#61574b;font-size:12px;line-height:1.4}
.pack-close{flex:none;width:44px;height:44px;border:2px solid var(--ink);background:var(--red);color:#fff;font-size:30px;line-height:1;font-weight:950}
.pack-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;margin-top:18px}
.pack-option{position:relative;min-width:0;padding:0;border:2px solid var(--ink);background:#f7f0e5;color:var(--ink);box-shadow:5px 5px 0 var(--ink);cursor:pointer;text-align:left;transition:transform .12s ease,box-shadow .12s ease}
.pack-option:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}
.pack-option:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
.pack-option.active{outline:5px solid var(--yellow);outline-offset:3px}
.pack-option .final-pack-art{height:112px}
.pack-option .final-pack-art>b:not(.pack-no){font-size:54px;right:14px;bottom:8px}
.pack-option .final-pack-name{padding:13px 12px 12px;font-size:15px}
.pack-option .final-pack-name small{font-size:9px;line-height:1.35}
.pack-black .final-pack-art{background:var(--ink);color:#fff}
.pack-license-note{margin:17px 0 0;padding-top:12px;border-top:1px solid #a89d8e;color:#655c50;font-size:9px;line-height:1.4;font-weight:750}
.pack-license-note a{color:var(--blue);font-weight:850;text-decoration:underline;text-underline-offset:2px}
.pack-license-note a:hover{text-decoration-thickness:2px}
.pack-license-note a:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.final-pack-option.active{display:none}
.collection{cursor:pointer}
.collection:focus-visible{outline:3px solid var(--red);outline-offset:5px}

/* Sprite-based coloured goals and solved boxes in the editor. */
.maker-tool-icon.boxgoal::after{width:23px;height:23px;border-width:3px}
.maker-tool-icon.boxgoal::before{inset:7px;background:var(--selected-goal-colour,var(--red));border-color:var(--ink);box-shadow:2px 2px 0 rgba(23,23,25,.35)}
.maker-cell.type-boxgoal::before{width:84%;height:84%;background:center/contain no-repeat var(--box-sprite)}
.maker-cell.type-boxgoal::after{display:none}

/* Larger workshop; the grid now uses a calculated cell size and always fits its bay. */
.maker-card{width:min(1600px,98.5vw);max-height:98dvh;overflow:hidden}
.maker-layout{grid-template-columns:minmax(560px,1fr) minmax(500px,620px);height:calc(98dvh - 112px);min-height:520px;align-items:stretch}
.maker-workbench{display:flex;flex-direction:column;min-height:0}
.maker-toolbar{flex:none}
.maker-grid-shell{flex:1 1 auto;min-height:0;height:auto;overflow:hidden;padding:12px}
.maker-grid{
  --maker-cell:36px;
  width:calc(var(--maker-cols) * var(--maker-cell));
  max-width:none;
  grid-template-columns:repeat(var(--maker-cols),var(--maker-cell));
  grid-auto-rows:var(--maker-cell);
}
.maker-cell{width:var(--maker-cell);height:var(--maker-cell);min-width:0;aspect-ratio:auto}
.maker-controls{min-height:0;overflow:auto;padding-right:2px}
@media(min-width:901px){.maker-grid{width:calc(var(--maker-cols) * var(--maker-cell))}.maker-grid-shell{align-content:center}}

@media(max-width:1120px){
  .maker-card{overflow:auto}
  .maker-layout{height:auto;min-height:0;grid-template-columns:1fr}
  .maker-grid-shell{height:min(64dvh,680px);min-height:330px}
  .maker-controls{overflow:visible}
}
@media(max-width:620px){
  .pack-card{width:100%;padding:15px}
  .pack-grid{grid-template-columns:1fr;gap:11px}
  .pack-option{display:grid;grid-template-columns:94px minmax(0,1fr);align-items:stretch}
  .pack-option .final-pack-art{height:74px;border-bottom:0;border-right:2px solid var(--ink)}
  .pack-option .final-pack-art>b:not(.pack-no){font-size:31px}
  .pack-option .final-pack-art.image-art .pack-no{left:5px;top:5px;min-width:26px;padding:3px 4px;border-width:1px;box-shadow:2px 2px 0 rgba(0,0,0,.4);font-size:11px}
  .pack-option .final-pack-name{display:flex;flex-direction:column;justify-content:center;font-size:11px}
  .maker-grid-shell{height:min(58dvh,520px);min-height:260px}
}

/* Long imported packs need a contained, scrollable chooser. */
.level-picker #levelButtons{
  max-height:min(58dvh,520px);
  overflow-y:auto;
  overscroll-behavior:contain;
  padding-right:3px;
}
@media(max-width:760px){
  .level-picker #levelButtons{max-height:calc(78dvh - 58px)}
}


/* VERSION 98 — compact release and a workshop that never scrolls sideways. */
.maker-modal{
  padding:8px;
  overflow:hidden;
  place-items:center;
}
.maker-card{
  box-sizing:border-box;
  width:min(1600px,calc(100vw - 16px));
  height:min(980px,calc(100dvh - 16px));
  max-height:none;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.maker-card,.maker-card *{box-sizing:border-box;min-width:0}
.maker-head{flex:0 0 auto}
.maker-layout{
  flex:1 1 auto;
  width:100%;
  height:auto;
  min-height:0;
  grid-template-columns:minmax(0,1.15fr) minmax(430px,.85fr);
  overflow:hidden;
}
.maker-workbench,.maker-controls{min-width:0;min-height:0;overflow:hidden}
.maker-grid-shell{
  width:100%;
  max-width:100%;
  min-width:0;
  overflow:hidden;
  overscroll-behavior:none;
}
.maker-grid{max-width:100%;max-height:100%}
.maker-controls{
  overflow-x:hidden;
  overflow-y:hidden;
  padding-right:0;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-rows:minmax(0,auto) minmax(0,auto) auto auto;
}
.maker-panel{overflow:hidden}
.maker-generator-fields{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) minmax(52px,.72fr)}
.maker-generator-fields input,.maker-save-row input,.maker-load-row select{min-width:0;max-width:100%}
.maker-paste-panel textarea{min-width:0;max-width:100%;overflow-x:hidden;white-space:pre;word-break:normal}
@media(max-width:1120px) and (min-width:761px){
  .maker-card{overflow:hidden;padding:10px}
  .maker-layout{height:auto;grid-template-columns:minmax(0,1fr) minmax(400px,46%);gap:10px}
  .maker-grid-shell{height:auto;min-height:0}
  .maker-controls{overflow:hidden}
  .maker-toolbar{gap:4px;margin-bottom:6px}
  .maker-toolbar button{min-height:40px;padding:4px;font-size:8px}
  .maker-panel{padding:7px}
  .maker-panel h3{margin-bottom:5px}
  .maker-generator-options{margin-top:5px;gap:4px}
  .maker-check-option{padding:5px}
  .maker-generate{min-height:34px;margin-top:5px}
  .maker-mini-actions{margin-top:4px;gap:4px}
  .maker-mini-actions button{min-height:26px}
  .maker-status{min-height:31px;padding:5px 8px}
  .maker-main-actions button{min-height:36px}
}
@media(max-width:760px){
  .maker-modal{overflow-y:auto;overflow-x:hidden;place-items:start center}
  .maker-card{width:100%;height:auto;min-height:calc(100dvh - 16px);overflow:hidden}
  .maker-layout{height:auto;grid-template-columns:1fr;overflow:visible}
  .maker-workbench,.maker-controls{overflow:visible}
  .maker-grid-shell{height:min(52dvh,520px);min-height:250px}
  .maker-controls{grid-template-columns:1fr;grid-template-areas:"generator" "save" "paste" "status" "actions"}
}


/* v99 puzzle-pack unlocking */
.pack-option.locked,.final-pack-option.locked{cursor:not-allowed;opacity:.58;filter:grayscale(.45);box-shadow:3px 3px 0 #8f887e}
.pack-option.locked:hover,.final-pack-option.locked:hover,.pack-option.locked:active,.final-pack-option.locked:active{transform:none;box-shadow:3px 3px 0 #8f887e}
.pack-option.locked .final-pack-art,.final-pack-option.locked .final-pack-art{position:relative}
.pack-option.locked .final-pack-art::after,.final-pack-option.locked .final-pack-art::after{content:"LOCKED";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-7deg);padding:5px 8px;border:2px solid currentColor;background:#f7f0e5;font-size:10px;font-weight:1000;letter-spacing:.12em;line-height:1;box-shadow:2px 2px 0 currentColor}
.pack-lock-label{display:block;margin-top:7px;padding-top:6px;border-top:1px solid currentColor;font-style:normal;font-size:8px;font-weight:1000;line-height:1.3;letter-spacing:.055em;color:#5d574f}


/* v100 — unrestricted backend puzzle browser and clearer lock stamp. */
.pack-option.locked .final-pack-art::after,.final-pack-option.locked .final-pack-art::after{color:var(--ink)!important;border-color:var(--ink)!important;box-shadow:2px 2px 0 var(--ink)!important}
.maker-existing-strip{flex:0 0 auto;margin:0 0 8px;padding:7px 8px;border:2px solid var(--ink);background:#eee5d8}
.maker-existing-strip h3{margin:0 0 5px;font-size:9px;line-height:1;letter-spacing:.12em}
.maker-existing-row{display:grid;grid-template-columns:minmax(145px,.7fr) minmax(190px,1.3fr) auto;gap:6px;min-width:0}
.maker-existing-row select,.maker-existing-row button{height:32px;min-width:0;border:1px solid var(--ink);font-size:9px;font-weight:900}
.maker-existing-row select{width:100%;padding:0 7px;background:#fff9ef;color:var(--ink);text-overflow:ellipsis}
.maker-existing-row button{padding:0 12px;background:var(--blue);color:#fff;letter-spacing:.06em;white-space:nowrap}
.maker-existing-row button:disabled{opacity:.45}
@media(max-width:760px){.maker-existing-row{grid-template-columns:1fr 1fr}.maker-existing-row button{grid-column:1/-1}.maker-existing-strip{margin-bottom:7px}}


/* v102 — integrated backend solver dialogue. */
.maker-main-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.maker-main-actions .maker-solve{background:var(--blue);color:#fff;border-color:var(--ink)}
.maker-solver-modal{
  z-index:15000;
  padding:12px;
  overflow:hidden;
  place-items:center;
  background:rgba(23,23,25,.66);
  backdrop-filter:blur(7px);
}
.maker-solver-card{
  box-sizing:border-box;
  width:min(780px,calc(100vw - 24px));
  max-height:calc(100dvh - 24px);
  overflow:auto;
  padding:22px;
  background:var(--paper2);
  border:2px solid var(--ink);
  box-shadow:12px 12px 0 rgba(23,23,25,.42),0 28px 80px rgba(0,0,0,.35);
}
.maker-solver-card,.maker-solver-card *{box-sizing:border-box;min-width:0}
.maker-solver-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding-bottom:14px;border-bottom:2px solid var(--ink)}
.maker-solver-head h2{margin:5px 0 4px;font-size:clamp(28px,5vw,48px);line-height:.9;letter-spacing:-.05em}
.maker-solver-head p{margin:8px 0 0;max-width:58ch;color:#61574b;font-size:11px;line-height:1.4;font-weight:750}
.maker-solver-progress{margin:15px 0 12px;padding:12px;border:2px solid var(--ink);background:#eee5d8}
.maker-solver-progress progress{display:block;width:100%;height:18px;accent-color:var(--red)}
.maker-solver-progress-line{display:flex;justify-content:space-between;gap:12px;margin-top:8px;font-size:10px;line-height:1.3}
.maker-solver-progress-line strong{font-weight:1000}
.maker-solver-progress-line span{text-align:right;font-variant-numeric:tabular-nums;color:#5e564c;font-weight:850}
.maker-solver-progress p{margin:7px 0 0;color:#6a6258;font-size:8px;line-height:1.35;font-weight:750}
.maker-solution-label{display:block;margin:15px 0 6px;font-size:9px;font-weight:1000;letter-spacing:.13em}
.maker-solution-import{margin:14px 0 0;padding:12px;border:2px solid var(--ink);background:#f7f0e5}
.maker-solution-import-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:6px}
.maker-solution-import-head .maker-solution-label{margin:0}
.maker-solution-import-head span{font-size:8px;line-height:1.3;color:#6a6258;font-weight:800;text-align:right}
.maker-solution-import-input{display:block;width:100%;height:92px;resize:vertical;padding:10px;border:2px solid var(--ink);background:#fffaf1;color:var(--ink);font:750 13px/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow-wrap:anywhere;white-space:pre-wrap}
.maker-solution-import-actions{display:grid;grid-template-columns:1.4fr 1fr;gap:8px;margin-top:8px}
.maker-solution-import-actions button{min-height:36px;padding:7px 10px;border:2px solid var(--ink);background:#f7f0e5;color:var(--ink);font-size:9px;font-weight:1000;letter-spacing:.04em}
.maker-solution-import-actions button:first-child{background:var(--blue);color:#fff}
.maker-solution-import-actions button:disabled{opacity:.42;cursor:not-allowed}
.maker-solution-output{display:block;width:100%;height:120px;resize:vertical;padding:12px;border:2px solid var(--ink);background:#171719;color:#f4eee3;font:700 13px/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow-wrap:anywhere;white-space:pre-wrap}
.maker-solver-status{min-height:38px;margin:10px 0;padding:9px 11px;border-left:7px solid var(--yellow);background:#eee5d8;color:#4f483f;font-size:10px;line-height:1.4;font-weight:850}
.maker-solver-status.success{border-left-color:#3f7d55}
.maker-solver-status.error{border-left-color:var(--red)}
.maker-solver-actions{display:grid;grid-template-columns:1.4fr repeat(3,minmax(0,1fr));gap:8px}
.maker-solver-actions button{min-height:42px;padding:8px;border:2px solid var(--ink);background:#f7f0e5;color:var(--ink);font-size:9px;font-weight:1000;letter-spacing:.035em}
.maker-solver-actions button:disabled{opacity:.42;cursor:not-allowed}
.maker-solver-actions .maker-solver-start{background:var(--red);color:#fff}
@media(max-width:620px){
  .maker-main-actions{grid-template-columns:1fr 1fr}
  .maker-main-actions .maker-test{grid-column:1/-1}
  .maker-solver-card{padding:15px}
  .maker-solver-actions{grid-template-columns:1fr 1fr}
  .maker-solution-import-head{display:block}
  .maker-solution-import-head span{display:block;margin-top:5px;text-align:left}
  .maker-solution-import-actions{grid-template-columns:1fr}
  .maker-solution-output{height:105px}
}

/* v133 inherited level-maker additions */
@media(max-width:1120px){.maker-generator-options{grid-template-columns:1fr 1fr}.maker-generator-options .maker-check-option:last-child{grid-column:1/-1}}
@media(max-width:560px){.complete-actions{display:grid;grid-template-columns:1fr}.standard-completion-actions{width:100%}.complete-secondary,.complete-primary{width:100%;min-width:0}}

/* BOXXY v216 — fixed Saved Level Library grid sizing and exact column selection. */
.maker-pack-builder-launch{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;margin-top:7px;padding-top:7px;border-top:1px solid #b6aa98}
.maker-pack-builder-launch button{min-height:34px;padding:0 10px;border:2px solid var(--ink);background:var(--yellow);display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:9px;font-weight:1000;letter-spacing:.075em;box-shadow:3px 3px 0 var(--ink)}
.maker-pack-builder-launch button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.maker-pack-builder-launch button b{font-size:20px;line-height:1}
.maker-pack-builder-launch small{font-size:7px;line-height:1.25;color:#665d51;font-weight:750}

.maker-pack-builder-modal{z-index:16500;padding:8px;overflow:hidden;place-items:center;background:rgba(23,23,25,.72);backdrop-filter:blur(8px)}
.maker-pack-builder-card{box-sizing:border-box;width:min(1600px,calc(100vw - 16px));height:min(1040px,calc(100dvh - 16px));overflow:auto;padding:15px;background:var(--paper2);border:2px solid var(--ink);box-shadow:13px 13px 0 rgba(23,23,25,.45),0 28px 80px rgba(0,0,0,.38)}
.maker-pack-builder-card,.maker-pack-builder-card *{box-sizing:border-box;min-width:0}
.maker-pack-builder-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding-bottom:11px;border-bottom:2px solid var(--ink)}
.maker-pack-builder-head h2{margin:3px 0 2px;font-size:clamp(28px,4.2vw,48px);line-height:.88;letter-spacing:-.05em}
.maker-pack-builder-head p{margin:7px 0 0;max-width:820px;color:#61574b;font-size:10px;line-height:1.38;font-weight:760}

.pack-builder-command-row{display:flex;align-items:end;justify-content:space-between;gap:12px;margin-top:10px}
.pack-builder-draft-controls{display:grid;grid-template-columns:minmax(190px,1fr) auto auto auto;gap:6px;align-items:end;flex:1 1 auto;max-width:760px}
.pack-builder-draft-controls label,.pack-metadata-grid label,.daily-settings label{display:block;font-size:8px;font-weight:1000;letter-spacing:.09em}
.pack-builder-draft-controls select,.pack-builder-draft-controls button,.pack-metadata-grid input,.pack-metadata-grid select,.pack-metadata-grid textarea,.daily-settings input,.daily-settings select{width:100%;height:35px;margin-top:3px;border:1px solid var(--ink);background:#fff9ef;color:var(--ink);font-size:9px;font-weight:900}
.pack-builder-draft-controls select,.pack-metadata-grid input,.pack-metadata-grid select,.daily-settings input,.daily-settings select{padding:0 8px}
.pack-builder-draft-controls button{width:auto;margin:0;padding:0 10px;background:#eee5d8;white-space:nowrap;letter-spacing:.04em}
.pack-builder-draft-controls button:disabled{opacity:.42}
.pack-builder-tabs{display:grid;grid-template-columns:1fr 1fr;gap:5px;flex:0 0 min(390px,38vw)}
.pack-builder-tabs button{min-height:38px;padding:7px 10px;border:2px solid var(--ink);background:#eee5d8;font-size:9px;font-weight:1000;letter-spacing:.08em}
.pack-builder-tabs button[aria-selected="true"]{background:var(--blue);color:#fff;box-shadow:3px 3px 0 var(--ink);transform:translate(-2px,-2px)}

.pack-builder-status{min-height:34px;margin:9px 0;padding:7px 10px;border-left:6px solid var(--blue);background:#e7e0d5;font-size:9px;line-height:1.35;font-weight:850}
.pack-builder-status.error{border-left-color:var(--red);background:#f4dcd5;color:#7d2118}
.pack-builder-status.success{border-left-color:#398550;background:#dcebdc;color:#245b31}

.pack-builder-library,.pack-builder-workspace{margin-top:9px;padding:10px;border:2px solid var(--ink);background:#eee5d8}
.pack-builder-library>header,.pack-workspace-heading{display:flex;align-items:end;justify-content:space-between;gap:14px;margin-bottom:8px}
.pack-builder-library h3,.pack-workspace-heading h3{margin:0;font-size:11px;line-height:1;letter-spacing:.12em}
.pack-builder-library header>div:first-child span,.pack-workspace-heading span{display:block;margin-top:4px;color:#665d52;font-size:8px;font-weight:950;letter-spacing:.08em}
.pack-library-controls{display:grid;grid-template-columns:minmax(190px,1fr) 84px auto auto auto;align-items:end;gap:6px;flex:1 1 auto;max-width:900px}
.pack-library-controls>input{width:100%;height:33px;padding:0 9px;border:1px solid var(--ink);background:#fff9ef;color:var(--ink);font-size:9px;font-weight:850}
.pack-library-columns{display:grid;grid-template-rows:auto 33px;gap:3px;color:#514a42;font-size:6.5px;font-weight:1000;letter-spacing:.075em}
.pack-library-columns select{width:100%;height:33px;padding:0 6px;border:1px solid var(--ink);background:#fff9ef;color:var(--ink);font-family:inherit;font-size:9px;font-weight:900}
.pack-library-hide-used,.pack-library-show-hidden{height:33px;display:flex;align-items:center;justify-content:center;gap:6px;padding:0 9px;border:1px solid var(--ink);background:#fff8ed;cursor:pointer;white-space:nowrap}
.pack-library-hide-used input,.pack-library-show-hidden input{width:14px;height:14px;margin:0;accent-color:var(--blue)}
.pack-library-hide-used span,.pack-library-show-hidden span{margin:0!important;color:var(--ink)!important;font-size:7px!important;font-weight:1000!important;letter-spacing:.055em!important}
.pack-library-expand{height:33px;padding:0 10px;border:1px solid var(--ink);background:var(--yellow);color:var(--ink);font-size:7px;font-weight:1000;letter-spacing:.045em;white-space:nowrap}
.pack-library-expand[aria-expanded="true"]{background:var(--blue);color:#fff}
.pack-workspace-heading p{margin:0;max-width:520px;text-align:right;color:#665d52;font-size:8px;line-height:1.3;font-weight:760}

.pack-level-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;align-items:start}
.pack-library-viewport{height:238px;min-height:170px;max-height:none;overflow:auto;resize:vertical;padding:2px 13px 9px 2px;border-bottom:1px solid #b8ac9b;scrollbar-gutter:stable}
.pack-library-viewport.is-expanded{height:540px}
.pack-library-grid{width:100%;align-content:start;grid-auto-flow:row;grid-auto-rows:max-content}
.pack-library-resize-hint{display:block;margin-top:4px;color:#71675b;text-align:right;font-size:6px;font-weight:850;letter-spacing:.045em}
.pack-order-grid{min-height:226px;padding:8px;border:2px dashed #8f8475;background:#ded4c5;align-content:start}
.pack-drop-zone.drag-over{border-color:var(--blue);background:#d8e1ed;box-shadow:inset 0 0 0 3px rgba(32,83,154,.16)}
.pack-level-card{position:relative;min-width:0;overflow:hidden;border:2px solid var(--ink);background:#fff8ed;box-shadow:3px 3px 0 rgba(23,23,25,.24);cursor:grab;user-select:none}
.pack-level-card.dragging{opacity:.18;cursor:grabbing;transform:scale(.975)}
.pack-library-card.is-used{filter:grayscale(.88);opacity:.46;cursor:default;background:#d5d0c7;box-shadow:1px 1px 0 rgba(23,23,25,.2)}
.pack-library-card.is-used:hover{opacity:.58}
.pack-library-card.is-used .pack-card-add{background:#cbc6bc;color:#5d5750;cursor:not-allowed}
.pack-library-card.has-usage-history{box-shadow:3px 3px 0 rgba(32,83,154,.22)}
.pack-library-card.is-library-hidden{background:#e7ded2;opacity:.7;cursor:default}
.pack-library-card.is-library-hidden .pack-card-add{background:#cbc6bc;color:#5d5750;cursor:not-allowed}
.pack-library-used-badge{position:absolute;z-index:9;right:5px;top:5px;max-width:calc(100% - 10px);padding:4px 6px;border:1px solid var(--ink);background:var(--ink);color:#fff;font-size:6.2px;line-height:1;font-weight:1000;letter-spacing:.055em;box-shadow:2px 2px 0 rgba(23,23,25,.28);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pack-library-used-badge.is-history-badge{background:var(--blue)}
.pack-library-used-badge.is-hidden-badge{background:#776d62}
.pack-level-preview{display:block;width:100%;height:auto;aspect-ratio:300/190;border-bottom:1px solid var(--ink);background:#d7ccbc}
.pack-level-card-body{padding:7px}
.pack-level-card-body>strong{display:-webkit-box;min-height:2.15em;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:9px;line-height:1.08;font-weight:1000}
.pack-level-card-body>span{display:block;min-height:2.15em;margin-top:4px;color:#665d52;font-size:6.7px;line-height:1.2;font-weight:850;letter-spacing:.035em;overflow-wrap:anywhere}.pack-level-card-body>.pack-level-author{min-height:0;color:#3f3932;font-size:6.4px;letter-spacing:.055em}
.pack-level-meta.is-solved{color:var(--blue)}
.pack-level-meta.is-unsolved{color:#9e281b}
.pack-drop-placeholder{display:grid;place-items:center;min-width:0;overflow:hidden;border:3px dashed var(--red);background:repeating-linear-gradient(135deg,rgba(219,59,39,.12) 0 10px,rgba(255,248,237,.92) 10px 20px);box-shadow:inset 0 0 0 2px rgba(255,255,255,.8),3px 3px 0 rgba(23,23,25,.16);color:var(--red);pointer-events:none;animation:pack-drop-pulse .75s ease-in-out infinite alternate}
.pack-drop-placeholder strong{padding:10px;text-align:center;font-size:10px;font-weight:1000;letter-spacing:.12em}
@keyframes pack-drop-pulse{from{filter:saturate(.85);transform:scale(.985)}to{filter:saturate(1.2);transform:scale(1)}}
.pack-card-add{width:100%;min-height:27px;margin-top:6px;padding:4px;border:1px solid var(--ink);background:var(--yellow);font-size:7px;font-weight:1000;letter-spacing:.045em}.pack-card-direct-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;margin-top:6px}.pack-card-direct-actions.with-details,.pack-card-direct-actions.with-hide{grid-template-columns:repeat(3,minmax(0,1fr))}.pack-card-direct-actions button{min-height:25px;padding:3px 2px;border:1px solid var(--ink);background:#dfe7f1;color:var(--ink);font-size:6.6px;font-weight:1000;letter-spacing:.035em}.pack-card-direct-actions button:first-child{background:#f4dd83}.pack-card-direct-actions button:disabled{opacity:.35}.pack-entry-details{margin-top:6px;padding:6px;border:1px solid #9e9282;background:#eee5d8}.pack-entry-details[hidden]{display:none}.pack-entry-details label{display:block;color:#4f473e;font-size:6px;font-weight:1000;letter-spacing:.065em}.pack-entry-details label+label{margin-top:5px}.pack-entry-details input{display:block;width:100%;height:27px;margin-top:3px;padding:0 6px;border:1px solid var(--ink);background:#fff9ef;color:var(--ink);font-family:inherit;font-size:7.5px;font-weight:850}
.pack-library-card .pack-card-delete-saved{display:block;width:100%;min-height:25px;margin-top:4px;padding:4px;border:1px solid #923d32;background:#f4d5d0;color:#742419;font-family:inherit;font-size:7px;font-weight:1000;letter-spacing:.035em}
.pack-order-badge{position:absolute;z-index:8;left:5px;top:5px;max-width:calc(100% - 10px);padding:4px 6px;border:1px solid var(--ink);background:var(--red);color:#fff;font-size:8px;line-height:1;font-weight:1000;letter-spacing:.04em;box-shadow:2px 2px 0 rgba(23,23,25,.35);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.daily-order-grid .pack-order-badge{font-size:6.5px;background:var(--blue)}
.pack-card-actions{display:grid;grid-template-columns:26px 26px minmax(0,1fr);gap:4px;margin-top:6px}
.pack-card-actions button{min-height:25px;padding:3px;border:1px solid var(--ink);background:#eee5d8;font-size:7px;font-weight:1000}
.pack-card-actions button:last-child{background:#f2d8d2;color:#782619}
.pack-card-actions button:disabled{opacity:.35}
.pack-grid-empty{grid-column:1/-1;min-height:190px;display:grid;place-items:center;padding:20px;border:2px dashed #9f9384;background:rgba(255,248,237,.52);color:#6d6357;text-align:center;font-size:10px;line-height:1.35;font-weight:1000;letter-spacing:.09em}

.pack-builder-live-reference{margin-top:9px;padding:10px;border:2px solid var(--ink);background:#e4edf6}
.pack-builder-live-reference>header{display:flex;align-items:end;justify-content:space-between;gap:14px}
.pack-builder-live-reference h3{margin:0;font-size:11px;line-height:1;letter-spacing:.12em}
.pack-builder-live-reference header>div:first-child span{display:block;margin-top:4px;color:#526170;font-size:8px;font-weight:950;letter-spacing:.08em}
.pack-live-reference-controls{display:grid;grid-template-columns:minmax(240px,1fr) auto;align-items:end;gap:6px;min-width:min(520px,60%)}
.pack-live-reference-controls label{display:grid;grid-template-rows:auto 33px;gap:3px;color:#514a42;font-size:6.5px;font-weight:1000;letter-spacing:.075em}
.pack-live-reference-controls select{width:100%;height:33px;padding:0 7px;border:1px solid var(--ink);background:#fff9ef;color:var(--ink);font-family:inherit;font-size:8px;font-weight:900}
.pack-live-reference-controls button{height:33px;padding:0 11px;border:1px solid var(--ink);background:var(--blue);color:#fff;font-size:7px;font-weight:1000;letter-spacing:.045em;white-space:nowrap}
.pack-live-pack-panel{margin-top:9px;padding-top:9px;border-top:1px solid #8797a6}
.pack-live-pack-summary{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;margin-bottom:8px;padding:7px 9px;border:1px solid #9dadbb;background:#f7fbff}
.pack-live-pack-summary strong{font-size:10px;letter-spacing:.035em}
.pack-live-pack-summary span{align-self:center;color:#526170;font-size:7px;font-weight:950;letter-spacing:.065em}
.pack-live-pack-summary p{grid-column:1/-1;margin:2px 0 0;color:#5d6872;font-size:7.5px;line-height:1.3;font-weight:750}
.pack-live-pack-grid{max-height:370px;overflow:auto;padding:2px 10px 8px 2px;grid-template-columns:repeat(8,minmax(0,1fr));scrollbar-gutter:stable}
.pack-live-reference-card{cursor:default;background:#f8fbff;box-shadow:2px 2px 0 rgba(23,23,25,.16)}
.pack-live-reference-card .pack-order-badge{background:var(--blue)}
.pack-live-reference-card .pack-level-card-body{padding:6px}
.pack-live-reference-card .pack-level-card-body>strong{font-size:7.8px}
.pack-live-reference-card .pack-level-card-body>span{font-size:6.1px}

.pack-metadata-grid{display:grid;grid-template-columns:1.3fr 1fr .62fr .58fr 1.25fr;gap:7px;margin-bottom:8px}
.pack-metadata-grid input,.pack-metadata-grid select{display:block}
.pack-description-field{grid-column:1/-1}
.pack-metadata-grid textarea{display:block;height:52px;padding:7px 8px;resize:vertical;font-family:inherit;line-height:1.25}
.pack-publish-path{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:5px 9px;margin-bottom:8px;padding:7px 9px;border:1px solid #b5aa99;background:#fff8ed}
.pack-publish-path b{font-size:7px;letter-spacing:.09em}
.pack-publish-path code{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px;font-weight:850}
.pack-publish-path small{grid-column:1/-1;color:#6c6256;font-size:7px;line-height:1.25}
.pack-workspace-actions{display:grid;grid-template-columns:.8fr 1fr 1.4fr;gap:7px;margin-top:8px}
.pack-workspace-actions button{min-height:39px;padding:7px 10px;border:2px solid var(--ink);background:#fff8ed;font-size:8px;font-weight:1000;letter-spacing:.055em}
.pack-workspace-actions .pack-primary-action{background:var(--red);color:#fff}

.daily-settings{display:grid;grid-template-columns:minmax(190px,.72fr) minmax(220px,.88fr) minmax(300px,1.4fr);gap:8px;margin-bottom:8px}
.daily-settings>div{min-height:49px;padding:7px 9px;border:1px solid #b5aa99;background:#fff8ed}
.daily-settings b{display:block;font-size:7px;letter-spacing:.09em}
.daily-settings strong{display:block;margin-top:5px;font-size:10px;letter-spacing:.055em}
.daily-settings small{display:block;margin-top:3px;color:#685f54;font-size:7px;font-weight:800}
.daily-settings code{display:block;margin-top:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:8px;font-weight:850}

.daily-calendar-grid{display:grid;grid-template-columns:repeat(7,minmax(112px,1fr));gap:6px;width:100%;min-height:430px;padding:8px;overflow-x:auto;align-items:stretch;border:2px solid var(--ink);background:#d8cdbd}
.daily-calendar-weekday{position:sticky;top:0;z-index:4;display:grid;place-items:center;min-height:34px;padding:6px 3px;border:2px solid var(--ink);background:var(--ink);color:#fff;text-align:center;font-size:7px;font-weight:1000;letter-spacing:.075em;box-shadow:2px 2px 0 rgba(23,23,25,.22)}
.daily-calendar-weekday.weekday-5{background:var(--red)}
.daily-calendar-weekday.weekday-6{background:var(--blue)}
.daily-calendar-day,.daily-calendar-blank{min-height:205px;border:1px solid #9e9282;background:#eee5d8}
.daily-calendar-blank{opacity:.42;background:repeating-linear-gradient(135deg,#d9cebf 0 9px,#e5dacb 9px 18px)}
.daily-calendar-day{display:flex;flex-direction:column;padding:5px;transition:background .12s ease,box-shadow .12s ease,transform .12s ease}
.daily-calendar-day.weekday-5{background:#f0ddd7}
.daily-calendar-day.weekday-6{background:#dfe7f1}
.daily-calendar-day.is-unavailable{background:#d4cabd;color:#71685d;opacity:.68}
.daily-calendar-day.is-unavailable>header span{font-size:5.5px}
.daily-calendar-day.is-unavailable .daily-calendar-empty{border-style:solid;background:rgba(255,255,255,.18)}
.daily-calendar-day>header{display:flex;align-items:center;justify-content:space-between;gap:5px;min-height:25px;padding:3px 4px 5px;border-bottom:1px solid #aa9e8d}
.daily-calendar-day>header strong{font-size:13px;line-height:1;font-weight:1000}
.daily-calendar-day>header span{font-size:6.5px;font-weight:1000;letter-spacing:.05em;color:#665d52}
.daily-calendar-empty{flex:1;display:grid;place-content:center;gap:5px;min-height:150px;padding:8px;border:2px dashed #aa9e8d;color:#746a5e;text-align:center}
.daily-calendar-empty b{font-size:7px;letter-spacing:.09em}
.daily-calendar-empty span{font-size:6px;font-weight:850}
.daily-calendar-day.drag-over{background:#fff4b8;box-shadow:inset 0 0 0 4px var(--red),4px 4px 0 rgba(23,23,25,.2);transform:translate(-1px,-1px)}
.daily-calendar-day.drag-over .daily-calendar-empty{border-color:var(--red);color:var(--red)}
.daily-calendar-card{flex:1;margin-top:5px;box-shadow:2px 2px 0 rgba(23,23,25,.22)}
.daily-calendar-card .pack-level-preview{aspect-ratio:1.42/1}
.daily-calendar-card .pack-level-card-body{padding:5px}
.daily-calendar-card .pack-level-card-body>strong{min-height:2.05em;font-size:7.4px}
.daily-calendar-card .pack-level-card-body>span{min-height:0;margin-top:3px;font-size:5.7px}
.daily-calendar-actions{display:grid;grid-template-columns:1fr 1fr 1.35fr;gap:3px;margin-top:5px}
.daily-calendar-actions button{min-height:23px;padding:2px;border:1px solid var(--ink);background:#dfe7f1;color:var(--ink);font-size:5.7px;font-weight:1000;letter-spacing:.025em}
.daily-calendar-actions button:first-child{background:#f4dd83}
.daily-calendar-actions button:last-child{background:#f2d8d2;color:#782619}
.daily-workspace[hidden]{display:none}
body.pack-builder-open{overflow:hidden}

@media(max-width:1320px){.pack-level-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:1040px){
  .pack-builder-command-row{align-items:stretch;flex-direction:column}
  .pack-builder-draft-controls{max-width:none}
  .pack-builder-tabs{flex:none;width:100%}
  .pack-level-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .pack-metadata-grid{grid-template-columns:1fr 1fr}
  .daily-settings{grid-template-columns:1fr 1fr}
  .pack-description-field{grid-column:1/-1}
}
@media(max-width:760px){
  .daily-calendar-grid{grid-template-columns:repeat(7,minmax(104px,1fr));padding:6px;gap:5px}
  .daily-calendar-day,.daily-calendar-blank{min-height:190px}
  .maker-pack-builder-modal{overflow-y:auto;place-items:start center}
  .maker-pack-builder-card{width:100%;height:auto;min-height:calc(100dvh - 16px);padding:10px;overflow:visible}
  .maker-pack-builder-head h2{font-size:30px}
  .maker-pack-builder-head p{font-size:8px}
  .pack-builder-draft-controls{grid-template-columns:1fr 1fr 1fr}
  .pack-builder-draft-controls label{grid-column:1/-1}
  .pack-builder-draft-controls button{min-height:34px}
  .pack-builder-library>header,.pack-workspace-heading{align-items:stretch;flex-direction:column}
  .pack-library-controls{grid-template-columns:1fr 82px auto auto;max-width:none}
  .pack-library-controls>input{grid-column:1/-1}
  .pack-workspace-heading p{text-align:left}
  .pack-builder-live-reference>header{align-items:stretch;flex-direction:column}
  .pack-live-reference-controls{grid-template-columns:1fr auto;min-width:0}
  .pack-live-pack-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-height:520px}
  .pack-level-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pack-library-viewport{height:360px;min-height:220px;resize:none}
  .pack-library-viewport.is-expanded{height:620px}
  .pack-metadata-grid,.daily-settings{grid-template-columns:1fr}
  .pack-description-field{grid-column:auto}
  .pack-workspace-actions{grid-template-columns:1fr}
  .pack-grid-empty{min-height:150px}
}
@media(max-width:400px){.pack-level-grid{grid-template-columns:1fr 1fr}.pack-level-card-body>strong{font-size:8px}.pack-card-actions{grid-template-columns:24px 24px minmax(0,1fr)}}


/* v133 — private shared-puzzle presentation. */
body.shared-puzzle .collection,
body.shared-puzzle #levelBtn,
body.shared-puzzle #makerReturnBtn{display:none!important}
body.shared-puzzle .maker-hotspot{pointer-events:none}
body.shared-puzzle .bottom-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
body.shared-puzzle .credit strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:760px){body.shared-puzzle .bottom-actions{grid-template-columns:1fr;grid-template-rows:1fr}}

/* BOXXY v135 — compact generator controls and clipping repair. */
.maker-controls{
  overflow-x:hidden;
  overflow-y:auto;
  padding-right:4px;
  scrollbar-gutter:stable;
}
.maker-generator-panel{
  overflow:visible;
}
.maker-generator-options{
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-rows:minmax(78px,auto);
  gap:7px;
  align-items:stretch;
}
.maker-generator-options .maker-check-option,
.maker-generator-options .maker-check-option:last-child{
  grid-column:auto;
  min-height:78px;
  height:auto;
  padding:8px;
  align-content:start;
}
.maker-check-option b{
  font-size:9px;
  line-height:1.05;
}
.maker-check-option small{
  margin-top:3px;
  font-size:7.2px;
  line-height:1.22;
  overflow-wrap:anywhere;
}
.maker-generate{
  display:block;
  visibility:visible;
  position:relative;
  z-index:1;
}
@media(max-width:760px){
  .maker-controls{overflow:visible;padding-right:0;scrollbar-gutter:auto}
}
@media(max-width:480px){
  .maker-generator-options{grid-template-columns:1fr;grid-auto-rows:auto}
  .maker-generator-options .maker-check-option{min-height:0}
}
.maker-generator-panel{min-height:max-content;align-self:start}

.legal-link{position:fixed;z-index:250;right:8px;bottom:5px;padding:3px 6px;border:1px solid rgba(23,23,25,.35);background:rgba(247,240,229,.9);color:var(--ink);font:900 8px/1.2 Inter,ui-sans-serif,sans-serif;letter-spacing:.06em;text-decoration:none;opacity:.72;backdrop-filter:blur(4px);cursor:pointer}
.legal-link:hover,.legal-link:focus-visible{opacity:1;border-color:var(--ink);outline:none}
@media(max-width:620px){.legal-link{right:4px;bottom:3px;font-size:7.5px;padding:3px 5px}}

/* BOXXY v141 — AngeM older-iPad character recovery and larger movement controls. */
.piece.player img.character-loading{opacity:1}
.piece.player.idle-bob img,.piece.player.idle-bob canvas{animation:playerIdleBob .7s ease-in-out}
@keyframes playerIdleBob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-2%)}}

/* Larger, easier movement targets on desktop and tablet screens. */
.dpad{
  width:min(30dvh,260px);
  gap:8px;
  padding:2px;
}
.dpad button{
  min-width:56px;
  min-height:56px;
  border-width:2px;
  border-radius:10px;
  font-size:clamp(30px,4.5dvh,42px);
  line-height:1;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
}

@media(max-height:720px) and (min-width:761px){
  .dpad{width:min(30dvh,210px);gap:7px}
  .dpad button{min-width:52px;min-height:52px;font-size:30px}
}

@media(max-width:760px){
  .app{grid-template-rows:minmax(0,1fr) clamp(235px,34dvh,310px)}
  .side-panel{grid-template-columns:minmax(62px,1fr) minmax(174px,200px) minmax(62px,1fr)}
  .dpad{width:min(50vw,200px);gap:7px;max-height:100%}
  .dpad button{min-width:44px;min-height:44px;font-size:clamp(26px,8vw,34px)}
}

@media(max-height:520px) and (orientation:landscape){
  .app{grid-template-columns:minmax(0,1fr) 290px;grid-template-rows:1fr}
  .side-panel{grid-template-columns:1fr;grid-template-rows:22px 33px 48px minmax(128px,1fr) 46px 10px}
  .dpad{grid-column:1;grid-row:4;width:min(42dvh,155px);gap:6px}
  .dpad button{min-width:42px;min-height:42px;font-size:25px}
}


/* BOXXY v142 — compact two-row d-pad and responsive attire placement. */
.move-zone{
  min-width:0;
  min-height:0;
  align-self:stretch;
  display:grid;
  grid-template-columns:minmax(0,1fr) 70px;
  align-items:center;
  gap:10px;
  padding:8px 10px;
}
.dpad{
  width:min(100%,270px);
  aspect-ratio:3/2;
  padding:2px;
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-template-rows:repeat(2,minmax(0,1fr));
  grid-template-areas:". up ." "left down right";
  justify-self:center;
}
.dpad [data-dir=down]{grid-area:down}
.attire-action{
  width:68px;
  min-height:74px;
  align-self:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  padding:6px 4px;
  border:2px solid var(--ink);
  border-radius:10px;
  background:linear-gradient(145deg,#fffaf0 0 72%,#e1b735 72% 100%);
  box-shadow:0 5px 0 rgba(23,23,25,.20),0 9px 16px rgba(55,38,20,.10);
}
.attire-action .style-outfit-icon{width:46px;height:46px}
.attire-action b{font-size:8px;line-height:1;letter-spacing:.05em}
.level-attire{display:none}

@media(max-height:720px) and (min-width:761px){
  .move-zone{grid-template-columns:minmax(0,1fr) 58px;gap:7px;padding-block:5px}
  .dpad{width:min(100%,220px)}
  .attire-action{width:56px;min-height:62px;padding:4px 3px}
  .attire-action .style-outfit-icon{width:38px;height:38px}
}

@media(max-width:760px){
  .side-panel{
    grid-template-columns:minmax(48px,.62fr) minmax(210px,1.9fr) minmax(48px,.62fr);
  }
  .move-zone{
    grid-column:2;
    grid-row:3;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:7px 2px;
  }
  .dpad{
    width:min(100%,260px);
    max-height:100%;
    gap:7px;
  }
  .dpad button{
    min-width:0;
    min-height:54px;
    font-size:clamp(29px,8.5vw,40px);
  }
  .attire-action{display:none}
  .top-actions,.bottom-actions{padding-inline:3px;gap:4px}
  .action,.action.small{padding-inline:1px}
  .action span,.action.small span{font-size:clamp(20px,6vw,27px)}
  .action b,.action.small b{
    max-width:100%;
    padding-inline:1px;
    white-space:normal;
    overflow-wrap:normal;
    word-break:normal;
    font-size:7px;
    line-height:.95;
    letter-spacing:0;
  }
  .level-attire{
    height:32px;
    padding:2px 8px 2px 5px;
    border:1px solid var(--ink);
    background:var(--yellow);
    display:flex;
    align-items:center;
    gap:4px;
    font-size:8px;
    font-weight:950;
    letter-spacing:.05em;
  }
  .level-attire .style-outfit-icon{width:24px;height:24px;flex:none}
}

@media(max-width:360px){
  .side-panel{grid-template-columns:45px minmax(210px,1fr) 45px}
  .dpad{gap:5px}
  .dpad button{min-height:50px;font-size:29px}
  .top-actions,.bottom-actions{padding-inline:2px;gap:3px}
  .action b,.action.small b{font-size:7px}
}

@media(max-height:520px) and (orientation:landscape){
  .side-panel{grid-template-columns:1fr;grid-template-rows:22px 33px 44px minmax(104px,1fr) 44px 10px}
  .move-zone{grid-column:1;grid-row:4;padding:2px 8px}
  .dpad{width:min(54dvh,205px);gap:5px}
  .dpad button{min-height:38px;font-size:25px}
  .top-actions{grid-column:1;grid-row:3;grid-template-columns:repeat(3,1fr);padding:3px 6px}
  .bottom-actions{grid-column:1;grid-row:5;grid-template-columns:repeat(3,1fr);padding:3px 6px}
  .action b,.action.small b{font-size:7px;white-space:nowrap}
  .level-attire{display:flex}
}

/* Short mobile landscape: keep attire in the Levels modal and preserve the control labels. */
@media(max-height:520px) and (orientation:landscape){
  .move-zone{display:flex;align-items:center;justify-content:center}
  .attire-action{display:none}
  .dpad{width:min(100%,238px)}
  .legal-link{display:none}
}


/* BOXXY v145 — exact arrow centring and touch-safe attire placement. */
.dpad button{
  position:relative;
  display:grid;
  place-items:center;
  padding:0!important;
  overflow:hidden;
  line-height:0!important;
  color:var(--ink);
}
.dpad button svg{
  display:block;
  width:42%;
  height:42%;
  overflow:visible;
  pointer-events:none;
}
.dpad button svg path{fill:currentColor}

/*
 * A real touch device—including iPads whose CSS width is 768 or 1024 pixels—
 * uses the attire control inside the Levels modal. This prevents the separate
 * attire tile from competing with or overlapping the direction pad.
 */
html.touch-ui .move-zone{
  grid-template-columns:minmax(0,1fr)!important;
  justify-items:center;
}
html.touch-ui .attire-action{display:none!important}
html.touch-ui .level-attire{display:flex!important}
html.touch-ui .dpad{
  width:min(100%,270px);
  max-width:100%;
  justify-self:center;
}

/* Width fallback for older iPad Safari if touch capability detection is incomplete. */
@media(max-width:820px){
  .move-zone{
    grid-template-columns:minmax(0,1fr)!important;
    justify-items:center;
  }
  .attire-action{display:none!important}
  .level-attire{display:flex!important}
  .dpad{
    width:min(100%,270px);
    max-width:100%;
    justify-self:center;
  }
}


/* BOXXY v150 — mobile header access and touch-control hardening. */
.collection{
  position:relative;
  z-index:40;
  flex:0 0 auto;
  min-width:max-content;
  touch-action:manipulation;
  pointer-events:auto;
}
.collection::after{
  content:"";
  position:absolute;
  inset:-8px -6px;
}
.dpad button{
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
}

@media(max-width:760px){
  .masthead{
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    column-gap:8px;
    overflow:visible;
  }
  .title{
    max-width:none;
    min-width:0;
    overflow:hidden;
  }
  .title-word-row > strong{font-size:clamp(27px,8.4vw,34px)}
  .title > span{font-size:clamp(13px,4.7vw,18px)}
  .collection{
    align-self:stretch;
    min-width:104px;
    max-width:118px;
    padding:4px 2px 3px 8px;
    display:flex;
    flex-direction:column;
    justify-content:center;
  }
  .collection b{
    font-size:10px;
    line-height:.95;
  }
  .collection i{
    width:100%;
    max-width:100px;
    margin:4px 0 3px auto;
  }
  .collection span{
    font-size:17px;
    line-height:1;
  }
}

@media(max-width:390px){
  .masthead{padding-inline:10px;column-gap:5px}
  .title-word-row > strong{font-size:27px}
  .title > span{font-size:14px}
  .collection{min-width:94px;max-width:100px;padding-left:5px}
  .collection b{font-size:9px}
  .collection span{font-size:15px}
}


/* BOXXY v151 — installed iPhone safe area and collection hover correction. */
.collection:hover b,
.collection:focus-visible b{
  text-decoration:none !important;
}
.collection:hover i,
.collection:focus-visible i{
  background:var(--red);
}

/* Installed iPhone web apps may draw beneath the status bar. */
@media (display-mode: standalone){
  html.touch-ui body{
    padding-top:env(safe-area-inset-top);
    box-sizing:border-box;
  }
  html.touch-ui .app{
    height:calc(100dvh - env(safe-area-inset-top));
    min-height:calc(100dvh - env(safe-area-inset-top));
  }
}

/* Older iOS standalone detection fallback. */
html.ios-standalone body{
  padding-top:env(safe-area-inset-top);
  box-sizing:border-box;
}
html.ios-standalone .app{
  height:calc(100dvh - env(safe-area-inset-top));
  min-height:calc(100dvh - env(safe-area-inset-top));
}


/* BOXXY v155 — earned collection completion star. */
.collection-complete-star{
  width:46px;
  height:46px;
  flex:0 0 46px;
  display:grid;
  place-items:center;
  padding:2px;
  border:0;
  background:transparent;
  cursor:pointer;
  filter:drop-shadow(0 4px 0 rgba(23,23,25,.18));
  transition:transform .16s ease,filter .16s ease;
}
.collection-complete-star[hidden]{display:none!important}
.collection-complete-star svg{
  width:100%;
  height:100%;
  overflow:visible;
}
.collection-complete-star path{
  fill:var(--pack-star-colour,var(--red));
  stroke:#f2c121;
  stroke-width:8;
  stroke-linejoin:round;
  paint-order:stroke fill;
}
.collection-complete-star:hover,
.collection-complete-star:focus-visible{
  transform:scale(1.12) rotate(-4deg);
  filter:drop-shadow(0 5px 0 rgba(23,23,25,.22));
  outline:none;
}
.collection-complete-star:active{
  transform:scale(.96);
  filter:drop-shadow(0 2px 0 rgba(23,23,25,.16));
}

.level-picker-head{justify-content:flex-start}
.level-picker-head > #levelPickerTitle{flex:0 1 auto}
.level-picker-tools{margin-left:auto}

@media(max-width:760px){
  .level-picker-head{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto auto auto;
    align-items:center;
    gap:6px;
  }
  .level-picker-head > #levelPickerTitle{
    grid-column:1;
    min-width:0;
  }
  .collection-complete-star{
    grid-column:2;
    width:34px;
    height:34px;
    flex-basis:34px;
    padding:1px;
  }
  .level-picker-tools{
    grid-column:3 / 5;
    display:contents;
    margin-left:0;
  }
  .level-attire{
    grid-column:3;
    height:26px!important;
    min-height:26px;
    padding:1px 7px 1px 4px;
  }
  .level-attire .style-outfit-icon{
    width:21px;
    height:21px;
  }
  .level-reset{
    grid-column:4;
    height:26px;
    min-height:26px;
  }
  .level-close{
    position:absolute;
    right:8px;
    top:8px;
    transform:translateY(-115%);
  }
}

@media(max-width:380px){
  .level-picker-head{
    grid-template-columns:minmax(0,1fr) 31px auto auto;
    gap:4px;
  }
  .collection-complete-star{
    width:31px;
    height:31px;
  }
  .level-attire{
    padding-inline:3px 5px;
    gap:2px;
    font-size:7px;
  }
  .level-attire .style-outfit-icon{
    width:19px;
    height:19px;
  }
  .level-reset{
    padding-inline:6px;
    font-size:8px;
  }
}


/* BOXXY v156 — completed-pack map cards and creator prize. */
.complete-card.final-complete .final-pack-option{background:#f7f0e5;color:var(--ink);border:2px solid var(--ink);box-shadow:5px 5px 0 rgba(31,31,31,.24)}
.complete-card.final-complete .final-pack-option:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 rgba(31,31,31,.28)}
.complete-card.final-complete .final-pack-option:active{transform:translate(2px,2px);box-shadow:2px 2px 0 rgba(31,31,31,.22)}
.complete-card.final-complete .final-pack-art.image-art{background:#000;color:#fff}
.complete-card.final-complete .final-pack-art.image-art picture,
.complete-card.final-complete .final-pack-art.image-art img{display:block;width:100%;height:100%;opacity:1;visibility:visible}
.complete-card.final-complete .final-pack-art.image-art img{object-fit:cover;object-position:center}
.complete-card.final-complete .final-pack-art.image-art .pack-no{left:auto;right:5px;top:auto;bottom:1px;min-width:0;padding:0;border:0;background:transparent;color:#fff;box-shadow:none;opacity:.28;font-size:clamp(16px,2.4vw,27px);line-height:1;text-shadow:0 2px 5px rgba(0,0,0,.92)}
.complete-card.final-complete .final-pack-art:not(.image-art),
.complete-card.final-complete .pack-red .final-pack-art:not(.image-art),
.complete-card.final-complete .pack-green .final-pack-art:not(.image-art),
.complete-card.final-complete .pack-blue .final-pack-art:not(.image-art),
.complete-card.final-complete .pack-yellow .final-pack-art:not(.image-art),
.complete-card.final-complete .pack-black .final-pack-art:not(.image-art){background:#f7f0e5;color:var(--ink)}
.complete-card.final-complete .final-pack-art:not(.image-art) i{background:var(--yellow);border-color:var(--blue)}
.complete-card.final-complete .final-pack-art > b:not(.pack-no){color:var(--blue)}

.claim-prize-btn{width:100%;min-height:60px;display:flex;align-items:center;justify-content:center;gap:12px;padding:12px 18px;border:3px solid var(--blue);background:var(--yellow);color:var(--ink);box-shadow:6px 6px 0 var(--blue);font:950 15px/1 var(--font);letter-spacing:.055em;cursor:pointer;transition:transform .12s ease,box-shadow .12s ease}
.claim-prize-btn[hidden]{display:none!important}
.claim-prize-btn b{font-size:25px;color:var(--blue)}
.claim-prize-btn:hover,.claim-prize-btn:focus-visible{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--blue);outline:3px solid var(--ink);outline-offset:3px}
.claim-prize-btn:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--blue)}

.prize-modal{z-index:140;padding:18px;overflow:auto}
.prize-card{position:relative;width:min(900px,94vw);max-height:min(90dvh,820px);display:grid;grid-template-columns:minmax(230px,38%) minmax(0,1fr);overflow:hidden;background:#f7f0e5;border:3px solid var(--ink);box-shadow:14px 14px 0 var(--yellow),-10px -10px 0 var(--blue),0 30px 80px rgba(0,0,0,.4)}
.prize-close{position:absolute;z-index:3;right:10px;top:10px;width:38px;height:38px;display:grid;place-items:center;padding:0;border:2px solid var(--ink);background:#f7f0e5;color:var(--ink);box-shadow:3px 3px 0 var(--ink);font:950 25px/1 var(--font);cursor:pointer}
.prize-poster{min-height:0;margin:0;padding:14px;display:grid;place-items:center;background:var(--blue);border-right:3px solid var(--ink)}
.prize-poster img{display:block;width:100%;height:100%;max-height:calc(90dvh - 34px);object-fit:contain;background:#f7f0e5;border:2px solid var(--ink);box-shadow:7px 7px 0 rgba(18,18,18,.35)}
.prize-copy{min-width:0;overflow:auto;padding:42px 38px 34px}
.prize-copy h2{margin:9px 0 18px;font-size:clamp(46px,7vw,78px);line-height:.82;letter-spacing:-.06em;font-weight:1000}
.prize-copy p{max-width:50ch;margin:0 0 14px;font-size:15px;line-height:1.48;font-weight:720}
.prize-limit{margin-top:20px!important;padding:12px 14px;border:2px solid var(--ink);background:var(--yellow);box-shadow:4px 4px 0 var(--blue)}
.prize-email{margin-top:22px;min-height:58px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px 18px;border:3px solid var(--ink);background:var(--red);color:#fff;box-shadow:6px 6px 0 var(--ink);text-decoration:none;font:950 15px/1 var(--font);letter-spacing:.06em}
.prize-email small{margin-top:6px;font-size:10px;letter-spacing:.02em;text-transform:none}
.prize-email:hover,.prize-email:focus-visible{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink);outline:3px solid var(--blue);outline-offset:3px}

@media(max-width:700px){
  .prize-modal{padding:10px}
  .prize-card{width:min(96vw,540px);max-height:94dvh;grid-template-columns:1fr;grid-template-rows:minmax(180px,34vh) minmax(0,1fr)}
  .prize-poster{padding:10px;border-right:0;border-bottom:3px solid var(--ink)}
  .prize-poster img{max-height:100%}
  .prize-copy{padding:28px 20px 24px}
  .prize-copy h2{font-size:clamp(42px,14vw,62px)}
  .prize-copy p{font-size:13px;line-height:1.4}
  .claim-prize-btn{min-height:64px;font-size:14px}
}


/* BOXXY v157 — corrected completed-pack and prize modal layouts. */

/* Completed-pack modal always has a visible close control. */
.complete-close{
  position:absolute;
  z-index:8;
  top:10px;
  right:10px;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  padding:0;
  border:2px solid var(--ink);
  background:#f7f0e5;
  color:var(--ink);
  box-shadow:3px 3px 0 var(--ink);
  font:950 25px/1 var(--font);
  cursor:pointer;
}
.complete-close:hover,
.complete-close:focus-visible{
  background:var(--yellow);
  outline:3px solid var(--blue);
  outline-offset:2px;
}

/* No NEXT LEVEL / CHOOSE A LEVEL control in final collection congratulations. */
.complete-card.final-complete #nextBtn{
  display:none !important;
}

/* Keep the overall cards off-white, but restore each pack's colour panel. */
.complete-card.final-complete .pack-red .final-pack-art:not(.image-art){
  background:var(--red);
  color:#fff;
}
.complete-card.final-complete .pack-green .final-pack-art:not(.image-art){
  background:var(--green);
  color:#fff;
}
.complete-card.final-complete .pack-blue .final-pack-art:not(.image-art){
  background:var(--blue);
  color:#fff;
}
.complete-card.final-complete .pack-yellow .final-pack-art:not(.image-art){
  background:var(--yellow);
  color:var(--ink);
}
.complete-card.final-complete .pack-purple .final-pack-art:not(.image-art){
  background:#8e44ad;
  color:#fff;
}
.complete-card.final-complete .pack-teal .final-pack-art:not(.image-art){
  background:#00a6b2;
  color:#fff;
}
.complete-card.final-complete .pack-black .final-pack-art:not(.image-art){
  background:var(--ink);
  color:#fff;
}
.complete-card.final-complete .final-pack-art:not(.image-art) i{
  background:rgba(255,255,255,.48);
  border-color:var(--ink);
}
.complete-card.final-complete .final-pack-art > b:not(.pack-no){
  color:inherit;
}

/* Completed-pack modal fits within laptop and tablet viewports. */
.complete-modal{
  padding:20px;
  overflow:auto;
}
.complete-card.final-complete{
  width:min(720px,calc(100vw - 40px));
  max-height:calc(100dvh - 40px);
  grid-template-columns:118px minmax(0,1fr);
  overflow:hidden;
}
.complete-card.final-complete .complete-art{
  min-height:0;
  height:auto;
}
.complete-card.final-complete .complete-copy{
  min-height:0;
  overflow:auto;
  padding:26px 52px 26px 28px;
}
.complete-card.final-complete .final-pack-picker{
  margin-top:10px;
}
.complete-card.final-complete .final-pack-grid{
  gap:9px;
}
.complete-card.final-complete .final-pack-option{
  min-height:74px;
}
.complete-card.final-complete .final-pack-art{
  height:58px;
}
.complete-card.final-complete .complete-actions{
  margin-top:14px;
}

/* Prize screen: stable three-part desktop layout. */
.prize-modal{
  align-items:flex-start;
  padding:24px;
  overflow-y:auto;
}
.prize-card{
  width:min(760px,calc(100vw - 48px));
  max-height:none;
  margin:auto;
  display:grid;
  grid-template-columns:minmax(220px,34%) minmax(0,1fr);
  grid-template-areas:
    "poster heading"
    "poster copy";
  grid-template-rows:auto auto;
  align-items:start;
  overflow:visible;
}
.prize-heading{
  grid-area:heading;
  padding:38px 52px 10px 34px;
}
.prize-heading h2{
  margin:8px 0 0;
  font-size:clamp(44px,6vw,70px);
  line-height:.84;
  letter-spacing:-.055em;
  font-weight:1000;
}
.prize-poster{
  grid-area:poster;
  align-self:stretch;
  min-height:100%;
  border-right:3px solid var(--ink);
  border-bottom:0;
}
.prize-poster img{
  width:100%;
  height:auto;
  max-height:none;
  object-fit:contain;
}
.prize-copy{
  grid-area:copy;
  overflow:visible;
  padding:6px 34px 34px;
}
.prize-copy p{
  max-width:none;
}

/* iPhone and narrow screens: WELL DONE, poster, then text; page scrolls naturally. */
@media(max-width:700px){
  .complete-modal{
    padding:10px;
  }
  .complete-card.final-complete{
    width:calc(100vw - 20px);
    max-height:calc(100dvh - 20px);
    grid-template-columns:68px minmax(0,1fr);
  }
  .complete-card.final-complete .complete-copy{
    padding:22px 42px 22px 14px;
  }
  .complete-card.final-complete .complete-art{
    min-height:0;
  }

  .prize-modal{
    display:block;
    padding:10px;
    overflow-y:auto;
  }
  .prize-card{
    width:100%;
    max-width:520px;
    margin:0 auto 16px;
    display:flex;
    flex-direction:column;
    overflow:visible;
  }
  .prize-heading{
    order:1;
    width:100%;
    padding:24px 52px 16px 18px;
  }
  .prize-heading h2{
    margin-top:7px;
    font-size:clamp(44px,16vw,66px);
  }
  .prize-poster{
    order:2;
    width:100%;
    min-height:0;
    padding:10px;
    border-right:0;
    border-top:3px solid var(--ink);
    border-bottom:3px solid var(--ink);
  }
  .prize-poster img{
    width:100%;
    height:auto;
    max-height:none;
    object-fit:contain;
  }
  .prize-copy{
    order:3;
    width:100%;
    overflow:visible;
    padding:22px 18px 26px;
  }
  .prize-copy p{
    font-size:14px;
    line-height:1.46;
  }
  .prize-email{
    margin-bottom:4px;
  }
}

@media(max-height:700px) and (min-width:701px){
  .complete-card.final-complete{
    max-height:calc(100dvh - 24px);
  }
  .complete-card.final-complete .complete-copy{
    padding-top:20px;
    padding-bottom:20px;
  }
  .complete-card.final-complete h2{
    font-size:36px;
  }
  .complete-card.final-complete .final-pack-option{
    min-height:66px;
  }
  .complete-card.final-complete .final-pack-art{
    height:50px;
  }
}


/* BOXXY v158 — mobile completed-pack modal fits wholly onscreen without scrolling. */
@media (max-width:700px){

  /* This applies only to the Well Done collection-completion modal. */
  .complete-modal{
    align-items:center;
    padding:8px;
    overflow:hidden;
  }

  .complete-card.final-complete{
    width:calc(100vw - 16px);
    max-width:520px;
    height:auto;
    max-height:calc(100dvh - 16px);
    grid-template-columns:48px minmax(0,1fr);
    overflow:hidden;
  }

  .complete-card.final-complete .complete-art{
    min-height:0;
    height:auto;
  }

  .complete-card.final-complete .complete-art span{
    width:38px;
    height:38px;
    font-size:22px;
  }

  .complete-card.final-complete .complete-circle{
    width:68px;
    height:68px;
  }

  .complete-card.final-complete .complete-square{
    width:48px;
    height:48px;
  }

  .complete-card.final-complete .complete-copy{
    overflow:hidden;
    padding:16px 40px 14px 12px;
  }

  .complete-card.final-complete .complete-kicker{
    font-size:7px;
  }

  .complete-card.final-complete h2{
    margin:4px 0 6px;
    font-size:clamp(25px,8vw,34px);
    line-height:.88;
  }

  .complete-card.final-complete #completeText{
    margin:0 0 8px;
    font-size:10px;
    line-height:1.22;
  }

  .complete-card.final-complete .final-pack-picker{
    margin:6px 0 0;
    padding-top:7px;
  }

  .complete-card.final-complete .final-pack-heading{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:7px;
    margin-bottom:6px;
  }

  .complete-card.final-complete .final-pack-heading strong{
    font-size:8px;
  }

  .complete-card.final-complete .final-pack-heading span{
    display:block;
    margin:0;
    max-width:18ch;
    font-size:6.5px;
    line-height:1.1;
    text-align:right;
  }

  /*
   * Compact pack trophies: three columns rather than the former tall
   * single-column list.
   */
  .complete-card.final-complete .final-pack-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:5px;
  }

  .complete-card.final-complete .final-pack-option{
    min-height:0;
    display:block;
    border-width:1.5px;
    box-shadow:2px 2px 0 rgba(31,31,31,.24);
  }

  .complete-card.final-complete .final-pack-option:hover,
  .complete-card.final-complete .final-pack-option:active{
    transform:none;
    box-shadow:2px 2px 0 rgba(31,31,31,.24);
  }

  .complete-card.final-complete .final-pack-art{
    height:31px;
    border-right:0;
    border-bottom:1.5px solid var(--ink);
  }

  .complete-card.final-complete .final-pack-art i{
    width:30px;
    height:30px;
    left:-9px;
    top:-9px;
    border-width:1.5px;
  }

  .complete-card.final-complete .final-pack-art > b:not(.pack-no){
    right:5px;
    bottom:2px;
    font-size:17px;
  }

  .complete-card.final-complete .final-pack-name{
    min-height:29px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:4px 4px 3px;
    font-size:6.8px;
    line-height:1.02;
    letter-spacing:.02em;
  }

  .complete-card.final-complete .final-pack-name small{
    margin-top:2px;
    font-size:5.5px;
    letter-spacing:.06em;
  }

  .complete-card.final-complete .final-pack-status{
    min-height:0!important;
    margin:5px 0 0!important;
    font-size:6.5px!important;
    line-height:1.12!important;
  }

  .complete-card.final-complete .complete-actions{
    margin-top:8px;
  }

  .complete-card.final-complete .claim-prize-btn{
    min-height:42px;
    padding:7px 10px;
    border-width:2px;
    box-shadow:4px 4px 0 var(--blue);
    font-size:9px;
  }

  .complete-card.final-complete .claim-prize-btn b{
    font-size:18px;
  }

  .complete-card.final-complete .complete-close{
    top:7px;
    right:7px;
    width:30px;
    height:30px;
    font-size:20px;
    box-shadow:2px 2px 0 var(--ink);
  }
}

/* Extra compression for genuinely short mobile displays. */
@media (max-width:700px) and (max-height:620px){
  .complete-card.final-complete .complete-copy{
    padding-top:10px;
    padding-bottom:9px;
  }

  .complete-card.final-complete h2{
    font-size:24px;
  }

  .complete-card.final-complete #completeText{
    font-size:8.5px;
    line-height:1.14;
    margin-bottom:5px;
  }

  .complete-card.final-complete .final-pack-picker{
    margin-top:4px;
    padding-top:5px;
  }

  .complete-card.final-complete .final-pack-heading{
    margin-bottom:4px;
  }

  .complete-card.final-complete .final-pack-art{
    height:25px;
  }

  .complete-card.final-complete .final-pack-name{
    min-height:23px;
    padding-block:2px;
  }

  .complete-card.final-complete .claim-prize-btn{
    min-height:36px;
  }
}


/* BOXXY v159 — simplified prize and final-completion headings. */

/* Remove the irrelevant collection label from completed-pack congratulations. */
.complete-card.final-complete > .complete-copy > .complete-kicker{
  display:none !important;
}

/* Prize message now begins with a smaller THANK YOU heading only. */
.prize-heading{
  padding-top:30px;
  padding-bottom:12px;
}
.prize-heading h2{
  margin:0;
  font-size:clamp(32px,4.5vw,52px);
  line-height:.95;
  letter-spacing:-.035em;
}

@media(max-width:700px){
  .prize-heading{
    padding:20px 52px 12px 18px;
  }
  .prize-heading h2{
    font-size:clamp(30px,10vw,42px);
    line-height:1;
  }
}


/* BOXXY v160 — one clean, standardised mobile completion layout. */
@media (max-width:700px){

  .complete-modal{
    display:grid;
    place-items:center;
    padding:8px;
    overflow:hidden;
  }

  .complete-card.final-complete{
    width:min(520px,calc(100vw - 16px));
    height:auto;
    max-height:calc(100dvh - 16px);
    display:grid;
    grid-template-columns:42px minmax(0,1fr);
    overflow:hidden;
  }

  .complete-card.final-complete .complete-art{
    min-height:0 !important;
    height:auto !important;
    overflow:hidden;
  }

  .complete-card.final-complete .complete-art span{
    width:32px;
    height:32px;
    padding:0;
    font-size:19px;
    line-height:1;
    box-shadow:3px 3px 0 rgba(21,21,21,.18);
  }

  .complete-card.final-complete .complete-circle{
    width:58px;
    height:58px;
  }

  .complete-card.final-complete .complete-square{
    width:42px;
    height:42px;
  }

  .complete-card.final-complete .complete-copy{
    min-width:0;
    min-height:0;
    display:block;
    overflow:hidden;
    padding:14px 38px 13px 11px;
  }

  .complete-card.final-complete h2{
    margin:3px 0 6px;
    font-size:clamp(25px,8vw,34px);
    line-height:.86;
  }

  .complete-card.final-complete #completeText{
    max-width:none;
    margin:0 0 8px;
    font-size:10px;
    line-height:1.2;
  }

  .complete-card.final-complete .final-pack-picker{
    margin:0;
    padding-top:7px;
    border-top-width:2px;
  }

  .complete-card.final-complete .final-pack-heading{
    display:block;
    margin:0 0 6px;
  }

  .complete-card.final-complete .final-pack-heading strong{
    display:block;
    font-size:8px;
    line-height:1.05;
    letter-spacing:.11em;
  }

  .complete-card.final-complete .final-pack-heading span{
    display:none;
  }

  /* Four remaining collections form a balanced and predictable 2 × 2 grid. */
  .complete-card.final-complete .final-pack-grid{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-auto-rows:86px;
    align-items:stretch;
    gap:6px;
  }

  .complete-card.final-complete .final-pack-option{
    width:100%;
    min-width:0;
    min-height:0 !important;
    height:86px;
    margin:0;
    padding:0 !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    grid-template-rows:31px 55px !important;
    align-items:stretch !important;
    overflow:hidden;
    border:1.5px solid var(--ink);
    box-shadow:2px 2px 0 rgba(31,31,31,.25);
    text-align:left;
  }

  .complete-card.final-complete .final-pack-option:hover,
  .complete-card.final-complete .final-pack-option:active{
    transform:none;
    box-shadow:2px 2px 0 rgba(31,31,31,.25);
  }

  /* Identical coloured header on every card. */
  .complete-card.final-complete .final-pack-art{
    position:relative;
    width:100% !important;
    height:31px !important;
    min-height:31px;
    margin:0 !important;
    display:block !important;
    overflow:hidden;
    border:0;
    border-bottom:1.5px solid var(--ink);
  }

  .complete-card.final-complete .final-pack-art i{
    position:absolute;
    width:29px;
    height:29px;
    left:-8px;
    top:-8px;
    margin:0;
    border-width:1.5px;
  }

  .complete-card.final-complete .final-pack-art > b:not(.pack-no){
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    margin:0;
    display:grid;
    place-items:center;
    font-size:17px;
    line-height:1;
    letter-spacing:-.04em;
  }

  /* Identical text compartment on every card. */
  .complete-card.final-complete .final-pack-name{
    width:100%;
    height:55px;
    min-height:55px;
    min-width:0;
    margin:0;
    padding:5px 6px 4px;
    display:block;
    overflow:hidden;
    font-size:7.2px;
    line-height:1.04;
    letter-spacing:.025em;
    overflow-wrap:anywhere;
  }

  .complete-card.final-complete .final-pack-name small{
    display:block;
    min-width:0;
    margin-top:3px;
    font-size:5.5px;
    line-height:1.04;
    letter-spacing:.025em;
    overflow-wrap:anywhere;
  }

  .complete-card.final-complete .final-pack-status{
    min-height:0 !important;
    margin:4px 0 0 !important;
    font-size:6px !important;
    line-height:1.1 !important;
  }

  .complete-card.final-complete .complete-actions{
    margin-top:8px;
  }

  .complete-card.final-complete .claim-prize-btn{
    min-height:40px;
    padding:6px 10px;
    gap:10px;
    border-width:2px;
    box-shadow:4px 4px 0 var(--blue);
    font-size:9px;
    line-height:1;
  }

  .complete-card.final-complete .claim-prize-btn b{
    width:22px;
    height:22px;
    margin:0;
    padding:0;
    display:grid;
    place-items:center;
    font-size:18px;
    line-height:1;
    transform:none;
  }

  /* Draw the X from two centred lines; font baselines cannot displace it. */
  .complete-card.final-complete .complete-close{
    top:7px;
    right:7px;
    width:30px;
    height:30px;
    margin:0;
    padding:0;
    display:block;
    border:2px solid var(--ink);
    background:var(--red);
    box-shadow:3px 3px 0 var(--ink);
    color:transparent;
    font-size:0;
    line-height:0;
  }

  .complete-card.final-complete .complete-close::before,
  .complete-card.final-complete .complete-close::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:16px;
    height:3px;
    margin:0;
    background:#fff;
    border-radius:1px;
    transform-origin:center;
  }

  .complete-card.final-complete .complete-close::before{
    transform:translate(-50%,-50%) rotate(45deg);
  }

  .complete-card.final-complete .complete-close::after{
    transform:translate(-50%,-50%) rotate(-45deg);
  }
}

/* Short phones retain the same structure; only its measurements shrink. */
@media (max-width:700px) and (max-height:650px){
  .complete-card.final-complete .complete-copy{
    padding-top:9px;
    padding-bottom:9px;
  }

  .complete-card.final-complete h2{
    margin-bottom:4px;
    font-size:23px;
  }

  .complete-card.final-complete #completeText{
    margin-bottom:5px;
    font-size:8.5px;
    line-height:1.12;
  }

  .complete-card.final-complete .final-pack-picker{
    padding-top:5px;
  }

  .complete-card.final-complete .final-pack-grid{
    grid-auto-rows:72px;
    gap:4px;
  }

  .complete-card.final-complete .final-pack-option{
    height:72px;
    grid-template-rows:27px 45px !important;
  }

  .complete-card.final-complete .final-pack-art{
    height:27px !important;
    min-height:27px;
  }

  .complete-card.final-complete .final-pack-name{
    height:45px;
    min-height:45px;
    padding-top:3px;
    font-size:6.5px;
  }

  .complete-card.final-complete .final-pack-name small{
    margin-top:2px;
    font-size:5px;
  }

  .complete-card.final-complete .claim-prize-btn{
    min-height:35px;
    margin-top:0;
  }
}


/* BOXXY v161 — ordinary mobile Puzzle Cleared modal. */
@media (max-width:700px){

  /* Standard centred X for every completion modal, not only final packs. */
  .complete-close{
    top:7px;
    right:7px;
    width:30px;
    height:30px;
    margin:0;
    padding:0;
    display:block;
    border:2px solid var(--ink);
    background:var(--red);
    box-shadow:3px 3px 0 var(--ink);
    color:transparent;
    font-size:0;
    line-height:0;
  }

  .complete-close::before,
  .complete-close::after{
    content:"";
    position:absolute;
    left:50%;
    top:50%;
    width:16px;
    height:3px;
    background:#fff;
    border-radius:1px;
    transform-origin:center;
  }

  .complete-close::before{
    transform:translate(-50%,-50%) rotate(45deg);
  }

  .complete-close::after{
    transform:translate(-50%,-50%) rotate(-45deg);
  }

  /* The normal Puzzle Cleared screen is independent of final-pack styling. */
  .complete-card:not(.final-complete){
    width:min(430px,calc(100vw - 18px));
    max-height:calc(100dvh - 18px);
    grid-template-columns:72px minmax(0,1fr);
    overflow:hidden;
  }

  .complete-card:not(.final-complete) .complete-art{
    min-height:270px;
    border-right-width:2px;
  }

  .complete-card:not(.final-complete) .complete-art span{
    width:48px;
    height:48px;
    border-width:2px;
    box-shadow:4px 4px 0 rgba(21,21,21,.18);
    font-size:27px;
  }

  .complete-card:not(.final-complete) .complete-circle{
    width:76px;
    height:76px;
  }

  .complete-card:not(.final-complete) .complete-square{
    width:54px;
    height:54px;
  }

  /*
   * Forty-two pixels are permanently reserved at the right for the close
   * control, so the heading and body can never run beneath it.
   */
  .complete-card:not(.final-complete) .complete-copy{
    min-width:0;
    min-height:0;
    justify-content:center;
    padding:20px 43px 19px 14px;
    overflow:hidden;
  }

  .complete-card:not(.final-complete) .complete-copy::before{
    width:64px;
    height:9px;
  }

  .complete-card:not(.final-complete) .complete-kicker{
    font-size:8px;
    letter-spacing:.13em;
  }

  .complete-card:not(.final-complete) h2{
    max-width:100%;
    margin:7px 0 9px;
    font-size:clamp(29px,10vw,40px);
    line-height:.86;
    letter-spacing:-.045em;
    overflow-wrap:normal;
  }

  .complete-card:not(.final-complete) p{
    max-width:none;
    margin:0 0 15px;
    font-size:11.5px;
    line-height:1.28;
  }

  .complete-card:not(.final-complete) .complete-actions{
    width:100%;
    gap:8px;
  }

  .complete-card:not(.final-complete) .complete-primary,
  .complete-card:not(.final-complete) .complete-secondary{
    width:100%;
    min-width:0;
    min-height:44px;
    padding:9px 10px 9px 12px;
    gap:9px;
    font-size:9px;
    box-shadow:4px 4px 0 var(--red);
  }

  .complete-card:not(.final-complete) .complete-primary b{
    width:25px;
    height:25px;
    flex:0 0 25px;
    font-size:17px;
  }
}

/* Short landscape phones: preserve the same safe corner but use less height. */
@media (max-width:700px) and (max-height:500px){
  .complete-card:not(.final-complete){
    width:min(500px,calc(100vw - 16px));
    grid-template-columns:62px minmax(0,1fr);
  }

  .complete-card:not(.final-complete) .complete-art{
    min-height:220px;
  }

  .complete-card:not(.final-complete) .complete-copy{
    padding-top:13px;
    padding-bottom:13px;
  }

  .complete-card:not(.final-complete) h2{
    margin-block:4px 6px;
    font-size:27px;
  }

  .complete-card:not(.final-complete) p{
    margin-bottom:9px;
    font-size:9.5px;
    line-height:1.18;
  }

  .complete-card:not(.final-complete) .complete-primary,
  .complete-card:not(.final-complete) .complete-secondary{
    min-height:36px;
  }
}

/* v162 target palette responsiveness */
@media(max-width:900px){
  .maker-goal-palette{grid-template-columns:auto 1fr;margin-bottom:6px;gap:6px;padding:5px}
  .maker-goal-palette small{display:none}
  .maker-goal-swatches{grid-template-columns:repeat(11,minmax(16px,1fr));gap:3px}
  .maker-goal-swatches button{height:22px;padding:2px}
}
@media(max-width:560px){
  .maker-goal-palette{grid-template-columns:1fr}
  .maker-goal-swatches{grid-template-columns:repeat(6,1fr)}
}


/* Former styles-v147-fixes.css, consolidated for v164 clean release. */
/* BOXXY v147 — tablet attire placement tidy-up.
   Phones keep attire inside the Levels modal.
   Tablets/desktops keep a separate small attire tile beside the arrows.
   This avoids the oversized wardrobe button seen on iPad portrait. */

:root{
  --boxxy-attire-tile-width: 62px;
  --boxxy-attire-tile-height: 68px;
}

/* Default / tablet touch behaviour: keep the small separate attire tile. */
html.touch-ui .move-zone{
  grid-template-columns:minmax(0,1fr) var(--boxxy-attire-tile-width) !important;
  align-items:center;
  justify-items:stretch;
}
html.touch-ui .dpad{
  width:min(100%,260px);
  justify-self:center;
}
html.touch-ui .attire-action{
  display:flex !important;
  width:var(--boxxy-attire-tile-width);
  min-height:var(--boxxy-attire-tile-height);
  align-self:center;
  padding:4px 3px;
  gap:2px;
}
html.touch-ui .attire-action .style-outfit-icon{
  width:34px;
  height:34px;
}
html.touch-ui .attire-action b{
  font-size:7px;
  line-height:1;
  letter-spacing:.04em;
}
html.touch-ui .level-attire{
  display:none !important;
}

/* Real mobile widths: put attire back inside the Levels modal, but as a compact pill. */
@media (max-width: 680px){
  html.touch-ui .move-zone{
    grid-template-columns:minmax(0,1fr) !important;
    justify-items:center;
  }
  html.touch-ui .attire-action{
    display:none !important;
  }
  html.touch-ui .level-picker-head{
    align-items:center;
  }
  html.touch-ui .level-picker-tools{
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:nowrap;
  }
  html.touch-ui .level-attire{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    width:auto;
    min-width:0;
    max-width:none;
    height:28px;
    padding:2px 8px 2px 6px;
    border:1px solid var(--ink);
    background:var(--yellow);
    gap:4px;
    font-size:8px;
    font-weight:950;
    letter-spacing:.04em;
    line-height:1;
    box-sizing:border-box;
  }
  html.touch-ui .level-attire .style-outfit-icon{
    width:17px;
    height:17px;
    flex:none;
  }
}

/* Short mobile landscape keeps the modal version too. */
@media (max-height: 520px) and (orientation: landscape){
  html.touch-ui .move-zone{
    grid-template-columns:minmax(0,1fr) !important;
    justify-items:center;
  }
  html.touch-ui .attire-action{
    display:none !important;
  }
  html.touch-ui .level-attire{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    width:auto;
    min-width:0;
    max-width:none;
    height:28px;
    padding:2px 8px 2px 6px;
    gap:4px;
    font-size:8px;
    line-height:1;
  }
  html.touch-ui .level-attire .style-outfit-icon{
    width:17px;
    height:17px;
  }
}

/* A touch tablet in portrait should never get the giant modal wardrobe button. */
@media (min-width: 681px) and (orientation: portrait){
  html.touch-ui .level-attire{
    display:none !important;
  }
}

/* Keep the SVG arrows comfortably centred. */
.dpad button{
  display:grid;
  place-items:center;
  line-height:0;
}
.dpad button svg{
  width:42%;
  height:42%;
  display:block;
  margin:0;
}

/* BOXXY v167 — Rainbow Mode switch shares the target-colour bar. */
@media(max-width:900px){
  .maker-goal-palette{flex-wrap:wrap}
  .maker-goal-colour-controls{flex-basis:100%;grid-template-columns:auto minmax(0,1fr)}
  .maker-goal-colour-controls>small{display:none}
  .maker-rainbow-description{white-space:normal}
}


/* BOXXY v169 — random completion artwork from Sam's supplied sprite sheets. */
.complete-art{
  display:grid;
  place-items:center;
  padding:8px;
  background:#000;
}
.complete-sprite{
  width:100%;
  max-width:300px;
  aspect-ratio:9/10;
  background-repeat:no-repeat;
  background-size:500% 300%;
  background-position:0 0;
  transform:translateZ(0);
  backface-visibility:hidden;
}
@media(max-width:560px){
  .complete-art{padding:4px}
  .complete-sprite{width:100%;max-width:none}
}

/* BOXXY v170 — larger, centred ordinary level-complete artwork on phones only. */
@media (max-width:700px){
  .complete-card:not(.final-complete){
    width:min(430px,calc(100vw - 16px));
    max-height:calc(100dvh - 16px);
    grid-template-columns:1fr;
    grid-template-rows:clamp(190px,36dvh,270px) minmax(0,auto);
    overflow:hidden;
  }

  .complete-card:not(.final-complete) .complete-art{
    width:100%;
    min-height:0;
    height:auto;
    padding:6px 10px 2px;
    border-right:0;
    border-bottom:2px solid var(--ink);
    place-items:center;
  }

  .complete-card:not(.final-complete) .complete-sprite{
    width:auto;
    height:100%;
    max-width:100%;
    max-height:100%;
    aspect-ratio:9/10;
    margin:auto;
  }

  .complete-card:not(.final-complete) .complete-copy{
    justify-content:flex-start;
    padding:16px 44px 17px 18px;
    overflow:auto;
  }

  .complete-card:not(.final-complete) .complete-kicker{
    font-size:8px;
  }

  .complete-card:not(.final-complete) h2{
    margin:7px 0 8px;
    font-size:clamp(30px,10vw,42px);
  }

  .complete-card:not(.final-complete) p{
    margin-bottom:13px;
    font-size:11.5px;
    line-height:1.28;
  }
}

/* Short landscape phones keep a side-by-side layout, but give the art real prominence. */
@media (max-width:950px) and (max-height:500px){
  .complete-card:not(.final-complete){
    width:min(680px,calc(100vw - 16px));
    max-height:calc(100dvh - 16px);
    grid-template-columns:minmax(190px,42%) minmax(0,1fr);
    grid-template-rows:1fr;
  }

  .complete-card:not(.final-complete) .complete-art{
    height:100%;
    min-height:220px;
    padding:5px;
    border-right:2px solid var(--ink);
    border-bottom:0;
  }

  .complete-card:not(.final-complete) .complete-sprite{
    height:min(94%,260px);
  }

  .complete-card:not(.final-complete) .complete-copy{
    padding:13px 43px 13px 15px;
  }
}


/* BOXXY v171 — individually cropped completion artwork.
   Contain the whole asset and centre it at every responsive size. */
.complete-sprite{
  aspect-ratio:1/1;
  background-size:contain;
  background-position:center;
  background-repeat:no-repeat;
}
@media (max-width:700px){
  .complete-card:not(.final-complete) .complete-sprite{
    aspect-ratio:1/1;
    background-size:contain;
    background-position:center;
  }
}


/* BOXXY v172 — exact canvas rendering from one 6 × 5 sprite sheet. */
.complete-sprite{
  display:block;
  aspect-ratio:1/1;
  background:#000;
  background-image:none!important;
}
@media (max-width:700px){
  .complete-card:not(.final-complete) .complete-sprite{
    aspect-ratio:1/1;
    background:#000;
  }
}

/* BOXXY v173 — mobile completion artwork containment.
   The canvas uses explicit square dimensions on portrait phones. Percentage
   canvas height can otherwise resolve from its intrinsic width on some mobile
   browsers and overrun the artwork row. The copy remains in a separate,
   opaque grid track and scrolls independently only when a screen is unusually
   short. */
@media (max-width:700px) and (orientation:portrait){
  .complete-modal{
    padding:8px;
    overflow:hidden;
  }

  .complete-card:not(.final-complete){
    width:min(430px,100%);
    max-height:calc(100svh - 16px);
    max-height:calc(100dvh - 16px);
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto minmax(0,1fr);
    overflow:hidden;
    isolation:isolate;
  }

  .complete-card:not(.final-complete) .complete-art{
    position:relative;
    z-index:1;
    width:100%;
    height:clamp(150px,30svh,240px);
    height:clamp(150px,30dvh,240px);
    min-height:0;
    padding:6px;
    border-right:0;
    border-bottom:2px solid var(--ink);
    overflow:hidden;
    contain:layout paint;
  }

  .complete-card:not(.final-complete) .complete-sprite{
    display:block;
    width:clamp(132px,calc(30svh - 16px),222px);
    height:clamp(132px,calc(30svh - 16px),222px);
    width:clamp(132px,calc(30dvh - 16px),222px);
    height:clamp(132px,calc(30dvh - 16px),222px);
    max-width:calc(100% - 4px);
    max-height:calc(100% - 4px);
    margin:auto;
    aspect-ratio:1/1;
    object-fit:contain;
    flex:none;
  }

  .complete-card:not(.final-complete) .complete-copy{
    position:relative;
    z-index:2;
    min-height:0;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    background:linear-gradient(135deg,rgba(255,255,255,.36),transparent 52%),#f7f0e5;
  }
}

/* Phone landscape: a bounded two-column card. Artwork and copy are contained
   in separate columns at every short-screen height. */
@media (max-width:950px) and (max-height:560px) and (orientation:landscape){
  .complete-modal{
    padding:8px;
    overflow:hidden;
  }

  .complete-card:not(.final-complete){
    width:min(720px,calc(100vw - 16px));
    height:min(460px,calc(100svh - 16px));
    height:min(460px,calc(100dvh - 16px));
    max-height:none;
    grid-template-columns:clamp(150px,38vw,280px) minmax(0,1fr);
    grid-template-rows:minmax(0,1fr);
    overflow:hidden;
    isolation:isolate;
  }

  .complete-card:not(.final-complete) .complete-art{
    position:relative;
    z-index:1;
    width:100%;
    height:100%;
    min-height:0;
    padding:5px;
    border-right:2px solid var(--ink);
    border-bottom:0;
    overflow:hidden;
    contain:layout paint;
  }

  .complete-card:not(.final-complete) .complete-sprite{
    display:block;
    width:100%;
    height:auto;
    max-width:100%;
    max-height:100%;
    margin:auto;
    aspect-ratio:1/1;
    object-fit:contain;
  }

  .complete-card:not(.final-complete) .complete-copy{
    position:relative;
    z-index:2;
    min-width:0;
    min-height:0;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    background:linear-gradient(135deg,rgba(255,255,255,.36),transparent 52%),#f7f0e5;
  }
}


/* BOXXY v176 — completed-pack stars, aggregate pack totals and grand finale. */
.title-word-row{
  display:flex;
  align-items:center;
  gap:clamp(7px,.8vw,12px);
  min-width:0;
}
.title-word-row > strong{flex:none}
.title-badges{
  --header-badge-size:clamp(25px,2.15vw,34px);
  --header-badge-gap:clamp(3px,.35vw,6px);
  display:flex;
  align-items:center;
  gap:var(--header-badge-gap);
  min-width:0;
  margin-top:-2px;
}
.completed-pack-stars{
  display:flex;
  align-items:center;
  gap:var(--header-badge-gap);
  min-width:0;
}
.completed-pack-stars[hidden]{display:none!important}
.completed-pack-star[hidden]{display:none!important}
.completed-pack-star{
  appearance:none;
  width:var(--header-badge-size);
  height:var(--header-badge-size);
  flex:none;
  padding:0;
  border:0;
  background:transparent;
  display:grid;
  place-items:center;
  filter:drop-shadow(2px 2px 0 rgba(23,23,25,.28));
  transition:transform .14s ease,filter .14s ease;
}
.completed-pack-star svg{display:block;width:100%;height:100%;overflow:visible}
/* BOXXY v304 — optically centre the Starry Night crescent on the shared badge rail.
   Percentage translation scales naturally with desktop and mobile badge sizes. */
.completed-pack-reward-moon img{
  transform:translateY(6%);
  transform-origin:center;
}
.completed-pack-star path{
  fill:var(--pack-star-colour,var(--red));
  stroke:#f2c121;
  stroke-width:9;
  stroke-linejoin:round;
  paint-order:stroke fill;
}
.completed-pack-star:hover,.completed-pack-star:focus-visible{
  transform:translateY(-2px) rotate(-5deg) scale(1.08);
  filter:drop-shadow(3px 4px 0 rgba(23,23,25,.32));
  outline:0;
}
.completed-pack-star:active{transform:translateY(1px) scale(.96)}


/* BOXXY v350 — responsive awards rail and trophy cabinet. */
.trophy-cabinet-btn{
  position:relative;
  appearance:none;
  width:calc(var(--header-badge-size) * 1.06);
  height:calc(var(--header-badge-size) * 1.06);
  flex:none;
  padding:2px;
  border:2px solid var(--ink);
  border-radius:3px;
  background:#f7f0e5;
  color:var(--ink);
  box-shadow:2px 2px 0 rgba(23,23,25,.28);
  cursor:pointer;
  transition:transform .14s ease,box-shadow .14s ease,background .14s ease;
}
.trophy-cabinet-btn[hidden]{display:none!important}
.trophy-cabinet-btn svg{display:block;width:100%;height:100%}
.trophy-cabinet-btn svg rect{fill:#f5c21b;stroke:currentColor;stroke-width:7}
.trophy-cabinet-btn svg path{fill:none;stroke:currentColor;stroke-width:7;stroke-linejoin:round;stroke-linecap:round}
.trophy-cabinet-btn svg circle{fill:var(--red);stroke:currentColor;stroke-width:6}
.trophy-cabinet-btn:hover,.trophy-cabinet-btn:focus-visible{transform:translateY(-2px);box-shadow:3px 4px 0 rgba(23,23,25,.3);background:#fff8e8;outline:0}
.trophy-cabinet-btn:active{transform:translateY(1px);box-shadow:1px 1px 0 rgba(23,23,25,.3)}
.trophy-cabinet-more-count{
  position:absolute;
  right:-7px;
  top:-8px;
  min-width:17px;
  height:17px;
  padding:0 4px;
  border:2px solid #f7f0e5;
  border-radius:9px;
  background:var(--red);
  color:#fff;
  display:grid;
  place-items:center;
  font-size:8px;
  line-height:1;
  font-weight:1000;
  letter-spacing:-.03em;
}
.trophy-cabinet-more-count:empty{display:none}
/* The mobile title clips overflowing children. Keep the count inside the
   cabinet button and provide room for the gold medal overlay. */
@media(max-width:760px){
  .title-badges .trophy-cabinet-btn{margin-left:7px}
  .title-badges .trophy-cabinet-more-count{top:0;right:0}
}


.trophy-cabinet-modal{
  z-index:11200;
  padding:18px;
  overflow:auto;
  background:rgba(23,23,25,.62);
  backdrop-filter:blur(7px);
}
.trophy-cabinet-card{
  width:min(820px,94vw);
  max-height:92dvh;
  overflow:auto;
  padding:24px;
  background:var(--paper2);
  border:2px solid var(--ink);
  box-shadow:12px 12px 0 rgba(245,194,27,.55),0 28px 80px rgba(0,0,0,.34);
}
.trophy-cabinet-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding-bottom:16px;border-bottom:2px solid var(--ink)}
.trophy-cabinet-head h2{margin:5px 0 4px;font-size:clamp(30px,5vw,54px);line-height:.88;letter-spacing:-.055em}
.trophy-cabinet-head p{margin:9px 0 0;color:#61574b;font-size:11px;line-height:1.2;font-weight:900;letter-spacing:.055em}
.trophy-cabinet-close{flex:none;width:44px;height:44px;padding:0;border:2px solid var(--ink);background:var(--red);color:#fff;font-size:30px;line-height:1;font-weight:950;cursor:pointer}
.trophy-cabinet-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:18px}
.trophy-cabinet-slot{
  min-width:0;
  min-height:180px;
  padding:15px 10px 12px;
  border:2px solid var(--ink);
  background:#efe5d4;
  box-shadow:5px 5px 0 rgba(23,23,25,.22);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
}
.trophy-cabinet-slot.is-earned{background:#fff8e8;box-shadow:5px 5px 0 rgba(245,194,27,.72)}
.trophy-cabinet-award{
  appearance:none;
  width:100%;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  color:var(--ink);
  display:flex;
  flex-direction:column;
  align-items:center;
  cursor:pointer;
}
.trophy-cabinet-award:focus-visible{outline:3px solid var(--red);outline-offset:4px}
.trophy-cabinet-award-icon{
  --cabinet-award-size:82px;
  width:var(--cabinet-award-size);
  height:var(--cabinet-award-size);
  display:grid;
  place-items:center;
  filter:drop-shadow(4px 5px 0 rgba(23,23,25,.22));
  transition:transform .14s ease;
}
.trophy-cabinet-award:hover .trophy-cabinet-award-icon{transform:translateY(-3px) rotate(-3deg) scale(1.04)}
.trophy-cabinet-award-icon svg,.trophy-cabinet-award-icon img{display:block;width:100%;height:100%;object-fit:contain}
.trophy-cabinet-award-icon path{fill:var(--pack-star-colour,var(--red));stroke:#f2c121;stroke-width:9;stroke-linejoin:round;paint-order:stroke fill}
.trophy-cabinet-slot.is-unearned .trophy-cabinet-award-icon{filter:grayscale(1);opacity:.18}
.trophy-cabinet-slot.is-unearned .trophy-cabinet-award-icon path{fill:#8f887e;stroke:#d8cec0}
.trophy-cabinet-slot-name{margin-top:12px;font-size:12px;line-height:1.05;font-weight:1000;letter-spacing:.015em;text-transform:uppercase}
.trophy-cabinet-slot-status{margin-top:6px;color:#746a5e;font-size:8px;line-height:1;font-weight:950;letter-spacing:.08em}
.trophy-cabinet-slot.is-earned .trophy-cabinet-slot-status{color:#2f8f5b}

@media(max-width:620px){
  .trophy-cabinet-modal{padding:8px}
  .trophy-cabinet-card{width:100%;max-height:calc(100dvh - 16px);padding:15px;box-shadow:6px 6px 0 rgba(245,194,27,.55)}
  .trophy-cabinet-head{gap:12px;padding-bottom:12px}
  .trophy-cabinet-head h2{font-size:clamp(29px,10vw,42px)}
  .trophy-cabinet-close{width:40px;height:40px;font-size:27px}
  .trophy-cabinet-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:12px}
  .trophy-cabinet-slot{min-height:136px;padding:11px 7px 9px;box-shadow:3px 3px 0 rgba(23,23,25,.2)}
  .trophy-cabinet-slot.is-earned{box-shadow:3px 3px 0 rgba(245,194,27,.7)}
  .trophy-cabinet-award-icon{--cabinet-award-size:58px}
  .trophy-cabinet-slot-name{margin-top:9px;font-size:9px}
  .trophy-cabinet-slot-status{margin-top:5px;font-size:7px}
  .trophy-cabinet-btn{width:24px;height:24px}
  .trophy-cabinet-more-count{right:-6px;top:-7px;min-width:15px;height:15px;padding:0 3px;border-width:1px;font-size:7px}
}

.pack-completion-stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin:0 0 18px;
  max-width:520px;
}
.pack-completion-stats[hidden]{display:none!important}
.pack-completion-stats > div{
  min-width:0;
  padding:10px 8px 9px;
  background:#efe5d4;
  border:2px solid var(--ink);
  box-shadow:4px 4px 0 rgba(23,23,25,.14);
  text-align:center;
}
.pack-completion-stats span{
  display:block;
  margin:0;
  color:var(--ink);
  font-size:8px;
  line-height:1.1;
  font-weight:950;
  letter-spacing:.075em;
  white-space:normal;
}
.pack-completion-stats strong{
  display:block;
  margin-top:5px;
  color:var(--ink);
  font-size:clamp(15px,2vw,21px);
  line-height:1;
  letter-spacing:-.035em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-variant-numeric:tabular-nums;
}
.complete-card .pack-stats-note{
  grid-column:1/-1;
  max-width:none;
  margin:1px 0 0;
  padding:0 2px;
  color:#675c50;
  font-size:10px;
  line-height:1.3;
  font-weight:720;
}
.pack-stats-note[hidden]{display:none!important}

.grand-celebration{
  position:fixed;
  inset:0;
  z-index:9050;
  pointer-events:none;
  overflow:hidden;
}
.grand-celebration[hidden]{display:none!important}
.grand-firework{
  position:absolute;
  width:1px;
  height:1px;
}
.grand-firework::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:18px;
  height:18px;
  border:4px solid var(--ring-colour,var(--yellow));
  border-radius:50%;
  opacity:0;
  transform:translate(-50%,-50%) scale(.15);
  animation:boxxyGrandRing 1.15s ease-out var(--firework-delay,0ms) forwards;
}
.grand-firework i{
  position:absolute;
  left:0;
  top:0;
  width:8px;
  height:15px;
  border-radius:60% 60% 45% 45%;
  background:var(--spark-colour,var(--yellow));
  box-shadow:0 0 8px color-mix(in srgb,var(--spark-colour,var(--yellow)) 72%,transparent);
  opacity:0;
  animation:boxxyGrandSpark 1.35s cubic-bezier(.08,.7,.18,1) var(--spark-delay,0ms) forwards;
}
.grand-confetti{
  position:absolute;
  top:-32px;
  display:block;
  opacity:0;
  border:1px solid rgba(23,23,25,.18);
  animation:boxxyGrandConfetti var(--confetti-duration,2400ms) cubic-bezier(.12,.62,.28,1) var(--confetti-delay,0ms) forwards;
}
@keyframes boxxyGrandRing{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.15)}
  18%{opacity:1}
  100%{opacity:0;transform:translate(-50%,-50%) scale(7.5)}
}
@keyframes boxxyGrandSpark{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(0deg)}
  14%{opacity:1}
  75%{opacity:1}
  100%{opacity:0;transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty))) scale(.1) rotate(720deg)}
}
@keyframes boxxyGrandConfetti{
  0%{opacity:0;transform:translate3d(0,-30px,0) rotate(0deg)}
  8%{opacity:1}
  84%{opacity:1}
  100%{opacity:0;transform:translate3d(var(--confetti-drift),112vh,0) rotate(var(--confetti-spin))}
}

@media(max-width:760px){
  .title-word-row{gap:4px}
  .title-badges{
    --header-badge-size:clamp(16px,5vw,21px);
    --header-badge-gap:1px;
  }
  .completed-pack-star{filter:drop-shadow(1px 1px 0 rgba(23,23,25,.28))}
  .completed-pack-star path{stroke-width:10}
  .pack-completion-stats{gap:5px;margin-bottom:13px}
  .pack-completion-stats > div{padding:8px 4px 7px;box-shadow:2px 2px 0 rgba(23,23,25,.14)}
  .pack-completion-stats span{font-size:6.5px;letter-spacing:.045em}
  .pack-completion-stats strong{font-size:clamp(12px,4vw,16px)}
  .complete-card .pack-stats-note{font-size:8px}
}
@media(max-width:390px){
  .title-badges{--header-badge-size:15px;--header-badge-gap:0}
  .title-badges > .daily-streak-badge{--daily-streak-badge-size:24px}
}
@media(prefers-reduced-motion:reduce){
  .grand-firework::before,.grand-firework i,.grand-confetti{animation-duration:.01ms!important;animation-delay:0ms!important}
}


/* BOXXY v177 — star award panel and animated aggregate totals. */
.pack-star-award{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:12px;
  max-width:620px;
  margin:0 0 17px;
  padding:11px 13px;
  background:#fff8ea;
  border:2px solid var(--ink);
  box-shadow:4px 4px 0 rgba(23,23,25,.14);
}
.pack-star-award[hidden]{display:none!important}
.pack-star-award-icon{
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  flex:none;
  filter:drop-shadow(2px 3px 0 rgba(23,23,25,.22));
}
.pack-star-award-icon svg{display:block;width:100%;height:100%;overflow:visible}
.pack-star-award-icon path{
  fill:var(--pack-star-colour,var(--red));
  stroke:#f2c121;
  stroke-width:9;
  stroke-linejoin:round;
  paint-order:stroke fill;
}
.pack-star-award p{
  margin:0;
  color:var(--ink);
  font-size:clamp(12px,1.45vw,16px);
  line-height:1.32;
  font-weight:820;
}
@media(max-width:760px){
  .pack-star-award{gap:8px;margin-bottom:12px;padding:8px 9px;box-shadow:2px 2px 0 rgba(23,23,25,.14)}
  .pack-star-award-icon{width:38px;height:38px;filter:drop-shadow(1px 2px 0 rgba(23,23,25,.2))}
  .pack-star-award-icon path{stroke-width:10}
  .pack-star-award p{font-size:10px;line-height:1.3}
}


/* BOXXY v178 — slower total rewards and a contained, aligned pack-completion screen. */
.pack-completion-stats > div{
  transition:background-color .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.pack-completion-stats > div.pack-stat-target-hit{
  background:#ffe89a;
  background:color-mix(in srgb,var(--pack-stat-accent,var(--red)) 20%,#fff4c7);
  border-color:var(--pack-stat-accent,var(--red));
  animation:boxxyPackStatTarget .82s cubic-bezier(.18,.82,.24,1) forwards;
}
@keyframes boxxyPackStatTarget{
  0%{transform:scale(1);box-shadow:4px 4px 0 rgba(23,23,25,.14)}
  34%{transform:translateY(-3px) scale(1.055);box-shadow:0 0 0 4px #f2c121,7px 7px 0 var(--pack-stat-accent,var(--red))}
  68%{transform:translateY(1px) scale(.985);box-shadow:0 0 0 2px #f2c121,4px 4px 0 var(--pack-stat-accent,var(--red))}
  100%{transform:scale(1);box-shadow:0 0 0 2px #f2c121,4px 4px 0 var(--pack-stat-accent,var(--red))}
}

/* The compact congratulations list already excludes the awarded pack, so the active pack must remain visible. */
.complete-card.final-complete .final-pack-option.active{display:grid!important}

/* Keep all coloured pack headers in exactly the same position and size. */
.pack-grid{align-items:stretch}
@media(min-width:621px){
  .pack-grid .pack-option{
    display:grid;
    grid-template-rows:112px minmax(0,1fr);
    align-self:stretch;
  }
  .pack-grid .pack-option .final-pack-art{
    width:100%;
    height:112px;
    min-height:112px;
    margin:0;
    align-self:start;
  }
}

/* Laptop and desktop: one contained card, four aligned pack choices and a visible prize button. */
@media(min-width:701px){
  .complete-modal{
    display:grid;
    place-items:center;
    padding:12px;
    overflow:hidden;
  }
  .complete-card.final-complete{
    width:min(940px,calc(100vw - 24px));
    max-height:calc(100dvh - 24px);
    grid-template-columns:96px minmax(0,1fr);
    overflow:hidden;
  }
  .complete-card.final-complete .complete-art{
    min-height:0;
    height:auto;
  }
  .complete-card.final-complete .complete-copy{
    min-height:0;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:17px 48px 18px 21px;
  }
  .complete-card.final-complete h2{
    margin:0 0 7px;
    font-size:clamp(31px,4vw,42px);
    line-height:.86;
  }
  .complete-card.final-complete #completeText{
    max-width:none;
    margin:0 0 10px;
    font-size:11.5px;
    line-height:1.28;
  }
  .complete-card.final-complete .pack-star-award{
    grid-template-columns:44px minmax(0,1fr);
    gap:9px;
    max-width:none;
    margin:0 0 10px;
    padding:7px 10px;
  }
  .complete-card.final-complete .pack-star-award-icon{width:42px;height:42px}
  .complete-card.final-complete .pack-star-award p{font-size:11.5px;line-height:1.25}
  .complete-card.final-complete .pack-completion-stats{
    max-width:none;
    gap:7px;
    margin:0 0 10px;
  }
  .complete-card.final-complete .pack-completion-stats > div{padding:7px 6px 6px}
  .complete-card.final-complete .pack-completion-stats span{font-size:7px}
  .complete-card.final-complete .pack-completion-stats strong{margin-top:3px;font-size:17px}
  .complete-card.final-complete .final-pack-picker{
    margin:0;
    padding-top:9px;
  }
  .complete-card.final-complete .final-pack-heading{margin-bottom:6px}
  .complete-card.final-complete .final-pack-heading strong{font-size:9px}
  .complete-card.final-complete .final-pack-heading span{font-size:8px}
  .complete-card.final-complete .final-pack-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    align-items:stretch;
    gap:7px;
  }
  .complete-card.final-complete .final-pack-option{
    min-height:82px;
    height:82px;
    display:grid;
    grid-template-rows:37px minmax(0,1fr);
    overflow:hidden;
  }
  .complete-card.final-complete .final-pack-art{
    width:100%;
    height:37px;
    min-height:37px;
    margin:0;
    border-bottom:2px solid var(--ink);
    align-self:start;
  }
  .complete-card.final-complete .final-pack-art i{
    width:34px;
    height:34px;
    left:-9px;
    top:-9px;
  }
  .complete-card.final-complete .final-pack-art > b:not(.pack-no){
    right:6px;
    bottom:2px;
    font-size:20px;
  }
  .complete-card.final-complete .final-pack-name{
    min-height:0;
    height:45px;
    padding:5px 6px 4px;
    overflow:hidden;
    font-size:7.2px;
    line-height:1.03;
  }
  .complete-card.final-complete .final-pack-name small{
    margin-top:3px;
    font-size:5.8px;
    line-height:1.06;
    letter-spacing:.05em;
  }
  .complete-card.final-complete .final-pack-status{
    min-height:0!important;
    margin:4px 0 0!important;
    font-size:7px!important;
  }
  .complete-card.final-complete .complete-actions{margin-top:8px}
  .complete-card.final-complete .claim-prize-btn{
    min-height:42px;
    padding:7px 14px;
    font-size:11px;
  }
  .complete-card.final-complete .claim-prize-btn b{font-size:20px}
}

@media(min-width:701px) and (max-height:680px){
  .complete-card.final-complete .complete-copy{padding-top:12px;padding-bottom:12px}
  .complete-card.final-complete h2{font-size:31px}
  .complete-card.final-complete #completeText{font-size:10.5px;margin-bottom:7px}
  .complete-card.final-complete .pack-star-award{margin-bottom:7px;padding-block:5px}
  .complete-card.final-complete .pack-star-award-icon{width:36px;height:36px}
  .complete-card.final-complete .pack-star-award p{font-size:10.5px}
  .complete-card.final-complete .pack-completion-stats{margin-bottom:7px}
  .complete-card.final-complete .final-pack-option{height:72px;min-height:72px;grid-template-rows:32px 40px}
  .complete-card.final-complete .final-pack-art{height:32px;min-height:32px}
  .complete-card.final-complete .final-pack-name{height:40px;padding-top:4px}
  .complete-card.final-complete .claim-prize-btn{min-height:38px}
}

/* BOXXY v179 — chosen spacious Layout B for completed-pack congratulations. */
.completed-pack-heading{
  display:none;
  margin:8px 0 14px!important;
  max-width:none!important;
  color:#5d554d;
  font-size:12px!important;
  line-height:1.2!important;
  font-weight:950!important;
  letter-spacing:.075em;
  text-transform:uppercase;
}
.complete-card.final-complete .completed-pack-heading{display:block}
.complete-card.final-complete #completeText{display:none!important}

/* One reward colour for every pack: the selected pack only colours its star. */
.pack-completion-stats > div.pack-stat-target-hit{
  background:#ffe58a!important;
  border-color:var(--ink)!important;
  animation:boxxyPackStatTarget179 .85s cubic-bezier(.18,.82,.24,1) forwards!important;
}
@keyframes boxxyPackStatTarget179{
  0%{transform:scale(1);box-shadow:5px 5px 0 rgba(23,23,25,.15)}
  36%{transform:translateY(-4px) scale(1.055);box-shadow:0 0 0 4px #f2c121,8px 8px 0 var(--ink)}
  70%{transform:translateY(1px) scale(.99);box-shadow:0 0 0 2px #f2c121,5px 5px 0 var(--ink)}
  100%{transform:scale(1);box-shadow:0 0 0 2px #f2c121,5px 5px 0 var(--ink)}
}

.final-pack-more-row{
  display:flex;
  justify-content:flex-end;
  min-height:22px;
  margin-top:7px;
}
.final-pack-more-btn{
  appearance:none;
  border:0;
  background:transparent;
  padding:0 1px;
  color:var(--ink);
  font-family:inherit;
  font-size:10px;
  font-weight:950;
  line-height:1;
  letter-spacing:.12em;
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:3px;
  cursor:pointer;
}
.final-pack-more-btn[hidden]{display:none!important}
.final-pack-more-btn:hover,.final-pack-more-btn:focus-visible{
  color:var(--blue);
  outline:2px solid var(--yellow);
  outline-offset:3px;
}

@media(min-width:701px){
  .complete-modal{
    display:grid;
    place-items:center;
    padding:12px;
    overflow:hidden;
  }
  .complete-card.final-complete{
    width:min(1100px,calc(100vw - 24px));
    max-height:calc(100dvh - 24px);
    grid-template-columns:120px minmax(0,1fr);
    overflow:hidden;
  }
  .complete-card.final-complete .complete-art{
    position:relative;
    width:120px;
    min-height:0!important;
    height:auto!important;
    display:grid;
    place-items:center;
    padding:7px;
    overflow:hidden;
    background:#050505;
    border-right:4px solid var(--ink);
  }
  .complete-card.final-complete .complete-sprite{
    position:static!important;
    display:block;
    width:106px!important;
    height:106px!important;
    max-width:calc(100% - 2px)!important;
    max-height:calc(100% - 14px)!important;
    margin:auto!important;
    aspect-ratio:1/1;
    object-fit:contain;
    border:3px solid var(--yellow);
    background:#050505;
    box-shadow:5px 5px 0 rgba(23,23,25,.35);
    transform:none!important;
  }
  .complete-card.final-complete .complete-copy{
    min-width:0;
    min-height:0;
    display:block;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:24px 48px 26px 30px;
  }
  .complete-card.final-complete h2{
    margin:0;
    font-size:clamp(46px,5.2vw,68px);
    line-height:.86;
    letter-spacing:-.055em;
  }
  .complete-card.final-complete .pack-star-award{
    grid-template-columns:58px minmax(0,1fr);
    gap:14px;
    max-width:none;
    margin:0 0 14px;
    padding:11px 14px;
    border:3px solid var(--ink);
    box-shadow:5px 5px 0 rgba(23,23,25,.16);
  }
  .complete-card.final-complete .pack-star-award-icon{width:56px;height:56px}
  .complete-card.final-complete .pack-star-award p{
    font-size:14px;
    line-height:1.36;
  }
  .complete-card.final-complete .pack-completion-stats{
    max-width:none;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:12px;
    margin:0 0 20px;
  }
  .complete-card.final-complete .pack-completion-stats > div{
    min-height:86px;
    display:grid;
    align-content:center;
    justify-items:center;
    padding:12px 8px 10px;
    background:#f7f1e6;
    border:3px solid var(--ink);
    box-shadow:5px 5px 0 rgba(23,23,25,.15);
  }
  .complete-card.final-complete .pack-completion-stats span{
    font-size:9px;
    letter-spacing:.11em;
  }
  .complete-card.final-complete .pack-completion-stats strong{
    margin-top:6px;
    font-size:24px;
  }
  .complete-card.final-complete .final-pack-picker{
    margin:0;
    padding-top:14px;
    border-top:3px solid var(--ink);
  }
  .complete-card.final-complete .final-pack-heading{
    display:block;
    margin-bottom:10px;
  }
  .complete-card.final-complete .final-pack-heading strong{
    font-size:12px;
    letter-spacing:.1em;
  }
  .complete-card.final-complete .final-pack-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    align-items:stretch;
    gap:8px;
  }
  .complete-card.final-complete .final-pack-option{
    min-height:108px;
    height:108px;
    display:grid;
    grid-template-columns:1fr;
    grid-template-rows:52px minmax(0,1fr);
    overflow:hidden;
    border:3px solid var(--ink);
    box-shadow:5px 5px 0 rgba(23,23,25,.14);
  }
  .complete-card.final-complete .final-pack-art{
    width:100%;
    height:52px;
    min-height:52px;
    margin:0;
    border-bottom:3px solid var(--ink);
  }
  .complete-card.final-complete .final-pack-art i{
    width:52px;
    height:52px;
    left:-12px;
    top:-13px;
  }
  .complete-card.final-complete .final-pack-art > b:not(.pack-no){
    right:8px;
    bottom:4px;
    font-size:28px;
  }
  .complete-card.final-complete .final-pack-name{
    min-height:53px;
    height:53px;
    padding:7px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    overflow:hidden;
    font-size:8px;
    line-height:1.08;
    letter-spacing:.045em;
  }
  .complete-card.final-complete .final-pack-name small{
    margin-top:5px;
    font-size:7px;
    line-height:1.15;
  }
  .complete-card.final-complete .final-pack-status{
    min-height:0!important;
    margin:0!important;
    font-size:8px!important;
  }
  .complete-card.final-complete .complete-actions{margin-top:8px}
  .complete-card.final-complete .claim-prize-btn{
    min-height:58px;
    padding:11px 18px;
    font-size:14px;
  }
  .complete-card.final-complete .claim-prize-btn b{font-size:24px}
}

/* Short laptops keep the chosen layout, but use measured reductions rather than cramming it. */
@media(min-width:701px) and (max-height:700px){
  .complete-card.final-complete{width:min(1000px,calc(100vw - 24px))}
  .complete-card.final-complete .complete-copy{padding-top:16px;padding-bottom:16px}
  .complete-card.final-complete h2{font-size:50px}
  .completed-pack-heading{margin:6px 0 9px!important;font-size:10px!important}
  .complete-card.final-complete .pack-star-award{margin-bottom:10px;padding:8px 11px}
  .complete-card.final-complete .pack-star-award-icon{width:44px;height:44px}
  .complete-card.final-complete .pack-star-award p{font-size:11.5px;line-height:1.25}
  .complete-card.final-complete .pack-completion-stats{gap:8px;margin-bottom:12px}
  .complete-card.final-complete .pack-completion-stats > div{min-height:68px;padding:8px 6px}
  .complete-card.final-complete .pack-completion-stats strong{font-size:19px}
  .complete-card.final-complete .final-pack-picker{padding-top:9px}
  .complete-card.final-complete .final-pack-heading{margin-bottom:6px}
  .complete-card.final-complete .final-pack-option{height:88px;min-height:88px;grid-template-rows:40px 48px}
  .complete-card.final-complete .final-pack-art{height:40px;min-height:40px}
  .complete-card.final-complete .final-pack-name{height:48px;min-height:48px;padding:5px 6px;font-size:7.2px}
  .complete-card.final-complete .final-pack-name small{margin-top:3px;font-size:5.8px}
  .final-pack-more-row{min-height:17px;margin-top:4px}
  .complete-card.final-complete .claim-prize-btn{min-height:46px;padding-block:7px;font-size:11px}
}

@media(max-width:700px){
  .complete-card.final-complete .complete-art{
    display:grid!important;
    place-items:center!important;
    padding:3px!important;
    background:#050505;
  }
  .complete-card.final-complete .complete-sprite{
    position:static!important;
    width:34px!important;
    height:34px!important;
    max-width:calc(100% - 4px)!important;
    max-height:calc(100% - 8px)!important;
    margin:auto!important;
    aspect-ratio:1/1;
    object-fit:contain;
    border:2px solid var(--yellow);
    background:#050505;
    transform:none!important;
  }
  .completed-pack-heading{
    margin:4px 0 7px!important;
    font-size:8px!important;
    line-height:1.1!important;
  }
  .complete-card.final-complete .pack-completion-stats > div.pack-stat-target-hit{
    box-shadow:0 0 0 2px #f2c121,3px 3px 0 var(--ink)!important;
  }
  .final-pack-more-row{min-height:16px;margin-top:4px}
  .final-pack-more-btn{font-size:8px;text-underline-offset:2px}
}

@media(prefers-reduced-motion:reduce){
  .pack-completion-stats > div.pack-stat-target-hit{animation:none!important}
}


/* BOXXY v180 — iPad/desktop completion fixes. */
/* The sprite canvas previously had an intentional yellow decorative frame. The artwork now sits cleanly on the black panel. */
.complete-card.final-complete .complete-sprite{
  border:0!important;
  box-shadow:none!important;
}

/* Override the generic red modal-button rule: MORE is a simple text link. */
.complete-card.final-complete .final-pack-more-btn{
  width:auto;
  min-height:0;
  margin:0;
  padding:0 1px;
  border:0;
  background:transparent;
  color:var(--ink);
  box-shadow:none;
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:3px;
}
.complete-card.final-complete .final-pack-more-btn:hover,
.complete-card.final-complete .final-pack-more-btn:focus-visible{
  background:transparent;
  color:var(--blue);
}

@media(min-width:701px){
  .complete-card.final-complete h2{
    white-space:nowrap;
  }
  .complete-card.final-complete .pack-star-award p{
    max-width:none;
  }
  .complete-card.final-complete .final-pack-option{
    height:auto;
    min-height:108px;
    grid-template-rows:52px auto;
    overflow:visible;
  }
  .complete-card.final-complete .final-pack-name{
    height:auto;
    min-height:56px;
    overflow:visible;
    overflow-wrap:anywhere;
  }
  .complete-card.final-complete .final-pack-name small,
  .complete-card.final-complete .pack-lock-label{
    overflow:visible;
    white-space:normal;
  }
}

@media(min-width:701px) and (max-height:700px){
  .complete-card.final-complete .final-pack-option{
    height:auto;
    min-height:88px;
    grid-template-rows:40px auto;
  }
  .complete-card.final-complete .final-pack-name{
    height:auto;
    min-height:48px;
  }
}


/* BOXXY v183 — compact Level Maker controls and dedicated editor full screen. */
.maker-head-actions{
  display:flex;
  flex:none;
  align-items:center;
  gap:7px;
}
.maker-fullscreen{
  min-height:36px;
  padding:0 11px;
  border:2px solid var(--ink);
  background:var(--blue);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  font-size:8px;
  font-weight:950;
  letter-spacing:.07em;
  white-space:nowrap;
}
.maker-fullscreen span{font-size:17px;line-height:1}
.maker-fullscreen:active{transform:translate(2px,2px)}

.maker-toolbar{
  grid-template-columns:repeat(8,minmax(0,1fr));
  gap:4px;
  margin-bottom:6px;
}
.maker-toolbar button{
  min-height:34px;
  padding:3px 4px;
  gap:4px;
  font-size:7px;
  line-height:1.05;
  letter-spacing:.025em;
}
.maker-toolbar button.selected{
  box-shadow:2px 2px 0 var(--ink);
  transform:translate(-1px,-1px);
}
.maker-tool-icon{width:21px;height:21px}
.maker-tool-icon.player::before,.maker-tool-icon.playergoal::before{width:10px;height:15px}
.maker-tool-icon.box::before,.maker-tool-icon.boxgoal::before{inset:4px;border-width:1px}
.maker-tool-icon.goal::before,.maker-tool-icon.boxgoal::after,.maker-tool-icon.playergoal::after{width:14px;height:14px;border-width:2px}

.maker-goal-palette{
  min-height:30px;
  gap:7px;
  margin:0 0 6px;
  padding:4px 6px;
}
.maker-goal-palette.rainbow-off{
  width:max-content;
  max-width:100%;
  align-self:flex-start;
}
.maker-goal-palette.rainbow-on{width:100%}
.maker-rainbow-inline{gap:6px;padding-right:7px}
.maker-rainbow-inline>strong,.maker-goal-colour-controls>strong{font-size:7px}
.maker-rainbow-switch{gap:4px}
.maker-rainbow-switch span{width:34px;height:19px}
.maker-rainbow-switch span::after{width:11px;height:11px}
.maker-rainbow-switch input:checked+span::after{transform:translateX(15px)}
.maker-rainbow-switch b{min-width:22px;font-size:7px}
.maker-goal-colour-controls{gap:6px}
.maker-goal-colour-controls>small{display:none}
.maker-goal-swatches{gap:2px}
.maker-goal-swatches button{height:21px;padding:2px}
.maker-rainbow-description{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  margin:-1px!important;
  padding:0!important;
  overflow:hidden!important;
  clip:rect(0 0 0 0)!important;
  clip-path:inset(50%)!important;
  white-space:nowrap!important;
  border:0!important;
}

.maker-existing-strip{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:7px;
  margin-bottom:6px;
  padding:4px 6px;
}
.maker-existing-strip h3{margin:0;white-space:nowrap;font-size:8px}
.maker-existing-row{grid-template-columns:minmax(120px,.7fr) minmax(155px,1.3fr) auto;gap:4px}
.maker-existing-row select,.maker-existing-row button{height:27px;font-size:8px}
.maker-existing-row button{padding:0 9px}

body.maker-editor-fullscreen{overflow:hidden}
.maker-modal.maker-fullscreen-fallback{
  position:fixed;
  inset:0;
  width:100vw;
  height:100dvh;
  padding:0;
  overflow:hidden;
  place-items:stretch;
  background:var(--paper2);
  backdrop-filter:none;
}
.maker-modal.maker-fullscreen-fallback .maker-card,
.maker-card:fullscreen,
.maker-card:-webkit-full-screen{
  width:100vw;
  height:100dvh;
  max-width:none;
  max-height:none;
  margin:0;
  padding:10px;
  overflow:hidden;
  border:0;
  box-shadow:none;
  background:var(--paper2);
}
.maker-modal.maker-fullscreen-fallback .maker-layout,
.maker-card:fullscreen .maker-layout,
.maker-card:-webkit-full-screen .maker-layout{
  min-height:0;
}
.maker-modal.maker-fullscreen-fallback .maker-head p,
.maker-card:fullscreen .maker-head p,
.maker-card:-webkit-full-screen .maker-head p{display:none}
.maker-modal.maker-fullscreen-fallback .maker-head,
.maker-card:fullscreen .maker-head,
.maker-card:-webkit-full-screen .maker-head{padding-bottom:4px}

@media(max-width:1120px){
  .maker-toolbar{grid-template-columns:repeat(4,minmax(0,1fr))}
  .maker-toolbar button{min-height:31px}
  .maker-existing-strip{grid-template-columns:1fr}
  .maker-existing-strip h3{display:none}
}
@media(max-width:760px){
  .maker-head-actions{gap:4px}
  .maker-fullscreen{min-height:34px;padding:0 8px}
  .maker-fullscreen b{display:none}
  .maker-toolbar{grid-template-columns:repeat(4,minmax(0,1fr));gap:3px}
  .maker-toolbar button{min-height:30px;padding:2px;font-size:6.5px}
  .maker-tool-icon{width:18px;height:18px}
  .maker-goal-palette.rainbow-on{display:grid;grid-template-columns:auto 1fr;align-items:center}
  .maker-goal-colour-controls{grid-template-columns:1fr}
  .maker-goal-colour-controls>strong{display:none}
  .maker-goal-swatches{grid-template-columns:repeat(8,minmax(18px,1fr))}
  .maker-modal.maker-fullscreen-fallback,
  .maker-card:fullscreen,
  .maker-card:-webkit-full-screen{overflow:auto}
  .maker-modal.maker-fullscreen-fallback .maker-card,
  .maker-card:fullscreen,
  .maker-card:-webkit-full-screen{height:auto;min-height:100dvh}
}


/* BOXXY v184 — discreet phone full-screen control over the gameplay area. */
.mobile-fullscreen-btn{
  display:none;
  position:absolute;
  right:max(12px,env(safe-area-inset-right));
  bottom:max(12px,env(safe-area-inset-bottom));
  z-index:6500;
  width:46px;
  height:46px;
  padding:11px;
  border:1px solid rgba(255,255,255,.52);
  border-radius:12px;
  background:rgba(23,23,25,.54);
  color:#fff;
  box-shadow:0 5px 16px rgba(23,23,25,.24),inset 0 1px 0 rgba(255,255,255,.13);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  place-items:center;
  line-height:0;
  touch-action:manipulation;
}
.mobile-fullscreen-btn:hover{background:rgba(23,23,25,.66)}
.mobile-fullscreen-btn:active{transform:scale(.96);filter:none}
.mobile-fullscreen-btn svg{grid-area:1/1;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.15;stroke-linecap:round;stroke-linejoin:round}
.mobile-fullscreen-btn .mobile-fullscreen-exit{display:none}
.mobile-fullscreen-btn[aria-pressed="true"] .mobile-fullscreen-enter{display:none}
.mobile-fullscreen-btn[aria-pressed="true"] .mobile-fullscreen-exit{display:block}
.mobile-fullscreen-btn[hidden]{display:none!important}
@media (max-width:760px) and (pointer:coarse){
  .mobile-fullscreen-btn{display:grid}
}
@media (max-height:520px) and (orientation:landscape) and (pointer:coarse){
  .mobile-fullscreen-btn{display:grid;right:max(9px,env(safe-area-inset-right));bottom:max(9px,env(safe-area-inset-bottom));width:42px;height:42px;padding:10px;border-radius:10px}
}

.mobile-fullscreen-hint{
  position:fixed;
  left:50%;
  bottom:max(18px,env(safe-area-inset-bottom));
  z-index:12000;
  width:min(360px,calc(100vw - 28px));
  padding:12px 14px;
  border:1px solid rgba(255,255,255,.25);
  border-radius:12px;
  background:rgba(23,23,25,.92);
  color:#fff;
  box-shadow:0 12px 30px rgba(0,0,0,.3);
  font-size:12px;
  font-weight:800;
  line-height:1.35;
  text-align:center;
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,14px);
  transition:opacity .18s ease,transform .18s ease;
}
.mobile-fullscreen-hint.show{opacity:1;transform:translate(-50%,0)}

/* BOXXY v188 — phone action swap, safer Zen controls and distraction-free layout. */

/* On phones, Restart occupies Undo's former position and Undo moves to Restart's. */
@media (max-width:760px) and (pointer:coarse){
  .top-actions #restartBtn{grid-column:1;grid-row:1}
  .top-actions #savePositionBtn{grid-column:1;grid-row:2}
  .top-actions #undoBtn{grid-column:1;grid-row:3}
}
@media (max-height:520px) and (orientation:landscape) and (pointer:coarse){
  .top-actions #restartBtn{grid-column:1;grid-row:1}
  .top-actions #savePositionBtn{grid-column:2;grid-row:1}
  .top-actions #undoBtn{grid-column:3;grid-row:1}
}

/* BOXXY v455 — phone Zen keeps controls floating and repositions the board live as the keypad moves. */
.zen-control-panel{
  --zen-control-size:48px;
  display:none;
  position:fixed;
  z-index:8475;
  right:max(10px,env(safe-area-inset-right));
  bottom:max(10px,env(safe-area-inset-bottom));
  width:max-content;
  padding:4px;
  border:2px solid rgba(23,23,25,.86);
  border-radius:12px;
  background:rgba(239,229,212,.86);
  box-shadow:0 10px 28px rgba(23,23,25,.24);
  -webkit-backdrop-filter:blur(9px);
  backdrop-filter:blur(9px);
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
}
.zen-control-panel[data-size="small"]{--zen-control-size:40px}
.zen-control-panel[data-size="medium"]{--zen-control-size:clamp(56px,16vw,66px)}
.zen-control-panel[data-size="large"],
.zen-control-panel[data-size="full"]{--zen-control-size:clamp(72px,23vw,90px)}
/* Full stretches the movable control across the phone in portrait only.
   The directional keys keep Large dimensions, but the columns spread to the edges. */
@media(max-width:760px) and (orientation:portrait) and (pointer:coarse){
  .zen-control-panel[data-size="full"]:not(.is-minimised){
    width:calc(100vw - 20px);
    width:calc(100dvw - 20px);
  }
  .zen-control-panel[data-size="full"] .zen-control-grid{
    width:100%;
    justify-content:space-between;
    column-gap:0;
  }
}
.zen-control-panel[hidden]{display:none!important}
.zen-control-panel-head{
  height:28px;
  display:grid;
  grid-template-columns:auto 1fr 28px 28px;
  align-items:center;
  gap:3px;
  margin:0 0 3px;
  padding:0 0 0 5px;
  cursor:grab;
  touch-action:none;
}
.zen-control-panel.is-dragging .zen-control-panel-head{cursor:grabbing}
.zen-control-grip{
  font-size:15px;
  line-height:1;
  letter-spacing:2px;
  opacity:.58;
  transform:translateY(-2px);
}
.zen-control-panel-head>b{
  font-size:7px;
  line-height:1;
  letter-spacing:.11em;
}
.zen-control-size,
.zen-control-minimise{
  width:28px;
  height:28px;
  min-width:28px;
  min-height:28px;
  padding:0;
  border:1.5px solid var(--ink);
  border-radius:7px;
  background:#f8f1e6;
  color:var(--ink);
  font-weight:900;
  line-height:1;
  display:grid;
  place-items:center;
  touch-action:manipulation;
}
.zen-control-size{font-size:9px;letter-spacing:.04em}
.zen-control-minimise{font-size:20px}
.zen-control-grid{
  display:grid;
  grid-template-columns:repeat(3,var(--zen-control-size));
  grid-template-rows:repeat(2,var(--zen-control-size));
  grid-template-areas:
    "undo up restart"
    "left down right";
  gap:3px;
}
.zen-control-key{
  width:var(--zen-control-size);
  height:var(--zen-control-size);
  min-width:var(--zen-control-size);
  min-height:var(--zen-control-size);
  padding:3px;
  border:2px solid rgba(23,23,25,.82);
  border-radius:9px;
  background:rgba(248,241,230,.94);
  color:var(--ink);
  box-shadow:0 4px 10px rgba(55,38,20,.12);
  display:grid;
  place-items:center;
  touch-action:none;
}
.zen-control-key:active{transform:translateY(1px)}
.zen-control-key:disabled{opacity:.42;transform:none}
.zen-control-key svg{
  width:58%;
  height:58%;
  fill:currentColor;
  stroke:none;
}
.zen-control-key>span{
  display:block;
  font-size:20px;
  line-height:1;
}
.zen-control-key>b{
  display:block;
  margin-top:-6px;
  font-size:6.5px;
  line-height:1;
  letter-spacing:.05em;
}
.zen-control-panel[data-size="small"] .zen-control-restart>b{
  margin-top:-2px;
  font-size:5.25px;
  letter-spacing:0;
}
.zen-control-panel[data-size="small"] .zen-control-restart>span{
  font-size:18px;
}
/* v475: Medium, Large and Full keep half-size actions in their top
   corners. Small remains unchanged. */
.zen-control-panel:is([data-size="medium"],[data-size="large"],[data-size="full"]) .zen-control-key:is(.zen-control-undo,.zen-control-restart){
  width:calc(var(--zen-control-size) / 2);
  height:calc(var(--zen-control-size) / 2);
  min-width:0;
  min-height:0;
  align-self:start;
  padding:1px;
  border-width:1px;
  border-radius:6px;
}
.zen-control-panel:is([data-size="medium"],[data-size="large"],[data-size="full"]) .zen-control-undo{justify-self:start}
.zen-control-panel:is([data-size="medium"],[data-size="large"],[data-size="full"]) .zen-control-restart{justify-self:end}
.zen-control-panel:is([data-size="medium"],[data-size="large"],[data-size="full"]) .zen-control-key:is(.zen-control-undo,.zen-control-restart)>span{
  font-size:calc(var(--zen-control-size) * .2);
}
.zen-control-panel:is([data-size="medium"],[data-size="large"],[data-size="full"]) .zen-control-key:is(.zen-control-undo,.zen-control-restart)>b{
  margin-top:-3px;
  font-size:calc(var(--zen-control-size) * .077);
  letter-spacing:0;
}
.zen-control-undo{grid-area:undo;background:linear-gradient(rgba(225,75,50,.97),rgba(201,46,31,.97));color:#fff}
.zen-control-restart{grid-area:restart}
.zen-control-direction[data-dir=up]{grid-area:up}
.zen-control-direction[data-dir=left]{grid-area:left}
.zen-control-direction[data-dir=down]{grid-area:down}
.zen-control-direction[data-dir=right]{grid-area:right}
.zen-control-panel.is-minimised{padding:3px}
.zen-control-panel.is-minimised .zen-control-panel-head{
  width:68px;
  height:28px;
  grid-template-columns:1fr 28px;
  gap:3px;
  margin:0;
  padding-left:4px;
}
.zen-control-panel.is-minimised .zen-control-panel-head>b,
.zen-control-panel.is-minimised .zen-control-size{display:none}
.zen-control-panel.is-minimised .zen-control-grid{display:none}

@media (max-width:760px) and (pointer:coarse),
       (max-height:520px) and (orientation:landscape) and (pointer:coarse){
  html.phone-zen-mode,
  html.phone-zen-mode body{
    width:100%;
    height:100%;
    min-height:100%;
    overflow:hidden!important;
    overscroll-behavior:none;
    background:#eadcca;
  }
  body.phone-zen-mode{
    position:fixed;
    inset:0;
    margin:0;
    touch-action:none;
  }
  body.phone-zen-mode .app{
    position:fixed;
    inset:0;
    display:block!important;
    width:100%;
    max-width:none;
    height:100dvh;
    min-height:0;
    margin:0;
    border:0;
    overflow:hidden;
    background:transparent!important;
  }
  body.phone-zen-mode .play-area{
    position:absolute!important;
    inset:0!important;
    display:block!important;
    min-width:0;
    min-height:0;
    overflow:hidden!important;
  }
  body.phone-zen-mode .masthead,
  body.phone-zen-mode .instruction,
  body.phone-zen-mode .side-panel,
  body.phone-zen-mode .palette,
  body.phone-zen-mode .legal-link{
    display:none!important;
  }
  body.phone-zen-mode .board-wrap{
    position:absolute!important;
    inset:0!important;
    z-index:1;
    width:100%!important;
    height:100%!important;
    min-width:0;
    min-height:0;
    box-sizing:border-box;
    padding:
      max(8px,env(safe-area-inset-top))
      max(8px,env(safe-area-inset-right))
      max(8px,env(safe-area-inset-bottom))
      max(8px,env(safe-area-inset-left))!important;
    background:linear-gradient(135deg,#f4ebdd,#eadcca)!important;
  }
  body.phone-zen-mode .bg-decor{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
  }
  body.phone-zen-mode .board{z-index:2}
  body.phone-zen-mode .zen-control-panel:not([hidden]){display:block}
  body.phone-zen-mode .mobile-fullscreen-btn{
    display:grid!important;
    position:fixed!important;
    z-index:8500!important;
  }
}

@media (max-width:760px) and (pointer:coarse) and (orientation:portrait){
  html.phone-zen-mode{--max-cell:76px}
}

@media (max-width:760px) and (pointer:coarse),
       (max-height:520px) and (orientation:landscape) and (pointer:coarse){
  body.phone-zen-mode .board:not(.zen-board-zoomed){
    position:absolute;
    margin:0;
    transform:none;
    transition:left 150ms cubic-bezier(.2,.7,.2,1),top 150ms cubic-bezier(.2,.7,.2,1);
    will-change:left,top;
  }
}

@media (max-width:760px) and (pointer:coarse),
       (max-height:520px) and (orientation:landscape) and (pointer:coarse){
  body.phone-zen-mode .board.zen-board-zoomed{
    position:absolute;
    top:0;
    left:0;
    margin:0;
  }
}

/* BOXXY v195 — in-game legal modal and Zen completion continuation. */
.legal-modal{z-index:11000;background:rgba(21,21,21,.58);backdrop-filter:blur(7px)}
.legal-card{position:relative;width:min(900px,calc(100vw - 28px));max-height:min(88dvh,790px);display:flex;flex-direction:column;overflow:hidden;background:#fffaf2;border:3px solid var(--ink);box-shadow:12px 12px 0 rgba(23,23,25,.22),0 28px 70px rgba(0,0,0,.34)}
.legal-modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:20px 22px 17px;border-bottom:3px solid var(--ink);background:linear-gradient(135deg,#fffaf2,#efe5d4)}
.legal-modal-head span{display:block;font-size:10px;font-weight:950;letter-spacing:.17em}
.legal-modal-head h2{margin:5px 0 0;font-size:clamp(38px,7vw,64px);line-height:.86;letter-spacing:-.045em}
.legal-close{flex:0 0 42px;width:42px;height:42px;padding:0;border:2px solid var(--ink);background:var(--red);color:#fff;font-size:30px;font-weight:500;line-height:1;display:grid;place-items:center;cursor:pointer}
.legal-modal-scroll{overflow:auto;padding:20px 22px 24px;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.legal-intro{margin:0 0 18px;font-size:16px;font-weight:700;line-height:1.45}
.legal-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.legal-section{padding:18px 0;border-bottom:1px solid var(--line)}
.legal-grid .legal-section{padding:18px;border-right:1px solid var(--line)}
.legal-section h3{margin:0 0 8px;font-size:19px;letter-spacing:.035em}
.legal-section p{margin:0 0 10px;font-size:14px;font-weight:560;line-height:1.5}
.legal-section p:last-child{margin-bottom:0}
.legal-section a{color:var(--blue);font-weight:850}
.legal-notice{padding:18px;border-left:9px solid var(--red);background:#f2e8d8}
.legal-contact{padding:18px;background:#fff8ed}
.legal-small{font-size:13px!important;color:#514b43}
.legal-version{font-size:10px!important;font-weight:850!important;letter-spacing:.1em;opacity:.68}
/* BOXXY v308 — first-50 BOXXY Originals completion board. */
/* v468 — roomy Hall of Fame cards with optional current player avatars. */
.originals-completion-section{padding-inline:0}
.originals-completion-section>h3,.originals-completion-section>p{margin-inline:0}
.originals-completion-board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:13px}
.originals-completion-slot{position:relative;min-width:0;width:100%;min-height:92px;padding:12px 10px 10px 34px;border:2px solid var(--ink);border-radius:0;background:#f3eadc;color:var(--ink);font:inherit;text-align:left;display:flex;align-items:center;gap:7px;box-shadow:2px 2px 0 rgba(23,23,25,.13)}
.originals-completion-slot.claimed{background:#e7f3e9;border-color:#2f8f5b}
.originals-completion-slot.linked{cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,background .12s ease}
.originals-completion-slot.linked:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 rgba(23,23,25,.18);background:#dff0e3}
.originals-completion-slot.linked:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.originals-completion-place{position:absolute;left:7px;top:8px;min-width:19px;height:19px;padding:0 3px;border:1.5px solid currentColor;background:#fffaf2;display:grid;place-items:center;font-size:8px;font-weight:950;line-height:1}
.originals-completion-details{min-width:0;display:flex;flex:1 1 auto;flex-direction:column;gap:4px;align-items:flex-start}
.originals-completion-details strong{min-width:0;max-width:100%;font-size:11px;line-height:1.18;overflow-wrap:anywhere;white-space:normal}
.originals-completion-details small{min-width:0;max-width:100%;font-size:8px;font-weight:900;line-height:1.2;letter-spacing:.02em;color:#71685e;overflow-wrap:anywhere;white-space:normal}
.originals-completion-date{min-width:0;max-width:100%;font-size:7px;font-weight:950;line-height:1.2;letter-spacing:.025em;color:#5d6b5e;overflow-wrap:anywhere;white-space:normal}
.originals-completion-avatar-frame{flex:0 0 32px;width:32px;height:34px;display:grid;place-items:center;overflow:hidden;align-self:center}
.originals-completion-avatar{display:block;width:32px;height:32px;pointer-events:none}
.originals-completion-slot.unclaimed strong{font-size:8px;letter-spacing:.06em;color:#7b7268}
.originals-completion-slot.unclaimed small{opacity:.55}
@media(max-width:790px){.originals-completion-board{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}}
@media(max-width:620px){.originals-completion-board{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.originals-completion-slot{min-height:88px}}
@media(max-width:390px){.originals-completion-board{grid-template-columns:1fr}}


.zen-next-btn{position:fixed;z-index:8450;display:flex;align-items:center;justify-content:space-between;gap:12px;min-width:138px;height:44px;padding:7px 8px 7px 14px;border:2px solid var(--ink);border-radius:10px;background:var(--ink);color:#fff;font-size:10px;font-weight:950;letter-spacing:.08em;box-shadow:5px 5px 0 var(--red);touch-action:manipulation}
.zen-next-btn[hidden]{display:none!important}
.zen-next-btn b{width:28px;height:28px;display:grid;place-items:center;background:var(--yellow);color:var(--ink);font-size:19px}

@media (max-width:760px) and (pointer:coarse),
       (max-height:520px) and (orientation:landscape) and (pointer:coarse){
  body.phone-zen-mode .zen-next-btn{
    left:50%;
    right:auto;
    top:max(10px,env(safe-area-inset-top));
    bottom:auto;
    transform:translateX(-50%);
  }
}
@media(max-width:700px){
  .legal-card{width:calc(100vw - 18px);max-height:92dvh}
  .legal-modal-head{padding:16px 16px 13px}
  .legal-modal-scroll{padding:15px 16px 18px}
  .legal-grid{grid-template-columns:1fr}
  .legal-section{padding-block:15px}
  .legal-grid .legal-section{padding:15px}
}


/* BOXXY v202 — supplied artwork on the same optical badge rail as the completion stars. */
.daily-streak-badge{
  appearance:none;
  position:relative;
  --daily-streak-badge-size:var(--header-badge-size);
  width:calc(var(--daily-streak-badge-size) * 163 / 208);
  height:var(--daily-streak-badge-size);
  flex:none;
  padding:0;
  border:0;
  background:transparent;
  display:block;
  overflow:visible;
  filter:drop-shadow(2px 2px 0 rgba(23,23,25,.28));
  transition:transform .14s ease,filter .14s ease;
}
.daily-streak-flame{
  position:absolute;
  inset:0;
  margin:0;
  max-width:none;
  background-position:center;
  background-repeat:no-repeat;
  background-size:100% 100%;
  pointer-events:none;
}
.daily-streak-number{
  position:absolute;
  z-index:1;
  left:50%;
  top:67%;
  margin:0;
  max-width:none;
  transform:translate(-50%,-50%);
  min-width:0;
  color:#fff;
  font-family:"Arial Black",Arial,sans-serif;
  font-weight:1000;
  line-height:1;
  letter-spacing:-.06em;
  text-align:center;
  white-space:nowrap;
  pointer-events:none;
  text-shadow:-1px 0 0 rgba(10,17,20,.82),1px 0 0 rgba(10,17,20,.82),0 -1px 0 rgba(10,17,20,.82),0 1px 0 rgba(10,17,20,.82);
}
.daily-streak-badge[data-digits="1"] .daily-streak-number{font-size:calc(var(--daily-streak-badge-size) * .36)}
.daily-streak-badge[data-digits="2"] .daily-streak-number{font-size:calc(var(--daily-streak-badge-size) * .31)}
.daily-streak-badge[data-digits="3"] .daily-streak-number{font-size:calc(var(--daily-streak-badge-size) * .265)}
.daily-streak-badge[data-digits="4"] .daily-streak-number{font-size:calc(var(--daily-streak-badge-size) * .23)}
.daily-streak-badge[data-digits="5"] .daily-streak-number{font-size:calc(var(--daily-streak-badge-size) * .20)}
.daily-streak-badge[data-tier="zero"] .daily-streak-flame{background-image:url("assets/ui/streak-flames/streak-zero.png")}
.daily-streak-badge[data-tier="green"] .daily-streak-flame{background-image:url("assets/ui/streak-flames/streak-green.png")}
.daily-streak-badge[data-tier="blue"] .daily-streak-flame{background-image:url("assets/ui/streak-flames/streak-blue.png")}
.daily-streak-badge[data-tier="red"] .daily-streak-flame{background-image:url("assets/ui/streak-flames/streak-red.png")}
.daily-streak-badge[data-tier="fire"] .daily-streak-flame{background-image:url("assets/ui/streak-flames/streak-fire.png")}
.daily-streak-badge[data-tier="purple"] .daily-streak-flame{background-image:url("assets/ui/streak-flames/streak-purple.png")}
.daily-streak-badge[data-tier="silver"] .daily-streak-flame{background-image:url("assets/ui/streak-flames/streak-silver.png")}
.daily-streak-badge[data-qualified-today="false"] .daily-streak-flame{filter:grayscale(1);opacity:.38}
.daily-streak-badge[data-qualified-today="false"] .daily-streak-number{opacity:.72}
.daily-streak-badge[data-tier="zero"] .daily-streak-number{
  color:#176e24;
  text-shadow:-1px 0 0 rgba(255,255,255,.92),1px 0 0 rgba(255,255,255,.92),0 -1px 0 rgba(255,255,255,.92),0 1px 0 rgba(255,255,255,.92);
}
.daily-streak-badge:hover,.daily-streak-badge:focus-visible{transform:translateY(-2px) scale(1.06);filter:drop-shadow(3px 4px 0 rgba(23,23,25,.32));outline:0}
.daily-streak-badge:active{transform:translateY(1px) scale(.97)}

.daily-quote-prompt{min-width:0;flex:1;display:flex;align-items:stretch;gap:7px;font-style:normal}
.daily-quote-prompt[hidden]{display:none!important}
.instruction.daily-prompt-active .thought-text{display:none}
.daily-quote-play{min-width:0;flex:1;min-height:35px;padding:5px 10px 5px 13px;border:2px solid #2f8f5b;background:#fff;color:var(--ink);display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;box-shadow:3px 3px 0 rgba(47,143,91,.24);font-weight:1000;letter-spacing:.055em}
.daily-quote-play span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.daily-quote-play small{flex:none;padding:4px 7px;background:#2f8f5b;color:#fff;font-size:8px;line-height:1;letter-spacing:.09em}
.daily-quote-play:hover,.daily-quote-play:focus-visible{background:#f2f8f3;transform:translate(-1px,-1px);box-shadow:4px 4px 0 rgba(47,143,91,.28)}
.daily-quote-dismiss{width:31px;flex:none;padding:0;border:1px solid rgba(23,23,25,.28);background:rgba(255,255,255,.54);color:var(--ink);font:900 22px/1 Arial,sans-serif}
.daily-quote-dismiss:hover,.daily-quote-dismiss:focus-visible{background:#fff;border-color:var(--ink)}


/* v425: admin-scheduled public message bar. */
.site-announcement{
  --site-message-bg:#f2b51d;
  --site-message-text:#171719;
  min-width:0;
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:35px;
  padding:4px 6px 4px 14px;
  border-radius:12px;
  background:var(--site-message-bg);
  color:var(--site-message-text);
  font-style:normal;
  box-shadow:3px 3px 0 rgba(23,23,25,.16);
  transform-origin:center bottom;
}
.site-announcement[hidden]{display:none!important}
.instruction.site-announcement-active{overflow:hidden}
.instruction.site-announcement-active .thought-text,
.instruction.site-announcement-active .daily-quote-prompt{display:none!important}
.site-announcement.is-entering{animation:siteAnnouncementSlideUp .34s cubic-bezier(.2,.75,.25,1) both}
@keyframes siteAnnouncementSlideUp{from{opacity:0;transform:translateY(105%)}to{opacity:1;transform:translateY(0)}}
.site-announcement-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;font-size:clamp(11px,1.05vw,17px);font-weight:1000;letter-spacing:.035em;line-height:1.1}
.site-announcement-action{flex:none;max-width:min(32vw,260px);padding:7px 13px;border:0;border-radius:8px;background:rgba(255,255,255,.94);color:#171719;font:1000 clamp(9px,.9vw,14px)/1.1 Arial,sans-serif;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:2px 2px 0 rgba(23,23,25,.22)}
.site-announcement-action:hover,.site-announcement-action:focus-visible{transform:translateY(-1px);box-shadow:3px 3px 0 rgba(23,23,25,.24);outline:2px solid currentColor;outline-offset:1px}
.site-announcement-dismiss{flex:none;width:30px;height:30px;padding:0;border:0;background:transparent;color:inherit;font:900 22px/1 Arial,sans-serif;display:grid;place-items:center;border-radius:7px}
.site-announcement-dismiss:hover,.site-announcement-dismiss:focus-visible{background:rgba(255,255,255,.28);outline:2px solid currentColor;outline-offset:1px}

.level-picker #levelButtons .daily-level-option{grid-column:1/-1;height:43px;padding:0 11px;border:2px solid #2f8f5b;background:#fff;color:var(--ink);display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;box-shadow:3px 3px 0 rgba(47,143,91,.2);font-size:10px;letter-spacing:.055em}
.level-picker #levelButtons .daily-level-option strong{font-size:11px;letter-spacing:.065em}
.level-picker #levelButtons .daily-level-option span{flex:none;padding:5px 8px;background:#2f8f5b;color:#fff;font-size:8px;font-weight:1000;letter-spacing:.075em}
.level-picker #levelButtons .daily-level-option.current{background:#2f8f5b;border-color:#1d653c;color:#fff}
.level-picker #levelButtons .daily-level-option.current span{background:#fff;color:#2f8f5b}
.level-picker #levelButtons .daily-level-option.completed:not(.current){background:#e9f5ec;border-color:#2f8f5b;color:#245f3d}
.level-picker #levelButtons .daily-level-option.completed:not(.current) span{background:#2f8f5b;color:#fff}
.level-picker #levelButtons .daily-level-option:disabled{background:#e5e0d8;border-color:#aaa298;color:#777067;box-shadow:none}
.level-picker #levelButtons .daily-level-option:disabled span{background:#8f887f;color:#fff}

.daily-invite-modal{z-index:10500;background:rgba(23,23,25,.57);backdrop-filter:blur(7px)}
.daily-invite-card{position:relative;width:min(570px,calc(100vw - 28px));padding:31px 34px 29px;border:3px solid var(--ink);background:linear-gradient(145deg,#fffaf2,#eee3d2);box-shadow:13px 13px 0 rgba(47,143,91,.78);overflow:hidden}
.daily-invite-card::before{content:"";position:absolute;width:190px;height:190px;right:-78px;top:-85px;border-radius:50%;background:#f2c121;opacity:.9}
.daily-invite-close{position:absolute;z-index:2;right:13px;top:11px;width:33px;height:33px;padding:0;border:2px solid var(--ink);background:#fff;color:var(--ink);font:900 23px/1 Arial,sans-serif}
.daily-invite-kicker{position:relative;z-index:1;display:block;color:#2f8f5b;font-size:10px;font-weight:1000;letter-spacing:.16em}
.daily-invite-card h2{position:relative;z-index:1;margin:0;font-size:clamp(48px,9vw,75px);line-height:.82;letter-spacing:-.055em}
.daily-invite-card>p{position:relative;z-index:1;max-width:410px;margin:15px 0 0;color:#51493f;font-size:14px;line-height:1.42}
.daily-invite-status{min-height:1.25em!important;margin-top:8px!important;color:#2f8f5b!important;font-size:10px!important;font-weight:950;letter-spacing:.08em;text-transform:uppercase}
.daily-invite-actions{position:relative;z-index:1;display:flex;align-items:stretch;justify-content:flex-end;gap:10px;margin-top:24px}
.daily-invite-actions button{font-weight:1000;letter-spacing:.07em}
.daily-invite-later{padding:12px 15px;border:2px solid var(--ink);background:#eee5d8;color:var(--ink)}
.daily-invite-play{min-width:230px;padding:10px 11px 10px 16px;border:2px solid var(--ink);background:#2f8f5b;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:15px;box-shadow:5px 5px 0 var(--yellow)}
.daily-invite-play b{width:30px;height:30px;display:grid;place-items:center;background:#fff;color:#2f8f5b;font-size:20px}
.daily-invite-play:disabled{background:#8e887f;box-shadow:none;cursor:not-allowed}

.complete-card.daily-complete{width:min(900px,92vw);max-height:calc(100dvh - 24px)}

.complete-card.daily-complete .complete-actions{width:min(620px,100%)}
.daily-complete-choice{width:100%;min-width:0}
.daily-complete-pack-choice{background:var(--ink);color:#fff;box-shadow:6px 6px 0 var(--red)}
.daily-complete-archive-choice{background:var(--green);color:#fff;box-shadow:6px 6px 0 var(--yellow)}
.daily-complete-archive-choice b{background:#fff;color:var(--green)}
.daily-complete-archive-choice:hover{box-shadow:8px 8px 0 var(--yellow)}
.daily-complete-archive-choice:active{box-shadow:2px 2px 0 var(--yellow)}
.complete-card.daily-complete .complete-copy{overflow:auto}
.daily-share-panel{max-width:620px;margin:2px 0 18px;padding:13px;border:2px solid var(--ink);background:#fff9ee;box-shadow:5px 5px 0 rgba(47,143,91,.24);text-align:left}
.daily-share-panel[hidden]{display:none!important}
.daily-share-heading{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:9px}
.daily-share-heading strong{font-size:10px;letter-spacing:.1em}
.daily-share-heading span{font-size:7px;font-weight:900;letter-spacing:.08em;color:#71675a;text-align:right}
.daily-share-panel textarea{box-sizing:border-box;width:100%;height:176px;resize:none;padding:10px;border:1px solid rgba(23,23,25,.35);background:#fff;color:var(--ink);font:700 12px/1.25 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre;overflow:auto}
.daily-share-actions{display:flex;align-items:center;gap:12px;margin-top:9px}
.daily-share-buttons{display:flex;align-items:stretch;gap:9px}
.daily-share-button,.daily-copy-button{min-height:45px;padding:9px 10px 9px 13px;border:2px solid var(--ink);font-weight:1000;letter-spacing:.08em}
.daily-share-button{min-width:180px;background:#2f8f5b;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:13px;box-shadow:4px 4px 0 var(--yellow)}
.daily-share-button b{width:25px;height:25px;display:grid;place-items:center;background:#fff;color:#2f8f5b;font-size:17px}
.daily-copy-button{min-width:132px;background:#fff;color:var(--ink);box-shadow:4px 4px 0 rgba(23,23,25,.16)}
.daily-share-status{min-height:1em;color:#2f8f5b;font-size:9px;font-weight:1000;letter-spacing:.08em}

/* Daily mode retains the normal masthead treatment; the archive identifies the Daily collection. */

@media(max-width:760px){
  .title-badges > .daily-streak-badge{--daily-streak-badge-size:clamp(24px,6.8vw,29px);filter:drop-shadow(1px 1px 0 rgba(23,23,25,.28))}
  .daily-quote-play{min-height:31px;padding-inline:8px;font-size:8px}
  .daily-quote-play small{padding:4px 5px;font-size:6.5px}
  .daily-quote-dismiss{width:27px;font-size:19px}
  .site-announcement{min-height:31px;gap:6px;padding:3px 4px 3px 8px;border-radius:9px}
  .site-announcement-text{font-size:8px;letter-spacing:.025em}
  .site-announcement-action{max-width:31vw;padding:6px 8px;font-size:7.5px;border-radius:6px}
  .site-announcement-dismiss{width:24px;height:24px;font-size:18px}
  .daily-invite-card{padding:25px 22px 23px;box-shadow:8px 8px 0 rgba(47,143,91,.78)}
  .daily-invite-card h2{font-size:clamp(43px,15vw,61px)}
  .daily-invite-card>p{font-size:12px}
  .daily-invite-actions{display:grid;grid-template-columns:1fr;gap:8px;margin-top:18px}
  .daily-invite-play,.daily-invite-later{width:100%;min-width:0;min-height:43px}
  .daily-invite-play{grid-row:1}
  .daily-invite-later{grid-row:2}
  .complete-card.daily-complete{width:min(550px,calc(100vw - 16px));max-height:calc(100dvh - 16px)}
  .daily-completion-actions{grid-template-columns:1fr}
  .complete-card.daily-complete .complete-art{
    height:clamp(82px,15dvh,120px);
    min-height:0;
    padding:4px;
  }
  .complete-card.daily-complete .complete-sprite{
    width:clamp(72px,calc(15dvh - 10px),110px);
    height:clamp(72px,calc(15dvh - 10px),110px);
    max-width:calc(100% - 4px);
    max-height:calc(100% - 4px);
  }
  .complete-card.daily-complete h2{
    margin:7px 0 10px;
    font-size:clamp(25px,8vw,36px);
    line-height:.9;
    letter-spacing:-.045em;
    white-space:nowrap;
  }
  .daily-share-heading{display:block}
  .daily-share-heading span{display:block;margin-top:3px;text-align:left}
  .complete-card.daily-complete .daily-share-panel textarea{height:82px;font-size:10px}
  .daily-share-actions{display:block}
  .daily-share-buttons{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
  .daily-share-button,.daily-copy-button{width:100%;min-width:0}
  .daily-share-status{display:block;margin-top:8px}
}
@media(max-width:390px){
  .daily-quote-play small{display:none}
  .site-announcement{gap:4px;padding-left:6px}
  .site-announcement-text{font-size:7.5px}
  .site-announcement-action{max-width:29vw;padding-inline:6px}
  .site-announcement-dismiss{width:21px}
}
@media(max-height:520px) and (orientation:landscape){
  .daily-invite-card{width:min(680px,calc(100vw - 20px));padding:17px 24px 16px;box-shadow:7px 7px 0 rgba(47,143,91,.78)}
  .daily-invite-card h2{font-size:42px;line-height:.86;margin-top:9px}
  .daily-invite-card>p{margin-top:8px;font-size:10px}
  .daily-invite-actions{display:flex;margin-top:10px}
  .daily-invite-play{width:auto;min-width:210px}
  .daily-invite-later{width:auto}
  .complete-card.daily-complete .complete-art{
    width:100%;
    height:100%;
    min-height:0;
    padding:5px;
  }
  .complete-card.daily-complete .complete-sprite{
    width:100%;
    height:auto;
    max-width:100%;
    max-height:100%;
  }
  .complete-card.daily-complete .complete-copy{
    justify-content:flex-start;
    padding:8px 43px 8px 14px;
  }
  .complete-card.daily-complete h2{
    margin:2px 0 5px;
    font-size:clamp(28px,4.2vw,34px);
    line-height:.9;
    letter-spacing:-.04em;
    white-space:nowrap;
  }
  .complete-card.daily-complete #completeText{
    max-width:none;
    margin-bottom:7px;
    font-size:11px;
    line-height:1.22;
  }
  .complete-card.daily-complete .daily-share-panel{
    margin:0 0 8px;
    padding:8px;
  }
  .complete-card.daily-complete .daily-share-heading{margin-bottom:5px}
  .complete-card.daily-complete .daily-share-panel textarea{
    height:68px;
    padding:6px;
    font-size:9px;
  }
  .complete-card.daily-complete .daily-share-actions{margin-top:6px}
  .complete-card.daily-complete .daily-share-button,
  .complete-card.daily-complete .daily-copy-button{
    min-height:38px;
    padding:6px 9px;
  }
  .daily-completion-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .complete-card.daily-complete .complete-primary{
    min-height:42px;
    min-width:0;
    padding:8px 10px;
    font-size:8px;
  }
}


/* BOXXY v208 — secret desktop first-person view. */
.first-person-hotspot{
  display:inline;
  user-select:none;
  -webkit-user-select:none;
}
@media (hover:hover) and (pointer:fine){
  .first-person-hotspot{cursor:pointer}
}
.first-person-canvas{
  position:absolute;
  inset:0;
  z-index:5000;
  display:block;
  width:100%;
  height:100%;
  background:#071015;
  pointer-events:none;
}
.first-person-canvas[hidden],.first-person-boom[hidden]{display:none!important}
.first-person-boom{
  position:absolute;
  inset:0;
  z-index:6000;
  display:grid;
  place-items:center;
  overflow:hidden;
  color:#fff8e9;
  background:rgba(245,48,27,.88);
  text-shadow:7px 7px 0 #171719;
  font:1000 clamp(54px,12vw,150px)/1 var(--font);
  letter-spacing:-.055em;
  pointer-events:none;
}
.first-person-boom.is-active{animation:firstPersonBoom .62s cubic-bezier(.2,.85,.25,1) both}
@keyframes firstPersonBoom{
  0%{opacity:0;transform:scale(.35) rotate(-4deg);filter:brightness(2.4)}
  18%{opacity:1;transform:scale(1.18) rotate(1deg);filter:brightness(1.3)}
  55%{opacity:1;transform:scale(1);filter:brightness(1)}
  100%{opacity:0;transform:scale(1.9);filter:brightness(1.5)}
}
body.first-person-mode .board-wrap{
  padding:clamp(10px,1.8dvh,18px);
  background:
    radial-gradient(circle at 50% 46%,rgba(47,98,109,.26),transparent 55%),
    linear-gradient(145deg,#152328,#071015 74%);
}
body.first-person-mode .board{
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  aspect-ratio:auto!important;
  background:#071015!important;
  border:2px solid rgba(214,238,234,.28);
  box-shadow:0 34px 72px rgba(0,0,0,.62),0 0 0 1px rgba(255,255,255,.04)!important;
}
body.first-person-mode .board > .layer,
body.first-person-mode .board > .celebration{
  visibility:hidden;
}
body.first-person-mode .board::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:5500;
  pointer-events:none;
  box-shadow:inset 0 0 90px rgba(0,0,0,.62),inset 0 0 2px rgba(255,255,255,.28);
}

/* BOXXY v213 — continuous pull-back camera; no preliminary tilt. */
.first-person-camera-control{
  position:absolute;
  top:clamp(10px,1.6vw,18px);
  right:clamp(10px,1.6vw,18px);
  z-index:5900;
  width:clamp(188px,20vw,258px);
  padding:10px 12px 9px;
  border:1px solid rgba(221,241,237,.42);
  border-radius:10px;
  color:#f7f1e5;
  background:rgba(7,16,21,.84);
  box-shadow:0 10px 28px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(9px);
  -webkit-backdrop-filter:blur(9px);
  pointer-events:auto;
  user-select:none;
  -webkit-user-select:none;
}
.first-person-camera-control[hidden]{display:none!important}
.first-person-camera-heading,
.first-person-camera-scale{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-family:var(--font);
  font-weight:900;
  letter-spacing:.055em;
}
.first-person-camera-heading{
  margin-bottom:7px;
  font-size:11px;
  line-height:1;
}
.first-person-camera-heading output{
  min-width:78px;
  color:#f0c82d;
  text-align:right;
  font:inherit;
}
.first-person-camera-scale{
  margin-top:5px;
  color:rgba(235,244,240,.68);
  font-size:8px;
  line-height:1;
}
.first-person-camera-slider{
  display:block;
  width:100%;
  height:18px;
  margin:0;
  accent-color:#f0c82d;
  cursor:ew-resize;
}
.first-person-camera-slider:focus-visible{
  outline:2px solid #fff8e9;
  outline-offset:3px;
}
@media (max-height:620px){
  .first-person-camera-control{
    top:8px;
    right:8px;
    width:190px;
    padding:7px 10px 6px;
  }
  .first-person-camera-heading{margin-bottom:4px}
  .first-person-camera-scale{display:none}
}


/* BOXXY v217 — Daily archive and Daily collection entry. */
.daily-pack-option{grid-column:1/-1}
.daily-pack-option .daily-pack-art{background:#2f8f5b;color:#fff}
.daily-pack-option .daily-pack-calendar{
  position:absolute;
  left:18px;
  top:17px;
  width:76px;
  height:74px;
  border:3px solid #fff;
  border-radius:0;
  background:
    linear-gradient(#fff,#fff) 0 17px/100% 3px no-repeat,
    radial-gradient(circle,#fff 0 3px,transparent 4px) 9px 28px/18px 18px repeat;
  opacity:.96;
}
.daily-pack-option .daily-pack-calendar::before,
.daily-pack-option .daily-pack-calendar::after{
  content:"";
  position:absolute;
  top:-9px;
  width:9px;
  height:15px;
  background:#fff;
}
.daily-pack-option .daily-pack-calendar::before{left:12px}
.daily-pack-option .daily-pack-calendar::after{right:12px}

.daily-archive-modal{
  z-index:11100;
  padding:18px;
  overflow:hidden;
  background:rgba(23,23,25,.62);
  backdrop-filter:blur(8px);
}
.daily-archive-card{
  width:min(1080px,calc(100vw - 28px));
  max-height:min(92dvh,900px);
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr);
  overflow:hidden;
  background:var(--paper2);
  border:3px solid var(--ink);
  box-shadow:13px 13px 0 rgba(47,143,91,.72),0 28px 80px rgba(0,0,0,.36);
}
.daily-archive-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  padding:21px 23px 18px;
  border-bottom:3px solid var(--ink);
  background:linear-gradient(135deg,#fffaf2,#eee3d2);
}
.daily-archive-head h2{
  margin:4px 0 0;
  font-size:clamp(38px,6vw,66px);
  line-height:.84;
  letter-spacing:-.055em;
}
.daily-archive-title-row{display:flex;align-items:center;gap:15px;min-width:0}
.daily-archive-streak-badge{--daily-streak-badge-size:56px;flex:0 0 auto;margin-top:3px;pointer-events:none}
.daily-archive-head p{
  max-width:680px;
  margin:10px 0 0;
  color:#5e554a;
  font-size:12px;
  font-weight:720;
  line-height:1.42;
}
.daily-archive-close{
  flex:0 0 44px;
  width:44px;
  height:44px;
  padding:0;
  border:2px solid var(--ink);
  background:var(--red);
  color:#fff;
  font:950 30px/1 Arial,sans-serif;
  cursor:pointer;
}
.daily-archive-summary-row{
  display:flex;
  align-items:stretch;
  justify-content:space-between;
  gap:18px;
  padding:12px 23px;
  border-bottom:2px solid var(--ink);
  background:#f7f0e5;
}
.daily-archive-summary{
  align-self:center;
  margin:0;
  font-size:10px;
  font-weight:1000;
  letter-spacing:.12em;
}
.daily-archive-countdown{
  min-width:280px;
  display:grid;
  grid-template-columns:auto auto;
  align-items:baseline;
  justify-content:end;
  gap:2px 12px;
  text-align:right;
}
.daily-archive-countdown span{
  font-size:8px;
  font-weight:1000;
  letter-spacing:.12em;
  color:#2f8f5b;
}
.daily-archive-countdown strong{
  font-size:22px;
  line-height:1;
  letter-spacing:.02em;
}
.daily-archive-countdown small{
  grid-column:1/-1;
  font-size:7px;
  font-weight:900;
  letter-spacing:.065em;
  color:#6d6357;
}
.daily-archive-months{
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  padding:19px 23px 25px;
  -webkit-overflow-scrolling:touch;
}
.daily-archive-month+.daily-archive-month{margin-top:24px}
.daily-archive-month-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
  margin-bottom:9px;
  padding-bottom:7px;
  border-bottom:2px solid var(--ink);
}
.daily-archive-month-head h3{
  margin:0;
  font-size:19px;
  letter-spacing:.04em;
}
.daily-archive-month-head span{
  font-size:8px;
  font-weight:1000;
  letter-spacing:.09em;
  color:#655c50;
}
.daily-archive-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.daily-archive-date-card{
  min-width:0;
  display:grid;
  grid-template-rows:auto 1fr auto;
  border:2px solid var(--ink);
  background:#fffaf2;
  box-shadow:4px 4px 0 rgba(23,23,25,.18);
}
.daily-archive-date-card.completed{
  background:#e8f4eb;
  border-color:#236d43;
  box-shadow:4px 4px 0 rgba(47,143,91,.38);
}
.daily-archive-date-card.today{outline:4px solid var(--yellow);outline-offset:2px}
.daily-archive-date-card.has-map-thumbnail{grid-template-rows:auto auto 1fr auto}
.daily-archive-date-art.level-thumb-art{
  border:0;
  border-bottom:1px solid rgba(23,23,25,.32);
  background:#d8cdbd;
}
.daily-archive-date-canvas{display:block;width:100%;height:100%}
.daily-archive-date-head{
  padding:11px 12px 9px;
  border-bottom:1px solid rgba(23,23,25,.32);
}
.daily-archive-date-head strong{
  display:block;
  font-size:15px;
  line-height:1;
  letter-spacing:.025em;
}
.daily-archive-date-head span{
  display:block;
  margin-top:5px;
  font-size:8px;
  font-weight:900;
  letter-spacing:.055em;
  color:#675e53;
  text-transform:uppercase;
}
.daily-archive-date-stats{
  min-height:65px;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:stretch;
}
.daily-archive-date-stats>div{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:9px 11px;
}
.daily-archive-date-stats>div+div{border-left:1px solid rgba(23,23,25,.25)}
.daily-archive-date-stats span{
  font-size:7px;
  font-weight:1000;
  letter-spacing:.09em;
  color:#655c50;
}
.daily-archive-date-stats strong{
  margin-top:3px;
  font-size:19px;
  line-height:1;
}
.daily-archive-date-stats p{
  grid-column:1/-1;
  align-self:center;
  margin:0;
  padding:12px;
  color:#70675d;
  font-size:9px;
  font-weight:1000;
  letter-spacing:.08em;
  text-align:center;
}
.daily-archive-date-actions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px;
  padding:9px;
  border-top:1px solid rgba(23,23,25,.3);
}
.daily-archive-date-actions.single{grid-template-columns:1fr}
.daily-archive-date-actions button{
  min-height:38px;
  padding:7px 8px;
  border:2px solid var(--ink);
  font-size:8px;
  font-weight:1000;
  letter-spacing:.075em;
  cursor:pointer;
}
.daily-archive-play{background:var(--green);color:#fff;box-shadow:3px 3px 0 rgba(23,23,25,.17)}
.daily-archive-empty{
  margin:0;
  padding:38px 22px;
  border:2px dashed #9c9183;
  background:#f7f0e5;
  color:#61584d;
  text-align:center;
  font-size:13px;
  font-weight:850;
}

@media(max-width:820px){
  .daily-archive-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
  .daily-pack-option{display:grid;grid-template-columns:94px minmax(0,1fr)}
  .daily-pack-option .daily-pack-calendar{left:13px;top:10px;width:55px;height:51px;border-width:2px;background:linear-gradient(#fff,#fff) 0 12px/100% 2px no-repeat,radial-gradient(circle,#fff 0 2px,transparent 3px) 6px 21px/14px 13px repeat}
  .daily-pack-option .daily-pack-calendar::before,.daily-pack-option .daily-pack-calendar::after{top:-6px;width:7px;height:10px}
  .daily-archive-modal{padding:8px}
  .daily-archive-card{width:100%;max-height:calc(100dvh - 16px);box-shadow:7px 7px 0 rgba(47,143,91,.72)}
  .daily-archive-head{padding:16px 15px 13px}
  .daily-archive-head h2{font-size:clamp(34px,12vw,51px)}
  .daily-archive-title-row{gap:9px}
  .daily-archive-streak-badge{--daily-streak-badge-size:43px;margin-top:1px}
  .daily-archive-head p{font-size:10px}
  .daily-archive-close{width:38px;height:38px;flex-basis:38px;font-size:26px}
  .daily-archive-summary-row{display:block;padding:10px 15px}
  .daily-archive-countdown{min-width:0;margin-top:8px;justify-content:start;text-align:left;grid-template-columns:auto auto}
  .daily-archive-countdown small{text-align:left}
  .daily-archive-months{padding:15px}
  .daily-archive-grid{grid-template-columns:1fr}
  .daily-archive-month-head{align-items:flex-end}
}
@media(max-height:520px) and (orientation:landscape){
  .daily-archive-card{max-height:calc(100dvh - 12px)}
  .daily-archive-head{padding:10px 16px 9px}
  .daily-archive-head h2{font-size:35px}
  .daily-archive-streak-badge{--daily-streak-badge-size:38px}
  .daily-archive-head p{margin-top:5px;font-size:9px}
  .daily-archive-summary-row{padding:7px 16px}
  .daily-archive-months{padding:11px 16px 16px}
  .daily-archive-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* BOXXY v230 — compact generated level previews and denser Daily archive. */
.level-picker{
  position:fixed;
  left:50%;
  right:auto;
  top:50%;
  bottom:auto;
  width:min(1180px,calc(100vw - 28px));
  max-height:min(88dvh,790px);
  margin:0;
  padding:14px;
  transform:translate(-50%,-50%);
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
  overflow:hidden;
  border:3px solid var(--ink);
  background:#f7efe4;
  box-shadow:12px 12px 0 rgba(23,23,25,.28),0 0 0 100vmax rgba(23,23,25,.58),0 28px 80px rgba(0,0,0,.34);
}
.level-picker[hidden]{display:none}
.level-picker-head{margin-bottom:11px;padding-bottom:10px;border-bottom:2px solid var(--ink)}
.level-picker-head>#levelPickerTitle{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:17px;letter-spacing:.045em}
.level-picker #levelButtons{
  min-height:0;
  max-height:none;
  display:grid;
  grid-template-columns:repeat(10,minmax(0,1fr));
  gap:7px;
  padding:2px 5px 6px 2px;
  overflow-y:auto;
  overscroll-behavior:contain;
  align-content:start;
  -webkit-overflow-scrolling:touch;
}
.level-picker #levelButtons button.level-thumbnail-card{
  position:relative;
  min-width:0;
  height:auto;
  min-height:92px;
  padding:4px;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:center;
  gap:4px;
  overflow:hidden;
  border:2px solid var(--line);
  background:#eee7dc;
  color:var(--ink);
  box-shadow:2px 2px 0 rgba(23,23,25,.15);
  font-size:9px;
  line-height:1;
}
.level-picker #levelButtons button.level-thumbnail-card.has-thumbnail{background:#fffaf2}
.level-thumb-art{position:relative;display:block;width:100%;overflow:hidden;border:1px solid rgba(23,23,25,.35);background:#d8cdbd;aspect-ratio:160/104}
.level-thumb-canvas{display:block;width:100%;height:100%;object-fit:contain}
.level-thumb-number{position:absolute;left:3px;top:3px;min-width:20px;padding:3px 4px;border:1px solid var(--ink);background:rgba(255,250,242,.94);color:var(--ink);font-size:8px;font-weight:1000;line-height:1;text-align:center;box-shadow:1px 1px 0 rgba(23,23,25,.18)}
.level-thumb-status{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:6.5px;font-weight:1000;letter-spacing:.08em;text-align:center}
.level-locked-number{font-size:24px!important;line-height:1!important;letter-spacing:-.04em}
.level-locked-label{display:block;margin-top:5px;font-size:6px;font-weight:1000;letter-spacing:.1em;color:#756e65}
.level-picker #levelButtons button.level-thumbnail-card.current{
  border-color:var(--red);
  background:#fffaf2;
  color:var(--ink);
  box-shadow:3px 3px 0 var(--red);
}
.level-picker #levelButtons button.level-thumbnail-card.current .level-thumb-status{color:var(--red)}
.level-picker #levelButtons button.level-thumbnail-card.completed{
  border-color:#2f8f5b;
  background:#f1f8f2;
  color:var(--ink);
  box-shadow:3px 3px 0 rgba(47,143,91,.45);
}
.level-picker #levelButtons button.level-thumbnail-card.completed .level-thumb-status{color:#236d43}
.level-picker #levelButtons button.level-thumbnail-card.assisted{
  border-color:#d1a317;
  background:#fff8d9;
  color:var(--ink);
  box-shadow:3px 3px 0 rgba(209,163,23,.42);
}
.level-picker #levelButtons button.level-thumbnail-card.locked,
.level-picker #levelButtons button.level-thumbnail-card:disabled{
  border-color:#c4bdb2;
  background:#d7d1c8;
  color:#8c857b;
  box-shadow:none;
  opacity:1;
}
.level-picker #levelButtons .daily-level-option{min-height:40px;height:40px}

/* A month of Daily puzzles now fits in a compact calendar-like grid. */
.daily-archive-card{width:min(1220px,calc(100vw - 24px));max-height:min(94dvh,940px)}
.daily-archive-head{padding:14px 18px 12px}
.daily-archive-head h2{font-size:clamp(34px,4.4vw,52px)}
.daily-archive-streak-badge{--daily-streak-badge-size:48px}
.daily-archive-head p{margin-top:6px;font-size:10px}
.daily-archive-summary-row{padding:8px 18px}
.daily-archive-countdown strong{font-size:18px}
.daily-archive-months{padding:12px 17px 17px}
.daily-archive-month+.daily-archive-month{margin-top:16px}
.daily-archive-month-head{margin-bottom:7px;padding-bottom:5px}
.daily-archive-month-head h3{font-size:15px}
.daily-archive-grid{grid-template-columns:repeat(7,minmax(0,1fr));gap:7px}
.daily-archive-date-card{box-shadow:2px 2px 0 rgba(23,23,25,.15)}
.daily-archive-date-card.completed{box-shadow:2px 2px 0 rgba(47,143,91,.32)}
.daily-archive-date-card.today{outline:2px solid var(--yellow);outline-offset:1px}
.daily-archive-date-head{padding:6px 7px 5px}
.daily-archive-date-head strong{font-size:10px}
.daily-archive-date-head span{margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:6px;letter-spacing:.035em}
.daily-archive-date-stats{min-height:42px}
.daily-archive-date-stats>div{padding:5px 6px}
.daily-archive-date-stats span{font-size:5.5px;letter-spacing:.06em}
.daily-archive-date-stats strong{margin-top:2px;font-size:13px}
.daily-archive-date-stats p{padding:7px 4px;font-size:6.2px;letter-spacing:.045em}
.daily-archive-date-actions{gap:3px;padding:4px}
.daily-archive-date-actions button{min-height:26px;padding:4px 2px;font-size:5.8px;letter-spacing:.035em;white-space:nowrap;box-shadow:1px 1px 0 rgba(23,23,25,.17)}

@media(max-width:1100px){
  .level-picker #levelButtons{grid-template-columns:repeat(8,minmax(0,1fr))}
  .daily-archive-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
}
@media(max-width:820px){
  .level-picker{width:calc(100vw - 20px);max-height:90dvh;padding:11px}
  .level-picker #levelButtons{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
  .level-picker #levelButtons button.level-thumbnail-card{min-height:88px}
  .daily-archive-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:620px){
  .level-picker{left:50%;right:auto;top:50%;bottom:auto;width:calc(100vw - 14px);max-height:calc(100dvh - 14px);padding:9px;transform:translate(-50%,-50%)}
  .level-picker-head{gap:6px;margin-bottom:8px;padding-bottom:7px}
  .level-picker-head>#levelPickerTitle{font-size:14px}
  .level-picker-tools{gap:4px}
  .level-picker #levelButtons{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding-right:2px}
  .level-picker #levelButtons button.level-thumbnail-card{min-height:88px;padding:3px}
  .level-thumb-status{font-size:7.5px}
  .daily-archive-modal{padding:5px}
  .daily-archive-card{max-height:calc(100dvh - 10px);box-shadow:4px 4px 0 rgba(47,143,91,.72)}
  .daily-archive-head{padding:10px 10px 8px}
  .daily-archive-head h2{font-size:31px}
  .daily-archive-title-row{gap:8px}
  .daily-archive-streak-badge{--daily-streak-badge-size:38px;margin-top:0}
  .daily-archive-head p{display:none}
  .daily-archive-close{width:32px;height:32px;flex-basis:32px;font-size:23px}
  .daily-archive-summary-row{padding:7px 10px}
  .daily-archive-summary{font-size:9px}
  .daily-archive-countdown{margin-top:5px}
  .daily-archive-countdown strong{font-size:17px}
  .daily-archive-countdown small{font-size:8px}
  .daily-archive-months{padding:9px}
  .daily-archive-month-head h3{font-size:14px}
  .daily-archive-month-head span{font-size:8px}
  .daily-archive-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
  .daily-archive-date-head{padding:5px}
  .daily-archive-date-head strong{font-size:10px}
  .daily-archive-date-head span{font-size:7.5px}
  .daily-archive-date-stats{min-height:37px}
  .daily-archive-date-stats>div{padding:4px}
  .daily-archive-date-stats span{font-size:7px}
  .daily-archive-date-stats strong{font-size:13px}
  .daily-archive-date-stats p{font-size:7.5px}
  .daily-archive-date-actions{padding:3px;gap:2px}
  .daily-archive-date-actions button{min-height:23px;font-size:7px}
}

/* BOXXY v231 — compact pushes and time beneath completed/current level previews. */
.level-thumb-state{
  position:absolute;
  right:3px;
  top:3px;
  max-width:calc(100% - 30px);
  padding:3px 4px;
  overflow:hidden;
  border:1px solid var(--ink);
  background:rgba(255,250,242,.94);
  color:var(--ink);
  box-shadow:1px 1px 0 rgba(23,23,25,.18);
  font-size:5.8px;
  font-weight:1000;
  line-height:1;
  letter-spacing:.055em;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.level-thumb-stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:22px;
  border:1px solid rgba(23,23,25,.28);
  background:#fffaf2;
}
.level-thumb-stats>span{
  min-width:0;
  padding:3px 2px 2px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.level-thumb-stats>span+span{border-left:1px solid rgba(23,23,25,.22)}
.level-thumb-stats small{
  display:block;
  max-width:100%;
  overflow:hidden;
  color:#6c645a;
  font-size:4.6px;
  font-weight:1000;
  line-height:1;
  letter-spacing:.06em;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.level-thumb-stats strong{
  display:block;
  max-width:100%;
  margin-top:2px;
  overflow:hidden;
  color:var(--ink);
  font-size:8px;
  font-weight:1000;
  line-height:1;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.level-picker #levelButtons button.level-thumbnail-card.completed .level-thumb-stats{
  background:#f1f8f2;
  border-color:rgba(47,143,91,.42);
}
.level-picker #levelButtons button.level-thumbnail-card.assisted .level-thumb-stats{
  background:#fff8d9;
  border-color:rgba(209,163,23,.45);
}
.level-picker #levelButtons button.level-thumbnail-card.current .level-thumb-state{
  background:var(--red);
  color:#fff;
  border-color:var(--red);
}
.level-picker #levelButtons button.level-thumbnail-card.assisted .level-thumb-state{
  background:#e5b32a;
  color:var(--ink);
  border-color:#a67c00;
}
@media(max-width:620px){
  .level-thumb-state{font-size:6.5px}
  .level-thumb-stats{min-height:21px}
  .level-thumb-stats small{font-size:6px}
  .level-thumb-stats strong{font-size:9px}
}


/* BOXXY v233 — secret click-to-move mouse support. */
.mouse-support-hotspot{
  display:inline;
  color:inherit;
  margin:0;
  font:inherit;
  line-height:inherit;
  letter-spacing:inherit;
  user-select:none;
  -webkit-user-select:none;
}
@media (hover:hover) and (pointer:fine){
  .mouse-support-hotspot{cursor:pointer}
  body.mouse-support-enabled .board{cursor:crosshair}
  body.mouse-support-busy .board{cursor:progress}
}
.mouse-support-layer{
  z-index:2500;
  overflow:hidden;
  pointer-events:none;
}
.mouse-support-layer[hidden]{display:none!important}
.mouse-support-cell{
  position:absolute;
  left:calc(var(--x) * 100% / var(--cols));
  top:calc(var(--y) * 100% / var(--rows));
  width:calc(100% / var(--cols));
  height:calc(100% / var(--rows));
  display:grid;
  place-items:center;
  pointer-events:none;
}
.mouse-support-selected::before{
  content:"";
  position:absolute;
  inset:8%;
  border:clamp(2px,.35vw,4px) solid var(--blue);
  box-shadow:0 0 0 3px rgba(247,240,229,.86),0 0 18px rgba(32,83,154,.55);
  animation:mouseSupportSelectedPulse .9s ease-in-out infinite alternate;
}
.mouse-support-destination::before{
  content:"";
  width:44%;
  height:44%;
  min-width:9px;
  min-height:9px;
  max-width:28px;
  max-height:28px;
  border-radius:50%;
  border:2px solid #fffaf2;
  background:var(--blue);
  box-shadow:0 0 0 2px var(--ink),0 5px 12px rgba(23,23,25,.28);
  animation:mouseSupportDestinationPulse .78s ease-in-out infinite alternate;
}
.mouse-support-destination.is-goal::before{background:var(--red)}
@keyframes mouseSupportDestinationPulse{from{transform:scale(.82)}to{transform:scale(1.08)}}
@keyframes mouseSupportSelectedPulse{from{opacity:.62}to{opacity:1}}
.mouse-support-modal{background:rgba(21,21,21,.52);backdrop-filter:blur(6px)}
.mouse-support-card{
  width:min(520px,90vw);
  padding:clamp(22px,4vw,34px);
  text-align:left;
  border:3px solid var(--ink);
  box-shadow:12px 12px 0 rgba(23,23,25,.24),0 28px 64px rgba(23,23,25,.32);
}
.mouse-support-kicker{
  display:block;
  color:var(--red);
  font-size:10px;
  font-weight:1000;
  letter-spacing:.16em;
}
.mouse-support-card h2{
  margin:8px 0 18px;
  font-size:clamp(38px,8vw,64px);
  line-height:.82;
  letter-spacing:-.035em;
}
.mouse-support-copy{
  display:grid;
  gap:10px;
  margin:0 0 22px;
}
.mouse-support-copy p{
  margin:0;
  color:#51483e;
  font-size:13px;
  line-height:1.42;
}
.mouse-support-copy strong{color:var(--ink)}
.mouse-support-actions{display:flex;justify-content:flex-end;gap:10px}
.mouse-support-actions button{
  min-height:44px;
  padding:11px 16px;
  border:2px solid var(--ink);
  font-size:10px;
  font-weight:1000;
  letter-spacing:.06em;
}
.mouse-support-cancel{background:#ece4d7!important;color:var(--ink)!important}
.mouse-support-enable{background:var(--blue)!important;color:#fff!important}
@media(max-width:560px){
  .mouse-support-card{width:92vw;padding:20px}
  .mouse-support-card h2{font-size:40px}
  .mouse-support-copy p{font-size:12px}
  .mouse-support-actions{display:grid;grid-template-columns:1fr}
  .mouse-support-actions button{width:100%}
}

/* Click-Push beta access uses the same restrained modal language as Mouse Support,
   but remains a separate access workflow rather than another movement mode. */
.click-push-access-modal{z-index:9800;background:rgba(21,21,21,.52);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.click-push-access-card{
  width:min(540px,92vw);
  padding:clamp(22px,4vw,34px);
  text-align:left;
  border:3px solid var(--ink);
  box-shadow:12px 12px 0 rgba(23,23,25,.24),0 28px 64px rgba(23,23,25,.32);
}
.click-push-access-kicker{display:block;color:var(--red);font-size:10px;font-weight:1000;letter-spacing:.16em}
.click-push-access-card h2{margin:8px 0 14px;font-size:clamp(38px,8vw,62px);line-height:.9;letter-spacing:-.035em}
.click-push-access-copy{margin:0 0 18px;color:#51483e;font-size:13px;line-height:1.45}
.click-push-access-form{display:grid;gap:10px}
.click-push-access-form label{display:grid;gap:6px;font-size:9px;font-weight:1000;letter-spacing:.08em}
.click-push-access-form input{width:100%;min-height:44px;padding:10px 12px;border:2px solid var(--ink);background:#fffaf2;color:var(--ink);font-family:inherit;font-size:15px;font-weight:900;line-height:1.1;letter-spacing:.06em;text-transform:uppercase}
.click-push-access-status{min-height:18px;margin:0;font-size:10px;font-weight:900;letter-spacing:.04em}
.click-push-access-status[data-kind="error"]{color:#a92921}
.click-push-access-status[data-kind="success"]{color:#23734b}
.click-push-access-actions{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:stretch}
.click-push-access-actions button{min-height:42px;padding:10px 12px;border:2px solid var(--ink);font-size:9px;font-weight:1000;letter-spacing:.05em}
.click-push-access-actions .click-push-access-contact{background:var(--paper);color:var(--ink)}
.click-push-access-actions .click-push-access-cancel{background:#ece4d7;color:var(--ink)}
.click-push-access-actions .click-push-access-enable{background:var(--blue);color:#fff}
.settings-mini-toggle[data-locked="true"]::before{content:"BETA ";font-size:.78em;letter-spacing:.04em}
@media(max-width:560px){
  .click-push-access-card{padding:20px}
  .click-push-access-card h2{font-size:40px}
  .click-push-access-copy{font-size:12px}
  .click-push-access-actions{grid-template-columns:1fr 1fr}
  .click-push-access-contact{grid-column:1/-1}
}

/* BOXXY v246 — mobile pack medals anchored inside the text panel. */
.pack-selector-medal{
  position:absolute;
  z-index:5;
  right:10px;
  top:10px;
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  pointer-events:none;
}
.pack-selector-medal svg,
.pack-selector-medal img{
  display:block;
  width:100%;
  height:100%;
}
.pack-selector-medal svg{overflow:visible;filter:drop-shadow(2px 3px 0 rgba(23,23,25,.34))}
.pack-selector-medal path{
  fill:var(--pack-star-colour,var(--red));
  stroke:#f2c121;
  stroke-width:9;
  stroke-linejoin:round;
  paint-order:stroke fill;
}
.pack-selector-medal-mobile{display:none}
.final-pack-art.image-art .pack-selector-medal img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  filter:drop-shadow(2px 3px 0 rgba(23,23,25,.18));
}

.daily-pack-option .daily-pack-art{position:relative}
.daily-pack-prompt{
  letter-spacing:0;
  text-transform:none;
}
.daily-pack-prompt-art{
  position:absolute;
  z-index:2;
  left:122px;
  right:26px;
  top:50%;
  transform:translateY(-50%);
  color:#fff;
  text-align:center;
  font-size:clamp(13px,1.55vw,18px);
  line-height:1.18;
  font-weight:900;
  text-wrap:balance;
  text-shadow:0 1px 1px rgba(0,0,0,.16);
}
.daily-pack-prompt-mobile{display:none}

@media(max-width:620px){
  .pack-selector-medal-desktop{display:none}
  .pack-selector-medal-mobile{
    display:grid;
    right:7px;
    top:7px;
    width:37px;
    height:37px;
  }
  .pack-option.has-pack-medal .final-pack-name{
    position:relative;
    padding-right:48px;
  }
  .pack-selector-medal svg{filter:drop-shadow(1px 2px 0 rgba(23,23,25,.34))}
  .daily-pack-prompt-art{display:none}
  .daily-pack-prompt-mobile{
    display:block;
    margin:4px 0 2px;
    color:var(--ink);
    font-size:10px;
    line-height:1.3;
    font-weight:850;
  }
  .daily-pack-option .final-pack-name small{margin-top:3px;font-size:8.5px;line-height:1.3}
}

@media(max-width:620px){
  .daily-pack-option{min-height:92px}
  .daily-pack-option .daily-pack-art{height:92px}
  .daily-pack-option .daily-pack-calendar{top:20px}
}

/* BOXXY v464 — shared Settings and password-recovery contact form. */
.maker-contact-overlay{
  position:fixed;
  inset:0;
  z-index:1000;
  display:grid;
  place-items:center;
  padding:18px;
  background:rgba(20,20,22,.72);
  backdrop-filter:blur(2px);
}
.maker-contact-overlay[hidden]{display:none!important}
.maker-contact-card{
  width:min(520px,94vw);
  max-height:min(760px,94dvh);
  overflow:auto;
  padding:22px;
  border:3px solid var(--ink);
  background:#f7f0e5;
  color:var(--ink);
  box-shadow:9px 9px 0 rgba(23,23,25,.42);
}
.maker-contact-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
  padding-bottom:13px;
  margin-bottom:15px;
  border-bottom:2px solid var(--ink);
}
.maker-contact-head h2{
  margin:4px 0 0;
  font-size:clamp(31px,7vw,48px);
  line-height:.9;
  letter-spacing:-.05em;
}
.maker-contact-form{display:grid;gap:12px}
.maker-contact-form label{
  display:grid;
  gap:5px;
  font-size:8px;
  font-weight:1000;
  letter-spacing:.12em;
}
.maker-contact-form input,
.maker-contact-form textarea{
  width:100%;
  border:2px solid var(--ink);
  border-radius:0;
  background:#fffaf2;
  color:var(--ink);
  font:700 14px/1.35 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  outline:none;
}
.maker-contact-form input{height:43px;padding:8px 10px}
.maker-contact-form textarea{min-height:150px;padding:10px;resize:vertical}
.maker-contact-form input:focus,
.maker-contact-form textarea:focus{box-shadow:0 0 0 3px var(--yellow)}
.maker-contact-trap{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  overflow:hidden!important;
  clip:rect(0 0 0 0)!important;
  white-space:nowrap!important;
}
.maker-contact-status{
  min-height:18px;
  margin:0;
  font-size:10px;
  line-height:1.35;
  font-weight:850;
}
.maker-contact-status[data-kind="error"]{color:#a92921}
.maker-contact-status[data-kind="success"]{color:#23734b}
.maker-contact-actions{
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:9px;
}
.maker-contact-actions button{
  min-height:44px;
  border:2px solid var(--ink);
  font-size:9px;
  font-weight:1000;
  letter-spacing:.08em;
}
.maker-contact-actions button:first-child{background:#e7dfd3;color:var(--ink)}
.maker-contact-send{background:var(--blue);color:#fff}
.maker-contact-send:disabled{opacity:.58;cursor:wait}
@media(max-width:760px){
  .maker-contact-card{padding:16px;box-shadow:5px 5px 0 rgba(23,23,25,.42)}
  .maker-contact-head{margin-bottom:12px;padding-bottom:10px}
  .maker-contact-head h2{font-size:36px}
  .maker-contact-form input{height:40px}
  .maker-contact-form textarea{min-height:130px}
}



/* BOXXY v255 — unified settings panel. */
.settings-action span{font-size:22px!important;line-height:1}
.settings-modal{z-index:9500;padding:18px}
.settings-card{
  width:min(760px,94vw);
  max-height:min(820px,94dvh);
  overflow:auto;
  background:#f7f0e5;
  color:var(--ink);
  border:3px solid var(--ink);
  box-shadow:12px 12px 0 rgba(23,23,25,.32),0 28px 70px rgba(0,0,0,.28);
}
.settings-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding:22px 24px 17px;border-bottom:3px solid var(--ink)}
.settings-head h2{margin:4px 0 0;font-size:clamp(36px,6vw,58px);line-height:.86;letter-spacing:-.055em}
.settings-close{flex:none;width:44px;height:44px;border:2px solid var(--ink);background:var(--red);color:#fff;font-size:30px;font-weight:950;line-height:1}
.settings-main-view{padding:18px}
.settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.settings-panel{min-width:0;padding:16px;border:2px solid var(--ink);background:#fffaf1;box-shadow:4px 4px 0 rgba(23,23,25,.13)}
.settings-panel h3,.settings-keyboard-view h3{margin:0 0 13px;font-size:17px;letter-spacing:.09em;line-height:1}
.settings-panel p{margin:0 0 13px;color:#655c50;font-size:10px;line-height:1.4;font-weight:750}
.settings-style-panel{grid-column:1/-1}
.settings-board-style{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.settings-board-style-row{min-width:0;display:grid;gap:8px;padding:10px;border:1px solid #c4b9aa;background:#f7f0e5}
.settings-board-style-label{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.settings-board-style-label strong{font-size:9px;font-weight:1000;letter-spacing:.1em}
.settings-board-style-label span{color:#71685e;font-size:8px;font-weight:900;letter-spacing:.08em;white-space:nowrap}
.settings-board-style-swatches{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:10px}
.settings-board-style-default{display:grid;grid-template-columns:40px;padding-right:10px;border-right:1px solid #c4b9aa}
.settings-board-style-options{display:grid;grid-template-columns:repeat(auto-fill,40px);gap:6px;align-items:start}
.settings-board-style-swatch{position:relative;width:40px;height:40px;border:1px solid #a99d8d;background-color:#eee5d8;background-position:center;background-repeat:no-repeat;background-size:88% 88%;box-shadow:1px 1px 0 rgba(23,23,25,.18);padding:0}
.settings-board-style-swatch.selected{border:2px solid var(--ink);outline:2px solid var(--blue);outline-offset:1px;z-index:1}
.settings-board-style-swatch:focus-visible{outline:3px solid var(--red);outline-offset:2px}
.settings-toggle-pair{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:13px}
.settings-toggle{min-height:62px;padding:8px;border:2px solid var(--ink);background:#e6eee6;color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;box-shadow:3px 3px 0 var(--ink)}
.settings-toggle[aria-pressed="false"]{background:#e9e3da;color:#736b62;box-shadow:2px 2px 0 #8f877c}
.settings-toggle span{font-size:22px;line-height:1}
.settings-toggle b{font-size:9px;letter-spacing:.06em;white-space:nowrap}
.settings-field{display:grid;gap:6px}
.settings-field>span,.settings-option-row strong{font-size:9px;font-weight:1000;letter-spacing:.1em}
.settings-field select{width:100%;min-height:42px;padding:8px 34px 8px 10px;border:2px solid var(--ink);border-radius:0;background:#f7f0e5;color:var(--ink);font:inherit;font-size:10px;font-weight:900;letter-spacing:.04em}
.settings-option-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:13px;padding-top:13px;border-top:1px solid #c4b9aa}
.settings-option-row div{min-width:0;display:grid;gap:4px}
.settings-option-row small{color:#6b6257;font-size:8px;line-height:1.3;font-weight:700}
.settings-option-row .settings-mouse-leaderboard-warning{
  margin-top:3px;
  max-width:330px;
  color:rgba(160,55,45,.72);
  font-weight:850;
  line-height:1.35;
}
.settings-option-row .settings-mouse-leaderboard-warning[hidden]{display:none!important}
.settings-mini-toggle{flex:none;min-width:62px;min-height:38px;padding:7px 9px;border:2px solid var(--ink);background:#e9e3da;color:var(--ink);box-shadow:3px 3px 0 var(--ink);font-size:9px;font-weight:1000;letter-spacing:.08em}
.settings-mini-toggle[aria-pressed="true"]{background:var(--green);color:#fff}
.settings-link-button{width:100%;min-height:47px;padding:9px 10px;border:2px solid var(--ink);background:#f7f0e5;color:var(--ink);box-shadow:3px 3px 0 var(--ink);display:grid;grid-template-columns:30px minmax(0,1fr) 20px;align-items:center;gap:7px;text-align:left}
.settings-link-button span{font-size:20px;text-align:center}.settings-link-button b{font-size:9px;letter-spacing:.07em}.settings-link-button i{font-style:normal;font-size:18px;text-align:right}
.settings-contact-link{background:var(--blue);color:#fff}
.settings-contact-icon{width:30px;height:24px;display:grid;place-items:center!important;font-size:0!important;line-height:0!important}
.settings-contact-icon svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:square;stroke-linejoin:miter}
.settings-keyboard-view{padding:20px 22px 24px}
.settings-keyboard-view[hidden],.settings-main-view[hidden]{display:none!important}
.settings-back{margin:0 0 18px;padding:8px 10px;border:2px solid var(--ink);background:#f7f0e5;color:var(--ink);box-shadow:2px 2px 0 var(--ink);font-size:9px;font-weight:950;letter-spacing:.08em}
.settings-key-list{display:grid;grid-template-columns:1fr 1fr;border:2px solid var(--ink)}
.settings-key-list>div{min-height:66px;padding:11px 12px;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);display:flex;flex-direction:column;justify-content:center;gap:5px;background:#fffaf1}
.settings-key-list>div:nth-child(2n){border-right:0}.settings-key-list>div:nth-last-child(-n+2){border-bottom:0}
.settings-key-list span{color:#71685e;font-size:8px;font-weight:850;letter-spacing:.1em}.settings-key-list strong{font-size:11px;letter-spacing:.04em}
.settings-footer{padding:10px 18px;border-top:2px solid var(--ink);background:#efe6d9;text-align:center;color:#6b6257;font-size:8px;font-weight:800;letter-spacing:.04em}
body.settings-touch-device .desktop-settings-only{display:none!important}
body{--boxxy-step-transition:.17s;--boxxy-motion-duration:.105s}
body[data-boxxy-speed="slow"]{--boxxy-step-transition:.25s;--boxxy-motion-duration:.147s}
body[data-boxxy-speed="fast"]{--boxxy-step-transition:.11s;--boxxy-motion-duration:.071s}
.maker-contact-overlay{z-index:10000}

@media(max-width:760px){
  .settings-modal{padding:8px}
  .settings-card{width:min(560px,97vw);max-height:96dvh}
  .settings-head{padding:15px 15px 12px}
  .settings-head h2{font-size:40px}
  .settings-close{width:39px;height:39px;font-size:27px}
  .settings-main-view{padding:10px}
  .settings-grid{grid-template-columns:1fr;gap:9px}
  .settings-panel{padding:12px;box-shadow:3px 3px 0 rgba(23,23,25,.12)}
  .settings-panel h3{font-size:14px;margin-bottom:10px}
  .settings-board-style{grid-template-columns:1fr;gap:9px}
  .settings-board-style-row{padding:9px}
  .settings-board-style-swatches{gap:8px}
  .settings-board-style-default{grid-template-columns:38px;padding-right:8px}
  .settings-board-style-options{grid-template-columns:repeat(auto-fill,38px);gap:5px}
  .settings-board-style-swatch{width:38px;height:38px}
  .settings-toggle{min-height:52px}
  .settings-field select{min-height:38px;font-size:10px}
  .settings-panel p{font-size:10px;margin-bottom:10px}
  .settings-link-button{min-height:42px}
  .settings-keyboard-view{padding:14px}
  .settings-key-list{grid-template-columns:1fr}
  .settings-key-list>div,.settings-key-list>div:nth-child(2n),.settings-key-list>div:nth-last-child(-n+2){min-height:52px;border-right:0;border-bottom:1px solid var(--ink)}
  .settings-key-list>div:last-child{border-bottom:0}
}

@media(max-height:520px) and (orientation:landscape){
  .settings-card{width:min(820px,96vw);max-height:96dvh}
  .settings-head{padding:11px 15px 9px}.settings-head h2{font-size:32px}.settings-close{width:34px;height:34px;font-size:23px}
  .settings-main-view{padding:9px}.settings-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.settings-panel{padding:10px}
  .settings-board-style-default{grid-template-columns:36px;padding-right:7px}
  .settings-board-style-options{grid-template-columns:repeat(auto-fill,36px);gap:5px}
  .settings-board-style-swatch{width:36px;height:36px}
  .settings-toggle{min-height:46px}.settings-panel p{display:none}.settings-footer{padding:6px}
}


/* BOXXY v256 — safer phone controls and an easier-to-dismiss level picker. */
@media (max-width:760px) and (pointer:coarse){
  /* Keep the action columns narrow and hard against the outer edges. */
  .side-panel{
    grid-template-columns:44px minmax(0,1fr) 44px;
  }
  .top-actions{
    padding:6px 2px 6px 0;
    gap:3px;
  }
  .bottom-actions{
    padding:6px 0 6px 2px;
    gap:3px;
  }
  .top-actions .action,
  .bottom-actions .action,
  .bottom-actions .action.small{
    width:42px;
    max-width:42px;
    justify-self:stretch;
    padding-inline:0;
  }
  .top-actions .action span,
  .bottom-actions .action span,
  .bottom-actions .action.small span{
    font-size:20px;
  }
  .top-actions .action b,
  .bottom-actions .action b,
  .bottom-actions .action.small b{
    padding-inline:0;
    font-size:7.5px;
    line-height:.96;
    letter-spacing:-.01em;
  }

  /* Leave a useful tap-to-close gutter around the level chooser. */
  .level-picker{
    width:calc(100vw - 40px);
    max-height:calc(100dvh - 28px);
    padding:10px;
  }
  .level-picker-head{
    min-height:38px;
    align-items:center;
  }
  .level-picker-tools{
    align-items:center;
  }
  .level-close{
    width:36px;
    height:36px;
    flex:0 0 36px;
    border:2px solid var(--ink);
    background:var(--red);
    color:#fff;
    box-shadow:2px 2px 0 var(--ink);
  }
  .level-close span{
    font-size:28px;
    line-height:1;
    transform:translateY(-1px);
  }
  .level-reset{height:34px}
  .level-attire{height:34px}
}

@media (max-width:360px) and (pointer:coarse){
  .side-panel{grid-template-columns:40px minmax(0,1fr) 40px}
  .top-actions .action,
  .bottom-actions .action,
  .bottom-actions .action.small{width:38px;max-width:38px}
  .level-picker{width:calc(100vw - 30px)}
}


/* BOXXY v258 — compact level reset; gameplay speed affects normal movement. */
.level-picker-footer{
  display:flex;
  justify-content:flex-end;
  margin-top:10px;
  padding-top:9px;
  border-top:2px solid var(--ink);
}
.level-picker-footer .level-reset{
  min-width:92px;
  height:34px;
  padding:0 14px;
  border:2px solid var(--ink);
  background:#ece4d7;
  color:var(--ink);
  box-shadow:2px 2px 0 var(--ink);
}

@media(max-width:760px){
  /* Header: title | completion medal | attire | close. */
  .level-picker-head{
    grid-template-columns:minmax(0,1fr) auto auto auto;
  }
  .level-picker-tools{
    grid-column:3 / 5;
    display:contents;
  }
  .level-attire{grid-column:3}
  .level-close{
    grid-column:4;
    position:static;
    right:auto;
    top:auto;
    transform:none;
    width:36px;
    height:36px;
    flex:0 0 36px;
  }
  .level-picker-footer{
    margin-top:8px;
    padding-top:8px;
  }
  .level-picker-footer .level-reset{
    width:auto;
    min-width:78px;
    height:30px;
    min-height:30px;
    padding:0 11px;
    font-size:9px;
    letter-spacing:.07em;
  }
  /* Reserve space for the new footer so the level grid remains scrollable. */
  .level-picker #levelButtons{
    max-height:calc(78dvh - 112px);
  }
}

@media(max-width:380px){
  .level-picker-head{
    grid-template-columns:minmax(0,1fr) 31px auto 36px;
  }
}

.maker-mini-actions.maker-four-actions{grid-template-columns:repeat(2,1fr)}
.maker-image-import-overlay{position:fixed;inset:0;display:grid;place-items:center;padding:18px;background:rgba(21,21,23,.7);z-index:10002}
.maker-image-import-overlay[hidden]{display:none!important}
.maker-image-import-card{width:min(980px,calc(100vw - 24px));max-height:min(88vh,920px);overflow:auto;background:#fff8ed;border:3px solid var(--ink);box-shadow:8px 8px 0 rgba(23,23,25,.38);padding:18px 18px 16px;display:grid;gap:14px}
.maker-image-import-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;border-bottom:2px solid rgba(23,23,25,.15);padding-bottom:10px}
.maker-image-import-head p{margin:0 0 3px;font-size:10px;font-weight:950;letter-spacing:.12em;color:#7f7365}
.maker-image-import-head h2{margin:0;font-size:28px;line-height:1;font-weight:950;letter-spacing:.03em}
.maker-image-import-head button{width:40px;height:40px;border:2px solid var(--ink);background:#d34734;color:#fff;font-size:26px;font-weight:950;cursor:pointer;box-shadow:3px 3px 0 rgba(23,23,25,.24)}
.maker-image-import-body{display:grid;grid-template-columns:minmax(260px,360px) minmax(0,1fr);gap:16px;align-items:start}
.maker-image-preview-panel{display:grid;gap:10px}
.maker-image-preview-panel canvas{width:100%;max-width:100%;height:auto;background:#e6ddd2;border:2px solid var(--ink)}
.maker-image-preview-summary{font-size:11px;font-weight:800;line-height:1.35;color:#5c544b}
.maker-image-grid-tweaks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;align-items:end}
.maker-image-grid-tweaks label{display:grid;gap:4px;font-size:10px;font-weight:950;letter-spacing:.06em;color:#5f5447}
.maker-image-grid-tweaks input{height:36px;border:2px solid var(--ink);background:#fff;padding:4px 8px;font:inherit;font-size:16px;font-weight:900}
.maker-image-grid-tweaks button,.maker-image-import-actions button{min-height:38px;border:2px solid var(--ink);background:#fff8ed;font-weight:950;letter-spacing:.05em;cursor:pointer;box-shadow:3px 3px 0 rgba(23,23,25,.14)}
.maker-image-groups-panel{display:grid;gap:10px;min-width:0}
.maker-image-help{margin:0;font-size:11px;font-weight:800;line-height:1.35;color:#5c544b}
.maker-image-groups{display:grid;gap:8px}
.maker-image-group{display:grid;grid-template-columns:52px minmax(0,1fr) 180px;gap:10px;align-items:center;padding:8px;border:2px solid rgba(23,23,25,.14);background:#fffcf5}
.maker-image-group canvas{width:48px;height:48px;border:2px solid var(--ink);background:#fff}
.maker-image-group strong{display:block;font-size:11px;letter-spacing:.05em}
.maker-image-group span{display:block;font-size:10px;font-weight:800;color:#72685d;margin-top:3px}
.maker-image-group select{width:100%;height:38px;border:2px solid var(--ink);background:#fff;padding:4px 8px;font:inherit;font-size:12px;font-weight:900}
.maker-image-group.unassigned{border-color:#d8832c;background:#fff5e5}
.maker-image-import-status{min-height:34px;padding:8px 10px;border-left:6px solid var(--blue);background:#e7e0d5;font-size:11px;font-weight:800;line-height:1.35}
.maker-image-import-status.error{border-color:var(--red);background:#f4dcd5;color:#7d2118}
.maker-image-import-status.success{border-color:#398550;background:#dcebdc;color:#245b31}
.maker-image-import-actions{display:flex;justify-content:flex-end;gap:8px}
.maker-image-import-actions button:last-child{background:var(--blue);color:#fff}
@media (max-width: 900px){
  .maker-image-import-card{padding:14px}
  .maker-image-import-body{grid-template-columns:1fr}
}
@media (max-width: 620px){
  .maker-image-import-head h2{font-size:24px}
  .maker-image-grid-tweaks{grid-template-columns:repeat(2,minmax(0,1fr))}
  .maker-image-group{grid-template-columns:48px minmax(0,1fr)}
  .maker-image-group select{grid-column:1 / -1}
  .maker-image-import-actions{display:grid;grid-template-columns:1fr 1fr}
}

/* Level Maker image alignment + manual tracing */
.maker-image-stage-help{margin:0;padding:9px 11px;background:#efe5d6;border-left:6px solid var(--yellow);font-size:11px;font-weight:850;line-height:1.35}
.maker-image-canvas-wrap{position:relative;display:grid;place-items:center;border:2px solid var(--ink);background:#d9d1c6;overflow:hidden;touch-action:none}
.maker-image-preview-panel canvas{display:block;width:auto;max-width:100%;height:auto;max-height:62vh;margin:0 auto;border:0;touch-action:none;cursor:crosshair}
.maker-image-mode-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.maker-image-mode-actions button{min-height:42px;border:2px solid var(--ink);background:#fff8ed;font-weight:950;letter-spacing:.055em;cursor:pointer;box-shadow:3px 3px 0 rgba(23,23,25,.14)}
.maker-image-mode-actions button.selected{background:var(--yellow)}
.maker-image-trace-panel{display:grid;gap:10px}
.maker-image-trace-panel[hidden]{display:none!important}
#makerImageAutoPanel[hidden]{display:none!important}
.maker-image-rainbow-controls{display:grid;gap:8px;padding:9px 10px;border:2px solid var(--ink);background:#f7f0e5}
.maker-image-rainbow-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.maker-image-rainbow-head>strong,.maker-image-goal-colour-controls>strong{font-size:8px;letter-spacing:.09em}
.maker-image-goal-colour-controls{display:grid;gap:6px}
.maker-image-goal-colour-controls[hidden]{display:none!important}
.maker-image-goal-colour-controls>small,.maker-image-rainbow-description{margin:0;font-size:8px;line-height:1.3;font-weight:750;color:#655d54}
.maker-image-goal-swatches{display:grid;grid-template-columns:repeat(15,minmax(15px,1fr));gap:3px}
.maker-image-goal-swatches button{position:relative;min-width:0;height:25px;padding:3px;border:1px solid rgba(23,23,25,.55);background:#fff8ed;cursor:pointer}
.maker-image-goal-swatches button span{display:block;width:100%;height:100%;background:var(--goal-colour);box-shadow:inset 0 0 0 1px rgba(255,255,255,.24)}
.maker-image-goal-swatches button.selected{outline:2px solid var(--ink);outline-offset:1px;transform:translateY(-1px)}
.maker-image-goal-swatches button.selected::after{content:"";position:absolute;right:1px;bottom:1px;width:5px;height:5px;background:#fff;border:1px solid var(--ink);border-radius:50%}
.maker-image-rainbow-controls.rainbow-on{background:linear-gradient(90deg,rgba(236,40,38,.07),rgba(249,188,24,.07),rgba(50,133,69,.07),rgba(21,83,202,.07),rgba(116,51,172,.07))}
.maker-image-trace-palette{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.maker-image-trace-palette button,.maker-image-trace-actions button{min-height:38px;border:2px solid var(--ink);background:#fff8ed;font-size:10px;font-weight:950;letter-spacing:.045em;cursor:pointer}
.maker-image-trace-palette button.selected{background:var(--yellow);box-shadow:inset 0 0 0 2px rgba(0,0,0,.08)}
.maker-image-trace-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.maker-image-trace-note{margin:0;font-size:10px;font-weight:800;line-height:1.35;color:#6d6359}
@media (min-width: 901px){
  .maker-image-import-card{width:min(1120px,calc(100vw - 28px))}
  .maker-image-import-body{grid-template-columns:minmax(420px,1.25fr) minmax(320px,.75fr)}
}
@media (max-width: 620px){
  .maker-image-stage-help{font-size:10px}
  .maker-image-mode-actions{grid-template-columns:1fr}
  .maker-image-trace-palette{grid-template-columns:1fr 1fr}
  .maker-image-goal-swatches{grid-template-columns:repeat(8,minmax(18px,1fr))}
  .maker-image-preview-panel canvas{max-height:52vh}
}

.maker-image-corner-place{display:grid;grid-template-columns:auto repeat(4,minmax(0,1fr));gap:6px;align-items:center}
.maker-image-corner-place>span{font-size:9px;font-weight:950;letter-spacing:.08em;color:#665c51}
.maker-image-corner-place button{min-height:34px;border:2px solid var(--ink);background:#fff8ed;font-size:11px;font-weight:950;cursor:pointer}
.maker-image-corner-place button.selected{background:#d63c2d;color:#fff}
.maker-image-corner-note{margin:0;font-size:9px;font-weight:800;line-height:1.3;color:#6d6359}
.maker-image-cell-override{display:grid;gap:7px;padding:10px;border:2px solid rgba(23,23,25,.18);background:#f2eadf}
.maker-image-cell-override>strong{font-size:11px;letter-spacing:.06em}
.maker-image-cell-override>span{font-size:10px;font-weight:800;color:#6d6359}
.maker-image-cell-palette{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.maker-image-cell-palette button{min-height:34px;border:2px solid var(--ink);background:#fff8ed;font-size:9px;font-weight:950;letter-spacing:.035em;cursor:pointer}
.maker-image-cell-palette button.selected{background:var(--yellow)}
@media (max-width:620px){
  .maker-image-corner-place{grid-template-columns:repeat(4,1fr)}
  .maker-image-corner-place>span{grid-column:1/-1}
  .maker-image-cell-palette{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* v268 image importer: compact drag-to-group workflow */
.maker-image-import-card{
  height:min(94vh,900px);
  max-height:94vh;
  overflow:hidden;
  grid-template-rows:auto auto minmax(0,1fr) auto auto;
}
.maker-image-import-body{min-height:0;overflow:hidden}
.maker-image-preview-panel{min-height:0;align-content:start}
.maker-image-preview-panel canvas{max-height:46vh}
.maker-image-groups-panel{min-height:0;overflow:hidden;align-content:start}
#makerImageAutoPanel{min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:8px;overflow:hidden}
.maker-image-groups{min-height:0;overflow:hidden;display:block}
.maker-image-assignment-board{display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:7px;height:100%;min-height:0}
.maker-image-drag-tip{margin:0;font-size:9px;font-weight:900;line-height:1.25;color:#6b6157;letter-spacing:.025em}
.maker-image-assignment-bin{min-width:0;border:2px solid rgba(23,23,25,.16);background:#fffaf2;display:grid;grid-template-rows:25px minmax(42px,1fr);transition:background .12s,transform .12s,border-color .12s}
.maker-image-assignment-bin.drag-over{background:#fff1a8;border-color:var(--ink);transform:translateY(-1px)}
.maker-image-bin-heading{width:100%;border:0;border-bottom:1px solid rgba(23,23,25,.13);background:#e9e1d6;min-height:25px;padding:3px 5px;font:inherit;font-size:8px;font-weight:950;letter-spacing:.055em;cursor:pointer;text-align:left}
.maker-image-unassigned-bin{grid-template-rows:25px minmax(56px,auto);border-color:#d8832c;background:#fff5e5}
.maker-image-unassigned-bin .maker-image-bin-heading{background:#f0c78d}
.maker-image-bin-tray{display:flex;align-items:center;align-content:center;gap:4px;min-width:0;min-height:42px;padding:4px;overflow:hidden;flex-wrap:wrap}
.maker-image-unassigned-bin .maker-image-bin-tray{min-height:56px}
.maker-image-bin-empty{font-size:7px;font-weight:900;letter-spacing:.05em;color:#9b9186;margin:auto;text-align:center;line-height:1.2}
.maker-image-assignment-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(66px,1fr));gap:6px;min-height:0}
.maker-image-cluster-card{width:48px;height:48px;padding:2px;border:2px solid var(--ink);background:#fff;display:grid;grid-template-columns:28px 1fr;gap:2px;align-items:center;cursor:grab;box-shadow:1px 1px 0 rgba(23,23,25,.18);overflow:hidden}
.maker-image-cluster-card:active{cursor:grabbing}
.maker-image-cluster-card.selected{background:var(--yellow);box-shadow:0 0 0 2px var(--ink)}
.maker-image-cluster-card.dragging{opacity:.42}
.maker-image-cluster-card.merge-target{background:#dcebdc;box-shadow:0 0 0 3px #398550}
.maker-image-cluster-card canvas{width:28px;height:28px;border:1px solid var(--ink);background:#fff;pointer-events:none}
.maker-image-cluster-card>span{display:grid;min-width:0;line-height:1;text-align:center;pointer-events:none}
.maker-image-cluster-card b{font-size:9px;font-weight:950}
.maker-image-cluster-card small{font-size:5px;font-weight:900;line-height:1.05;text-transform:uppercase;color:#6d6359}
.maker-image-cell-override{padding:7px;gap:5px}
.maker-image-cell-palette{grid-template-columns:repeat(5,minmax(0,1fr));gap:4px}
.maker-image-cell-palette button{min-height:28px;font-size:7px;padding:3px}
@media (max-width:900px){
  .maker-image-import-card{height:auto;max-height:94vh;overflow:auto}
  .maker-image-import-body{overflow:visible}
  .maker-image-groups-panel,#makerImageAutoPanel,.maker-image-groups{overflow:visible}
  .maker-image-assignment-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none}
  .maker-image-cell-palette{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* Image importer controls remain visible within the fixed desktop dialog. */
@media (min-width:901px){
  .maker-image-preview-panel{min-height:0;overflow:hidden;grid-template-rows:minmax(0,1fr) auto auto auto auto auto}
  .maker-image-canvas-wrap{min-height:0;overflow:hidden}
  .maker-image-preview-panel canvas{max-height:min(40vh,430px);max-width:100%;width:auto;height:auto}
  .maker-image-mode-actions{position:relative;z-index:1}
}
.maker-image-auto-targets{width:48px;height:48px;border:2px solid #b94135;background:#f2d7ce;display:grid;place-items:center;align-content:center;text-align:center;line-height:1;box-shadow:1px 1px 0 rgba(23,23,25,.18)}
.maker-image-auto-targets b{font-size:14px;font-weight:950;color:#9d2e27}
.maker-image-auto-targets small{font-size:5px;font-weight:950;letter-spacing:.03em;color:#6b332f;line-height:1.1;margin-top:2px}

/* BOXXY v275 — aligned MENU controls plus avatar and bold account statistics. */
.settings-action .menu-lines{
  width:22px;
  height:18px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  align-items:stretch;
  font-size:0!important;
  line-height:0!important;
}
.settings-action .menu-lines i{
  display:block;
  width:100%;
  height:3px;
  background:currentColor;
  border-radius:1px;
}
.bottom-actions .action.small{display:grid;grid-template-rows:28px auto;align-content:center;justify-items:center;row-gap:2px}
.bottom-actions .action.small>span{grid-row:1;align-self:center;justify-self:center}
.bottom-actions .action.small>b{grid-row:2;align-self:center}
.level-action>span{font-size:23px!important;line-height:1!important;font-family:Arial,sans-serif;font-weight:400!important}
.fullscreen-action>span{font-size:23px!important;line-height:1!important}
.account-entry{
  width:100%;
  min-height:58px;
  margin:0 0 14px;
  padding:9px 13px;
  border:2px solid var(--ink);
  background:var(--yellow);
  color:var(--ink);
  box-shadow:4px 4px 0 var(--ink);
  display:grid;
  grid-template-columns:minmax(0,1fr) 24px;
  align-items:center;
  gap:10px;
  text-align:left;
}
.account-entry b{font-size:12px;letter-spacing:.08em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-entry>i{font-style:normal;font-size:22px;text-align:right}
.account-entry.account-entry-logged-in{background:var(--green);color:#fff}
.settings-account-view{padding:20px 22px 24px}
.settings-account-view[hidden]{display:none!important}
.account-sheet{border:2px solid var(--ink);background:#fffaf1;box-shadow:4px 4px 0 rgba(23,23,25,.13);padding:18px}
.account-head{padding-bottom:14px;margin-bottom:14px;border-bottom:2px solid var(--ink)}
.account-head h3{margin:5px 0 7px;font-size:26px;line-height:.95;letter-spacing:-.03em}
.account-head p{margin:0;color:#655c50;font-size:10px;line-height:1.45;font-weight:750}
.account-mode-switch{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.account-mode-switch[hidden]{display:none!important}
.account-mode-switch button{
  min-height:40px;
  border:2px solid var(--ink);
  background:#e9e3da;
  color:var(--ink);
  font-size:9px;
  font-weight:1000;
  letter-spacing:.08em;
}
.account-mode-switch button.active{background:var(--blue);color:#fff;box-shadow:3px 3px 0 var(--ink)}
.account-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
.account-form[hidden]{display:none!important}
.account-form>label{display:grid;gap:5px;min-width:0}
.account-form>label:first-child{grid-column:1/2}
.account-form>label:nth-child(2){grid-column:2/3}
.account-form>label:nth-child(3){grid-column:1/-1}
.account-form label>span,.account-delete-form label>span{font-size:8px;font-weight:1000;letter-spacing:.1em}
.account-form input,.account-delete-form input{
  width:100%;
  min-width:0;
  height:42px;
  box-sizing:border-box;
  padding:8px 10px;
  border:2px solid var(--ink);
  border-radius:0;
  background:#f7f0e5;
  color:var(--ink);
  font:inherit;
  font-size:11px;
  font-weight:800;
}
.account-form .account-check{grid-column:1/-1;display:flex;align-items:flex-start;gap:8px}
.account-check input{width:18px;height:18px;min-width:18px;margin:0;accent-color:var(--blue)}
.account-check span{font-size:9px!important;line-height:1.4;letter-spacing:0!important;font-weight:750!important}
.account-check a{color:var(--blue);font-weight:900}
.account-primary,.account-secondary{
  grid-column:1/-1;
  min-height:46px;
  border:2px solid var(--ink);
  color:#fff;
  font-size:10px;
  font-weight:1000;
  letter-spacing:.08em;
  box-shadow:3px 3px 0 var(--ink);
}
.account-primary{background:var(--blue)}
.account-secondary{width:100%;background:var(--blue);margin-top:13px}
.account-primary:disabled,.account-secondary:disabled{opacity:.55;cursor:wait}
.account-forgot-link{grid-column:1/-1;justify-self:center;border:0;padding:3px 5px;background:transparent;color:#6b6257;text-decoration:underline;text-underline-offset:2px;font-size:8px;font-weight:950;letter-spacing:.07em;cursor:pointer}
.account-forgot-link:hover{color:var(--ink)}
.account-forgot-link:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.account-small{grid-column:1/-1;margin:0;color:#6b6257;font-size:8px;line-height:1.45;font-weight:750}
.account-details{display:block}
.account-details[hidden]{display:none!important}
.account-player-summary{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;margin-bottom:12px}
.account-avatar-card{height:152px;padding:0;border:2px solid var(--ink);background:#f7f0e5;color:inherit;appearance:none;-webkit-appearance:none;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer}
.account-avatar-card canvas{display:block;width:auto;height:118%;max-width:none;flex:0 0 auto;transform:translateY(-14%);transform-origin:center center}
.account-avatar-card:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.account-fun-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px;padding:2px;background:var(--ink)}
.account-fun-grid>div{min-height:73px;padding:10px 11px;background:#f7f0e5;display:flex;flex-direction:column;justify-content:center;gap:5px;min-width:0}
.account-fun-grid span{color:#71685e;font-size:7px;font-weight:1000;letter-spacing:.09em;line-height:1.15}
.account-fun-grid strong{font-size:23px;line-height:1;font-weight:1000;letter-spacing:-.035em;overflow-wrap:anywhere}
.account-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;padding:1px;border:2px solid var(--ink);background:var(--ink)}
.account-detail-grid>div{min-height:62px;padding:10px 11px;display:flex;flex-direction:column;justify-content:center;gap:5px;background:#f7f0e5;min-width:0}
.account-detail-grid>div:last-child{grid-column:1/-1}
.account-detail-grid span{color:#71685e;font-size:7px;font-weight:900;letter-spacing:.1em}
.account-detail-grid strong{font-size:11px;overflow-wrap:anywhere}
.account-details>.account-small{margin:12px 0 0}
.account-danger-link{display:block;margin:14px auto 0;border:0;background:transparent;color:#9d3028;text-decoration:underline;font-size:8px;font-weight:900;letter-spacing:.06em}
.account-delete-form{margin-top:12px;padding:12px;border:2px solid #9d3028;background:#fff2ef;display:grid;gap:9px}
.account-delete-form[hidden]{display:none!important}
.account-delete-form p{margin:0;font-size:9px;line-height:1.4;font-weight:750}
.account-delete-form label{display:grid;gap:5px}
.account-delete-form>div{display:grid;grid-template-columns:1fr 1.4fr;gap:8px}
.account-delete-form button{min-height:40px;border:2px solid var(--ink);font-size:8px;font-weight:1000;letter-spacing:.06em}
.account-delete-form button:first-child{background:#e9e3da;color:var(--ink)}
.account-delete-confirm{background:var(--red);color:#fff}
.account-status{min-height:17px;margin:14px 0 0;font-size:9px;line-height:1.4;font-weight:1000;letter-spacing:.04em}
.account-status[data-kind="error"]{color:#a92921}
.account-status[data-kind="success"]{color:#23734b}

@media(max-width:760px){
  .settings-action .menu-lines{width:20px;height:16px}
  .settings-action .menu-lines i{height:2px}
  .bottom-actions .action.small{grid-template-rows:25px auto}
  .level-action>span{font-size:21px!important}
  .fullscreen-action>span{font-size:21px!important}
  .account-entry{min-height:50px;margin-bottom:10px;grid-template-columns:minmax(0,1fr) 18px;padding:7px 9px;box-shadow:3px 3px 0 var(--ink)}
  .account-entry b{font-size:10px}
  .settings-account-view{padding:12px}
  .account-sheet{padding:12px;box-shadow:3px 3px 0 rgba(23,23,25,.13)}
  .account-head{padding-bottom:10px;margin-bottom:10px}
  .account-head h3{font-size:21px}
  .account-head p{font-size:10px}
  .account-form{grid-template-columns:1fr;gap:9px}
  .account-form>label:first-child,.account-form>label:nth-child(2),.account-form>label:nth-child(3),.account-form .account-check,.account-primary,.account-small{grid-column:1}
  .account-form input,.account-delete-form input{height:39px;font-size:11px}
  .account-player-summary{grid-template-columns:1fr;margin-bottom:10px}
  .account-avatar-card{height:150px}
  .account-avatar-card canvas{width:auto;height:116%;max-width:none;transform:translateY(-14%);transform-origin:center center}
  .account-fun-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .account-fun-grid>div{min-height:62px;padding:9px}
  .account-fun-grid span{font-size:8.5px}
  .account-fun-grid strong{font-size:20px}
  .account-detail-grid{grid-template-columns:1fr}
  .account-detail-grid>div,.account-detail-grid>div:last-child{grid-column:1;min-height:52px}
  .account-detail-grid span{font-size:8.5px}
}

@media(max-height:520px) and (orientation:landscape){
  .settings-account-view{padding:9px 12px 12px}
  .account-sheet{padding:10px}
  .account-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:16px;align-items:end}
  .account-head .complete-kicker,.account-head h3{grid-column:1}
  .account-head p{grid-column:2;grid-row:1/3}
  .account-form{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .account-form>label:first-child{grid-column:1}.account-form>label:nth-child(2){grid-column:2}.account-form>label:nth-child(3){grid-column:3}
  .account-form .account-check{grid-column:1/-1}
  .account-primary,.account-small{grid-column:1/-1}
  .account-player-summary{grid-template-columns:118px minmax(0,1fr);gap:8px;margin-bottom:8px}
  .account-avatar-card{height:104px;padding:0}
  .account-avatar-card canvas{width:auto;height:114%;max-width:none;transform:translateY(-14%);transform-origin:center center}
  .account-fun-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .account-fun-grid>div{min-height:52px;padding:7px}
  .account-fun-grid strong{font-size:17px}
  .account-detail-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
  .account-detail-grid>div,.account-detail-grid>div:last-child{grid-column:auto;min-height:52px}
}


/* BOXXY v281 — account trophy cabinet. */
.account-medals-card{margin:0 0 12px;padding:12px;border:2px solid var(--ink);background:#f7f0e5}
.account-medals-heading{display:block;margin:0 0 9px;color:#71685e;font-size:7px;font-weight:1000;letter-spacing:.1em}
.account-medals{--header-badge-size:46px;--header-badge-gap:8px;display:flex;align-items:center;flex-wrap:wrap;gap:var(--header-badge-gap);min-height:46px}
.account-medals[hidden]{display:none!important}
.account-medals .account-medal-static{pointer-events:none;cursor:default;transition:none}
.account-medals .completed-pack-star{width:var(--header-badge-size);height:var(--header-badge-size)}
.account-medals .daily-streak-badge{width:calc(var(--header-badge-size) * 163 / 208);height:var(--header-badge-size)}
.account-medals .account-medal-static:hover,.account-medals .account-medal-static:focus-visible{transform:none;filter:drop-shadow(2px 2px 0 rgba(23,23,25,.28))}
.account-medals-empty{margin:0;font-size:10px;line-height:1.35;font-weight:850;color:#6b6257}
.account-medals-empty[hidden]{display:none!important}
@media(max-width:760px){
  .account-medals-card{padding:10px;margin-bottom:10px}
  .account-medals-heading{font-size:8.5px}
  .account-medals{--header-badge-size:40px;--header-badge-gap:7px;min-height:40px}
}
@media(max-height:520px) and (orientation:landscape){
  .account-medals-card{padding:8px;margin-bottom:8px}
  .account-medals{--header-badge-size:34px;--header-badge-gap:6px;min-height:34px}
}

/* BOXXY v284 — equal-height account avatar/stat panel and clean attire stacking. */
@media (min-width:761px){
  .account-player-summary{align-items:stretch}
  .account-avatar-card{height:auto;min-height:152px;align-self:stretch}
}
.style-modal{z-index:9700}

/* BOXXY v288 — smooth movement without cross-fade flicker; completion account link spacing/colour refined. */
/* BOXXY v287 — interpolated tile travel and blended in-between character poses. */
/* BOXXY v286 — level-cleared account shortcut is plain hoverable text. */
/* BOXXY v285 — optional account shortcut from the level-cleared modal. */
.complete-card button.complete-account-prompt{
  align-self:flex-start;
  width:auto;
  min-height:0;
  margin:20px 0 0;
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
  color:#6f9ed6;
  font:inherit;
  font-size:9px;
  line-height:1.35;
  font-weight:850;
  text-decoration:none;
  cursor:pointer;
  transform:none;
}
.complete-card button.complete-account-prompt:hover{
  background:transparent;
  box-shadow:none;
  color:var(--blue);
  text-decoration:underline;
  text-underline-offset:2px;
  transform:none;
}
.complete-card button.complete-account-prompt:active{
  background:transparent;
  box-shadow:none;
  color:var(--blue);
  transform:none;
  filter:none;
}
.complete-card button.complete-account-prompt:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
.complete-account-prompt[hidden]{display:none!important}
@media(max-width:560px){
  .complete-card button.complete-account-prompt{font-size:9px;margin-top:18px}
}


/* BOXXY v331 — Google disconnect control, aligned Google registration terms, and stable Google button layout. */
/* BOXXY v329 — optional Google sign-in and linking inside the existing account sheet. */
.account-google-guest{margin-top:14px}
.account-google-divider{position:relative;display:flex;align-items:center;justify-content:center;margin:2px 0 12px;color:#71685e;font-size:8px;font-weight:1000;letter-spacing:.1em}
.account-google-divider::before,.account-google-divider::after{content:"";height:2px;flex:1;background:#d3c9bc}
.account-google-divider span{padding:0 10px}
.account-google-button{width:100%;min-height:44px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.account-google-button[hidden]{display:none!important}
.account-google-guest p,.account-google-registration>p,.account-google-link p{margin:8px 0 0;color:#6b6257;font-size:8px;line-height:1.45;font-weight:750;text-align:center}
.account-google-registration{display:block}
.account-google-registration[hidden]{display:none!important}
.account-google-verified{padding:11px 12px;border:2px solid var(--ink);background:#eef7ff;display:grid;gap:4px;text-align:center}
.account-google-verified span,.account-google-heading{color:#71685e;font-size:7px;font-weight:1000;letter-spacing:.1em}
.account-google-verified strong{font-size:11px;overflow-wrap:anywhere}
.account-google-create-form{margin-top:11px}
.account-google-create-form>label:first-child{grid-column:1/-1}
.account-google-create-form>label.account-check{grid-column:1/-1;justify-self:start}
.account-google-cancel{grid-column:1/-1;justify-self:center;border:0;background:transparent;color:#6b6257;text-decoration:underline;text-underline-offset:2px;font-size:8px;font-weight:950;letter-spacing:.07em;cursor:pointer}
.account-google-card{margin:12px 0 0;padding:12px;border:2px solid var(--ink);background:#f7f0e5}
.account-google-heading{display:block;margin:0 0 8px}
.account-google-linked{padding:9px 10px;border:2px solid #23734b;background:#eef8ef;display:grid;gap:3px}
.account-google-linked[hidden],.account-google-link[hidden]{display:none!important}
.account-google-linked strong{color:#23734b;font-size:9px;font-weight:1000;letter-spacing:.07em}
.account-google-linked span{font-size:9px;font-weight:800;overflow-wrap:anywhere}
.account-google-disconnect{justify-self:start;margin:5px 0 0;padding:2px 0;border:0;background:transparent;color:#6b6257;text-decoration:underline;text-underline-offset:2px;font:inherit;font-size:8px;font-weight:950;letter-spacing:.06em;cursor:pointer}
.account-google-disconnect:hover{color:var(--ink)}
.account-google-disconnect:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.account-google-disconnect:disabled{opacity:.55;cursor:wait}
.account-google-disconnect[hidden]{display:none!important}
.account-google-link-title{display:block;margin:0 0 4px;font-size:9px;font-weight:1000;letter-spacing:.07em}
.account-google-link p{margin:0 0 9px;text-align:left}
.account-delete-actions .account-google-delete-button{min-height:40px}
#accountDeletePasswordLabel[hidden],#accountDeletePasswordConfirm[hidden]{display:none!important}

@media(max-width:760px){
  .account-google-guest{margin-top:11px}
  .account-google-guest p,.account-google-registration>p,.account-google-link p{font-size:9px}
  .account-google-card{padding:10px;margin-top:10px}
  .account-google-heading,.account-google-verified span{font-size:8.5px}
  .account-google-linked span{font-size:10px}
}

/* BOXXY v289 — signed-in offline download and iPhone Home Screen handoff. */
.account-offline-card{margin:12px 0 0;padding:12px;border:2px solid var(--ink);background:#f7f0e5}
.account-offline-heading{display:block;margin:0 0 8px;color:#71685e;font-size:7px;font-weight:1000;letter-spacing:.1em}
.account-offline-button{width:100%;min-height:44px;border:2px solid var(--ink);background:var(--yellow);color:var(--ink);box-shadow:3px 3px 0 var(--ink);font-size:9px;font-weight:1000;letter-spacing:.07em;cursor:pointer}
.account-offline-button:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.account-offline-button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.account-offline-button:disabled{opacity:.68;cursor:wait;transform:none}
.account-offline-button.ready{background:#9bd4a7}
.account-offline-help{margin:9px 0 0;color:#6b6257;font-size:8px;line-height:1.45;font-weight:750}
.account-offline-guide{margin:10px 0 0;padding:10px;border:2px solid var(--blue);background:#eef7ff}
.account-offline-guide[hidden]{display:none!important}
.account-offline-guide strong{display:block;margin:0 0 6px;color:var(--blue);font-size:8px;font-weight:1000;letter-spacing:.07em}
.account-offline-guide p{margin:0;color:var(--ink);font-size:9px;line-height:1.45;font-weight:750}
.boxxy-offline-toast{position:fixed;left:50%;bottom:max(18px,env(safe-area-inset-bottom));z-index:100000;transform:translateX(-50%);max-width:min(90vw,420px);padding:10px 14px;border:2px solid var(--ink);background:var(--yellow);box-shadow:3px 3px 0 var(--ink);font-size:9px;font-weight:1000;letter-spacing:.05em;text-align:center}
.boxxy-offline-toast.done{background:#9bd4a7}
.boxxy-offline-toast[hidden]{display:none!important}
@media(max-width:760px){
  .account-offline-card{padding:10px;margin-top:10px}
  .account-offline-heading{font-size:8.5px}
  .account-offline-button{min-height:42px;font-size:9.5px}
  .account-offline-help{font-size:9px}
  .account-offline-guide strong{font-size:9px}
}
@media(max-height:520px) and (orientation:landscape){
  .account-offline-card{padding:8px;margin-top:8px}
  .account-offline-help{margin-top:6px}
}

/* BOXXY v292 — desktop Full Screen is a distraction-free Zen Mode. */
@media (min-width:761px) and (hover:hover) and (pointer:fine){
  html.desktop-zen-mode,
  html.desktop-zen-mode body{
    width:100%;
    height:100%;
    min-height:100%;
    overflow:hidden!important;
    background:#eadcca;
  }

  body.desktop-zen-mode{
    margin:0;
    overscroll-behavior:none;
  }

  body.desktop-zen-mode .app{
    position:fixed;
    inset:0;
    width:100vw;
    max-width:none;
    height:100dvh;
    min-height:0;
    margin:0;
    display:block;
    overflow:hidden;
    border:0;
    background:linear-gradient(135deg,#f4ebdd,#eadcca);
  }

  body.desktop-zen-mode .play-area{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    min-width:0;
    min-height:0;
    display:block;
    overflow:hidden;
  }

  body.desktop-zen-mode .masthead,
  body.desktop-zen-mode .instruction,
  body.desktop-zen-mode .side-panel-head,
  body.desktop-zen-mode .side-panel>.credit,
  body.desktop-zen-mode .side-panel>.stats,
  body.desktop-zen-mode .side-panel>.top-actions,
  body.desktop-zen-mode .side-panel>.move-zone,
  body.desktop-zen-mode .desktop-utility-tray>.top-actions,
  body.desktop-zen-mode .desktop-utility-tray>.move-zone,
  body.desktop-zen-mode .side-panel>.palette{
    display:none!important;
  }

  body.desktop-zen-mode .board-wrap{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    min-width:0;
    min-height:0;
    padding:clamp(20px,4dvh,48px);
    display:grid;
    place-items:center;
    overflow:hidden;
    background:linear-gradient(135deg,#f4ebdd,#eadcca);
  }

  body.desktop-zen-mode .side-panel{
    position:fixed;
    inset:0;
    z-index:6900;
    width:100%;
    height:100%;
    min-width:0;
    min-height:0;
    display:block;
    overflow:visible;
    border:0;
    background:transparent;
    pointer-events:none;
  }

  body.desktop-zen-mode .bottom-actions{
    position:fixed;
    right:max(18px,env(safe-area-inset-right));
    bottom:max(18px,env(safe-area-inset-bottom));
    z-index:7000;
    width:auto;
    height:auto;
    padding:0;
    display:grid;
    grid-template-columns:repeat(3,46px);
    grid-template-rows:46px;
    gap:8px;
    background:transparent;
    pointer-events:auto;
  }

  body.desktop-zen-mode .bottom-actions .action,
  body.desktop-zen-mode .bottom-actions .action.small{
    width:46px;
    max-width:46px;
    min-width:46px;
    height:46px;
    min-height:46px;
    padding:10px;
    display:grid;
    grid-template-rows:1fr;
    place-items:center;
    border:1px solid rgba(255,255,255,.52);
    border-radius:12px;
    background:rgba(23,23,25,.54);
    color:#fff;
    box-shadow:0 5px 16px rgba(23,23,25,.24),inset 0 1px 0 rgba(255,255,255,.13);
    -webkit-backdrop-filter:blur(6px);
    backdrop-filter:blur(6px);
    opacity:.82;
    transform:none;
    transition:opacity .15s ease,background .15s ease,transform .12s ease;
  }

  body.desktop-zen-mode .bottom-actions .action:hover,
  body.desktop-zen-mode .bottom-actions .action.small:hover{
    opacity:1;
    background:rgba(23,23,25,.68);
  }

  body.desktop-zen-mode .bottom-actions .action:active,
  body.desktop-zen-mode .bottom-actions .action.small:active{
    transform:scale(.96);
    filter:none;
  }

  body.desktop-zen-mode .bottom-actions .action b,
  body.desktop-zen-mode .bottom-actions .action.small b{
    display:none!important;
  }

  body.desktop-zen-mode .bottom-actions .action>span,
  body.desktop-zen-mode .bottom-actions .action.small>span{
    grid-row:1;
    align-self:center;
    justify-self:center;
    margin:0;
    color:inherit;
  }

  body.desktop-zen-mode .bottom-actions .settings-action .menu-lines{
    width:22px;
    height:18px;
  }

  body.desktop-zen-mode .bottom-actions .level-action>span,
  body.desktop-zen-mode .bottom-actions .fullscreen-action>span{
    font-size:22px!important;
    line-height:1!important;
  }

  body.desktop-zen-mode .level-picker{
    pointer-events:auto;
  }
}

/* BOXXY v297 — image importer is a large fit-to-workspace editor with optional full-screen mode. */
.maker-image-import-head-actions{display:flex;align-items:center;gap:8px}
.maker-image-import-head .maker-image-fullscreen-btn{width:auto;min-width:112px;height:40px;padding:0 12px;background:#fff8ed;color:var(--ink);font-size:9px;letter-spacing:.055em;box-shadow:3px 3px 0 rgba(23,23,25,.18)}
.maker-image-import-head .maker-image-fullscreen-btn[aria-pressed="true"]{background:var(--blue);color:#fff}
.maker-image-import-head .maker-image-close-btn{width:40px;height:40px;padding:0;background:#d34734;color:#fff;font-size:26px}
.maker-image-work-controls{display:grid;gap:8px;padding-bottom:10px;border-bottom:2px solid rgba(23,23,25,.15)}
.maker-image-zoom-controls{display:grid;grid-template-columns:40px 58px minmax(58px,auto) 40px;gap:6px;align-items:center;justify-content:start}
.maker-image-zoom-controls button{min-height:32px;border:2px solid var(--ink);background:#fff8ed;font:inherit;font-size:10px;font-weight:950;letter-spacing:.04em;cursor:pointer}
.maker-image-zoom-controls button:first-child,.maker-image-zoom-controls button:last-child{font-size:18px;line-height:1}
.maker-image-zoom-controls button:disabled{opacity:.35;cursor:default}
.maker-image-zoom-controls strong{min-width:58px;text-align:center;font-size:10px;letter-spacing:.05em}
.maker-image-colour-actions{display:flex;justify-content:flex-start}
.maker-image-colour-actions button{min-height:34px;padding:6px 10px;border:2px solid var(--ink);background:#fff8ed;color:var(--ink);font:inherit;font-size:8px;font-weight:950;letter-spacing:.055em;cursor:pointer;box-shadow:2px 2px 0 rgba(23,23,25,.14)}
.maker-image-colour-actions button.selected{background:var(--yellow)}

@media (min-width:901px){
  .maker-image-import-overlay{padding:10px}
  .maker-image-import-card{
    width:min(1680px,calc(100vw - 20px));
    height:calc(100dvh - 20px);
    max-height:none;
    overflow:hidden;
    padding:14px;
    gap:10px;
    grid-template-rows:auto auto minmax(0,1fr) auto auto;
  }
  .maker-image-import-head{padding-bottom:8px}
  .maker-image-import-head h2{font-size:26px}
  .maker-image-stage-help{padding:7px 10px;font-size:10px}
  .maker-image-import-body{
    grid-template-columns:minmax(0,2.15fr) minmax(360px,.85fr);
    min-height:0;
    overflow:hidden;
    align-items:stretch;
    gap:12px;
  }
  .maker-image-preview-panel{display:grid;min-height:0;height:100%;overflow:hidden}
  .maker-image-canvas-wrap{
    min-width:0;
    min-height:0;
    width:100%;
    height:100%;
    overflow:auto;
    display:grid;
    place-items:center;
    text-align:center;
    overscroll-behavior:contain;
    scrollbar-gutter:stable;
  }
  .maker-image-preview-panel canvas{display:block;width:auto;height:auto;max-width:none;max-height:none;margin:auto}
  .maker-image-groups-panel{min-height:0;height:100%;overflow:auto;padding-right:5px;align-content:start;scrollbar-gutter:stable}
  .maker-image-grid-tweaks{grid-template-columns:70px 70px 1fr 1fr;gap:6px}
  .maker-image-grid-tweaks input{height:32px;font-size:14px}
  .maker-image-grid-tweaks button{min-height:32px;font-size:8px}
  .maker-image-mode-actions{gap:6px}
  .maker-image-mode-actions button{min-height:36px;font-size:9px}
  .maker-image-corner-place{gap:4px}
  .maker-image-corner-place button{min-height:30px;font-size:9px}
  .maker-image-corner-note{font-size:8px}
  .maker-image-import-status{min-height:30px;padding:6px 9px;font-size:10px}
  .maker-image-import-actions button{min-height:34px}

  .maker-image-import-overlay.fullscreen{padding:0;background:#2b2b2d}
  .maker-image-import-overlay.fullscreen .maker-image-import-card{
    width:100vw;
    height:100dvh;
    border:0;
    box-shadow:none;
    padding:12px 14px;
  }
  .maker-image-import-overlay.fullscreen .maker-image-import-body{grid-template-columns:minmax(0,2.35fr) minmax(360px,.65fr)}
}

@media (max-width:900px){
  .maker-image-import-head .maker-image-fullscreen-btn{display:none}
  .maker-image-import-card{height:auto;max-height:94vh;overflow:auto}
  .maker-image-import-body{grid-template-columns:1fr;overflow:visible}
  .maker-image-preview-panel{min-height:0}
  .maker-image-canvas-wrap{height:clamp(300px,52vh,560px);overflow:auto;display:grid;place-items:center}
  .maker-image-preview-panel canvas{max-width:none;max-height:none}
  .maker-image-groups-panel{overflow:visible}
  .maker-image-work-controls{padding-bottom:8px}
  .maker-image-zoom-controls{grid-template-columns:38px 54px 56px 38px}
}



/* BOXXY v298 — automatic performance mode for boards over 50 cells wide or tall.
   Large boards keep the same gameplay but avoid costly per-move effects. */
body.large-level-performance .board{
  contain:layout paint style;
  box-shadow:0 16px 30px rgba(37,26,15,.26);
}
/* BOXXY v307 — Turbo updates the board at very high frequency. Keep those
   paints inside the board so mobile browsers do not rerasterise header medals. */
body[data-boxxy-speed="instant"] .board{
  contain:layout paint style;
}
body.large-level-performance .piece.box,
body.large-level-performance .piece.player{
  transition:none!important;
}
body.large-level-performance .piece.box::before,
body.large-level-performance .piece.player::before{
  display:none!important;
}
body.large-level-performance .wall::before,
body.large-level-performance .void-cell{
  box-shadow:none!important;
}
body.large-level-performance .piece.player.board-step,
body.large-level-performance .piece.box.pushing.board-step{
  animation:boardPieceMove .14s steps(2,end) both!important;
}
body.large-level-performance .piece.player.walking :is(img,canvas),
body.large-level-performance .piece.player.pushing :is(img,canvas),
body.large-level-performance .piece.player.idle-bob :is(img,canvas){
  animation:none!important;
}
body.large-level-performance .instruction .thought-text{
  transition:none;
}


/* BOXXY v311 — Daily leaderboard: centred desktop Today feature; mobile layout unchanged. */
.daily-archive-today-feature{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:7px;margin-bottom:14px}
.daily-archive-today-card{grid-column:span 1;border-color:var(--red)!important;outline:2px solid var(--red)!important;outline-offset:1px!important;background:#fff7ee!important;box-shadow:2px 2px 0 rgba(219,59,39,.42)!important}
.daily-archive-today-card.completed{background:#fff2e9!important}
.daily-archive-today-card .daily-archive-date-head{position:relative;padding-right:38px;background:var(--red);color:#fff;border-bottom-color:var(--ink)}
.daily-archive-today-card .daily-archive-date-head span{color:#fff;opacity:.88}
.daily-archive-today-label{position:absolute;right:5px;top:5px;padding:2px 4px;border:1px solid var(--ink);background:var(--yellow);color:var(--ink);font-size:5px;line-height:1;letter-spacing:.07em}
.daily-archive-puzzle-hit{min-width:0;width:100%;display:grid;grid-template-rows:auto auto 1fr;padding:0;border:0;border-radius:0;background:transparent;color:inherit;text-align:left;font:inherit;cursor:pointer}
.daily-archive-date-card:not(.has-map-thumbnail) .daily-archive-puzzle-hit{grid-template-rows:auto 1fr}
.daily-archive-puzzle-hit:hover .daily-archive-date-art,.daily-archive-puzzle-hit:focus-visible .daily-archive-date-art{filter:brightness(1.04)}
.daily-archive-puzzle-hit:focus-visible{outline:3px solid var(--yellow);outline-offset:-3px}
.daily-archive-date-card{grid-template-rows:minmax(0,1fr) auto}
.daily-archive-date-card.has-map-thumbnail{grid-template-rows:minmax(0,1fr) auto}
.daily-archive-leaderboard{background:var(--yellow);color:var(--ink);box-shadow:1px 1px 0 rgba(23,23,25,.2);font-size:15px!important;line-height:1}
.daily-archive-today-leaders{grid-column:span 6;min-width:0;display:grid;grid-template-rows:auto 1fr auto;border:2px solid var(--ink);background:#fffaf2}
.daily-leaderboard-preview-link{cursor:pointer;outline:0;transition:transform .12s ease,box-shadow .12s ease}
.daily-leaderboard-preview-link:hover,.daily-leaderboard-preview-link:focus-visible{transform:translate(-1px,-1px);box-shadow:4px 4px 0 rgba(32,83,154,.2)}
.daily-leaderboard-preview-link:active{transform:translate(0,0);box-shadow:1px 1px 0 rgba(32,83,154,.18)}
.daily-archive-today-leaders-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:7px 10px 6px;border-bottom:2px solid var(--ink)}
.daily-archive-today-leaders-head span{font-size:6px;font-weight:1000;letter-spacing:.1em;color:#6b6155}
.daily-archive-today-leaders-head strong{font-size:11px;letter-spacing:.035em}
.daily-leaderboard-list{display:grid;align-content:start}
.daily-archive-today-list{grid-template-columns:1fr}
.daily-archive-today-list .daily-leaderboard-row{border-right:0;border-bottom:1px solid rgba(23,23,25,.22)}
.daily-archive-today-list .daily-leaderboard-row:last-child{border-bottom:0}
.daily-leaderboard-row{min-width:0;display:grid;grid-template-columns:28px minmax(0,1fr) auto auto;align-items:center;gap:9px;min-height:40px;padding:7px 10px;border-bottom:1px solid rgba(23,23,25,.22)}
.daily-leaderboard-row:last-child{border-bottom:0}
/* Full Daily scoreboard: fixed score tracks keep Device anchored when rankings change.
   The flexible username track absorbs width changes; compact previews are unaffected. */
.daily-leaderboard-card>.daily-leaderboard-list .daily-leaderboard-row{
  grid-template-columns:28px minmax(0,1fr) 96px 22px 96px;
  min-height:44px;
  --leader-score-size:17px;
  --leader-detail-size:9px;
}
.daily-leaderboard-card>.daily-leaderboard-list :is(.daily-leaderboard-time,.daily-leaderboard-moves){
  min-width:0;
  overflow-wrap:anywhere;
  white-space:normal;
  font-variant-numeric:tabular-nums;
}
.daily-leaderboard-card>.daily-leaderboard-list .daily-leaderboard-time{text-align:right;font-size:var(--leader-score-size);font-weight:bold;color:inherit;letter-spacing:.015em;line-height:1}
.daily-leaderboard-card>.daily-leaderboard-list .daily-leaderboard-moves{text-align:left;font-size:var(--leader-detail-size);font-weight:950;color:#6b6155;letter-spacing:.04em;line-height:normal}
.daily-leaderboard-card>.daily-leaderboard-list .daily-leaderboard-row.is-moves .daily-leaderboard-time{font-size:var(--leader-detail-size);font-weight:950;color:#6b6155;letter-spacing:.04em;line-height:normal}
.daily-leaderboard-card>.daily-leaderboard-list .daily-leaderboard-row.is-moves .daily-leaderboard-moves{font-size:var(--leader-score-size);font-weight:bold;color:inherit;letter-spacing:.015em;line-height:1}
.daily-leaderboard-card>.daily-leaderboard-list .daily-leaderboard-device{min-width:0;margin:0;text-align:center;font-size:14px}
.daily-leaderboard-row.is-current-user{background:#f5d85f;box-shadow:inset 4px 0 0 var(--red)}
.daily-leaderboard-row.is-current-user .daily-leaderboard-name{font-weight:1000}
.daily-leaderboard-rank{width:24px;height:24px;display:grid;place-items:center;border:1px solid var(--ink);background:var(--yellow);font-size:9px;font-weight:1000}
.daily-leaderboard-rank.medal{border:0;background:transparent;font-size:17px}
.daily-leaderboard-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;line-height:1.05}
.daily-leaderboard-profile-link{min-width:0;max-width:100%;margin:0;padding:0;border:0;border-radius:0;background:transparent;color:inherit;box-shadow:none;appearance:none;-webkit-appearance:none;display:flex;align-items:center;gap:7px;font:inherit;text-align:left;text-decoration:none;cursor:pointer}
.daily-leaderboard-profile-link .daily-leaderboard-name{flex:1 1 auto}
.daily-leaderboard-avatar-frame{flex:0 0 28px;width:28px;height:28px;display:grid;place-items:center;overflow:hidden}
.daily-leaderboard-avatar{display:block;width:28px;height:28px;pointer-events:none}
.daily-leaderboard-profile-link:hover,.daily-leaderboard-profile-link:active{background:transparent;color:inherit;text-decoration:none;box-shadow:none}
.daily-leaderboard-profile-link:hover .daily-leaderboard-name,.daily-leaderboard-profile-link:focus .daily-leaderboard-name,.daily-leaderboard-profile-link:active .daily-leaderboard-name{text-decoration:none}
.daily-leaderboard-profile-link:focus{outline:none}
.daily-leaderboard-profile-link:focus-visible{outline:2px dotted rgba(23,23,25,.52);outline-offset:2px}
.daily-leaderboard-time{font-size:17px;line-height:1;letter-spacing:.015em}
.daily-leaderboard-device{display:inline-block;margin-left:5px;font-size:.82em;line-height:1;vertical-align:.04em;font-weight:400}
.daily-leaderboard-moves{white-space:nowrap;color:#6b6155;font-size:9px;font-weight:950;letter-spacing:.04em}
.daily-leaderboard-empty{align-self:center;margin:0;padding:15px;color:#71675c;font-size:8px;font-weight:1000;letter-spacing:.07em;text-align:center}
.daily-leaderboard-note{margin:0;padding:9px 11px;border-top:1px solid rgba(23,23,25,.24);color:#6a6055;font-size:7px;font-weight:850;line-height:1.35}
.daily-archive-today-note{background:#f4eadc}
.daily-leaderboard-modal{z-index:11200;padding:14px;background:rgba(23,23,25,.67);backdrop-filter:blur(8px)}
.daily-leaderboard-card{width:min(560px,calc(100vw - 24px));max-height:min(90dvh,760px);display:grid;grid-template-rows:auto auto auto minmax(0,1fr) auto;overflow:hidden;border:3px solid var(--ink);background:var(--paper2);box-shadow:10px 10px 0 rgba(219,59,39,.68)}
.daily-leaderboard-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:16px 17px 13px;border-bottom:3px solid var(--ink);background:linear-gradient(135deg,#fff7ee,#ead9c8)}
.daily-leaderboard-head h2{margin:4px 0 0;font-size:clamp(28px,7vw,45px);line-height:.9;letter-spacing:-.045em}
.daily-leaderboard-head p{margin:7px 0 0;color:#675e53;font-size:9px;font-weight:900;text-transform:uppercase}
.daily-leaderboard-head-actions{display:flex;align-items:flex-start;gap:8px}
.daily-leaderboard-refresh{flex:0 0 32px;width:32px;height:32px;margin-top:3px;padding:0;border:2px solid var(--ink);border-radius:50%;background:#fffaf2;color:var(--ink);font:950 20px/1 Arial,sans-serif;cursor:pointer}
.daily-leaderboard-refresh:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.daily-leaderboard-close{flex:0 0 38px;width:38px;height:38px;padding:0;border:2px solid var(--ink);background:var(--red);color:#fff;font:950 27px/1 Arial,sans-serif;cursor:pointer}
.daily-detail-summary{display:grid;grid-template-columns:160px minmax(0,1fr);gap:14px;align-items:stretch;padding:14px;border-bottom:2px solid var(--ink);background:#f4eadc}
.daily-detail-preview{width:160px;align-self:center;margin:0;border:2px solid var(--ink);background:#d8cdbd}
.daily-detail-action{min-width:0;display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:9px}
.daily-detail-status{color:#665d52;font-size:8px;font-weight:1000;letter-spacing:.09em}
.daily-detail-player-stats{min-width:0;border:1px solid rgba(23,23,25,.35);background:#fffaf2}
.daily-detail-player-stats[hidden]{display:none!important}
.daily-detail-player-stats-title{display:block;padding:5px 7px 4px;border-bottom:1px solid rgba(23,23,25,.25);color:#6b6155;font-size:6.5px;font-weight:1000;letter-spacing:.1em}
.daily-detail-player-stats-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.daily-detail-player-stats-grid>div{min-width:0;padding:6px 7px}
.daily-detail-player-stats-grid>div+div{border-left:1px solid rgba(23,23,25,.22)}
.daily-detail-player-stats-grid>div>span{display:block;color:#6b6155;font-size:6px;font-weight:1000;letter-spacing:.08em}
.daily-detail-player-stats-grid strong{display:block;min-width:0;margin-top:2px;font-size:12px;line-height:1;white-space:nowrap}
.daily-detail-player-stats-grid strong .time-fraction{display:inline;font-size:.58em}
.daily-detail-player-stats-note{display:block;padding:4px 7px 5px;border-top:1px solid rgba(23,23,25,.2);color:#6b6155;font-size:9px;line-height:1.25;letter-spacing:0}
.daily-detail-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.daily-detail-actions.single{grid-template-columns:1fr}
.daily-detail-actions button{min-height:48px;padding:10px 14px;border:2px solid var(--ink);font:1000 13px/1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:.08em;cursor:pointer}
.daily-detail-actions button[hidden]{display:none!important}
.daily-detail-share{background:#e87528;color:#fff;box-shadow:4px 4px 0 var(--yellow)}
.daily-detail-play{background:var(--green);color:#fff;box-shadow:4px 4px 0 var(--yellow)}
.daily-detail-actions button:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--yellow)}
.daily-leaderboard-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:8px 12px 7px;border-bottom:2px solid var(--ink);background:#fffaf2}
.daily-leaderboard-section-head span{color:#6b6155;font-size:7px;font-weight:1000;letter-spacing:.1em}
.daily-leaderboard-section-head strong{font-size:12px;letter-spacing:.04em}
/* v381: mutually exclusive leaderboard sorting, confined to the full Daily modal. */
.daily-leaderboard-section-head{align-items:center;flex-wrap:wrap}
.daily-leaderboard-sort{display:grid;justify-items:end;gap:3px;min-width:0}
.daily-leaderboard-sort-buttons{display:flex;border:2px solid var(--ink);background:#e2d8c9}
.daily-leaderboard-sort-buttons button{min-height:29px;padding:6px 9px;border:0;background:transparent;color:var(--ink);font-family:inherit;font-size:9px;font-weight:1000;line-height:1;letter-spacing:.035em;white-space:nowrap;cursor:pointer}
.daily-leaderboard-sort-buttons button+button{border-left:2px solid var(--ink)}
.daily-leaderboard-sort-buttons button.is-active{background:var(--yellow);box-shadow:inset 0 -3px 0 var(--ink)}
.daily-leaderboard-sort-buttons button:focus-visible{outline:3px solid var(--blue);outline-offset:2px;position:relative;z-index:1}
@media(max-width:620px){.daily-leaderboard-sort-buttons button{min-height:34px;padding:7px 7px;font-size:9px}}

.daily-leaderboard-card>.daily-leaderboard-list{min-height:0;overflow-y:auto;scrollbar-gutter:stable;background:#fffaf2;-webkit-overflow-scrolling:touch}
/* v419: reserve the score area while Cloudflare results are loading so the centred modal does not jump. */
.daily-leaderboard-card>.daily-leaderboard-list.is-loading{
  min-height:max(var(--daily-leaderboard-loading-height,0px),clamp(180px,34dvh,330px));
  display:grid;
  place-items:center;
  align-content:center;
}
.daily-leaderboard-loading{display:flex;align-items:center;justify-content:center;gap:8px;padding:18px;color:#71675c;font-size:8px;font-weight:1000;letter-spacing:.07em;text-align:center}
.daily-leaderboard-loading-spinner{width:14px;height:14px;flex:0 0 14px;border:2px solid rgba(113,103,92,.28);border-top-color:#71675c;border-radius:50%;animation:dailyLeaderboardLoadingSpin .75s linear infinite}
@keyframes dailyLeaderboardLoadingSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.daily-leaderboard-loading-spinner{animation-duration:1.8s}}
.daily-leaderboard-more{display:block;width:calc(100% - 24px);min-height:34px;margin:10px 12px;padding:7px 12px;border:2px solid var(--ink);border-radius:17px;background:#f0e5d5;color:var(--ink);font-family:inherit;font-size:9px;font-weight:1000;line-height:1;letter-spacing:.07em;cursor:pointer}
.daily-leaderboard-more:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.daily-leaderboard-more:active{transform:translateY(1px)}
.daily-leaderboard-card>.daily-leaderboard-note{padding:11px 14px;border-top:2px solid var(--ink);font-size:8px;background:#f0e5d5}
@media(max-width:1100px){.daily-archive-today-feature{grid-template-columns:repeat(6,minmax(0,1fr))}.daily-archive-today-leaders{grid-column:span 5}}
@media(max-width:820px){
  .daily-leaderboard-card>.daily-leaderboard-list .daily-leaderboard-row{
    grid-template-columns:24px minmax(0,1fr) 86px 18px 86px;
    --leader-score-size:14px;
    --leader-detail-size:8px;
  }
  .daily-leaderboard-card>.daily-leaderboard-list .daily-leaderboard-device{font-size:12px}
}
@media(max-width:820px){.daily-leaderboard-device{margin-left:4px;font-size:.8em}.daily-archive-today-feature{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-bottom:11px}.daily-archive-today-leaders{grid-column:span 3}.daily-archive-today-leaders-head{padding:6px 8px 5px}.daily-leaderboard-row{grid-template-columns:24px minmax(0,1fr) auto auto;min-height:34px;padding:5px 7px;gap:6px}.daily-leaderboard-rank{width:20px;height:20px;font-size:7px}.daily-leaderboard-rank.medal{font-size:15px}.daily-leaderboard-name{font-size:11px}.daily-leaderboard-time{font-size:14px}.daily-leaderboard-moves{font-size:8px}}
@media(max-width:620px){
  .daily-leaderboard-card>.daily-leaderboard-list .daily-leaderboard-row{
    grid-template-columns:21px minmax(0,1fr) 78px 16px 78px;
    gap:4px;padding:6px;
    --leader-score-size:16px;
    --leader-detail-size:8.5px;
  }
}
@media(max-width:370px){
  .daily-leaderboard-card>.daily-leaderboard-list .daily-leaderboard-row{
    grid-template-columns:21px minmax(0,1fr) 70px 16px 72px;
    --leader-score-size:14px;
    --leader-detail-size:8px;
  }
  .daily-leaderboard-avatar-frame{flex-basis:26px;width:26px;height:26px}
  .daily-leaderboard-avatar{width:26px;height:26px}
}
@media(max-width:620px){.daily-archive-today-feature{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin-bottom:10px}.daily-archive-today-leaders{grid-column:span 2;grid-template-rows:auto 1fr auto}.daily-archive-today-card .daily-archive-date-head{padding-right:42px}.daily-archive-today-label{font-size:7px;padding:3px 4px}.daily-archive-today-leaders-head{padding:5px 6px 4px}.daily-archive-today-leaders-head span{font-size:7px}.daily-archive-today-leaders-head strong{font-size:10px}.daily-archive-today-list .daily-leaderboard-row{min-height:25px;padding:2px 5px}.daily-archive-today-list .daily-leaderboard-rank{width:18px;height:18px}.daily-archive-today-list .daily-leaderboard-rank.medal{font-size:15px}.daily-archive-today-list .daily-leaderboard-name{font-size:10.5px}.daily-archive-today-list .daily-leaderboard-time{font-size:13px}.daily-archive-today-list .daily-leaderboard-moves{font-size:7.5px}.daily-archive-today-note{padding:4px 6px;font-size:7px;line-height:1.3}.daily-archive-leaderboard{font-size:14px!important}.daily-leaderboard-modal{padding:7px}.daily-leaderboard-card{width:100%;max-height:92dvh;box-shadow:5px 5px 0 rgba(219,59,39,.62)}.daily-leaderboard-head{padding:11px 11px 9px}.daily-leaderboard-head h2{font-size:28px}.daily-leaderboard-head p{font-size:9px}.daily-leaderboard-refresh{width:28px;height:28px;flex-basis:28px;margin-top:2px;font-size:18px}.daily-leaderboard-close{width:32px;height:32px;flex-basis:32px;font-size:23px}.daily-leaderboard-row{min-height:38px;padding:6px 8px}.daily-leaderboard-name{font-size:12px}.daily-leaderboard-time{font-size:16px}.daily-leaderboard-moves{font-size:8.5px}.daily-leaderboard-card>.daily-leaderboard-note{padding:8px 9px;font-size:8.5px}}

/* BOXXY v320 — phone Daily cards prioritise the whole-second clock; details live in the roomy puzzle modal. */
@media(max-width:620px){
  .daily-archive-date-stats .time-fraction{display:none}
  .daily-detail-summary{grid-template-columns:118px minmax(0,1fr);gap:10px;padding:10px}
  .daily-detail-preview{width:118px}
  .daily-detail-status{font-size:7.5px}
  .daily-detail-player-stats-title{padding:4px 6px 3px;font-size:6px}
  .daily-detail-player-stats-grid>div{padding:5px 5px}
  .daily-detail-player-stats-grid>div>span{font-size:5.5px}
  .daily-detail-player-stats-grid strong{font-size:10.5px}
  .daily-detail-player-stats-note{padding:3px 5px 4px;font-size:9px}
  .daily-detail-actions button{min-height:43px;padding:8px 10px;font-size:11px;box-shadow:3px 3px 0 var(--yellow)}
  .daily-leaderboard-section-head{padding:7px 9px 6px}
  .daily-leaderboard-section-head span{font-size:6.5px}
  .daily-leaderboard-section-head strong{font-size:10px}
}
@media(max-width:370px){
  .daily-detail-summary{grid-template-columns:96px minmax(0,1fr);gap:8px;padding:8px}
  .daily-detail-preview{width:96px}
  .daily-detail-actions button{font-size:10px;letter-spacing:.06em}
}

/* BOXXY v317 — fractional completion time stays subordinate to the main clock. */
.time-fraction{font-size:.62em;line-height:1;letter-spacing:0;vertical-align:baseline}
.stats .time strong .time-fraction{font-size:.6em}
.daily-leaderboard-time .time-fraction{font-size:.62em}
.daily-archive-date-stats strong .time-fraction,.level-thumb-stats strong .time-fraction{font-size:.6em}


/* BOXXY v311 — Desktop-only Daily archive refinement.
   Keep Today's card at exactly the same width as historic cards, centre the
   Today + leaderboard group, and cap the leaderboard at 2x the card width. */
@media (min-width:1101px){
  .daily-archive-today-feature{
    grid-template-columns:calc(14.285714% - 6px) calc(28.571428% - 12px);
    justify-content:center;
  }
  .daily-archive-today-card,
  .daily-archive-today-leaders{grid-column:auto}
}
@media (min-width:821px) and (max-width:1100px){
  .daily-archive-today-feature{
    grid-template-columns:calc(16.666667% - 5.833px) calc(33.333333% - 11.667px);
    justify-content:center;
  }
  .daily-archive-today-card,
  .daily-archive-today-leaders{grid-column:auto}
}

/* BOXXY v313 — Daily archive desktop height alignment.
   The top-three row direction is now defined once in the base leaderboard rule,
   so desktop, iPad and phone widths cannot diverge. */
@media (min-width:821px){
  .daily-archive-today-feature{align-items:stretch}
}



/* BOXXY v318 — precise completion times stay visually grouped and readable. */
.daily-completion-leaderboard{flex:0 0 auto;width:min(620px,100%);margin:0 0 14px;border:2px solid var(--ink);background:#fffaf2;text-align:left;overflow:hidden}
.daily-completion-leaderboard[hidden]{display:none!important}
.daily-completion-leaderboard-head{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:8px;padding:7px 9px 6px;border-bottom:2px solid var(--ink);background:#f0e5d5}
.daily-completion-leaderboard-head span{font-size:7px;font-weight:1000;letter-spacing:.1em;color:#6b6155}
.daily-completion-leaderboard-head strong{font-size:11px;letter-spacing:.035em;text-align:center}
.daily-completion-leaderboard-head b{font-size:7px;letter-spacing:.075em;color:var(--blue);white-space:nowrap}
.daily-completion-leaderboard-list .daily-leaderboard-row{min-height:32px;padding:4px 7px;grid-template-columns:22px minmax(0,1fr) auto auto;gap:6px}
.daily-completion-leaderboard-list .daily-leaderboard-rank{width:19px;height:19px;font-size:7px}
.daily-completion-leaderboard-list .daily-leaderboard-rank.medal{font-size:14px}
.daily-completion-leaderboard-list .daily-leaderboard-name{font-size:11px}
.daily-completion-leaderboard-list .daily-leaderboard-time{font-size:14px}
.daily-completion-leaderboard-list .daily-leaderboard-moves{font-size:7.5px}
.stats .time strong{
  white-space:nowrap;
}
.stats .time strong .time-fraction{
  display:inline;
  white-space:nowrap;
}

.complete-card.daily-complete #completeText{
  width:min(620px,100%);
  max-width:none;
  margin:0 0 15px;
}
.daily-complete-result{
  width:100%;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  border:2px solid var(--ink);
  background:#fff9ee;
  box-shadow:4px 4px 0 rgba(23,23,25,.14);
}
.daily-complete-result-item{
  min-width:0;
  padding:8px 12px 9px;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
}
.daily-complete-result-item + .daily-complete-result-item{
  border-left:1px solid rgba(23,23,25,.28);
}
.daily-complete-result-label{
  flex:none;
  font-size:8px;
  line-height:1;
  font-weight:950;
  letter-spacing:.11em;
  color:#71675a;
}
.daily-complete-result-value{
  min-width:0;
  font-size:20px;
  line-height:1;
  font-weight:1000;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.025em;
  white-space:nowrap;
}
.daily-complete-result-time .time-fraction{
  display:inline;
  font-size:.62em;
  white-space:nowrap;
}
.daily-complete-streak-message{
  display:block;
  margin-top:10px;
  font-size:12px;
  line-height:1.35;
}

/* BOXXY v351 — clear, non-punitive explanation when a Daily run is not public-leaderboard eligible. */
.daily-complete-leaderboard-warning{
  display:block;
  margin-top:9px;
  padding:8px 10px;
  border:1px solid rgba(23,23,25,.3);
  background:#fff3d6;
  font-size:10.5px;
  line-height:1.35;
  font-weight:800;
}

@media(max-width:760px){
  .daily-completion-leaderboard{margin-bottom:10px}
  .daily-completion-leaderboard-head{padding:5px 6px 4px;gap:5px}
  .daily-completion-leaderboard-head span,.daily-completion-leaderboard-head b{font-size:6.5px}
  .daily-completion-leaderboard-head strong{font-size:10px}
  .daily-completion-leaderboard-list .daily-leaderboard-row{min-height:27px;padding:3px 5px}
  .daily-completion-leaderboard-list .daily-leaderboard-name{font-size:10px}
  .daily-completion-leaderboard-list .daily-leaderboard-time{font-size:13px}
  .complete-card.daily-complete #completeText{margin-bottom:12px}
  .daily-complete-result-item{padding:7px 9px 8px;gap:7px}
  .daily-complete-result-value{font-size:18px}
  .daily-complete-streak-message{margin-top:8px;font-size:11px;line-height:1.3}
  .daily-complete-leaderboard-warning{margin-top:7px;padding:7px 8px;font-size:9.5px}
}

@media(max-width:390px){
  .daily-complete-result-item{padding-inline:7px}
  .daily-complete-result-label{font-size:7px}
  .daily-complete-result-value{font-size:16px}
}

@media(max-height:520px) and (orientation:landscape){
  .complete-card.daily-complete #completeText{margin-bottom:6px}
  .daily-complete-result-item{padding:5px 8px 6px}
  .daily-complete-result-value{font-size:16px}
  .daily-complete-streak-message{margin-top:5px;font-size:9.5px;line-height:1.2}
  .daily-complete-leaderboard-warning{margin-top:5px;padding:5px 7px;font-size:8.5px;line-height:1.25}
}

/* BOXXY v319 — ordinary completion result: level title plus one coherent result system. */
.complete-card:not(.daily-complete):not(.final-complete) #completeText{
  width:100%;
  max-width:none;
  margin:0 0 18px;
  font-family:inherit;
}
.standard-complete-level-title{
  display:block;
  margin:0 0 10px;
  font-family:inherit;
  font-size:12px;
  line-height:1.25;
  font-weight:950;
  letter-spacing:.055em;
  text-transform:uppercase;
  overflow-wrap:anywhere;
}
.standard-complete-result{
  display:grid;
  grid-template-columns:1.45fr repeat(2,minmax(0,1fr));
  width:100%;
  border:2px solid var(--ink);
  background:#fff9ee;
  box-shadow:4px 4px 0 rgba(23,23,25,.14);
  font-family:inherit;
}
.standard-complete-result-item{
  min-width:0;
  padding:8px 9px 9px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:4px;
  font-family:inherit;
}
.standard-complete-result-item + .standard-complete-result-item{
  border-left:1px solid rgba(23,23,25,.28);
}
.standard-complete-result-label{
  font-family:inherit;
  font-size:8px;
  line-height:1;
  font-weight:950;
  letter-spacing:.11em;
  color:#71675a;
}
.standard-complete-result-value{
  max-width:100%;
  font-family:inherit;
  font-size:19px;
  line-height:1;
  font-weight:950;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.025em;
  white-space:nowrap;
}
.standard-complete-result-time .time-fraction{
  display:inline;
  font-family:inherit;
  font-size:.62em;
  white-space:nowrap;
}
.standard-complete-note{
  display:block;
  margin-top:9px;
  font-family:inherit;
  font-size:9px;
  line-height:1.25;
  font-weight:900;
  letter-spacing:.07em;
  color:#655d54;
}

@media(max-width:560px){
  .complete-card:not(.daily-complete):not(.final-complete) #completeText{margin-bottom:13px}
  .standard-complete-level-title{margin-bottom:8px;font-size:10px;line-height:1.2}
  .standard-complete-result{grid-template-columns:repeat(2,minmax(0,1fr))}
  .standard-complete-result-time{grid-column:1 / -1;flex-direction:row;align-items:baseline;justify-content:space-between;gap:8px;border-bottom:1px solid rgba(23,23,25,.28)}
  .standard-complete-result-item{padding:7px 8px 8px}
  .standard-complete-result-item:nth-child(3){border-left:1px solid rgba(23,23,25,.28)}
  .standard-complete-result-value{font-size:17px}
  .standard-complete-result-time .standard-complete-result-value{font-size:19px}
  .standard-complete-note{margin-top:7px;font-size:8px}
}

@media(max-width:390px){
  .standard-complete-level-title{font-size:9px}
  .standard-complete-result-item{padding-inline:7px}
  .standard-complete-result-label{font-size:7px}
  .standard-complete-result-value{font-size:16px}
  .standard-complete-result-time .standard-complete-result-value{font-size:18px}
}

@media(max-height:500px) and (orientation:landscape){
  .complete-card:not(.daily-complete):not(.final-complete) #completeText{margin-bottom:8px}
  .standard-complete-level-title{margin-bottom:5px;font-size:8px}
  .standard-complete-result-item{padding:5px 7px 6px;gap:2px}
  .standard-complete-result-value{font-size:15px}
  .standard-complete-result-time .standard-complete-result-value{font-size:16px}
  .standard-complete-note{margin-top:5px;font-size:7px}
}
@media(max-width:560px){
  .standard-complete-result-item:nth-child(2){border-left:0}
}

/* BOXXY v345 — gated touch Click-Push and board-size-aware Zen player-follow zoom. */

.touch-settings-only{display:none}
body.settings-touch-device .touch-settings-only:not([hidden]){display:flex}

/* Touch Click-Push reuses the route layer but stays deliberately quiet: no pulsing
   animation and no permanent board decoration. Markers exist only while a box is selected. */
body.touch-click-push-enabled .mouse-support-selected::before{
  inset:11%;
  border-width:2px;
  border-radius:10px;
  box-shadow:0 0 0 2px rgba(247,240,229,.82),0 4px 12px rgba(23,23,25,.18);
  animation:none;
}
body.touch-click-push-enabled .mouse-support-destination::before{
  width:34%;
  height:34%;
  min-width:8px;
  min-height:8px;
  max-width:20px;
  max-height:20px;
  border:2px solid var(--blue);
  background:rgba(247,240,229,.9);
  box-shadow:0 0 0 2px rgba(23,23,25,.76);
  animation:none;
}
body.touch-click-push-enabled .mouse-support-destination.is-goal::before{
  border-color:var(--red);
  background:rgba(247,240,229,.94);
}

/* BOXXY v347 — Zen zoom camera can smoothly follow through a dead zone or stay static. */
.zen-zoom-btn,
.zen-camera-mode-btn{
  display:none;
  position:fixed;
  z-index:8501;
  width:46px;
  height:46px;
  padding:10px;
  border:1px solid rgba(255,255,255,.52);
  border-radius:12px;
  background:rgba(23,23,25,.54);
  color:#fff;
  box-shadow:0 5px 16px rgba(23,23,25,.24),inset 0 1px 0 rgba(255,255,255,.13);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px);
  place-items:center;
  line-height:0;
  touch-action:manipulation;
}
.zen-zoom-btn[hidden],.zen-camera-mode-btn[hidden]{display:none!important}
.zen-zoom-btn:hover,.zen-camera-mode-btn:hover{background:rgba(23,23,25,.66)}
.zen-zoom-btn:active,.zen-camera-mode-btn:active{transform:scale(.96);filter:none}
.zen-zoom-btn[aria-pressed="true"],.zen-camera-mode-btn[aria-pressed="true"]{background:rgba(229,179,42,.88);color:var(--ink);border-color:rgba(23,23,25,.8)}
.zen-zoom-btn:disabled{opacity:.38;cursor:default;filter:none}
.zen-zoom-btn:disabled:active{transform:none}
.zen-zoom-btn svg,.zen-camera-mode-btn svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.15;stroke-linecap:round;stroke-linejoin:round}
body.phone-zen-mode .zen-zoom-btn,
body.desktop-zen-mode .zen-zoom-btn,
body.phone-zen-mode .zen-camera-mode-btn:not([hidden]),
body.desktop-zen-mode .zen-camera-mode-btn:not([hidden]){display:grid}
/* BOXXY v348 — zoomed boards are laid out at their real pixel size. The camera
   only translates that already-sized board; it never scales the board texture.
   This keeps floor grid lines and cell layers on one geometry and avoids costly
   resampling of large boards while the camera follows the player. */
.board.zen-board-zoomed{
  position:absolute!important;
  left:0!important;
  top:0!important;
  max-width:none!important;
  max-height:none!important;
  will-change:transform;
}
.board.zen-board-zoomed.zen-camera-follow{transition:transform .22s cubic-bezier(.18,.72,.24,1)}
.board.zen-board-zoomed.zen-camera-static{transition:transform .14s cubic-bezier(.2,.75,.3,1)}

/* Phone Zen: keep the zoom control immediately above the Zen exit control. */
@media (max-width:760px) and (pointer:coarse){
  body.phone-zen-mode .zen-zoom-btn{
    right:max(10px,env(safe-area-inset-right));
    top:max(10px,env(safe-area-inset-top));
  }
  body.phone-zen-mode .zen-camera-mode-btn{
    right:calc(max(10px,env(safe-area-inset-right)) + 56px);
    top:max(10px,env(safe-area-inset-top));
  }
  body.phone-zen-mode .mobile-fullscreen-btn{
    top:calc(max(10px,env(safe-area-inset-top)) + 56px)!important;
    bottom:auto!important;
  }
}
@media (max-height:520px) and (orientation:landscape) and (pointer:coarse){
  body.phone-zen-mode .zen-zoom-btn{
    left:max(10px,env(safe-area-inset-left));
    right:auto;
    top:max(10px,env(safe-area-inset-top));
    width:42px;
    height:42px;
    padding:9px;
    border-radius:10px;
  }
  body.phone-zen-mode .zen-camera-mode-btn{
    left:calc(max(10px,env(safe-area-inset-left)) + 52px);
    right:auto;
    top:max(10px,env(safe-area-inset-top));
    width:42px;
    height:42px;
    padding:9px;
    border-radius:10px;
  }
  body.phone-zen-mode .mobile-fullscreen-btn{
    left:max(10px,env(safe-area-inset-left))!important;
    right:auto!important;
    top:calc(max(10px,env(safe-area-inset-top)) + 52px)!important;
    bottom:auto!important;
  }
}

/* Desktop Zen: the magnifier sits directly above the existing Full Screen/Exit icon. */
@media (min-width:761px) and (hover:hover) and (pointer:fine){
  body.desktop-zen-mode .zen-zoom-btn{
    right:max(18px,env(safe-area-inset-right));
    bottom:72px;
  }
  body.desktop-zen-mode .zen-camera-mode-btn{
    right:calc(max(18px,env(safe-area-inset-right)) + 56px);
    bottom:72px;
  }
}

/* BOXXY v352 — level-pack discovery and wardrobe access without adding gameplay clutter. */
.settings-attire-link{
  margin-top:12px;
}
.settings-attire-icon{
  width:30px;
  height:30px;
  display:grid!important;
  place-items:center;
  font-size:0!important;
  line-height:0!important;
}
.settings-attire-icon .style-outfit-icon{
  width:27px;
  height:27px;
}

.level-picker #levelButtons .explore-packs-option{
  grid-column:1/-1;
  min-width:0;
  min-height:34px;
  height:34px;
  padding:0 9px 0 11px;
  border:2px solid var(--blue);
  background:#eef3f5;
  color:var(--ink);
  box-shadow:2px 2px 0 rgba(54,107,126,.24);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  text-align:left;
}
.level-picker #levelButtons .explore-packs-option strong{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:9px;
  font-weight:1000;
  letter-spacing:.07em;
  line-height:1;
}
.level-picker #levelButtons .explore-packs-option span{
  flex:none;
  width:24px;
  height:22px;
  display:grid;
  place-items:center;
  background:var(--blue);
  color:#fff;
  font-size:15px;
  font-weight:1000;
  line-height:1;
}
.level-picker #levelButtons .explore-packs-option:hover,
.level-picker #levelButtons .explore-packs-option:focus-visible{
  background:#e3edf0;
}

/* The Levels header no longer carries an Attire control on phones. */
@media(max-width:760px){
  .level-picker-head{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto auto;
  }
  .level-picker-head > #levelPickerTitle{grid-column:1}
  .collection-complete-star{grid-column:2}
  .level-picker-tools{
    grid-column:3;
    display:flex;
    align-items:center;
    margin-left:0;
  }
  .level-close{
    grid-column:auto;
    position:static;
    right:auto;
    top:auto;
    transform:none;
  }
  .settings-attire-link{margin-top:10px}
}
@media(max-width:380px){
  .level-picker-head{
    grid-template-columns:minmax(0,1fr) 31px 36px;
  }
}


/* BOXXY v353 — current outfit preview leads the Menu → Style section. */
.settings-attire-link{
  position:relative;
  min-height:108px;
  margin:0 0 12px;
  padding:0;
  overflow:hidden;
  display:block;
  text-align:left;
}
.settings-attire-link > b{
  position:absolute;
  left:11px;
  top:10px;
  z-index:2;
  font-size:9px;
  letter-spacing:.08em;
}
.settings-attire-link > i{
  position:absolute;
  right:11px;
  top:8px;
  z-index:2;
  font-style:normal;
  font-size:18px;
  line-height:1;
}
.settings-attire-preview{
  position:absolute;
  left:50%;
  top:50%;
  width:82px;
  height:88px;
  transform:translate(-50%,-46%);
  display:flex!important;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  pointer-events:none;
  font-size:0!important;
  line-height:0!important;
}
.settings-attire-preview canvas{
  display:block;
  width:auto;
  height:104px;
  max-width:none;
  flex:none;
  transform:translateY(-12%);
  transform-origin:center center;
}
.settings-attire-link:hover,
.settings-attire-link:focus-visible{
  background:#fffaf1;
}
@media(max-width:760px){
  .settings-attire-link{min-height:102px;margin:0 0 10px}
  .settings-attire-preview{width:78px;height:82px}
  .settings-attire-preview canvas{height:98px}
}
@media(max-height:520px) and (orientation:landscape){
  .settings-attire-link{min-height:88px;margin-bottom:8px}
  .settings-attire-preview{width:68px;height:72px}
  .settings-attire-preview canvas{height:86px}
}


/* BOXXY v358 — the red quote tile is an accessible next-thought control. */
.instruction .info{border:0;padding:0;font-family:Georgia,serif;cursor:pointer;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;user-select:none}
.instruction .info:hover{transform:translateY(-1px)}
.instruction .info:active{transform:translateY(1px)}
.instruction .info:focus-visible{outline:3px solid var(--ink);outline-offset:2px}


/* Phone direction buttons suppress native touch callouts and long-press selection. */
html.touch-ui .dpad {touch-action:manipulation;-webkit-touch-callout:none}
html.touch-ui .dpad button {touch-action:none;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}

/* BOXXY v403 — public player profiles and safe account bio editing. */
.account-bio-card{margin:12px 0;padding:11px;border:2px solid var(--ink);background:#f7f0e5;display:grid;gap:7px}
.account-bio-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.account-bio-head span{font-size:8px;font-weight:1000;letter-spacing:.1em;color:#71685e}
.account-bio-head strong{font-size:9px}.account-bio-head strong.is-over{color:var(--red)}
.account-bio-card>label{font-size:9px;font-weight:800;line-height:1.3;color:#4d4842}
.account-bio-card input{width:100%;box-sizing:border-box;border:2px solid var(--ink);background:#fff;padding:9px 10px;font:900 12px/1.2 inherit;color:var(--ink)}
.account-bio-actions{display:flex;align-items:center;justify-content:space-between;gap:10px}
.account-bio-actions small{font-size:7px;line-height:1.3;color:#71685e;font-weight:800}
.account-bio-actions button{border:2px solid var(--ink);background:var(--yellow);color:var(--ink);padding:8px 10px;font:1000 8px/1 inherit;letter-spacing:.08em;cursor:pointer;box-shadow:2px 2px 0 var(--ink)}
.account-bio-actions button:disabled{opacity:.45;cursor:default}

/* BOXXY v408 — public profile layout: identity is top-anchored and independent of bio editing. */
.player-profile-modal{z-index:18000;padding:24px;background:rgba(23,23,25,.67);backdrop-filter:blur(8px)}
.player-profile-card{position:relative;width:min(570px,calc(100vw - 48px));max-height:calc(100dvh - 48px);overflow:auto;border:2px solid var(--ink);border-radius:18px;background:#f7f0e5;box-shadow:8px 8px 0 rgba(23,23,25,.28)}
.player-profile-titlebar{position:sticky;top:0;z-index:4;min-height:38px;padding:7px 9px 7px 14px;border-bottom:2px solid var(--ink);border-radius:15px 15px 0 0;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:12px}
.player-profile-titlebar>span{font-size:11px;font-weight:1000;letter-spacing:.13em}
.player-profile-close{position:relative;flex:none;width:30px;height:30px;padding:0;border:0;border-radius:0;background:transparent;color:#fff;cursor:pointer}
.player-profile-close::before,.player-profile-close::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:2px;border-radius:2px;background:currentColor;transform-origin:center}
.player-profile-close::before{transform:translate(-50%,-50%) rotate(45deg)}
.player-profile-close::after{transform:translate(-50%,-50%) rotate(-45deg)}
.player-profile-close:hover{opacity:.78}
.player-profile-close:focus-visible{outline:2px solid #fff;outline-offset:1px;border-radius:5px}
.player-profile-hero{display:grid;grid-template-columns:166px minmax(0,1fr);gap:18px;align-items:start;padding:19px;background:#fff7d8;border-bottom:2px solid rgba(23,23,25,.18)}
.player-profile-avatar-stage{width:166px;height:166px;border-radius:50%;background:var(--yellow);display:grid;place-items:center;overflow:hidden;justify-self:center;align-self:start;box-shadow:inset 0 0 0 2px rgba(0,0,0,.1)}
.player-profile-hero canvas{display:block;width:100%;height:100%;max-width:100%;transform:none;image-rendering:auto}
.player-profile-copy{min-width:0;align-self:start}
.player-profile-name-row{display:flex;align-items:center;gap:8px;min-width:0;flex-wrap:nowrap}
.player-profile-copy h2{min-width:0;margin:0;font-size:clamp(27px,5vw,38px);line-height:.94;letter-spacing:-.045em;overflow-wrap:anywhere}
.player-profile-bio-row{display:grid;grid-template-columns:minmax(0,1fr);align-items:center;gap:5px;margin-top:15px;min-height:40px;position:relative}
.player-profile-bio{width:fit-content;max-width:100%;min-width:0;margin:0;font-size:14px;line-height:1.38;font-weight:800;font-style:italic;color:#4d4842;overflow-wrap:anywhere}
.player-profile-bio-emoji{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;font-style:normal;font-weight:400}
.player-profile-bio.is-placeholder{color:#8a8177;font-weight:750}
.player-profile-bio.is-editable{cursor:pointer}
.player-profile-bio.is-editable:hover{color:#2f2a25}
.player-profile-bio.is-editable:focus-visible{outline:2px dotted rgba(23,23,25,.52);outline-offset:3px;border-radius:4px}
.player-profile-bio-edit{justify-self:start;margin:0;border:0!important;background:transparent!important;box-shadow:none!important;color:#71685e;padding:1px 0;font:1000 7px/1 inherit;letter-spacing:.08em;text-decoration:none;cursor:pointer}
.player-profile-bio-edit:hover,.player-profile-bio-edit:focus{text-decoration:none;color:var(--ink)}
.player-profile-bio-form{position:absolute;inset:0;width:100%;min-width:0;margin:0;padding:0;border:0;border-radius:0;background:transparent;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:5px}
.player-profile-bio-form[hidden]{display:none}
.player-profile-bio-form label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.player-profile-bio-form input{min-width:0;padding:7px 8px;border:1px solid rgba(23,23,25,.55);border-radius:8px;background:#fff;font:900 12px/1.2 inherit;color:var(--ink)}
.player-profile-bio-form-actions{display:flex;align-items:center;justify-content:flex-end;min-width:max-content;gap:4px}
.player-profile-bio-form-actions span{margin-right:0;font-size:7px;font-weight:900;color:#71685e}
.player-profile-bio-form-actions span.is-over{color:var(--red)}
.player-profile-bio-form-actions button{border:1px solid var(--ink);border-radius:7px;background:#ece4d7;color:var(--ink);padding:6px;font:1000 7px/1 inherit;letter-spacing:.05em;cursor:pointer}
.player-profile-bio-form-actions button[type="submit"]{background:var(--yellow)}
.player-profile-bio-form-actions button:disabled{opacity:.45;cursor:default}
.player-profile-location-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:5px;margin-top:6px;min-height:24px;position:relative}
.player-profile-location-row[hidden]{display:none}
.player-profile-location{justify-self:start;max-width:100%;margin:0;padding:1px 0;border:0!important;background:transparent!important;box-shadow:none!important;color:#655e56;font-family:inherit;font-size:10px;font-weight:850;line-height:1.25;text-align:left;cursor:default;display:inline-flex;align-items:center;gap:5px}
.player-profile-location-flag{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;font-size:1.18em;font-weight:400;line-height:1;flex:none}
.player-profile-location.is-placeholder{color:#8a8177}
.player-profile-location.is-editable{cursor:pointer}
.player-profile-location:disabled{opacity:1;-webkit-text-fill-color:currentColor}
.player-profile-location.is-editable:hover,.player-profile-location.is-editable:focus{color:var(--ink)}
.player-profile-location:focus-visible{outline:2px dotted rgba(23,23,25,.52);outline-offset:3px;border-radius:4px}
.player-profile-location-edit{justify-self:start;margin:0;border:0!important;background:transparent!important;box-shadow:none!important;color:#71685e;padding:1px 0;font:1000 7px/1 inherit;letter-spacing:.08em;text-decoration:none;cursor:pointer}
.player-profile-location-edit:hover,.player-profile-location-edit:focus{text-decoration:none;color:var(--ink)}
.player-profile-location-form{grid-column:1/-1;width:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px 7px;margin:1px 0 0;padding:0;border:0;background:transparent}
.player-profile-location-form[hidden]{display:none}
.player-profile-location-form label{min-width:0;display:grid;gap:3px;color:#71685e;font-size:7px;font-weight:1000;letter-spacing:.06em}
.player-profile-location-form select{width:100%;min-width:0;padding:7px 24px 7px 7px;border:1px solid rgba(23,23,25,.55);border-radius:8px;background:#fff;color:var(--ink);font-family:inherit;font-size:9px;font-weight:850;line-height:1.2}
.player-profile-location-form select:disabled{opacity:.5}
.player-profile-location-form-actions{grid-column:1/-1;display:flex;align-items:center;justify-content:flex-start;gap:5px}
.player-profile-location-form-actions button{border:1px solid var(--ink);border-radius:7px;background:#ece4d7;color:var(--ink);padding:6px 8px;font:1000 7px/1 inherit;letter-spacing:.05em;cursor:pointer}
.player-profile-location-form-actions button[type="submit"]{background:var(--yellow)}
.player-profile-location-form-actions button:disabled{opacity:.45;cursor:default}
.player-profile-streak{position:relative;flex:none;align-self:center;--profile-streak-size:50px;width:calc(var(--profile-streak-size) * 163 / 208);height:var(--profile-streak-size);filter:drop-shadow(2px 2px 0 rgba(23,23,25,.24))}
.player-profile-streak-flame{position:absolute;inset:0;background-position:center;background-repeat:no-repeat;background-size:100% 100%}
.player-profile-streak-number{position:absolute;z-index:1;left:50%;top:67%;transform:translate(-50%,-50%);color:#fff;font-family:"Arial Black",Arial,sans-serif;font-weight:1000;line-height:1;letter-spacing:-.06em;text-align:center;text-shadow:-1px 0 0 rgba(10,17,20,.82),1px 0 0 rgba(10,17,20,.82),0 -1px 0 rgba(10,17,20,.82),0 1px 0 rgba(10,17,20,.82)}
.player-profile-streak[data-digits="1"] .player-profile-streak-number{font-size:calc(var(--profile-streak-size) * .36)}
.player-profile-streak[data-digits="2"] .player-profile-streak-number{font-size:calc(var(--profile-streak-size) * .31)}
.player-profile-streak[data-digits="3"] .player-profile-streak-number{font-size:calc(var(--profile-streak-size) * .265)}
.player-profile-streak[data-digits="4"] .player-profile-streak-number{font-size:calc(var(--profile-streak-size) * .23)}
.player-profile-streak[data-digits="5"] .player-profile-streak-number{font-size:calc(var(--profile-streak-size) * .20)}
.player-profile-streak[data-tier="zero"] .player-profile-streak-flame{background-image:url("assets/ui/streak-flames/streak-zero.png")}
.player-profile-streak[data-tier="yellow"] .player-profile-streak-flame{background-image:url("assets/ui/streak-flames/streak-yellow.png")}
.player-profile-streak[data-tier="orange"] .player-profile-streak-flame{background-image:url("assets/ui/streak-flames/streak-orange.png")}
.player-profile-streak[data-tier="red"] .player-profile-streak-flame{background-image:url("assets/ui/streak-flames/streak-red.png")}
.player-profile-streak[data-tier="green"] .player-profile-streak-flame{background-image:url("assets/ui/streak-flames/streak-green.png")}
.player-profile-streak[data-tier="purple"] .player-profile-streak-flame{background-image:url("assets/ui/streak-flames/streak-purple.png")}
.player-profile-streak[data-tier="blue"] .player-profile-streak-flame{background-image:url("assets/ui/streak-flames/streak-blue.png")}
.player-profile-streak[data-tier="black"] .player-profile-streak-flame{background-image:url("assets/ui/streak-flames/streak-black.png")}
.player-profile-stats{display:grid;grid-template-columns:1fr 1fr;gap:11px;padding:14px}
.player-profile-stat{min-width:0;min-height:88px;padding:13px 14px;border:2px solid var(--ink);border-radius:13px;background:#fff;display:flex;flex-direction:column;justify-content:center;gap:7px;box-shadow:3px 3px 0 rgba(23,23,25,.13)}
.player-profile-stat-levels{border-top:6px solid var(--red)}
.player-profile-stat-dailys{border-top:6px solid var(--blue)}
.player-profile-stat-moves{border-top:6px solid var(--yellow)}
.player-profile-stat-pushes{border-top:6px solid #4c9c61}
.player-profile-stat span,.player-profile-section-label{font-size:10px;font-weight:1000;letter-spacing:.075em;color:#71685e;line-height:1.2}
.player-profile-stat strong{font-size:clamp(25px,6vw,34px);line-height:1;font-weight:1000;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.player-profile-trophies-card{margin:0 14px 14px;padding:13px 14px 14px;border:2px solid var(--ink);border-radius:13px;background:#eef4fb;box-shadow:3px 3px 0 rgba(23,23,25,.13)}
.player-profile-trophies{display:flex;align-items:center;flex-wrap:wrap;gap:9px;min-height:46px;margin-top:9px;overflow:visible}
.player-profile-trophy{--pack-star-colour:var(--yellow);position:relative;width:43px;height:43px;display:grid;place-items:center;flex:none;filter:drop-shadow(2px 2px 0 rgba(23,23,25,.22));cursor:pointer;outline:none}
.player-profile-trophy svg,.player-profile-trophy img{display:block;width:100%;height:100%;object-fit:contain}
.player-profile-trophy svg{fill:var(--pack-star-colour);stroke:var(--ink);stroke-width:3}
.player-profile-trophy:focus-visible{outline:2px dotted rgba(23,23,25,.55);outline-offset:3px;border-radius:5px}
.player-profile-trophy::after{content:attr(data-tooltip);position:absolute;z-index:30;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%) translateY(3px);width:max-content;max-width:min(220px,72vw);padding:6px 8px;border:1px solid var(--ink);border-radius:7px;background:var(--ink);color:#fff;font:900 9px/1.2 inherit;letter-spacing:.025em;text-align:center;white-space:normal;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .12s ease,transform .12s ease;filter:none;box-shadow:2px 2px 0 rgba(23,23,25,.18)}
.player-profile-trophy::before{content:"";position:absolute;z-index:31;left:50%;bottom:calc(100% + 3px);transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--ink);opacity:0;visibility:hidden;pointer-events:none}
.player-profile-trophy:hover::after,.player-profile-trophy:focus::after,.player-profile-trophy.is-tooltip-open::after{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.player-profile-trophy:hover::before,.player-profile-trophy:focus::before,.player-profile-trophy.is-tooltip-open::before{opacity:1;visibility:visible}
.player-profile-trophy-empty{font-size:11px;font-weight:850;color:#71685e}
.player-profile-status{margin:0 14px 14px;padding:9px 11px;border-radius:9px;background:#fff;font-size:10px;line-height:1.35;font-weight:900;color:#71685e}
.player-profile-status[data-state="error"]{background:#fde9e5;color:#a52a1d}
.player-profile-status[data-state="success"]{background:#e7f5e9;color:#246d36}
@media(max-width:620px){
  .account-bio-actions{align-items:flex-end}
  .player-profile-modal{padding:18px}
  .player-profile-card{width:calc(100vw - 36px);max-height:calc(100dvh - 36px);border-radius:15px}
  .player-profile-titlebar{border-radius:12px 12px 0 0}
  .player-profile-hero{grid-template-columns:1fr;gap:10px;padding:14px 16px 15px;align-items:start}
  .player-profile-avatar-stage{width:108px;height:108px}
  .player-profile-hero canvas{width:100%;height:100%;transform:none}
  .player-profile-copy{width:100%;min-width:0;padding:10px 2px 0;border-top:1px solid rgba(23,23,25,.22)}
  .player-profile-name-row{width:100%;justify-content:flex-start;align-items:center;gap:6px}
  .player-profile-copy h2{font-size:clamp(18px,6vw,24px);line-height:1;letter-spacing:-.035em;white-space:nowrap;overflow-wrap:normal;word-break:normal}
  .player-profile-streak{--profile-streak-size:31px}
  .player-profile-bio-row{margin-top:13px}
  .player-profile-bio{font-size:12.5px}
  .player-profile-bio-form{grid-template-columns:minmax(0,1fr) auto;gap:4px}
  .player-profile-bio-form input{padding:6px 7px;font-size:11px}
  .player-profile-bio-form-actions{gap:3px}
  .player-profile-bio-form-actions span{font-size:6.5px}
  .player-profile-bio-form-actions button{padding:5px;font-size:6.5px}
  .player-profile-location-row{margin-top:5px}
  .player-profile-location{font-size:9.5px}
  .player-profile-location-form{grid-template-columns:1fr;gap:6px}
  .player-profile-location-form-actions{grid-column:1}
  .player-profile-stats{gap:8px;padding:11px}
  .player-profile-stat{min-height:76px;padding:10px 11px}
  .player-profile-stat span,.player-profile-section-label{font-size:9px}
  .player-profile-stat strong{font-size:clamp(22px,8vw,29px)}
  .player-profile-trophies-card{margin:0 11px 11px;padding:11px}
  .player-profile-trophy{width:39px;height:39px}
}
@media(max-width:380px){
  .player-profile-modal{padding:14px}
  .player-profile-card{width:calc(100vw - 28px);max-height:calc(100dvh - 28px)}
  .player-profile-hero{grid-template-columns:1fr;gap:9px;padding:11px 13px 13px;align-items:start}
  .player-profile-avatar-stage{width:96px;height:96px}
  .player-profile-hero canvas{width:100%;height:100%;transform:none}
  .player-profile-copy h2{font-size:clamp(17px,5.8vw,21px)}
  .player-profile-name-row{align-items:center}
  .player-profile-streak{--profile-streak-size:31px}
  .player-profile-bio-form-actions span{display:none}
  .player-profile-stats{grid-template-columns:1fr 1fr;gap:7px;padding:9px}
  .player-profile-stat{padding:9px;min-height:70px}
  .player-profile-stat span{font-size:8.5px}
  .player-profile-stat strong{font-size:22px}
  .player-profile-trophies-card{margin:0 9px 9px}
}

/* BOXXY v428 — permanent Daily Fastest Times gold medals. */
.daily-gold-medal-badge{
  appearance:none;
  position:relative;
  width:var(--header-badge-size);
  height:var(--header-badge-size);
  flex:none;
  padding:0;
  border:0;
  background:transparent;
  display:grid;
  place-items:center;
  overflow:visible;
  cursor:pointer;
  filter:drop-shadow(2px 2px 0 rgba(23,23,25,.24));
}
.daily-gold-medal-badge[hidden]{display:none!important}
.daily-gold-medal-emoji{display:block;font-size:calc(var(--header-badge-size,43px) * .88);line-height:1;font-style:normal;font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.daily-gold-medal-count{
  position:absolute;
  right:-4px;
  bottom:-3px;
  z-index:2;
  min-width:15px;
  height:15px;
  padding:0 3px;
  border:1px solid rgba(255,255,255,.92);
  border-radius:8px;
  background:var(--ink);
  color:#fff;
  display:grid;
  place-items:center;
  font:1000 7px/1 Arial,sans-serif;
  letter-spacing:-.04em;
  white-space:nowrap;
  box-shadow:1px 1px 0 rgba(23,23,25,.2);
}
.daily-gold-medal-count:empty{display:none}
.daily-gold-medal-badge:hover,.daily-gold-medal-badge:focus-visible{transform:translateY(-2px) scale(1.06);outline:0}
.daily-gold-medal-badge:active{transform:translateY(1px) scale(.97)}
.daily-gold-medal-visual{position:relative;overflow:visible}
.daily-gold-medal-visual .daily-gold-medal-emoji{font-size:calc(var(--cabinet-award-size,82px) * .88)}
.daily-gold-medal-visual .daily-gold-medal-count{right:-6px;bottom:1px;min-width:20px;height:20px;border-radius:11px;font-size:9px}
.player-profile-daily-gold{overflow:visible}
.player-profile-daily-gold .daily-gold-medal-emoji{font-size:38px}
.player-profile-daily-gold .daily-gold-medal-count{right:-5px;bottom:0}
@media(max-width:760px){
  /* On phones the pack awards live in the cabinet, not a reflowing badge rail. */
  .completed-pack-stars{display:none!important}
  .daily-gold-medal-badge{
    width:var(--daily-streak-badge-size,clamp(24px,6.8vw,29px));
    height:var(--daily-streak-badge-size,clamp(24px,6.8vw,29px));
    display:grid;
    place-items:center;
    filter:drop-shadow(1px 1px 0 rgba(23,23,25,.24));
  }
  .daily-gold-medal-badge .daily-gold-medal-emoji{
    font-size:calc(var(--daily-streak-badge-size,clamp(24px,6.8vw,29px)) * .9);
  }
  /* Keep the count over the medal, but a little smaller so two digits still read cleanly. */
  .daily-gold-medal-badge .daily-gold-medal-count{
    position:absolute;
    right:-3px;
    bottom:-2px;
    min-width:14px;
    height:14px;
    padding:0 2px;
    border:1px solid rgba(255,255,255,.92);
    border-radius:8px;
    background:var(--ink);
    color:#fff;
    box-shadow:1px 1px 0 rgba(23,23,25,.2);
    font:1000 6px/1 Arial,sans-serif;
    letter-spacing:-.04em;
  }
}
@media(max-width:390px){
  .daily-gold-medal-badge{
    width:24px;
    height:24px;
  }
  .daily-gold-medal-badge .daily-gold-medal-emoji{font-size:21px}
  .daily-gold-medal-badge .daily-gold-medal-count{
    min-width:13px;
    height:13px;
    font-size:5.7px;
    right:-2px;
    bottom:-2px;
  }
}

/* BOXXY v435 — desktop tools are an independent slide-over tray above the map; fixed header/footer chrome never participates. */
.desktop-utility-toggle,
.desktop-board-actions,
.desktop-rail-nav,
.desktop-rail-extra{display:none}
.desktop-utility-tray{display:contents}
.side-panel-head{display:contents}

.style-board-colours{
  margin-top:16px;
  padding:14px;
  border:2px solid var(--ink);
  border-radius:12px;
  background:linear-gradient(135deg,#fffaf1,#eee3d4);
  box-shadow:4px 4px 0 rgba(23,23,25,.12);
}
.style-board-colours-head{display:flex;align-items:end;justify-content:space-between;gap:14px;margin-bottom:11px}
.style-board-colours-head h3{margin:0;font-size:14px;line-height:1;letter-spacing:.06em}
.style-board-colours-head .style-kicker{margin:0;font-size:9px;white-space:nowrap}
.style-board-style{grid-template-columns:1fr 1fr}
.style-board-style .settings-board-style-row{background:#fffaf1;border-color:#b7aa99}

@media(max-width:760px){
  .style-board-colours{margin-top:12px;padding:11px;border-radius:10px}
  .style-board-colours-head{display:block;margin-bottom:9px}
  .style-board-colours-head h3{margin-top:5px;font-size:12px}
  .style-board-style{grid-template-columns:1fr}
}

@media (min-width:821px) and (pointer:fine){
  html:not(.touch-ui){
    --desktop-footer-height:clamp(52px,8dvh,76px);
    --desktop-palette-height:20px;
    --desktop-side-head-width:clamp(320px,24vw,380px);
    --desktop-utility-expanded:150px;
    --desktop-utility-collapsed-peek:15px;
    --desktop-utility-edge-gap:7px;
    --desktop-board-action-size:94px;
    --desktop-board-action-clearance:14px;
    --desktop-board-action-right:calc(var(--desktop-utility-expanded) + 14px);
  }

  /* The title/stats column, message bar, help button, legal/footer and colour strip are fixed chrome.
     Only the map and the independent utility tray occupy the middle row. */
  html:not(.touch-ui):not(.desktop-zen-mode) .app{
    grid-template-columns:minmax(0,1fr) var(--desktop-side-head-width);
    overflow:hidden;
  }
  html:not(.touch-ui):not(.desktop-zen-mode) .play-area{
    position:relative;
    z-index:1;
    overflow:visible;
    grid-template-rows:var(--desktop-head-height,clamp(92px,14dvh,132px)) minmax(0,1fr) var(--desktop-footer-height);
  }
  html:not(.touch-ui):not(.desktop-zen-mode) .masthead{
    position:relative;
    z-index:20;
    padding-right:clamp(22px,2.5vw,36px);
  }
  html:not(.touch-ui):not(.desktop-zen-mode) .instruction{
    position:relative;
    z-index:20;
    width:100%;
  }

  /* The board may use the full desktop canvas, but its fitted/centred area must stop before Undo/Restart.
     The same action-right variable moves those buttons and defines this safe edge, so collapsing the tray
     genuinely gives wide maps more room without allowing gameplay beneath the controls. */
  html:not(.touch-ui):not(.desktop-zen-mode) .board-wrap{
    position:relative;
    z-index:1;
    width:calc(100% + var(--desktop-side-head-width));
    max-width:none;
    padding-right:calc(var(--desktop-board-action-right) + var(--desktop-board-action-size) + var(--desktop-board-action-clearance));
    transition:padding-right .22s cubic-bezier(.2,.7,.3,1);
  }

  html:not(.touch-ui):not(.desktop-zen-mode) .side-panel{
    position:relative;
    z-index:30;
    min-width:0;
    min-height:0;
    overflow:visible;
    display:block;
    border-left:0;
    background:transparent;
    pointer-events:none;
  }
  html:not(.touch-ui):not(.desktop-zen-mode) .side-panel-head{
    position:absolute;
    z-index:70;
    inset:0 0 auto 0;
    width:100%;
    height:var(--desktop-head-height,clamp(92px,14dvh,132px));
    margin:0;
    display:grid;
    grid-template-rows:minmax(0,1fr) auto;
    overflow:hidden;
    border-left:2px solid var(--ink);
    border-bottom:1px solid var(--line);
    background:rgba(249,244,235,.98);
    pointer-events:auto;
  }
  html:not(.touch-ui):not(.desktop-zen-mode) .side-panel-head .credit{
    min-height:0;
    padding:10px 14px 7px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    border-bottom:1px solid var(--line);
  }
  html:not(.touch-ui):not(.desktop-zen-mode) .side-panel-head .credit strong{
    font-size:clamp(13px,1.05vw,17px);
    line-height:1.02;
    white-space:normal;
    overflow:hidden;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
  }
  html:not(.touch-ui):not(.desktop-zen-mode) .side-panel-head .credit span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  html:not(.touch-ui):not(.desktop-zen-mode) .side-panel-head .stats{border-bottom:0}
  html:not(.touch-ui):not(.desktop-zen-mode) .side-panel-head .stats>div,
  html:not(.touch-ui):not(.desktop-zen-mode) .side-panel-head .stats .time{padding:6px 2px}
  html:not(.touch-ui):not(.desktop-zen-mode) .side-panel-head .stats strong{font-size:clamp(15px,2.2dvh,22px)}
  html:not(.touch-ui):not(.desktop-zen-mode) .side-panel-head .stats .time strong{font-size:clamp(11px,1.7dvh,17px)}

  /* Independent slide-over tray: flush with the right edge, rounded only where it enters the map. */
  html:not(.touch-ui):not(.desktop-zen-mode) .desktop-utility-tray{
    position:absolute;
    z-index:45;
    top:calc(var(--desktop-head-height,clamp(92px,14dvh,132px)) + var(--desktop-utility-edge-gap));
    right:0;
    bottom:calc(var(--desktop-footer-height) + var(--desktop-utility-edge-gap));
    width:var(--desktop-utility-expanded);
    padding:11px 8px;
    border:1px solid var(--line);
    border-right:0;
    border-radius:10px 0 0 10px;
    background:linear-gradient(90deg,rgba(229,179,42,.20),rgba(247,240,229,.82) 24%,rgba(247,240,229,.96));
    box-shadow:-4px 4px 12px rgba(55,38,20,.08);
    display:grid;
    grid-template-columns:repeat(2,58px);
    grid-template-rows:repeat(6,58px) minmax(0,1fr) 58px;
    justify-content:center;
    align-content:stretch;
    gap:8px;
    overflow:visible;
    pointer-events:auto;
    transform:translateX(0);
    transition:transform .22s cubic-bezier(.2,.7,.3,1);
  }

  html:not(.touch-ui):not(.desktop-zen-mode) .desktop-utility-toggle{
    position:absolute;
    z-index:80;
    left:-15px;
    top:50%;
    transform:translateY(-50%);
    width:15px;
    height:87px;
    padding:0;
    border:1px solid var(--ink);
    border-radius:6px 0 0 6px;
    background:#f2e8d8;
    color:var(--ink);
    display:grid;
    place-items:center;
    box-shadow:-1px 2px 4px rgba(55,38,20,.08);
  }
  html:not(.touch-ui):not(.desktop-zen-mode) .desktop-utility-toggle:hover{background:#fff7ea}
  html:not(.touch-ui):not(.desktop-zen-mode) .desktop-utility-toggle:active{transform:translateY(-50%)}
  html:not(.touch-ui):not(.desktop-zen-mode) .desktop-utility-toggle-icon{
    width:6px;
    height:44px;
    border-left:1px solid currentColor;
    border-right:1px solid currentColor;
    font-size:0;
    line-height:0;
    opacity:.58;
  }
  html:not(.touch-ui):not(.desktop-zen-mode) .desktop-utility-toggle b{
    position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;
    overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important;
  }

  html:not(.touch-ui):not(.desktop-zen-mode) .desktop-utility-tray>.top-actions,
  html:not(.touch-ui):not(.desktop-zen-mode) .desktop-utility-tray>.move-zone,
  html:not(.touch-ui):not(.desktop-zen-mode) .desktop-utility-tray>.bottom-actions,
  html:not(.touch-ui):not(.desktop-zen-mode) .desktop-utility-tray>.desktop-rail-nav,
  html:not(.touch-ui):not(.desktop-zen-mode) .desktop-utility-tray>.desktop-rail-extra{display:contents}
  html:not(.touch-ui):not(.desktop-zen-mode) .desktop-utility-tray .top-actions #undoBtn,
  html:not(.touch-ui):not(.desktop-zen-mode) .desktop-utility-tray .top-actions #restartBtn,
  html:not(.touch-ui):not(.desktop-zen-mode) .desktop-utility-tray .move-zone .dpad{display:none!important}

  /* Fixed two-column order: Save/Style, Levels/Packs, Prev/Next, Music/Audio, Profile/History, Daily/Trophies; Menu/Full Screen anchored at the bottom. */
  html:not(.touch-ui):not(.desktop-zen-mode) #savePositionBtn{grid-column:1;grid-row:1}
  html:not(.touch-ui):not(.desktop-zen-mode) #styleBtn{grid-column:2;grid-row:1}
  html:not(.touch-ui):not(.desktop-zen-mode) #levelBtn{grid-column:1;grid-row:2}
  html:not(.touch-ui):not(.desktop-zen-mode) #desktopPacksBtn{grid-column:2;grid-row:2}
  html:not(.touch-ui):not(.desktop-zen-mode) #desktopPrevLevelBtn{grid-column:1;grid-row:3}
  html:not(.touch-ui):not(.desktop-zen-mode) #desktopNextLevelBtn{grid-column:2;grid-row:3}
  html:not(.touch-ui):not(.desktop-zen-mode) #desktopMusicBtn{grid-column:1;grid-row:4}
  html:not(.touch-ui):not(.desktop-zen-mode) #desktopAudioBtn{grid-column:2;grid-row:4}
  html:not(.touch-ui):not(.desktop-zen-mode) #desktopProfileBtn{grid-column:1;grid-row:5}
  html:not(.touch-ui):not(.desktop-zen-mode) #desktopHistoryBtn{grid-column:2;grid-row:5}
  html:not(.touch-ui):not(.desktop-zen-mode) #desktopDailyBtn{grid-column:1;grid-row:6}
  html:not(.touch-ui):not(.desktop-zen-mode) #desktopTrophiesBtn{grid-column:2;grid-row:6}
  html:not(.touch-ui):not(.desktop-zen-mode) #settingsBtn{grid-column:1;grid-row:8}
  html:not(.touch-ui):not(.desktop-zen-mode) #fullscreenBtn{grid-column:2;grid-row:8}

  html:not(.touch-ui):not(.desktop-zen-mode) .desktop-utility-tray .bottom-actions .action.small,
  html:not(.touch-ui):not(.desktop-zen-mode) .desktop-utility-tray .desktop-rail-nav .action.small,
  html:not(.touch-ui):not(.desktop-zen-mode) .desktop-utility-tray .desktop-rail-extra .action.small{display:flex!important}
  html:not(.touch-ui):not(.desktop-zen-mode) .desktop-utility-tray .action,
  html:not(.touch-ui):not(.desktop-zen-mode) .desktop-utility-tray .attire-action{
    position:relative;
    z-index:1;
    width:58px;
    height:58px;
    max-width:58px;
    min-height:58px;
    padding:5px;
    border:1px solid var(--line);
    border-radius:7px;
    background:#f8f1e6;
    color:var(--ink);
    box-shadow:0 2px 5px rgba(55,38,20,.065);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
  }
  html:not(.touch-ui):not(.desktop-zen-mode) .desktop-utility-tray .action:hover,
  html:not(.touch-ui):not(.desktop-zen-mode) .desktop-utility-tray .attire-action:hover{background:#fff8ed;transform:translateY(-1px)}
  html:not(.touch-ui):not(.desktop-zen-mode) .desktop-utility-tray .action:active,
  html:not(.touch-ui):not(.desktop-zen-mode) .desktop-utility-tray .attire-action:active{transform:translateY(1px)}
  html:not(.touch-ui):not(.desktop-zen-mode) .desktop-utility-tray .action:disabled{
    color:#958b7d;
    background:#e5ddd2;
    border-color:#cbc1b4;
    box-shadow:none;
    cursor:default;
    transform:none;
    opacity:.72;
  }
  html:not(.touch-ui):not(.desktop-zen-mode) .desktop-utility-tray .action.save-position{background:linear-gradient(#f4e2a7,#e5b32a);border-color:#b98b12}
  html:not(.touch-ui):not(.desktop-zen-mode) .desktop-utility-tray .action[aria-pressed="false"]{opacity:.58}
  html:not(.touch-ui):not(.desktop-zen-mode) .desktop-utility-tray .action span,
  html:not(.touch-ui):not(.desktop-zen-mode) .desktop-utility-tray .action.small span{font-size:21px;line-height:1}
  html:not(.touch-ui):not(.desktop-zen-mode) .desktop-utility-tray .action b,
  html:not(.touch-ui):not(.desktop-zen-mode) .desktop-utility-tray .action.small b,
  html:not(.touch-ui):not(.desktop-zen-mode) .desktop-utility-tray .attire-action b{
    max-width:52px;
    font-size:6.7px!important;
    line-height:.98!important;
    white-space:normal!important;
    overflow-wrap:normal!important;
    text-align:center;
    letter-spacing:.02em;
  }
  html:not(.touch-ui):not(.desktop-zen-mode) .desktop-utility-tray .attire-action .style-outfit-icon{width:25px;height:25px}
  html:not(.touch-ui):not(.desktop-zen-mode) .desktop-utility-tray .fullscreen-action b{max-width:52px!important}

  /* Purpose-built rail icons: Indi, the BOXXY Originals star, and the player's live Daily streak flame. */
  html:not(.touch-ui):not(.desktop-zen-mode) .desktop-profile-indi{
    width:34px!important;
    height:34px!important;
    flex:none;
    display:block;
    background-image:url("assets/characters/boy/base.png");
    background-repeat:no-repeat;
    background-size:242px 157px;
    background-position:-13px -18px;
  }
  html:not(.touch-ui):not(.desktop-zen-mode) .desktop-trophy-star{width:31px!important;height:31px!important;display:block;filter:drop-shadow(1px 1px 0 rgba(23,23,25,.24))}
  html:not(.touch-ui):not(.desktop-zen-mode) .desktop-trophy-star svg{display:block;width:100%;height:100%;overflow:visible}
  html:not(.touch-ui):not(.desktop-zen-mode) .desktop-trophy-star path{fill:var(--red);stroke:#f2c121;stroke-width:9;stroke-linejoin:round;paint-order:stroke fill}
  html:not(.touch-ui):not(.desktop-zen-mode) .desktop-daily-streak-icon{
    position:relative;
    width:27px!important;
    height:34px!important;
    flex:none;
    display:block;
    filter:drop-shadow(1px 1px 0 rgba(23,23,25,.24));
  }
  html:not(.touch-ui):not(.desktop-zen-mode) .desktop-daily-streak-flame{position:absolute;inset:0;background-position:center;background-repeat:no-repeat;background-size:100% 100%;pointer-events:none}
  html:not(.touch-ui):not(.desktop-zen-mode) .desktop-daily-streak-icon em{
    position:absolute;z-index:1;left:50%;top:67%;transform:translate(-50%,-50%);
    color:#fff;font-family:"Arial Black",Arial,sans-serif;font-style:normal;font-weight:1000;line-height:1;letter-spacing:-.06em;
    text-align:center;white-space:nowrap;pointer-events:none;
    text-shadow:-1px 0 0 rgba(10,17,20,.82),1px 0 0 rgba(10,17,20,.82),0 -1px 0 rgba(10,17,20,.82),0 1px 0 rgba(10,17,20,.82);
  }
  html:not(.touch-ui):not(.desktop-zen-mode) .desktop-daily-streak-icon[data-digits="1"] em{font-size:12px}
  html:not(.touch-ui):not(.desktop-zen-mode) .desktop-daily-streak-icon[data-digits="2"] em{font-size:10.5px}
  html:not(.touch-ui):not(.desktop-zen-mode) .desktop-daily-streak-icon[data-digits="3"] em{font-size:9px}
  html:not(.touch-ui):not(.desktop-zen-mode) .desktop-daily-streak-icon[data-digits="4"] em{font-size:8px}
  html:not(.touch-ui):not(.desktop-zen-mode) .desktop-daily-streak-icon[data-digits="5"] em{font-size:7px}
  html:not(.touch-ui):not(.desktop-zen-mode) .desktop-daily-streak-icon[data-tier="zero"] .desktop-daily-streak-flame{background-image:url("assets/ui/streak-flames/streak-zero.png")}
  html:not(.touch-ui):not(.desktop-zen-mode) .desktop-daily-streak-icon[data-tier="green"] .desktop-daily-streak-flame{background-image:url("assets/ui/streak-flames/streak-green.png")}
  html:not(.touch-ui):not(.desktop-zen-mode) .desktop-daily-streak-icon[data-tier="blue"] .desktop-daily-streak-flame{background-image:url("assets/ui/streak-flames/streak-blue.png")}
  html:not(.touch-ui):not(.desktop-zen-mode) .desktop-daily-streak-icon[data-tier="red"] .desktop-daily-streak-flame{background-image:url("assets/ui/streak-flames/streak-red.png")}
  html:not(.touch-ui):not(.desktop-zen-mode) .desktop-daily-streak-icon[data-tier="fire"] .desktop-daily-streak-flame{background-image:url("assets/ui/streak-flames/streak-fire.png")}
  html:not(.touch-ui):not(.desktop-zen-mode) .desktop-daily-streak-icon[data-tier="purple"] .desktop-daily-streak-flame{background-image:url("assets/ui/streak-flames/streak-purple.png")}
  html:not(.touch-ui):not(.desktop-zen-mode) .desktop-daily-streak-icon[data-tier="silver"] .desktop-daily-streak-flame{background-image:url("assets/ui/streak-flames/streak-silver.png")}
  html:not(.touch-ui):not(.desktop-zen-mode) .desktop-daily-streak-icon[data-qualified-today="false"] .desktop-daily-streak-flame{filter:grayscale(1);opacity:.38}
  html:not(.touch-ui):not(.desktop-zen-mode) .desktop-daily-streak-icon[data-qualified-today="false"] em{opacity:.72}
  html:not(.touch-ui):not(.desktop-zen-mode) .desktop-daily-streak-icon[data-tier="zero"] em{color:#176e24;text-shadow:-1px 0 0 rgba(255,255,255,.92),1px 0 0 rgba(255,255,255,.92),0 -1px 0 rgba(255,255,255,.92),0 1px 0 rgba(255,255,255,.92)}

  /* Collapse leaves one grip-width of the tray itself visible, plus the grip tab.
     Move the board-action boundary with it; board fitting reads the same value through board-wrap padding. */
  html:not(.touch-ui):not(.desktop-zen-mode) body.desktop-utility-collapsed{--desktop-board-action-right:calc(var(--desktop-utility-collapsed-peek) + 18px)}
  html:not(.touch-ui):not(.desktop-zen-mode) body.desktop-utility-collapsed .desktop-utility-tray{transform:translateX(calc(100% - var(--desktop-utility-collapsed-peek)))}
  html:not(.touch-ui):not(.desktop-zen-mode) body.desktop-utility-collapsed .desktop-utility-tray>.top-actions,
  html:not(.touch-ui):not(.desktop-zen-mode) body.desktop-utility-collapsed .desktop-utility-tray>.move-zone,
  html:not(.touch-ui):not(.desktop-zen-mode) body.desktop-utility-collapsed .desktop-utility-tray>.bottom-actions,
  html:not(.touch-ui):not(.desktop-zen-mode) body.desktop-utility-collapsed .desktop-utility-tray>.desktop-rail-nav,
  html:not(.touch-ui):not(.desktop-zen-mode) body.desktop-utility-collapsed .desktop-utility-tray>.desktop-rail-extra{visibility:hidden}
  html:not(.touch-ui):not(.desktop-zen-mode) body.desktop-utility-collapsed .desktop-utility-toggle{visibility:visible}

  /* Fixed bottom-right chrome: the five-colour strip and legal button never participate in tray movement. */
  html:not(.touch-ui):not(.desktop-zen-mode) .side-panel>.palette{
    position:absolute;
    z-index:70;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    height:var(--desktop-palette-height);
    margin:0;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    pointer-events:none;
  }
  html:not(.touch-ui):not(.desktop-zen-mode) .legal-link{
    right:max(8px,calc((100vw - 1600px)/2 + 8px));
    bottom:calc(var(--desktop-palette-height) + 6px);
  }
  html:not(.touch-ui):not(.desktop-zen-mode) .side-panel #levelPicker{pointer-events:auto}

  html:not(.touch-ui):not(.desktop-zen-mode) .desktop-board-actions{
    position:absolute;
    z-index:5200;
    top:14px;
    right:var(--desktop-board-action-right);
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:8px;
    pointer-events:auto;
    transition:right .22s cubic-bezier(.2,.7,.3,1);
  }
  html:not(.touch-ui):not(.desktop-zen-mode) .desktop-board-action{
    width:var(--desktop-board-action-size);
    min-width:var(--desktop-board-action-size);
    height:var(--desktop-board-action-size);
    padding:6px 10px;
    border:1px solid var(--line);
    border-radius:10px;
    background:rgba(248,241,230,.94);
    color:var(--ink);
    box-shadow:0 5px 12px rgba(37,26,15,.16);
    backdrop-filter:blur(3px);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    transition:transform .12s ease,box-shadow .12s ease;
  }
  html:not(.touch-ui):not(.desktop-zen-mode) .desktop-board-action span{font-size:32px;line-height:.9}
  html:not(.touch-ui):not(.desktop-zen-mode) .desktop-board-action b{font-size:9px;line-height:1;letter-spacing:.04em}
  html:not(.touch-ui):not(.desktop-zen-mode) .desktop-board-restart{order:1}
  html:not(.touch-ui):not(.desktop-zen-mode) .desktop-board-undo{order:2;background:rgba(219,59,39,.94);border-color:#a92d20;color:#fff}
  html:not(.touch-ui):not(.desktop-zen-mode) .desktop-board-action:hover{transform:translateY(-1px)}
  html:not(.touch-ui):not(.desktop-zen-mode) .desktop-board-action:active{transform:translateY(1px)}
  html:not(.touch-ui):not(.desktop-zen-mode) .desktop-board-action:disabled{opacity:.45;cursor:default;transform:none}

  @media (prefers-reduced-motion:reduce){
    html:not(.touch-ui):not(.desktop-zen-mode) .desktop-utility-tray,
    html:not(.touch-ui):not(.desktop-zen-mode) .desktop-board-actions{transition:none}
  }
}

@media (min-width:821px) and (pointer:fine) and (max-height:720px){
  html:not(.touch-ui){--desktop-footer-height:46px;--desktop-head-height:82px}
  html:not(.touch-ui):not(.desktop-zen-mode) .play-area{grid-template-rows:var(--desktop-head-height) minmax(0,1fr) var(--desktop-footer-height)}
  html:not(.touch-ui):not(.desktop-zen-mode) .side-panel-head{height:var(--desktop-head-height)}
  html:not(.touch-ui):not(.desktop-zen-mode) .side-panel-head .credit{padding:6px 10px 4px}
  html:not(.touch-ui):not(.desktop-zen-mode) .side-panel-head .credit strong{font-size:12px}
  html:not(.touch-ui):not(.desktop-zen-mode) .side-panel-head .credit span{font-size:7px}
  html:not(.touch-ui):not(.desktop-zen-mode) .side-panel-head .stats>div,
  html:not(.touch-ui):not(.desktop-zen-mode) .side-panel-head .stats .time{padding:3px 1px}
  html:not(.touch-ui):not(.desktop-zen-mode) .side-panel-head .stats strong{font-size:14px}
}

@media (min-width:821px) and (pointer:fine) and (max-height:520px) and (orientation:landscape){
  html:not(.touch-ui){--desktop-footer-height:28px;--desktop-head-height:52px}
  html:not(.touch-ui):not(.desktop-zen-mode) .desktop-utility-tray{gap:2px;padding-top:3px;padding-bottom:3px}
  html:not(.touch-ui):not(.desktop-zen-mode) .play-area{grid-template-rows:var(--desktop-head-height) minmax(0,1fr) var(--desktop-footer-height)}
  html:not(.touch-ui):not(.desktop-zen-mode) .side-panel-head{height:var(--desktop-head-height);grid-template-rows:1fr}
  html:not(.touch-ui):not(.desktop-zen-mode) .side-panel-head .credit{display:none}
  html:not(.touch-ui):not(.desktop-zen-mode) .side-panel-head .stats{height:100%}
  html:not(.touch-ui):not(.desktop-zen-mode) .side-panel-head .stats>div,
  html:not(.touch-ui):not(.desktop-zen-mode) .side-panel-head .stats .time{display:flex;flex-direction:column;justify-content:center;padding:1px}
  html:not(.touch-ui):not(.desktop-zen-mode) .side-panel-head .stats span{font-size:6px}
  html:not(.touch-ui):not(.desktop-zen-mode) .side-panel-head .stats strong{font-size:11px}
  html:not(.touch-ui):not(.desktop-zen-mode) .desktop-board-actions{top:7px}
}

@media (min-width:821px) and (pointer:fine){
  html:not(.touch-ui) body.desktop-zen-mode .desktop-board-actions{display:none!important}
}


/* BOXXY v469 — opt-in original v451 fixed arrow arrangement, scoped solely
   to phone Zen. Reuse the existing arrows and global Restart/Revert/Undo.
   The default movable keypad and non-Zen controls stay as they are. */
@media (max-width:760px) and (pointer:coarse),
       (max-height:520px) and (orientation:landscape) and (pointer:coarse) {
  body.phone-zen-mode.legacy-zen-arrows .side-panel {
    position:absolute!important;
    inset:0!important;
    z-index:60;
    display:block!important;
    width:100%!important;
    height:100%!important;
    padding:0!important;
    overflow:visible!important;
    border:0!important;
    box-shadow:none!important;
    background:transparent!important;
    pointer-events:none;
  }
  body.phone-zen-mode.legacy-zen-arrows .side-panel > :not(.desktop-utility-tray),
  body.phone-zen-mode.legacy-zen-arrows .desktop-utility-tray > :not(.top-actions):not(.move-zone) {
    display:none!important;
  }
  body.phone-zen-mode.legacy-zen-arrows .desktop-utility-tray {
    position:static!important;
    display:block!important;
    width:auto!important;
    height:auto!important;
    padding:0!important;
    border:0!important;
    background:none!important;
    transform:none!important;
    pointer-events:none;
  }
  body.phone-zen-mode.legacy-zen-arrows .desktop-utility-tray > .top-actions {
    position:absolute!important;
    inset:0!important;
    z-index:64;
    display:block!important;
    padding:0!important;
    border:0!important;
    background:none!important;
    pointer-events:none;
  }
  body.phone-zen-mode.legacy-zen-arrows .top-actions #savePositionBtn {display:none!important}
  body.phone-zen-mode.legacy-zen-arrows .top-actions #restartBtn,
  body.phone-zen-mode.legacy-zen-arrows .top-actions #undoBtn {
    display:flex!important;
    position:absolute!important;
    width:46px!important;
    height:46px!important;
    min-width:46px!important;
    min-height:46px!important;
    margin:0!important;
    padding:3px!important;
    border-radius:11px!important;
    pointer-events:auto;
    touch-action:none;
    box-shadow:0 5px 14px rgba(55,38,20,.14)!important;
  }
  body.phone-zen-mode.legacy-zen-arrows .top-actions #restartBtn {background:rgba(248,241,230,.92)}
  body.phone-zen-mode.legacy-zen-arrows .top-actions #undoBtn {background:linear-gradient(#e14b32,#c92e1f)}
  body.phone-zen-mode.legacy-zen-arrows .top-actions .action span {font-size:18px!important;line-height:1!important}
  body.phone-zen-mode.legacy-zen-arrows .top-actions .action b {font-size:7px!important;line-height:1!important}
  body.phone-zen-mode.legacy-zen-arrows .desktop-utility-tray > .move-zone {
    position:absolute!important;
    z-index:65;
    display:block!important;
    min-width:0!important;
    min-height:0!important;
    max-width:none!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
    pointer-events:none;
  }
  body.phone-zen-mode.legacy-zen-arrows .move-zone > .attire-action{display:none!important}
  body.phone-zen-mode.legacy-zen-arrows .dpad {
    display:grid!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    max-height:none!important;
    aspect-ratio:auto!important;
    grid-template-areas:'. up .' 'left down right'!important;
    padding:0!important;
    background:none!important;
    box-shadow:none!important;
    /* Empty grid cells must not cover the smaller Undo/Restart buttons. */
    pointer-events:none;
  }
  body.phone-zen-mode.legacy-zen-arrows .dpad button {
    min-width:0!important;
    min-height:0!important;
    aspect-ratio:1/1!important;
    border:2px solid rgba(23,23,25,.78)!important;
    border-radius:13px!important;
    background:rgba(248,241,230,.88)!important;
    backdrop-filter:blur(7px);
    box-shadow:0 7px 18px rgba(55,38,20,.2)!important;
    pointer-events:auto;
    touch-action:none;
  }
  body.phone-zen-mode.legacy-zen-arrows .dpad button svg {width:58%!important;height:58%!important}
}
/* BOXXY v470 — Legacy Arrow Keys restores v451's opt-in Spaced Arrows:
   widen LEFT/RIGHT gaps by 30–40px; keep the original vertical gap. */
@media (max-width:760px) and (pointer:coarse) and (orientation:portrait) {
  body.phone-zen-mode.legacy-zen-arrows {
    --legacy-arrow-size:min(23vw,92px,12.5dvh);
    --legacy-arrow-gap:8px;
    --legacy-horizontal-arrow-gap:clamp(30px,9vw,40px);
    --legacy-pad-width:calc(3 * var(--legacy-arrow-size) + 2 * var(--legacy-horizontal-arrow-gap));
    --legacy-pad-height:calc(2 * var(--legacy-arrow-size) + var(--legacy-arrow-gap));
    --legacy-pad-bottom:max(10px,env(safe-area-inset-bottom));
  }
  body.phone-zen-mode.legacy-zen-arrows .board-wrap {
    padding:max(8px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-right))
      calc(var(--legacy-pad-height) + var(--legacy-pad-bottom) + 14px)
      max(6px,env(safe-area-inset-left))!important;
  }
  body.phone-zen-mode.legacy-zen-arrows .move-zone {
    left:50%!important;right:auto!important;top:auto!important;
    bottom:var(--legacy-pad-bottom)!important;
    width:var(--legacy-pad-width)!important;height:var(--legacy-pad-height)!important;
    transform:translateX(-50%)!important;
  }
  body.phone-zen-mode.legacy-zen-arrows .dpad {
    grid-template-columns:repeat(3,var(--legacy-arrow-size))!important;
    grid-template-rows:repeat(2,var(--legacy-arrow-size))!important;
    column-gap:var(--legacy-horizontal-arrow-gap)!important;
    row-gap:var(--legacy-arrow-gap)!important;
  }
  body.phone-zen-mode.legacy-zen-arrows .dpad button {width:var(--legacy-arrow-size)!important;height:var(--legacy-arrow-size)!important}
  body.phone-zen-mode.legacy-zen-arrows .top-actions #restartBtn,
  body.phone-zen-mode.legacy-zen-arrows .top-actions #undoBtn {
    top:auto!important;
    bottom:calc(var(--legacy-pad-bottom) + var(--legacy-arrow-size) + var(--legacy-arrow-gap) + (var(--legacy-arrow-size) - 46px) / 2)!important;
  }
  body.phone-zen-mode.legacy-zen-arrows .top-actions #restartBtn {left:max(18px,env(safe-area-inset-left))!important;right:auto!important}
  body.phone-zen-mode.legacy-zen-arrows .top-actions #undoBtn {right:max(18px,env(safe-area-inset-right))!important;left:auto!important}
}
/* v451 landscape placement: fixed keys on the right, actions above them. */
@media (max-height:520px) and (orientation:landscape) and (pointer:coarse) {
  body.phone-zen-mode.legacy-zen-arrows {
    --legacy-arrow-size:min(12vw,104px,25dvh);
    --legacy-arrow-gap:9px;
    --legacy-pad-width:calc(3 * var(--legacy-arrow-size) + 2 * var(--legacy-arrow-gap));
    --legacy-pad-height:calc(2 * var(--legacy-arrow-size) + var(--legacy-arrow-gap));
    --legacy-pad-bottom:max(2px,env(safe-area-inset-bottom));
    --legacy-pad-right:max(14px,env(safe-area-inset-right));
  }
  body.phone-zen-mode.legacy-zen-arrows .board-wrap {
    padding:max(10px,env(safe-area-inset-top))
      calc(var(--legacy-pad-width) + 42px + env(safe-area-inset-right))
      max(10px,env(safe-area-inset-bottom))
      max(10px,env(safe-area-inset-left))!important;
  }
  body.phone-zen-mode.legacy-zen-arrows .move-zone {
    left:auto!important;right:var(--legacy-pad-right)!important;top:auto!important;
    bottom:var(--legacy-pad-bottom)!important;
    width:var(--legacy-pad-width)!important;height:var(--legacy-pad-height)!important;
    transform:none!important;
  }
  /* As in v451, landscape keeps the same pad/board reservation and
     redistributes the existing width into larger gaps and smaller square keys. */
  body.phone-zen-mode.legacy-zen-arrows .dpad {
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    grid-template-rows:repeat(2,max-content)!important;
    column-gap:clamp(30px,5vw,40px)!important;
    row-gap:var(--legacy-arrow-gap)!important;
    align-content:end!important;
  }
  body.phone-zen-mode.legacy-zen-arrows .dpad button {
    width:100%!important;
    height:auto!important;
    min-width:0!important;
    min-height:0!important;
    aspect-ratio:1/1!important;
    align-self:end!important;
  }
  body.phone-zen-mode.legacy-zen-arrows .top-actions #restartBtn,
  body.phone-zen-mode.legacy-zen-arrows .top-actions #undoBtn {
    top:max(12px,env(safe-area-inset-top))!important;bottom:auto!important;left:auto!important;
  }
  body.phone-zen-mode.legacy-zen-arrows .top-actions #restartBtn {right:calc(var(--legacy-pad-right) + var(--legacy-pad-width) - 46px)!important}
  body.phone-zen-mode.legacy-zen-arrows .top-actions #undoBtn {right:var(--legacy-pad-right)!important}
}

/* v472 — Monthly Daily medals and one-time award announcements. */
.monthly-medal-modal{z-index:10600}
.trophy-cabinet-month .trophy-cabinet-award-icon img,
.player-profile-month-medal img {width:100%;height:100%;object-fit:contain}
.account-month-medal{width:var(--header-badge-size,46px);height:var(--header-badge-size,46px);object-fit:contain;filter:drop-shadow(2px 2px 0 rgba(23,23,25,.25))}
.monthly-medal-card{width:min(440px,94vw);max-height:90dvh;overflow:auto;padding:25px;text-align:center;background:var(--paper2);border:2px solid var(--ink);box-shadow:9px 9px 0 var(--yellow)}
.monthly-medal-card h2{margin:13px 0 8px;font-size:clamp(26px,7vw,38px);line-height:1.05;letter-spacing:-.05em}
.monthly-medal-card img{width:min(180px,48vw);height:min(180px,48vw);object-fit:contain;display:block;margin:12px auto}
.monthly-medal-card p{font-size:14px;line-height:1.5;max-width:350px;margin:12px auto 20px}
.monthly-medal-card button{border:2px solid var(--ink);background:var(--yellow);padding:12px 18px;font:900 13px/1.1 Inter,ui-sans-serif,sans-serif;cursor:pointer}
.monthly-medal-card button:focus-visible{outline:3px solid var(--blue);outline-offset:3px}