*{margin:0;padding:0;box-sizing:border-box}:root{--coral: #ff6b9d;--blue: #6e8efb;--green: #4fdf8f;--gold: #ffd66b;--violet: #b388ff;--bg-deep: #0c0c20;--card: rgba(255, 255, 255, .06);--card-border: rgba(190, 200, 255, .14);--text: #eceeff;--muted: #9aa0c0;--accent: #e0537e}html,body{height:100%;overflow:hidden;background:var(--bg-deep);color:var(--text);font-family:Segoe UI,system-ui,-apple-system,sans-serif;-webkit-user-select:none;user-select:none;-webkit-font-smoothing:antialiased}#scene-root{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1}#scene-root canvas{display:block;width:100%;height:100%}#ui-root{position:fixed;top:0;right:0;bottom:0;left:0;z-index:10;pointer-events:none}.screen{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;flex-direction:column;pointer-events:auto;will-change:transform,opacity}.screen:before{content:"";position:absolute;top:-20%;right:-20%;bottom:-20%;left:-20%;pointer-events:none;z-index:-1;background:radial-gradient(60% 50% at 20% 20%,rgba(255,107,157,.16),transparent 60%),radial-gradient(55% 45% at 80% 30%,rgba(110,142,251,.18),transparent 60%),radial-gradient(50% 50% at 55% 85%,rgba(79,223,143,.12),transparent 60%);filter:blur(8px);animation:blobFloat 14s ease-in-out infinite alternate}@keyframes blobFloat{0%{transform:translate3d(-2%,-1%,0) scale(1)}to{transform:translate3d(3%,2%,0) scale(1.12)}}.title-glow{font-size:clamp(48px,9vw,110px);font-weight:900;letter-spacing:.04em;background:linear-gradient(120deg,var(--coral),var(--violet) 45%,var(--blue));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 6px 30px rgba(110,142,251,.4));animation:titleGlow 5s ease-in-out infinite;white-space:nowrap}@keyframes titleGlow{0%,to{filter:drop-shadow(0 6px 26px rgba(110,142,251,.35))}50%{filter:drop-shadow(0 6px 40px rgba(255,107,157,.5))}}.subtitle{margin-top:-6px;font-size:18px;letter-spacing:.32em;text-transform:uppercase;color:var(--muted);text-align:center}.screen-title{font-size:clamp(26px,4vw,38px);font-weight:800;margin-bottom:20px;letter-spacing:.02em;background:linear-gradient(120deg,var(--green),var(--blue));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.btn{cursor:pointer;border:none;border-radius:14px;padding:14px 36px;font-size:18px;font-weight:800;letter-spacing:.03em;color:#fff;transition:box-shadow .2s ease,filter .2s ease,background .2s ease;will-change:transform}.btn:active{transform:scale(.96)}.btn-primary{background:linear-gradient(120deg,var(--coral),var(--violet));box-shadow:0 10px 34px #ff6b9d59}.btn-primary:hover{box-shadow:0 14px 44px #ff6b9d80;filter:brightness(1.06)}.btn-ghost{background:var(--card);border:1px solid var(--card-border);color:var(--text)}.btn-ghost:hover{background:#ffffff1f}.btn-small{padding:9px 20px;font-size:15px;border-radius:12px;min-height:40px}.btn-start{margin-left:10px}.btn:disabled{opacity:.4;cursor:not-allowed;transform:none!important}.btn.active{box-shadow:0 0 0 3px #4fdf8f80}.menu-wrap{display:flex;flex-direction:column;align-items:center;gap:44px}.menu-buttons{display:flex;flex-direction:column;gap:16px;width:260px}.menu-buttons .btn{width:100%}.join-form{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 14px;border-radius:14px;background:var(--card);border:1px solid var(--card-border)}.join-form[hidden]{display:none}.join-form input{flex:1;min-width:0;background:#ffffff12;border:1px solid var(--card-border);border-radius:10px;padding:9px 12px;color:var(--text);font:700 16px/1 Segoe UI,sans-serif;letter-spacing:.22em;text-transform:uppercase;outline:none}.join-form input:focus{border-color:var(--blue)}.join-error{width:100%;font-size:13px;color:var(--coral);min-height:16px}.logo{animation:logoBreathe 4.5s ease-in-out infinite}@keyframes logoBreathe{0%,to{transform:scale(1)}50%{transform:scale(1.018)}}.menu-particles{position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none;z-index:-1}.menu-particles span{position:absolute;bottom:-12px;border-radius:50%;background:var(--blue);opacity:0;animation:menuFloat 12s linear infinite}.menu-particles span:nth-child(1){left:6%;width:5px;height:5px;background:var(--coral);animation-duration:13s;animation-delay:0s}.menu-particles span:nth-child(2){left:14%;width:3px;height:3px;background:var(--blue);animation-duration:11s;animation-delay:1.4s}.menu-particles span:nth-child(3){left:22%;width:6px;height:6px;background:var(--violet);animation-duration:15s;animation-delay:2.8s}.menu-particles span:nth-child(4){left:31%;width:4px;height:4px;background:var(--green);animation-duration:12s;animation-delay:.7s}.menu-particles span:nth-child(5){left:39%;width:3px;height:3px;background:var(--gold);animation-duration:14s;animation-delay:3.5s}.menu-particles span:nth-child(6){left:47%;width:5px;height:5px;background:var(--coral);animation-duration:10s;animation-delay:2s}.menu-particles span:nth-child(7){left:55%;width:4px;height:4px;background:var(--blue);animation-duration:13s;animation-delay:4.2s}.menu-particles span:nth-child(8){left:63%;width:6px;height:6px;background:var(--violet);animation-duration:11s;animation-delay:1s}.menu-particles span:nth-child(9){left:71%;width:3px;height:3px;background:var(--green);animation-duration:15s;animation-delay:5s}.menu-particles span:nth-child(10){left:79%;width:5px;height:5px;background:var(--gold);animation-duration:12s;animation-delay:2.4s}.menu-particles span:nth-child(11){left:86%;width:4px;height:4px;background:var(--coral);animation-duration:14s;animation-delay:3.1s}.menu-particles span:nth-child(12){left:93%;width:3px;height:3px;background:var(--blue);animation-duration:10s;animation-delay:.4s}.menu-particles span:nth-child(13){left:10%;width:4px;height:4px;background:var(--gold);animation-duration:16s;animation-delay:4.6s}.menu-particles span:nth-child(14){left:67%;width:3px;height:3px;background:var(--coral);animation-duration:12s;animation-delay:5.4s}@keyframes menuFloat{0%{transform:translateY(0) scale(.6);opacity:0}12%{opacity:.7}85%{opacity:.25}to{transform:translateY(-78vh) scale(1.15);opacity:0}}.settings-wrap{width:min(560px,94vw);max-height:92vh;overflow-y:auto;display:flex;flex-direction:column;gap:14px;padding:8px 6px 18px}.setting-card{background:var(--card);border:1px solid var(--card-border);border-radius:18px;padding:2px 20px 10px}.setting-card-title{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:13px 0 2px}.setting-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.07)}.setting-card .setting-row:last-child{border-bottom:none}.setting-row label{font-size:16px;color:var(--muted)}.setting-value{color:var(--text);font-weight:700}.slider{width:180px;accent-color:var(--blue);cursor:pointer}.settings-actions{display:flex;gap:14px;margin-top:10px;justify-content:center}.avatar-wrap{display:flex;flex-direction:column;align-items:center;gap:22px}.pick-chips{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}.pick-chip{display:inline-flex;align-items:center;gap:9px;padding:10px 18px;border-radius:999px;cursor:pointer;background:var(--card);border:2px solid var(--card-border);color:var(--text);font-size:15px;font-weight:700;font-family:inherit;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease}.pick-chip:hover{transform:translateY(-2px)}.pick-chip.active{border-color:var(--green);background:#4fdf8f26;box-shadow:0 0 0 3px #4fdf8f59}.pick-chip.locked{opacity:.5;cursor:not-allowed}.pick-chip.locked:hover{transform:none}.pick-chip-dot{width:14px;height:14px;border-radius:50%;box-shadow:0 0 8px #ffffff59}.pick-lock-note{display:flex;align-items:center;gap:14px;padding:12px 18px;border-radius:14px;background:#e0537e38;border:1px solid rgba(224,83,126,.55);color:#fff;font-size:15px;font-weight:600;letter-spacing:.1px;line-height:1.4;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 4px 20px #00000059}.pick-lock-note span{text-shadow:0 1px 3px rgba(0,0,0,.6)}.pick-lock-note[hidden]{display:none}.account-area{position:absolute;top:20px;right:24px;z-index:5;display:flex;flex-direction:column;align-items:flex-end;gap:8px}.account-area[hidden]{display:none}.account-row{display:flex;align-items:center;gap:10px}.account-avatar{width:38px;height:38px;border-radius:50%;border:2px solid var(--card-border);object-fit:cover}.account-name{font-weight:800;font-size:15px;color:var(--text);max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.account-tip{font-size:12px;color:var(--muted);max-width:220px;text-align:right;line-height:1.4}.seg{display:inline-flex;gap:5px;background:#ffffff0d;border-radius:12px;padding:4px}.seg-btn{border:none;background:transparent;color:var(--muted);font-size:15px;font-weight:700;padding:8px 16px;min-height:32px;border-radius:9px;cursor:pointer;transition:background .16s ease,color .16s ease}.seg-btn.active{background:var(--blue);color:#fff}.seg.disabled{opacity:.55;pointer-events:none}.lobby-top{position:absolute;top:16px;left:0;right:0;display:flex;flex-direction:column;align-items:center;gap:10px}.lobby-title{font-size:clamp(26px,4vw,38px);font-weight:800;letter-spacing:.02em;background:linear-gradient(120deg,var(--green),var(--blue));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.room-code-wrap{display:flex;align-items:center;gap:8px}.room-code{font-size:30px;font-weight:900;letter-spacing:.32em;color:var(--green);text-shadow:0 0 26px rgba(79,223,143,.5)}.copy-btn{cursor:pointer;border:1px solid var(--card-border);background:var(--card);color:var(--text);border-radius:10px;width:36px;height:36px;font-size:17px;line-height:1;display:inline-flex;align-items:center;justify-content:center;transition:border-color .2s ease,box-shadow .2s ease,transform .12s ease}.copy-btn:hover{border-color:#4fdf8f99;box-shadow:0 0 14px #4fdf8f40;transform:translateY(-1px)}.copy-btn.ok{border-color:var(--green);box-shadow:0 0 16px #4fdf8f73}.copy-btn[hidden]{display:none}.room-mode{color:var(--muted);font-size:14px}.players{position:absolute;top:224px;left:50%;transform:translate(-50%);display:flex;flex-wrap:wrap;gap:8px;justify-content:center;width:min(720px,94vw)}.player-chip{display:flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;background:var(--card);border:1px solid var(--card-border);transition:border-color .2s ease,box-shadow .2s ease}.player-chip.ready{border-color:#4fdf8f99;box-shadow:0 0 20px #4fdf8f2e}.player-chip.me{border-color:#ff6b9d8c}.player-chip .player-avatar{width:22px;height:22px;border-radius:50%;border:2px solid rgba(255,255,255,.4);box-shadow:0 2px 8px #00000059;flex:none}.player-chip .player-chip-avatar{width:22px;height:22px;border-radius:50%;border:2px solid rgba(255,255,255,.4);object-fit:cover;flex:none;box-shadow:0 2px 8px #00000059}.player-chip .player-name{font-weight:700;font-size:14px;white-space:nowrap}.me-tag{color:var(--coral);font-size:12px;font-weight:800}.player-chip .player-tag{font-size:13px;color:var(--muted)}.player-chip.ready .player-tag{color:var(--green)}.player-avatar{width:38px;height:38px;border-radius:50%;border:2px solid rgba(255,255,255,.4);box-shadow:0 4px 14px #00000059}.player-name{font-weight:700;font-size:14px}.player-tag{font-size:12px;color:var(--muted)}.lobby-actions{position:absolute;bottom:20px;left:24px;right:24px;display:flex;align-items:center;justify-content:space-between}.lobby-right{display:flex;align-items:center}.start-wrap{display:inline-flex}.lobby-rounds{position:absolute;top:168px;left:50%;transform:translate(-50%);display:flex;align-items:center;gap:10px;font-size:15px;color:var(--muted)}.lobby-rounds-label{font-weight:700}.lobby-rounds-readonly{font-weight:800;color:var(--text);font-size:17px}.game-header{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:20px 28px}.game-phase-label{font-size:21px;font-weight:800;letter-spacing:.04em;transition:transform .3s ease,text-shadow .3s ease}.game-phase-label.pulse{transform:scale(1.14);text-shadow:0 0 30px rgba(110,142,251,.9)}.game-timer{font-size:22px;font-weight:800;color:var(--gold);font-variant-numeric:tabular-nums}.countdown{position:fixed;top:13%;left:50%;transform:translate(-50%,-50%);font-size:clamp(80px,12vh,120px);font-weight:900;color:var(--gold);text-shadow:0 0 60px rgba(255,214,107,.8);display:none;pointer-events:none}.wave-panel{position:fixed;bottom:16px;left:50%;transform:translate(-50%);width:min(720px,92vw);display:flex;flex-direction:column;gap:8px;padding:14px 18px 12px;border-radius:18px;background:#0e1226b8;border:1px solid var(--card-border);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 18px 50px #00000073}.wave-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}.wave-label{font-size:13px;letter-spacing:.12em;color:var(--muted);text-transform:uppercase;font-weight:800}.wave-score{font-size:26px;font-weight:900;font-variant-numeric:tabular-nums;color:var(--green);text-shadow:0 0 24px rgba(79,223,143,.45)}.wave-score.gold{color:var(--gold);text-shadow:0 0 26px rgba(255,214,107,.6)}.wave-canvas{width:100%;height:84px;display:block;background:#ffffff0a;border:1px solid var(--card-border);border-radius:12px}.wave-legend{display:flex;gap:14px;align-items:center;font-size:12px;color:var(--muted)}.wave-legend .sw{display:inline-block;width:22px;height:0;border-top:2px solid;vertical-align:middle;margin-right:6px}.wave-legend .sw.ref{border-top-style:dashed;border-top-color:#6b6f7a}.wave-legend .sw.try{border-top-style:solid;border-top-color:var(--accent)}.results-wrap{width:min(660px,92vw)}.results-list{display:flex;flex-direction:column;gap:12px;width:100%}.result-card{display:flex;align-items:center;gap:16px;padding:14px 20px;border-radius:16px;background:var(--card);border:1px solid var(--card-border)}.result-card.me{border-color:#6e8efb8c;box-shadow:0 0 26px #6e8efb29}.result-place{font-size:26px;width:46px;text-align:center}.result-name{flex:1;font-size:19px;font-weight:700}.result-score{font-size:22px;font-weight:900;color:var(--green);font-variant-numeric:tabular-nums}.results-actions{display:flex;gap:14px;margin-top:26px}.match-wrap{width:min(680px,94vw);max-height:92vh;overflow-y:auto;display:flex;flex-direction:column;gap:16px;padding:8px 6px 18px}.match-summary,.match-round{background:var(--card);border:1px solid var(--card-border);border-radius:18px}.match-summary{padding:10px 18px}.mr-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.07)}.mr-row:last-child{border-bottom:none}.mr-row.me{background:#6e8efb14;border-radius:10px;padding:10px}.mr-row.small{padding:8px 0;font-size:15px}.mr-name{flex:1;font-weight:700;font-size:16px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mr-avg{font-size:20px;font-weight:900;color:var(--green);font-variant-numeric:tabular-nums;min-width:56px;text-align:right}.mr-best{font-size:13px;color:var(--muted);min-width:92px;text-align:right}.mr-norec{font-size:13px;color:var(--muted)}.match-rounds{display:flex;flex-direction:column;gap:10px}.match-round summary{display:flex;align-items:center;gap:14px;padding:13px 18px;cursor:pointer;list-style:none;font-weight:800;font-size:16px}.match-round summary::-webkit-details-marker{display:none}.mr-round-n{color:var(--text)}.mr-sound{flex:1;font-weight:600;font-size:13px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mr-caret{color:var(--muted);transition:transform .2s ease}.match-round[open] .mr-caret{transform:rotate(180deg)}.mr-list{padding:2px 18px 10px}.mr-list .btn-small{padding:6px 14px;min-height:32px;font-size:13px}.transition-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:900;pointer-events:none}.transition-shine{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.16) 50%,transparent 60%);transform:translate(-120%)}@keyframes shine-sweep{to{transform:translate(120%)}}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:8px}::-webkit-scrollbar-track{background:transparent}