[hidden]{display:none!important}.screens{z-index:20;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);-webkit-overflow-scrolling:touch;background:#0a0b0d9e;position:absolute;inset:0;overflow:hidden auto}.screen-content{place-items:center;min-height:100%;padding:16px;animation:.2s ease-out backwards panel-in;display:grid}.card{background:var(--surface);border-radius:20px;flex-direction:column;gap:18px;width:min(440px,100%);min-width:0;padding:22px 20px 24px;display:flex}@keyframes panel-in{0%{opacity:0;transform:translateY(8px)}}.card h1{letter-spacing:-.01em;font-size:26px;font-weight:700;line-height:1.15}.game-title{justify-content:center;margin:0;display:flex}.logo{letter-spacing:-.02em;align-items:center;gap:.3em;font-size:clamp(28px,8.5vw,38px);font-weight:800;line-height:1;display:inline-flex}.logo-small{font-size:20px}.logo-mark{flex:none;width:1.25em;height:1.25em;display:block}.logo-mark svg{width:100%;height:100%;display:block}.logo-accent{color:var(--accent)}.subtitle,.hint{color:var(--muted);font-size:14px;line-height:1.5}.screen-top{justify-content:space-between;align-items:center;gap:8px;min-height:44px;margin:-8px 0 -6px;display:flex}.actions{flex-direction:column;gap:8px;display:flex}.provider-button{justify-content:center;min-height:44px;display:flex}.btn{border-radius:var(--radius-sm);background:var(--surface-2);min-height:50px;color:var(--text);font:500 16px/1.2 var(--font);text-align:left;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;border:0;justify-content:flex-start;align-items:center;gap:10px;padding:0 16px;transition:background-color .12s;display:flex;position:relative}.btn-primary{background:var(--accent);color:var(--accent-ink);font-weight:650}.btn-ghost{min-height:44px;color:var(--muted);background:0 0;padding:0 6px;font-size:15px}.screen-top .btn-ghost:first-child:before{content:"‹";margin-right:2px;font-size:1.4em;line-height:.8}.btn-secondary:active:not(:disabled){background:var(--surface-3)}.btn-primary:active:not(:disabled){background:#e3b53f}.btn-ghost:active:not(:disabled){color:var(--text)}@media (hover:hover){.btn-secondary:not(:disabled):hover{background:var(--surface-3)}.btn-primary:not(:disabled):hover{background:#f8d064}.btn-ghost:not(:disabled):hover{color:var(--text)}}.btn:focus-visible,.lang-option:focus-visible,.tab:focus-visible,.chip:focus-visible,.swatch:focus-visible,.country-row:focus-visible,.select-btn:focus-visible,.icon-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-badge{background:var(--surface-3);color:var(--muted);border-radius:999px;margin-left:auto;padding:3px 8px;font-size:12px;font-weight:500}.btn-text{text-align:left;flex-direction:column;align-items:flex-start;gap:3px;min-width:0;display:flex}.btn-desc{opacity:.72;font-size:13px;font-weight:400;line-height:1.3}.btn:has(.btn-text){justify-content:space-between;padding-top:10px;padding-bottom:10px}.btn-pips{flex-shrink:0;gap:3px;display:flex}.pip{opacity:.18;background:currentColor;border-radius:2px;width:4px;height:14px}.pip.on{opacity:.9}.lang-switch{border-radius:var(--radius-sm);background:var(--surface-2);gap:2px;margin-left:auto;padding:3px;display:flex}.lang-option{min-width:48px;min-height:38px;color:var(--muted);font:600 14px/1 var(--font);cursor:pointer;touch-action:manipulation;background:0 0;border:0;border-radius:9px;padding:0 12px}.lang-option.active{background:var(--surface-3);color:var(--text)}.field{flex-direction:column;gap:8px;display:flex}.field>label,.option-title{color:var(--muted);margin:0;font-size:13px;font-weight:500}.field-row{align-items:stretch;gap:8px;display:flex}.text-input{border-radius:var(--radius-sm);background:var(--surface-2);min-width:0;min-height:50px;color:var(--text);font:500 16px var(--font);border:1px solid #0000;flex:1;padding:0 14px}.field-row>.text-input{width:0}.text-input:focus{border-color:var(--accent);outline:none}.field-error{min-height:18px;color:var(--loss);font-size:13px}.icon-btn{border-radius:var(--radius-sm);background:var(--surface-2);width:50px;min-height:50px;color:var(--text);cursor:pointer;touch-action:manipulation;border:0;flex:none;place-items:center;display:grid}.select-btn{border-radius:var(--radius-sm);background:var(--surface-2);min-height:50px;color:var(--text);font:500 16px var(--font);text-align:left;cursor:pointer;touch-action:manipulation;border:0;align-items:center;gap:12px;padding:0 14px;display:flex}.flag{background-position:50%;background-size:cover;border-radius:3px;flex:none;width:28px;height:20px}.player-card{align-items:center;gap:12px;display:flex}.coin-amount{font-variant-numeric:tabular-nums;white-space:nowrap;align-items:center;gap:6px;font-weight:650;display:inline-flex}.coin-icon{width:1.15em;height:1.15em;color:var(--accent);flex:none;display:block}.coin-icon svg{width:100%;height:100%;display:block}.store-wallet{align-items:center;gap:6px;display:flex}.coin-add{background:var(--accent);width:40px;height:40px;color:var(--accent-ink);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;border:0;border-radius:50%;place-items:center;display:grid}.coin-add svg{stroke-width:2.6px;width:20px;height:20px}.coin-add:active{background:#e3b53f}.coin-add:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.coin-shop .overlay-panel{-webkit-overflow-scrolling:touch;width:min(480px,100%);overflow-y:auto}.coin-shop-balance{align-self:flex-start}.skin-grid.pack-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.menu-coins,.store-balance{background:var(--surface-2);border-radius:999px;padding:7px 12px;font-size:15px}.menu-coins{margin-left:auto}.player-info{min-width:0}.player-name{text-overflow:ellipsis;white-space:nowrap;font-size:19px;font-weight:650;line-height:1.2;overflow:hidden}.player-tag{color:var(--muted);font-size:13px}.player-rating{font-variant-numeric:tabular-nums}.overlay{z-index:30;background:#0a0b0db8;place-items:center;padding:12px;display:grid;position:fixed;inset:0}.overlay-panel{background:var(--surface);border-radius:20px;flex-direction:column;gap:12px;width:min(440px,100%);max-height:88vh;padding:16px 16px 18px;display:flex}.overlay-header{justify-content:space-between;align-items:center;display:flex}.overlay-header h2{font-size:20px;font-weight:650}.country-list{-webkit-overflow-scrolling:touch;flex-direction:column;max-height:58vh;display:flex;overflow-y:auto}.country-row{min-height:48px;color:var(--text);font:400 16px var(--font);text-align:left;cursor:pointer;touch-action:manipulation;background:0 0;border:0;border-radius:10px;align-items:center;gap:12px;padding:0 10px;display:flex}.country-row.selected{background:var(--surface-2);font-weight:600}.country-row:active{background:var(--surface-3)}.empty{color:var(--muted);padding:18px 10px}.toast{left:50%;bottom:calc(64px + env(safe-area-inset-bottom));z-index:40;border-radius:var(--radius-sm);background:var(--surface-3);max-width:min(88vw,420px);padding:11px 16px;font-size:14px;font-weight:500;animation:.18s ease-out both toast-in;position:fixed;transform:translate(-50%)}@keyframes toast-in{0%{opacity:0;transform:translate(-50%,6px)}}.menu-button{top:calc(max(12px, env(safe-area-inset-top)) + 48px);left:max(12px, env(safe-area-inset-left));background:var(--hud-bg);width:42px;height:42px;color:var(--text);cursor:pointer;pointer-events:auto;-webkit-tap-highlight-color:transparent;border:0;border-radius:50%;place-items:center;display:grid;position:absolute}.volume-row{align-items:center}.quick-chat-button{top:calc(max(12px, env(safe-area-inset-top)) + 96px);left:max(12px, env(safe-area-inset-left));background:var(--hud-bg);width:42px;height:42px;color:var(--text);cursor:pointer;pointer-events:auto;-webkit-tap-highlight-color:transparent;border:0;border-radius:50%;place-items:center;display:grid;position:absolute}.quick-chat-button[hidden]{display:none}.quick-chat-panel{z-index:3;top:calc(max(12px, env(safe-area-inset-top)) + 96px);left:calc(max(12px, env(safe-area-inset-left)) + 50px);border-radius:var(--radius);background:var(--surface);pointer-events:auto;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;width:min(300px,100vw - 86px);padding:8px;display:none;position:absolute}.quick-chat-panel.open{display:grid}.quick-chat-item{border-radius:var(--radius-sm);background:var(--surface-2);min-height:42px;color:var(--text);font:500 14px/1.2 var(--font);text-align:left;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;border:0;padding:0 10px}.quick-chat-item:active{background:var(--surface-3)}@media (hover:hover){.quick-chat-item:hover{background:var(--surface-3)}}.quick-chat-feed{top:calc(max(12px, env(safe-area-inset-top)) + 146px);left:max(12px, env(safe-area-inset-left));pointer-events:none;flex-direction:column;align-items:flex-start;gap:4px;max-width:min(70vw,320px);display:flex;position:absolute}.quick-chat-line{background:var(--hud-bg);border-radius:999px;padding:5px 10px;font-size:14px;animation:.2s ease-out panel-in}.quick-chat-name{color:var(--muted);margin-right:6px;font-weight:600}.quick-chat-line.mine .quick-chat-name{color:var(--accent)}@media (width<=520px){.quick-chat-button,.quick-chat-panel{top:calc(max(12px, env(safe-area-inset-top)) + 48px)}.quick-chat-feed{top:calc(max(12px, env(safe-area-inset-top)) + 98px)}.menu-button{top:max(12px, env(safe-area-inset-top))}}.gesture polyline{stroke:#ffffff59;stroke-width:6px;stroke-linecap:round;stroke-linejoin:round}.gesture circle{fill:#ffffff59}.gesture.valid polyline,.gesture.valid circle{stroke:#ffffffe6;fill:#ffffffe6}.gesture.valid polyline{fill:none}.gesture.topspin polyline,.gesture.topspin circle{stroke:#ff6b5bf2;fill:#ff6b5bf2}.gesture.backspin polyline,.gesture.backspin circle{stroke:#5ab0fff2;fill:#5ab0fff2}.gesture.sidespin polyline,.gesture.sidespin circle{stroke:#ffd23ff2;fill:#ffd23ff2}.gesture.topspin polyline,.gesture.backspin polyline,.gesture.sidespin polyline{fill:none}.timing-label{z-index:5;letter-spacing:-.01em;white-space:nowrap;text-shadow:0 1px 2px #000000b3;pointer-events:none;font-size:clamp(22px,5.5vw,32px);font-weight:750;animation:.9s ease-out forwards timing-rise;position:absolute;transform:translate(-50%,-50%)}.timing-perfect{color:var(--win)}.timing-streak{font-size:clamp(26px,6.5vw,38px);animation:.22s ease-out timing-pop,1s ease-out forwards timing-rise}@keyframes timing-pop{0%{scale:1.35}}.timing-good{color:var(--text);font-size:clamp(17px,4.2vw,23px);font-weight:650}.timing-early,.timing-late{color:var(--accent)}.timing-tooEarly,.timing-tooLate{color:var(--loss)}@keyframes timing-rise{0%{opacity:0;transform:translate(-50%,-40%)}12%{opacity:1;transform:translate(-50%,-60%)}to{opacity:0;transform:translate(-50%,-150%)}}.tournament-card{width:min(500px,100%)}.tour-banner{font-size:18px;font-weight:650}.tour-banner.won{color:var(--win)}.tour-banner.champion{color:var(--accent)}.tour-banner.lost{color:var(--loss)}.tour-list{flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.tour-row{border-radius:var(--radius-sm);grid-template-columns:auto 1fr auto;grid-template-areas:"round who mark""round meta mark";align-items:center;column-gap:12px;min-height:54px;padding:6px 10px;font-size:14px;display:grid}.tour-row+.tour-row{margin-top:2px}.tour-round{min-width:52px;color:var(--muted);grid-area:round;font-size:13px;font-weight:500}.tour-who{grid-area:who;align-items:center;gap:8px;min-width:0;display:flex}.tour-name{text-overflow:ellipsis;white-space:nowrap;font-size:16px;font-weight:600;overflow:hidden}.tour-meta{color:var(--muted);grid-area:meta;font-size:12px}.tour-mark{font-variant-numeric:tabular-nums;grid-area:mark;font-size:16px;font-weight:650}.tour-row.current{background:var(--surface-2)}.tour-row.current .tour-round{color:var(--accent)}.tour-row.won .tour-mark{color:var(--win)}.tour-row.lost .tour-mark{color:var(--loss)}.tour-row.upcoming{color:var(--muted)}.level-meter{grid-template-columns:auto 1fr;grid-template-areas:"badge bar""badge xp";align-items:center;gap:5px 12px;display:grid}.level-badge{background:var(--surface-2);border-radius:999px;grid-area:badge;place-items:center;min-width:48px;padding:7px 10px;font-size:14px;font-weight:650;display:grid}.level-bar{background:var(--surface-2);border-radius:999px;grid-area:bar;height:6px;overflow:hidden}.level-fill{background:var(--accent);border-radius:999px;height:100%;transition:width .6s ease-out}.level-xp{color:var(--muted);font-variant-numeric:tabular-nums;grid-area:xp;font-size:12px}.screens:has(.result-card){animation:.5s ease-out both result-backdrop}@keyframes result-backdrop{0%{background-color:#0000}}.screen-content:has(.result-card){animation-delay:.1s}.result-card h1{font-size:30px}.result-card.won h1{color:var(--win)}.result-card.lost h1{color:var(--loss)}.result-score{letter-spacing:-.02em;font-variant-numeric:tabular-nums;font-size:64px;font-weight:700;line-height:1}.result-xp{color:var(--accent);font-size:22px;font-weight:650}.result-breakdown{grid-template-columns:1fr auto;margin:0;font-size:14px;display:grid}.result-breakdown dt,.result-breakdown dd{border-bottom:1px solid var(--line);padding:8px 0}.result-breakdown dt{color:var(--muted)}.result-breakdown dd{text-align:right;font-variant-numeric:tabular-nums;margin:0;font-weight:600}.result-rating{font-variant-numeric:tabular-nums;justify-content:center;align-items:baseline;gap:8px;font-size:18px;font-weight:650;display:flex}.result-card.won .result-rating-delta{color:var(--win)}.result-card.lost .result-rating-delta{color:var(--loss)}.level-up{border-radius:var(--radius-sm);color:var(--accent);background:#f4c64e1f;padding:10px 14px;font-size:16px;font-weight:650}@media (prefers-reduced-motion:reduce){:is(.screen-content,.toast,.screens:has(.result-card)){animation:none}}.racket-points{color:var(--accent);font-size:17px;font-weight:650}.stat-list{flex-direction:column;display:flex}.stat-row{border-bottom:1px solid var(--line);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 12px;padding:14px 0;display:flex}.stat-row:last-child{border-bottom:0}.stat-info{flex:140px;min-width:0}.stat-name{font-size:17px;font-weight:650}.stat-effect{color:var(--muted);margin-top:3px;font-size:12px}.stat-controls{align-items:center;gap:8px;display:flex}.btn.stat-step{justify-content:center;min-width:44px;min-height:44px;padding:0;font-size:22px;line-height:1}.stat-pips{grid-template-columns:repeat(15,4px);gap:2px;display:grid}.stat-pips .pip{width:4px;height:18px}.stat-pips .pip.on{background:var(--accent);opacity:1}.character-card{width:min(500px,100%)}.setup-actions{border-top:1px solid var(--line);background:var(--surface);border-radius:0 0 20px 20px;margin:0 -20px -24px;padding:12px 20px 16px;position:sticky;bottom:0}.preview-host{border-radius:var(--radius);background:var(--surface-2);height:260px;position:relative;overflow:hidden}.preview-canvas{width:100%;height:100%;display:block}.tabs{border-bottom:1px solid var(--line);-webkit-overflow-scrolling:touch;display:flex;overflow-x:auto}.tab{min-height:46px;color:var(--muted);font:500 15px/1 var(--font);white-space:nowrap;cursor:pointer;touch-action:manipulation;background:0 0;border:0;border-bottom:2px solid #0000;flex:1 0 auto;padding:0 12px}.tab.active{border-bottom-color:var(--accent);color:var(--text)}.tab-panel{flex-direction:column;gap:18px;display:flex}.option-group{flex-direction:column;gap:8px;display:flex}.chips,.swatches{flex-wrap:wrap;gap:8px;display:flex}.chip{border:1px solid var(--line-strong);min-height:42px;color:var(--text);font:500 15px/1 var(--font);cursor:pointer;touch-action:manipulation;background:0 0;border-radius:999px;align-items:center;gap:6px;padding:0 16px;display:inline-flex}.chip.selected{border-color:var(--accent);background:var(--accent);color:var(--accent-ink)}.chip-tag{background:#ffffff1a;border-radius:999px;padding:2px 6px;font-size:11px;font-weight:600}.swatch{border:2px solid var(--surface);outline:1px solid var(--line-strong);cursor:pointer;touch-action:manipulation;border-radius:50%;width:42px;height:42px}.swatch.selected{outline:2px solid var(--accent);outline-offset:1px}.store-card{width:min(540px,100%)}.store-notice{border-radius:var(--radius-sm);color:var(--accent);background:#f4c64e1a;padding:8px 12px;font-size:13px;font-weight:500}.skin-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;display:grid}.skin-card{border-radius:var(--radius);background:var(--surface-2);border:1px solid #0000;flex-direction:column;align-items:center;gap:8px;padding:14px 10px 10px;display:flex}.skin-card.equipped{border-color:var(--accent)}.racket-art{width:96px;height:128px;display:block}.racket-art svg{width:100%;height:100%;display:block;overflow:visible}.racket-art.glow{filter:drop-shadow(0 0 calc(4px + var(--glow) * 14px) var(--front))}.skin-name{text-align:center;font-size:16px;font-weight:650}.skin-tier{background:var(--surface-3);color:var(--muted);border-radius:999px;padding:2px 8px;font-size:12px;font-weight:500}.skin-tier.tier-rare{color:#7fb4ff}.skin-tier.tier-epic{color:var(--accent)}.skin-actions{flex-direction:column;gap:6px;width:100%;margin-top:auto;display:flex}.skin-actions .btn{justify-content:center;width:100%;min-height:44px;padding:0 8px;font-size:15px}.skin-actions .btn-secondary{background:var(--surface-3)}.skin-price{font-size:15px}.pack-icon{padding:10px 0 2px;font-size:56px}.pack-bonus{color:var(--win)}.bot-card .btn-text{flex:1}.menu-card{width:min(480px,100%)}.menu-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;display:grid}.btn.menu-tile{border-radius:var(--radius);flex-direction:column;justify-content:space-between;align-items:flex-start;gap:10px;min-height:92px;padding:14px;font-size:16px;font-weight:600}.menu-tile .btn-label{-webkit-hyphens:auto;hyphens:auto;line-height:1.2}.menu-tile-icon{width:28px;height:28px;color:var(--accent);flex:none;display:block}.menu-tile-icon svg{width:100%;height:100%;display:block}.btn.menu-tile.featured{flex-direction:row;grid-column:1/-1;align-items:center;min-height:84px;padding:14px 18px;font-size:21px}.menu-tile.featured .menu-tile-icon{width:44px;height:44px;color:var(--accent-ink)}.btn.menu-tile.wide{flex-direction:row;grid-column:1/-1;justify-content:flex-start;align-items:center;gap:12px;min-height:52px;padding:0 16px}.menu-tile.wide .menu-tile-icon{flex-shrink:0;width:24px;height:24px}.btn.menu-tile[data-action=chat]{background:#52c47e12;flex-direction:row;grid-column:1/-1;justify-content:flex-start;align-items:center;gap:12px;min-height:60px;padding:10px 16px;box-shadow:inset 0 0 0 1.5px #52c47e47}.btn.menu-tile[data-action=chat] .btn-text{text-align:left;flex:1;min-width:0}.btn.menu-tile[data-action=chat] .btn-label{font-size:16px;font-weight:600}.btn.menu-tile[data-action=chat] .btn-desc{color:var(--text);opacity:.8;white-space:nowrap;text-overflow:ellipsis;font-size:12.5px;overflow:hidden}.btn.menu-tile[data-action=chat] .menu-tile-icon{width:28px;height:28px;color:var(--win);flex-shrink:0}.chat-live-pill{color:var(--win);letter-spacing:.02em;white-space:nowrap;background:#52c47e29;border:1px solid #52c47e59;border-radius:999px;flex-shrink:0;align-items:center;gap:6px;margin-left:auto;padding:4px 10px;font-size:13px;font-weight:650;display:inline-flex}.chat-live-dot{background:var(--win);width:7px;height:7px;box-shadow:0 0 6px var(--win);border-radius:50%;animation:2s ease-in-out infinite chat-live-pulse}@keyframes chat-live-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.85)}}@media (prefers-reduced-motion:reduce){.chat-live-dot{animation:none}}@media (hover:hover){.btn-secondary.menu-tile[data-action=chat]:hover:not(:disabled){background:#52c47e21;box-shadow:inset 0 0 0 1.5px #52c47e6b}}.btn-secondary.menu-tile[data-action=chat]:active:not(:disabled){background:#52c47e2e}.btn.menu-tile.highlight{box-shadow:inset 0 0 0 1.5px var(--accent);background:#f4c64e24;overflow:hidden}.menu-tile.highlight .btn-label{color:var(--accent)}.menu-tile.highlight .btn-desc{color:var(--text)}.menu-tile.highlight .menu-tile-icon{width:32px;height:32px}.menu-tile.highlight:after{content:"";pointer-events:none;background:linear-gradient(105deg,#0000 35%,#ffffff29 50%,#0000 65%);animation:4.5s ease-in-out 1s infinite tile-shine;position:absolute;inset:0;transform:translate(-100%)}@keyframes tile-shine{0%{transform:translate(-100%)}30%,to{transform:translate(100%)}}@media (hover:hover){.btn-secondary.menu-tile.highlight:not(:disabled):hover{background:#f4c64e38}}.btn-secondary.menu-tile.highlight:active:not(:disabled){background:#f4c64e42}.btn.menu-tile:disabled{opacity:.6}.menu-tile:disabled .btn-badge{background:var(--surface-3);color:var(--text);font-weight:600}@media (prefers-reduced-motion:reduce){.menu-tile.highlight:after{opacity:0;animation:none}}.menu-tile.highlight:disabled:after{opacity:0;animation:none}.player-chip{align-items:center;gap:10px;display:flex}.player-chip-name{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;font-size:18px;font-weight:650;overflow:hidden}.player-chip-rating{font-variant-numeric:tabular-nums}.player-chip-level{background:var(--surface-2);border-radius:999px;padding:5px 10px;font-size:13px;font-weight:600}.online-net{border-radius:var(--radius-sm);background:var(--surface-2);color:var(--muted);flex-direction:column;gap:4px;padding:12px 14px;font-size:13px;display:flex}.online-net strong{color:var(--text);align-items:center;gap:8px;font-size:15px;font-weight:600;display:flex}.online-net strong:before{content:"";background:var(--win);border-radius:50%;width:8px;height:8px}.online-net.net-symmetric strong:before{background:var(--accent)}.online-net.net-blocked strong:before{background:var(--loss)}.online-links{flex-wrap:wrap;gap:4px 18px;display:flex}.room-input{letter-spacing:.2em;text-transform:uppercase;font-size:20px;font-weight:600}.room-input::placeholder{letter-spacing:normal;text-transform:none;color:var(--muted);font-size:16px;font-weight:400}.online-waiting{align-items:center;gap:12px;padding:4px 0;font-size:18px;font-weight:600;display:flex}.spinner{border:2px solid var(--line-strong);border-top-color:var(--accent);border-radius:50%;flex:none;width:16px;height:16px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.room-code{border-radius:var(--radius);background:var(--surface-2);color:var(--accent);letter-spacing:.14em;text-align:center;font-variant-numeric:tabular-nums;-webkit-user-select:all;user-select:all;padding:16px 0 14px;font-size:clamp(40px,13vw,56px);font-weight:700;line-height:1}.online-ping{font-variant-numeric:tabular-nums;font-size:18px;font-weight:600}.online-error{border-radius:var(--radius-sm);color:var(--text);background:#ef7a6b1f;margin:0;padding:10px 14px;font-size:15px}.room-setup .field .lang-switch{align-self:stretch}.room-setup .field .lang-switch .lang-option{flex:1}.room-lineups{flex-direction:column;gap:6px;display:flex}.room-lineup.selected{box-shadow:inset 0 0 0 2px var(--accent)}.room-setup .field .lang-switch.room-levels{grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.room-teams{grid-template-columns:1fr 1fr;gap:10px;display:grid}.room-team{flex-direction:column;gap:6px;min-width:0;display:flex}.room-member{border-radius:var(--radius-sm);background:var(--surface-2);min-height:44px;color:var(--text);font:500 15px/1.2 var(--font);text-align:left;border:0;align-items:center;gap:8px;padding:0 10px;display:flex}.room-member .member-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.room-member .member-you{color:var(--muted);font-size:13px}.room-member.bot,.room-member.empty{color:var(--muted)}.room-member.empty{box-shadow:inset 0 0 0 1px var(--line-strong);background:0 0;font-size:13px}.room-member.movable{cursor:pointer;touch-action:manipulation}.room-member.movable:active{background:var(--surface-3)}@media (width<=380px){.room-teams{grid-template-columns:1fr}}.chat-card{flex-direction:column;height:min(680px,100dvh - 32px);display:flex}.chat-list{overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent;flex-direction:column;flex:1;gap:2px;min-height:0;margin:0 -6px;padding:0 6px;display:flex;overflow-y:auto}.chat-empty{color:var(--muted);text-align:center;margin:auto 0;font-size:15px}.chat-item{border-bottom:1px solid var(--line);overflow-wrap:anywhere;flex-wrap:wrap;align-items:baseline;gap:2px 8px;padding:6px 0;font-size:15px;line-height:1.35;display:flex}.chat-item.invite{align-items:center}.chat-name{color:var(--muted);font:600 14px/1.35 var(--font);cursor:pointer;background:0 0;border:0;align-items:center;gap:6px;padding:0;display:inline-flex}.chat-name.mine{color:var(--accent)}.chat-name .flag{width:18px;height:13px}.chat-time{color:var(--muted);font-variant-numeric:tabular-nums;margin-right:2px;font-size:12px}.chat-text{color:var(--text)}.chat-join{min-height:40px;margin-left:auto}.chat-profile .overlay-panel{width:min(360px,100%)}.chat-profile-name{align-items:center;gap:10px;min-width:0;display:flex}.chat-profile-name h2{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.chat-profile-stats{grid-template-columns:1fr auto;margin:0;font-size:15px;display:grid}.chat-profile-stats dt,.chat-profile-stats dd{border-bottom:1px solid var(--line);padding:10px 0}.chat-profile-stats dt{color:var(--muted)}.chat-profile-stats dd{text-align:right;font-variant-numeric:tabular-nums;margin:0;font-weight:600}.chat-footer:empty{display:none}.chat-notice{color:var(--loss);margin:6px 0 0;font-size:14px}.chat-muted{color:var(--muted);justify-content:space-between;align-items:center;gap:8px;font-size:14px;display:flex}.chat-actions{gap:8px;margin-top:8px;display:flex}.chat-create-btn{flex:1;justify-content:center;min-height:40px}.chat-hosting-banner{border:1px solid var(--accent);background:#4ade8014;border-radius:10px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;margin-top:8px;padding:8px 12px;display:flex}.chat-hosting-info{align-items:center;gap:8px;font-size:13px;font-weight:500;display:flex}.chat-hosting-code{color:var(--accent);letter-spacing:1px;font-family:monospace;font-size:15px;font-weight:700}.chat-hosting-actions{align-items:center;gap:6px;display:flex}.chat-hosting-btn{min-height:34px;padding:4px 10px;font-size:13px}.chat-form{gap:8px;margin-top:8px;display:flex}.chat-input{flex:1;width:0}.chat-send{flex:none;justify-content:center;width:50px;padding:0}.notice-detail{color:var(--muted);overflow-wrap:anywhere;margin:0;font-size:14px}.online-tips{counter-reset:tip;flex-direction:column;margin:0;padding:0;font-size:15px;line-height:1.45;list-style:none;display:flex}.online-tips li{counter-increment:tip;grid-template-columns:28px 1fr;padding:10px 0;display:grid}.online-tips li+li{border-top:1px solid var(--line)}.online-tips li:before{content:counter(tip);color:var(--muted);font-weight:600}.ranked-elapsed{font-variant-numeric:tabular-nums}@media (prefers-reduced-motion:reduce){.spinner{animation-duration:2.4s}}.serve-countdown{z-index:5;text-align:center;pointer-events:none;flex-direction:column;align-items:center;gap:6px;width:min(86vw,380px);display:flex;position:absolute;top:38%;left:50%;transform:translate(-50%,-50%)}.serve-countdown-number{color:var(--text);font-variant-numeric:tabular-nums;text-shadow:0 2px 6px #0009;font-size:clamp(64px,20vw,100px);font-weight:750;line-height:1}.serve-countdown-caption{border-radius:var(--radius-sm);background:var(--hud-bg);padding:6px 14px;font-size:clamp(14px,4vw,16px);font-weight:500;line-height:1.35}.serve-countdown.tick .serve-countdown-number{animation:.35s ease-out countdown-tick}@keyframes countdown-tick{0%{opacity:.2;transform:scale(.85)}}@media (prefers-reduced-motion:reduce){.serve-countdown.tick .serve-countdown-number{animation:none}}.connection-notice{left:50%;bottom:calc(max(12px, env(safe-area-inset-bottom)) + 52px);z-index:6;background:var(--hud-bg);white-space:nowrap;pointer-events:none;border-radius:999px;align-items:center;gap:10px;padding:8px 16px 8px 12px;font-size:14px;font-weight:500;display:flex;position:absolute;transform:translate(-50%)}.queue-badge{right:max(10px, env(safe-area-inset-right));bottom:max(10px, env(safe-area-inset-bottom));z-index:30;background:var(--surface-3);border-radius:999px;align-items:stretch;display:flex;position:fixed;overflow:hidden}.queue-badge button{min-height:42px;color:var(--text);font:500 15px/1 var(--font);cursor:pointer;background:0 0;border:0}.queue-badge-open{font-variant-numeric:tabular-nums;align-items:center;gap:10px;padding:0 10px 0 14px;display:flex}.queue-badge-open .spinner{width:12px;height:12px}.queue-badge-cancel{min-width:42px;padding:0 14px 0 12px;border-left:1px solid var(--line-strong)!important;color:var(--muted)!important}.pause-card,.notice-card{width:min(400px,100%)}.stats-card{width:min(440px,100%)}.stats-card a.btn{text-decoration:none}.stats-refresh{align-self:flex-start}.stats-levels{margin:0}.stats-table{border-collapse:collapse;font-variant-numeric:tabular-nums;width:100%;font-size:14px}.stats-table th,.stats-table td{border-bottom:1px solid var(--line);text-align:right;padding:8px 4px}.stats-table th{color:var(--muted);font-weight:500}.stats-table th:first-child,.stats-table td:first-child{text-align:left}.stats-table tr.today td{font-weight:650}.stats-key{flex-direction:column;gap:10px;display:flex}.stats-hero{align-items:baseline;gap:10px;display:flex}.stats-hero-value{color:var(--accent);font-variant-numeric:tabular-nums;font-size:56px;font-weight:700;line-height:1}.stats-hero-label{color:var(--muted);font-size:15px}.stats-section{color:var(--muted);margin:6px 0 0;font-size:15px;font-weight:650}.stats-list{grid-template-columns:1fr auto;margin:0;font-size:15px;display:grid}.stats-list dt,.stats-list dd{border-bottom:1px solid var(--line);padding:9px 0}.stats-list dt{color:var(--muted)}.stats-list dd{text-align:right;font-variant-numeric:tabular-nums;margin:0;font-weight:600}.stats-busy,.stats-error{border-radius:var(--radius-sm);background:var(--surface-2);color:var(--loss);margin:0;padding:10px 14px;font-size:14px}.field .lang-switch{align-self:flex-start;margin-left:0}:root{--bg:#121315;--surface:#1b1c1f;--surface-2:#25272b;--surface-3:#303238;--line:#ffffff14;--line-strong:#ffffff29;--text:#edebe6;--muted:#9a978f;--accent:#f4c64e;--accent-ink:#1c1706;--win:#6fcf97;--loss:#ef7a6b;--hud-bg:#121315c7;--spin-top:#ff6b5bf2;--spin-back:#5ab0fff2;--spin-side:#ffd23ff2;--font:system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;--mono:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;--radius:16px;--radius-sm:12px}*{box-sizing:border-box;margin:0;padding:0}html,body{overscroll-behavior:none;width:100%;height:100%;font-family:var(--font);color:var(--text);-webkit-font-smoothing:antialiased;background:#0d0f12;overflow:hidden}#app{width:100%;height:100%;position:relative}#app canvas{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;width:100%;height:100%;display:block}.hud{pointer-events:none;-webkit-user-select:none;user-select:none;padding:max(12px, env(safe-area-inset-top)) 12px 12px;position:absolute;inset:0}.scoreboard{border-radius:var(--radius-sm);background:var(--hud-bg);grid-template-columns:repeat(2,minmax(0,1fr));width:fit-content;max-width:100%;margin:0 auto;padding:4px;display:grid}.scoreboard .team{min-width:0}.scoreboard .team:first-child{justify-content:flex-end}.scoreboard .team:last-child{border-left:1px solid var(--line-strong);justify-content:flex-start}.team{color:var(--muted);align-items:center;gap:8px;padding:2px 12px;font-size:14px;font-weight:500;display:flex}.team .points{min-width:1.2em;color:var(--text);text-align:center;font-variant-numeric:tabular-nums;font-size:26px;font-weight:700;line-height:1}.serve-dot{background:var(--accent);visibility:hidden;border-radius:50%;flex:none;width:7px;height:7px}.team.serving .serve-dot{visibility:visible}.message{text-align:center;flex-direction:column;align-items:center;gap:6px;display:flex;position:absolute;top:max(14%,118px);left:0;right:0}.message .title:empty,.message .detail:empty{display:none}.message .title{border-radius:var(--radius-sm);background:var(--hud-bg);letter-spacing:-.01em;padding:8px 18px;font-size:clamp(24px,6.5vw,36px);font-weight:700;line-height:1.1}.message .detail{background:var(--hud-bg);max-width:min(92vw,460px);color:var(--muted);border-radius:999px;padding:5px 12px;font-size:clamp(13px,3.5vw,15px);font-weight:500}.gesture{pointer-events:none;opacity:0;width:100%;height:100%;transition:opacity .15s;position:absolute;inset:0}.gesture.visible{opacity:1;transition:none}.hud.drill .scoreboard,.hud.drill .opponent-tag,.hud.drill .rally-meter{display:none}.coach{top:calc(max(12px, env(safe-area-inset-top)) + 54px);border-radius:var(--radius);background:var(--hud-bg);flex-direction:column;gap:8px;max-width:420px;margin:0 auto;padding:12px 14px;animation:.2s ease-out panel-in;display:flex;position:absolute;left:12px;right:12px}.coach[hidden]{display:none}.coach-head,.coach-foot{justify-content:space-between;align-items:center;gap:10px;display:flex}.coach-step{color:var(--muted);font-variant-numeric:tabular-nums;font-size:12px}.coach-skip{background:var(--surface-2);min-height:40px;color:var(--text);font:600 13px/1 var(--font);pointer-events:auto;cursor:pointer;border:0;border-radius:999px;padding:0 14px}.coach-skip:active{background:var(--surface-3)}.coach-body{align-items:center;gap:12px;display:flex}.coach-demo{flex:none;width:36px;height:60px}.coach-demo-path{fill:none;stroke:var(--text);stroke-width:6px;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;animation:1.8s ease-in-out infinite coach-draw}.coach-demo-start{fill:var(--text)}.coach-demo-start.topspin{fill:var(--spin-top)}.coach-demo-start.backspin{fill:var(--spin-back)}.coach-demo-start.sidespin{fill:var(--spin-side)}.coach-demo-path.fast{animation-duration:.9s}.coach-demo-path.topspin{stroke:var(--spin-top)}.coach-demo-path.backspin{stroke:var(--spin-back)}.coach-demo-path.sidespin{stroke:var(--spin-side)}@keyframes coach-draw{0%{stroke-dashoffset:100px}60%,to{stroke-dashoffset:0}}.coach-copy{min-width:0}.coach-title{font-size:17px;font-weight:700}.coach-text{color:var(--muted);margin-top:2px;font-size:14px;line-height:1.35}.coach-dots{gap:6px;display:flex}.coach-dot{background:var(--surface-3);border-radius:999px;width:10px;height:10px}.coach-dot.done{background:var(--accent)}.coach-hint{text-align:right;font-size:13px;font-weight:600}.coach-hint.coach-pass{color:var(--win)}@media (prefers-reduced-motion:reduce){.coach{animation:none}.coach-demo-path{stroke-dashoffset:0;animation:none}}.stats{top:max(12px, env(safe-area-inset-top));left:max(12px, env(safe-area-inset-left));background:var(--hud-bg);font:500 11px/1.3 var(--mono);color:var(--muted);border-radius:8px;flex-direction:column;gap:2px;padding:5px 9px;display:flex;position:absolute}.stats b{color:var(--text);font-variant-numeric:tabular-nums;font-weight:600}.sound{top:max(12px, env(safe-area-inset-top));right:max(12px, env(safe-area-inset-right));position:absolute}.sound,.mute{background:var(--hud-bg);width:42px;height:42px;color:var(--text);cursor:pointer;pointer-events:auto;-webkit-tap-highlight-color:transparent;border:0;border-radius:50%;flex:none;place-items:center;display:grid}.sound.off,.mute.off{color:var(--muted)}.sound-panel{z-index:2;top:calc(max(12px, env(safe-area-inset-top)) + 48px);right:max(12px, env(safe-area-inset-right));border-radius:var(--radius);background:var(--surface);pointer-events:auto;align-items:center;gap:10px;padding:6px 14px 6px 6px;display:none;position:absolute}.sound-panel.open{display:flex}.sound-panel .mute{background:var(--surface-2)}.volume-value{font-variant-numeric:tabular-nums;text-align:right;min-width:3.4em;font-size:15px;font-weight:600}.volume{--fill:80%;cursor:pointer;touch-action:none;appearance:none;background:0 0;width:min(160px,40vw);height:32px;margin:0}.volume::-webkit-slider-runnable-track{background:linear-gradient(to right, var(--accent) var(--fill), var(--surface-3) var(--fill));border-radius:2px;height:4px}.volume::-moz-range-track{background:var(--surface-3);border-radius:2px;height:4px}.volume::-moz-range-progress{background:var(--accent);border-radius:2px;height:4px}.volume::-webkit-slider-thumb{background:var(--text);appearance:none;border:0;border-radius:50%;width:22px;height:22px;margin-top:-9px}.volume::-moz-range-thumb{background:var(--text);border:0;border-radius:50%;width:22px;height:22px}.opponent-tag,.rally-meter{background:var(--hud-bg);width:fit-content;color:var(--muted);border-radius:999px;margin:4px auto 0;padding:2px 10px;font-size:12px;font-weight:500;line-height:1.4}.team .name{text-overflow:ellipsis;white-space:nowrap;max-width:24vw;overflow:hidden}.team .name.members{flex-direction:column;gap:2px;max-width:34vw;font-size:12px;line-height:1.25;display:flex}.team .member{align-items:center;gap:5px;min-width:0;display:flex}.scoreboard .team:last-child .member{flex-direction:row-reverse}.team .member-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.team .bot-tag{background:var(--surface-3);color:var(--muted);border-radius:999px;padding:0 5px;font-size:9px;font-weight:700;line-height:1.5}.team .hud-flag{border-radius:2px;width:18px;height:13px}.rally-meter{font-variant-numeric:tabular-nums;justify-content:center;gap:6px;display:flex}.rally-current{color:var(--text)}.rally-best:before{content:"·";margin-right:6px}.rally-meter.record .rally-current{color:var(--accent)}@media (width<=520px){.team{flex-wrap:wrap;justify-content:center;gap:6px;max-width:120px;padding:2px 8px;font-size:12px}.scoreboard .team:first-child,.scoreboard .team:last-child{justify-content:center}.team .points{font-size:24px}.team:has(.members){max-width:34vw}.team .name{text-align:center;flex-basis:100%;order:10;max-width:none;padding:2px 0;font-size:12px}.stats{top:auto;left:max(12px, env(safe-area-inset-left));bottom:max(12px, env(safe-area-inset-bottom))}}