:root{color-scheme:light;--ink:#303233;--line:#b5b9bb;--cell:clamp(44px,12vw,56px)}
/* Keep the heading centered independently of the clock. */
header{justify-content:center;padding-left:72px;text-align:center}
.actions,.success-actions{display:flex;justify-content:center;gap:12px;margin-top:26px;flex-wrap:wrap}
.actions button,.success-actions button,.success-actions a{min-height:44px;padding:10px 24px;border:1px solid var(--line);border-radius:3px;background:white;cursor:pointer;touch-action:manipulation;font-size:14px;transition:opacity 150ms;display:flex;align-items:center;justify-content:center;text-decoration:none}
.actions .primary,.success-actions .primary{background:var(--ink);border-color:var(--ink);color:white}
.actions button:disabled{opacity:.3;cursor:default}
[hidden]{display:none!important}
.board.incorrect{animation:incorrect 220ms ease-out}
@keyframes incorrect{25%,75%{transform:translateX(-3px)}50%{transform:translateX(3px)}}
@media(max-width:430px){header{padding-left:56px}.actions,.success-actions{margin-top:22px;gap:10px}.actions button,.success-actions button,.success-actions a{padding:10px 18px}}
@media(prefers-reduced-motion:reduce){.board.incorrect{animation:none}}
*{box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;overscroll-behavior:none}body{position:fixed;inset:0;margin:0;background:#fff;color:var(--ink);font-family:Arial,'Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif}button{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:2px solid #697d8b;outline-offset:6px}.game{width:100%;height:100svh;max-width:800px;margin:auto;padding:clamp(24px,5vh,48px) 24px 32px;overflow:hidden;user-select:none;-webkit-user-select:none}header{position:relative;min-height:64px;padding-right:72px;display:flex;align-items:center}h1{font-size:clamp(16px,2.8vw,21px);font-weight:500;letter-spacing:.04em;line-height:1.8;margin:0}.timer{width:58px;height:58px;position:absolute;right:0;top:0}.timer svg{width:100%;height:100%;overflow:visible}.dial{fill:white;stroke:#b5b9bb;stroke-width:1.2}.ticks{stroke:#9da2a5;stroke-width:1.2}.hand{transform-origin:32px 32px}.hand path{stroke:var(--ink);stroke-width:1.8;stroke-linecap:round}.hand circle{fill:var(--ink)}.timer.running .dial{stroke:var(--ink)}.play-area{display:flex;flex-direction:column;align-items:center;padding-top:clamp(25px,7vh,72px)}.door-frame{position:relative;isolation:isolate;width:174px;height:277px;border:2px solid var(--ink);border-bottom:3px solid var(--ink);padding:5px 5px 0;background:white;perspective:600px}.door{position:relative;display:block;width:100%;height:100%;border:1.5px solid #676c70;border-bottom:0;border-radius:0;background:#fff;cursor:pointer;touch-action:manipulation;transform-origin:left center;transition:transform 850ms ease,background 850ms ease;z-index:2}.door-panel{position:absolute;left:20px;right:20px;border:1px solid #d5d7d8;pointer-events:none}.upper{top:25px;height:112px}.lower{bottom:24px;height:73px}.knob{position:absolute;right:11px;top:53%;width:8px;height:8px;background:var(--ink);border-radius:50%;pointer-events:none}.door.knock{animation:knock 125ms ease-out}.welcome{position:absolute;inset:0;display:grid;place-items:center;letter-spacing:.12em;font-size:18px;opacity:0;transition:opacity 600ms 250ms}.door-frame.open{background:#f8f8f8}.door-frame.open .door{transform:rotateY(-102deg);background:#f4f4f4;pointer-events:none}.door-frame.open .welcome{opacity:1}.tokens{display:flex;justify-content:center;align-items:center;gap:14px;min-height:78px;margin:20px 0 22px}.token{padding:12px;border:0;background:none;width:48px;height:48px;display:grid;place-items:center;cursor:grab;touch-action:none;transition:opacity 180ms,transform 160ms;flex-shrink:0}.square{display:block;position:relative;width:24px;height:24px;border:1.7px solid var(--ink);background:#fff;pointer-events:none}.double:after{content:'';position:absolute;inset:5px;border:1.5px solid var(--ink)}.token:active,.token.selected{transform:translateY(-5px)}.token.used{opacity:0;pointer-events:none}.token.drag-source{opacity:.2}.drag-ghost{position:fixed;margin:0;z-index:10;pointer-events:none;transform:translate(-50%,-50%);filter:drop-shadow(0 4px 3px #0002)}.board{display:flex;gap:9px}.slot{width:var(--cell);height:var(--cell);border:1.5px solid var(--line);border-radius:0;background:white;padding:0;display:grid;place-items:center;touch-action:none;position:relative}.slot.filled:after{content:'';width:52%;height:52%;background:var(--ink)}.slot.drop-target{border-color:var(--ink);background:#f1f3f4}.slot.reveal:after{animation:fill 240ms ease-out both;animation-delay:var(--delay,0ms)}.board.complete .slot{border-color:var(--ink)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@keyframes knock{40%{transform:translateX(2px)}75%{transform:translateX(-1px)}}@keyframes fill{from{transform:scale(.25);opacity:0}to{transform:scale(1);opacity:1}}@media(max-width:430px){.game{padding:24px 20px 28px}header{padding-right:56px;min-height:50px}h1{max-width:270px;font-size:16px;letter-spacing:0}.timer{width:44px;height:44px}.play-area{padding-top:42px}.door-frame{width:156px;height:252px}.tokens{margin-top:14px;margin-bottom:14px;gap:10px}}@media(max-height:650px){.game{padding-top:16px}.play-area{padding-top:15px}.door-frame{width:142px;height:218px}.upper{height:83px;top:20px}.lower{height:60px;bottom:20px}.tokens{margin:8px 0;min-height:65px}}@media(prefers-reduced-motion:reduce){.door,.welcome{transition:none}.door.knock,.slot.reveal:after{animation:none}}