:root{--ink:#23271f;--cream:#f7f3e8;--glass:#22281e6b;--glass-strong:#1e241bb8;--line:#ffffff2e;--green:#2f6b4f;--green-2:#3f8a66;--gold:#ffd560;--rose:#ff8fa3;--font:"Noto Sans KR", system-ui, -apple-system, sans-serif;--soft:"Gowun Dodum", "Noto Sans KR", sans-serif}*{box-sizing:border-box}html,body,#root{height:100%;font-family:var(--font);color:#fff;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;background:#bcd3d9;margin:0;overflow:hidden}canvas{touch-action:none}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:0}input{font:inherit}.hud{z-index:50;pointer-events:none;position:fixed;inset:0}.hud>*{pointer-events:auto}.pill{background:var(--glass);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:999px;align-items:center;gap:12px;padding:9px 16px;font-size:14px;display:flex;position:absolute}.top-left{top:max(14px, env(safe-area-inset-top));left:16px}.top-left .title{letter-spacing:-.02em;font-weight:800}.top-left .room{opacity:.8}.top-left .count{font-variant-numeric:tabular-nums;opacity:.9}.top-right{top:max(14px, env(safe-area-inset-top));gap:4px;padding:6px 8px;right:16px}.top-right button{border-radius:50%;width:34px;height:34px;font-size:16px}.top-right button:hover{background:#ffffff24}.phase-banner{white-space:nowrap;top:max(14px, env(safe-area-inset-top));text-align:center;text-shadow:0 2px 10px #00000073;position:absolute;left:50%;transform:translate(-50%);pointer-events:none!important}.phase-banner .main{font-family:var(--soft);font-size:22px;font-weight:700}.phase-banner .sub{opacity:.92;margin-top:2px;font-size:13px}.phase-banner.countdown .main{color:var(--gold);font-size:72px;line-height:1;animation:1s infinite pop}@keyframes pop{0%{opacity:.4;transform:scale(1.35)}25%{opacity:1;transform:scale(1)}}.lineup{background:var(--glass);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:16px;width:268px;max-height:calc(100% - 230px);padding:6px;font-size:13px;position:absolute;top:70px;right:16px;overflow:auto}.lineup.closed{width:auto}.lineup-head .short{display:none}.lineup-head{justify-content:space-between;width:100%;padding:6px 8px;font-weight:800;display:flex}.lineup .row{border-radius:10px;align-items:center;gap:8px;padding:6px;display:flex}.lineup .row.picked{background:#ff8fa32e}.lineup .row.mine{background:#ffd56033}.lineup .pos{text-align:right;font-variant-numeric:tabular-nums;opacity:.85;width:14px;font-weight:800}.gate{color:#fff;text-shadow:0 1px 2px #00000080;border-radius:6px;flex:none;place-items:center;width:22px;height:22px;font-size:12px;font-weight:800;display:inline-grid}.lineup .who{flex-direction:column;flex:1;min-width:0;line-height:1.2;display:flex}.lineup .who small{opacity:.72;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.lineup .dist{font-variant-numeric:tabular-nums;opacity:.85;font-size:12px}.heart{font-variant-numeric:tabular-nums;text-align:center;background:#ffffff1f;border-radius:999px;min-width:44px;padding:4px 8px;font-size:12px}.heart.on{background:var(--rose);color:#4a1420;font-weight:800}.heart.static{opacity:.7;background:0 0}.lineup-tip{opacity:.7;padding:6px 8px 4px;font-size:11px;line-height:1.4}.bottom{bottom:max(16px, env(safe-area-inset-bottom));flex-direction:column;align-items:center;gap:8px;max-width:calc(100% - 24px);display:flex;position:absolute;left:50%;transform:translate(-50%)}.bottom .bar{background:var(--glass);-webkit-backdrop-filter:blur(10px);border:1px solid var(--line);border-radius:999px;align-items:center;gap:4px;padding:8px;display:flex}.act{border-radius:14px;flex-direction:column;align-items:center;gap:2px;width:58px;padding:4px 0;font-size:12px;display:flex}.act .ic{font-size:20px;line-height:1}.act:hover,.act:active{background:#ffffff24}.say input{border:1px solid var(--line);color:#fff;background:#ffffff1f;border-radius:999px;outline:none;width:130px;height:38px;padding:0 14px}.say input::placeholder{color:#fff9}.enter{background:var(--gold);height:42px;color:var(--ink);white-space:nowrap;border-radius:999px;margin-left:4px;padding:0 18px;font-weight:800}.enter.on{background:#ffffffd9}.enter:disabled{opacity:.5;cursor:default}.cams{background:var(--glass);border:1px solid var(--line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:999px;gap:4px;padding:4px;display:flex}.cams button{border-radius:999px;padding:6px 12px;font-size:12px}.cams button.on{color:var(--ink);background:#fff;font-weight:800}.hint{opacity:.85;text-shadow:0 1px 6px #00000080;pointer-events:none;font-size:12px}.rider-hud{position:absolute;inset:0;pointer-events:none!important}.rider-stats{left:16px;top:calc(max(14px, env(safe-area-inset-top)) + 54px);background:var(--glass-strong);border:1px solid var(--line);pointer-events:auto;border-radius:18px;align-items:center;gap:14px;padding:12px 16px;display:flex;position:absolute}.rider-stats .big{color:var(--gold);font-variant-numeric:tabular-nums;font-size:40px;font-weight:800;line-height:1}.rider-stats .big small{margin-left:2px;font-size:16px}.rider-stats .cols{font-variant-numeric:tabular-nums;font-size:13px;line-height:1.6}.gauge{width:160px;font-size:11px}.gauge label{opacity:.8;margin-top:2px;display:block}.gauge .track{background:#ffffff26;border-radius:99px;height:8px;overflow:hidden}.gauge .fill{border-radius:99px;height:100%;transition:width 80ms linear}.fill.speed{background:linear-gradient(90deg,#7fd4a1,#ffd560,#ff7b54)}.fill.stamina{background:#8fd0ff}.fill.stamina.low{background:#ff7b54}.lr{bottom:max(18px, env(safe-area-inset-bottom));align-items:center;gap:14px;display:flex;position:absolute;left:50%;transform:translate(-50%)}.lr .key{background:var(--glass);border:2px solid var(--line);border-radius:20px;flex-direction:column;justify-content:center;align-items:center;width:82px;height:82px;transition:transform 60ms,background .1s;display:flex}.lr .key span{opacity:.8;font-size:11px}.lr .key b{font-size:30px}.lr .key.next{border-color:var(--gold);box-shadow:0 0 0 4px #ffd56040}.lr .key.hit{background:var(--gold);color:var(--ink);transform:scale(.94)}.lr .key.miss{background:#ff5a46b3;transform:scale(.94)}.lr-tip{text-align:center;text-shadow:0 1px 6px #0009;width:210px;font-size:13px;font-weight:600}.lr-tip small{opacity:.8;margin-top:4px;font-weight:400;display:block}.horse-tag{transform-origin:bottom;color:#fff;white-space:nowrap;font-size:13px;font-family:var(--font);background:#1418129e;border-radius:999px;align-items:center;gap:5px;padding:3px 8px 3px 3px;display:flex}.horse-tag .gate{width:20px;height:20px}.horse-tag .rider{opacity:.75;font-size:11px}.horse-tag .cheer{color:var(--rose);font-size:12px;font-weight:800}.horse-tag .rank{background:var(--gold);color:var(--ink);border-radius:99px;padding:0 6px;font-weight:800}.horse-tag.mine{outline:2px solid var(--gold)}.horse-tag.picked{outline:2px solid var(--rose)}.avatar-tag{transform-origin:bottom;font-family:var(--font);flex-direction:column;align-items:center;gap:4px;display:flex}.avatar-tag .name{color:var(--ink);white-space:nowrap;background:#ffffffe0;border-radius:999px;align-items:center;gap:4px;padding:2px 8px 2px 3px;font-size:12px;display:flex}.avatar-tag .name:not(.me){padding-left:8px}.me-dot{background:var(--green);color:#fff;border-radius:50%;place-items:center;width:18px;height:18px;font-size:10px;display:inline-grid}.avatar-tag .bubble{max-width:180px;color:var(--ink);font-size:13px;font-family:var(--soft);white-space:normal;word-break:keep-all;text-align:center;background:#fff;border-radius:14px;padding:6px 10px;animation:.25s ease-out rise;box-shadow:0 2px 10px #0003}@keyframes rise{0%{opacity:0;transform:translateY(6px)}}.results{width:min(420px,100% - 32px);color:var(--ink);background:#f7f3e8f5;border-radius:22px;padding:20px 22px;animation:.3s ease-out rise;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 20px 60px #0000004d}.results h2,.modal h2{font-family:var(--soft);margin:0 0 12px;font-size:22px}.results table,.modal table{border-collapse:collapse;width:100%;font-size:14px}.results td,.modal td,.modal th{text-align:left;border-bottom:1px solid #00000012;padding:7px 6px}.modal th{opacity:.6;font-size:12px;font-weight:600}.results .rk{text-align:center;width:32px;font-weight:800}.results .rd{opacity:.65;font-size:12px}.results .tm{text-align:right;font-variant-numeric:tabular-nums}.results tr.mine{background:#ffd56059}.results tr.picked{background:#ff8fa340}.results .yay{background:var(--rose);color:#4a1420;border-radius:12px;margin-bottom:10px;padding:8px 12px;font-size:13px;font-weight:700}.x{opacity:.5;font-size:24px;position:absolute;top:10px;right:14px}.modal-wrap{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#141c1459;place-items:center;display:grid;position:absolute;inset:0}.modal{background:var(--cream);width:min(400px,100% - 32px);color:var(--ink);border-radius:24px;padding:26px 24px 20px;position:relative;box-shadow:0 24px 70px #00000059}.modal.intro{flex-direction:column;gap:14px;width:min(440px,100% - 24px);max-height:calc(100vh - 24px);display:flex;overflow-y:auto}.logo{align-items:center;gap:12px;display:flex}.logo-mark{background:var(--green);border-radius:16px;place-items:center;width:54px;height:54px;font-size:30px;display:grid}.logo h1{font-family:var(--soft);margin:0;font-size:26px}.logo p{opacity:.7;margin:2px 0 0;font-size:13px}.modal label{opacity:.85;flex-direction:column;gap:6px;font-size:12px;font-weight:600;display:flex}.modal input{height:42px;color:var(--ink);outline-color:var(--green);background:#fff;border:1px solid #00000024;border-radius:12px;padding:0 14px;font-size:15px}.swatches{flex-wrap:wrap;gap:8px;display:flex}.swatches button{border:2px solid #0000001a;border-radius:50%;width:30px;height:30px}.swatches button.on{outline:3px solid var(--green);outline-offset:2px}.primary{background:var(--green);color:#fff;border-radius:14px;height:50px;font-size:16px;font-weight:800}.primary:hover{background:var(--green-2)}.fine{opacity:.55;text-align:center;font-size:11px}.warn{color:#8a2b14;background:#ffe1d6;border-radius:10px;padding:8px 12px;font-size:13px}.tabs{gap:6px;margin-bottom:8px;display:flex}.tabs button{background:#0000000f;border-radius:999px;padding:6px 14px;font-size:13px}.tabs button.on{background:var(--green);color:#fff;font-weight:700}.empty{opacity:.6;font-size:14px}.toast{background:var(--glass-strong);border:1px solid var(--line);white-space:nowrap;border-radius:999px;padding:10px 18px;font-size:14px;font-weight:600;animation:.25s ease-out rise;position:absolute;top:92px;left:50%;transform:translate(-50%);pointer-events:none!important}.loading{font-family:var(--soft);text-shadow:0 2px 10px #0006;place-items:center;font-size:18px;display:grid;position:absolute;inset:0}@media (width<=720px){.lineup{top:auto;left:8px;right:8px;bottom:calc(var(--stack,166px) + 6px);grid-template-rows:auto repeat(4,auto) auto;grid-template-columns:1fr 1fr;grid-auto-flow:column;gap:4px 6px;width:auto;max-height:none;padding:6px;font-size:12px;display:grid;overflow:visible}.lineup.closed{display:block;left:auto}.lineup-head{grid-area:1/1/auto/-1;padding:2px 4px 4px;font-size:12px}.lineup-head .short{display:none}.lineup .row{background:#ffffff12;grid-template-columns:auto auto minmax(0,1fr) auto;grid-template-areas:"pos gate who tail";align-items:center;column-gap:5px;min-width:0;padding:4px 6px;display:grid}.lineup .row .pos{grid-area:pos;width:auto;min-width:8px}.lineup .row>.gate{grid-area:gate;width:20px;height:20px;font-size:11px}.lineup .row .who{grid-area:who}.lineup .row .who small{display:none}.lineup .row .who b{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.lineup .row .follow{grid-column:gate/who;gap:5px;min-width:0;margin:0;padding:0}.lineup .row .follow .gate{width:20px;height:20px;font-size:11px}.lineup .row .dist,.lineup .row .heart{grid-area:tail;justify-self:end;font-size:11px}.lineup .row .heart{min-width:0;padding:2px 7px}.lineup .row .heart.static{display:none}.lineup-tip{word-break:keep-all;grid-area:6/1/auto/-1;padding:2px 4px 0;font-size:11px;line-height:1.4}.phase-banner{top:58px}.phase-banner .main{font-size:18px}.bottom .bar{gap:2px;max-width:calc(100vw - 16px);padding:6px}.act{width:40px;font-size:11px}.say input{width:58px;padding:0 10px}.enter{height:38px;padding:0 10px;font-size:13px}.rider-stats{justify-content:space-between;top:100px;left:8px;right:8px}.gauge{width:120px}.lr .key{width:64px;height:64px}.lr-tip{width:150px;font-size:12px}}.act.on{color:var(--ink);background:#ffffffd9}.bino-mask{width:100%;height:100%;position:absolute;inset:0;pointer-events:none!important}.bino-bar{top:calc(max(14px, env(safe-area-inset-top)) + 64px);background:var(--glass-strong);border:1px solid var(--line);white-space:nowrap;border-radius:999px;align-items:center;gap:6px;padding:6px 6px 6px 14px;font-size:13px;display:flex;position:absolute;left:50%;transform:translate(-50%)}.bino-target{font-weight:700}.bino-zoom{font-variant-numeric:tabular-nums;opacity:.8;margin-right:4px}.bino-bar button{background:#ffffff24;border-radius:999px;min-width:32px;height:32px;font-size:15px}.bino-bar .bino-close{padding:0 12px;font-size:13px}.lineup .follow{text-align:left;border-radius:8px;flex:1;align-items:center;gap:8px;min-width:0;margin:-2px -4px;padding:2px 4px;display:flex}.lineup .follow:hover{background:#ffffff1f}.lineup .row.following{background:#8fd0ff40;outline:1px solid #8fd0ffb3}.cpick{flex-direction:column;gap:10px;display:flex}.cpick-main{gap:10px;display:flex}.cpick-sv{cursor:crosshair;touch-action:none;border-radius:12px;flex:1;height:120px;position:relative;overflow:hidden}.cpick-sv-white,.cpick-sv-black{pointer-events:none;position:absolute;inset:0}.cpick-sv-white{background:linear-gradient(90deg,#fff,#fff0)}.cpick-sv-black{background:linear-gradient(#0000,#000)}.cpick-knob,.cpick-hue-knob{pointer-events:none;border:3px solid #fff;border-radius:50%;width:18px;height:18px;position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 0 1px #0000004d,0 2px 6px #0000004d}.cpick-hue-knob{top:50%}.cpick-side{flex-direction:column;gap:8px;width:92px;display:flex}.cpick-preview{border:1px solid #0000001f;border-radius:12px;flex:1}.modal .cpick-hex{text-transform:uppercase;text-align:center;height:34px;padding:0 8px;font-family:ui-monospace,monospace;font-size:13px}.cpick-hue{cursor:pointer;touch-action:none;background:linear-gradient(90deg,red,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red);border-radius:99px;height:16px;position:relative}.cpick .swatches button{width:24px;height:24px}.field{flex-direction:column;gap:6px;display:flex}.field-label{opacity:.85;font-size:12px;font-weight:600}.servers{grid-template-columns:1fr 1fr;gap:8px;max-height:228px;padding-right:2px;display:grid;overflow-y:auto}.server{color:var(--ink);text-align:left;background:#fff;border:1.5px solid #0000001a;border-radius:14px;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 12px;display:flex;position:relative;overflow:hidden}.server b{font-size:15px}.server span{opacity:.65;font-size:12px}.server.on{border-color:var(--green);background:#eaf4ee;box-shadow:0 0 0 2px #2f6b4f33}.server:disabled{opacity:.45;cursor:default}.server-bar{background:var(--green-2);opacity:.6;height:3px;position:absolute;bottom:0;left:0}button.top-left{cursor:pointer}button.top-left:hover{background:#22281e99}.servers-modal .sub{opacity:.7;margin:-4px 0 14px;font-size:13px}.servers-modal .servers{max-height:60vh}.servers-head{justify-content:space-between;align-items:center;margin-bottom:10px;font-size:13px;font-weight:600;display:flex}.servers-head button{background:#0000000f;border-radius:99px;padding:4px 10px;font-size:12px}.legal{opacity:.7;text-align:center;word-break:keep-all;background:#0000000a;border-radius:10px;margin-top:-6px;padding:8px 12px;font-size:11px;line-height:1.5}.modal.intro>*,.modal.intro .field>*{flex-shrink:0}.servers{grid-auto-rows:max-content}.top-right button.off{opacity:.4;text-decoration:line-through}.top-right button.on{background:#ffffff38}.sound-panel{top:calc(max(14px, env(safe-area-inset-top)) + 54px);z-index:30;border:1px solid var(--line);-webkit-backdrop-filter:blur(10px);background:#1a1f18f2;border-radius:18px;width:260px;padding:12px 14px 10px;animation:.2s ease-out rise;position:absolute;right:16px;box-shadow:0 12px 36px #00000059}.sound-head{justify-content:space-between;align-items:center;margin-bottom:8px;font-size:14px;display:flex}.sound-head button{opacity:.7;width:28px;height:28px;font-size:20px}.vol-row{align-items:center;gap:10px;padding:6px 0;display:flex}.vol-icon{background:#ffffff24;border-radius:50%;flex:none;width:36px;height:36px;font-size:17px}.vol-main{flex:1;min-width:0}.vol-label{justify-content:space-between;margin-bottom:4px;font-size:12px;display:flex}.vol-label span:last-child{font-variant-numeric:tabular-nums;opacity:.75}.vol-row.off .vol-main{opacity:.5}.vol-main input[type=range]{appearance:none;background:linear-gradient(to right, var(--gold) var(--pct), #fff3 var(--pct));cursor:pointer;border-radius:99px;outline:none;width:100%;height:6px}.vol-main input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:#fff;border-radius:50%;width:18px;height:18px;box-shadow:0 1px 4px #00000059}.vol-main input[type=range]::-moz-range-thumb{background:#fff;border:0;border-radius:50%;width:18px;height:18px}.sound-tip{opacity:.6;margin-top:4px;font-size:11px}@media (width<=720px){.sound-panel{width:min(260px,100% - 16px);right:8px}}.cams button{white-space:nowrap}@media (width<=720px){.say input{font-size:13px}}.period-tabs{background:#0000000f;border-radius:12px;grid-template-columns:1fr 1fr;gap:4px;margin-bottom:10px;padding:4px;display:grid}.period-tabs button{opacity:.6;border-radius:9px;padding:8px 0;font-size:14px;font-weight:700}.period-tabs button.on{opacity:1;background:#fff;box-shadow:0 1px 4px #0000001f}.period-info{justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:10px;font-size:13px;display:flex}.period-info span{opacity:.6;white-space:nowrap;font-size:11px}@media (width<=720px){.bino-bar{top:calc(max(14px, env(safe-area-inset-top)) + 50px);max-width:calc(100vw - 16px);font-size:12px}.bino-bar button{min-width:30px;height:30px}.hud.bino-on .phase-banner{top:calc(max(14px, env(safe-area-inset-top)) + 98px)}}