:root{--green: #4CAF50;--green-light: #81C784;--green-dark: #2E7D32;--green-grass: #66BB6A;--blue: #2196F3;--blue-light: #64B5F6;--blue-dark: #1565C0;--blue-sky: #42A5F5;--brown: #795548;--brown-light: #A1887F;--brown-dark: #4E342E;--brown-warm: #8D6E63;--red: #EF5350;--red-light: #EF9A9A;--red-dark: #C62828;--yellow: #FFD54F;--yellow-light: #FFF9C4;--orange: #FF9800;--teal: #26A69A;--cream: #FFF8E1;--bg-accent: #2E7D32;--bg-primary: #F1F8E9;--bg-gradient: linear-gradient(135deg, #E8F5E9 0%, #E3F2FD 35%, #FFF8E1 65%, #E0F2F1 100%);--bg-card: rgba(255, 255, 255, .88);--board-bg: rgba(255, 255, 255, .55);--board-active: rgba(255, 213, 79, .28);--board-active-border: var(--yellow);--board-won-x: rgba(239, 83, 80, .15);--board-won-o: rgba(33, 150, 243, .15);--board-draw: rgba(180, 180, 180, .18);--cell-hover: rgba(102, 187, 106, .18);--cell-border: rgba(121, 85, 72, .15);--x-color: #EF5350;--x-bg: rgba(239, 83, 80, .08);--o-color: #2196F3;--o-bg: rgba(33, 150, 243, .08);--text-primary: #3E2723;--text-secondary: #6D4C41;--text-light: #A1887F;--shadow-soft: 0 4px 20px rgba(76, 175, 80, .08);--shadow-medium: 0 8px 32px rgba(76, 175, 80, .12);--shadow-glow-x: 0 0 20px rgba(239, 83, 80, .3);--shadow-glow-o: 0 0 20px rgba(33, 150, 243, .3);--border-radius: 16px;--border-radius-sm: 10px;--border-radius-xs: 6px;--ease-bounce: cubic-bezier(.34, 1.56, .64, 1);--ease-smooth: cubic-bezier(.4, 0, .2, 1)}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;font-family:Fredoka,sans-serif;background:var(--bg-gradient);color:var(--text-primary);-webkit-font-smoothing:antialiased}#app{width:100%;height:100%;position:relative}.screen{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .5s var(--ease-smooth);overflow-y:auto;padding:20px}.screen.active{opacity:1;pointer-events:all}.exit-btn{position:absolute;top:20px;left:20px;width:44px;height:44px;border-radius:50%;border:none;background:#ffffffd9;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:100;box-shadow:var(--shadow-soft);transition:all .3s var(--ease-bounce);border:1px solid rgba(0,0,0,.05)}.exit-btn:hover{transform:scale(1.1);background:#fff;box-shadow:var(--shadow-medium)}.exit-btn:active{transform:scale(.95)}.exit-svg{width:24px;height:24px;color:var(--text-primary);display:block}.exit-btn:hover .exit-svg{color:var(--red)}.loading-content{text-align:center;padding:40px}.loading-stars{display:flex;gap:16px;justify-content:center;margin-bottom:24px}.bounce-star{font-size:36px;display:inline-block;animation:bounce-star 1.2s var(--ease-bounce) infinite;animation-delay:var(--delay);font-weight:800}.bounce-star.sym-x{color:var(--x-color);text-shadow:0 2px 10px rgba(239,83,80,.3)}.bounce-star.sym-o{color:var(--o-color);text-shadow:0 2px 10px rgba(33,150,243,.3)}@keyframes bounce-star{0%,to{transform:translateY(0) scale(1)}50%{transform:translateY(-20px) scale(1.2)}}.loading-title{font-size:36px;font-weight:700;background:linear-gradient(135deg,var(--green),var(--blue),var(--brown));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:8px}.loading-sub{color:var(--text-secondary);font-size:16px;font-weight:500;margin-bottom:24px}.loading-bar-track{width:200px;height:8px;border-radius:99px;background:#4caf501f;margin:0 auto;overflow:hidden}.loading-bar-fill{width:30%;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--green),var(--blue),var(--teal));animation:loading-fill 2s ease-in-out infinite}@keyframes loading-fill{0%{width:10%;transform:translate(-10%)}50%{width:60%}to{width:10%;transform:translate(800%)}}.home-content{text-align:center;padding:clamp(20px,5vh,40px);max-width:min(90vw,800px);width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center}.home-stars{display:flex;gap:24px;justify-content:center;margin-bottom:20px}.home-float{font-size:clamp(40px,8vw,72px);display:inline-block;animation:home-float 3s ease-in-out infinite;animation-delay:var(--hd);font-weight:800}.home-float.sym-x{color:var(--x-color);text-shadow:0 4px 16px rgba(239,83,80,.25)}.home-float.sym-o{color:var(--o-color);text-shadow:0 4px 16px rgba(33,150,243,.25)}@keyframes home-float{0%,to{transform:translateY(0) rotate(0)}25%{transform:translateY(-12px) rotate(5deg)}75%{transform:translateY(6px) rotate(-3deg)}}.home-title{font-size:clamp(32px,6vw,64px);font-weight:800;background:linear-gradient(135deg,var(--green-dark),var(--blue),var(--brown));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:clamp(4px,1vh,12px);line-height:1.1}.home-subtitle{color:var(--text-secondary);font-size:clamp(14px,2vw,20px);font-weight:500;margin-bottom:clamp(20px,4vh,40px)}.active-match-notice{background:#fff;padding:24px;border-radius:24px;margin-bottom:32px;box-shadow:var(--shadow-medium);border:2px solid var(--green-light);width:100%;max-width:440px;animation:modal-enter .5s var(--ease-bounce)}.active-match-notice.hidden{display:none!important}.notice-badge{display:inline-block;background:var(--red);color:#fff;padding:4px 12px;border-radius:99px;font-size:11px;font-weight:800;letter-spacing:1px;margin-bottom:12px;animation:pulse-red 2s infinite}@keyframes pulse-red{0%{box-shadow:0 0 #ef535066}70%{box-shadow:0 0 0 10px #ef535000}to{box-shadow:0 0 #ef535000}}.notice-text{font-size:15px;color:var(--text-secondary);font-weight:600;margin-bottom:16px}.match-players{color:var(--text-primary);font-weight:800}.btn-spectate{background:var(--blue-sky);color:#fff;border:none;padding:12px 24px;border-radius:16px;font-weight:800;font-family:inherit;cursor:pointer;transition:all .3s var(--ease-bounce);width:100%;display:flex;align-items:center;justify-content:center;gap:8px;font-size:16px}.btn-spectate:hover{background:var(--blue-dark);transform:translateY(-3px);box-shadow:0 8px 20px #2196f34d}.btn-spectate:active{transform:translateY(-1px)}.symbol-selector-wrap{margin-bottom:clamp(24px,4vh,40px);display:flex;justify-content:center}.symbol-selector{display:flex;background:#0000000a;padding:6px;border-radius:99px;position:relative;width:240px;-webkit-user-select:none;user-select:none}.symbol-selector input{display:none}.pick-btn{flex:1;padding:10px 0;cursor:pointer;z-index:2;display:flex;flex-direction:column;align-items:center;gap:2px;transition:color .3s ease;color:var(--text-light)}.pick-label{font-size:10px;font-weight:700;letter-spacing:1px}.pick-sym{font-size:24px;font-weight:800;line-height:1}.selector-slider{position:absolute;top:6px;left:6px;bottom:6px;width:calc(50% - 6px);background:#fff;border-radius:99px;box-shadow:0 4px 12px #0000001a;transition:transform .4s var(--ease-bounce);z-index:1}#pick-x:checked~.selector-slider{transform:translate(0)}#pick-o:checked~.selector-slider{transform:translate(100%)}#pick-x:checked~.pick-x{color:var(--red)}#pick-o:checked~.pick-o{color:var(--blue)}.mode-cards{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}.mode-card{flex:1;min-width:clamp(160px,40vw,260px);max-width:320px;padding:clamp(24px,4vh,48px) clamp(16px,2vw,32px);border:4px solid transparent;border-radius:var(--border-radius);background:var(--bg-card);box-shadow:var(--shadow-medium);cursor:pointer;transition:all .3s var(--ease-bounce);display:flex;flex-direction:column;align-items:center;gap:clamp(8px,2vh,20px);font-family:Fredoka,sans-serif;position:relative;overflow:hidden}.mode-card:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--border-radius);opacity:0;transition:opacity .3s ease;z-index:0}.mode-friend:before{background:linear-gradient(135deg,#4caf500f,#2196f30f)}.mode-bot:before{background:linear-gradient(135deg,#7955480f,#ff98000f)}.mode-card:hover:before{opacity:1}.mode-card:hover{transform:translateY(-6px) scale(1.03);box-shadow:0 12px 40px #4caf502e}.mode-friend:hover{border-color:var(--green)}.mode-bot:hover{border-color:var(--brown)}.mode-card:active{transform:translateY(-2px) scale(.98)}.mode-icon{font-size:clamp(40px,6vw,64px);position:relative;z-index:1;animation:mode-icon-idle 3s ease-in-out infinite}.mode-card:hover .mode-icon{animation:mode-icon-hover .5s var(--ease-bounce)}@keyframes mode-icon-idle{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes mode-icon-hover{0%{transform:scale(1)}50%{transform:scale(1.25) rotate(5deg)}to{transform:scale(1.1)}}.mode-label{font-size:clamp(16px,2.5vw,24px);font-weight:700;color:var(--text-primary);position:relative;z-index:1;white-space:nowrap}.mode-desc{font-size:clamp(11px,1.2vw,14px);font-weight:500;color:var(--text-secondary);line-height:1.4;position:relative;z-index:1}.home-footer{margin-top:24px}.home-hint{font-size:13px;font-weight:500;color:var(--text-light)}.waiting-content{text-align:center;padding:40px;background:var(--bg-card);border-radius:var(--border-radius);box-shadow:var(--shadow-medium);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:2px solid rgba(255,255,255,.5);max-width:360px}.waiting-icon{font-size:64px;animation:wiggle 2s ease-in-out infinite;margin-bottom:16px}@keyframes wiggle{0%,to{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}.waiting-content h2{font-size:24px;font-weight:700;color:var(--text-primary);margin-bottom:8px}.waiting-content p{color:var(--text-secondary);font-size:14px;font-weight:500}.waiting-dots{display:flex;gap:8px;justify-content:center;margin-top:20px}.dot{width:12px;height:12px;border-radius:50%;background:var(--green-light);animation:dot-pulse 1.4s ease-in-out infinite;animation-delay:calc(var(--d) * .2s)}@keyframes dot-pulse{0%,80%,to{transform:scale(.6);opacity:.4}40%{transform:scale(1);opacity:1}}.player-info-waiting{margin-top:20px;padding:12px 20px;background:#4caf5014;border-radius:var(--border-radius-sm);font-size:14px;font-weight:600;color:var(--green-dark)}.game-header{display:flex;align-items:center;justify-content:space-between;padding:clamp(6px,1.5vh,12px) clamp(10px,2vw,20px);gap:10px;width:100%;max-width:1000px;margin:0 auto;flex-shrink:0}.player-badge{display:flex;align-items:center;gap:clamp(4px,1vw,12px);padding:clamp(6px,1vh,10px) clamp(8px,1.5vw,18px);border-radius:var(--border-radius-sm);background:var(--bg-card);box-shadow:var(--shadow-soft);border:3px solid transparent;transition:all .3s var(--ease-bounce);min-width:0;flex:1;max-width:200px}.player-avatar{font-size:28px;font-weight:800;display:flex;align-items:center;justify-content:center}.player-badge.active-turn{transform:scale(1.08)}.player-1-badge.active-turn{border-color:var(--x-color);box-shadow:var(--shadow-glow-x)}.player-2-badge.active-turn{border-color:var(--o-color);box-shadow:var(--shadow-glow-o)}.player-avatar.avatar-x{color:var(--x-color);-webkit-text-stroke:1.2px var(--red-dark)}.player-avatar.avatar-o{color:var(--o-color);-webkit-text-stroke:1.2px var(--blue-dark)}.player-name{font-size:16px;font-weight:700;max-width:150px}.turn-indicator{display:flex;align-items:center;gap:8px;padding:8px 20px;border-radius:99px;background:var(--bg-card);box-shadow:var(--shadow-soft);animation:pulse-glow 2s ease-in-out infinite;flex-shrink:0}.turn-symbol{font-size:24px;font-weight:800}.turn-symbol.sym-x{color:var(--x-color);-webkit-text-stroke:1.2px var(--red-dark)}.turn-symbol.sym-o{color:var(--o-color);-webkit-text-stroke:1.2px var(--blue-dark)}.turn-text{font-size:15px;font-weight:700}@keyframes pulse-glow{0%,to{box-shadow:var(--shadow-soft)}50%{box-shadow:0 4px 30px #4caf504d}}.game-container{display:flex;align-items:center;justify-content:center;flex:1;padding:10px;min-height:0;width:100%;position:relative}#game-screen{flex-direction:column;overflow:hidden}.mega-board{--board-size: min(94vw, calc(100vh - 180px) , 800px);display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:calc(var(--board-size) * .02);width:var(--board-size);height:var(--board-size);padding:calc(var(--board-size) * .02);background:#ffffff40;border-radius:var(--border-radius);box-shadow:0 10px 40px #4caf5026;border:4px solid rgba(139,195,74,.4);position:relative;transition:transform .6s var(--ease-bounce);background-image:linear-gradient(rgba(0,0,0,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.05) 1px,transparent 1px);background-size:33.33% 33.33%;--turn-glow: rgba(255, 213, 79, .3)}.mega-board.turn-x{--turn-glow: rgba(239, 83, 80, .45)}.mega-board.turn-o{--turn-glow: rgba(33, 150, 243, .45)}.mini-board{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:calc(var(--board-size) * .006);padding:calc(var(--board-size) * .008);border-radius:var(--border-radius-sm);background:#ffffffa6;border:2px solid rgba(0,0,0,.05);transition:all .5s var(--ease-bounce);position:relative;overflow:visible}.mini-board.active{background:var(--turn-glow);border-color:var(--turn-glow);box-shadow:0 0 15px var(--turn-glow);z-index:5;transition:all .5s var(--ease-bounce)}.mega-board.local-x.turn-x .mini-board.active,.mega-board.local-o.turn-o .mini-board.active{background:var(--board-active);border-color:var(--board-active-border);box-shadow:0 0 15px #ffd54f33,0 0 25px var(--turn-glow)}.mega-board.has-target.local-x.turn-x .mini-board.active,.mega-board.has-target.local-o.turn-o .mini-board.active{transform:scale(1.18);z-index:20;box-shadow:0 0 35px #ffd54f80,0 0 70px var(--turn-glow)}.mega-board.has-target .mini-board:not(.active){transform:scale(.92);opacity:.7;filter:none;pointer-events:none}.mini-board.won-x{background:var(--board-won-x);border-color:var(--x-color);opacity:1!important;filter:none!important}.mini-board.won-o{background:var(--board-won-o);border-color:var(--o-color);opacity:1!important;filter:none!important}.mini-board.draw{background:var(--board-draw);border-color:#b4b4b466}.mini-board .board-winner-overlay{position:absolute;top:-1px;right:-1px;bottom:-1px;left:-1px;display:flex;align-items:center;justify-content:center;border-radius:var(--border-radius-sm);z-index:25;animation:takeover-burst .7s var(--ease-bounce);pointer-events:none;font-weight:900;font-size:calc(var(--board-size) / 5.2);letter-spacing:-2px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.mini-board.won-x .board-winner-overlay{background:#ef535040;color:#fff;-webkit-text-stroke:3px var(--x-color);text-shadow:0 0 20px var(--red-dark),0 0 40px rgba(239,83,80,.4)}.mini-board.won-o .board-winner-overlay{background:#2196f340;color:#fff;-webkit-text-stroke:3px var(--o-color);text-shadow:0 0 20px var(--blue-dark),0 0 40px rgba(33,150,243,.4)}.mini-board.draw .board-winner-overlay{background:#b4b4b459;font-size:clamp(20px,5vw,32px);color:#fff;text-shadow:0 0 10px rgba(0,0,0,.2)}@keyframes takeover-burst{0%{transform:scale(0) rotate(-20deg);opacity:0}40%{transform:scale(1.35) rotate(8deg);opacity:1}60%{transform:scale(.9) rotate(-3deg)}80%{transform:scale(1.1) rotate(1deg)}to{transform:scale(1) rotate(0);opacity:1}}.mini-board .board-winner-overlay:after{content:"";position:absolute;width:80%;height:80%;border-radius:50%;border:3px solid currentColor;opacity:0;animation:takeover-ring .8s ease-out .15s forwards}@keyframes takeover-ring{0%{transform:scale(.5);opacity:.6}to{transform:scale(1.8);opacity:0}}.cell{display:flex;align-items:center;justify-content:center;border-radius:var(--border-radius-xs);background:#fffc;border:1px solid rgba(0,0,0,.03);cursor:default;transition:all .2s var(--ease-smooth);font-size:calc(var(--board-size) / 15);font-weight:800;-webkit-user-select:none;user-select:none;position:relative;aspect-ratio:1;line-height:1}.cell.playable{cursor:pointer}.cell.playable:hover{background:var(--cell-hover);transform:scale(1.1)}.cell.playable:active{transform:scale(.92)}.cell.played{animation:cell-place .35s var(--ease-bounce)}@keyframes cell-place{0%{transform:scale(0) rotate(-45deg)}60%{transform:scale(1.3) rotate(10deg)}to{transform:scale(1) rotate(0)}}.cell.player-x{color:#fff;-webkit-text-stroke:2px var(--x-color);text-shadow:0 2px 10px rgba(239,83,80,.5)}.cell.player-o{color:#fff;-webkit-text-stroke:2px var(--o-color);text-shadow:0 2px 10px rgba(33,150,243,.5)}.cell.last-move{outline:2px solid var(--yellow);outline-offset:-2px;background:#ffd54f26}.move-counter{text-align:center;padding:8px;font-size:12px;font-weight:600;color:var(--text-light)}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;z-index:10000;opacity:1;visibility:hidden;pointer-events:none;transition:visibility 0s 1.2s,opacity .5s ease .7s}.overlay:not(.hidden){visibility:visible;pointer-events:all;opacity:1;transition:visibility 0s 0s,opacity 0s 0s}.hidden{visibility:hidden!important;opacity:0!important}.go-curtains{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;z-index:1;pointer-events:none;width:100%;height:100%}.curtain-l,.curtain-r{flex:1;height:100%;background:var(--bg-primary);transition:transform 1s cubic-bezier(.7,0,.3,1),border-color .4s ease 1s,box-shadow .4s ease 1s;box-shadow:0 0 60px #00000026;pointer-events:none;z-index:1}.curtain-l{transform:translate(-101%);border-right:4px solid var(--green-dark)}.curtain-r{transform:translate(101%);border-left:4px solid var(--green-dark)}.overlay:not(.hidden) .curtain-l,.overlay:not(.hidden) .curtain-r{transform:translate(0);border-color:transparent;box-shadow:none}.go-vignette{position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(circle,transparent 20%,rgba(0,0,0,.4) 100%);z-index:2;opacity:0;transition:opacity 1.5s ease .5s}.overlay:not(.hidden) .go-vignette{opacity:1}.go-content{position:relative;z-index:10;display:flex;flex-direction:column;align-items:center;text-align:center;width:90%;max-width:600px;opacity:0;transform:translateY(40px);transition:opacity .2s ease 0s,transform 0s .2s}.overlay:not(.hidden) .go-content{opacity:1;transform:translateY(0);transition:opacity .8s ease 1.1s,transform .8s var(--ease-bounce) 1.1s}.go-banner-wrap{position:relative;margin-bottom:30px;width:100%}.go-winner-symbol-large{font-size:clamp(120px,25vh,220px);font-weight:900;line-height:1;margin-bottom:-40px;filter:drop-shadow(0 10px 30px rgba(0,0,0,.2));opacity:0;transform:scale(.5) rotate(-15deg);transition:all 1.2s var(--ease-bounce) 1s}.overlay:not(.hidden) .go-winner-symbol-large{opacity:1;transform:scale(1) rotate(0)}.go-banner{background:#fff;padding:15px 60px;border-radius:99px;box-shadow:0 15px 40px #00000026;position:relative;overflow:hidden;border:4px solid var(--green-dark);transform:scaleX(0);transition:transform .8s var(--ease-bounce) 1.2s}.overlay:not(.hidden) .go-banner{transform:scaleX(1)}.go-result-text{font-size:clamp(24px,5vh,48px);font-weight:800;letter-spacing:4px;color:var(--text-primary);position:relative;z-index:2}.go-banner-accent{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),transparent);width:50%;transform:skew(-20deg) translate(-150%);animation:banner-shine 3s infinite 2s}@keyframes banner-shine{0%{transform:skew(-20deg) translate(-200%)}30%,to{transform:skew(-20deg) translate(400%)}}.go-subtext{font-size:clamp(16px,2.5vh,24px);font-weight:600;color:var(--text-secondary);margin-bottom:40px;max-width:400px;opacity:0;transition:opacity 1s ease 1.8s;text-shadow:2px 0 0 var(--bg-primary),-2px 0 0 var(--bg-primary),0 2px 0 var(--bg-primary),0 -2px 0 var(--bg-primary),1px 1px 0 var(--bg-primary),-1px -1px 0 var(--bg-primary)}.overlay:not(.hidden) .go-subtext{opacity:1}.go-stats-row{display:flex;gap:30px;margin-bottom:50px;opacity:0;transform:translateY(20px);transition:all .8s ease 2s}.overlay:not(.hidden) .go-stats-row{opacity:1;transform:translateY(0)}.go-stat{display:flex;flex-direction:column;align-items:center;min-width:100px}.go-stat-val{font-size:36px;font-weight:800;color:var(--green-dark);line-height:1}.go-stat-lbl{font-size:14px;font-weight:700;color:var(--text-light);text-transform:uppercase;letter-spacing:1px}.go-btn-rematch{border:none;background:transparent;padding:0;cursor:pointer;position:relative;outline:none;opacity:0;transform:scale(.9);transition:all .6s var(--ease-bounce) 2.4s}.overlay:not(.hidden) .go-btn-rematch{opacity:1;transform:scale(1)}.btn-inner{background:linear-gradient(135deg,var(--green-dark),var(--green));padding:20px 50px;border-radius:99px;display:flex;align-items:center;gap:15px;position:relative;z-index:2;border:4px solid white;box-shadow:0 10px 30px #2e7d3266;transition:all .3s ease}.btn-label{color:#fff;font-size:20px;font-weight:800;letter-spacing:1px}.btn-icon{font-size:24px;transition:transform .6s var(--ease-bounce)}.go-btn-rematch:hover .btn-inner{transform:translateY(-5px) scale(1.05);box-shadow:0 15px 45px #2e7d3299}.go-btn-rematch:hover .btn-icon{transform:rotate(180deg)}.go-btn-rematch:active .btn-inner{transform:translateY(-2px) scale(.98)}.btn-go-exit{background:#fff6;border:2px solid rgba(161,136,127,.2);margin-top:24px;display:flex;align-items:center;gap:8px;cursor:pointer;color:var(--text-light);font-family:inherit;font-weight:700;font-size:16px;transition:all .3s var(--ease-smooth);opacity:0;transform:translateY(10px);padding:10px 24px;border-radius:99px;margin-left:auto;margin-right:auto;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.overlay:not(.hidden) .btn-go-exit{opacity:.8;transform:translateY(0);transition:all .6s ease 2.8s,opacity .6s ease 2.8s,border-color .3s ease}.btn-go-exit:hover{opacity:1;color:var(--green-dark);background:#fff;border-color:var(--green-light);box-shadow:0 4px 12px #4caf5026}.btn-go-exit .btn-label{text-transform:uppercase;letter-spacing:1.5px;font-size:14px;text-shadow:1px 1px 0 #000,-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,0 1px 0 #000,0 -1px 0 #000,1px 0 0 #000,-1px 0 0 #000}.btn-glow{position:absolute;top:-10px;right:-10px;bottom:-10px;left:-10px;background:var(--green);border-radius:99px;filter:blur(20px);opacity:.3;z-index:1;animation:btn-glow-pulse 2s infinite}@keyframes btn-glow-pulse{0%,to{transform:scale(1);opacity:.3}50%{transform:scale(1.1);opacity:.5}}.go-theme-win .curtain-l,.go-theme-win .curtain-r{background:#e8f5e9;border-color:var(--green)}.go-theme-win .go-winner-symbol-large{color:var(--green)}.go-theme-win .go-banner{border-color:var(--green)}.go-theme-win .go-result-text,.go-theme-win .go-stat-val{color:var(--green-dark)}.go-theme-win .btn-inner{background:linear-gradient(135deg,var(--green-dark),var(--green))}.go-theme-lose .curtain-l,.go-theme-lose .curtain-r{background:#efebe9;border-color:var(--brown)}.go-theme-lose .go-winner-symbol-large{color:var(--brown)}.go-theme-lose .go-banner{border-color:var(--brown)}.go-theme-lose .go-result-text,.go-theme-lose .go-stat-val{color:var(--brown-dark)}.go-theme-lose .btn-inner{background:linear-gradient(135deg,var(--brown-dark),var(--brown))}.go-theme-lose .btn-glow{background:var(--brown)}.go-theme-draw .curtain-l,.go-theme-draw .curtain-r{background:#e3f2fd;border-color:var(--blue)}.go-theme-draw .go-winner-symbol-large{color:var(--blue)}.go-theme-draw .go-banner{border-color:var(--blue)}.go-theme-draw .go-result-text,.go-theme-draw .go-stat-val{color:var(--blue-dark)}.go-theme-draw .btn-inner{background:linear-gradient(135deg,var(--blue-dark),var(--blue))}.go-theme-draw .btn-glow{background:var(--blue)}.confetti-container{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden;z-index:1001}.confetti-piece{position:absolute;width:8px;height:8px;border-radius:2px;top:-20px;animation:confetti-fall linear forwards}@keyframes confetti-fall{0%{transform:translateY(0) rotate(0) scale(0);opacity:0}10%{opacity:1;transform:translateY(20px) rotate(45deg) scale(1.2)}to{transform:translateY(110vh) rotate(720deg) scale(.5);opacity:0}}.bg-decorations{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:-1;overflow:hidden}.floating-shape{position:absolute;font-size:24px;opacity:.12;animation:float-around linear infinite}.shape-1{top:10%;left:5%;animation-duration:18s;font-size:28px}.shape-2{top:70%;left:90%;animation-duration:22s;animation-delay:-5s}.shape-3{top:30%;left:80%;animation-duration:25s;animation-delay:-8s}.shape-4{top:85%;left:15%;animation-duration:20s;animation-delay:-3s}.shape-5{top:15%;left:60%;animation-duration:23s;animation-delay:-12s}.shape-6{top:55%;left:40%;animation-duration:19s;animation-delay:-7s}@keyframes float-around{0%{transform:translate(0) rotate(0) scale(1)}25%{transform:translate(30px,-40px) rotate(90deg) scale(1.1)}50%{transform:translate(-20px,-80px) rotate(180deg) scale(.9)}75%{transform:translate(40px,-30px) rotate(270deg) scale(1.15)}to{transform:translate(0) rotate(360deg) scale(1)}}@media(max-width:650px){.player-name{font-size:13px;max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player-badge{padding:8px 10px;gap:8px}.player-avatar{font-size:20px}.turn-text{display:none}.turn-symbol{font-size:20px}.turn-indicator{padding:8px 12px}}@media(max-width:450px){.player-name{display:none}.player-badge{padding:8px;justify-content:center;flex:0 0 50px;border-radius:50%;aspect-ratio:1}.game-header{justify-content:space-around;gap:10px}}@media(max-height:600px){.mega-board{--board-size: min(90vw, calc(100vh - 120px) )}.game-header{padding:4px 10px}.move-counter{padding:2px;font-size:10px}}.spectator-notice{position:fixed;bottom:16px;left:50%;transform:translate(-50%);background:var(--bg-card);padding:8px 20px;border-radius:99px;font-size:13px;font-weight:600;color:var(--text-secondary);box-shadow:var(--shadow-soft);z-index:50;border:2px solid rgba(76,175,80,.25)}.shake{animation:shake .4s var(--ease-bounce)}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-6px) rotate(-1deg)}75%{transform:translate(6px) rotate(1deg)}}.conflict-card{background:#ffffffe6;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);padding:40px;border-radius:40px;width:min(92vw,520px);text-align:center;box-shadow:0 30px 80px #00000040,inset 0 0 0 2px #fffc,inset 0 0 40px #4caf500d;border:none;position:relative;overflow:hidden;animation:modal-enter .6s var(--ease-bounce)}.conflict-card:before{content:"";position:absolute;top:-100px;left:50%;transform:translate(-50%);width:300px;height:200px;background:radial-gradient(circle,var(--bg-accent) 0%,transparent 70%);opacity:.15;pointer-events:none}.conflict-header{position:relative;z-index:2}.conflict-header h2{font-size:clamp(28px,5vw,36px);font-weight:900;margin:15px 0 5px;color:var(--text-primary);letter-spacing:-.5px}.conflict-header p{color:var(--text-secondary);font-weight:600;font-size:16px}.conflict-icon{font-size:48px;filter:drop-shadow(0 8px 16px rgba(0,0,0,.1));animation:float-mini 3s ease-in-out infinite}@keyframes float-mini{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.conflict-players{display:flex;align-items:center;justify-content:space-between;margin:45px 0;padding:30px;background:linear-gradient(135deg,#4caf5008,#2196f308);border-radius:30px;border:1px solid rgba(0,0,0,.05);position:relative}.conf-player{flex:1;display:flex;flex-direction:column;align-items:center;gap:15px;animation:slide-in-fade .8s var(--ease-bounce)}.conf-avatar{width:80px;height:80px;border-radius:24px;background:#fff;border:4px solid white;box-shadow:0 12px 24px #0000001a;overflow:hidden;display:flex;align-items:center;justify-content:center;position:relative;z-index:1}.conf-avatar:after{content:"";position:absolute;top:-8px;right:-8px;bottom:-8px;left:-8px;border:2px solid var(--bg-accent);border-radius:28px;opacity:.3;animation:pulse-ring 2s infinite}@keyframes pulse-ring{0%{transform:scale(.9);opacity:.4}to{transform:scale(1.15);opacity:0}}.conf-name{font-weight:800;font-size:15px;color:var(--text-primary);max-width:100px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.conf-vs{background:#fff;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:14px;color:var(--text-light);box-shadow:0 4px 12px #0000001a;border:4px solid var(--bg-primary);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2}.conflict-actions{display:flex;flex-direction:column;gap:20px}.btn-conflict-roll{background:var(--bg-accent, var(--green));padding:30px;border-radius:30px;border:none;cursor:pointer;position:relative;transition:all .3s var(--ease-bounce);box-shadow:0 12px 0 var(--green-dark),0 20px 40px #4caf504d;display:flex;flex-direction:column;align-items:center;gap:18px;width:100%}.btn-conflict-roll span{color:#fff;font-weight:900;font-size:18px;letter-spacing:2px;text-shadow:0 2px 4px rgba(0,0,0,.2)}.btn-conflict-roll:hover{transform:translateY(-4px);box-shadow:0 16px 0 var(--green-dark),0 25px 50px #4caf5066}.btn-conflict-roll:active{transform:translateY(10px);box-shadow:0 2px 0 var(--green-dark),0 5px 15px #4caf5033}.btn-conflict-roll:disabled{filter:grayscale(.5);opacity:.8;pointer-events:none}.dice-box{width:50px;height:50px;perspective:1000px}.dice{width:100%;height:100%;position:relative;transform-style:preserve-3d;transition:transform 1.5s cubic-bezier(.1,.7,.1,1)}.dice-face{position:absolute;width:50px;height:50px;background:#fff;border:3px solid var(--green-dark);color:var(--green-dark);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:24px;border-radius:10px;box-shadow:inset 0 0 15px #0000000d}.dice-face.sym-x{color:var(--red);border-color:var(--red-dark)}.dice-face.sym-o{color:var(--blue);border-color:var(--blue-dark)}.face-1{transform:rotateY(0) translateZ(25px)}.face-2{transform:rotateX(180deg) translateZ(25px)}.face-3{transform:rotateY(90deg) translateZ(25px)}.face-4{transform:rotateY(-90deg) translateZ(25px)}.face-5{transform:rotateX(90deg) translateZ(25px)}.face-6{transform:rotateX(-90deg) translateZ(25px)}.dice.rolling{animation:dice-spin .6s linear infinite}.btn-conflict-yield{background:#0000000a;color:var(--text-secondary);border:2px dashed rgba(0,0,0,.1);padding:16px;border-radius:20px;font-weight:700;font-size:15px;cursor:pointer;transition:all .3s ease;width:100%}.btn-conflict-yield:hover{background:#ffc10714;border-color:#ffc1074d;color:var(--brown-dark);transform:scale(1.02)}.btn-conflict-yield span{font-weight:800;color:var(--text-primary)}@keyframes slide-in-fade{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes dice-spin{0%{transform:rotateX(0) rotateY(0) rotate(0)}to{transform:rotateX(360deg) rotateY(360deg) rotate(360deg)}}.btn-conflict-yield{background:none;border:2px dashed var(--text-light);color:var(--text-secondary);padding:16px;border-radius:20px;font-weight:700;cursor:pointer;transition:all .3s;width:100%}.btn-conflict-yield:hover{background:#00000008;border-color:var(--text-secondary);color:var(--text-primary)}@keyframes modal-enter{0%{opacity:0;transform:scale(.9) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}.rematch-card{background:#fff;padding:40px;border-radius:32px;width:min(95vw,420px);text-align:center;box-shadow:0 25px 50px -12px #00000040,var(--shadow-medium);border:1px solid rgba(255,255,255,.4);animation:modal-enter .5s var(--ease-bounce);position:relative;overflow:hidden}.rematch-icon{font-size:64px;margin-bottom:15px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.1));animation:emoji-float 3s ease-in-out infinite}@keyframes emoji-float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.rematch-card h2{font-size:32px;font-weight:800;color:var(--text-primary);margin-bottom:10px}#rematch-requester{font-size:17px;color:var(--text-secondary);font-weight:600;margin-bottom:32px;line-height:1.4}.rematch-card .game-over-buttons{display:flex;flex-direction:column;gap:14px;width:100%}.rematch-card .btn-rematch{background:linear-gradient(135deg,var(--green-dark),var(--green));color:#fff;border:none;box-shadow:0 8px 15px #2e7d324d}.rematch-card .btn-rematch:hover{transform:translateY(-2px);box-shadow:0 12px 20px #2e7d3266}.rematch-card .btn-secondary{background:#0000000a;color:var(--text-secondary);border:2px solid rgba(0,0,0,.05)}.rematch-card .btn-secondary:hover{background:#00000014;color:var(--text-primary)}.btn-large{padding:16px 24px;border-radius:20px;border:none;font-family:inherit;font-size:18px;font-weight:800;cursor:pointer;transition:all .3s var(--ease-bounce);display:flex;align-items:center;justify-content:center;gap:10px}