/*
 * BOXXY — Pushbox Puzzle
 * Copyright © 2026 Sam Cornwell. All rights reserved.
 * Personal non-commercial use only. See LICENSE.md.
 * BOXXY v166: fifteen dedicated box and target sprite colours.
 * 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)}
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);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 .17s cubic-bezier(.2,.82,.32,1),top .17s cubic-bezier(.2,.82,.32,1),transform .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:url("assets/board/boxes/box-default-yellow.png")}
.piece.box.on-goal .board-art-box{background-image:var(--box-sprite)}
.piece.player{width:calc(207% / var(--cols));height:0;transform:translateX(-50%);transition:left .17s cubic-bezier(.2,.82,.32,1),top .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.box.pushing{animation:boxPush .2s ease}.piece.player.walking :is(img,canvas){animation:playerWalk .17s linear}.piece.player.pushing :is(img,canvas){animation:playerPush .2s ease}.piece.player.bumping :is(img,canvas){animation:playerBump .16s ease}
@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(5,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(4,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}
.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:7px;margin:0}.stats{grid-column:1/-1;grid-row:2}.stats>div,.stats .time{padding:4px 2px}.stats span{font-size:6px}.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(3,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(3,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:2px solid rgba(23,23,25,.22);background:var(--swatch);box-shadow:inset 0 0 0 2px rgba(255,255,255,.16);padding:0}
.style-swatch::after{content:"";position:absolute;inset:5px;border:2px solid transparent}
.style-swatch.selected{border-color:var(--ink);transform:translateY(-2px);box-shadow:0 5px 0 var(--ink),inset 0 0 0 2px rgba(255,255,255,.25)}
.style-swatch.selected::after{border-color:rgba(255,255,255,.85)}
.style-footer{display:flex;justify-content:flex-end;gap:12px;margin-top:17px}
.style-footer button{min-width:122px;padding:13px 18px;border:2px solid var(--ink);font-weight:950;letter-spacing:.06em}
.style-reset{background:transparent;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(2,minmax(0,1fr));gap:8px}
.style-type-btn{border:2px solid rgba(23,23,25,.25);background:#f2eadf;color:var(--ink);font:900 13px/1 var(--font,inherit);letter-spacing:.08em;padding:11px 10px;min-height:42px}
.style-type-btn.selected{border-color:var(--ink);background:#fff7ea;box-shadow:0 5px 0 var(--ink);transform:translateY(-2px)}
.style-type-btn:active{transform:translateY(0);box-shadow:none}


/* 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{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{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}
.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}.complete-secondary,.complete-primary{width:100%;min-width:0}}

/* BOXXY v133 — Level Pack Builder, Daily Puzzle queue and solution import. */
.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 span,.pack-workspace-heading span{display:block;margin-top:4px;color:#665d52;font-size:8px;font-weight:950;letter-spacing:.08em}
.pack-builder-library header input{width:min(320px,38vw);height:33px;padding:0 9px;border:1px solid var(--ink);background:#fff9ef;color:var(--ink);font-size:9px;font-weight:850}
.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-grid{max-height:238px;overflow:auto;padding:2px 3px 5px 2px}
.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-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{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-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-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(175px,.75fr) minmax(175px,.75fr) minmax(210px,.9fr) minmax(260px,1.2fr);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-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){
  .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-builder-library header input{width:100%}
  .pack-workspace-heading p{text-align:left}
  .pack-level-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pack-library-grid{max-height:360px}
  .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(3,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:repeat(2,minmax(0,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:6px;padding:2px 4px}}

/* 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:6.5px}
}

@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,
.complete-card.final-complete .pack-red .final-pack-art,
.complete-card.final-complete .pack-green .final-pack-art,
.complete-card.final-complete .pack-blue .final-pack-art,
.complete-card.final-complete .pack-yellow .final-pack-art,
.complete-card.final-complete .pack-black .final-pack-art{background:#f7f0e5;color:var(--ink)}
.complete-card.final-complete .final-pack-art i{background:var(--yellow);border-color:var(--blue)}
.complete-card.final-complete .final-pack-art b{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{
  background:var(--red);
  color:#fff;
}
.complete-card.final-complete .pack-green .final-pack-art{
  background:var(--green);
  color:#fff;
}
.complete-card.final-complete .pack-blue .final-pack-art{
  background:var(--blue);
  color:#fff;
}
.complete-card.final-complete .pack-yellow .final-pack-art{
  background:var(--yellow);
  color:var(--ink);
}
.complete-card.final-complete .pack-purple .final-pack-art{
  background:#8e44ad;
  color:#fff;
}
.complete-card.final-complete .pack-teal .final-pack-art{
  background:#00a6b2;
  color:#fff;
}
.complete-card.final-complete .pack-black .final-pack-art{
  background:var(--ink);
  color:#fff;
}
.complete-card.final-complete .final-pack-art i{
  background:rgba(255,255,255,.48);
  border-color:var(--ink);
}
.complete-card.final-complete .final-pack-art b{
  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{
    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{
    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{
  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}
.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)}

.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{max-width:68%}
  .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{max-width:72%}
  .title-badges{--header-badge-size:15px;--header-badge-gap:0}
}
@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{
    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{
    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}
}

/* Shared Zen Mode rules: retain only the board/background, arrows, Restart, Undo and exit icon. */
@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:manipulation;
  }
  body.phone-zen-mode .app{
    position:fixed;
    inset:0;
    width:100%;
    max-width:none;
    height:100dvh;
    min-height:0;
    margin:0;
    border:0;
    overflow:hidden;
    background:linear-gradient(135deg,#f4ebdd,#eadcca);
  }
  body.phone-zen-mode .play-area{
    min-width:0;
    min-height:0;
    overflow:hidden;
    display:grid;
    grid-template-rows:minmax(0,1fr)!important;
  }
  body.phone-zen-mode .masthead,
  body.phone-zen-mode .instruction,
  body.phone-zen-mode .credit,
  body.phone-zen-mode .stats,
  body.phone-zen-mode .bottom-actions,
  body.phone-zen-mode .palette,
  body.phone-zen-mode #savePositionBtn,
  body.phone-zen-mode .attire-action,
  body.phone-zen-mode .legal-link{
    display:none!important;
  }
  body.phone-zen-mode .board-wrap{
    grid-row:1;
    min-width:0;
    min-height:0;
    padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) 8px max(8px,env(safe-area-inset-left));
    background:linear-gradient(135deg,#f4ebdd,#eadcca);
  }
  body.phone-zen-mode .side-panel{
    min-width:0;
    min-height:0;
    overflow:hidden;
    border:0;
    background:linear-gradient(135deg,#f4ebdd,#eadcca);
    box-shadow:none;
  }
  body.phone-zen-mode .top-actions{
    padding:0;
    gap:0;
  }
  body.phone-zen-mode .top-actions #restartBtn,
  body.phone-zen-mode .top-actions #undoBtn{
    min-width:0;
    min-height:0;
    height:min(68px,calc(18vw - 6px),calc(8.333dvh - 11px));
    width:min(68px,calc(18vw - 6px),calc(8.333dvh - 11px));
    align-self:center;
    justify-self:center;
    border-radius:10px;
    box-shadow:0 5px 14px rgba(55,38,20,.14);
    pointer-events:auto;
  }
  body.phone-zen-mode .top-actions #restartBtn{
    background:rgba(248,241,230,.92);
    -webkit-backdrop-filter:blur(5px);
    backdrop-filter:blur(5px);
  }
  body.phone-zen-mode .top-actions #undoBtn{
    background:linear-gradient(rgba(225,75,50,.96),rgba(201,46,31,.96));
  }
  body.phone-zen-mode .top-actions .action span{font-size:clamp(20px,6vw,25px)}
  body.phone-zen-mode .top-actions .action b{font-size:7px;white-space:nowrap}
  body.phone-zen-mode .move-zone{
    min-width:0;
    min-height:0;
    padding:4px;
    display:flex;
    align-items:center;
    justify-content:center;
    pointer-events:none;
  }
  body.phone-zen-mode .dpad{
    width:min(100%,220px);
    max-width:100%;
    max-height:100%;
    gap:7px;
    padding:2px;
    pointer-events:auto;
  }
  body.phone-zen-mode .dpad button{
    min-width:0;
    min-height:48px;
    background:rgba(248,241,230,.92);
    -webkit-backdrop-filter:blur(5px);
    backdrop-filter:blur(5px);
    box-shadow:0 5px 14px rgba(55,38,20,.14);
  }
  body.phone-zen-mode .mobile-fullscreen-btn{
    display:grid!important;
    z-index:8500;
    right:max(10px,env(safe-area-inset-right));
    bottom:10px;
  }
  body.phone-zen-mode .mobile-fullscreen-hint{display:none!important}
}

/* Portrait Zen Mode: board above, controls on the same uninterrupted background below. */
@media (max-width:760px) and (pointer:coarse){
  body.phone-zen-mode .app{
    grid-template-columns:1fr!important;
    grid-template-rows:minmax(0,1fr) clamp(158px,25dvh,210px)!important;
  }
  body.phone-zen-mode .play-area{grid-column:1;grid-row:1}
  body.phone-zen-mode .side-panel{
    grid-column:1;
    grid-row:2;
    grid-template-columns:minmax(48px,1fr) minmax(150px,230px) minmax(48px,1fr)!important;
    grid-template-rows:minmax(0,1fr)!important;
    column-gap:clamp(12px,4vw,22px);
    padding:4px max(6px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left));
  }
  body.phone-zen-mode .top-actions{display:contents!important}
  body.phone-zen-mode .top-actions #restartBtn{grid-column:1;grid-row:1}
  body.phone-zen-mode .top-actions #undoBtn{grid-column:3;grid-row:1}
  body.phone-zen-mode .move-zone{grid-column:2;grid-row:1}
  body.phone-zen-mode .dpad{width:min(54vw,220px,calc(25dvh - 14px))}
}

