:root{--bg: #f8f9fa;--bg-gradient: linear-gradient(135deg, #f5f7fa 0%, #e8ecf2 100%);--card: rgba(255, 255, 255, .65);--card-border: rgba(255, 255, 255, .6);--text: #1e293b;--subtle: #94a3b8;--muted: #64748b;--border: rgba(226, 232, 240, .8);--grid-bg: transparent;--cell-a: rgba(255, 255, 255, .5);--cell-b: rgba(255, 255, 255, .5);--cell-line: transparent;--cell-highlight: rgba(59, 130, 246, .1);--cell-valid: rgba(16, 185, 129, .15);--pawn-a: #f43f5e;--pawn-b: #0ea5e9;--pawn-a-glow: rgba(244, 63, 94, .35);--pawn-b-glow: rgba(14, 165, 233, .35);--wall-ghost-valid: rgba(16, 185, 129, .45);--wall-ghost-invalid: rgba(239, 68, 68, .45);--wall-placed: #334155;--wall-placed-border: #1e293b;--wall-placed-shadow: rgba(15, 23, 42, .2);--shadow-card: 0 10px 40px -10px rgba(0, 0, 0, .04), 0 1px 1px rgba(0, 0, 0, .02);--shadow-soft: 0 4px 12px 0 rgba(0, 0, 0, .03);--menu-grid-line: rgba(15, 23, 42, .02);--primary: #0ea5e9;--primary-hover: #0284c7;--primary-glow: rgba(14, 165, 233, .2);--accent: #f59e0b;--accent-hover: #d97706;--start-row-a: rgba(244, 63, 94, .06);--start-row-b: rgba(14, 165, 233, .06)}html.dark{--bg: #0b111e;--bg-gradient: radial-gradient(circle at 50% 0%, #151e33 0%, #080d16 100%);--card: rgba(20, 26, 42, .65);--card-border: rgba(255, 255, 255, .05);--text: #f8fafc;--subtle: #64748b;--muted: #94a3b8;--border: rgba(255, 255, 255, .08);--grid-bg: transparent;--cell-a: rgba(255, 255, 255, .02);--cell-b: rgba(255, 255, 255, .02);--cell-line: transparent;--cell-highlight: rgba(14, 165, 233, .2);--cell-valid: rgba(16, 185, 129, .2);--pawn-a: #fb7185;--pawn-b: #38bdf8;--pawn-a-glow: rgba(251, 113, 133, .45);--pawn-b-glow: rgba(56, 189, 248, .45);--wall-ghost-valid: rgba(52, 211, 153, .5);--wall-ghost-invalid: rgba(248, 113, 113, .5);--wall-placed: rgba(255, 255, 255, .15);--wall-placed-border: rgba(255, 255, 255, .7);--wall-placed-shadow: rgba(0, 0, 0, .5);--shadow-card: 0 20px 40px -15px rgba(0, 0, 0, .5);--shadow-soft: 0 4px 12px 0 rgba(0, 0, 0, .15);--menu-grid-line: rgba(148, 163, 184, .03);--primary: #38bdf8;--primary-hover: #0ea5e9;--primary-glow: rgba(56, 189, 248, .3);--start-row-a: rgba(251, 113, 133, .08);--start-row-b: rgba(56, 189, 248, .08)}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}body{margin:0;font-family:Outfit,Inter,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--bg-gradient);color:var(--text);min-height:100vh;transition:background-color .3s ease,color .3s ease;overflow-x:hidden}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:10px}::-webkit-scrollbar-thumb:hover{background:var(--subtle)}#root{min-height:100vh;display:flex;flex-direction:column}.glass-panel{background:var(--card);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--card-border);border-radius:16px;box-shadow:var(--shadow-card)}button{cursor:pointer;border:none;outline:none;font-family:inherit;font-weight:600;border-radius:12px;transition:transform .1s cubic-bezier(.34,1.56,.64,1),background-color .2s ease,box-shadow .2s ease;-webkit-user-select:none;user-select:none;display:inline-flex;align-items:center;justify-content:center}button:active{transform:scale(.95)}.btn-primary{background-color:var(--primary);color:#fff;padding:12px 24px;font-size:16px;box-shadow:0 4px 12px var(--primary-glow)}.btn-primary:hover{background-color:var(--primary-hover);box-shadow:0 6px 16px var(--primary-glow)}.btn-secondary{background-color:transparent;color:var(--text);border:1px solid var(--border);padding:12px 24px;font-size:16px}.btn-secondary:hover{background-color:#94a3b81a}.btn-danger{background-color:#ef4444;color:#fff;padding:10px 20px;font-size:15px}.btn-danger:hover{background-color:#dc2626}input,select{font-family:inherit;background:#94a3b80d;border:1px solid var(--border);color:var(--text);border-radius:12px;padding:12px 16px;font-size:15px;outline:none;transition:border-color .2s ease,box-shadow .2s ease;width:100%}input:focus,select:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow)}@keyframes wall-enter{0%{transform:scale(0);opacity:0}60%{transform:scale(1.15);opacity:1}to{transform:scale(1);opacity:1}}@keyframes screen-pop{0%{transform:scale(.96);opacity:0}to{transform:scale(1);opacity:1}}@keyframes pulse-active{0%{box-shadow:0 0 0 0 var(--primary-glow)}70%{box-shadow:0 0 0 10px #3b82f600}to{box-shadow:0 0 #3b82f600}}@keyframes bounce-pawn{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}@keyframes confetti-fall{0%{transform:translateY(-20px) rotate(0);opacity:1}to{transform:translateY(110vh) rotate(720deg);opacity:.2}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.screen-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;padding:24px;animation:screen-pop .3s cubic-bezier(.16,1,.3,1);max-width:600px;margin:0 auto;width:100%}.title-container{text-align:center;margin-bottom:32px}.game-title{font-size:48px;font-weight:800;letter-spacing:-1.5px;background:linear-gradient(135deg,var(--primary) 0%,#a855f7 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:4px}.game-subtitle{color:var(--muted);font-size:16px;font-weight:500}.menu-card{width:100%;padding:32px;margin-bottom:24px;display:flex;flex-direction:column;gap:16px}.game-container{display:flex;flex-direction:column;align-items:center;flex:1;padding:16px;width:100%;max-width:1200px;margin:0 auto}.game-layout{display:flex;gap:24px;justify-content:center;width:100%;flex-wrap:wrap}.board-container{position:relative;-webkit-user-select:none;user-select:none;background:var(--card);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);border:1.5px solid var(--card-border);border-radius:20px;box-shadow:var(--shadow-card),inset 0 1px 2px #ffffff26;padding:12px;transition:all .3s cubic-bezier(.16,1,.3,1)}.board-grid{position:relative;display:grid;background:transparent;border-radius:14px}.board-cell{background:var(--cell-a);border:1px solid var(--border);border-radius:8px;position:relative;cursor:pointer;box-shadow:inset 0 1px #ffffff1a,0 1px 3px #00000005;transition:all .25s cubic-bezier(.4,0,.2,1)}.board-cell:nth-child(2n){background:var(--cell-b)}.board-cell:hover{transform:translateY(-1px);box-shadow:0 4px 10px #0000000a;background:#ffffff14}.board-cell.valid-a{border:2px solid var(--pawn-a)!important;box-shadow:0 0 12px var(--pawn-a-glow),inset 0 0 4px var(--pawn-a-glow);background:#f43f5e0d!important;cursor:pointer}.board-cell.valid-b{border:2px solid var(--pawn-b)!important;box-shadow:0 0 12px var(--pawn-b-glow),inset 0 0 4px var(--pawn-b-glow);background:#0ea5e90d!important;cursor:pointer}.pawn{position:absolute;width:70%;height:70%;top:15%;left:15%;border-radius:50%;box-shadow:0 4px 12px #0003;z-index:5;transition:all .2s cubic-bezier(.34,1.56,.64,1);display:flex;align-items:center;justify-content:center}.pawn:after{content:"";width:35%;height:35%;border-radius:50%;background:#fff9;box-shadow:inset 0 2px 4px #0003}.pawn.pawn-a{background:var(--pawn-a);box-shadow:0 0 16px var(--pawn-a-glow),0 4px 12px #0003}.pawn.pawn-b{background:var(--pawn-b);box-shadow:0 0 16px var(--pawn-b-glow),0 4px 12px #0003}.pawn.active{animation:bounce-pawn 2s infinite ease-in-out}.wall-slot-overlay{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:10}.wall-slot{position:absolute;cursor:pointer;pointer-events:auto;transition:background-color .15s ease,box-shadow .15s ease;z-index:12}.wall{position:absolute;border-radius:6px;animation:wall-enter .25s cubic-bezier(.34,1.56,.64,1);box-shadow:0 6px 12px var(--wall-placed-shadow),inset 0 1px 2px #ffffff40;border:3px double var(--wall-placed-border);background:linear-gradient(135deg,#1e293bd9,#0f172af2),var(--wall-placed);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:15;transition:transform .2s ease}html.dark .wall{background:linear-gradient(135deg,#ffffff38,#ffffff14),var(--wall-placed);box-shadow:0 8px 20px var(--wall-placed-shadow),inset 0 1px 2px #ffffff73,0 0 12px #ffffff14;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.wall-ghost{position:absolute;border-radius:6px;z-index:14;pointer-events:none;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);transition:all .1s ease}.wall-ghost.valid{background:linear-gradient(135deg,#10b98133,#10b9810d);border:3px double #10b981;box-shadow:0 0 16px #10b98166,inset 0 1px 2px #fff6}.wall-ghost.invalid{background:linear-gradient(135deg,#ef444433,#ef44440d);border:3px double #ef4444;box-shadow:0 0 16px #ef444466,inset 0 1px 2px #fff6}.game-info-panel{display:flex;flex-direction:column;gap:16px;width:320px}.player-card{padding:16px;display:flex;align-items:center;justify-content:space-between;border-radius:12px}.player-card.active{border-color:var(--primary);background:#3b82f60d;box-shadow:0 0 0 2px var(--primary-glow)}.player-badge{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center}.player-badge.red{background-color:var(--pawn-a)}.player-badge.blue{background-color:var(--pawn-b)}.timer{font-family:monospace;font-size:20px;font-weight:700}.reserve-container{display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;background:#94a3b80d}.reserve-item{width:48px;height:48px;border-radius:8px;background:var(--wall-placed);border:1px solid var(--wall-placed-border);display:flex;align-items:center;justify-content:center;cursor:grab;-webkit-user-select:none;user-select:none;font-weight:700;box-shadow:var(--shadow-soft);transition:transform .15s ease}.reserve-item:active{cursor:grabbing;transform:scale(1.05)}.chat-container{display:flex;flex-direction:column;height:240px;border-radius:12px;overflow:hidden;border:1px solid var(--border)}.chat-messages{flex:1;padding:12px;overflow-y:auto;display:flex;flex-direction:column;gap:8px}.chat-msg{font-size:14px;line-height:1.4;word-break:break-word}.chat-msg.you{text-align:right;color:var(--primary)}.chat-input-bar{display:flex;border-top:1px solid var(--border)}.chat-input-bar input{border:none;border-radius:0;flex:1}.chat-input-bar button{border-radius:0;padding:0 16px}.dialog-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:100;display:flex;align-items:center;justify-content:center;animation:screen-pop .25s ease}.dialog-content{width:90%;max-width:450px;padding:32px;text-align:center}.confetti{position:fixed;width:10px;height:10px;border-radius:50%;pointer-events:none;z-index:200;animation:confetti-fall 4s linear forwards}.header-bar{display:flex;justify-content:space-between;width:100%;padding:16px 24px;align-items:center}.theme-toggle-btn{background:transparent;border:1px solid var(--border);color:var(--text);width:42px;height:42px;border-radius:50%}.theme-toggle-btn:hover{background:#94a3b81a}.animated-bg{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:-1;overflow:hidden;pointer-events:none}.blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.3;animation:float 20s infinite alternate ease-in-out;mix-blend-mode:multiply}.blob-1{width:450px;height:450px;background:#ffe4e6;top:-100px;left:-100px;animation-duration:25s}.blob-2{width:550px;height:550px;background:#e0f2fe;bottom:-150px;right:-100px;animation-duration:30s;animation-delay:-5s}.blob-3{width:350px;height:350px;background:#fef3c7;top:35%;left:45%;animation-duration:22s;animation-delay:-10s}html.dark .blob{mix-blend-mode:screen;opacity:.2}html.dark .blob-1{background:#fb718540}html.dark .blob-2{background:#38bdf840}html.dark .blob-3{background:#fde04726}@keyframes float{0%{transform:translate(0) scale(1) rotate(0)}50%{transform:translate(60px,80px) scale(1.15) rotate(180deg)}to{transform:translate(-40px,-30px) scale(.9) rotate(360deg)}}.board-label{font-family:Outfit,sans-serif;font-size:11px;font-weight:700;color:var(--muted);opacity:.45;pointer-events:none;-webkit-user-select:none;user-select:none;transition:opacity .3s ease}.board-container:hover .board-label{opacity:.75}.matchup-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at center,#0f172af5,#080d18fc);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);overflow:hidden;color:#fff;font-family:Outfit,Inter,sans-serif;-webkit-user-select:none;user-select:none}.matchup-grid{position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);background-size:50px 50px;background-position:center;pointer-events:none;opacity:.6}.matchup-glow-circle{position:absolute;width:600px;height:600px;background:radial-gradient(circle,rgba(14,165,233,.12) 0%,rgba(244,63,94,.08) 50%,transparent 100%);filter:blur(60px);pointer-events:none;animation:float 25s infinite alternate ease-in-out}.matchup-vs-container{display:flex;align-items:center;justify-content:center;gap:48px;width:100%;max-width:900px;margin-bottom:48px;position:relative;z-index:10}.matchup-card{width:280px;height:180px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:24px;padding:24px;text-align:center;position:relative;overflow:hidden;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.matchup-card.left{background:#f43f5e14;border:2px solid rgba(244,63,94,.3);box-shadow:0 0 35px #f43f5e26,inset 0 0 15px #f43f5e14;animation:slide-in-left .8s cubic-bezier(.16,1,.3,1) forwards}.matchup-card.right{background:#0ea5e914;border:2px solid rgba(14,165,233,.3);box-shadow:0 0 35px #0ea5e926,inset 0 0 15px #0ea5e914;animation:slide-in-right .8s cubic-bezier(.16,1,.3,1) forwards}.matchup-card-bg{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,rgba(255,255,255,.02) 0%,transparent 100%);pointer-events:none}.matchup-avatar{width:76px;height:76px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:32px;margin-bottom:16px;font-weight:700;text-shadow:0 2px 4px rgba(0,0,0,.3);position:relative}.matchup-card.left .matchup-avatar{background:radial-gradient(circle,var(--pawn-a) 0%,rgba(244,63,94,.6) 100%);box-shadow:0 0 20px var(--pawn-a-glow)}.matchup-card.right .matchup-avatar{background:radial-gradient(circle,var(--pawn-b) 0%,rgba(14,165,233,.6) 100%);box-shadow:0 0 20px var(--pawn-b-glow)}.matchup-name{font-size:20px;font-weight:800;letter-spacing:.5px;margin-bottom:4px}.matchup-role{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:1.5px}.matchup-card.left .matchup-role{color:var(--pawn-a)}.matchup-card.right .matchup-role{color:var(--pawn-b)}.matchup-vs-wrapper{position:relative;display:flex;align-items:center;justify-content:center;width:120px;height:120px}.matchup-vs-badge{width:84px;height:84px;border-radius:50%;background:linear-gradient(135deg,#f59e0b,#d97706);display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:900;font-style:italic;color:#fff;border:4px solid #ffffff;box-shadow:0 0 30px #f59e0b80,inset 0 2px 4px #fff6;text-shadow:0 2px 4px rgba(0,0,0,.3);z-index:15;position:relative;animation:vs-bounce .6s cubic-bezier(.34,1.56,.64,1) forwards}.matchup-vs-ring{position:absolute;width:84px;height:84px;border-radius:50%;border:2px solid rgba(245,158,11,.4);animation:vs-ring-expand 2s infinite ease-out;pointer-events:none;z-index:10}.matchup-info{text-align:center;position:relative;z-index:10;display:flex;flex-direction:column;align-items:center;gap:16px}.matchup-mode-badge{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);padding:8px 20px;border-radius:20px;font-size:13px;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;color:var(--muted);box-shadow:var(--shadow-soft);margin-bottom:8px}.matchup-title{font-size:26px;font-weight:800;text-transform:uppercase;letter-spacing:5px;background:linear-gradient(90deg,#f8fafc,#cbd5e1,#f8fafc);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.matchup-progress-track{width:320px;height:6px;background:#ffffff14;border-radius:3px;overflow:hidden;border:1px solid rgba(255,255,255,.05)}.matchup-progress-fill{height:100%;background:linear-gradient(90deg,var(--pawn-a) 0%,#f59e0b 50%,var(--pawn-b) 100%);border-radius:3px;animation:progress-fill-anim 2s linear forwards}.matchup-countdown-number{font-size:64px;font-weight:900;color:#fff;text-shadow:0 0 25px rgba(255,255,255,.5);animation:countdown-pop 1s ease-out infinite;line-height:1;height:64px}@keyframes slide-in-left{0%{transform:translate(-240px) rotate(-12deg);opacity:0;filter:blur(8px)}75%{transform:translate(12px) rotate(2deg);opacity:.9}to{transform:translate(0) rotate(0);opacity:1;filter:blur(0)}}@keyframes slide-in-right{0%{transform:translate(240px) rotate(12deg);opacity:0;filter:blur(8px)}75%{transform:translate(-12px) rotate(-2deg);opacity:.9}to{transform:translate(0) rotate(0);opacity:1;filter:blur(0)}}@keyframes vs-ring-expand{0%{transform:scale(1);opacity:.8}to{transform:scale(2.2);opacity:0}}@keyframes progress-fill-anim{0%{width:0%}to{width:100%}}@keyframes countdown-pop{0%{transform:scale(.7);opacity:0}12%{transform:scale(1.2);opacity:1}88%{transform:scale(1);opacity:1}to{transform:scale(.85);opacity:0}}@media (max-width: 768px){.matchup-vs-container{flex-direction:column;gap:16px;margin-bottom:32px}.matchup-vs-wrapper{width:80px;height:80px}.matchup-vs-badge{width:70px;height:70px;font-size:26px}.matchup-card{width:250px;height:140px;padding:16px}.matchup-avatar{width:56px;height:56px;font-size:24px;margin-bottom:8px}}.game-over-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);overflow:hidden;color:#fff;font-family:Outfit,Inter,sans-serif;-webkit-user-select:none;user-select:none;transition:background-color .5s ease}.game-over-overlay.victory{background:radial-gradient(circle at center,#0f172af5,#080d18fc)}.game-over-overlay.defeat{background:radial-gradient(circle at center,#1e0a10f7,#0c0408fc)}.game-over-grid{position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);background-size:50px 50px;background-position:center;pointer-events:none;opacity:.5}.game-over-glow-sphere{position:absolute;width:600px;height:600px;filter:blur(80px);pointer-events:none;z-index:1}.victory .game-over-glow-sphere{background:radial-gradient(circle,rgba(16,185,129,.15) 0%,rgba(245,158,11,.08) 50%,transparent 100%);animation:float 25s infinite alternate ease-in-out}.defeat .game-over-glow-sphere{background:radial-gradient(circle,rgba(239,68,68,.15) 0%,rgba(139,92,246,.05) 50%,transparent 100%);animation:float 20s infinite alternate-reverse ease-in-out}.game-over-card-wrapper{position:relative;z-index:10;animation:screen-pop .5s cubic-bezier(.34,1.56,.64,1) forwards}.game-over-card{width:440px;border-radius:28px;padding:40px;text-align:center;position:relative;overflow:hidden;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:2px solid rgba(255,255,255,.08);box-shadow:0 20px 50px #0006}.victory .game-over-card{background:#10b9810f;border-color:#10b98159;box-shadow:0 0 40px #10b98126,0 20px 50px #0006}.defeat .game-over-card{background:#ef44440d;border-color:#ef44444d;box-shadow:0 0 40px #ef44441f,0 20px 50px #0006}.game-over-card-bg{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,rgba(255,255,255,.03) 0%,transparent 100%);pointer-events:none}.game-over-badge-container{display:flex;justify-content:center;margin-bottom:24px}.game-over-icon{width:90px;height:90px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:44px;box-shadow:0 10px 25px #0003;position:relative;animation:vs-bounce .6s cubic-bezier(.34,1.56,.64,1) forwards}.game-over-icon.victory{background:radial-gradient(circle,#f59e0b,#d97706);border:4px solid #fef3c7;box-shadow:0 0 30px #f59e0b99;text-shadow:0 2px 4px rgba(0,0,0,.3)}.game-over-icon.defeat{background:radial-gradient(circle,#ef4444,#b91c1c);border:4px solid #fee2e2;box-shadow:0 0 30px #ef444480;text-shadow:0 2px 4px rgba(0,0,0,.3)}.game-over-title-text{font-size:38px;font-weight:900;text-transform:uppercase;letter-spacing:4px;margin-bottom:8px;line-height:1.1}.victory .game-over-title-text{background:linear-gradient(90deg,#fef3c7,#f59e0b,#fef3c7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 0 20px rgba(245,158,11,.2)}.defeat .game-over-title-text{background:linear-gradient(90deg,#fee2e2,#ef4444,#fee2e2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;text-shadow:0 0 20px rgba(239,68,68,.2)}.game-over-sub-text{font-size:20px;font-weight:600;color:var(--muted);margin-bottom:32px}.game-over-timer-container{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:36px;width:100%}.game-over-timer-text{font-size:14px;font-weight:700;letter-spacing:1px;color:var(--subtle);text-transform:uppercase}.game-over-timer-text.waiting{color:#10b981;text-shadow:0 0 8px rgba(16,185,129,.4)}.game-over-progress-track{width:100%;max-width:280px;height:5px;background:#ffffff14;border-radius:3px;overflow:hidden;border:1px solid rgba(255,255,255,.04)}.game-over-progress-fill{height:100%;border-radius:3px;transition:width 1s linear}.victory .game-over-progress-fill{background:linear-gradient(90deg,#10b981,#f59e0b);box-shadow:0 0 8px #10b98180}.defeat .game-over-progress-fill{background:linear-gradient(90deg,#ef4444,#ec4899);box-shadow:0 0 8px #ef444480}.game-over-pulse-dot{width:10px;height:10px;background-color:#10b981;border-radius:50%;box-shadow:0 0 10px #10b981;animation:pulse-active 1.5s infinite ease-in-out}.game-over-actions{display:flex;flex-direction:column;gap:12px;width:100%}.game-over-btn{width:100%;padding:14px 28px!important;font-size:15px!important;font-weight:800!important;letter-spacing:1.5px!important;text-transform:uppercase!important;border-radius:14px!important}.rematch-btn.waiting{opacity:.7;cursor:not-allowed}@media (max-width: 480px){.game-over-card{width:90vw;padding:24px;border-radius:20px}.game-over-title-text{font-size:28px}.game-over-sub-text{font-size:16px;margin-bottom:24px}.game-over-timer-container{margin-bottom:24px}.game-over-icon{width:70px;height:70px;font-size:32px}}.welcome-screen{position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at center,#0f172af5,#080d18fc);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);overflow:hidden;color:#fff;font-family:Outfit,Inter,sans-serif;-webkit-user-select:none;user-select:none;transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1)}.welcome-screen.light{background:radial-gradient(circle at center,#f5f7faf5,#dce1ebfc);color:#1e293b}.welcome-screen.exit-active{opacity:0;transform:scale(1.05);pointer-events:none}.welcome-grid{position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);background-size:60px 60px;background-position:center;pointer-events:none;opacity:.7}.welcome-screen.light .welcome-grid{background-image:linear-gradient(rgba(15,23,42,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(15,23,42,.03) 1px,transparent 1px);opacity:1}.welcome-glow{position:absolute;width:700px;height:700px;background:radial-gradient(circle,rgba(14,165,233,.15) 0%,rgba(168,85,247,.08) 50%,transparent 100%);filter:blur(80px);pointer-events:none;animation:welcome-float-glow 20s infinite alternate ease-in-out}.welcome-screen.light .welcome-glow{background:radial-gradient(circle,rgba(14,165,233,.2) 0%,rgba(168,85,247,.1) 50%,transparent 100%)}@keyframes welcome-float-glow{0%{transform:translate(-10%,-10%) scale(1)}to{transform:translate(10%,10%) scale(1.2)}}.welcome-card-wrapper{position:relative;z-index:10;animation:welcome-pop .8s cubic-bezier(.16,1,.3,1) forwards}@keyframes welcome-pop{0%{transform:translateY(30px) scale(.95);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}.welcome-card{width:460px;max-width:90vw;border-radius:28px;padding:48px 40px;text-align:center;position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.08);box-shadow:0 25px 60px -15px #0006;background:#0f172a99}.welcome-screen.light .welcome-card{background:#ffffffb3;border:1px solid rgba(15,23,42,.08);box-shadow:0 25px 60px -15px #0f172a1a}.welcome-icon-container{position:relative;width:120px;height:120px;margin:0 auto 28px;display:flex;align-items:center;justify-content:center}.welcome-logo-icon{font-size:54px;z-index:5;filter:drop-shadow(0 8px 16px rgba(14,165,233,.3));animation:welcome-pulse-logo 2s infinite ease-in-out}@keyframes welcome-pulse-logo{0%,to{transform:scale(1)}50%{transform:scale(1.08)}}.welcome-ring{position:absolute;border-radius:50%;border:1.5px solid transparent;pointer-events:none}.welcome-ring-1{width:100px;height:100px;border-color:#0ea5e940;animation:welcome-spin 8s linear infinite}.welcome-ring-2{width:120px;height:120px;border-color:#a855f733;border-style:dashed;animation:welcome-spin-reverse 12s linear infinite}.welcome-ring-3{width:80px;height:80px;border-color:#f59e0b26;animation:welcome-spin 6s linear infinite}@keyframes welcome-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes welcome-spin-reverse{0%{transform:rotate(360deg)}to{transform:rotate(0)}}.welcome-title{font-size:44px;font-weight:900;letter-spacing:-1.5px;background:linear-gradient(135deg,#0ea5e9,#a855f7,#f43f5e);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:12px;text-transform:uppercase}.welcome-subtitle{color:var(--muted);font-size:15px;font-weight:500;line-height:1.6;margin-bottom:40px;max-width:320px;margin-left:auto;margin-right:auto}.welcome-btn{position:relative;width:100%;padding:16px 32px;font-size:16px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:#fff;background:linear-gradient(135deg,#0ea5e9,#8b5cf6,#d946ef);background-size:200% 200%;border-radius:16px;border:none;cursor:pointer;outline:none;box-shadow:0 10px 30px #8b5cf666,0 0 0 1px #ffffff1a inset;transition:all .3s cubic-bezier(.16,1,.3,1);overflow:hidden;animation:welcome-btn-pulse 2s infinite,welcome-bg-shift 6s ease infinite}.welcome-btn:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 15px 35px #8b5cf699,0 0 20px #0ea5e966}.welcome-btn:active{transform:translateY(-1px) scale(.98)}.welcome-btn-inner{position:relative;z-index:2;text-shadow:0 1px 2px rgba(0,0,0,.2)}.welcome-btn:before{content:"";position:absolute;top:0;left:-100%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transform:skew(-25deg);z-index:1;transition:none}.welcome-btn:hover:before{animation:welcome-shimmer 1.5s infinite}@keyframes welcome-shimmer{0%{left:-100%}to{left:200%}}@keyframes welcome-bg-shift{0%,to{background-position:0% 50%}50%{background-position:100% 50%}}@keyframes welcome-btn-pulse{0%{box-shadow:0 10px 30px #8b5cf666,0 0 #8b5cf666}70%{box-shadow:0 10px 30px #8b5cf666,0 0 0 15px #8b5cf600}to{box-shadow:0 10px 30px #8b5cf666,0 0 #8b5cf600}}.menu-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:20px;width:100%}@media (max-width: 768px){.menu-grid{grid-template-columns:1fr;gap:16px}}.multiplayer-card{height:60vh;max-height:60vh}@media (max-width: 768px){.multiplayer-card{height:auto;max-height:480px}}.mobile-hud{display:none;width:100%;max-width:480px;padding:10px 14px;margin-bottom:12px;align-items:center;justify-content:space-between;gap:12px;z-index:10}.hud-player{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:10px;flex:1;min-width:0;border:1px solid transparent;transition:all .2s ease}.hud-player.active{background:#38bdf814;border-color:#38bdf833}.hud-player.a.active{background:#fb718514;border-color:#fb718533}.hud-badge{width:14px;height:14px;border-radius:50%;flex-shrink:0;box-shadow:0 2px 6px #00000040}.hud-badge.red{background-color:var(--pawn-a);box-shadow:0 0 10px var(--pawn-a-glow)}.hud-badge.blue{background-color:var(--pawn-b);box-shadow:0 0 10px var(--pawn-b-glow)}.hud-info{display:flex;flex-direction:column;min-width:0;flex:1}.hud-name{font-size:13px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hud-walls{font-size:10px;font-weight:600;color:var(--muted)}.hud-timer{font-family:monospace;font-size:14px;font-weight:700;flex-shrink:0;letter-spacing:.5px}.hud-reserve{display:flex;gap:6px;align-items:center;flex-shrink:0}.hud-reserve-btn{background:var(--wall-placed);border:1px solid var(--wall-placed-border);color:#fff;font-size:13px;font-weight:700;width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer;transition:all .2s cubic-bezier(.34,1.56,.64,1);box-shadow:var(--shadow-soft)}.hud-reserve-btn.active{border-color:var(--primary);background:var(--primary);box-shadow:0 0 12px var(--primary-glow);transform:scale(1.05)}.hud-reserve-btn:disabled{opacity:.35;cursor:not-allowed;transform:none}@media (max-width: 768px){.mobile-hud{display:flex}.game-info-panel{display:none!important}}.wall-action-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;max-width:480px;margin-top:14px;padding:10px 16px;border-radius:14px;border:1px solid var(--border);box-shadow:var(--shadow-soft);animation:screen-pop .2s ease}.action-message{font-size:13px;font-weight:700;flex:1;min-width:0;text-align:left}.action-message .valid-text{color:#10b981;text-shadow:0 0 8px rgba(16,185,129,.2)}.action-message .invalid-text{color:#ef4444;text-shadow:0 0 8px rgba(239,68,68,.2)}.action-buttons{display:flex;gap:8px;flex-shrink:0}.action-buttons button{padding:6px 14px!important;font-size:13px!important;height:34px!important;border-radius:8px!important}.game-info-panel{display:flex;flex-direction:column;gap:16px;width:100%;max-width:320px}@media (max-width: 480px){.header-bar{padding:8px 12px}.header-bar .game-title{font-size:18px!important}.header-bar>div{gap:6px!important}.header-bar .ui-select{height:34px;padding:0 8px;font-size:12px;gap:6px}.theme-toggle-btn{width:34px!important;height:34px!important;font-size:14px!important}}.avatar{border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:1;border:none;padding:0;box-shadow:inset 0 -2px 6px #0000002e,0 2px 6px #0003;-webkit-user-select:none;user-select:none}.avatar>span{filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}.avatar-ring-a{box-shadow:0 0 0 2px var(--pawn-a),0 0 10px var(--pawn-a-glow)}.avatar-ring-b{box-shadow:0 0 0 2px var(--pawn-b),0 0 10px var(--pawn-b-glow)}.avatar-clickable{cursor:pointer;transition:transform .15s ease}.avatar-clickable:hover{transform:scale(1.08) rotate(-6deg)}.avatar-clickable:active{transform:scale(.95)}.matchup-avatar{padding:4px;box-sizing:border-box}.matchup-avatar .avatar{width:100%!important;height:100%!important;font-size:inherit!important;box-shadow:none}.lobby-row{padding:8px 12px;display:flex;justify-content:space-between;align-items:center;gap:10px;border-radius:8px;animation:lobby-row-in .35s ease}.lobby-row-info{display:flex;align-items:center;gap:10px;min-width:0;text-align:left}.lobby-row-name{font-weight:700;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.lobby-row-meta{font-size:11px;color:var(--subtle);white-space:nowrap}@keyframes lobby-row-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}.ui-select{--sel-bg: rgba(148, 163, 184, .06);position:relative;display:inline-flex;align-items:center;gap:10px;width:100%;height:42px;padding:0 14px;font-family:inherit;font-size:15px;font-weight:600;text-align:left;color:var(--text);background:var(--sel-bg);border:1px solid var(--border);border-radius:12px;cursor:pointer;outline:none;transition:border-color .2s ease,box-shadow .2s ease,background-color .2s ease}.ui-select:hover{border-color:color-mix(in srgb,var(--primary) 45%,var(--border));background:color-mix(in srgb,var(--primary) 6%,var(--sel-bg))}.ui-select:focus-visible,.ui-select.is-open{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow)}.ui-select-sm{width:auto;height:36px;padding:0 10px;font-size:13px;border-radius:10px}.ui-select-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-select-icon{flex-shrink:0;font-size:1.05em;line-height:1}.ui-select-chevron{flex-shrink:0;color:var(--muted);transition:transform .25s cubic-bezier(.2,.8,.2,1),color .2s ease}.ui-select.is-open .ui-select-chevron{transform:rotate(180deg);color:var(--primary)}.ui-select-badge{flex-shrink:0;padding:2px 7px;font-size:10px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--primary);background:var(--primary-glow);border-radius:999px}.ui-select-menu{position:fixed;z-index:10000;max-height:320px;overflow-y:auto;margin:0;padding:6px;list-style:none;background:#ffffffeb;color:#1e293b;border:1px solid rgba(15,23,42,.08);border-radius:14px;box-shadow:0 18px 40px -12px #0f172a40,0 2px 6px #0f172a0f;backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);transform-origin:top center;animation:ui-select-in .16s cubic-bezier(.2,.8,.2,1);font-family:Outfit,Inter,system-ui,-apple-system,sans-serif}.ui-select-menu.drop-up{transform-origin:bottom center}html.dark .ui-select-menu{background:#111827f0;color:#f8fafc;border-color:#ffffff17;box-shadow:0 22px 48px -12px #000000b3,0 0 0 1px #38bdf80d}@keyframes ui-select-in{0%{opacity:0;transform:translateY(-4px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}.ui-select-menu.drop-up{animation-name:ui-select-in-up}@keyframes ui-select-in-up{0%{opacity:0;transform:translateY(4px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}.ui-select-option{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;cursor:pointer;font-size:14px;font-weight:600;transition:background-color .12s ease,color .12s ease}.ui-select-option+.ui-select-option{margin-top:2px}.ui-select-option.is-active{background:#0ea5e91a}html.dark .ui-select-option.is-active{background:#38bdf81f}.ui-select-option.is-selected{color:var(--primary)}.ui-select-text{display:flex;flex-direction:column;flex:1;min-width:0}.ui-select-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ui-select-hint{margin-top:1px;font-size:11.5px;font-weight:500;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ui-select-check{flex-shrink:0;color:var(--primary);opacity:0;transform:scale(.6);transition:opacity .15s ease,transform .15s ease}.ui-select-option.is-selected .ui-select-check{opacity:1;transform:scale(1)}@media (prefers-reduced-motion: reduce){.ui-select-menu{animation:none}}html[lang=fa] body,html[lang=fa] button,html[lang=fa] input,html[lang=fa] textarea,html[lang=fa] select{font-family:Vazirmatn,Outfit,Inter,system-ui,-apple-system,sans-serif;letter-spacing:normal}html[dir=rtl] .board-container,html[dir=rtl] .board-grid,html[dir=rtl] .lesson-board,html[dir=rtl] input[maxlength="4"]{direction:ltr}.ad-slot{display:flex;justify-content:center;width:100%;max-width:100%;overflow:hidden}.ad-slot-menu{margin-top:20px}.ad-slot-result{position:relative;z-index:2;flex-shrink:0;padding:12px 0 20px}.menu-seo-footer{width:100%;margin-top:20px;padding-top:14px;border-top:1px solid var(--border);color:var(--muted);font-size:12px;text-align:center}.menu-seo-footer p{margin:0 0 8px}.menu-seo-footer nav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px}.menu-seo-footer a{color:var(--muted)}.menu-seo-footer a:hover{color:var(--text)}.game-scene{--scene-bg: #11140e;--scene-fg: #f5f5e9;--scene-muted: #9da48f;--scene-line: #343a2b;--scene-accent: #e8fa86;--scene-accent-ink: #1c2609;position:fixed;top:0;right:0;bottom:0;left:0;z-index:9999;display:flex;flex-direction:column;padding:32px clamp(24px,5vw,80px) 24px;background:var(--scene-bg);color:var(--scene-fg);overflow-y:auto;overflow-x:hidden;isolation:isolate;animation:scene-open .45s ease-out both}.game-scene.light{--scene-bg: #f2f2e9;--scene-fg: #20251a;--scene-muted: #69705d;--scene-line: #d2d6c5;--scene-accent: #d9ed6c;--scene-accent-ink: #26320a}.scene-header,.scene-footer{display:flex;align-items:center;justify-content:space-between;gap:24px;position:relative;z-index:2;flex-shrink:0}.scene-header{min-height:40px}.scene-brand{display:flex;align-items:center;gap:10px;font-weight:750;font-size:21px;letter-spacing:-.7px}.scene-brand img{width:30px;height:30px;border-radius:9px}.scene-header-note{display:inline-flex;align-items:center;gap:10px;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--scene-muted);text-align:end}.scene-header-note i,.result-waiting i{width:6px;height:6px;border-radius:50%;background:var(--scene-accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--scene-accent) 10%,transparent);flex-shrink:0}.scene-main{width:100%;max-width:1400px;margin:auto;padding:48px 0;display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:32px;flex:1 0 auto}.scene-copy{position:relative;z-index:2;min-width:0;container-type:inline-size}.scene-eyebrow{display:flex;align-items:center;gap:12px;color:var(--scene-muted);font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;margin-bottom:24px}.scene-line{width:28px;height:1px;background:currentColor;flex-shrink:0}.scene-title{color:var(--scene-fg);font-size:clamp(64px,18cqi,144px);line-height:.98;font-weight:850;letter-spacing:-.075em;margin:0 0 30px;animation:type-rise .9s cubic-bezier(.16,1,.3,1) both}.title-period{color:var(--scene-accent)}.scene-description{color:var(--scene-muted);font-size:clamp(15px,1.4vw,18px);line-height:1.7;max-width:340px;margin-bottom:36px;animation:type-rise .9s .1s cubic-bezier(.16,1,.3,1) both}.game-scene .scene-button{display:inline-flex;align-items:center;justify-content:space-between;gap:28px;width:auto;max-width:100%;padding:18px 24px;border-radius:4px;border:1px solid transparent;font-family:inherit;font-size:13px;font-weight:750;line-height:1.4;letter-spacing:.5px;cursor:pointer;text-align:start;text-transform:none;transition:background .2s,transform .2s;animation:none;box-shadow:none}.game-scene .scene-primary{background:var(--scene-accent);color:var(--scene-accent-ink);min-width:200px}.game-scene .scene-secondary{background:transparent;color:var(--scene-fg);border-color:var(--scene-line)}.game-scene .scene-button svg{width:22px;height:22px;flex-shrink:0;transition:transform .2s}.game-scene .scene-button:hover:not(:disabled){transform:translateY(-3px);background:color-mix(in srgb,var(--scene-accent) 88%,white);color:var(--scene-accent-ink)}.game-scene .scene-button:hover svg{transform:translate(4px)}.game-scene .scene-button:active:not(:disabled){transform:translateY(0)}.game-scene .scene-button:disabled{opacity:.5;cursor:default}.game-scene .scene-button:focus-visible{outline:2px solid var(--scene-fg);outline-offset:5px}.scene-actions{display:flex;flex-wrap:wrap;gap:12px;animation:type-rise .9s .2s cubic-bezier(.16,1,.3,1) both}.scene-footer{padding-top:24px;border-top:1px solid var(--scene-line);color:var(--scene-muted);font-size:11px;letter-spacing:.5px;line-height:1.6}.scene-footer>span:last-of-type{text-align:end}.footer-arrow{display:inline-block;margin-inline-start:28px;font-size:20px;color:var(--scene-fg)}.game-scene:lang(fa) .scene-title{letter-spacing:0}.scene-description,.scene-button span{overflow-wrap:anywhere}.scene-button span{min-width:0}.scene-art{position:relative;width:min(100%,540px);aspect-ratio:1;justify-self:center;perspective:900px;display:grid;place-items:center}.scene-art:before{content:"";position:absolute;width:78%;height:78%;border-radius:50%;background:radial-gradient(circle,#d4ec6530,transparent 70%);filter:blur(28px)}.art-orbit{position:absolute;top:3%;right:3%;bottom:3%;left:3%;border:1px solid var(--scene-line);border-radius:50%;transform:rotate(-35deg) scaleY(.85)}.art-orbit:after{content:"";position:absolute;top:12%;left:12%;width:7px;height:7px;border-radius:50%;background:var(--scene-accent)}.art-board{position:relative;width:100%;overflow:visible;transform:rotateX(42deg) rotate(-32deg) scale(.9);filter:drop-shadow(-20px 38px 16px #0005);animation:board-land 1.3s cubic-bezier(.16,1,.3,1) both}.art-coordinate{position:absolute;font-size:10px;letter-spacing:2px;color:var(--scene-muted);font-variant-numeric:tabular-nums}.coordinate-top{top:0;right:0}.coordinate-bottom{bottom:0;left:0;display:flex;gap:20px;align-items:center}.coordinate-bottom span{color:var(--scene-accent);font-size:24px}.art-cell{animation:tile-land .8s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i) * 16ms)}.art-path{animation:path-stream 3s linear infinite}.art-goal{transform-box:fill-box;transform-origin:center;animation:goal-breathe 3s ease-in-out infinite}.art-welcome .art-runner{animation:runner-route 6s 1s cubic-bezier(.4,0,.2,1) infinite}.art-victory .art-runner{animation:runner-finish 1.6s .25s cubic-bezier(.4,0,.2,1) both}.art-victory .art-goal{animation:goal-breathe 1.5s 1.5s ease-in-out infinite}.art-defeat .art-runner{animation:runner-blocked 1.6s .25s ease-in-out both}.art-defeat .art-path{stroke:#e99b84;opacity:.45}.art-block{animation:tile-land .8s .5s cubic-bezier(.16,1,.3,1) both}.result-scene.defeat{--scene-accent: #ffac91;--scene-accent-ink: #3b1c15}.result-scene.defeat.light{--scene-accent: #eda68d}.result-heading{font-size:clamp(40px,calc(137cqi / var(--title-length, 7)),116px);letter-spacing:-.065em;text-transform:uppercase}.result-description{font-size:22px;color:var(--scene-fg)}.result-mark{font-size:22px;color:var(--scene-accent);margin-inline-start:12px}.result-footer{min-height:65px;padding-bottom:10px}.result-timer-track{position:absolute;top:-1px;left:0;right:0;height:2px;overflow:hidden}.result-timer-track div{height:100%;background:var(--scene-accent);transform-origin:left;transition:transform 1s linear}.result-seconds{font-size:22px;line-height:1;font-variant-numeric:tabular-nums;color:var(--scene-fg)}.result-seconds small{font-size:11px;color:var(--scene-muted)}.result-waiting{display:flex;align-items:center;gap:12px}.result-waiting i{animation:waiting-breathe 1.5s ease-in-out infinite}.matchup-plane{position:absolute;top:0;bottom:0;width:55%;pointer-events:none;z-index:-1}.plane-red{left:0;background:linear-gradient(120deg,#f47c6b12,transparent 85%);clip-path:polygon(0 0,100% 0,75% 100%,0 100%)}.plane-blue{right:0;background:linear-gradient(300deg,#86b5f91a,transparent 85%);clip-path:polygon(25% 0,100% 0,100% 100%,0 100%)}.match-stage{width:min(100%,1100px);margin:auto;padding:48px 0;flex:1 0 auto;display:flex;flex-direction:column;justify-content:center;align-items:center}.match-stage>.scene-eyebrow{text-align:center;justify-content:center}.match-contenders{display:grid;grid-template-columns:minmax(0,1fr) 220px minmax(0,1fr);align-items:center;gap:40px;width:100%;margin:28px 0}.match-player{text-align:center;min-width:0;animation:player-enter .8s cubic-bezier(.16,1,.3,1) both}.player-red{--player-color: #f18c7a;--entry-x: -60px}.player-blue{--player-color: #92baf3;--entry-x: 60px;animation-delay:.12s}.match-player-avatar{width:104px;height:104px;padding:6px;border:1px solid var(--scene-line);border-radius:28px;margin:0 auto 28px;transform:rotate(-6deg);background:var(--scene-bg)}.player-blue .match-player-avatar{transform:rotate(6deg)}.match-player-avatar .avatar{width:100%;height:100%;border-radius:21px}.match-player-color{font-size:10px;text-transform:uppercase;letter-spacing:3px;color:var(--player-color);margin-bottom:12px}.light .player-red{--player-color: #ab493b}.light .player-blue{--player-color: #3768b0}.match-player-name{font-size:clamp(24px,3.3vw,42px);letter-spacing:-1.2px;font-weight:700;line-height:1.2;overflow-wrap:anywhere}.match-beat{text-align:center}.match-versus{font-size:11px;font-weight:600;letter-spacing:3px;color:var(--scene-muted);text-transform:uppercase}.match-count{font-size:150px;line-height:1.2;font-weight:800;letter-spacing:-12px;padding-right:12px;font-variant-numeric:tabular-nums;color:var(--scene-accent);animation:number-reveal .5s cubic-bezier(.16,1,.3,1) both}.game-scene.light .match-count{color:#596a16}.game-scene.light .match-beat-dots .active{background:#596a16}.game-scene.light .result-timer-track div{background:var(--scene-fg)}.match-beat-dots{display:flex;justify-content:center;gap:6px;margin-top:12px}.match-beat-dots i{width:24px;height:3px;background:var(--scene-line);transition:background .25s}.match-beat-dots .active{background:var(--scene-accent)}.match-loading{position:absolute;bottom:0;left:0;width:100%;height:3px}.match-loading div{height:100%;background:var(--scene-accent);transform-origin:left;animation:match-progress 1.76s linear both}.matchup-scene.is-ready{animation:scene-open .2s both,scene-close .3s .5s ease-in both}@keyframes scene-open{0%{opacity:0}to{opacity:1}}@keyframes scene-close{to{opacity:0;transform:scale(1.04)}}@keyframes type-rise{0%{opacity:0;transform:translateY(32px)}to{opacity:1;transform:translateY(0)}}@keyframes board-land{0%{opacity:0;transform:rotateX(55deg) rotate(-42deg) translateY(60px) scale(.8)}to{opacity:1;transform:rotateX(42deg) rotate(-32deg) scale(.9)}}@keyframes tile-land{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes path-stream{to{stroke-dashoffset:-60}}@keyframes goal-breathe{0%,to{opacity:.6;transform:scale(.9)}50%{opacity:1;transform:scale(1.1)}}@keyframes runner-route{0%,8%{transform:translate(0);opacity:1}28%{transform:translateY(-140px)}48%{transform:translate(140px,-140px)}65%{transform:translate(140px,-280px)}80%,90%{transform:translate(280px,-280px);opacity:1}95%{transform:translate(280px,-280px);opacity:0}96%{transform:translate(0);opacity:0}to{transform:translate(0);opacity:1}}@keyframes runner-finish{0%{transform:translate(0)}30%{transform:translateY(-140px)}55%{transform:translate(140px,-140px)}80%{transform:translate(140px,-280px)}to{transform:translate(280px,-280px)}}@keyframes runner-blocked{0%{transform:translate(0)}40%{transform:translateY(-140px)}75%{transform:translate(140px,-140px)}88%{transform:translate(140px,-166px)}to{transform:translate(140px,-154px)}}@keyframes waiting-breathe{50%{opacity:.35}}@keyframes player-enter{0%{opacity:0;transform:translate(var(--entry-x))}to{opacity:1;transform:translate(0)}}@keyframes number-reveal{0%{opacity:0;transform:translateY(20px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes match-progress{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@media (max-width: 800px){.game-scene{padding:22px 24px 18px}.scene-header-note{font-size:9px;letter-spacing:.6px;max-width:48%}.scene-main{grid-template-columns:1fr;gap:8px;padding:26px 0;max-width:540px}.scene-copy{order:2}.scene-art{order:1;width:min(64vw,300px)}.scene-title{font-size:clamp(58px,20cqi,100px);margin-bottom:18px}.scene-eyebrow{margin-bottom:16px;font-size:9px;letter-spacing:1.5px}.scene-description{margin-bottom:24px;font-size:14px;max-width:360px}.scene-footer{font-size:9px;gap:16px;padding-top:18px}.footer-arrow{margin-inline-start:12px}.result-heading{font-size:clamp(32px,calc(142cqi / var(--title-length, 7)),96px)}.result-description{font-size:18px}.game-scene .scene-button{padding:16px 20px;font-size:12px}.game-scene .scene-primary{min-width:180px}.result-footer{min-height:54px}.match-contenders{grid-template-columns:minmax(0,1fr) 110px minmax(0,1fr);gap:12px}.match-count{font-size:90px;letter-spacing:-7px;padding-right:7px}.match-player-avatar{width:80px;height:80px;border-radius:22px;padding:5px;margin-bottom:22px}.match-player-avatar .avatar{border-radius:16px}.match-player-name{font-size:23px;letter-spacing:-.7px}.match-player-color{font-size:9px;letter-spacing:2px}}@media (max-width: 400px){.game-scene{padding:18px 20px 16px}.scene-brand{font-size:18px}.scene-art{width:62vw}.scene-main{padding:20px 0}.scene-actions{gap:8px}.game-scene .scene-primary{min-width:160px}.match-contenders{grid-template-columns:minmax(0,1fr) 80px minmax(0,1fr);gap:8px}.match-count{font-size:68px;letter-spacing:-5px;padding-right:5px}.match-player-avatar{width:64px;height:64px;border-radius:18px}.match-player-avatar .avatar{border-radius:12px}.match-player-name{font-size:18px}.match-beat-dots i{width:15px}}@media (max-height: 600px) and (min-width: 601px){.game-scene{padding:18px 32px 12px}.scene-main{grid-template-columns:1.2fr 1fr;gap:28px;padding:20px 0}.scene-copy{order:0}.scene-art{width:min(33vw,300px)}.scene-title{font-size:68px;margin-bottom:16px}.scene-eyebrow{margin-bottom:12px}.scene-description{font-size:13px;margin-bottom:18px}.result-heading{font-size:clamp(32px,calc(138cqi / var(--title-length, 7)),80px)}.scene-footer{padding-top:12px}.game-scene .scene-button{padding:12px 18px}.match-stage{padding:16px 0}.match-contenders{grid-template-columns:minmax(0,1fr) 140px minmax(0,1fr);margin:0}.match-count{font-size:80px}.match-player-avatar{width:60px;height:60px;margin-bottom:12px;border-radius:18px}.match-player-avatar .avatar{border-radius:12px}.match-player-name{font-size:24px}}@media (prefers-reduced-motion: reduce){.game-scene,.game-scene *,.game-scene *:before,.game-scene *:after{animation:none!important;transition:none!important}.art-victory .art-runner{transform:translate(280px,-280px)}.art-defeat .art-runner{transform:translate(140px,-154px)}}.brand-mark{width:1.15em;height:1.15em;border-radius:22%;vertical-align:-.2em;margin-right:.35em;box-shadow:0 2px 10px #ffb80040}.welcome-brand-mark{width:1em;height:1em}.lesson-overlay{padding:16px;overflow-y:auto}.lesson-dialog{--lesson-green: #059669;width:100%;max-width:480px;max-height:calc(100dvh - 32px);overflow-y:auto;padding:20px 28px 26px;border-radius:24px;color:var(--text);box-shadow:var(--shadow-card)}html.dark .lesson-dialog{--lesson-green: #34d399}.lesson-header,.lesson-footer,.lesson-playback{display:flex;align-items:center;justify-content:space-between;gap:12px}.lesson-header{font-size:13px;font-weight:700;color:var(--muted)}.lesson-count{margin-left:8px;color:var(--primary);font-variant-numeric:tabular-nums}.lesson-icon-button{border:0;background:transparent;color:var(--muted);font-size:26px;width:36px;height:36px;cursor:pointer}.lesson-stage{margin-top:8px;border:1px solid var(--border);border-radius:18px;background:radial-gradient(ellipse at top,var(--primary-glow),transparent 75%)}.lesson-board{display:block;width:100%;max-height:300px}.lesson-board-frame{fill:var(--bg);stroke:var(--border)}.lesson-cell{fill:var(--cell-a);stroke:var(--border)}.lesson-goal-row{fill:var(--lesson-green);opacity:.12}.lesson-goal-line{stroke:var(--lesson-green);stroke-width:4;stroke-linecap:round}.lesson-label{fill:var(--muted);font-size:11px;font-weight:700;font-family:inherit}.lesson-pawn{fill:var(--pawn-b);stroke:var(--bg);stroke-width:3;filter:drop-shadow(0 3px 4px var(--pawn-b-glow))}.lesson-pawn.opponent{fill:var(--pawn-a);filter:drop-shadow(0 3px 4px var(--pawn-a-glow))}.lesson-route{fill:none;stroke:var(--lesson-green);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:5 7;animation:lesson-route-flow 1.5s linear infinite}.lesson-valid{fill:var(--primary);opacity:.45}.lesson-arrow{fill:none;stroke:var(--primary);stroke-width:2}.lesson-wall{fill:var(--accent);stroke:var(--accent-hover);stroke-width:1}.lesson-wall-target{fill:none;stroke:var(--accent);stroke-dasharray:4}.lesson-drag-wall,.lesson-hand{animation:lesson-drag 4.5s ease-in-out infinite}.lesson-hand{fill:var(--text);stroke:var(--bg);stroke-width:1.5}.lesson-detour{animation:lesson-route-flow 1.5s linear infinite,lesson-reveal 4.5s ease-in-out infinite}.lesson-invalid-wall{fill:var(--pawn-a);stroke:var(--pawn-a);stroke-dasharray:4;fill-opacity:.2;animation:lesson-invalid 4s ease-in-out infinite}.lesson-invalid-mark circle{fill:var(--bg);stroke:var(--pawn-a);stroke-width:2}.lesson-invalid-mark path{fill:none;stroke:var(--pawn-a);stroke-width:2}.lesson-tap{fill:none;stroke:var(--primary);stroke-width:2;animation:lesson-tap 4s ease-in-out infinite}.lesson-scene-0 .lesson-pawn-motion{animation:lesson-race 6s ease-in-out infinite}.lesson-scene-1 .lesson-pawn-motion{animation:lesson-move 4s ease-in-out infinite}.lesson-scene-4 .lesson-pawn-motion{animation:lesson-finish 4s ease-in-out infinite}.lesson-celebration{opacity:0;animation:lesson-reveal 4s ease-in-out infinite}.lesson-playback{justify-content:center;padding:10px 0}.lesson-playback button{background:transparent;border:0;color:var(--muted);padding:6px 10px;cursor:pointer;font:inherit;font-size:12px}.lesson-copy{text-align:center;min-height:116px}.lesson-copy h2{font-size:25px;margin:6px 0 10px}.lesson-copy p{color:var(--muted);font-size:14px;line-height:1.65}.lesson-steps{display:flex;justify-content:center;margin:6px 0 16px}.lesson-steps button{display:grid;place-items:center;background:transparent;border:0;width:32px;height:32px;cursor:pointer}.lesson-steps span{width:8px;height:8px;background:var(--muted);opacity:.35;border-radius:8px;transition:width .2s}.lesson-steps [aria-current] span{width:24px;background:var(--primary);opacity:1}.lesson-footer button{flex:1}.lesson-footer button:disabled{opacity:.4;cursor:default}.lesson-dialog button:focus-visible{outline:2px solid var(--primary);outline-offset:3px}.lesson-stage.is-paused *{animation-play-state:paused}@keyframes lesson-route-flow{to{stroke-dashoffset:-24}}@keyframes lesson-race{0%,12%{transform:translateY(0)}25%,30%{transform:translateY(-44px)}43%,48%{transform:translateY(-88px)}61%,66%{transform:translateY(-132px)}79%,96%{transform:translateY(-176px)}to{transform:translateY(0)}}@keyframes lesson-move{0%,25%{transform:translateY(0)}45%,90%{transform:translateY(-44px)}to{transform:translateY(0)}}@keyframes lesson-drag{0%,15%{transform:translateY(122px);opacity:.5}45%,90%{transform:translateY(0);opacity:1}to{transform:translateY(122px);opacity:.5}}@keyframes lesson-reveal{0%,40%{opacity:0}55%,90%{opacity:1}to{opacity:0}}@keyframes lesson-invalid{0%,to{opacity:.2}40%,75%{opacity:1}}@keyframes lesson-tap{0%,10%,55%,to{opacity:0}25%,40%{opacity:.7}}@keyframes lesson-finish{0%,20%{transform:translateY(0)}45%,95%{transform:translateY(-44px)}to{transform:translateY(0)}}@media (max-width: 480px),(max-height: 740px){.lesson-dialog{padding:14px 20px 20px}.lesson-board{max-height:240px}.lesson-copy{min-height:108px}.lesson-copy h2{font-size:22px}.lesson-steps{margin-bottom:8px}}