:root{--bg:#0f1424;--panel:#121628d1;--panel-border:#ffffff14;--text:#f3f4f8;--muted:#9aa0b4;--o:#4cc9f0;--x:#f25f5c;--c:#c9c9d6;--accent:#ffd166;font-family:Noto Sans KR,system-ui,-apple-system,sans-serif}*{box-sizing:border-box}html,body{background:var(--bg);height:100%;color:var(--text);margin:0;overflow:hidden}#app{position:fixed;inset:0}#app canvas{display:block}#ui{pointer-events:none;position:fixed;inset:0}#ui button{pointer-events:auto}.label{color:#fff;text-shadow:0 1px 3px #000c;white-space:nowrap;-webkit-user-select:none;user-select:none;flex-direction:column;align-items:center;gap:2px;font-size:12px;font-weight:700;display:flex;transform:translateY(-6px)}.label .streak-badge{background:#0000008c;border:1px solid #ffffff26;border-radius:999px;padding:1px 7px;font-size:11px}.label.bot{opacity:.6}.label.me .name-text{color:var(--accent)}.label .streak-badge.hot{background:#d97706;border-color:#fbbf24}.label .streak-badge.crown{background:#b45309;border-color:#fde68a}.label .streak-badge.crown:before{content:"👑 "}.board{background:var(--panel);border:1px solid var(--panel-border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);text-align:center;border-radius:18px;width:min(680px,100% - 400px);padding:14px 18px 12px;position:absolute;top:16px;left:50%;transform:translate(-50%)}.board-top{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.chip{color:var(--accent);background:#ffd1661f;border-radius:999px;padding:3px 10px;font-size:12px;font-weight:700}.online{color:var(--muted);font-size:12px}.question{word-break:keep-all;min-height:1.4em;font-size:clamp(18px,2.6vw,26px);font-weight:900;line-height:1.35}.timer{background:#ffffff14;border-radius:999px;height:6px;margin-top:12px;overflow:hidden}.timer-bar{background:linear-gradient(90deg, var(--o), var(--accent), var(--x));transform-origin:0;width:100%;height:100%}.timer-text{color:var(--muted);font-variant-numeric:tabular-nums;margin-top:6px;font-size:12px}.ranking{background:var(--panel);border:1px solid var(--panel-border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:14px;width:170px;padding:10px 12px;position:absolute;top:16px;right:16px}.ranking-title{color:var(--muted);letter-spacing:.08em;margin-bottom:6px;font-size:11px;font-weight:700}.ranking ol{flex-direction:column;gap:4px;margin:0;padding:0;list-style:none;display:flex}.ranking li{justify-content:space-between;font-size:12px;display:flex}.ranking li .n{color:var(--text);text-overflow:ellipsis;white-space:nowrap;max-width:110px;overflow:hidden}.ranking li .s{color:var(--accent);font-variant-numeric:tabular-nums;font-weight:700}.ranking li.is-me .n{color:var(--accent)}.toasts{flex-direction:column;gap:6px;max-width:280px;display:flex;position:absolute;top:16px;left:16px}.toast{background:var(--panel);border:1px solid var(--panel-border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:12px;padding:8px 12px;font-size:13px;animation:.25s ease-out toast-in}.toast.break{border-color:#f25f5c80}.toast.bonus{border-color:#ffd16680}@keyframes toast-in{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}.reveal{text-align:center;pointer-events:none;animation:.35s cubic-bezier(.2,1.4,.4,1) reveal-in;position:absolute;top:42%;left:50%;transform:translate(-50%,-50%)}.reveal.hidden{display:none}.reveal-answer{text-shadow:0 8px 40px #0009;font-size:clamp(96px,18vw,180px);font-weight:900;line-height:1}.reveal-answer.O{color:var(--o)}.reveal-answer.X{color:var(--x)}.reveal-sub{color:var(--text);text-shadow:0 2px 8px #000c;margin-top:6px;font-size:16px;font-weight:700}@keyframes reveal-in{0%{opacity:0;transform:translate(-50%,-50%)scale(.6)}to{opacity:1;transform:translate(-50%,-50%)scale(1)}}.hud-me{flex-direction:column;align-items:center;gap:10px;width:min(720px,100% - 32px);display:flex;position:absolute;bottom:16px;left:50%;transform:translate(-50%)}.me-card{background:var(--panel);border:1px solid var(--panel-border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:14px;align-items:center;gap:16px;padding:8px 14px;display:flex}.name{color:var(--accent);font:inherit;cursor:pointer;background:0 0;border:0;border-radius:8px;padding:4px 6px;font-size:15px;font-weight:900}.name:hover{background:#ffffff0f}.stats{gap:14px;display:flex}.stat{flex-direction:column;align-items:center;min-width:40px;display:flex}.stat-label{color:var(--muted);font-size:10px}.stat-value{font-variant-numeric:tabular-nums;font-size:18px;font-weight:900}.passes{gap:4px;margin-top:6px;display:flex}.passes i{background:#ffffff1f;border-radius:50%;width:10px;height:10px;display:block}.passes i.on{background:var(--accent)}.controls{gap:10px;display:flex}.zone-btn{min-width:96px;height:56px;font:inherit;color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:2px solid #0000;border-radius:16px;font-size:22px;font-weight:900;transition:transform .12s,filter .12s}.zone-btn:active{transform:scale(.96)}.zone-btn:disabled{opacity:.4;cursor:default}.zone-O{border-color:var(--o);background:#1a5c8cd9}.zone-X{border-color:var(--x);background:#962d30d9}.zone-C{border-color:var(--c);background:#3c4054d9;font-size:16px}.zone-btn.active{filter:brightness(1.4);box-shadow:0 0 0 3px #ffffff40}.hint{color:#e6e8f0;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#121628b3;border-radius:999px;padding:4px 12px;font-size:11px}@media (width<=900px){.ranking{display:none}.board{width:calc(100% - 32px)}}@media (width<=600px){.board{padding:10px 12px;top:10px}.hud-me{bottom:10px}.hint{display:none}.me-card{gap:10px}}.label .bubble{margin-bottom:2px;font-size:22px;line-height:1;animation:.3s cubic-bezier(.2,1.6,.4,1) bubble-pop;display:none}.label .bubble.show{display:block}@keyframes bubble-pop{0%{opacity:0;transform:scale(.3)translateY(8px)}to{opacity:1;transform:none}}.fountain-label{color:#fff;white-space:nowrap;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#121628b3;border-radius:999px;padding:3px 10px;font-size:13px;font-weight:700}.action{font:inherit;color:#1b1b1f;background:var(--accent);cursor:pointer;border:0;border-radius:999px;padding:8px 16px;font-size:14px;font-weight:700;animation:.2s ease-out toast-in;box-shadow:0 4px 14px #00000040}.action.hidden{display:none}.emotes{flex-direction:column;gap:8px;display:flex;position:absolute;bottom:16px;right:16px}.emote-btn{border:1px solid var(--panel-border);background:var(--panel);cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:14px;width:48px;height:48px;font-size:22px;transition:transform .12s}.emote-btn:hover{transform:scale(1.08)}.emote-btn:active{transform:scale(.94)}@media (width<=600px){.emotes{flex-direction:row;bottom:150px;left:50%;right:auto;transform:translate(-50%)}.emote-btn{width:42px;height:42px;font-size:20px}}.ad{pointer-events:auto}.ad.hidden{display:none}.ad-side{width:300px;height:250px;position:absolute;top:236px;right:16px}.ad-anchor{background:#12162899;border-radius:8px 8px 0 0;width:320px;height:50px;position:absolute;bottom:0;left:50%;transform:translate(-50%)}body.has-anchor-ad .hud-me,body.has-anchor-ad .emotes{bottom:60px}@media (width<=1099px){.ad-side{display:none}}@media (width>=1100px){.ad-anchor{display:none}}