/* Landscape Zen Mode: board fills the left, arrows and the two actions occupy a clean right strip. */
@media (max-height:520px) and (orientation:landscape) and (pointer:coarse){
  body.phone-zen-mode .app{
    grid-template-columns:minmax(0,1fr) clamp(220px,31vw,290px)!important;
    grid-template-rows:1fr!important;
  }
  body.phone-zen-mode .play-area{grid-column:1;grid-row:1}
  body.phone-zen-mode .side-panel{
    grid-column:2;
    grid-row:1;
    grid-template-columns:1fr 1fr!important;
    grid-template-rows:minmax(0,1fr) auto!important;
    row-gap:18px;
    padding:max(6px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) 8px;
  }
  body.phone-zen-mode .top-actions{display:contents!important}
  body.phone-zen-mode .top-actions #restartBtn{
    grid-column:1;
    grid-row:2;
    width:min(68px,calc(18dvh - 7px));
    height:min(68px,calc(18dvh - 7px));
    justify-self:start;
  }
  body.phone-zen-mode .top-actions #undoBtn{
    grid-column:2;
    grid-row:2;
    width:min(68px,calc(18dvh - 7px));
    height:min(68px,calc(18dvh - 7px));
    justify-self:end;
  }
  body.phone-zen-mode .move-zone{
    grid-column:1/-1;
    grid-row:1;
    padding:3px 8px;
  }
  body.phone-zen-mode .dpad{width:min(100%,238px,54dvh)}
  body.phone-zen-mode .dpad button{min-height:40px}
}



