/*
 * BOXXY — Pushbox Puzzle
 * Copyright © 2026 Sam Cornwell. All rights reserved.
 * Personal non-commercial use only. See LICENSE.md.
 */
: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 strong,.title span{display:block;max-width:100%;font-weight:950;line-height:.86;letter-spacing:.04em;white-space:nowrap}.title 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-image:url("assets/board/board-atlas.png");background-repeat:no-repeat;background-size:300% 100%}
.goal .board-art-goal{position:absolute;left:-3.5%;bottom:-1%;width:107%;height:107%;background-position:0 0;transform:scaleY(.86);transform-origin:50% 100%;filter:drop-shadow(0 2px 1px rgba(48,34,18,.14));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%;filter:none}
.piece.box .board-art-box-yellow{background-position:50% 0}
.piece.box .board-art-box-red{background-position:100% 0}
.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.on-goal{filter:drop-shadow(0 0 8px rgba(229,179,42,.48))}.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 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 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 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;filter:drop-shadow(0 16px 28px rgba(255,150,0,.16))}
.splash-sheen{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}
@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:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.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-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(--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-boxgoal::before,.maker-cell.type-playergoal::before{content:"";position:absolute;left:50%;top:50%;width:42%;height:42%;transform:translate(-50%,-50%);border-radius:50%;border:clamp(2px,.25vw,4px) solid var(--red);z-index:1}
.maker-cell.type-box::after,.maker-cell.type-boxgoal::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-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-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{position:absolute;right:8px;bottom:4px;font-size:28px;line-height:1;font-weight:950;letter-spacing:-.07em}
.pack-red .final-pack-art{background:var(--red);color:#fff}
.pack-green .final-pack-art{background:var(--green);color:#fff}
.pack-blue .final-pack-art{background:var(--blue);color:#fff}
.pack-yellow .final-pack-art{background:var(--yellow)}
.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-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{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}

/* Make a box on a goal unmistakable in the editor. */
.maker-tool-icon.boxgoal::after{width:23px;height:23px;border-width:3px}
.maker-tool-icon.boxgoal::before{inset:7px;background:var(--red);border-color:#7d241b;box-shadow:2px 2px 0 rgba(23,23,25,.35)}
.maker-cell.type-boxgoal::before{width:78%;height:78%;border-width:clamp(2px,.28vw,4px)}
.maker-cell.type-boxgoal::after{inset:24%;background:linear-gradient(145deg,#e85a42,#bd2f22);border-color:#742219;box-shadow:2px 2px 0 rgba(23,23,25,.35)}

/* 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{font-size:31px}
  .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;font-style:normal;font-size:8px;font-weight:1000;line-height:1.25;letter-spacing:.08em;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{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{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,.7fr) minmax(220px,1fr) 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}
  .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-size:8px;font-weight:900;letter-spacing:.06em;text-decoration:none;opacity:.72;backdrop-filter:blur(4px)}
.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;
  }
}