@font-face{font-family:U;src:url(fonts/Unbounded-sub.woff2) format("woff2");font-weight:200 900;font-display:swap;unicode-range:U+0-7E,U+A0-FF}
@font-face{font-family:P;src:url(fonts/Pretendard-sub.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{--o:#6C3BFF;--k:#0d0d0d;--bg:#f2f1ee;--l:#d6d4cf;--g:#7d7b76;--gold:#FFC533}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--k);font-family:P,-apple-system,"Apple SD Gothic Neo","Noto Sans KR",sans-serif;touch-action:none;-webkit-user-select:none;user-select:none;overscroll-behavior:none}
canvas#c{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;display:block}
.hidden{display:none!important}
.panel{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:18px;background:rgba(242,241,238,.82);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:20;overflow:auto;touch-action:pan-y}
.card{width:min(420px,100%);background:#fff;border:2px solid var(--k);border-radius:26px;padding:22px 22px 18px;box-shadow:8px 8px 0 var(--o);text-align:center}
.logo{font-family:U,P,sans-serif;font-weight:800;letter-spacing:-.02em;font-size:15px}
.logo span,.brand span{color:var(--o)}
.logo.small{font-size:12px}
h1{font-family:U,P,sans-serif;font-weight:900;font-size:34px;margin:10px 0 2px;letter-spacing:-.03em;line-height:1}
h1 em{font-style:normal;color:var(--o)}
h2{font-family:U,P,sans-serif;font-size:22px;margin:8px 0 10px}
.sub{margin:6px 0 4px;color:var(--g);font-size:14px}
#preview{width:240px;height:150px;display:block;margin:4px auto}
label{display:block;text-align:left;font-size:13px;font-weight:700;margin:6px 2px 6px}
input{width:100%;font:inherit;font-size:17px;padding:13px 14px;border:2px solid var(--k);border-radius:14px;outline:none;background:var(--bg)}
input:focus{border-color:var(--o)}
.cta{width:100%;margin-top:12px;font:inherit;font-weight:800;font-size:18px;padding:14px;border:2px solid var(--k);border-radius:16px;background:var(--o);color:#fff;box-shadow:4px 4px 0 var(--k);cursor:pointer}
.cta:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--k)}
.status{margin-top:10px;font-size:13px;color:var(--g)}
.note{margin-top:8px;font-size:13px;font-weight:700;color:#9a6a00;background:#FFF3CC;border-radius:10px;padding:6px}
.howto{margin-top:12px;font-size:12.5px;color:var(--g);line-height:1.6;text-align:left;background:var(--bg);border-radius:14px;padding:10px 12px}
.howto b{color:var(--k)}
.slogan{margin-top:14px;font-family:U,P,sans-serif;font-weight:700;font-size:12px;letter-spacing:.02em}
.proto{margin-top:6px;font-size:11px;color:var(--g)}
#hud{position:fixed;inset:0;pointer-events:none;z-index:10}
.top{position:absolute;top:calc(env(safe-area-inset-top) + 8px);left:10px;right:10px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.brand{font-family:U,P,sans-serif;font-weight:800;font-size:12px;background:#fff;border:2px solid var(--k);border-radius:999px;padding:6px 10px}
.timer{font-family:U,P,sans-serif;font-weight:800;font-size:16px;background:var(--k);color:#fff;border-radius:999px;padding:6px 14px;min-width:84px;text-align:center}
.meta{display:flex;flex-direction:column;align-items:flex-end;font-size:11px;font-weight:700;background:#fff;border:2px solid var(--k);border-radius:12px;padding:3px 8px;line-height:1.3}
.progress{position:absolute;top:calc(env(safe-area-inset-top) + 50px);left:16px;right:16px;height:22px}
.track{position:relative;height:6px;margin-top:8px;background:rgba(13,13,13,.15);border-radius:6px}
.track .flag{position:absolute;right:-8px;top:-10px;font-size:16px}
.dot{position:absolute;top:-5px;width:12px;height:12px;margin-left:-6px;border-radius:50%;border:2px solid var(--k)}
.dot.me{width:18px;height:18px;top:-8px;margin-left:-9px;border-width:3px;z-index:3}
.dot.ar{border-color:var(--gold);box-shadow:0 0 0 2px var(--k);z-index:2}
.banner{position:absolute;top:calc(env(safe-area-inset-top) + 80px);left:50%;transform:translateX(-50%);background:var(--gold);border:2px solid var(--k);border-radius:999px;padding:6px 14px;font-weight:800;font-size:13px;white-space:nowrap;box-shadow:3px 3px 0 var(--k)}
.big{position:absolute;top:34%;left:0;right:0;text-align:center;font-family:U,P,sans-serif;font-weight:900;font-size:min(22vw,120px);color:var(--o);-webkit-text-stroke:3px var(--k);text-shadow:6px 6px 0 var(--k)}
.big.small{font-size:min(9vw,44px);-webkit-text-stroke:2px var(--k);text-shadow:4px 4px 0 var(--k)}
.toast{position:absolute;top:44%;left:50%;transform:translateX(-50%);background:#fff;border:2px solid var(--k);border-radius:14px;padding:8px 14px;font-weight:800;font-size:15px;box-shadow:3px 3px 0 var(--o)}
#touch{position:fixed;left:0;right:0;bottom:0;height:150px;z-index:15;pointer-events:none}
.tb{pointer-events:auto;position:absolute;bottom:calc(env(safe-area-inset-bottom) + 18px);width:78px;height:78px;border-radius:50%;border:3px solid var(--k);background:rgba(255,255,255,.86);font:inherit;font-size:28px;font-weight:900;color:var(--k);touch-action:none}
.tb.on{background:var(--o);color:#fff}
#bl{left:16px}#br{left:106px}
.jump{right:18px;width:96px;height:96px;font-size:20px;background:rgba(108,59,255,.92);color:#fff}
.jump.on{background:var(--k)}
.res ol{list-style:none;margin:0;padding:0;max-height:46vh;overflow:auto;text-align:left}
.res li{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;font-weight:700;font-size:15px}
.res li:nth-child(odd){background:var(--bg)}
.res li.me{outline:3px solid var(--o)}
.res li.ar{background:#FFF3CC}
.res .pl{font-family:U,P,sans-serif;width:34px;font-weight:900}
.res .sw{width:16px;height:16px;border-radius:50%;border:2px solid var(--k);flex:none}
.res .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.res .tm{font-family:ui-monospace,Menlo,monospace;font-size:13px;color:var(--g)}
.resArtist{background:var(--gold);border:2px solid var(--k);border-radius:12px;padding:6px 10px;font-weight:800;font-size:13px;margin-bottom:10px}
.next{margin-top:12px;font-size:13px;color:var(--g)}
#msg p{font-weight:700}