/* BOXXY v189 — phone-only floating Zen layout over the full animated background. */
@media (max-width:760px) and (pointer:coarse),
       (max-height:520px) and (orientation:landscape) and (pointer:coarse){
  body.phone-zen-mode .app{
    display:block!important;
    background:transparent!important;
  }
  body.phone-zen-mode .play-area{
    position:absolute!important;
    inset:0!important;
    display:block!important;
    overflow:hidden!important;
  }
  body.phone-zen-mode .board-wrap{
    position:absolute!important;
    inset:0!important;
    z-index:1;
    width:100%!important;
    height:100%!important;
    box-sizing:border-box;
    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 .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;
    pointer-events:none;
    background:transparent!important;
  }
  body.phone-zen-mode .top-actions{
    position:absolute!important;
    inset:0!important;
    display:block!important;
    padding:0!important;
    pointer-events:none;
  }
  body.phone-zen-mode .top-actions #restartBtn,
  body.phone-zen-mode .top-actions #undoBtn{
    position:absolute!important;
    width:48px!important;
    height:48px!important;
    min-width:48px!important;
    min-height:48px!important;
    margin:0!important;
    border-radius:11px!important;
    pointer-events:auto;
  }
  body.phone-zen-mode .top-actions .action span{
    font-size:20px!important;
    line-height:1!important;
  }
  body.phone-zen-mode .top-actions .action b{
    font-size:7px!important;
    line-height:1!important;
  }
  body.phone-zen-mode .move-zone{
    position:absolute!important;
    z-index:65;
    display:block!important;
    min-width:0!important;
    min-height:0!important;
    padding:0!important;
    pointer-events:none;
  }
  body.phone-zen-mode .dpad{
    width:100%!important;
    height:auto!important;
    max-width:none!important;
    max-height:none!important;
    gap:9px!important;
    padding:0!important;
    pointer-events:auto;
  }
  body.phone-zen-mode .dpad button{
    min-width:0!important;
    min-height:0!important;
    border:2px solid rgba(23,23,25,.78)!important;
    border-radius:13px!important;
    background:rgba(248,241,230,.88)!important;
    -webkit-backdrop-filter:blur(7px);
    backdrop-filter:blur(7px);
    box-shadow:0 7px 18px rgba(55,38,20,.2)!important;
  }
  body.phone-zen-mode .dpad button svg{
    width:58%!important;
    height:58%!important;
  }
  body.phone-zen-mode .mobile-fullscreen-btn{
    position:fixed!important;
    top:max(10px,env(safe-area-inset-top))!important;
    bottom:auto!important;
    z-index:8500!important;
  }
}

