:root{--night:#141110;--night-raised:#2c2622;--night-line:#453c34;--night-glass:#100d0cd6;--lamp:#ffd86e;--ink-on-lamp:#1f1810;--paper:#fff8e7;--text:#f1e9dc;--text-dim:#b3a896;--danger:#ff7a6b;--radius-pill:999px;--font-ui:"Baloo 2", system-ui, sans-serif;--font-hand:"Itim", "Baloo 2", cursive;--duration-fast:.15s}*{box-sizing:border-box}html,body,#app,#stage{height:100%;margin:0}body{background:var(--night);color:var(--text);font-family:var(--font-ui);overscroll-behavior:none;overflow:hidden}#app{position:relative}#stage{touch-action:none;position:absolute;inset:0}#ui{pointer-events:none;position:absolute;inset:0}#ui>*{pointer-events:auto}#ui>.hud__top,#ui>.hud__notice,#ui>.hud__banner{pointer-events:none}button,input{font:inherit}button{cursor:pointer;transition:transform var(--duration-fast), background var(--duration-fast);border:0}button:hover:not(:disabled){transform:translateY(-1px)}button:active:not(:disabled){transform:translateY(1px)}button:disabled{opacity:.45;cursor:default}:focus-visible{outline:3px solid var(--lamp);outline-offset:2px}.sr-only{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.seat-list:focus-within{clip-path:none;white-space:normal;background:var(--night);border:2px solid var(--night-line);border-radius:12px;flex-wrap:wrap;gap:6px;width:auto;height:auto;max-height:40vh;margin:0;padding:8px;display:flex;top:56px;left:12px;right:12px;overflow:auto}.pill{border-radius:var(--radius-pill);background:var(--night-raised);color:var(--text);padding:8px 14px;font-size:14px;font-weight:700}.pill--lamp{background:var(--lamp);color:var(--ink-on-lamp)}.onboarding{background:radial-gradient(circle at 50% 12%, #3a2d1e, var(--night) 60%);padding:24px 16px 40px;position:absolute;inset:0;overflow-y:auto}.onboarding__panel{gap:18px;max-width:440px;margin:0 auto;display:grid}.onboarding h1{color:var(--lamp);margin:0;font-size:clamp(2rem,1.4rem + 3vw,3rem);line-height:1.05;transform:rotate(-1.5deg)}.onboarding h2{color:var(--text);margin:0 0 8px;font-size:16px}.onboarding__rules{color:var(--text-dim);margin:0;padding-left:20px;font-size:14px;line-height:1.5}.onboarding__crop{flex-wrap:wrap;align-items:center;gap:14px;display:flex}.onboarding__crop canvas{background:var(--night-raised);border:3px solid var(--paper);cursor:grab;touch-action:none;border-radius:8px;width:148px;height:148px;transform:rotate(-2deg)}.onboarding__crop-actions{flex:1;gap:10px;min-width:150px;display:grid}.onboarding__error{color:var(--danger);min-height:1.4em;margin:8px 0 0;font-size:14px}.onboarding__bodies{grid-template-columns:repeat(4,1fr);gap:8px;display:grid}.onboarding__body{color:var(--ink-on-lamp);background:#f4efe0;border-radius:8px;outline:3px solid #0000;justify-items:center;gap:2px;padding:4px;font-size:12px;line-height:1.2;display:grid}.onboarding__body canvas{width:100%;height:auto}.onboarding__body[aria-pressed=true]{box-shadow:0 0 0 3px var(--lamp);background:#fff}.onboarding__body:focus-visible{outline-color:var(--lamp);outline-offset:2px}.onboarding__body[aria-pressed=true]:focus-visible{outline-offset:4px}.onboarding__name{border:2px solid var(--night-line);background:var(--night-raised);width:100%;color:var(--text);border-radius:12px;padding:12px 14px}.onboarding__enter{border-radius:var(--radius-pill);background:var(--lamp);color:var(--ink-on-lamp);padding:14px;font-size:18px;font-weight:700;box-shadow:0 8px 24px #ffd86e40}.file-button{text-align:center;cursor:pointer;display:inline-block}.file-button:focus-within{outline:3px solid var(--lamp);outline-offset:2px}input[type=range]{accent-color:var(--lamp)}.hud__top{top:max(10px, env(safe-area-inset-top));pointer-events:none;justify-content:space-between;gap:8px;display:flex;position:absolute;left:10px;right:10px}.hud__tag{background:var(--night-glass);color:#fff}.hud__move{background:var(--night-glass);min-height:44px;color:var(--lamp);box-shadow:0 0 0 2px var(--lamp);position:absolute;top:42%}.hud__move--left{left:10px}.hud__move--right{right:10px}.hud__bottom{padding:10px 10px max(10px, env(safe-area-inset-bottom));background:linear-gradient(transparent, var(--night-glass) 30%);justify-items:center;gap:8px;display:grid;position:absolute;bottom:0;left:0;right:0}.hud__actions{grid-template-columns:repeat(4,1fr);gap:6px;width:min(100%,520px);display:grid}.hud__actions .pill{padding:8px 4px}.hud__chat{gap:6px;width:min(100%,520px);display:flex}.hud__input{border:2px solid var(--night-line);border-radius:var(--radius-pill);background:var(--night-raised);min-width:0;color:var(--text);flex:1;padding:10px 16px}.hud__input::placeholder{color:var(--text-dim)}.hud__hint{color:var(--ink-on-lamp);background:var(--lamp);border-radius:var(--radius-pill);padding:8px 14px;font-size:13px;font-weight:700}.hud__notice{background:var(--paper);max-width:calc(100% - 24px);color:var(--ink-on-lamp);font-family:var(--font-hand);text-align:center;border-radius:14px;padding:8px 14px;font-size:15px;position:absolute;top:56px;left:50%;transform:translate(-50%)}.hud__banner{text-align:center;color:#7a1f16;background:#f7c331;border:3px solid #d73a2d;border-radius:6px;padding:10px 14px;font-weight:700;position:absolute;top:56px;left:12px;right:12px;transform:rotate(-.6deg)}[hidden]{display:none!important}.person-menu{background:var(--night);border:2px solid var(--night-line);border-radius:14px;gap:6px;min-width:150px;padding:10px;display:grid;position:absolute;box-shadow:0 10px 30px #00000080}.person-menu__name{margin:0;font-weight:700}.fatal{text-align:center;place-items:center;padding:24px;font-size:18px;display:grid;position:absolute;inset:0}@media (prefers-reduced-motion:reduce){*{transition:none!important}}
