:root{--bg-dark: #070B14;--bg-card: rgba(15, 23, 42, .95);--bg-card-subtle: rgba(10, 16, 29, .85);--border-color: rgba(255, 255, 255, .1);--cyan: #00F0FF;--cyan-glow: rgba(0, 240, 255, .35);--amber: #F59E0B;--gold: #FBBF24;--gold-glow: rgba(251, 191, 36, .35);--magenta: #FF007F;--magenta-glow: rgba(255, 0, 127, .4);--emerald: #10B981;--emerald-glow: rgba(16, 185, 129, .4);--red: #EF4444;--red-glow: rgba(239, 68, 68, .4);--text-main: #FFFFFF;--text-muted: #94A3B8;--font-display: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--font-mono: "JetBrains Mono", monospace}*{box-sizing:border-box;margin:0;padding:0;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}html,body{width:100%;height:100%;background:var(--bg-dark) radial-gradient(circle at 50% 15%,#151d2f,#070b14 85%);color:var(--text-main);font-family:var(--font-display);overflow:hidden;touch-action:manipulation;overscroll-behavior:none}.app-container{position:relative;width:100%;max-width:440px;height:100dvh;margin:0 auto;overflow:hidden;display:flex;flex-direction:column;padding:env(safe-area-inset-top,6px) 14px env(safe-area-inset-bottom,8px)}.view{position:relative;width:100%;height:100%;display:none;flex-direction:column}.view.active{display:flex}.lobby-header{display:flex;align-items:center;justify-content:space-between;height:44px;margin-bottom:4px}.header-right-actions{display:flex;align-items:center;gap:8px}.icon-btn{width:38px;height:38px;border-radius:12px;background:var(--bg-card);border:1px solid var(--border-color);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(8px);transition:all .2s cubic-bezier(.4,0,.2,1)}.icon-btn:active{transform:scale(.92);border-color:var(--cyan)}.icon-btn-sm{width:34px;height:34px;border-radius:10px;background:#ffffff14;border:1px solid rgba(255,255,255,.12);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px;transition:transform .15s ease}.icon-btn-sm:active{transform:scale(.92)}.lang-btn{display:flex;align-items:center;gap:5px;padding:0 10px;height:38px;border-radius:12px;background:var(--bg-card);border:1px solid var(--border-color);color:#fff;font-size:12.5px;font-weight:700;cursor:pointer;backdrop-filter:blur(8px);transition:all .15s ease}.lang-btn:active{transform:scale(.92)}.lobby-content{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:14px;overflow-y:auto;overflow-x:hidden;padding:8px 0 16px;width:100%}.lobby-hero{text-align:center;padding:6px 0 10px}.hero-icons-cluster{display:flex;justify-content:center;gap:10px;margin-bottom:6px}.cluster-icon{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:14px;background:#0f172ad9;border:1.5px solid rgba(0,240,255,.3);box-shadow:0 4px 14px #00f0ff26;font-size:24px;animation:float 3s ease-in-out infinite}.cluster-icon.icon-paper{animation-delay:.3s;border-color:#fbbf244d;box-shadow:0 4px 14px #fbbf2426}.cluster-icon.icon-scissors{animation-delay:.6s;border-color:#ff007f4d;box-shadow:0 4px 14px #ff007f26}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}.hero-title{font-size:22px;font-weight:900;letter-spacing:-.3px;background:linear-gradient(135deg,#FFFFFF 20%,var(--cyan) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:2px}.hero-subtitle{font-size:11.5px;color:var(--text-muted)}.lobby-card{width:100%;background:var(--bg-card);border:1px solid var(--border-color);border-radius:20px;padding:14px;backdrop-filter:blur(12px);box-shadow:0 8px 32px #00000059;display:flex;flex-direction:column;gap:10px}.input-group{margin-bottom:0}.input-label{display:block;font-size:11px;font-weight:700;color:var(--text-muted);margin-bottom:5px;text-transform:uppercase;letter-spacing:.5px}.input-wrapper{position:relative;display:flex;align-items:center}.input-icon{position:absolute;left:12px;font-size:15px;pointer-events:none}.custom-input{width:100%;height:42px;padding:0 14px 0 38px;background:var(--bg-card-subtle);border:1.5px solid var(--border-color);border-radius:12px;color:#fff;font-family:var(--font-display);font-size:14px;font-weight:600;outline:none;transition:border-color .2s}.custom-input:focus{border-color:var(--cyan);box-shadow:0 0 12px var(--cyan-glow)}.custom-input::placeholder{color:#94a3b880;font-size:13px}.combo-length-selector{display:flex;gap:8px}.combo-len-btn{flex:1;height:36px;border-radius:10px;background:var(--bg-card-subtle);border:1px solid var(--border-color);color:var(--text-muted);font-size:12px;font-weight:800;cursor:pointer;transition:all .2s}.combo-len-btn.active{background:#00f0ff26;border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 10px var(--cyan-glow)}.btn{border:none;cursor:pointer;font-family:var(--font-display);font-weight:800;height:44px;padding:0 18px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:all .2s cubic-bezier(.4,0,.2,1);text-decoration:none}.btn-block{width:100%}.btn-primary{background:linear-gradient(135deg,var(--cyan),#00A3FF);color:#040914;box-shadow:0 4px 18px var(--cyan-glow)}.btn-primary:active{transform:scale(.97)}.btn-secondary{background:#ffffff14;border:1px solid rgba(255,255,255,.15);color:#fff}.btn-outline{background:#0f172acc;border:1px solid var(--border-color);color:#fff}.btn-outline:active{border-color:var(--cyan);transform:scale(.97)}.btn-danger{background:#ef444433;border:1px solid rgba(239,68,68,.4);color:#f87171}.btn-sm{height:32px;padding:0 12px;font-size:11.5px}.btn-matchmaking{height:52px;background:linear-gradient(135deg,#00f0ff,#3b82f6,#8b5cf6);color:#fff;border-radius:14px;padding:0 16px;position:relative;overflow:hidden;box-shadow:0 6px 20px #00f0ff59;animation:pulseButton 3s infinite ease-in-out}.btn-matchmaking:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(45deg,transparent,rgba(255,255,255,.25),transparent);transform:rotate(45deg);animation:shimmer 2.5s infinite}@keyframes shimmer{0%{transform:translate(-100%) rotate(45deg)}to{transform:translate(100%) rotate(45deg)}}@keyframes pulseButton{0%,to{box-shadow:0 6px 20px #00f0ff59}50%{box-shadow:0 6px 28px #00f0ff99}}.matchmaking-btn-inner{display:flex;align-items:center;justify-content:center;gap:12px;position:relative;z-index:1;pointer-events:none}.matchmaking-badge-icon{font-size:22px;animation:iconBounce 2s infinite ease-in-out}@keyframes iconBounce{0%,to{transform:scale(1) translateY(0)}50%{transform:scale(1.15) translateY(-2px)}}.matchmaking-btn-text{display:flex;flex-direction:column;align-items:flex-start;text-align:left}.btn-main-title{font-size:14px;font-weight:900;letter-spacing:.5px;text-transform:uppercase;line-height:1.2}.btn-sub-status{font-size:11px;font-weight:600;color:#ffffffe6;display:flex;align-items:center;gap:6px;margin-top:2px}.pulse-indicator{display:inline-block;width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 8px #22c55e;animation:pulseDot 1.4s infinite ease-in-out}@keyframes pulseDot{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.4);opacity:.4}}.divider{display:flex;align-items:center;text-align:center;margin:2px 0}.divider:before,.divider:after{content:"";flex:1;border-bottom:1px solid rgba(255,255,255,.08)}.divider span{padding:0 10px;font-size:10px;font-weight:800;color:var(--text-muted);letter-spacing:.5px}.modes-two-col{display:flex;gap:8px}.btn-submode{flex:1;height:40px;font-size:12.5px;font-weight:800}.join-row{display:flex;gap:8px}.room-code-input{letter-spacing:2px;font-family:var(--font-mono);font-size:14px;font-weight:800;text-align:center;text-transform:uppercase}.btn-join-action{width:72px;height:42px;font-size:13.5px}.btn-join-icon{width:48px;height:42px;min-width:48px;padding:0;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;border-radius:12px}.game-top-bar{display:flex;align-items:center;justify-content:space-between;height:40px;margin-bottom:4px}.game-badge-capsule{padding:4px 12px;border-radius:20px;background:#0f172ad9;border:1px solid var(--border-color)}.badge-text{font-family:var(--font-mono);font-size:11.5px;font-weight:800;color:var(--cyan);letter-spacing:.5px}.timer-capsule{display:flex;align-items:center;gap:5px;padding:4px 10px;border-radius:20px;background:#fbbf241f;border:1px solid rgba(251,191,36,.35)}.timer-icon{font-size:12px}.timer-sec{font-family:var(--font-mono);font-size:12.5px;font-weight:800;color:var(--gold)}.battle-players-bar{display:flex;align-items:center;justify-content:space-between;height:52px;background:#0f172ad9;border:1px solid var(--border-color);border-radius:16px;padding:6px 12px;margin-bottom:8px;backdrop-filter:blur(10px)}.player-battle-card{display:flex;align-items:center;gap:8px;position:relative}.p-avatar{width:34px;height:34px;border-radius:10px;background:#ffffff14;border:1px solid rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-size:18px}.p-info{display:flex;flex-direction:column}.p-name{font-size:12px;font-weight:800;max-width:90px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.p-score-pill{font-family:var(--font-mono);font-size:11px;font-weight:800;color:var(--cyan)}.player-battle-card.opp .p-score-pill{color:var(--magenta)}.p-lock-badge{font-size:9px;font-weight:800;color:#10b981;background:#10b98126;border:1px solid rgba(16,185,129,.4);padding:2px 6px;border-radius:6px;margin-left:4px}.vs-center-pill{width:28px;height:28px;border-radius:50%;background:#ffffff14;border:1px solid rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:900;color:var(--gold)}.arena-stage{flex:1;min-height:0;display:flex;flex-direction:column;position:relative;background:var(--bg-card);border:1px solid var(--border-color);border-radius:20px;padding:12px;box-shadow:0 10px 40px #0006;backdrop-filter:blur(16px);overflow:hidden}.stage-section{display:none;flex-direction:column;height:100%;justify-content:space-between}.stage-section.active{display:flex}.selecting-header{text-align:center;margin-bottom:4px}.phase-badge{font-size:12.5px;font-weight:800;color:var(--cyan)}.opp-selecting-hint{font-size:11px;color:var(--text-muted)}.combo-slots-row{display:flex;justify-content:center;align-items:center;gap:6px;width:100%;margin:6px 0 10px}.combo-slot{flex:1;max-width:52px;min-width:32px;height:clamp(50px,8.5vh,64px);border-radius:12px;background:var(--bg-card-subtle);border:1.5px dashed rgba(255,255,255,.18);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1)}.combo-slot.filled{border-style:solid;border-color:var(--cyan);background:#00f0ff14;box-shadow:0 0 10px #00f0ff33}.combo-slot.active-target{border-color:var(--gold);background:#fbbf241f;transform:translateY(-2px)}.slot-num-badge{position:absolute;top:3px;font-size:8.5px;font-weight:800;color:var(--text-muted)}.slot-emoji{font-size:clamp(20px,3.2vh,26px);margin-top:8px}.hand-choices-row{display:flex;gap:8px;justify-content:center;width:100%;margin-bottom:8px}.hand-btn{flex:1;height:clamp(60px,10vh,76px);border-radius:14px;background:var(--bg-card-subtle);border:1.5px solid var(--border-color);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;transition:all .15s ease}.hand-btn:active{transform:scale(.93);border-color:var(--cyan);box-shadow:0 0 16px var(--cyan-glow)}.hand-emoji{font-size:clamp(24px,4vh,30px)}.hand-name{font-size:11.5px;font-weight:800}.selecting-actions-row{display:flex;gap:8px;justify-content:center;margin-bottom:6px}.lock-btn-wrapper{width:100%}.btn-lock-glow{height:clamp(40px,6vh,46px);font-size:13.5px;font-weight:900;letter-spacing:.5px}.revealing-round-tag{text-align:center;margin-bottom:8px}.round-highlight{display:inline-block;padding:4px 12px;border-radius:20px;background:#00f0ff26;border:1px solid var(--cyan);color:var(--cyan);font-family:var(--font-mono);font-size:12px;font-weight:800}.clash-battlefield{flex:1;display:flex;align-items:center;justify-content:space-around;position:relative;margin:10px 0}.clash-fighter{display:flex;flex-direction:column;align-items:center;gap:6px;z-index:1}.fighter-tag{font-size:11px;font-weight:800;color:var(--text-muted);text-transform:uppercase}.fighter-card{width:clamp(72px,11vh,90px);height:clamp(90px,14vh,114px);border-radius:16px;background:var(--bg-card-subtle);border:2px solid var(--border-color);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px #0006;transition:transform .25s cubic-bezier(.34,1.56,.64,1)}.clash-fighter.left .fighter-card{border-color:var(--cyan)}.clash-fighter.right .fighter-card{border-color:var(--magenta)}.fighter-emoji{font-size:clamp(34px,5vh,46px)}.clash-impact-center{display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:2}.clash-burst{font-size:38px;transition:transform .2s cubic-bezier(.34,1.56,.64,1)}.clash-res-tag{font-size:12px;font-weight:900;padding:3px 10px;border-radius:12px;background:var(--gold);color:#040914;margin-top:4px}.showdown-history-row{display:flex;justify-content:center;gap:6px;margin-top:8px}.history-pill{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:10px;font-weight:900;background:#ffffff14;border:1px solid rgba(255,255,255,.15)}.history-pill.win{background:#10b981;color:#040914;border-color:#10b981}.history-pill.lose{background:#ef4444;color:#fff;border-color:#ef4444}.history-pill.draw{background:#fbbf24;color:#040914;border-color:#fbbf24}.match-result-card{text-align:center;padding:10px 0;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%}.result-trophy-icon{font-size:48px;margin-bottom:6px}.result-title{font-size:24px;font-weight:900;letter-spacing:-.5px;margin-bottom:4px}.result-score-callout{font-size:13px;color:var(--text-muted);font-weight:600}.rematch-status-badge{background:#00f0ff1f;border:1px solid rgba(0,240,255,.4);color:#00f0ff;padding:8px 14px;border-radius:10px;font-size:12.5px;font-weight:700;margin-top:10px;text-align:center;animation:pulseRematch 1.5s infinite}@keyframes pulseRematch{0%,to{border-color:#00f0ff66}50%{border-color:#00f0ffe6;box-shadow:0 0 12px var(--cyan-glow)}}.rematch-status-badge.badge-opp-left{background:#ef44441f;border-color:#ef444466;color:#f87171;animation:none}.result-actions-stack{width:100%;max-width:290px;display:flex;flex-direction:column;gap:12px;margin-top:22px}.result-actions-stack .btn{height:48px;padding:12px 24px;font-size:15px;font-weight:800;border-radius:14px;letter-spacing:.3px}.modal-backdrop{position:absolute;top:0;left:0;width:100%;height:100%;background:#070b14d9;backdrop-filter:blur(10px);z-index:100;display:flex;align-items:center;justify-content:center;padding:16px}.game-modal{width:100%;max-width:340px;background:var(--bg-card);border:1px solid var(--border-color);border-radius:24px;padding:24px 20px;box-shadow:0 12px 48px #0009;text-align:center;animation:modalPop .25s cubic-bezier(.34,1.56,.64,1)}@keyframes modalPop{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}.modal-title{font-size:18px;font-weight:800;color:#fff;margin-bottom:6px}.modal-subtitle,.modal-desc{font-size:13px;color:var(--text-muted);line-height:1.4}.modal-action-row{display:flex;gap:10px;margin-top:16px}.modal-action-row .btn{flex:1;height:42px}.matchmaking-radar{position:relative;width:130px;height:130px;margin:6px auto 14px;border-radius:50%;background:radial-gradient(circle,rgba(0,240,255,.12) 0%,rgba(59,130,246,.04) 60%,transparent 100%);border:1.5px solid rgba(0,240,255,.35);box-shadow:0 0 30px #00f0ff33;overflow:hidden;display:flex;align-items:center;justify-content:center}.radar-scan{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg at 50% 50%,rgba(0,240,255,.4) 0deg,transparent 60deg,transparent 360deg);animation:radarSpin 2s linear infinite}@keyframes radarSpin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.radar-ring{position:absolute;border-radius:50%;border:1px dashed rgba(0,240,255,.25);pointer-events:none}.ring-1{width:40px;height:40px}.ring-2{width:78px;height:78px}.ring-3{width:116px;height:116px}.radar-center{position:relative;z-index:2}.radar-avatar-bubble{width:44px;height:44px;border-radius:50%;background:#11162b;border:2px solid var(--cyan);display:flex;align-items:center;justify-content:center;font-size:22px;box-shadow:0 0 16px #00f0ff80;animation:avatarPulse 2s infinite ease-in-out}@keyframes avatarPulse{0%,to{transform:scale(1);box-shadow:0 0 16px #00f0ff80}50%{transform:scale(1.08);box-shadow:0 0 24px #00f0ffcc}}.matchmaking-stopwatch{font-family:var(--font-mono);font-size:26px;font-weight:800;color:var(--cyan);letter-spacing:2px;margin:4px 0 10px;text-shadow:0 0 12px rgba(0,240,255,.4)}.matchmaking-live-stats{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);padding:6px 14px;border-radius:20px;font-size:12px;color:var(--text-muted)}.matchmaking-live-stats strong{color:#22c55e;font-size:13px}.waiting-radar{position:relative;width:72px;height:72px;margin:0 auto 14px;display:flex;align-items:center;justify-content:center}.radar-ping{position:absolute;inset:0;border-radius:50%;border:2px solid var(--cyan);animation:radarPulse 1.8s ease-out infinite}@keyframes radarPulse{0%{transform:scale(.6);opacity:1}to{transform:scale(1.4);opacity:0}}.radar-core{font-size:32px;z-index:1}.room-code-display{font-family:var(--font-mono);font-size:30px;font-weight:800;color:var(--cyan);letter-spacing:4px;padding:10px 16px;background:#00f0ff14;border:1px solid rgba(0,240,255,.3);border-radius:14px;margin:12px 0 8px;text-shadow:0 0 14px var(--cyan-glow)}.modal-header-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.lang-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.lang-item-btn{height:44px;border-radius:12px;background:var(--bg-card-subtle);border:1px solid var(--border-color);color:#fff;display:flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-display);font-size:13px;font-weight:700;cursor:pointer;transition:all .15s}.lang-item-btn.active{border-color:var(--cyan);background:#00f0ff1f;color:var(--cyan)}#view-security-locked{align-items:center;justify-content:center;padding:24px 16px}.security-card{width:100%;max-width:360px;background:var(--bg-card);border:1.5px solid rgba(0,240,255,.35);border-radius:24px;padding:32px 20px 24px;text-align:center;box-shadow:0 10px 40px #00f0ff26;backdrop-filter:blur(16px)}.security-icon-circle{width:76px;height:76px;border-radius:50%;background:#00f0ff1f;border:2px solid var(--cyan);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;box-shadow:0 0 24px #00f0ff4d}.security-shield-svg{width:38px;height:38px;stroke:var(--cyan)}.security-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:20px;background:#00f0ff26;border:1px solid rgba(0,240,255,.4);color:var(--cyan);font-size:11.5px;font-weight:700;margin-bottom:14px}.security-title{font-size:18px;font-weight:800;color:#fff;margin-bottom:10px;line-height:1.35}.security-desc{font-size:12.5px;line-height:1.5;color:var(--text-muted);margin-bottom:20px}.toast{position:absolute;top:14px;left:50%;transform:translate(-50%);background:#0f172af2;border:1px solid var(--cyan);color:#fff;padding:8px 16px;border-radius:20px;font-size:12.5px;font-weight:700;box-shadow:0 4px 20px #00f0ff59;backdrop-filter:blur(10px);z-index:200;pointer-events:none;animation:toastIn .25s ease-out}@keyframes toastIn{0%{opacity:0;transform:translate(-50%,-10px)}to{opacity:1;transform:translate(-50%)}}.text-cyan{color:var(--cyan)}.text-amber{color:var(--amber)}.text-red{color:var(--red)}.text-gold{color:var(--gold)}.hidden{display:none!important}.mt-3{margin-top:12px}.mt-4{margin-top:16px}
