/* The door selector. */
html,body{height:100%;overflow:hidden}
#stage{position:fixed;inset:0;display:block;width:100%;height:100%}

.head{position:fixed;z-index:3;left:16px;right:72px;top:max(14px,env(safe-area-inset-top));pointer-events:none;text-shadow:0 1px 12px rgba(6,12,22,.75)}
.head h1{font-family:"Young Serif",Georgia,serif;font-weight:400;font-size:clamp(30px,9vw,38px);line-height:1.05;margin:0 0 4px}
.head p{margin:0;color:var(--text-dim)}
.head .more{display:none}
body.side .head{left:7vw;right:auto;top:36%;transform:translateY(-50%);width:27vw;min-width:300px}
body.side .head h1{font-size:clamp(48px,5.2vw,72px);margin-bottom:16px}
body.side .head .now{font-size:24px;line-height:1.3;color:var(--text);margin-bottom:12px}
body.side .head .more{display:block;max-width:36ch}

#soundBtn{position:fixed;z-index:5;right:16px;top:max(14px,env(safe-area-inset-top));width:44px;height:44px;background:rgba(11,22,38,.5)}

/* Invisible real buttons laid over the 3D doors. */
#hits{position:fixed;inset:0;z-index:2;pointer-events:none}
.hit{appearance:none;position:absolute;left:0;top:0;padding:0;border:0;border-radius:8px;background:none;color:transparent;font:inherit;pointer-events:auto;cursor:pointer}
.hit.s-locked{cursor:not-allowed}

.toast{position:fixed;z-index:6;left:50%;bottom:max(16px,env(safe-area-inset-bottom));transform:translateX(-50%);width:max-content;max-width:calc(100vw - 32px);padding:12px 18px;border-radius:14px;background:var(--night-deep);border:1px solid rgba(236,201,118,.45);text-align:center;font-size:15px;box-shadow:0 10px 28px rgba(0,0,0,.5);transition:opacity .25s,translate .25s}
.toast.off{opacity:0;translate:0 10px;pointer-events:none}
.load-error{position:fixed;z-index:6;left:16px;right:16px;top:40%;text-align:center}
.load-error p{margin:0 0 14px}

#fade{position:fixed;inset:0;z-index:7;background:radial-gradient(90% 80% at 50% 55%,#ffefc4,#f6bd5d 70%,#e29a37);opacity:0;pointer-events:none}
html.returning #fade{opacity:1}
.head,#soundBtn{transition:opacity .25s}
body.entering .head,body.entering #soundBtn{opacity:0;pointer-events:none}

/* ---------- flat house, used when WebGL is unavailable ---------- */
html:has(body.no3d),body.no3d{overflow:auto}
body.no3d #stage{display:none}
body.no3d .head{position:static;margin:14px 72px 0 16px;transform:none;width:auto}
body.no3d #hits{position:static;pointer-events:auto;padding:calc(min(100vw,760px)*.26) 16px 40px;max-width:760px;margin:0 auto}
body.no3d .hits-grid::before,body.no3d .hits-grid::after{content:"";position:absolute;left:-14px;right:-14px;bottom:100%;aspect-ratio:4.4/1;pointer-events:none}
body.no3d .hits-grid::before{left:-7px;right:-7px;background:repeating-linear-gradient(90deg,rgba(0,0,0,.2) 0 1.5px,transparent 1.5px 20px),#7d2535;clip-path:polygon(50% 0,100% 100%,0 100%)}
body.no3d .hits-grid::after{background:#e6eff5;clip-path:polygon(50% 0,100% 100%,94% 100%,50% 15%,6% 100%,0 100%)}
body.no3d .hits-grid{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 18px;padding:34px 22px 0;border:0 solid #e7e0d2;border-width:0 7px;background:repeating-linear-gradient(90deg,rgba(0,0,0,.2) 0 1.5px,transparent 1.5px 20px),linear-gradient(#7d2535,#561523)}
@media (min-width:700px){body.no3d .hits-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
body.no3d .hit{position:relative;display:block;width:auto;height:auto;color:var(--ink);align-self:end}
.fplate{position:absolute;z-index:3;top:-17px;left:50%;transform:translateX(-50%);min-width:38px;height:28px;padding:0 8px;display:grid;place-items:center;border-radius:5px;font-family:"Young Serif",Georgia,serif;font-size:19px;line-height:1;color:var(--ink);background:linear-gradient(180deg,#f1d58c,var(--brass));box-shadow:0 2px 3px rgba(0,0,0,.45)}
.s-locked .fplate{background:linear-gradient(180deg,#8a6420,var(--brass-dark));color:var(--text)}
.fwin{position:relative;display:block;aspect-ratio:1/.92;perspective:420px;border:4px solid #e7e0d2;border-radius:3px;background:#0d1420;box-shadow:0 5px 0 -1px #e7e0d2,0 7px 4px rgba(0,0,0,.4)}
.fglass{position:absolute;inset:0;display:grid;place-items:center;background:radial-gradient(90% 80% at 50% 60%,#ffe7a6,#f3b24c 70%,#d98c2c)}
.fnote{width:44%;aspect-ratio:.82;display:grid;place-items:center;transform:rotate(-4deg);background:#f3ead6;color:#25344a;font-family:"Patrick Hand",cursive;font-size:30px;line-height:1;box-shadow:0 3px 5px rgba(90,50,10,.45)}
.fleaf{position:absolute;top:0;bottom:0;width:50%;background:repeating-linear-gradient(90deg,rgba(0,0,0,.24) 0 1.5px,transparent 1.5px 15px),#284266;transition:transform .45s cubic-bezier(.3,1.2,.5,1)}
.fl{left:0;transform-origin:0 50%}
.fr{right:0;transform-origin:100% 50%}
.s-open .fl{transform:rotateY(-18deg)}
.s-open .fr{transform:rotateY(18deg)}
.s-open .fwin{box-shadow:0 5px 0 -1px #e7e0d2,0 0 0 3px rgba(236,201,118,.75),0 0 28px rgba(236,201,118,.7)}
.s-started .fl{transform:rotateY(-48deg)}
.s-started .fr{transform:rotateY(48deg)}
.s-solved .fl,.opening .fl{transform:rotateY(-112deg)}
.s-solved .fr,.opening .fr{transform:rotateY(112deg)}
.flock{position:absolute;z-index:2;left:50%;top:50%;width:30%;transform:translate(-50%,-40%)}
.fstars{display:flex;justify-content:center;gap:2px;margin-top:9px;height:16px}
.fst{width:15px;height:15px;fill:#1d2e47;stroke:#8e9db0;stroke-width:1.6}
.fst.on{fill:var(--brass-light);stroke:var(--brass)}
.is-front .fwin{aspect-ratio:1/1.25;border-bottom:0;border-radius:6px 6px 0 0;box-shadow:none}
.is-front .fleaf{background:repeating-linear-gradient(90deg,rgba(0,0,0,.25) 0 1.5px,transparent 1.5px 13px),#2a5a50}
.rattling .fwin{animation:rattle .42s}
@keyframes rattle{15%{transform:translateX(-4px) rotate(-1deg)}35%{transform:translateX(4px) rotate(1deg)}55%{transform:translateX(-3px)}75%{transform:translateX(2px)}}
@media (prefers-reduced-motion:reduce){.fleaf{transition:none}.rattling .fwin{animation:none}}