:root{--p1:#ff6b5e;--p2:#3d9bff;--ink:#1d2738;--dim:#5b6577;--line:#e1e6ee;--font:"Inter", "Pretendard", system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif}*{box-sizing:border-box}html,body{height:100%;font-family:var(--font);color:var(--ink);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:none;background:#5ca8f2;margin:0;overflow:hidden}canvas#c{display:block;position:fixed;top:0;left:0}button{font:inherit;color:inherit;cursor:pointer}.split-line{background:#fff;width:4px;margin-left:-2px;display:none;position:fixed;top:0;bottom:0;left:50%;box-shadow:0 0 12px #00000040}.is-split .split-line{display:block}.hud{top:max(8px, env(safe-area-inset-top));left:max(8px, env(safe-area-inset-left));-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff;z-index:5;pointer-events:none;background:#141c2a9e;border-radius:10px;flex-direction:column;gap:2px;min-width:108px;padding:5px 6px 4px;display:flex;position:fixed}.score{align-items:center;gap:6px;line-height:1.25;display:flex}.score i{border-radius:50%;flex-shrink:0;width:7px;height:7px}.score.p1 i{background:var(--p1)}.score.p2 i{background:var(--p2)}.score .name{white-space:nowrap;text-overflow:ellipsis;flex:1;max-width:64px;font-size:12px;font-weight:700;overflow:hidden}.score em{text-align:center;color:#ffd84d;background:#ffffff2e;border-radius:4px;min-width:14px;padding:0 3px;font-size:11px;font-style:normal;font-weight:800}.score em:empty{display:none}.score b{text-align:right;font-variant-numeric:tabular-nums;min-width:18px;font-size:16px;font-weight:900}.hint{color:#ffffffbf;white-space:nowrap;border-top:1px solid #ffffff2e;margin-top:1px;padding-top:3px;font-size:10px;font-weight:700}.is-split .hud{left:50%;transform:translate(-50%)}.topbtns{top:max(10px, env(safe-area-inset-top));right:max(10px, env(safe-area-inset-right));z-index:5;gap:6px;display:flex;position:fixed}.topbtns button{background:#ffffffdb;border:0;border-radius:12px;padding:8px 11px;font-size:13px;font-weight:700;box-shadow:0 4px 14px #143c642e}.call{color:#ffd84d;letter-spacing:.02em;white-space:nowrap;pointer-events:none;opacity:0;z-index:6;background:#0f1624c7;border-radius:12px;padding:10px 26px;font-size:30px;font-weight:900;position:fixed;top:38%;left:50%;transform:translate(-50%,-50%)}.call.show{animation:2.2s ease-out forwards call}@keyframes call{0%{opacity:0;transform:translate(-50%,-50%)scale(.8)}12%{opacity:1;transform:translate(-50%,-50%)scale(1.05)}20%{transform:translate(-50%,-50%)scale(1)}80%{opacity:1}to{opacity:0}}@media (height<=500px){.call{padding:7px 16px;font-size:20px}}.level-section{display:none}.mode-cpu .level-section{display:block}.online-guest .seg[data-setting=format]{pointer-events:none;opacity:.5}#btn-center{display:none}.look-manual #btn-center{display:block}.look-seg{margin-top:8px}.view-tv .look-seg{display:none}.toasts{pointer-events:none;z-index:4;position:fixed;inset:0}.toast{color:#fff;-webkit-text-stroke:1.5px #141e3299;text-shadow:0 4px 16px #00000059;white-space:nowrap;font-size:34px;font-weight:900;animation:1s ease-out forwards pop;position:absolute;top:22%;transform:translate(-50%)}@media (height<=500px){.toast{font-size:22px;top:16%}.topbtns button{border-radius:10px;padding:6px 8px;font-size:12px}}@keyframes pop{0%{opacity:0;transform:translate(-50%,12px)scale(.7)}15%{opacity:1;transform:translate(-50%)scale(1.1)}70%{opacity:1;transform:translate(-50%,-10px)scale(1)}to{opacity:0;transform:translate(-50%,-30px)scale(1)}}.pads{display:none}.is-touch.playing .pads{display:block}.pad{pointer-events:none;z-index:3;height:190px;position:fixed;bottom:0}.solo .pad[data-pad="0"]{left:0;right:0}.solo .pad[data-pad="1"]{display:none}.duo .pad[data-pad="0"]{width:50%;left:0}.duo .pad[data-pad="1"]{width:50%;right:0}.vs-cpu .pad[data-pad="1"]{display:none}.stick{left:max(18px, env(safe-area-inset-left));bottom:max(18px, env(safe-area-inset-bottom));pointer-events:auto;touch-action:none;background:#ffffff24;border:2px solid #ffffff73;border-radius:50%;width:128px;height:128px;position:absolute}.knob{background:#ffffffd9;border-radius:50%;width:54px;height:54px;margin:-27px 0 0 -27px;position:absolute;top:50%;left:50%;box-shadow:0 4px 12px #0003}.pad .btns{right:max(18px, env(safe-area-inset-right));bottom:max(18px, env(safe-area-inset-bottom));pointer-events:auto;align-items:flex-end;gap:12px;display:flex;position:absolute}.pad .btns button{color:#fff;touch-action:none;background:#1d273873;border:0;border-radius:50%;width:66px;height:66px;font-size:14px;font-weight:800}.pad .btns .swing{width:88px;height:88px;font-size:17px}.pad[data-pad="0"] .swing{background:var(--p1)}.pad[data-pad="1"] .swing{background:var(--p2)}.pad .btns button.down{filter:brightness(.85);transform:scale(.92)}.overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:10;touch-action:pan-y;background:#14325a61;place-items:center;padding:16px;transition:opacity .25s;display:grid;position:fixed;inset:0;overflow-y:auto}.overlay.hidden{opacity:0;pointer-events:none}.card{-webkit-user-select:none;user-select:none;background:#fff;border-radius:24px;width:min(640px,100%);margin:auto;padding:22px 22px 18px;box-shadow:0 20px 60px #14325a59}.card.small{text-align:center;width:min(420px,100%)}header{text-align:center;margin-bottom:10px}.emoji{margin:0;font-size:38px;line-height:1}h1{letter-spacing:-.02em;margin:6px 0 2px;font-size:28px;font-weight:900}.sub{color:var(--dim);margin:0;font-size:14px}section{margin-top:14px}.label{color:var(--dim);margin:0 0 7px;font-size:13px;font-weight:700}.note{color:var(--dim);min-height:1em;margin:6px 2px 0;font-size:12px}.seg{background:#f1f4f8;border-radius:13px;gap:6px;padding:4px;display:flex}.seg button{min-width:0;color:var(--dim);background:0 0;border:0;border-radius:10px;flex:1;padding:10px 6px;font-size:14px;font-weight:700}.seg button.on{color:var(--ink);background:#fff;box-shadow:0 1px 4px #0000001f}.seg.small button{padding:7px 4px;font-size:13px}.players{grid-template-columns:1fr 1fr;gap:10px;display:grid}.pcard{border:2px solid var(--line);border-radius:16px;flex-direction:column;gap:10px;padding:12px;display:flex}.pcard[data-player="0"]{border-color:#ffd2cd}.pcard[data-player="1"]{border-color:#cfe5ff}.pcard.drop{background:#f6faff;border-style:dashed}.is-touch .paste-hint{display:none}.paste-hint{color:var(--dim);margin:0;font-size:11px}.pcard.paste-target .paste-hint{color:var(--ink);font-weight:700}.ptitle{align-items:center;gap:6px;margin:0;font-size:15px;display:flex}.dot{border-radius:50%;width:10px;height:10px}.pcard[data-player="0"] .dot{background:var(--p1)}.pcard[data-player="1"] .dot{background:var(--p2)}.face-row{align-items:center;gap:10px;display:flex}canvas.face{width:64px;height:64px;box-shadow:0 0 0 3px #fff, 0 0 0 5px var(--line);border-radius:50%;flex-shrink:0}.face-btns{flex-direction:column;gap:6px;min-width:0;display:flex}.file,.reset-face{border:1px solid var(--line);text-align:center;cursor:pointer;white-space:nowrap;background:#fff;border-radius:9px;padding:6px 9px;font-size:12px;font-weight:700}.swatches{flex-wrap:wrap;gap:7px;display:flex}.swatches button{width:26px;height:26px;box-shadow:0 0 0 1px var(--line);border:3px solid #fff;border-radius:50%;padding:0}.swatches button.on{box-shadow:0 0 0 2px var(--ink)}.check{cursor:pointer;align-items:center;gap:6px;font-size:13px;font-weight:600;display:flex}.check input{width:17px;height:17px;accent-color:var(--p2)}.cpu-card .face-btns,.cpu-card .check{display:none}.privacy{color:var(--dim);text-align:center;margin:8px 2px 0;font-size:11px}.start{color:#fff;background:linear-gradient(135deg, var(--p1), var(--p2));border:0;border-radius:14px;width:100%;margin-top:14px;padding:14px;font-size:18px;font-weight:900;display:block;box-shadow:0 8px 24px #3d9bff59}.start.alt{color:var(--ink);border:2px solid var(--line);box-shadow:none;background:#fff}.row{gap:8px;display:flex}.keys{color:var(--dim);margin-top:12px;font-size:13px}.keys summary{cursor:pointer;font-weight:700}.keys table{border-collapse:collapse;width:100%;margin-top:8px}.keys td,.keys th{border-top:1px solid var(--line);text-align:left;padding:4px 6px}kbd{min-width:22px;font:700 11px var(--font);text-align:center;color:var(--ink);background:#fff;border:1px solid #d5dbe4;border-bottom-width:3px;border-radius:5px;padding:0 5px;display:inline-block}.classic{text-align:center;color:var(--dim);margin-top:10px;font-size:12px;display:block}.online{background:#f7fbff;border:2px solid #d9e8ff;border-radius:16px;padding:12px;display:none}.mode-online .online{display:block}.on-idle{flex-wrap:wrap;gap:8px;display:flex}.online.in-room .on-idle,.on-room{display:none}.online.hosting .on-room{display:block}.obtn{border:1px solid var(--line);background:#fff;border-radius:11px;padding:11px 14px;font-size:14px;font-weight:800}.obtn.primary{color:#fff;background:var(--p2);border:0;flex:1}.obtn.small{padding:7px 10px;font-size:12px}.join{flex:1.3;gap:6px;min-width:220px;display:flex}.join input{border:1px solid var(--line);min-width:0;font:800 18px var(--font);letter-spacing:.2em;text-transform:uppercase;-webkit-user-select:text;user-select:text;border-radius:11px;flex:1;padding:0 12px}.room-info{align-items:center;gap:14px;display:flex}#on-qr{background:#fff;border-radius:10px;flex-shrink:0;width:132px;height:132px}.room-label{color:var(--dim);margin:0;font-size:12px;font-weight:700}.room-code{letter-spacing:.15em;-webkit-user-select:text;user-select:text;margin:2px 0 8px;font-size:34px;font-weight:900}.room-btns{gap:6px;display:flex}.room-tip{color:var(--dim);margin:8px 0 0;font-size:12px}.on-status{color:var(--dim);margin:10px 0 0;font-size:13px;font-weight:700}.on-status:empty{display:none}.on-status.ok{color:#1f9d55}.on-status.err{color:#d64545}.on-opp{align-items:center;gap:10px;margin-top:8px;font-size:14px;font-weight:700;display:none}.online.connected .on-opp{display:flex}.on-opp canvas{width:44px;height:44px}.link-btn{color:var(--dim);background:0 0;border:0;margin-top:8px;padding:0;font-size:12px;text-decoration:underline;display:none}.online.in-room .link-btn{display:inline-block}.mode-online .pcard[data-player="1"]{display:none}.mode-online .players{grid-template-columns:1fr}.start:disabled{opacity:.45;cursor:default}.ios-tip{color:var(--dim);text-align:center;margin:6px 2px 0;font-size:11px;display:none}.is-ios .ios-tip{display:block}.rotate{display:none}@media (orientation:portrait) and (pointer:coarse){.playing .rotate{z-index:100;color:#fff;background:#5ca8f2;place-items:center;font-size:18px;font-weight:700;display:grid;position:fixed;inset:0}}@media (width<=560px){.players{grid-template-columns:1fr}}@media (height<=520px){.card{padding:14px}header .emoji{display:none}}