:root{color-scheme:dark;--gold:#b3aa70;--text:#e4e3ca;--muted:#929b80;--green:#bbd484}*{box-sizing:border-box}body{margin:0;background:#050c0b url('assets/workshop.png') center/cover fixed;color:var(--text);font:14px Georgia,'Times New Roman',serif;min-height:100svh}body:before{content:'';position:fixed;inset:0;background:radial-gradient(ellipse at center,transparent 25%,#02090822 80%);pointer-events:none}header,main,footer,.touch-controls{position:relative}header{height:106px;max-width:1040px;margin:auto;display:flex;align-items:center;justify-content:center;gap:13px}h1{font-size:49px;font-weight:400;letter-spacing:2px;margin:0;line-height:1;color:#e0d69b;text-shadow:0 2px 12px #b5c56d35}header p{font:9px system-ui;letter-spacing:2px;margin:9px 0 0;color:#9ea379}.sigil{font-size:54px;color:var(--gold)}button{font:inherit;color:var(--text);border:1px solid #7373486b;background:#0c1813d9;border-radius:6px;padding:10px 14px;cursor:pointer;transition:background .15s,border-color .15s}button:hover{background:#243523;border-color:#a5ad6c}button:focus-visible,canvas:focus-visible{outline:2px solid var(--green);outline-offset:3px}button:disabled{opacity:.4;cursor:default}.header-actions{position:absolute;right:32px;display:flex;gap:8px}.header-actions button{font:12px system-ui;padding:9px 12px}main{display:grid;grid-template-columns:210px auto 190px;justify-content:center;gap:26px;margin:0 auto;align-items:start;padding:0 24px}.left-shelf{padding-top:44px}.right-shelf{padding-top:44px}.panel{position:relative;background:linear-gradient(145deg,#0d1915f2,#060e0ce8);border:1px solid #74744470;border-radius:14px 4px 14px 4px;padding:22px;box-shadow:0 12px 35px #0008,inset 0 0 20px #b2b75404;margin-bottom:18px}.panel:before,.panel:after{content:'✧';position:absolute;color:#8c9056;font-size:15px;top:4px;left:8px}.panel:after{top:auto;left:auto;bottom:4px;right:8px}.eyebrow{font:9px system-ui;letter-spacing:1.7px;color:#b5ba8c}h2{font-size:25px;line-height:1.2;font-weight:400;color:#d4d3a6;margin:17px 0}.story{font-size:13px;line-height:1.7;color:var(--muted)}.divider{display:flex;align-items:center;gap:10px;color:#767f4e;margin:22px 0}.divider:before,.divider:after{content:'';height:1px;background:#4f5836;flex:1}.stat{display:flex;flex-direction:column;gap:6px;margin-top:17px}.stat span{font:11px system-ui;color:var(--muted)}.stat strong{font-size:34px;font-weight:400;color:#e0d99c;font-variant-numeric:tabular-nums}.stat.small{flex-direction:row;justify-content:space-between;align-items:center}.stat.small strong{font-size:24px}.reserve{padding-bottom:13px}.reserve canvas{width:100%;height:90px}.reserve p{font-size:11px;color:var(--muted);text-align:center;margin:0}.play-area{width:min(380px,calc((100svh - 182px)*.5));min-width:250px}.board-caption{display:flex;justify-content:space-between;align-items:center;height:28px;font-size:11px;color:#afb385}.board-caption span:last-child{font:10px system-ui;color:var(--muted)}.frame{position:relative;padding:7px;border:1px solid #a6a16a;border-radius:7px;background:linear-gradient(135deg,#47482b,#111c15 20%,#78834a 51%,#101912 80%,#5e5b34);box-shadow:0 0 0 3px #070e0b,0 0 0 4px #595c3466,0 20px 60px #000b,0 0 38px #a0bc5520}.frame:before{content:'✧';position:absolute;top:-12px;left:calc(50% - 8px);color:#d1c487;z-index:2;background:#0b120d;padding:0 3px}#board{display:block;width:100%;height:auto;background:#040d0beF;aspect-ratio:1/2;outline-offset:8px}.veil{position:absolute;inset:7px;background:linear-gradient(#07130be8,#040c0df5);display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:18px;z-index:3}.veil[hidden]{display:none}.veil h2{font-size:34px;line-height:1.15;margin:14px 0}.veil p{color:#9ea985;font-size:12px;line-height:1.7}.veil .eyebrow{font-size:8px;letter-spacing:1.4px}.moon{font-size:64px;color:#c7cf89;text-shadow:0 0 30px #a9d46155}.primary{background:linear-gradient(#354627,#202f1a);border:1px solid #a1af68;color:#e7e9c9;padding:13px 23px;margin-top:12px;box-shadow:inset 0 1px #d3dc9f22,0 0 22px #8cb64012}.primary span{margin-left:15px;color:#bacd85}.primary:hover{background:#425635}.tiny{font:10px/1.6 system-ui!important;color:#8b947a!important}.below-board{display:flex;justify-content:space-between;align-items:center;gap:8px;padding-top:13px}.below-board button{font:10px system-ui;padding:6px 8px}.below-board span{font-size:9px;color:#8c9779}#next{width:100%;height:230px;display:block}.meter{height:3px;background:#2b3622;margin:20px 0;border-radius:3px;overflow:hidden}.meter i{display:block;height:100%;background:#b7ce7c;box-shadow:0 0 8px #b7ce7c;transition:width .3s}.progress-panel{padding:18px}.keys{display:grid;gap:12px;padding:8px 12px;font:10px system-ui;color:#a0aa90}kbd{font:10px system-ui;display:inline-block;min-width:20px;border:1px solid #626d4166;border-radius:3px;padding:3px 5px;color:#c1c4a0;background:#0d180fcc}.reserve kbd{float:right;margin-top:-4px}footer{max-width:900px;margin:20px auto 0;padding:0 20px 16px;display:flex;justify-content:space-between;color:#7a866b;font:10px Georgia}#spell{pointer-events:none;position:absolute;inset:38% -30px auto;text-align:center;color:#e6efb0;font-size:27px;text-shadow:0 0 18px #a9e671,0 3px 6px #000;opacity:0;z-index:4;transition:opacity .2s}.touch-controls{display:none;justify-content:center;gap:8px;padding:12px}.touch-controls button{min-width:42px;min-height:44px;touch-action:none;font-size:19px}dialog{max-width:470px;width:90vw;max-height:85svh;overflow:auto;background:#0c1813;border:1px solid #898958;border-radius:12px;padding:28px;color:var(--text);box-shadow:0 25px 100px #000}dialog::backdrop{background:#000b;backdrop-filter:blur(4px)}dialog p{line-height:1.7;color:#adb59a;font-size:13px}dialog dl{display:grid;grid-template-columns:120px 1fr;gap:12px;font:12px system-ui}dialog dd{margin:0;color:#adb59a}.fireflies{position:fixed;inset:0;overflow:hidden;pointer-events:none}.fireflies i{position:absolute;width:3px;height:3px;border-radius:50%;background:#d1ec86;box-shadow:0 0 9px 3px #a1c35c55;animation:float 9s ease-in-out infinite alternate}@keyframes float{from{transform:translateY(10px);opacity:.1}to{transform:translate(20px,-35px);opacity:.85}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.fireflies{display:none}}@media(max-height:780px) and (min-width:761px){header{height:80px}h1{font-size:38px}.left-shelf,.right-shelf{padding-top:28px}.panel{padding:16px;margin-bottom:12px}.story{font-size:12px}.play-area{width:calc((100svh - 158px)*.5);min-width:220px}#next{height:170px}.keys{gap:6px}footer{margin-top:12px}h2{font-size:21px}}@media(max-width:1000px){main{gap:16px;grid-template-columns:170px auto 155px}.panel{padding:15px}.header-actions{right:20px}.story{font-size:12px}}@media(max-width:760px){header{height:78px;justify-content:flex-start;padding-left:20px}h1{font-size:35px}.sigil{font-size:38px}header p{font-size:7px;letter-spacing:1px}.header-actions{right:15px}#sound span{display:none}main{grid-template-columns:minmax(0,1fr) 94px;gap:10px;padding:0 12px;max-width:480px}.play-area{grid-column:1;grid-row:1;width:100%;min-width:0}.left-shelf{grid-column:2;grid-row:1;padding:28px 0 0;align-self:start}.left-shelf .panel:first-child .eyebrow,.left-shelf h2,.story,.divider{display:none}.panel{padding:10px;border-radius:8px;margin-bottom:10px}.stat strong{font-size:23px}.stat.small{flex-direction:column;align-items:flex-start;gap:2px}.stat.small strong{font-size:18px}.stat span{font-size:9px}.stat{margin-top:7px}.reserve .eyebrow{font-size:7px;letter-spacing:0}.reserve p{display:none}.reserve canvas{height:60px}.right-shelf{grid-column:2;grid-row:1;margin-top:285px;padding:0}.right-shelf .eyebrow{font-size:7px;letter-spacing:.5px}#next{height:128px}.keys,.progress-panel .tiny{display:none}.progress-panel{padding:8px}.meter{margin:8px 0}.below-board span{display:none}.touch-controls{display:flex}.veil h2{font-size:29px}.veil .tiny{display:none}.veil .eyebrow{font-size:6px}.veil p{font-size:11px}.veil .primary{padding:11px 14px}.moon{font-size:46px}footer{font-size:8px;margin-top:2px}.board-caption{font-size:9px}.board-caption span:last-child{font-size:8px}}

/* Lighter frame: controls belong to the right shelf, status to the overlay. */
header{max-width:846px;height:106px;text-align:center}.signature{position:absolute;right:0;top:35px;display:flex;align-items:center;gap:8px;font:10px Georgia;color:#a0a47d}.signature img{width:34px;height:28px}
.play-area{padding-top:28px}.right-shelf{position:relative}.right-shelf .header-actions{position:absolute;right:0;left:0;top:0;display:flex;justify-content:flex-end;height:31px}.header-actions button{padding:5px 10px}.below-board{justify-content:flex-start;flex-wrap:wrap;padding:16px 12px 0;gap:9px}.below-board button{padding:8px 11px}.play-area{margin-bottom:22px}
@media(max-width:1000px){header{max-width:730px}.signature{right:10px}}
@media(max-height:780px) and (min-width:761px){header{height:80px}.signature{top:24px}.right-shelf{padding-top:36px}.left-shelf{padding-top:36px}}
@media(max-width:760px){header{height:78px;justify-content:flex-start;text-align:left;padding-left:20px}.signature{top:20px;right:13px;gap:5px;font-size:8px}.signature img{width:25px;height:24px}.play-area{padding-top:28px;margin-bottom:0}.right-shelf{padding-top:32px;margin-top:285px}.right-shelf .header-actions{height:27px;justify-content:space-between;gap:4px}.header-actions button{padding:4px 8px}.below-board{padding:2px 0 0;gap:6px}.below-board button{font-size:9px;padding:7px 5px;flex:1;min-height:32px}.touch-controls{margin-top:8px}.veil .eyebrow{font-size:8px}.signature span{max-width:65px;text-align:left}}

/* Keep the title clear of the painted ornament at narrow widths. */
header > div:first-child{transform:translateY(14px)}


.left-shelf .signature{position:static;display:flex;justify-content:center;align-items:center;gap:8px;margin:18px 0 8px;font-size:10px}.left-shelf .signature img{width:34px;height:28px}.left-shelf .signature span{max-width:none;text-align:left}@media(max-width:760px){.left-shelf .signature{gap:4px;margin:10px 0;font-size:7px}.left-shelf .signature img{width:23px;height:22px}.left-shelf .signature span{max-width:58px}}