@font-face{font-family:MakerDisplay;src:url('assets/baloo.woff2') format('woff2');font-weight:400 800;font-display:swap}
@font-face{font-family:MakerSans;src:url('assets/nunito.woff2') format('woff2');font-weight:400 900;font-display:swap}
:root{--ink:#153d40;--paper:#fff3d6;--gold:#efca7f;--gold-dark:#8c572a;color:#fff2d3;font-family:MakerSans,Verdana,sans-serif;color-scheme:dark;background:#173938}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}button,select{font:800 13px MakerSans,sans-serif;min-width:44px;min-height:44px;border:1px solid #d8ae6d;border-radius:12px;background:#153e42;color:#fff4d7;padding:9px 14px;cursor:pointer;box-shadow:inset 0 2px 0 #ffffff22,0 4px 0 #071e21,0 5px 12px #0006}button:hover{background:#226069}button:active{transform:translateY(2px);box-shadow:inset 0 1px 4px #0006,0 2px 0 #071e21}button:disabled{opacity:.65;cursor:default}button:focus-visible,select:focus-visible{outline:3px solid #fff0ad;outline-offset:3px}button[aria-pressed=true]{background:#f0cd83;color:#102f35;border-color:#fff0b5}.primary{background:#f0cd83;color:#283a2d;font:800 20px MakerDisplay,sans-serif;padding:10px 24px;border-color:#fff2b8;box-shadow:inset 0 2px 0 #fff6c4,0 5px 0 #92562b,0 8px 18px #0007}.primary:hover{background:#ffe1a2}.quiet{background:#173b39;color:#f6dfad}.quiet:hover{background:#28564f}[hidden]{display:none!important}
#shell{position:relative;width:100%;height:100dvh;min-height:320px;overflow:hidden;isolation:isolate}#atelier{position:absolute;inset:0;width:100%;height:100%;touch-action:none}header{position:absolute;inset:max(12px,env(safe-area-inset-top)) 24px auto;display:flex;justify-content:space-between;align-items:center;gap:12px;z-index:5;pointer-events:none}.brand{line-height:1}.brand span{font:800 9px MakerSans;letter-spacing:.17em;display:block;margin-bottom:3px;color:#f9d598}.brand strong{font:800 32px/.95 MakerDisplay,sans-serif;letter-spacing:-.035em;color:#fff1c5;text-shadow:0 2px 0 #5d391d,0 3px 14px #0009}.brand strong:before{content:'';display:inline-block;width:19px;height:19px;margin-right:10px;border-radius:5px;background:linear-gradient(140deg,#cbfff2,#18a39d 45%,#166f71);border:2px solid #f2c77b;box-shadow:2px 3px 0 #663b22;transform:rotate(-12deg)}header nav{display:flex;gap:7px;pointer-events:auto}header button{font-size:12px}
.eyebrow{font:900 10px/1.5 MakerSans;letter-spacing:.16em;margin:0 0 10px;color:#f3cf8e}h1{font:800 56px/1 MakerDisplay,sans-serif;letter-spacing:-.035em;margin:0 0 12px}h1 em{font-style:normal;color:#f3cf8e}#home{position:absolute;inset:92px max(26px,5%) 12px;overflow-y:auto;padding:8px 12px 25px;scrollbar-color:#b4874b #163938}.home-heading{display:grid;grid-template-columns:1.15fr 1fr;gap:40px;align-items:center;margin:0 0 22px;text-shadow:0 2px 10px #000}.home-heading h1{max-width:600px}.welcome{max-width:440px;font-size:15px;line-height:1.5;background:#0d2e2dde;border:1px solid #af8a53;padding:20px 24px;border-radius:18px}.welcome p{margin:0 0 8px}.welcome button{margin:7px 4px 0 0}.welcome .quiet{font-size:12px}.chapters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:23px}.chapter{position:relative;padding:14px 18px 21px;border:1px solid #c49953;border-radius:22px;background:linear-gradient(140deg,#1b4947f5,#0c252bf5);box-shadow:inset 0 2px 0 #f7d19655,0 7px 0 #39241a,0 18px 32px #0007}.chapter:nth-child(2){background:linear-gradient(140deg,#6d4327f5,#302319f5)}.chapter:nth-child(3){background:linear-gradient(140deg,#194952f5,#102632f5)}.chapter h2{font:800 29px/1.05 MakerDisplay;margin:4px 0 10px}.chapter p{font:600 12px/1.5 MakerSans;margin:0 0 13px}.chapter .eyebrow{font-size:9px;letter-spacing:.13em;color:#efd191}.material-band{position:relative;height:145px;border-radius:13px;margin-bottom:17px;border:1px solid #dbb77b;box-shadow:inset 0 -30px 30px #0a201d99,0 4px 0 #081c19;background:url('assets/ceramic-room.png') 20% 30%/cover}.chapter:nth-child(2) .material-band{background-image:url('assets/timber-room.png')}.chapter:nth-child(3) .material-band{background-image:url('assets/glass-room.png')}.chapter[data-status=locked] .material-band{filter:saturate(.5);opacity:.7}.chapter[data-status=locked] .material-band:after{content:'CHAPTER LOCKED';position:absolute;bottom:12px;left:12px;border:1px solid #d4b67c;padding:6px 10px;border-radius:6px;background:#142d2dee;color:#f6dfae;font:900 10px MakerSans;letter-spacing:.1em}.chapter[data-status=complete] .material-band:after{content:'RESTORED';position:absolute;bottom:12px;left:12px;background:#f0cd83;color:#173b39;padding:6px 10px;border-radius:6px;font:900 11px MakerSans}.level-buttons{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.level-buttons button{padding:5px 3px;min-height:48px;font:800 19px/1 MakerDisplay}.level-buttons button.done{background:#28645b;color:#fff0c4;border-color:#e0b268}.level-buttons button.current{background:#f0cd83;color:#102f35;border-color:#fff6c7;box-shadow:inset 0 2px 0 #fff5be,0 4px 0 #986033}.level-buttons button:disabled{opacity:1;background:#223335;color:#b8bfb1;border-color:#6a7263;box-shadow:inset 0 2px 4px #071c20}.level-buttons button small{display:block;font:900 8px/1.4 MakerSans;letter-spacing:.08em;margin-top:3px}.home-note{font:700 11px MakerSans;text-align:center;margin:22px 0 0;color:#ffebc6;text-shadow:0 2px 5px #000}
#story{position:absolute;left:32px;top:130px;width:min(28vw,360px);padding:22px 25px;pointer-events:none;background:linear-gradient(145deg,#0c302fea,#082328e8);border:1px solid #c59c5d;border-radius:20px;box-shadow:0 9px 25px #0005,inset 0 2px 0 #f1c87f33}#story h1{font-size:40px;color:#fff0cd}#brief{font:600 14px/1.5 MakerSans;color:#f7e7c5;margin:14px 0}#material{color:#efc67d}.restoration{margin:18px 0 0;font:800 12px MakerSans}.restoration span{display:block;margin-bottom:8px;color:#f6dcaa}progress{width:100%;height:10px;border:1px solid #aa8246;border-radius:6px;overflow:hidden;appearance:none;background:#081d1b}progress::-webkit-progress-bar{background:#081d1b}progress::-webkit-progress-value{background:linear-gradient(90deg,#2b9e98,#e8c774)}.skin-label{display:block;font:800 10px MakerSans;letter-spacing:.03em;color:#efd6a2;margin:18px 0 6px}#skin{font-size:12px;width:100%;pointer-events:auto}
#puzzlebar{position:absolute;pointer-events:none;text-shadow:0 2px 6px #000}#puzzlebar>div{display:flex;justify-content:space-between;align-items:center;gap:8px}#puzzlebar .eyebrow{font-size:10px;white-space:nowrap;margin:0}#puzzlebar h2{font:800 24px/1 MakerDisplay;margin:0;color:#fff0c9}#goals{font:800 12px/1.2 MakerSans;letter-spacing:.02em;margin:4px 0 0;color:#ffe7b7}#board-grid{position:absolute;display:grid;grid-template-columns:1fr;grid-template-rows:repeat(6,1fr);pointer-events:none}.grid-row{display:grid;grid-template-columns:repeat(6,1fr);min-height:0}.grid-cell{border:0;border-radius:8px;padding:0;min-height:0;min-width:0;background:transparent!important;box-shadow:none;color:transparent;font-size:0;pointer-events:none}.grid-cell:focus-visible{outline:3px dashed #fff2a5;outline-offset:-5px}#tray{position:absolute;inset:0;pointer-events:none}.piece-button{position:absolute;background:transparent!important;box-shadow:none!important;transform:none!important;padding:0 4px 4px;display:flex;align-items:flex-end;justify-content:center;font:900 10px MakerSans;letter-spacing:.055em;pointer-events:auto;touch-action:none;color:#ffe9b9!important;border:2px solid transparent}.piece-button[aria-pressed=true]{border-color:#ffe5a6}#actions{position:absolute;display:flex;gap:8px;justify-content:center}#actions button{flex:1;white-space:nowrap;max-width:145px}kbd{font:800 9px MakerSans;color:#a8c7be;margin-left:4px}#help{display:none;position:absolute;margin:0;pointer-events:none}#notice{position:absolute;text-align:center;font:800 11px/1.3 MakerSans;margin:0;pointer-events:none;color:#fff0c6;text-shadow:0 1px 4px #071b19,0 2px 7px #071b19}
#modal{position:absolute;inset:0;background:#061f259c;backdrop-filter:blur(5px);display:grid;place-items:center;padding:20px;z-index:10}.paper{position:relative;width:min(480px,100%);max-height:calc(100dvh - 28px);overflow:auto;border:2px solid #e8bd71;border-radius:26px;background:radial-gradient(ellipse at 50% 0,#37716b,#10373a 65%);padding:32px;box-shadow:inset 0 4px 0 #ffe5a855,0 7px 0 #50321e,0 20px 65px #04191fcc}.paper:before{content:'';display:block;width:43px;height:43px;margin:0 auto 19px;border:4px solid #f4d282;border-radius:11px;background:linear-gradient(135deg,#c5fff1,#269b95 45%,#175569);box-shadow:inset 0 3px 0 #eaffde,0 5px 0 #936137;transform:rotate(-12deg)}.paper h2{font:800 39px/1.03 MakerDisplay;margin:0 0 14px;color:#fff1c5;text-align:center}.paper p{font:600 14px/1.5 MakerSans;color:#f4e5c5}.paper .eyebrow{font-size:10px;text-align:center;color:#f0cd83;letter-spacing:.12em}#modal-buttons{display:grid;gap:11px;margin-top:21px}#storage{position:absolute;bottom:2px;left:4px;font-size:10px;margin:0;background:#102e2e;padding:3px 7px;z-index:20;color:#ffe5aa}.fill-fallback{position:fixed!important;inset:0;z-index:1000;height:100dvh!important}#map-skin{display:block;width:min(300px,100%);margin:20px auto 0}
@media(max-width:999px){header{inset:max(6px,env(safe-area-inset-top)) 12px auto;display:block}.brand{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px}.brand span{font-size:7px;max-width:100px;margin:0}.brand strong{font-size:26px}.brand strong:before{width:15px;height:15px;margin-right:7px}header nav{justify-content:center;gap:5px}header button{font-size:10px;padding:8px 10px}#story{display:none}#puzzlebar h2{font-size:20px}#puzzlebar .eyebrow{font-size:9px}#goals{font-size:10px;margin-top:3px}#actions{gap:6px}#actions button{font-size:12px;padding:8px 7px}kbd{display:none}.piece-button{font-size:9px}#home{inset:96px 10px 8px;padding:8px 8px 20px}.home-heading{display:block;margin-bottom:20px}.home-heading h1{font-size:40px;margin-bottom:16px}.home-heading>.eyebrow{font-size:8px}.welcome{max-width:none;padding:16px;font-size:13px}.welcome button.primary{font-size:19px}.chapters{grid-template-columns:1fr;gap:20px}.material-band{height:165px}.chapter{padding:14px 18px 20px}.chapter h2{font-size:31px}.level-buttons button{min-height:48px}.home-note{text-align:left}.paper{padding:24px}.paper h2{font-size:34px}}
@media(min-width:650px) and (max-width:999px) and (min-height:500px){header .brand{display:block;float:left}header nav{justify-content:flex-end}#home{inset:84px 22px 8px}.home-heading{display:grid;grid-template-columns:1fr 1fr;gap:24px}.home-heading h1{font-size:45px}.chapters{grid-template-columns:repeat(3,1fr);gap:14px}.chapter{padding:12px}.chapter h2{font-size:26px}.material-band{height:145px}.level-buttons{gap:5px}.level-buttons button{font-size:17px}.chapter p{font-size:11px}}
@media(max-height:649px) and (min-height:500px){.piece-button{font-size:8px}#notice{font-size:10px}#story{top:100px;padding:16px}#story h1{font-size:30px}}
@media(max-height:499px){header{inset:3px 12px auto;display:flex}.brand{display:block;margin:0}.brand span{display:none}.brand strong{font-size:19px}.brand strong:before{display:none}header nav{gap:4px}header button{font-size:9px;padding:6px 7px}#story{display:none}#puzzlebar>div{display:block}#puzzlebar .eyebrow{display:none}#puzzlebar h2{font-size:15px;line-height:1.1}#goals{font-size:9px;line-height:1.3;margin-top:5px}#actions{flex-direction:column;gap:5px}#actions button{width:100%;max-width:none;flex:none;height:44px;font-size:11px;padding:5px}#notice{font-size:10px}.piece-button{font-size:9px}#home{inset:56px 16px 5px}.home-heading{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:16px}.home-heading h1{font-size:34px}.home-heading .eyebrow{display:none}.welcome{font-size:11px;padding:12px}.welcome .primary{font-size:16px}.chapters{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.chapter{padding:10px}.chapter h2{font-size:22px}.chapter p{font-size:10px}.material-band{height:90px}.level-buttons{gap:4px}.level-buttons button{min-height:44px;font-size:16px}.paper{padding:20px}.paper:before{display:none}.paper h2{font-size:30px}#modal-buttons{margin-top:16px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(max-width:649px) and (max-height:499px){.chapters{grid-template-columns:1fr}.material-band{height:145px}.chapter h2{font-size:28px}.chapter p{font-size:12px}.level-buttons{gap:9px}.level-buttons button{font-size:19px}}