:root{--bg: #1f2630;--bg-2: #283240;--panel: #2f3a4a;--text: #eef2f6;--muted: #8f9bab;--accent: #f6c445;--accent-text: #1f2630;--arrow-on: #3d9bff;--arrow-off: #1f4f80;--arrow-hover: #2a6cb0;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;height:100%}body{background:radial-gradient(ellipse at 40% 30%,var(--bg-2),var(--bg) 70%);color:var(--text);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;overflow:hidden}#app{height:100%;display:grid;grid-template-rows:1fr auto;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}.stage{display:flex;align-items:center;justify-content:center;gap:clamp(16px,4vw,48px);min-height:0;padding:16px}#character{height:100%;max-height:min(78vh,760px);width:auto;max-width:60vw;overflow:visible}#character [data-part]{cursor:pointer}.glow-rig{pointer-events:none}.glow-rig [data-part]{visibility:hidden}.glow-rig [data-part].lit{visibility:visible;filter:url(#glow-blur)}.glow-rig [data-part] *{fill:#fff;stroke:#fff;stroke-width:18px;stroke-linejoin:round;stroke-linecap:round;opacity:1}.extra{pointer-events:none}button{font:inherit;font-weight:600;color:var(--text);background:var(--panel);border:2px solid transparent;border-radius:999px;padding:12px 20px;cursor:pointer;transition:background .15s,color .15s,border-color .15s,opacity .15s,transform .1s;min-height:44px}button:hover:not(:disabled){border-color:var(--accent)}button:active:not(:disabled){transform:scale(.97)}button:disabled{opacity:.4;cursor:default}button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}#randomize{background:var(--accent);color:var(--accent-text);padding:16px 24px;font-size:1.05rem;min-width:11ch;white-space:nowrap}#randomize:disabled{background:var(--panel);color:var(--muted)}.side-panel{display:flex;flex-direction:column;align-items:center;gap:24px}.facing{position:relative;width:240px}.facing-svg{display:block;width:100%;height:auto;overflow:visible}.facing-tile{fill:#ffffff09;stroke:#ffffff0f;stroke-width:1}.facing-label{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-weight:600;color:var(--muted);letter-spacing:.02em;pointer-events:none}.facing-btn{cursor:pointer;outline:none}.facing-hit{fill:transparent;stroke:none;pointer-events:all}.facing-btn polygon{fill:var(--arrow-off);stroke:var(--arrow-off);transition:fill .15s,stroke .15s}.facing-btn:hover polygon{fill:var(--arrow-hover);stroke:var(--arrow-hover)}.facing-btn.active polygon{fill:var(--arrow-on);stroke:var(--arrow-on)}.facing-btn:focus-visible polygon{stroke:var(--accent)}.animations{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;padding:12px 16px calc(16px + env(safe-area-inset-bottom))}.animations button.active{background:var(--accent);color:var(--accent-text)}.dot,.float,.drip,.pulse,.fall,.pop{transform-box:fill-box;transform-origin:center}.dot{animation:dot 1.2s ease-in-out infinite}@keyframes dot{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}.float{animation:float 2s ease-in-out infinite}@keyframes float{0%{transform:translateY(8px) scale(.6);opacity:0}30%{opacity:1}to{transform:translateY(-34px) scale(1.1);opacity:0}}.drip{animation:drip 1.4s ease-in infinite}@keyframes drip{0%{transform:translateY(0);opacity:1}to{transform:translateY(22px);opacity:0}}.pulse{animation:pulse .5s ease-in-out infinite}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.25)}}.fall{animation:fall 1.6s ease-in infinite}@keyframes fall{0%{transform:translateY(0) scale(.6);opacity:0}20%{opacity:1;transform:translateY(2px) scale(1)}to{transform:translateY(38px) scale(1);opacity:0}}.pop{animation:pop .6s ease-in-out infinite}@keyframes pop{0%,to{transform:scale(1)}50%{transform:scale(1.18)}}@media(max-width:700px){.stage{flex-direction:column;gap:12px}.side-panel{flex-direction:row;gap:16px}#character{max-width:90vw;max-height:60vh}button{padding:10px 14px}}.sheet-page{overflow:auto;height:auto;min-height:100%;background:#1f2630;padding:24px 32px}.sheet-page h1{margin:0 0 4px;font-size:1.6rem}.sheet-sub{margin:0 0 20px;color:var(--muted)}.sheet-table{border-collapse:separate;border-spacing:12px 10px}.sheet-table thead td{color:var(--muted);font-weight:600;text-align:center;padding-bottom:4px}.sheet-label{color:var(--text);font-weight:600;white-space:nowrap;vertical-align:middle;padding-right:8px}.sheet-cell{display:block;background:#283240;border-radius:12px;overflow:hidden}