/* Portrait phones: a large arrow pad at the bottom, with the smaller actions well above it. */
@media (max-width:760px) and (pointer:coarse) and (orientation:portrait){
  body.phone-zen-mode{
    --zen-pad-size:min(84vw,330px,45dvh);
    --zen-pad-bottom:max(14px,env(safe-area-inset-bottom));
  }
  body.phone-zen-mode .board-wrap{
    padding:max(12px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right))
      calc(var(--zen-pad-size) + 150px + env(safe-area-inset-bottom))
      max(10px,env(safe-area-inset-left))!important;
  }
  body.phone-zen-mode .move-zone{
    width:var(--zen-pad-size)!important;
    height:var(--zen-pad-size)!important;
    left:50%!important;
    right:auto!important;
    bottom:var(--zen-pad-bottom)!important;
    transform:translateX(-50%)!important;
  }
  body.phone-zen-mode .top-actions #restartBtn{
    left:max(20px,env(safe-area-inset-left))!important;
    right:auto!important;
    top:auto!important;
    bottom:calc(var(--zen-pad-bottom) + var(--zen-pad-size) + 72px)!important;
  }
  body.phone-zen-mode .top-actions #undoBtn{
    right:max(20px,env(safe-area-inset-right))!important;
    left:auto!important;
    top:auto!important;
    bottom:calc(var(--zen-pad-bottom) + var(--zen-pad-size) + 72px)!important;
  }
  body.phone-zen-mode .mobile-fullscreen-btn{
    right:max(10px,env(safe-area-inset-right))!important;
    left:auto!important;
  }
}

/* Landscape phones: board remains on the left and controls remain on the right.
   The 3×2 arrow pad itself—not a larger empty square—is anchored to the lower edge. */
