:root{--bg:#1a1414;--fg:#efe3c8;--pink:#e89aa0;--accent:#c4553a;--btn:#2f5d8a;--gutter-x:max(8px, env(safe-area-inset-left), env(safe-area-inset-right));--gutter-y:max(8px, env(safe-area-inset-top), env(safe-area-inset-bottom))}html,body{background:var(--bg);color:var(--fg);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;margin:0;font-family:ui-monospace,Hiragino Sans,monospace}main{padding:var(--gutter-y) var(--gutter-x);box-sizing:border-box;flex-direction:column;justify-content:center;align-items:center;gap:10px;min-height:100dvh;display:flex}.screen{--reserve-y:0px;width:min(100%, (100dvh - 2 * var(--gutter-y) - var(--reserve-y)) * 16 / 9);aspect-ratio:16/9;position:relative;container-type:inline-size}#view{width:100%;height:100%;image-rendering:pixelated;touch-action:none;cursor:pointer;display:block}.hud{text-shadow:1px 1px 0 var(--bg);pointer-events:none;background:linear-gradient(#1a1414b3,#1a141400);align-items:center;gap:1.2em;padding:.5em 1em 1.2em;font-size:clamp(10px,2cqw,18px);display:flex;position:absolute;top:0;left:0;right:0}#mute{font:inherit;color:var(--fg);border:1px solid var(--fg);cursor:pointer;pointer-events:auto;background:#1a141499;margin-left:auto;padding:.2em .7em;font-size:.9em}#msg{text-align:center;color:var(--accent);text-shadow:2px 2px 0 var(--bg), -1px -1px 0 var(--bg);pointer-events:none;font-size:clamp(12px,3cqw,26px);font-weight:700;position:absolute;top:16%;left:0;right:0}#overlay{pointer-events:none;text-align:center;background:#1a14148c;flex-direction:column;justify-content:center;align-items:center;gap:.5em;font-size:clamp(12px,2.6cqw,24px);display:flex;position:absolute;inset:0}#overlay[hidden]{display:none}#logo{width:62cqw;height:auto;image-rendering:pixelated;display:block}#logo[hidden],#overlay h1[hidden]{display:none}#overlay h1{letter-spacing:.08em;color:var(--fg);text-shadow:.1em .1em 0 var(--accent);margin:0;font-size:2.4em}#overlay p{margin:0}#stages{pointer-events:auto;flex-wrap:wrap;justify-content:center;gap:.5em;display:flex}#stages button{font:inherit;border:.15em solid var(--bg);cursor:pointer;padding:.4em .8em;font-size:.85em;font-weight:700}#stages button[aria-pressed=true]{border-color:var(--fg);box-shadow:.2em .2em 0 var(--bg);transform:translate(-.1em,-.1em)}#howto-open{font:inherit;color:var(--fg);border:1px solid var(--fg);cursor:pointer;pointer-events:auto;background:#1a141499;padding:.3em .9em;font-size:.8em}#overlay .blink{font-weight:700;animation:1s steps(2,start) infinite blink}@keyframes blink{to{visibility:hidden}}#howto{overscroll-behavior:contain;background:var(--bg);font-size:clamp(10px,1.7cqw,16px);display:flex;position:absolute;inset:0;overflow-y:auto}#howto[hidden]{display:none}#howto .panel{text-align:center;flex-direction:column;align-items:center;gap:.8em;width:94%;margin:auto;padding:.8em 0;display:flex}#howto h2{text-shadow:.08em .08em 0 var(--accent);margin:0;font-size:1.8em}#howto p{margin:0}#howto .flavor{color:var(--pink);font-style:italic}#howto .lead b{color:var(--accent)}#howto .cards{gap:1.2em;width:100%;display:flex}#howto figure{flex-direction:column;flex:1;gap:.5em;margin:0;display:flex}#howto canvas{width:100%;height:auto;image-rendering:pixelated;border:2px solid var(--fg);box-sizing:border-box;display:block}#howto figcaption{text-align:left;opacity:.9;line-height:1.45}#howto figcaption b{color:var(--accent);opacity:1;font-size:1.1em;display:block}#howto .rules{opacity:.85}#howto-close{font:inherit;background:var(--accent);color:var(--fg);border:.15em solid var(--fg);box-shadow:.2em .2em 0 var(--bg);cursor:pointer;padding:.4em 1.6em;font-size:1.1em;font-weight:700}#rotate{z-index:10;background:var(--bg);text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:24px;font-size:14px;display:none;position:fixed;inset:0}#rotate p{opacity:.8;margin:0}#rotate .title{opacity:1;text-shadow:2px 2px 0 var(--accent);font-size:20px;font-weight:700}#rotate .phone{border:4px solid var(--fg);width:44px;height:76px;box-shadow:4px 4px 0 var(--accent);border-radius:8px;margin-bottom:16px;animation:2.4s ease-in-out infinite rotate-phone}@keyframes rotate-phone{0%,25%{transform:rotate(0)}55%,85%{transform:rotate(-90deg)}to{transform:rotate(0)}}@media (orientation:portrait) and (pointer:coarse){#rotate{display:flex}}body.debug .screen{--reserve-y:200px}#debug{flex-wrap:wrap;justify-content:center;gap:6px;max-width:960px;display:flex}#debug[hidden]{display:none}#debug button{font:inherit;background:var(--btn);color:var(--fg);cursor:pointer;border:0;padding:6px 10px;font-size:12px}