:root{--bg: #140e1c;--panel: #1f1630;--ink: #120806;--text: #fff8ec;--muted: #b9a9cf;--gold: #ffd23f;--orange: #ff8a1f;--green: #9dff3a;--red: #ff4d5e;--impact: "Gasoek One", "Bagel Fat One", "Noto Sans KR", sans-serif;--display: "Lilita One", "Bagel Fat One", "Noto Sans KR", sans-serif;--safe-t: env(safe-area-inset-top, 0px);--safe-b: env(safe-area-inset-bottom, 0px);color-scheme:dark}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}[hidden]{display:none!important}html,body{margin:0;height:100%;overflow:hidden;background:#08050c;overscroll-behavior:none}body{font-family:Noto Sans KR,system-ui,sans-serif;color:var(--text);user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:none;opacity:0;transition:opacity .3s}body.ready{opacity:1}button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}button:focus-visible{outline:3px solid var(--gold);outline-offset:2px}#app{position:fixed;top:0;right:0;bottom:0;left:0;margin:0 auto;overflow:hidden;background:var(--bg);width:min(100vw,62dvh);height:100dvh;touch-action:none}#stage,#frames,#touch{position:absolute;top:0;right:0;bottom:0;left:0}#stage canvas{display:block}#frames{pointer-events:none}.frame-card{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;border:0;background:var(--bg);pointer-events:auto;will-change:transform}#touch{z-index:2}#app[data-mode=play] #touch,#app[data-mode=paused] #touch{pointer-events:none}.boot-err{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;text-align:center;font-weight:900;line-height:1.6;color:var(--muted)}.ov{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;pointer-events:none;will-change:transform,opacity}.ov>*{position:absolute}.ov-attract{left:0;right:0;bottom:calc(8% + var(--safe-b));display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:0 16px}.ov-title{font-family:var(--impact);font-size:clamp(40px,13vw,64px);line-height:1.05;color:var(--gold);-webkit-text-stroke:9px var(--ink);paint-order:stroke fill;text-shadow:0 6px 0 var(--ink);text-wrap:balance}.ov-best{min-height:1.2em;font-family:var(--display);font-size:17px;color:#fff;-webkit-text-stroke:4px var(--ink);paint-order:stroke fill}.ov-tap{margin-top:6px;padding:12px 30px;border-radius:99px;font-family:var(--display);font-size:24px;color:#fff;background:linear-gradient(#ffe36b,#ffd23a 48%,#ffb81f 52%,#ff9d0f);-webkit-text-stroke:5px #8a3c00;paint-order:stroke fill;box-shadow:0 5px #b06a00,0 10px 24px #0006;animation:tapPulse 1.1s ease-in-out infinite}@keyframes tapPulse{50%{transform:scale(1.07)}}.ov-swipe{font-family:var(--display);font-size:13px;color:var(--muted);-webkit-text-stroke:3px var(--ink);paint-order:stroke fill}.ov-loading{top:0;right:0;bottom:0;left:0;display:grid;place-content:center;justify-items:center;gap:14px;background:radial-gradient(circle at 50% 45%,#2a1d3d,var(--bg) 70%)}.ov-loading-t{font-family:var(--display);font-size:18px;color:var(--muted);text-align:center;padding:0 24px}.spin{width:46px;height:46px;border-radius:50%;border:5px solid rgba(255,255,255,.15);border-top-color:var(--gold);animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.ov-pause-btn{top:calc(10px + var(--safe-t));right:10px;width:44px;height:44px;border-radius:14px;pointer-events:auto;display:flex;align-items:center;justify-content:center;gap:6px;background:#0a06128c;box-shadow:inset 0 0 0 2px #ffffff2e}.ov-pause-btn i{width:6px;height:18px;border-radius:2px;background:#fff}.ov-pause,.r-card{pointer-events:auto;left:50%;top:50%;transform:translate(-50%,-50%);width:min(86%,340px);display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:20px;border-radius:24px;background:linear-gradient(#2a1d3d,#1a1226);box-shadow:0 18px 50px #0000008c,inset 0 0 0 2px #ffffff1a}.p-title{text-align:center;font-family:var(--impact);font-size:30px;color:#fff;-webkit-text-stroke:6px var(--ink);paint-order:stroke fill}.btn{padding:12px;border-radius:16px;font-family:var(--display);font-size:20px;color:#fff;background:#ffffff1a;box-shadow:0 4px #00000059,inset 0 0 0 1.5px #ffffff26;-webkit-text-stroke:4px rgba(10,6,18,.6);paint-order:stroke fill}.btn:active{transform:translateY(3px);box-shadow:0 1px #00000059}.btn.big{font-size:26px;background:linear-gradient(#ffe36b,#ffd23a 48%,#ffb81f 52%,#ff9d0f);-webkit-text-stroke:6px #8a3c00;box-shadow:0 5px #b06a00,inset 0 2px #fff6c2}.ov-result{top:0;right:0;bottom:0;left:0;pointer-events:auto;background:#08040e8c}.ov-result .r-card{position:absolute}.ov-result.pop .r-card{animation:cardIn .35s cubic-bezier(.2,1.5,.4,1)}@keyframes cardIn{0%{transform:translate(-50%,-50%) scale(.7);opacity:0}}.r-score{text-align:center;font-family:var(--impact);font-size:72px;line-height:1;color:var(--gold);-webkit-text-stroke:11px var(--ink);paint-order:stroke fill;text-shadow:0 6px 0 var(--ink)}.r-new{align-self:center;padding:3px 12px;border-radius:99px;font-family:var(--display);font-size:15px;background:var(--red);color:#fff;animation:tapPulse .8s ease-in-out infinite}.r-best{text-align:center;font-family:var(--display);font-size:16px;color:var(--muted)}.r-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px}.tab{padding:7px;border-radius:10px;font-family:var(--display);font-size:15px;color:var(--muted);background:#ffffff0f}.tab.on{color:#fff;background:#ffd23f38;box-shadow:inset 0 0 0 1.5px #ffd23f99}.r-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px;min-height:120px}.r-list li{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:8px;padding:5px 10px;border-radius:10px;background:#ffffff0d;font-variant-numeric:tabular-nums}.r-list li.me{background:#9dff3a29;box-shadow:inset 0 0 0 1.5px #9dff3a80}.r-list b{font-family:var(--display);color:var(--gold);text-align:center}.r-list span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;font-size:14px}.r-list em{font-style:normal;font-family:var(--display)}.r-list .r-off{display:block;text-align:center;color:var(--muted);font-size:14px;padding:18px 8px;background:none}.r-nick{align-self:center;font-size:13px;color:var(--muted);padding:4px 8px}.r-nick-in{align-self:center;width:70%;padding:6px 10px;border-radius:10px;border:0;font:700 15px Noto Sans KR,sans-serif;text-align:center;background:#ffffff1f;color:#fff}.r-swipe{text-align:center;font-family:var(--display);font-size:13px;color:var(--muted)}@media(prefers-reduced-motion:reduce){.ov-tap,.r-new,.spin{animation:none}}