@media (max-height:520px) and (orientation:landscape) and (pointer:coarse){
  body.phone-zen-mode{
    --zen-landscape-arrow:min(12vw,104px,25dvh);
    --zen-pad-size:calc(var(--zen-landscape-arrow) + var(--zen-landscape-arrow) + var(--zen-landscape-arrow) + 18px);
    --zen-landscape-pad-height:calc(var(--zen-landscape-arrow) + var(--zen-landscape-arrow) + 9px);
    --zen-pad-right:max(14px,env(safe-area-inset-right));
    --zen-pad-bottom:max(2px,env(safe-area-inset-bottom));
  }
  body.phone-zen-mode .board-wrap{
    padding:max(10px,env(safe-area-inset-top))
      calc(var(--zen-pad-size) + 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 .move-zone{
    width:var(--zen-pad-size)!important;
    height:var(--zen-landscape-pad-height)!important;
    right:var(--zen-pad-right)!important;
    left:auto!important;
    bottom:var(--zen-pad-bottom)!important;
    top:auto!important;
    transform:none!important;
  }
  body.phone-zen-mode .dpad{
    width:var(--zen-pad-size)!important;
    height:var(--zen-landscape-pad-height)!important;
    grid-template-columns:repeat(3,var(--zen-landscape-arrow))!important;
    grid-template-rows:repeat(2,var(--zen-landscape-arrow))!important;
    grid-template-areas:". up ." "left down right"!important;
    gap:9px!important;
  }
  body.phone-zen-mode .dpad button{
    width:var(--zen-landscape-arrow)!important;
    height:var(--zen-landscape-arrow)!important;
    min-width:var(--zen-landscape-arrow)!important;
    min-height:var(--zen-landscape-arrow)!important;
    aspect-ratio:1/1!important;
  }
  body.phone-zen-mode .top-actions #restartBtn{
    top:max(12px,env(safe-area-inset-top))!important;
    bottom:auto!important;
    right:calc(var(--zen-pad-right) + var(--zen-pad-size) - 48px)!important;
    left:auto!important;
  }
  body.phone-zen-mode .top-actions #undoBtn{
    top:max(12px,env(safe-area-inset-top))!important;
    bottom:auto!important;
    right:var(--zen-pad-right)!important;
    left:auto!important;
  }
  body.phone-zen-mode .mobile-fullscreen-btn{
    left:max(10px,env(safe-area-inset-left))!important;
    right:auto!important;
  }
}


/* BOXXY v194 — portrait phone Zen layout.
   Keep the full animated background visible, reserve only the space needed for
   the board and use four equal square arrow buttons close to the bottom edge. */
@media (max-width:760px) and (pointer:coarse) and (orientation:portrait){
  html.phone-zen-mode{--max-cell:76px}
  body.phone-zen-mode{
    --zen-arrow-size:min(23vw,92px,12.5dvh);
    --zen-arrow-gap:8px;
    --zen-pad-width:calc((var(--zen-arrow-size) * 3) + (var(--zen-arrow-gap) * 2));
    --zen-pad-height:calc((var(--zen-arrow-size) * 2) + var(--zen-arrow-gap));
    --zen-pad-bottom:max(10px,env(safe-area-inset-bottom));
    --zen-action-size:46px;
  }

  /* The background fills the whole phone. Padding reserves board space only. */
  body.phone-zen-mode .board-wrap{
    inset:0!important;
    width:100%!important;
    height:100%!important;
    padding:
      max(8px,env(safe-area-inset-top))
      max(6px,env(safe-area-inset-right))
      calc(var(--zen-pad-height) + var(--zen-pad-bottom) + 14px)
      max(6px,env(safe-area-inset-left))!important;
    background:linear-gradient(135deg,#f4ebdd,#eadcca)!important;
  }

  /* No panel or dock behind the controls. */
  body.phone-zen-mode .side-panel,
  body.phone-zen-mode .move-zone,
  body.phone-zen-mode .top-actions,
  body.phone-zen-mode .dpad{
    background:transparent!important;
    border:0!important;
    box-shadow:none!important;
  }

  body.phone-zen-mode .move-zone{
    width:var(--zen-pad-width)!important;
    height:var(--zen-pad-height)!important;
    left:50%!important;
    right:auto!important;
    top:auto!important;
    bottom:var(--zen-pad-bottom)!important;
    transform:translateX(-50%)!important;
  }

  body.phone-zen-mode .dpad{
    width:var(--zen-pad-width)!important;
    height:var(--zen-pad-height)!important;
    aspect-ratio:auto!important;
    display:grid!important;
    grid-template-columns:repeat(3,var(--zen-arrow-size))!important;
    grid-template-rows:repeat(2,var(--zen-arrow-size))!important;
    grid-template-areas:". up ." "left down right"!important;
    gap:var(--zen-arrow-gap)!important;
    padding:0!important;
  }

  body.phone-zen-mode .dpad button{
    width:var(--zen-arrow-size)!important;
    height:var(--zen-arrow-size)!important;
    min-width:var(--zen-arrow-size)!important;
    min-height:var(--zen-arrow-size)!important;
    aspect-ratio:1/1!important;
    border-radius:13px!important;
  }

  body.phone-zen-mode .top-actions #restartBtn,
  body.phone-zen-mode .top-actions #undoBtn{
    width:var(--zen-action-size)!important;
    height:var(--zen-action-size)!important;
    min-width:var(--zen-action-size)!important;
    min-height:var(--zen-action-size)!important;
    top:auto!important;
    bottom:calc(
      var(--zen-pad-bottom) + var(--zen-arrow-size) + var(--zen-arrow-gap)
      + ((var(--zen-arrow-size) - var(--zen-action-size)) / 2)
    )!important;
  }
  body.phone-zen-mode .top-actions #restartBtn{
    left:max(18px,env(safe-area-inset-left))!important;
    right:auto!important;
  }
  body.phone-zen-mode .top-actions #undoBtn{
    right:max(18px,env(safe-area-inset-right))!important;
    left:auto!important;
  }
  body.phone-zen-mode .top-actions .action span{font-size:18px!important}
  body.phone-zen-mode .top-actions .action b{font-size:6px!important}
}


/* 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}

.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) and (orientation:portrait){
  body.phone-zen-mode .zen-next-btn{
    left:50%;right:auto;top:auto;
    bottom:calc(var(--zen-pad-height) + var(--zen-pad-bottom) + 16px);
    transform:translateX(-50%);
  }
}
@media (max-height:520px) and (orientation:landscape) and (pointer:coarse){
  body.phone-zen-mode .zen-next-btn{
    left:auto;top:auto;
    right:calc(var(--zen-pad-right) + var(--zen-landscape-arrow));
    bottom:calc(var(--zen-landscape-pad-height) + var(--zen-pad-bottom) + 12px);
    transform:none;
  }
}
@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;
  width:calc(var(--header-badge-size) * 163 / 208);
  height:var(--header-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(--header-badge-size) * .36)}
.daily-streak-badge[data-digits="2"] .daily-streak-number{font-size:calc(var(--header-badge-size) * .31)}
.daily-streak-badge[data-digits="3"] .daily-streak-number{font-size:calc(var(--header-badge-size) * .265)}
.daily-streak-badge[data-digits="4"] .daily-streak-number{font-size:calc(var(--header-badge-size) * .23)}
.daily-streak-badge[data-digits="5"] .daily-streak-number{font-size:calc(var(--header-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-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)}

.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)}
.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}

body.daily-mode .collection{border-color:#2f8f5b;box-shadow:4px 4px 0 rgba(47,143,91,.22)}
body.daily-mode .collection i{background:#2f8f5b}

@media(max-width:760px){
  .daily-streak-badge{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}
  .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))}
  .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}
}
@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;
  }
  .complete-card.daily-complete .complete-primary{
    min-height:42px;
    min-width:170px;
    padding:8px 12px;
  }
}


/* 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 v210 — adjustable 3D camera. */
.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}
}