.statistics-container{min-height:100vh;background:linear-gradient(135deg,#2c5f2d,#1a3d1b);display:flex;align-items:center;justify-content:center;padding:20px}.statistics-card{background:linear-gradient(135deg,#1a202c,#2d3748);border:3px solid #4a5568;border-radius:20px;padding:40px;max-width:1400px;width:100%;box-shadow:0 20px 60px #00000080;animation:slideUp .6s ease}.stats-header{position:relative;text-align:center;margin-bottom:30px}.back-button-stats{position:absolute;left:0;top:50%;transform:translateY(-50%);color:#90cdf4;background:none;border:none;cursor:pointer;font-size:16px;font-weight:600;padding:8px 16px;border-radius:8px;transition:all .2s}.back-button-stats:hover{background:#90cdf41a;transform:translateY(-50%) translate(-3px)}.stats-title{color:#fff;font-size:42px;margin:0;text-shadow:2px 2px 8px rgba(0,0,0,.3)}.week-navigation{display:flex;align-items:center;justify-content:space-between;margin-bottom:25px;padding:20px;background:#0000004d;border-radius:12px;border:2px solid #4a5568}.week-nav-button{display:flex;align-items:center;gap:8px;padding:12px 24px;background:linear-gradient(135deg,#4299e1,#3182ce);color:#fff;border:none;border-radius:10px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px #4299e14d}.week-nav-button:hover:not(:disabled){transform:scale(1.05);box-shadow:0 6px 20px #4299e180}.week-nav-button:disabled{opacity:.4;cursor:not-allowed;transform:none}.nav-arrow{font-size:20px;font-weight:700}.nav-label{font-size:14px}.week-display{display:flex;align-items:center;gap:10px;padding:12px 30px;background:#48bb781a;border:2px solid #48bb78;border-radius:10px}.week-icon{font-size:24px}.week-text{color:#fff;font-size:18px;font-weight:600}.tabs-container{display:flex;gap:10px;margin-bottom:20px;padding:10px;background:#0000004d;border-radius:12px;border:2px solid #4a5568}.tab-button{flex:1;padding:14px 20px;background:#90cdf41a;border:2px solid transparent;border-radius:10px;color:#cbd5e0;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease}.tab-button:hover{background:#90cdf433;border-color:#90cdf4}.tab-button.active{background:linear-gradient(135deg,#4299e1,#3182ce);border-color:#4299e1;color:#fff;box-shadow:0 4px 12px #4299e166}.table-controls{display:flex;justify-content:flex-end;margin-bottom:15px}.expand-button{display:flex;align-items:center;gap:8px;padding:10px 20px;background:#90cdf41a;border:2px solid #90cdf4;border-radius:8px;color:#90cdf4;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s ease}.expand-button:hover{background:#90cdf433;transform:translate(-3px)}.expand-icon{font-size:18px;font-weight:700}.league-table-wrapper{overflow-x:auto;border-radius:12px;box-shadow:0 8px 32px #0000004d;margin-bottom:25px;transition:all .3s ease;max-height:500px;overflow-y:auto}.league-table{width:100%;border-collapse:collapse;background:#0006}.league-table thead{background:linear-gradient(135deg,#2d3748,#1a202c);border-bottom:3px solid #4a5568}.league-table th{padding:16px 12px;text-align:center;color:#90cdf4;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}.league-table td{padding:14px 12px;text-align:center;color:#e2e8f0;font-size:15px;border-bottom:1px solid rgba(74,85,104,.5)}.league-table tbody tr{transition:all .2s ease}.league-table tbody tr:hover{background:#90cdf41a;transform:scale(1.01)}.league-table th.col-rank{position:sticky;left:0;z-index:4;background:linear-gradient(135deg,#2d3748,#1a202c)}.league-table td.col-rank{position:sticky;left:0;z-index:3;background:#0009}.league-table-wrapper{max-height:500px;overflow-y:auto;overflow-x:auto}.league-table thead th{position:sticky;top:0;z-index:2;background:linear-gradient(135deg,#2d3748,#1a202c)}@media (max-width: 768px){.league-table-wrapper{max-height:400px}}.col-rank{width:80px;align-items:center;justify-content:center;gap:4px}.col-player{text-align:left!important;width:320px;align-items:center}.col-points{width:70px;background:#48bb781a}.col-stat{width:50px}.col-stat.expandable{opacity:0;max-width:0;padding:0;overflow:hidden;transition:all .3s ease}.league-table-wrapper.expanded .col-stat.expandable{opacity:1;max-width:50px;padding:14px 12px}.rank-number{font-weight:600;font-size:16px}.medal{font-size:20px;animation:shimmer 2s infinite}@keyframes shimmer{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.top-three{font-weight:600}.first-place{background:linear-gradient(90deg,rgba(255,215,0,.15) 0%,transparent 100%)}.second-place{background:linear-gradient(90deg,rgba(192,192,192,.15) 0%,transparent 100%)}.third-place{background:linear-gradient(90deg,rgba(205,127,50,.15) 0%,transparent 100%)}.country-flag{font-size:20px}.player-name{font-weight:600;color:#fff}.player-ranking{color:#90cdf4;font-size:14px;font-weight:600;margin-left:4px}.first-place .player-name{color:gold}.second-place .player-name{color:silver}.third-place .player-name{color:#cd7f32}.positive{color:#48bb78!important;font-weight:600}.negative{color:#f56565!important;font-weight:600}.winners-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;padding:20px}.winner-card{background:#0006;border-radius:16px;padding:24px;border:3px solid;transition:all .3s ease;animation:fadeIn .6s ease}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.winner-1{border-color:gold;background:linear-gradient(135deg,#ffd7001a,#0006)}.winner-2{border-color:silver;background:linear-gradient(135deg,#c0c0c01a,#0006)}.winner-3{border-color:#cd7f32;background:linear-gradient(135deg,#cd7f321a,#0006)}.winner-card:hover{transform:translateY(-5px);box-shadow:0 12px 40px #00000080}.winner-medal{font-size:48px;text-align:center;margin-bottom:16px;animation:bounce 2s infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.winner-info{text-align:center}.winner-name{display:flex;align-items:center;justify-content:center;gap:10px;font-size:22px;font-weight:700;color:#fff;margin-bottom:20px}.country-flag-large{font-size:28px}.winner-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px}.winner-stat{display:flex;flex-direction:column;gap:4px;padding:10px;background:#0000004d;border-radius:8px}.stat-label{color:#90cdf4;font-size:12px;font-weight:600;text-transform:uppercase}.stat-value{color:#fff;font-size:18px;font-weight:700}.loading-spinner{text-align:center;padding:60px 20px}.spinner{width:60px;height:60px;margin:0 auto 20px;border:4px solid rgba(144,205,244,.2);border-top:4px solid #90cdf4;border-radius:50%;animation:spin 1s linear infinite}.loading-spinner p{color:#90cdf4;font-size:16px}.error-message{text-align:center;padding:60px 20px}.error-icon{font-size:64px;display:block;margin-bottom:20px}.error-message p{color:#f56565;font-size:18px;margin:0 0 20px}.retry-button{padding:12px 30px;background:linear-gradient(135deg,#f56565,#c53030);color:#fff;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease}.retry-button:hover{transform:scale(1.05);box-shadow:0 6px 20px #f5656580}.no-data{text-align:center;padding:60px 20px}.no-data-icon{font-size:64px;display:block;margin-bottom:20px}.no-data p{color:#cbd5e0;font-size:18px;margin:10px 0}.no-data-hint{color:#90cdf4;font-size:14px}.stats-footer{padding:20px;background:#0000004d;border-radius:12px;border:2px solid #4a5568}.stats-legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:15px;margin-bottom:15px}.legend-item{display:flex;gap:8px;color:#cbd5e0;font-size:13px}.legend-label{color:#90cdf4;font-weight:600}.legend-desc{color:#a0aec0}.stats-note{text-align:center;padding-top:15px;border-top:1px solid #4a5568;color:#90cdf4;font-size:14px}@media (max-width: 1200px){.league-table-wrapper.expanded{overflow-x:scroll}}.cache-notice{display:flex;align-items:flex-start;gap:12px;padding:12px 16px;margin:16px 0;background:linear-gradient(135deg,#e3f2fd,#bbdefb);border:1px solid #90caf9;border-radius:8px;font-size:14px;color:#1565c0}.cache-icon{font-size:20px;flex-shrink:0;margin-top:2px}.cache-text{flex:1;line-height:1.5}.cache-text strong{color:#0d47a1;font-weight:600}.cache-text small{color:#1976d2;font-size:cclamp(10px,2vw,12px)}@media (max-width: 768px){*,*:before,*:after{box-sizing:border-box}body{overflow-x:hidden}.statistics-container{padding:8px}.statistics-card{padding:10px;max-width:100%;width:100%;overflow:hidden}.stats-header{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:20px}.back-button-stats{position:absolute;top:1px;left:5px;transform:none;padding:1px 10px;font-size:16px;white-space:nowrap;flex-shrink:0}.stats-title{font-size:26px;line-height:1.2;text-align:center;margin-left:25px}.cache-notice{gap:4px;padding:2px;margin:4px 0;font-size:11px}.cache-icon{font-size:12px;flex-shrink:0;margin-top:2px}.cache-text{flex:1;line-height:1.5}.week-navigation{flex-direction:row;gap:4px;padding:10px}.nav-arrow{font-size:14px;font-weight:700;margin:-3px;padding-bottom:5px}.week-nav-button{width:28%;justify-content:center;padding:12px 4px;font-size:10px}.week-display{padding:6px 4px;width:auto;height:45px;justify-content:center}.week-text{font-size:13px;margin-left:-6px}.week-icon{font-size:16px}.tabs-container{flex-direction:column;padding:6px;margin-bottom:10px}.tab-button{font-size:14px;padding:8px;width:100%}.expand-button{gap:4px;padding:8px;border-radius:8px;font-size:14px;font-weight:600;margin-bottom:-5px}.league-table-wrapper{max-width:100%;overflow-x:auto;overflow-y:auto}.league-table{min-width:600px}.league-table th,.league-table td{font-size:12px;padding:8px 6px}.col-rank{position:sticky;left:0;width:30px;align-items:center;justify-content:center;gap:2px}.league-table td.col-rank{background:#000000e6}.league-table th.col-player{position:sticky;left:42px;z-index:4;background:linear-gradient(135deg,#2d3748,#1a202c);width:125px}.league-table td.col-player{position:sticky;left:42px;z-index:3;background:#000c;width:125px}.col-player{text-align:left!important;min-width:unset;width:125px}.country-flag{font-size:12px}.player-name{font-size:13px}.player-ranking{font-size:10px}.rank-number{font-size:11px}.medal{font-size:12px}.winners-grid{grid-template-columns:1fr;padding:10px;gap:14px;max-width:100%}.winner-card{padding:16px}.winner-medal{font-size:34px;margin-bottom:10px}.winner-name{font-size:18px;margin-bottom:12px;flex-wrap:wrap;text-align:center}.country-flag-large{font-size:22px}.winner-stats{grid-template-columns:1fr 1fr;gap:10px}.stat-label{font-size:11px}.stat-value{font-size:15px}.stats-footer{padding:14px}.stats-legend{grid-template-columns:1fr}.legend-item{font-size:12px;flex-wrap:wrap}.stats-note{font-size:13px}}@media (max-width: 480px){.stats-title{font-size:22px}.back-button-stats{font-size:13px;padding:5px 8px}.winner-name{font-size:16px}.stat-value{font-size:14px}}.mode-selector-container{min-height:100vh;background:linear-gradient(135deg,#2c5f2d,#1a3d1b);display:flex;align-items:center;justify-content:center;padding:20px}.mode-selector-card{background:linear-gradient(135deg,#1a202c,#2d3748);border:3px solid #4a5568;border-radius:20px;padding:50px;max-width:1100px;width:100%;box-shadow:0 20px 60px #00000080;animation:slideUp .6s ease;position:relative}.mode-selector-title{text-align:center;color:#fff;font-size:48px;margin:0 0 10px;text-shadow:2px 2px 8px rgba(0,0,0,.3)}.mode-selector-subtitle{text-align:center;color:#90cdf4;font-size:24px;margin:0 0 40px;font-weight:400}.game-modes-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:25px;margin-bottom:30px}.game-mode-option{background:#0000004d;border:3px solid #4a5568;border-radius:16px;padding:30px 20px;text-align:center;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden;min-height:280px;display:flex;flex-direction:column;justify-content:space-between}.game-mode-option:hover:not(.disabled){transform:translateY(-8px);border-color:#90cdf4;box-shadow:0 12px 30px #90cdf44d;background:#90cdf41a}.game-mode-option.disabled{opacity:.5;cursor:not-allowed}.game-mode-option.selected{border-color:#48bb78;background:#48bb781a}.coming-soon-badge{position:absolute;top:15px;right:-35px;background:linear-gradient(135deg,#ed8936,#dd6b20);color:#fff;padding:5px 40px;font-size:12px;font-weight:700;transform:rotate(45deg);box-shadow:0 2px 8px #0000004d}.mode-icon{font-size:64px;margin-bottom:15px;animation:float 3s ease-in-out infinite}.game-mode-option:hover .mode-icon{animation:bounce .6s ease}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-15px)}}.mode-title{color:#fff;font-size:22px;margin:0 0 10px;font-weight:600}.mode-description{color:#cbd5e0;font-size:14px;margin:0 0 20px;line-height:1.5;flex-grow:1}.mode-action{margin-top:15px}.mode-select-button{background:linear-gradient(135deg,#4299e1,#3182ce);color:#fff;border:none;padding:12px 30px;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px #4299e14d}.mode-select-button:hover{transform:scale(1.05);box-shadow:0 6px 20px #4299e180}.mode-selector-footer{text-align:center;color:#a0aec0;font-size:14px;margin-top:20px;padding-top:20px;border-top:2px solid #4a5568}.nickname-section{max-width:500px;margin:40px auto 0;text-align:center}.nickname-section h2{color:#fff;font-size:28px;margin:0 0 10px}.nickname-description{color:#cbd5e0;font-size:15px;margin:0 0 30px}.nickname-input{width:100%;padding:16px 20px;font-size:18px;border:3px solid #4a5568;border-radius:12px;background:#0000004d;color:#fff;text-align:center;transition:all .3s ease;outline:none}.nickname-input:focus{border-color:#4299e1;box-shadow:0 0 20px #4299e166;background:#00000080}.nickname-input::placeholder{color:#718096}.nickname-info{text-align:right;margin-top:8px;margin-bottom:25px}.nickname-length{color:#a0aec0;font-size:13px}.start-online-button{width:100%;padding:16px;background:linear-gradient(135deg,#48bb78,#38a169);color:#fff;border:none;border-radius:12px;font-size:18px;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px #48bb784d}.start-online-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #48bb7880}.start-online-button:disabled{opacity:.5;cursor:not-allowed;transform:none}.footer-with-contact{display:flex;align-items:center;justify-content:center;flex-direction:column;flex-wrap:wrap}.footer-with-contact p1{margin:0 0 16px;font-size:14px}.footer-with-contact p{margin:0;font-size:14px}@media (max-width: 768px){.footer-with-contact{flex-direction:column}.footer-with-contact p1{margin:0 0 8px;font-size:11px}.footer-with-contact p{margin:0 0 6px;font-size:10px}}@media (max-width: 900px){.game-modes-grid{grid-template-columns:1fr}}@media (max-width: 768px){.game-mode-option{min-height:auto}.mode-selector-container{min-height:90vh;align-items:flex-start;justify-content:flex-start;padding:10px}.mode-selector-card{padding:12px 14px}.mode-selector-title{font-size:28px;margin-bottom:6px}.mode-selector-subtitle{font-size:16px;margin-bottom:14px}.game-modes-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:10px}.game-mode-option{min-height:auto;padding:12px 8px;border-radius:12px;display:flex;flex-direction:column;justify-content:space-between;gap:6px}.game-mode-option:hover{transform:none;box-shadow:none}.mode-icon{font-size:34px;margin-bottom:2px;animation:none}.mode-title{font-size:14px;margin:0;line-height:1.2}.mode-description{font-size:12px;line-height:1.25;margin:0}.mode-action{margin-top:4px}.mode-select-button{padding:6px 10px;font-size:12px;border-radius:6px}.coming-soon-badge{top:8px;right:-38px;font-size:10px;padding:3px 34px}.mode-selector-footer{font-size:12px;margin-top:10px;padding-top:10px}}.user-status-section{width:75%;display:flex;align-items:center;justify-content:space-between;padding:15px;margin-bottom:20px;background:linear-gradient(135deg,#48bb7826,#48bb780d);border:2px solid rgba(72,187,120,.3);border-radius:16px}.user-info{display:flex;align-items:center;gap:16px}.user-avatar{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#4299e1,#3182ce);display:flex;align-items:center;justify-content:center;font-size:28px;box-shadow:0 4px 12px #4299e14d}.user-details{display:flex;flex-direction:column;gap:6px}.user-name{color:#fff;font-size:20px;font-weight:700;display:flex;align-items:center;gap:8px}.user-stats{display:flex;gap:12px;align-items:center}.user-ranking{color:#90cdf4;font-size:14px;font-weight:600}.user-name.clickable{cursor:pointer;transition:all .2s ease}.user-name.clickable:hover{color:#90cdf4;transform:translate(3px)}.user-info.clickable-area{cursor:pointer;transition:all .3s ease;border-radius:12px;padding:4px;margin:-4px;position:relative}.user-info.clickable-area:hover{background:#90cdf426;transform:translate(5px)}.user-avatar{position:relative}.settings-indicator{position:absolute;bottom:-2px;left:-2px;font-size:14px;background:#000000b3;border-radius:50%;width:20px;height:20px;display:flex;align-items:center;justify-content:center;border:2px solid rgba(144,205,244,.6);transition:all .3s ease}.user-info.clickable-area:hover .settings-indicator{background:#4299e1e6;border-color:#90cdf4;transform:rotate(90deg) scale(1.1)}@media (max-width: 768px){.user-info.clickable-area{padding:2px;margin:-2px}.user-info.clickable-area:hover{transform:translate(3px)}.settings-indicator{font-size:12px;width:16px;height:16px;bottom:0;left:0}.user-info.clickable-area:hover .settings-indicator{transform:rotate(45deg) scale(1.05)}}.premium-badge{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;font-size:11px;font-weight:700;padding:4px 10px;border-radius:12px}.temp-badge{background:#90cdf433;color:#90cdf4;font-size:11px;font-weight:700;padding:4px 10px;border-radius:12px;border:1px solid rgba(144,205,244,.4)}.sign-out-button{padding:10px 20px;background:#f5656533;border:2px solid rgba(245,101,101,.4);border-radius:10px;color:#f56565;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s ease}.sign-out-button:hover{background:#f565654d;transform:scale(1.05)}.guest-status-section{width:75%;display:flex;align-items:center;justify-content:space-between;padding:24px 15px;margin-bottom:20px;gap:4px;background:#90cdf41a;border:2px solid rgba(144,205,244,.3);border-radius:16px}.guest-info{display:flex;align-items:center;gap:12px}.guest-icon{font-size:36px}.guest-text{color:#90cdf4;font-size:16px;font-weight:600}.sign-in-button{display:flex;align-items:center;gap:10px;padding:12px 24px;background:linear-gradient(135deg,#4299e1,#3182ce);border:none;border-radius:12px;color:#fff;font-size:15px;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px #4299e166}.sign-in-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #4299e199}.footer-hint{color:#90cdf4;font-size:14px;margin-bottom:10px;text-align:center}.auth-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:2000;padding:20px;animation:fadeIn .3s ease}.auth-modal-card{position:relative;background:linear-gradient(135deg,#1a202c,#2d3748);border:3px solid #4a5568;border-radius:24px;padding:40px;max-width:700px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px #000000b3;animation:slideUp .3s ease}.modal-close-button{position:absolute;top:20px;right:20px;width:36px;height:36px;border-radius:50%;background:#f5656533;border:2px solid rgba(245,101,101,.4);color:#f56565;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.modal-close-button:hover{background:#f565654d;transform:scale(1.1)}.auth-modal-title{color:#fff;font-size:28px;font-weight:800;margin-bottom:10px;text-align:center}.auth-modal-subtitle{color:#a0aec0;font-size:15px;margin-bottom:30px;text-align:center;line-height:1.5}.auth-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px}.auth-option-card{position:relative;padding:30px 20px;background:#0000004d;border:2px solid rgba(144,205,244,.3);border-radius:16px;cursor:pointer;transition:all .3s ease;text-align:center}.auth-option-card:hover{transform:translateY(-5px);border-color:#4299e1;box-shadow:0 12px 40px #4299e14d}.auth-option-card.highlighted{border-color:#48bb78;background:linear-gradient(135deg,#48bb781a,#0000004d)}.auth-option-card.highlighted:hover{border-color:#48bb78;box-shadow:0 12px 40px #48bb784d}.recommended-badge{position:absolute;top:-12px;left:50%;transform:translate(-50%);background:linear-gradient(135deg,#48bb78,#38a169);color:#fff;font-size:11px;font-weight:700;padding:4px 12px;border-radius:12px;box-shadow:0 4px 12px #48bb7866}.auth-option-icon{font-size:48px;margin-bottom:16px}.auth-option-title{color:#fff;font-size:20px;font-weight:700;margin-bottom:8px}.auth-option-description{color:#a0aec0;font-size:14px;margin-bottom:20px}.auth-option-features{list-style:none;padding:0;margin:0 0 20px;text-align:left}.auth-option-features li{color:#cbd5e0;font-size:14px;padding:6px 0 6px 24px;position:relative}.auth-option-features li:before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:16px;height:16px}.auth-option-button{width:100%;padding:12px 24px;border:none;border-radius:12px;font-size:15px;font-weight:600;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center}.guest-button{background:#90cdf433;border:2px solid rgba(144,205,244,.4);color:#90cdf4}.guest-button:hover{background:#90cdf44d;border-color:#90cdf4}.primary-button{background:#fff;color:#1a202c;box-shadow:0 4px 12px #0003}.primary-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #0000004d}.auth-back-button{margin-bottom:20px;padding:8px 16px;background:#90cdf41a;border:2px solid rgba(144,205,244,.3);border-radius:8px;color:#90cdf4;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s ease}.auth-back-button:hover{background:#90cdf433;transform:translate(-3px)}.auth-form{max-width:400px;margin:0 auto}.auth-label{display:block;color:#90cdf4;font-size:14px;font-weight:600;margin-bottom:8px;text-transform:uppercase;letter-spacing:.5px}.auth-input{width:100%;padding:14px 18px;background:#ffffff1a;border:2px solid rgba(144,205,244,.3);border-radius:12px;color:#fff;font-size:16px;outline:none;transition:all .3s ease;font-family:inherit;box-sizing:border-box;margin-bottom:8px}.auth-input:focus{border-color:#4299e1;background:#ffffff26}.auth-character-count{color:#90cdf4;font-size:12px;margin-bottom:20px;text-align:right}.auth-summary{background:#48bb781a;border:2px solid rgba(72,187,120,.3);border-radius:12px;padding:16px;margin:20px 0}.auth-summary-item{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid rgba(72,187,120,.2)}.auth-summary-item:last-child{border-bottom:none}.auth-summary-label{color:#90cdf4;font-size:14px;font-weight:600}.auth-summary-value{color:#fff;font-size:15px;font-weight:700;display:flex;align-items:center;gap:6px}.auth-notice{background:#90cdf41a;border:2px solid rgba(144,205,244,.3);border-radius:8px;padding:12px;color:#90cdf4;font-size:13px;text-align:center;margin-bottom:20px}.auth-continue-button{width:100%;padding:16px 24px;background:linear-gradient(135deg,#48bb78,#38a169);border:none;border-radius:12px;color:#fff;font-size:18px;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px #48bb7866}.auth-continue-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #48bb7899}.auth-continue-button:disabled{opacity:.5;cursor:not-allowed;transform:none}@media (max-width: 768px){.footer-hint{font-size:11px;margin-bottom:10px;margin-top:-4px;text-align:center}.modal-close-button{position:absolute;top:15px;right:15px;width:32px;height:32px;font-size:18px}.auth-back-button{position:absolute;top:15px;left:15px;padding:8px 16px;font-size:13px;font-weight:600}.auth-label{font-weight:600;margin-bottom:8px}.auth-input{width:100%;padding:12px;font-size:16px;margin-bottom:4px}.auth-character-count{font-size:10px;margin-bottom:4px;margin-left:4px}.auth-notice{padding:10px;font-size:12px;margin-bottom:10px}.user-info{width:75%;min-width:0}.user-avatar{width:32px;height:32px;font-size:18px;flex-shrink:0}.user-details{display:flex;flex-direction:column;gap:2px;min-width:0}.user-name{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-stats{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.user-ranking{font-size:10px}.premium-badge,.temp-badge{font-size:10px;padding:2px 8px;border-radius:10px}.sign-out-button{padding:6px;font-size:12px;border-radius:8px;flex-shrink:0;height:auto;width:auto}.guest-button{margin-top:auto}.guest-info{display:flex;align-items:center;gap:4px}.guest-icon{font-size:20px}.guest-text{font-size:14px}.sign-in-button{padding:2px 8px;font-size:12px;border-radius:10px;width:40%;height:auto;flex-shrink:0;justify-content:center}.auth-modal-card{padding:30px 20px}.auth-options{grid-template-columns:1fr}}.auth-form-unified{max-width:450px;margin:0 auto}.form-section{margin-bottom:25px}.form-section:last-of-type{margin-bottom:20px}.auth-error{background:#f5656526;border:2px solid rgba(245,101,101,.4);border-radius:10px;padding:14px;color:#f56565;font-size:14px;font-weight:600;margin-bottom:20px;text-align:center}.auth-notice.warning{background:#fbbf2426;border-color:#fbbf2466;color:#fbbf24}.auth-notice.success{background:#48bb7826;border-color:#48bb7866;color:#48bb78}.loading-spinner-small{display:inline-block;width:16px;height:16px;margin-right:8px;border:2px solid rgba(255,255,255,.3);border-top:2px solid white;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.auth-continue-button{display:flex;align-items:center;justify-content:center}.auth-continue-button svg{flex-shrink:0}.auth-modal-card{max-height:85vh}@media (max-width: 768px){.auth-options{display:grid;grid-template-columns:repeat(2,1fr);gap:4px;margin-bottom:10px}.auth-option-card{padding:6px;border-radius:14px;display:flex;flex-direction:column;align-items:center;gap:1px;text-align:center;min-height:200px;min-width:38vw}.auth-option-card:hover{transform:none;box-shadow:none}.auth-option-icon{font-size:26px;margin-bottom:0}.auth-option-title{font-size:14px;font-weight:700;margin-bottom:2px;line-height:1.1}.auth-option-description{font-size:12px;line-height:1.1;margin-bottom:4px}.auth-option-features{list-style:none;padding:0;margin:2px 0 0;width:100%}.auth-option-features li{position:relative;padding-left:2px;margin-bottom:1px;font-size:11px;line-height:1;color:#a0aec0}.auth-option-button{padding:8px 10px;font-size:12px;border-radius:10px;width:100%}.recommended-badge{font-size:9px;padding:3px 8px;top:-10px}}.auth-form-unified{max-width:100%}.form-section{margin-bottom:15px}.auth-modal-card{max-height:90vh;padding:30px 20px}.auth-modal-title{margin-top:35px;margin-bottom:auto;color:#fff;font-size:20px;font-weight:600;text-align:center}.auth-modal-subtitle{color:#a0aec0;font-size:12px;margin-bottom:6px;text-align:center;line-height:1.1}.auth-loading-state{text-align:center;padding:40px 20px}.loading-spinner-large{display:inline-block;width:48px;height:48px;margin-bottom:20px;border:4px solid rgba(66,153,225,.2);border-top:4px solid #4299e1;border-radius:50%;animation:spin 1s linear infinite}.auth-loading-state p{color:#90cdf4;font-size:16px;font-weight:600}.tutorial-button{width:25%;display:flex;align-items:center;gap:4px;padding:15px;background:linear-gradient(135deg,#fbbf2433,#f59e0b1a);border:3px solid rgba(251,191,36,.4);border-radius:16px;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px #fbbf2433}.tutorial-button:hover{transform:translateY(-3px);border-color:#fbbf24;box-shadow:0 8px 24px #fbbf2466;background:linear-gradient(135deg,#fbbf244d,#f59e0b33)}.tutorial-button:active{transform:translateY(-1px)}.tutorial-icon{font-size:48px;flex-shrink:0;animation:float 3s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.top-bar{display:flex;align-items:flex-start;justify-content:space-evenly;gap:8px}.tutorial-button-content{flex:1;text-align:left;display:flex;flex-direction:column;gap:4px}.tutorial-button-title{color:#fff;font-size:20px;font-weight:700;display:block}.tutorial-button-subtitle{color:#fbbf24;font-size:14px;font-weight:600;display:block}@media (max-width: 768px){.guest-status-section{width:85%;display:flex;align-items:center;justify-content:space-between;padding:8px 6px;margin-bottom:20px;gap:4px}.user-status-section{width:85%;display:flex;align-items:center;justify-content:space-between;padding:8px 6px;margin-bottom:20px;gap:2px}.tutorial-button{align-items:center;justify-content:center;flex-direction:column;padding:4px 0;min-width:26px;height:7.5vh;gap:2px}.tutorial-icon{font-size:22px!important}.tutorial-button-title{font-size:9px!important;text-align:center;white-space:nowrap;line-height:1.1}.tutorial-button-subtitle{display:none}}@media (max-width: 480px){.tutorial-button{padding:12px}.tutorial-icon{font-size:32px}.tutorial-button-title{font-size:15px}.tutorial-button-subtitle{font-size:11px}}.step-content{color:#fff}.step-title{color:#fff;font-size:clamp(20px,6vw,34px);text-align:center;position:relative;margin-top:-20px}.step-content.compact-layout{display:flex;flex-direction:column;gap:20px}.intro-grid{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,auto);gap:20px;padding:20px 0}.intro-card{padding:clamp(16px,4vw,30px) clamp(12px,3vw,20px);background:#0000004d;border:2px solid #4a5568;border-radius:16px;text-align:center;transition:all .3s ease;cursor:pointer}.intro-card:hover{transform:translateY(-8px);border-color:#4299e1;box-shadow:0 12px 30px #4299e166}.intro-card:active{transform:translateY(-5px)}.intro-icon{font-size:48px;margin-bottom:15px}.intro-card h3{color:#fff;font-size:20px;margin:0 0 10px}.intro-card p{color:#cbd5e0;font-size:14px;margin:0}.board-dimensions{text-align:center;color:#fbbf24;font-weight:700;font-size:16px;padding:8px 16px;background:#fbbf2433;border:2px solid rgba(251,191,36,.5);border-radius:8px;margin-bottom:8px}.board-explanation.compact,.zones-explanation.compact,.movement-explanation.compact,.passing-explanation.compact,.doublepass-explanation.compact,.kicking-explanation.compact,.tackle-explanation.compact{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:start;width:100%}.lineup-explanation.compact{display:flex;flex-direction:column}.lineup-center{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:start;width:100%}.board-visual{display:flex;flex-direction:column;gap:10px;align-items:center}.goal-zone{background:#48bb7833;border:2px solid rgba(72,187,120,.5);border-radius:12px;padding:10px 6px;color:#48bb78;font-weight:700;font-size:12px;transition:all .3s ease}.goal-zone.flash{background:#48bb7866;border-color:#48bb78;box-shadow:0 0 20px #48bb7899;animation:goalPulse .5s ease}@keyframes goalPulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.board-info,.zones-info,.movement-info,.passing-info,.doublepass-info,.kicking-info,.tackle-info{max-width:450px}.board-info h3,.zones-info h3,.movement-info h3,.passing-info h3,.doublepass-info h3,.kicking-info h3,.tackle-info h3{color:#fff;font-size:24px;margin:0 0 20px}.board-info ul,.movement-info ul{list-style:none;padding:0;margin:0}.board-info li,.movement-info li{color:#cbd5e0;font-size:16px;padding:10px 0;line-height:1.5}.lineup-board-section{display:flex;flex-direction:column;gap:10px;align-items:center}.lineup-controls-section{display:flex;flex-direction:column;gap:20px}.piece-selector-panel{background:#0000004d;border:2px solid #4a5568;border-radius:12px;padding:15px}.piece-selector-panel h4{color:#90cdf4;font-size:14px;margin:0 0 12px;text-align:center}.piece-button-group{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.piece-button-tutorial{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px;background:#fafafa0d;border:2px solid transparent;border-radius:8px;cursor:pointer;transition:all .3s ease;color:#fff}.piece-button-tutorial:hover:not(.disabled){background:#4299e133;border-color:#4299e14d}.piece-button-tutorial.selected{background:#4299e14d;border-color:#4299e1}.piece-button-tutorial.disabled{opacity:.4;cursor:not-allowed}.piece-symbol{font-size:24px}.piece-badge{font-size:12px;font-weight:700;color:#fbbf24;background:#fbbf2433;padding:2px 6px;border-radius:4px}.lineup-instructions{color:#90cdf4;padding:6px 15px;background:#fbbf241a;border:1px solid rgba(251,191,36,.3);border-radius:8px;font-size:clamp(10px,4vw,14px);text-align:center}.lineup-action-buttons{width:100%;display:flex;gap:8px}.tutorial-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 16px;border:2px solid;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s ease;color:#fff}.tutorial-btn.random{flex:.5;background:#667eea33;border-color:#667eea80}.tutorial-btn.random:hover{background:#667eea4d;border-color:#667eea;transform:translateY(-2px)}.tutorial-btn.reset{background:#ef444433;border-color:#ef444480}.tutorial-btn.reset:hover{background:#ef44444d;border-color:#ef4444;transform:translateY(-2px)}.tutorial-btn.confirm{flex:.5;background:#48bb7833;border-color:#48bb7880}.tutorial-btn.confirm:hover{background:#48bb784d;border-color:#48bb78;transform:translateY(-2px)}.zone-legend{display:flex;flex-direction:column;gap:6px;font-size:13px}.legend-item{padding:6px 10px;border-radius:6px;color:#fff;font-weight:600}.legend-item.attack{background:#f003;border-left:4px solid rgba(255,0,0,.5)}.legend-item.midfield{background:#ff03;border-left:4px solid rgba(255,255,0,.5)}.legend-item.defense{background:#0064ff33;border-left:4px solid rgba(0,100,255,.5)}.success-message{background:#48bb7833;border:2px solid #48bb78;border-radius:12px;padding:15px;text-align:center;color:#48bb78;font-size:18px;font-weight:700;margin:15px 0;animation:successPop .5s ease}@keyframes successPop{0%{transform:scale(.8);opacity:0}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}.zones-visual{display:flex;flex-direction:column;gap:10px;align-items:center}.zones-info{display:flex;flex-direction:column;gap:12px}.zone-stats.compact{display:flex;flex-direction:column;gap:10px}.stat-card{background:#0000004d;border:2px solid;border-radius:12px;padding:12px}.stat-card.attack{border-color:#ef444480;background:#ef44441a}.stat-card.midfield{border-color:#fbbf2480;background:#fbbf241a}.stat-card.defense{border-color:#3b82f680;background:#3b82f61a}.stat-header{display:flex;align-items:center;gap:8px;margin-bottom:10px}.stat-icon{font-size:18px}.stat-header strong{color:#fff;font-size:15px}.stat-modifiers{display:flex;gap:8px;margin-bottom:10px;font-size:12px}.mod-up{color:#48bb78;font-weight:700}.mod-down{color:#ef4444;font-weight:700}.mod-neutral{color:#90cdf4;font-weight:700}.stat-card p{color:#cbd5e0;font-size:12px;margin:0}.movement-explanation.compact{grid-template-columns:1fr 1.2fr}.movement-board{display:flex;justify-content:center}.movement-info{display:flex;flex-direction:column;gap:15px}.piece-header{display:flex;align-items:center;gap:12px}.piece-display{font-size:40px}.piece-header h3{color:#fff;font-size:24px;margin:0}.movement-desc{color:#90cdf4;font-size:16px;margin:0}.piece-stats{display:flex;gap:10px}.stat-box{flex:1;background:#0000004d;border:2px solid #4a5568;border-radius:12px;padding:6px;text-align:center}.stat-label{display:block;color:#90cdf4;font-size:14px;margin-bottom:8px}.stat-num{display:block;color:#fff;font-size:22px;font-weight:700}.phase-indicator{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:10px}.piece-selector-movement{font-size:28px;padding:6px 8px;background:#ffffffd9;border:2px solid transparent;border-radius:8px;cursor:pointer;transition:all .3s ease;opacity:.4}.piece-selector-tutorial{font-size:28px;padding:8px;background:#0003;border:2px solid transparent;border-radius:8px;cursor:pointer;transition:all .3s ease;opacity:.4}.piece-selector-movement:hover,.piece-selector-tutorial:hover{opacity:.7;background:#4299e133;border-color:#4299e14d}.piece-selector-movement.active,.piece-selector-tutorial.active{opacity:1;background:#4299e14d;border-color:#4299e1;transform:scale(1.15)}.action-flow{display:flex;flex-direction:column;gap:12px;margin-bottom:20px}.flow-step{display:flex;align-items:center;gap:12px;padding:10px;background:#0003;border:2px solid #4a5568;border-radius:8px;opacity:.4;transition:all .3s ease}.flow-step.active{opacity:1;border-color:#4299e1;background:#4299e11a}.flow-num{width:28px;height:28px;border-radius:50%;background:#4299e1;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;flex-shrink:0}.flow-step p{color:#90cdf4;margin:0;font-size:13px}.action-btn{padding:10px 16px;background:#48bb78;border:2px solid white;border-radius:8px;color:#fff;font-weight:600;cursor:pointer;transition:all .3s ease;margin:0 15px;font-size:13px}.action-btn:hover{background:#48bb78cc;border-color:#48bb78;transform:translateY(-2px)}.passing-info h3,.doublepass-info h3,.kicking-info h3,.tackle-info h3{margin:0;font-size:20px}.doublepass-note,.passing-note,.tackle-note{background:#fbbf2433;border-left:4px solid #fbbf24;padding:10px 12px;font-size:12px;border-radius:8px}.kicking-visual{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px}.goal-behind-keeper{font-size:32px;margin-bottom:-10px;z-index:1}.goal-celebration{position:absolute;top:-50px;left:50%;transform:translate(-50%);background:linear-gradient(135deg,#48bb78,#38a169);color:#fff;padding:10px 20px;border-radius:8px;font-size:18px;font-weight:700;box-shadow:0 8px 20px #48bb7880;animation:celebrationPop .5s ease;white-space:nowrap;z-index:2}@keyframes celebrationPop{0%{transform:translate(-50%) scale(0);opacity:0}50%{transform:translate(-50%) scale(1.2)}to{transform:translate(-50%) scale(1);opacity:1}}.combat-step-layout{display:flex;flex-direction:column}.combat-explanation.redesigned{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:start;width:100%}.combat-visual{display:flex;flex-direction:column;gap:20px}.combat-scenario.redesigned{display:flex;align-items:center;justify-content:space-around;gap:15px;padding:20px;background:linear-gradient(135deg,#0006,#0003);border:2px solid #4a5568;border-radius:16px}.combatant{text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;flex:1}.combatant .piece-display{font-size:48px;margin-bottom:4px}.combatant .piece-name-tutorial{color:#fff;font-weight:700;font-size:16px;margin:0}.piece-role{font-size:12px;padding:4px 10px;border-radius:4px;font-weight:600}.piece-role.attacker-role{background:#ef44444d;color:#ef4444}.piece-role.defender-role{background:#3b82f64d;color:#3b82f6}.stats.redesigned{width:100%;background:#0000004d;border-radius:8px;padding:8px;display:flex;flex-direction:column;gap:6px}.stat-row{display:flex;justify-content:space-between;font-size:12px;color:#cbd5e0;padding:4px 6px}.stat-row .stat-value{font-weight:700;color:#fff}.stat-row .stat-value.highlight{color:#fbbf24;font-size:13px}.stats.redesigned.attack .stat-value.highlight{color:#ef4444}.stats.redesigned.defense .stat-value.highlight{color:#3b82f6}.vs-section{display:flex;flex-direction:column;align-items:center;gap:8px}.vs-icon{font-size:32px;animation:pulse-glow 1.5s ease-in-out infinite}@keyframes pulse-glow{0%,to{opacity:.8;transform:scale(1)}50%{opacity:1;transform:scale(1.1)}}.vs-label{color:#90cdf4;font-weight:700;font-size:12px}.combat-calculation{display:flex;flex-direction:column;gap:12px;padding:16px;background:#0003;border:2px solid #4a5568;border-radius:12px;min-height:140px}.combat-roll.redesigned{padding:12px;background:#4299e11a;border:1px solid rgba(66,153,225,.3);border-radius:8px}.combat-roll.redesigned.show{display:block}.combat-defense.redesigned{padding:12px;background:#3b82f61a;border:1px solid rgba(59,130,246,.3);border-radius:8px}.combat-defense.redesigned.show{display:block}.calculation-header{color:#90cdf4;font-size:12px;font-weight:600;text-align:center;margin-bottom:10px}.roll-display{display:flex;align-items:center;justify-content:center;gap:16px;margin-bottom:12px;padding:12px;background:#0000004d;border-radius:8px}.dice-icon{font-size:36px;animation:pulse-glow .6s ease-in-out infinite}@keyframes dice-roll{0%{transform:rotate(0)}50%{transform:rotate(180deg)}to{transform:rotate(360deg)}}.roll-value{background:#fbbf244d;border:3px solid #fbbf24;padding:10px 18px;border-radius:8px;color:#fbbf24;font-size:20px;font-weight:700;min-width:50px;text-align:center}.attack-equals{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;border-radius:6px;font-size:calmp(16px,6vw,20px);color:#fff;flex-wrap:wrap;color:#fbbf24;font-weight:700}.calculation-line{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;background:#90cdf41a;border-radius:6px;font-size:14px;color:#fff;flex-wrap:wrap}.calculation-line .operator,.calculation-line .equals{color:#fbbf24;font-weight:700}.calculation-line .total{background:#fbbf244d;padding:4px 10px;border-radius:4px;font-weight:700;color:#fbbf24;border:2px solid #fbbf24}.vs-line{text-align:center;color:#90cdf4;font-weight:700;font-size:calmp(16px,6vw,24px);padding:8px 0}.defense-value{text-align:center;background:#3b82f633;border:2px solid #3b82f6;padding:12px;border-radius:8px;color:#fff;font-weight:700;font-size:16px}.combat-result.redesigned{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px;background:#48bb7899;border:2px solid rgba(72,187,120,.9);border-radius:8px;text-align:center}.combat-result.redesigned:not(.show){display:none}.result-icon{font-size:28px}.result-text{color:#fff;font-weight:700;font-size:15px}.result-explanation{color:#f0f0f0e6;font-size:13px}.combat-info.redesigned{display:flex;flex-direction:column;gap:16px}.combat-info.redesigned h3{margin:0;font-size:22px;color:#fff}.info-section{background:#0000004d;border:2px solid #4a5568;border-radius:12px;padding:16px;margin-bottom:10px}.info-section h4{color:#90cdf4;font-size:14px;margin:0 0 12px;font-weight:700}.formula-section{border-color:#4299e180}.formula-flow{display:flex;flex-direction:column;gap:10px}.formula-step{display:flex;align-items:center;gap:10px;padding:10px;background:#4299e11a;border-radius:8px}.formula-step.success{background:#48bb781a;border-left:4px solid #48bb78}.step-icon{width:28px;height:28px;background:#4299e1;color:#fff;display:flex;align-items:center;justify-content:center;border-radius:50%;font-weight:700;font-size:13px;flex-shrink:0}.formula-step.success .step-icon{background:#48bb78}.step-text{color:#cbd5e0;font-size:13px;font-weight:700}.arrow-down{text-align:center;color:#90cdf4;font-size:18px;height:15px;font-weight:900}.stats-section{border-color:#fbbf2480}.piece-stats-table.redesigned{width:100%;border-collapse:collapse;margin:0}.piece-stats-table.redesigned th{color:#90cdf4;font-size:12px;padding:8px;text-align:left;border-bottom:2px solid #4a5568;font-weight:700}.piece-stats-table.redesigned td{color:#fff;font-size:12px;padding:8px;border-bottom:1px solid rgba(74,85,104,.3)}.piece-stats-table.redesigned tr:last-child td{border-bottom:none}.modifiers-section{border-color:#3b82f680}.modifier-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.modifier-item{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px;border-radius:8px;text-align:center}.mod-emoji{font-size:24px}.mod-name{color:#fff;font-weight:700;font-size:12px}.mod-effect{color:#cbd5e0;font-size:11px}.modifier-item.attack-mod{background:#ef44441a;border:1px solid rgba(239,68,68,.3)}.modifier-item.midfield-mod{background:#fbbf241a;border:1px solid rgba(251,191,36,.3)}.modifier-item.defense-mod{background:#3b82f61a;border:1px solid rgba(59,130,246,.3)}.mod-effect.neutral{color:#90cdf4}.plus{color:#48bb78;font-weight:700}.minus{color:#ef4444;font-weight:700}.mini-square.highlight-red{box-shadow:inset 0 0 0 3px #ef4444!important;animation:tackleFlash .5s ease-in-out infinite}@keyframes tackleFlash{0%,to{box-shadow:inset 0 0 0 3px #ef4444,0 0 10px #ef444499!important;opacity:1}50%{box-shadow:inset 0 0 0 3px #ef4444,0 0 20px #ef4444e6!important;opacity:.8}}.winning-explanation{max-width:800px;margin:0 auto}.winning-conditions{display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,auto);gap:10px;margin-bottom:10px}.condition-card{background:#0000004d;border:3px solid;border-radius:16px;padding:clamp(10px,4vw,20px) clamp(12px,3vw,20px);text-align:center;transition:all .3s ease}.condition-card:hover{transform:translateY(-5px)}.condition-card.primary{border-color:#48bb78;background:linear-gradient(135deg,#48bb7833,#0000004d)}.condition-card.secondary{border-color:#4299e1;background:linear-gradient(135deg,#4299e133,#0000004d)}.condition-icon{font-size:clamp(32px,4vw,64px);margin-bottom:15px}.condition-card h3{color:#fff;font-size:clamp(12px,4vw,22px);margin:0 0 10px}.condition-value{color:#fbbf24;font-size:clamp(16px,4vw,28px);font-weight:700;margin-bottom:15px}.condition-card p{color:#cbd5e0;font-size:14px;margin:0}.winning-details{background:#0000004d;border:2px solid #4a5568;border-radius:16px;padding:30px}.winning-details h3{color:#fff;font-size:24px;margin:0 0 25px;text-align:center}.detail-section{margin-bottom:25px}.detail-section:last-child{margin-bottom:0}.detail-section h4{color:#90cdf4;font-size:18px;margin:0 0 15px}.detail-section ul{list-style:none;padding:0;margin:0}.detail-section li{color:#cbd5e0;font-size:15px;padding:8px 0 8px 25px;position:relative}.detail-section li:before{content:"✓";position:absolute;left:0;color:#48bb78;font-weight:700}.online-only{background:#4299e11a;border:2px solid rgba(66,153,225,.3);border-radius:12px;padding:20px;margin-top:20px}.score-table{display:flex;flex-direction:column;gap:10px}.score-row{display:flex;justify-content:space-between;align-items:center;padding:12px 15px;background:#0000004d;border-radius:8px}.score-label{color:#fff;font-size:16px;font-weight:600}.score-value-win-step{color:#fbbf24;font-size:16px;font-weight:700}@media (max-width: 1024px){.board-explanation.compact,.zones-explanation.compact,.movement-explanation.compact,.passing-explanation.compact,.doublepass-explanation.compact,.kicking-explanation.compact,.combat-explanation.compact,.tackle-explanation.compact,.combat-explanation.redesigned,.lineup-center,.modifier-grid{grid-template-columns:1fr}}.scroll-indicator{position:fixed;bottom:60px;left:85%;transform:translate(-50%);display:none;align-items:center;justify-content:center;gap:4px;padding:10px 12px;background:#4299e126;border:2px solid rgba(66,153,225,.4);border-radius:50px;color:#90cdf4;font-size:13px;font-weight:600;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:100;animation:scrollBounce 2s ease-in-out infinite;pointer-events:none}.scroll-indicator.show{display:flex}.scroll-indicator-arrow{font-size:20px;animation:arrowBounce 1.5s ease-in-out infinite}@keyframes scrollBounce{0%,to{opacity:.6}50%{opacity:1}}@keyframes arrowBounce{0%,to{transform:translateY(0)}50%{transform:translateY(4px)}}@media (min-width: 769px){.scroll-indicator{display:none!important}}@media (max-width: 768px){.intro-grid{gap:6px}.intro-icon{font-size:32px}.intro-card h3{font-size:16px}.intro-card p{font-size:12px}.goal-zone{font-size:12px;padding:10px 6px}.piece-selector-panel{padding:8px}.piece-button-group{grid-template-columns:repeat(5,1fr)}.piece-button-tutorial{padding:6px}.piece-symbol{font-size:20px}.phase-indicator{gap:4px}.piece-selector-tutorial{font-size:24px;padding:6px}.lineup-instructions{font-size:12px;padding:4px 15px}.action-flow{gap:10px}.flow-step{padding:8px;gap:10px}.flow-num{width:24px;height:24px;font-size:10px}.flow-step p{font-size:12px}.action-btn{padding:8px 12px;font-size:12px;margin:0 10px}.combat-scenario.redesigned{flex-direction:row;gap:12px;padding:16px;justify-content:space-around}.combatant .piece-display{font-size:40px}.vs-section{order:unset}.combat-calculation{min-height:150px}.calculation-line{gap:4px;font-size:18px;padding:8px}.roll-display{gap:12px;padding:10px}.dice-icon{font-size:28px}.roll-value{padding:8px 14px;font-size:12px;min-width:45px}.defense-value{font-size:14px;padding:10px}.result-text{font-size:14px}.result-explanation{font-size:12px}.modifier-grid{grid-template-columns:repeat(3,1fr)}.modifier-item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px;border-radius:8px;text-align:center}.piece-stats-table.redesigned{font-size:11px}.piece-stats-table.redesigned th,.piece-stats-table.redesigned td{padding:6px;font-size:11px}.winning-details{padding:20px}.tutorial-btn{width:100%}.condition-value{margin-bottom:6px}}.mini-board-container{display:inline-block}.mini-goal-label{position:relative;width:100px;left:32%;text-align:center;color:#48bb78;font-weight:700;font-size:14px;padding:8px;background:#48bb7833;border:2px solid rgba(72,187,120,.5);border-radius:8px}.mini-goal-label.top{margin-bottom:8px}.mini-goal-label.bottom{margin-top:8px}.mini-board{display:inline-block;background:#8b4513;padding:5px;border-radius:8px;box-shadow:0 4px 16px #00000080}.mini-board-row{display:flex}.mini-square{width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:1px solid #444;position:relative;background:#90ee90;transition:all .3s ease}.mini-square.dark{background:#228b22}.mini-square.clickable{cursor:pointer}.mini-square.clickable:hover{filter:brightness(1.2);transform:scale(1.05)}.mini-square.highlighted{box-shadow:inset 0 0 0 3px #fbbf24;animation:pulse 1.5s infinite}.mini-square.goal-square{background:#48bb784d;border:2px solid rgba(72,187,120,.6)}.mini-square.goal-square.dark{background:#48bb7866}.mini-square.zone-attack{background:#f003}.mini-square.zone-attack.dark{background:#ff00004d}.mini-square.zone-midfield{background:#ff03}.mini-square.zone-midfield.dark{background:#ffff004d}.mini-square.zone-defense{background:#0064ff33}.mini-square.zone-defense.dark{background:#0064ff4d}.mini-piece{font-size:34px;font-weight:700;position:relative;z-index:2}.mini-piece.player-1{color:#01f;text-shadow:2px 2px 3px rgba(0,0,0,.6)}.mini-piece.player-2{color:red;text-shadow:2px 2px 3px rgba(0,0,0,.6)}.mini-ball{position:absolute;font-size:14px;bottom:2px;right:2px;z-index:3;animation:bounce .6s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}@media (max-width: 768px){.mini-square{width:32px;height:32px}.mini-piece{font-size:24px!important}.mini-ball{bottom:1px;right:1px;font-size:10px!important}.mini-goal-label{width:70px;font-size:12px;padding:6px}}@media (max-width: 480px){.mini-board{padding:8px}.mini-square{width:28px;height:28px}.mini-piece{font-size:18px}.mini-ball{font-size:12px}.mini-goal-label{font-size:11px;padding:4px}}.mini-board.full-height .mini-square{width:36px;height:36px}.mini-board.full-height .mini-piece{font-size:26px}.mini-board.full-height .mini-ball{font-size:14px}@media (max-width: 768px){.mini-board.full-height .mini-square{width:28px;height:28px}.mini-board.full-height .mini-piece{font-size:20px}.mini-board.full-height .mini-ball{font-size:12px}}@media (max-width: 480px){.mini-board.full-height .mini-square{width:24px;height:24px}.mini-board.full-height .mini-piece{font-size:16px}.mini-board.full-height .mini-ball{font-size:10px}}.tutorial-container{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000e6;display:flex;align-items:center;justify-content:center;z-index:10000;padding:20px;overflow-y:auto}.tutorial-card{background:linear-gradient(135deg,#1a202c,#2d3748);border:3px solid #4a5568;border-radius:24px;padding:40px;max-width:900px;width:100%;max-height:95vh;overflow-y:auto;position:relative;box-shadow:0 20px 60px #000000b3}.tutorial-close{position:absolute;top:20px;right:20px;width:36px;height:36px;border-radius:50%;background:#f5656533;border:2px solid rgba(245,101,101,.4);color:#f56565;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;z-index:10}.tutorial-close:hover{background:#f565654d;transform:scale(1.1)}.tutorial-header{text-align:center;margin-bottom:30px}.tutorial-header h2{color:#fff;font-size:32px;margin:0 0 10px}.tutorial-header p{color:#90cdf4;font-size:18px;margin:0}.tutorial-progress{display:flex;justify-content:center;gap:20px;margin-bottom:20px;flex-wrap:wrap}.progress-section{position:relative;width:80px;height:80px;border-radius:16px;background:#0000004d;border:3px solid rgba(255,255,255,.2);cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center}.progress-section:hover{transform:translateY(-3px);border-color:#4299e1;box-shadow:0 8px 20px #4299e14d}.progress-section.active{background:#4299e133;border-color:#4299e1;box-shadow:0 0 20px #4299e166}.progress-section.completed{background:#48bb7833;border-color:#48bb78}.progress-icon{font-size:36px}.completed-badge{position:absolute;top:-8px;right:-8px;width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#48bb78,#38a169);color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;border:3px solid #1a202c;box-shadow:0 4px 12px #48bb7880}.step-progress-bar{margin-bottom:20px}.step-progress-label{text-align:center;color:#90cdf4;font-size:14px;font-weight:600;margin-bottom:8px}.step-progress-track{height:8px;background:#0000004d;border-radius:4px;overflow:hidden}.step-progress-fill{height:100%;background:linear-gradient(90deg,#4299e1,#48bb78);border-radius:4px;transition:width .3s ease}.tutorial-content{min-height:400px;margin-bottom:30px}.tutorial-controls{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:20px;border-top:2px solid #4a5568;flex-wrap:wrap}.navigation-controls{display:flex;gap:12px;margin-left:auto}.tutorial-controls>button:not(.navigation-controls>button){order:-1}.control-btn{display:flex;align-items:center;gap:8px;padding:12px 24px;border:2px solid #4a5568;border-radius:12px;background:#0000004d;color:#fff;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease;white-space:nowrap}.control-btn:hover:not(:disabled){background:#4299e133;border-color:#4299e1;transform:translateY(-2px)}.control-btn:disabled{opacity:.3;cursor:not-allowed}.control-btn.reset{border-color:#ef444480;background:#ef44441a}.control-btn.reset:hover:not(:disabled){background:#ef444433;border-color:#ef4444}.control-btn.primary{background:linear-gradient(135deg,#4299e1,#3182ce);border-color:#4299e1}.control-btn.primary:hover:not(:disabled){box-shadow:0 4px 12px #4299e166}.control-btn.nav{background:#4299e11a;border-color:#4299e14d}.control-btn.nav:hover:not(:disabled){background:#4299e133;border-color:#4299e1}.control-btn.play-button{background:linear-gradient(135deg,#48bb78,#38a169);border-color:#48bb78;box-shadow:0 4px 12px #48bb7866;animation:playButtonPulse 2s ease-in-out infinite}.control-btn.play-button:hover:not(:disabled){box-shadow:0 6px 20px #48bb7899;transform:translateY(-3px) scale(1.05)}@keyframes playButtonPulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.tutorial-card{transition:opacity .25s ease-out}.tutorial-card.transitioning{opacity:.92}@media (max-width: 768px){.tutorial-header{text-align:center;margin-top:50px;margin-bottom:30px}.tutorial-card{padding:20px;max-height:85vh;border-radius:8px}.tutorial-header h2{font-size:18px!important}.tutorial-header p{font-size:14px}.tutorial-progress{gap:12px}.progress-section{width:60px;height:60px}.progress-icon{font-size:28px}.completed-badge{width:24px;height:24px;font-size:14px;top:-6px;right:-6px}.tutorial-content{min-height:250px}.tutorial-controls{flex-direction:column;gap:6px}.navigation-controls{width:100%;margin-left:0}.control-btn{flex:.5;justify-content:center;padding:10px 12px;font-size:14px}.tutorial-controls>button:first-child{width:100%}}@media (max-width: 480px){.tutorial-card{padding:15px}.tutorial-close{top:10px;right:10px;width:32px;height:32px;font-size:18px}.tutorial-header h2{font-size:20px;margin-bottom:8px}.tutorial-header p{font-size:13px}.progress-section{width:50px;height:50px}.progress-icon{font-size:24px}.control-btn{padding:10px 12px;font-size:13px;gap:6px}.control-btn span{display:none}.control-btn svg{margin:0}.control-btn.reset span,.control-btn.reset svg{display:block}.control-btn.reset{display:none}}.matchmaking-container{min-height:100vh;background:linear-gradient(135deg,#2c5f2d,#1a3d1b);display:flex;align-items:center;justify-content:center;padding:20px}.matchmaking-card{background:linear-gradient(135deg,#1a202c,#2d3748);border:3px solid #4a5568;border-radius:20px;padding:50px;max-width:700px;width:100%;box-shadow:0 20px 60px #00000080;animation:fadeIn .5s ease}.matchmaking-card.match-found{animation:matchFoundPulse .8s ease}@keyframes fadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes matchFoundPulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}.matchmaking-header{text-align:center;margin-bottom:40px}.matchmaking-header h1{color:#fff;font-size:calmp(16px,4vw,36px);margin:0 0 10px;min-height:45px}.matchmaking-header p{color:#90cdf4;font-size:calmp(8px,4vw,16px);margin:0}.matchmaking-animation{position:relative;width:150px;height:150px;margin:0 auto 40px}.search-spinner{position:absolute;top:50%;left:50%;width:120px;height:120px;margin:-60px 0 0 -60px;border:4px solid rgba(66,153,225,.2);border-top:4px solid #4299e1;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.search-pulse{position:absolute;top:50%;left:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border:4px solid rgba(66,153,225,.4);border-radius:50%;animation:pulse 2s ease-out infinite}@keyframes pulse{0%{transform:scale(.5);opacity:1}to{transform:scale(1.2);opacity:0}}.player-info{display:flex;align-items:center;justify-content:space-between;gap:30px;margin-bottom:40px}.player-card{flex:1;background:#0000004d;border:2px solid #4a5568;border-radius:12px;padding:20px;display:flex;flex-direction:column;align-items:center;gap:12px;transition:all .3s ease}.player-card.you{border-color:#4299e1;box-shadow:0 0 20px #4299e14d}.player-card.opponent.searching{animation:searchingPulse 2s ease-in-out infinite}@keyframes searchingPulse{0%,to{opacity:.5}50%{opacity:1}}.player-card.opponent.found{border-color:#48bb78;box-shadow:0 0 20px #48bb784d;animation:foundBounce .6s ease}@keyframes foundBounce{0%,to{transform:scale(1)}50%{transform:scale(1.1)}}.player-avatar{font-size:48px;width:80px;height:80px;display:flex;align-items:center;justify-content:center;background:#0006;border-radius:50%;border:3px solid rgba(255,255,255,.1)}.player-details{text-align:center;width:100%}.player-nickname{color:#fff;font-size:calmp(16,5vw,20px);font-weight:600;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-label{color:#a0aec0;font-size:13px;text-transform:uppercase;letter-spacing:1px}.vs-divider{flex:0 0 auto;width:60px;height:60px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#ed8936,#dd6b20);border-radius:50%;box-shadow:0 4px 12px #ed893666;animation:float 3s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.vs-divider.active{animation:vsExplode .6s ease}@keyframes vsExplode{0%{transform:scale(1) rotate(0)}50%{transform:scale(1.3) rotate(180deg)}to{transform:scale(1) rotate(360deg)}}.vs-divider span{color:#fff;font-size:20px;font-weight:900;letter-spacing:2px}.matchmaking-tips{background:#48bb781a;border:2px solid #48bb78;border-radius:12px;padding:20px;margin-bottom:30px}.matchmaking-tips h3{color:#68d391;font-size:16px;margin:0 0 12px}.matchmaking-tips ul{margin:0;padding-left:20px;color:#cbd5e0;font-size:14px}.matchmaking-tips li{margin:8px 0;line-height:1.5}.cancel-search-button{width:100%;padding:14px;background:#ffffff1a;color:#f56565;border:2px solid #f56565;border-radius:12px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease}.cancel-search-button:hover{background:#f565651a;transform:translateY(-2px);box-shadow:0 4px 12px #f565654d}.match-found-header{text-align:center;margin-bottom:40px}.match-found-icon{width:100px;height:100px;margin:0 auto 20px;background:linear-gradient(135deg,#48bb78,#38a169);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:60px;color:#fff;box-shadow:0 8px 24px #48bb7880;animation:checkmarkAppear .6s ease}@keyframes checkmarkAppear{0%{transform:scale(0) rotate(-180deg);opacity:0}60%{transform:scale(1.2) rotate(10deg)}to{transform:scale(1) rotate(0);opacity:1}}.match-found-header h1{color:#48bb78;font-size:36px;margin:0;animation:slideDown .5s ease .3s both}@keyframes slideDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.countdown-display{text-align:center;margin-top:30px}.countdown-circle{width:120px;height:120px;margin:0 auto 20px;background:linear-gradient(135deg,#4299e1,#3182ce);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px #4299e180;animation:countdownPulse 1s ease-in-out infinite}@keyframes countdownPulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.countdown-number{color:#fff;font-size:72px;font-weight:900;text-shadow:2px 2px 8px rgba(0,0,0,.3)}.countdown-display p{color:#90cdf4;font-size:18px;margin:0;font-weight:600}@media (max-width: 768px){.matchmaking-card{padding:30px 20px}.player-info{flex-direction:column;gap:20px}.player-card{width:100%}.matchmaking-animation{display:none;position:relative;width:50px;height:50px;margin:-25px auto 30px}.search-pulse{position:absolute;top:50%;left:50%;width:75px;height:75px;margin:-30px 0 0 -30px;border:4px solid rgba(66,153,225,.4);border-radius:50%;animation:pulse 2s ease-out infinite}.search-spinner{position:absolute;top:50%;left:50%;width:45px;height:45px;margin:-15px 0 0 -15px;border:4px solid rgba(66,153,225,.2);border-top:4px solid #4299e1;border-radius:50%;animation:spin 1s linear infinite}.matchmaking-header h1{min-height:25px}.player-card{flex:1;background:#0000004d;border:2px solid #4a5568;border-radius:12px;padding:5px;display:flex;flex-direction:column;align-items:center;gap:1px;transition:all .3s ease}.player-avatar{font-size:28px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:#0006;border-radius:50%;border:3px solid rgba(255,255,255,.1)}.matchmaking-tips{padding:10px;margin-bottom:10px}.matchmaking-tips h3{font-size:14px}.matchmaking-tips ul{padding-left:20px;font-size:13px}.matchmaking-tips li{margin:8px 0;line-height:1.25}}.matchmaking-card.ai-match{background:linear-gradient(135deg,#667eea,#764ba2)}.match-found-header.ai{border-bottom-color:#ffffff4d}.match-found-icon.ai-icon{font-size:4rem;animation:pulse-ai 2s ease-in-out infinite}@keyframes pulse-ai{0%,to{transform:scale(1);opacity:1}50%{transform:scale(1.1);opacity:.8}}.ai-match-subtitle{font-size:.95rem;color:#fffc;margin-top:.5rem}.player-card.ai{border:2px solid #ffd700;background:linear-gradient(135deg,#ffd7001a,#ffd7000d)}.ai-ranking{font-size:.8rem;color:gold;margin-top:.3rem;font-weight:600}.vs-divider.ai-vs span{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.search-timer{font-size:.9rem;color:#ffffffb3;margin-top:.5rem;animation:blink 1s ease-in-out infinite}@keyframes blink{0%,to{opacity:1}50%{opacity:.6}}.gs-loading-screen-container{min-height:100vh;background:linear-gradient(135deg,#2c5f2d,#1a3d1b);display:flex;align-items:center;justify-content:center;padding:20px;position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999}.gs-loading-screen-card{background:linear-gradient(135deg,#1a202c,#2d3748);border:3px solid #4a5568;border-radius:24px;padding:60px 40px;max-width:500px;width:100%;box-shadow:0 20px 60px #000000b3;animation:gs-slideUp .6s ease;text-align:center}@keyframes gs-slideUp{0%{transform:translateY(50px);opacity:0}to{transform:translateY(0);opacity:1}}.gs-loading-animation{position:relative;width:120px;height:120px;margin:0 auto 40px;display:flex;align-items:center;justify-content:center}.gs-soccer-ball{font-size:80px;animation:gs-bounce 1.5s ease-in-out infinite;z-index:2;position:relative}@keyframes gs-bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-30px)}}.gs-loading-orbits{position:absolute;width:100%;height:100%;top:0;left:0}.gs-orbit{position:absolute;border:2px solid transparent;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%)}.gs-orbit-1{width:100px;height:100px;border-top-color:#4299e1;border-right-color:#4299e1;animation:gs-spin 3s linear infinite}.gs-orbit-2{width:130px;height:130px;border-bottom-color:#48bb78;border-left-color:#48bb78;animation:gs-spin 4s linear infinite reverse}.gs-orbit-3{width:160px;height:160px;border-top-color:#ed8936;border-right-color:#ed8936;animation:gs-spin 5s linear infinite;opacity:.6}@keyframes gs-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}.gs-loading-content{margin-bottom:40px}.gs-loading-title{color:#fff;font-size:28px;font-weight:700;margin:0 0 10px;text-shadow:2px 2px 8px rgba(0,0,0,.3)}.gs-loading-text{color:#90cdf4;font-size:18px;font-weight:600;margin:0 0 30px;min-height:24px;letter-spacing:1px}.gs-loading-tips{display:flex;flex-direction:column;gap:12px;text-align:left}.gs-tip{display:flex;align-items:center;gap:12px;padding:12px 16px;background:#4299e11a;border-left:4px solid #4299e1;border-radius:8px;animation:gs-slideInLeft .6s ease forwards;opacity:0}.gs-tip:nth-child(1){animation-delay:.2s}.gs-tip:nth-child(2){animation-delay:.4s}.gs-tip:nth-child(3){animation-delay:.6s}@keyframes gs-slideInLeft{0%{transform:translate(-20px);opacity:0}to{transform:translate(0);opacity:1}}.gs-tip-emoji{font-size:20px;flex-shrink:0}.gs-tip-text{color:#cbd5e0;font-size:14px;font-weight:500}.gs-loading-progress{margin-top:30px}.gs-progress-bar{width:100%;height:6px;background:#ffffff1a;border-radius:3px;overflow:hidden;border:1px solid rgba(66,153,225,.3)}.gs-progress-fill{height:100%;background:linear-gradient(90deg,#4299e1,#48bb78,#ed8936);border-radius:3px;animation:gs-progressFill 3s ease-in-out infinite}@keyframes gs-progressFill{0%{width:0%}50%{width:100%}to{width:0%}}.gs-error-screen-container{min-height:100vh;background:linear-gradient(135deg,#742a2a,#4a1f1f);display:flex;align-items:center;justify-content:center;padding:20px;position:fixed;top:0;left:0;right:0;bottom:0;z-index:9999}.gs-error-screen-card{background:linear-gradient(135deg,#1a202c,#2d3748);border:3px solid #e53e3e;border-radius:24px;padding:60px 40px;max-width:500px;width:100%;box-shadow:0 20px 60px #dc26264d;animation:gs-slideUp .6s ease;text-align:center}.gs-error-icon{font-size:80px;margin-bottom:20px;animation:gs-shake .5s ease}@keyframes gs-shake{0%,to{transform:translate(0)}25%{transform:translate(-10px)}75%{transform:translate(10px)}}.gs-error-title{color:#f56565;font-size:28px;font-weight:700;margin:0 0 15px}.gs-error-message{color:#fff;font-size:16px;font-weight:600;margin:0 0 10px;line-height:1.5}.gs-error-details{color:#cbd5e0;font-size:14px;margin:0 0 30px}.gs-error-reload-button{display:inline-flex;align-items:center;gap:10px;padding:14px 32px;background:linear-gradient(135deg,#f56565,#e53e3e);color:#fff;border:none;border-radius:12px;font-size:16px;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px #f5656566}.gs-error-reload-button:hover{transform:translateY(-3px);box-shadow:0 6px 20px #f5656599}.gs-game-over-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,#1a202cf2,#000000fa);display:flex;align-items:center;justify-content:center;padding:20px;z-index:9999;animation:gs-fadeIn .4s ease}@keyframes gs-fadeIn{0%{opacity:0}to{opacity:1}}.gs-game-over-card{background:linear-gradient(135deg,#1a202c,#2d3748);border:3px solid #4a5568;border-radius:24px;padding:50px 40px;max-width:600px;width:100%;box-shadow:0 30px 80px #000c;animation:gs-scaleUp .6s cubic-bezier(.34,1.56,.64,1);text-align:center}@keyframes gs-scaleUp{0%{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}.gs-game-over-icon{font-size:100px;margin-bottom:20px;display:inline-block;animation:gs-float 3s ease-in-out infinite}.gs-game-over-icon.gs-victory{animation:gs-victory-bounce 1.5s ease-in-out infinite}.gs-game-over-icon.gs-draw{animation:gs-handshake 1.2s ease-in-out infinite}@keyframes gs-handshake{0%{transform:translate(0) scale(1)}15%{transform:translate(-4px) scale(1.03)}30%{transform:translate(4px) scale(1.03)}45%{transform:translate(-3px) scale(1.02)}60%{transform:translate(3px) scale(1.02)}75%{transform:translate(-2px) scale(1.01)}to{transform:translate(0) scale(1)}}@keyframes gs-float{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}@keyframes gs-victory-bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-30px) rotate(10deg)}}.gs-game-over-content{margin-bottom:30px}.gs-game-over-title{color:#fff;font-size:36px;font-weight:700;margin:0 0 15px;text-shadow:2px 2px 8px rgba(0,0,0,.3)}.gs-winner-announcement{font-size:32px;font-weight:700;margin:0 0 30px;animation:gs-slideDown .6s ease}.gs-winner-announcement.gs-victory{color:#48bb78;text-shadow:0 0 20px rgba(72,187,120,.4)}.gs-winner-announcement.gs-draw{color:#4299e1;text-shadow:0 0 20px rgba(66,153,225,.4)}@keyframes gs-slideDown{0%{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}.gs-final-score{margin:0 0 30px;opacity:0;animation:gs-fadeInScale .6s ease forwards}.gs-final-score.gs-animate{animation:gs-popIn .9s cubic-bezier(.34,1.56,.64,1) forwards}@keyframes gs-fadeInScale{0%{transform:scale(.9);opacity:0}to{transform:scale(1);opacity:1}}@keyframes gs-popIn{0%{transform:scale(.8);opacity:0}50%{transform:scale(1.1)}to{transform:scale(1);opacity:1}}.gs-score-display{display:flex;flex-direction:column;gap:15px;padding:20px;background:linear-gradient(135deg,#48bb7826,#4299e126);border:2px solid rgba(72,187,120,.3);border-radius:16px}.gs-score-label{color:#90cdf4;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:1px}.gs-score-numbers{display:flex;align-items:center;justify-content:center;gap:20px}.gs-score-value{font-size:48px;font-weight:700;min-width:70px;color:#fff;animation:gs-scoreAnimate .8s cubic-bezier(.34,1.56,.64,1)}.gs-score-dash{color:#a0aec0;font-size:42px;font-weight:700;margin-bottom:5px}@keyframes gs-scoreAnimate{0%{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}.gs-game-over-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:15px;margin-bottom:30px}.gs-stat-item{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px;background:#4299e11a;border:2px solid rgba(66,153,225,.3);border-radius:12px;animation:gs-slideInUp .6s ease forwards;opacity:0}.gs-stat-item:nth-child(1){animation-delay:.2s}.gs-stat-item:nth-child(2){animation-delay:.4s}.gs-stat-item:nth-child(3){animation-delay:.6s}@keyframes gs-slideInUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.gs-stat-icon{font-size:24px}.gs-stat-text{color:#cbd5e0;font-size:13px;font-weight:600;text-align:center}.gs-new-game-button{display:inline-flex;align-items:center;gap:10px;padding:16px 40px;background:linear-gradient(135deg,#48bb78,#38a169);color:#fff;border:none;border-radius:12px;font-size:18px;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 6px 20px #48bb7866;animation:gs-slideUp .6s ease}.gs-new-game-button:hover{transform:translateY(-4px);box-shadow:0 10px 30px #48bb7899}.gs-new-game-button:active{transform:translateY(-2px)}.gs-button-icon{font-size:20px}@media (max-width: 768px){.gs-loading-screen-card{padding:40px 20px}.gs-loading-animation{width:100px;height:100px;margin-bottom:30px}.gs-soccer-ball{font-size:60px}.gs-orbit-1{width:80px;height:80px}.gs-orbit-2{width:110px;height:110px}.gs-orbit-3{width:140px;height:140px}.gs-loading-title{font-size:22px}.gs-loading-text{font-size:16px}.gs-loading-tips{gap:10px}.gs-tip{padding:10px 12px;font-size:13px}.gs-tip-emoji{font-size:18px}.gs-error-screen-card{padding:40px 20px}.gs-error-icon{font-size:60px}.gs-error-title{font-size:22px}.gs-error-message{font-size:14px}.gs-game-over-card{padding:35px 20px}.gs-game-over-icon{font-size:70px;margin-bottom:15px}.gs-game-over-title{font-size:28px;margin-bottom:10px}.gs-winner-announcement{font-size:24px;margin-bottom:20px}.gs-score-display{padding:15px;gap:10px}.gs-score-numbers{gap:15px}.gs-score-value{font-size:38px;min-width:60px}.gs-score-dash{font-size:28px}.gs-game-over-stats{grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px}.gs-stat-item{padding:8px}.gs-stat-icon{font-size:20px}.gs-stat-text{font-size:11px}.gs-new-game-button{padding:12px 24px;font-size:16px;gap:8px}.gs-button-icon{font-size:18px}}@media (max-width: 480px){.gs-loading-screen-card,.gs-error-screen-card{padding:30px 16px}.gs-loading-title{font-size:20px;margin-bottom:8px}.gs-loading-text{font-size:14px;margin-bottom:20px}.gs-tip{padding:8px 10px;font-size:12px}.gs-game-over-card{padding:25px 16px}.gs-game-over-icon{font-size:56px}.gs-game-over-title{font-size:24px}.gs-winner-announcement{font-size:20px}.gs-score-display{padding:12px}.gs-score-value{font-size:32px;min-width:50px}.gs-new-game-button{padding:10px 20px;font-size:14px}}.difficulty-card *{margin-top:0}.ai-selector-container{min-height:100vh;background:linear-gradient(135deg,#1a202c,#2d3748);display:flex;align-items:center;justify-content:center;padding:20px}.ai-selector-card{background:linear-gradient(135deg,#2d3748,#1a202c);border:3px solid #4a5568;border-radius:20px;padding:40px;max-width:1000px;width:100%;box-shadow:0 20px 60px #00000080;position:relative}.ai-back-button{position:absolute;top:20px;left:20px;background:#ffffff1a;border:2px solid rgba(144,205,244,.3);border-radius:8px;color:#fff;padding:10px 20px;font-size:16px;cursor:pointer;transition:all .3s ease}.ai-back-button:hover{background:#fff3;transform:translate(-5px)}.ai-selector-title{color:#fff;font-size:36px;text-align:center;margin-bottom:10px;margin-top:20px}.ai-selector-subtitle{color:#a0aec0;text-align:center;font-size:18px;margin-bottom:40px}.difficulty-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-bottom:30px}.difficulty-card{background:#ffffff0d;border:3px solid rgba(144,205,244,.2);border-radius:15px;padding:25px;cursor:pointer;transition:all .3s ease;position:relative;overflow:hidden}.difficulty-card:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--difficulty-color);transform:scaleX(0);transition:transform .3s ease}.difficulty-card:hover{transform:translateY(-5px);border-color:var(--difficulty-color);box-shadow:0 10px 30px #0000004d}.difficulty-card:hover:before{transform:scaleX(1)}.difficulty-card.selected{border-color:var(--difficulty-color);background:#ffffff1a;box-shadow:0 0 30px rgba(var(--difficulty-color),.3)}.difficulty-card.selected:before{transform:scaleX(1)}.difficulty-icon{font-size:48px;text-align:center;margin-bottom:15px}.difficulty-title{color:#fff;font-size:24px;text-align:center;margin-bottom:10px}.difficulty-description{color:#90cdf4;text-align:center;font-size:14px;margin-bottom:20px}.difficulty-features{list-style:none;padding:0;margin:0}.difficulty-features li{color:#a0aec0;font-size:14px;line-height:1.4;padding:6px 0 6px 60px;position:relative}.difficulty-features li:before{content:"•";position:absolute;left:7%;top:50%;transform:translateY(-50%);color:var(--difficulty-color);font-size:18px;margin-left:5px}.selected-indicator{position:absolute;top:15px;right:15px;background:var(--difficulty-color);color:#fff;padding:5px 15px;border-radius:20px;font-size:12px;font-weight:600;animation:fadeIn .3s ease}@keyframes fadeIn{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.ai-continue-button{width:100%;padding:18px;background:linear-gradient(135deg,#48bb78,#38a169);border:none;border-radius:12px;color:#fff;font-size:18px;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px #48bb7866}.ai-continue-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #48bb7899}.ai-continue-button:disabled{opacity:.5;cursor:not-allowed}.ai-info-note{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:20px;padding:15px;background:#ed89361a;border:2px solid rgba(237,137,54,.3);border-radius:10px}.info-icon{font-size:20px}.ai-info-note p{color:#fbd38d;margin:0;font-size:14px}.swipe-hint{position:absolute;top:45%;transform:translateY(-50%);font-size:32px;color:#ffffff80;pointer-events:none;animation:swipePulse 1.8s ease-in-out infinite;z-index:5}.swipe-hint.left{left:8px}.swipe-hint.right{right:8px}@keyframes swipePulse{0%{opacity:.3;transform:translateY(-50%) translate(0)}50%{opacity:.8;transform:translateY(-50%) translate(6px)}to{opacity:.3;transform:translateY(-50%) translate(0)}}@media (min-width: 769px){.swipe-hint{display:none}}@media (max-width: 768px){.ai-selector-container{height:100dvh;overflow:hidden;touch-action:pan-x}.ai-selector-card{height:100%;display:flex;flex-direction:column}.ai-selector-container{min-height:100dvh;padding:12px}.ai-selector-card{height:calc(100dvh - 24px);display:flex;flex-direction:column;padding:20px 16px}.difficulty-grid{display:flex;flex-direction:row;gap:16px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-bottom:20px}.difficulty-grid::-webkit-scrollbar{display:none}.difficulty-card{flex:0 0 100%;scroll-snap-align:center;padding:12px;border-radius:14px;display:flex;flex-direction:column;gap:2px}.difficulty-card:hover{transform:none;box-shadow:none}.difficulty-icon{font-size:26px;margin-bottom:0}.difficulty-title{font-size:17px;margin:0;line-height:1.15}.difficulty-description{font-size:13px;line-height:1.2;margin:2px 0}.difficulty-features{display:flex;flex-direction:column;gap:2px;margin-top:2px}.selected-indicator{top:10px;right:10px;padding:4px 12px;font-size:11px}.ai-selector-title{font-size:24px;margin-top:45px;margin-bottom:2px}.ai-selector-subtitle{font-size:14px;margin-bottom:16px}.ai-continue-button{margin-top:auto;padding:16px;font-size:16px}.ai-info-note{padding:12px;gap:4px}.ai-info-note p{font-size:13px}.ai-back-button{top:12px;left:12px;padding:8px 14px;font-size:14px;border-radius:6px}.ai-back-button:hover{transform:none}}.goal-celebration-toast{position:fixed;top:20px;left:48.5%;transform:translate(-50%) scale(.8);width:90%;max-width:450px;padding:20px 25px;background:linear-gradient(135deg,#fffffffa,#ffffffeb);border-radius:20px;box-shadow:0 20px 60px #0006,0 0 0 3px var(--player-color),0 0 40px var(--player-color);text-align:center;animation:goal-celebration-slideDown .5s cubic-bezier(.34,1.56,.64,1) forwards;overflow:visible;pointer-events:none;z-index:9998;contain:layout style paint}.goal-celebration-toast.exit{animation:goal-celebration-slideUp .5s ease-in forwards}@keyframes goal-celebration-slideDown{0%{transform:translate(-50%) translateY(-150px) scale(.8);opacity:0}to{transform:translate(-50%) translateY(0) scale(1);opacity:1}}@keyframes goal-celebration-slideUp{0%{transform:translate(-50%) translateY(0) scale(1);opacity:1}to{transform:translate(-50%) translateY(-150px) scale(.8);opacity:0}}.goal-celebration-text{font-size:clamp(42px,10vw,64px);font-weight:900;color:var(--player-color);text-shadow:3px 3px 0px rgba(0,0,0,.2),6px 6px 0px rgba(0,0,0,.1);margin:0 0 8px;animation:goal-celebration-bounce-large .6s ease-out;letter-spacing:2px}@keyframes goal-celebration-bounce-large{0%{transform:scale(.8) translateY(-20px)}50%{transform:scale(1.1) translateY(5px)}to{transform:scale(1) translateY(0)}}.goal-celebration-scorer-name{font-size:clamp(16px,5vw,26px);font-weight:700;color:#333;margin:6px 0;animation:goal-celebration-slideIn .5s ease-out .15s both}@keyframes goal-celebration-slideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.goal-celebration-emoji{font-size:clamp(32px,8vw,48px);margin-top:12px;animation:goal-celebration-bounce-emoji .8s ease-in-out infinite}@keyframes goal-celebration-bounce-emoji{0%,to{transform:translateY(0) scale(1)}50%{transform:translateY(-15px) scale(1.15)}}.goal-celebration-bg-circle{position:absolute;border-radius:50%;background:radial-gradient(circle,var(--player-color),transparent);opacity:.08;animation:goal-celebration-pulse-circle 2s ease-out forwards}.goal-celebration-circle-1{width:120px;height:120px;top:-40px;right:-40px;animation-delay:0s}.goal-celebration-circle-2{width:150px;height:150px;bottom:-60px;left:-60px;animation-delay:.15s}@keyframes goal-celebration-pulse-circle{0%{transform:scale(0);opacity:.15}to{transform:scale(1);opacity:0}}.goal-celebration-confetti-container{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:visible}.goal-celebration-confetti{position:absolute;width:6px;height:6px;background:var(--player-color);left:50%;top:-10px;opacity:1;border-radius:50%;animation:goal-celebration-confetti-fall 3s ease-in forwards}.goal-celebration-confetti:nth-child(odd){background:#6496ffb3;filter:hue-rotate(calc(var(--confetti-index, 0) * 15deg))}.goal-celebration-confetti:nth-child(3n){width:5px;height:5px;background:#6496ff80}@keyframes goal-celebration-confetti-fall{0%{transform:translate(0) rotate(0);opacity:1}to{transform:translate(var(--tx, 0px),var(--ty, 100vh)) rotate(var(--rotation, 0deg));opacity:0}}@media (max-width: 768px){.goal-celebration-toast{top:10px;max-width:85%;padding:18px 20px}.goal-celebration-circle-1{width:80px;height:80px}.goal-celebration-circle-2{width:100px;height:100px}.goal-celebration-confetti{width:5px;height:5px}}@media (max-width: 480px){.goal-celebration-toast{top:8px;max-width:90%;padding:16px;border-radius:16px;box-shadow:0 15px 40px #0000004d,0 0 0 2px var(--player-color),0 0 30px var(--player-color)}.goal-celebration-text{letter-spacing:1px;margin:0 0 6px}.goal-celebration-scorer-name{font-size:clamp(14px,4.5vw,20px);margin:4px 0}.goal-celebration-emoji{margin-top:10px}.goal-celebration-circle-1,.goal-celebration-circle-2{display:none}.goal-celebration-confetti{width:4px;height:4px}}@media (max-width: 360px){.goal-celebration-toast{max-width:95%;padding:14px 12px}.goal-celebration-text{font-size:clamp(36px,9vw,48px)}.goal-celebration-confetti{width:3px;height:3px}}*{box-sizing:border-box}body{margin:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.App{min-height:100vh;background:linear-gradient(135deg,#2c5f2d,#1a3d1b);padding:20px;color:#fff}h1{margin:0 0 20px;text-align:center;text-shadow:2px 2px 4px rgba(0,0,0,.5)}.loading,.error-screen{text-align:center;padding:50px}.loading-overlay{position:fixed;top:0;left:0;right:0;bottom:0;z-index:900;background:#0006;display:flex;align-items:center;justify-content:center;font-size:32px;color:#fff;pointer-events:none}@media (max-width: 768px){.App{padding:1px}}.game-container{display:flex;gap:20px;max-width:1400px;margin:0 auto;align-items:flex-start}.side-panel{flex:0 0 350px;background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:12px;padding:20px;box-shadow:0 8px 32px #0000004d;margin-left:3%}.board-container{flex:1;display:flex;justify-content:center;margin:0 2.5%;position:relative;flex-direction:column;align-items:center;gap:0}.mobile-bottom-panel{display:none}@media (max-width: 768px){.side-panel{display:none!important}.mobile-bottom-panel{display:block;position:fixed;bottom:0;left:0;right:0;z-index:1000;background:linear-gradient(to top,#1a202c 0%,#1a202c 95%,transparent 100%);box-shadow:0 -4px 20px #00000080}}.board{display:inline-block;background:#8b4513;padding:20px;border-radius:12px;box-shadow:0 8px 32px #0009;transition:box-shadow .3s ease}.board.player1-turn{box-shadow:inset 0 0 0 4px #3b82f6cc,0 8px 32px #0009,0 0 30px #3b82f666}.board.player2-turn{box-shadow:inset 0 0 0 4px #ef4444cc,0 8px 32px #0009,0 0 30px #ef444466}.board-row{display:flex}.square{width:60px;height:60px;display:flex;align-items:center;justify-content:center;border:1px solid #444;position:relative;cursor:pointer;background:#90ee90;transition:all .2s}.square.dark{background:#228b22}.square:hover{filter:brightness(1.2)}.square.selected{box-shadow:inset 0 0 0 4px #ff0;animation:pulse 1s infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.square-label{position:absolute;top:2px;right:2px;font-size:8px;color:#0000004d;font-weight:700;z-index:5}.being-relocated{opacity:.3;background:#ffff004d!important}.square.opponent-move-highlight{position:relative;z-index:20;overflow:hidden;outline:3px solid rgba(255,215,0,.85);outline-offset:-3px}.square.opponent-move-highlight:after{content:"";position:absolute;top:3px;right:3px;bottom:3px;left:3px;border-radius:4px;background:linear-gradient(135deg,#ffd7001f,#ffd7000f,#ffd7001f);box-shadow:inset 0 0 12px #ffd70059,inset 0 0 4px #ffffff40;opacity:0;animation:opponentMoveFrameGlow 2.2s ease-out forwards;pointer-events:none}.square.opponent-move-highlight:before{content:"";position:absolute;top:-5px;right:-5px;bottom:-5px;left:-5px;border-radius:8px;box-shadow:0 0 18px #ffd7008c,0 0 32px #ffd70040;opacity:0;animation:opponentMoveOuterGlow 2.2s ease-out forwards;pointer-events:none}@keyframes opponentMoveFrameGlow{0%{opacity:0;filter:brightness(1)}20%{opacity:1;filter:brightness(1.12)}60%{opacity:.9}to{opacity:0;filter:brightness(1)}}@keyframes opponentMoveOuterGlow{0%{opacity:0;transform:scale(.96)}30%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1)}}.piece{font-size:42px;-webkit-user-select:none;user-select:none;z-index:1;position:relative;display:flex;align-items:center;justify-content:center}.player-1{color:#06f;text-shadow:2px 2px 4px rgba(0,0,0,.9)}.player-2{color:red;text-shadow:2px 2px 4px rgba(0,0,0,.9)}.ball{position:absolute;bottom:5px;right:5px;font-size:18px;z-index:2;animation:bounce .5s infinite alternate}@keyframes bounce{0%{transform:translateY(0)}to{transform:translateY(-3px)}}.position-indicator{position:absolute;bottom:2px;left:2px;font-size:8px;font-weight:700;padding:1px 3px;border-radius:2px;background:#000000bf;color:#fff;text-shadow:none;border:1px solid rgba(255,255,255,.3);font-family:Courier New,monospace;letter-spacing:-.5px;line-height:1;z-index:10;box-shadow:0 1px 2px #00000080}.position-GK{background:linear-gradient(135deg,gold,orange);color:#000;border-color:gold;font-weight:900}.position-D{background:linear-gradient(135deg,#4299e1,#2b6cb0);border-color:#4299e1}.position-M{background:linear-gradient(135deg,#48bb78,#2f855a);border-color:#48bb78}.position-A{background:linear-gradient(135deg,#f56565,#c53030);border-color:#f56565}@media (max-width: 768px){.piece{font-size:36px!important}.ball{font-size:13px!important;bottom:3px!important;right:3px!important}.position-indicator{font-size:8px!important;padding:1px 2px!important;bottom:4px!important;left:1px!important}@keyframes bounce{0%{transform:translateY(0)}to{transform:translateY(-2px)}}}@media (max-width: 480px){.piece{font-size:28px}.player-1,.player-2{text-shadow:1px 1px 3px rgba(0,0,0,.7)}.ball{font-size:12px;bottom:2px;right:2px}.position-indicator{font-size:6px;padding:1px 2px;bottom:1px;left:1px;border-radius:1px}}@media (max-width: 360px){.piece{font-size:24px}.ball{font-size:10px;bottom:2px;right:2px}.position-indicator{font-size:5px;padding:0 2px}}@media (max-width: 900px) and (orientation: landscape){.piece{font-size:32px}.ball{font-size:13px;bottom:3px;right:3px}.position-indicator{font-size:6px;padding:1px 2px}}@media (min-width: 769px) and (max-width: 1024px){.piece{font-size:40px}.ball{font-size:16px;bottom:4px;right:4px}.position-indicator{font-size:7px;padding:1px 3px}}.square.valid-move{box-shadow:inset 0 0 0 3px #0f0;background:#0f06!important}.square.valid-pass{box-shadow:inset 0 0 0 3px #08f;background:#08f6!important}.square.valid-kick{box-shadow:inset 0 0 0 3px #f80;background:#ff880080!important;animation:kickPulse 1s infinite}@keyframes kickPulse{0%,to{box-shadow:inset 0 0 0 3px #f80}50%{box-shadow:inset 0 0 0 5px #f80}}.square.valid-tackle{box-shadow:inset 0 0 0 4px red;background:#ff000080!important;animation:tackleGlow .8s infinite}@keyframes tackleGlow{0%,to{box-shadow:inset 0 0 0 4px red;filter:brightness(1)}50%{box-shadow:inset 0 0 0 6px #f33;filter:brightness(1.3)}}.square.doublepass-teammate{box-shadow:inset 0 0 0 4px #f0f;animation:glow 1s infinite}@keyframes glow{0%,to{filter:brightness(1)}50%{filter:brightness(1.5)}}.square.doublepass-destination{box-shadow:inset 0 0 0 4px #0ff;background:#0ff6!important}.goal-square{position:relative;box-shadow:inset 0 0 0 3px gold!important}.goal-square:before{content:"🥅";position:absolute;top:2px;left:2px;font-size:12px;opacity:.6;z-index:1}.goal-area{display:flex;align-items:center;justify-content:center;width:80%;max-width:210px;height:60px;position:relative}.goal-top{margin-bottom:-10px;z-index:1}.goal-bottom{margin-top:-10px;z-index:1}.goal-post{width:20px;height:60px;background:linear-gradient(to bottom,#fff,#ccc);border:2px solid #666;border-radius:4px;box-shadow:2px 2px 4px #0000004d}.goal-post.left{border-top-left-radius:8px;border-bottom-left-radius:8px}.goal-post.right{border-top-right-radius:8px;border-bottom-right-radius:8px}.goal-net{flex:1;height:100%;background:repeating-linear-gradient(0deg,rgba(255,255,255,.1) 0px,rgba(255,255,255,.1) 2px,transparent 2px,transparent 10px),repeating-linear-gradient(90deg,rgba(255,255,255,.1) 0px,rgba(255,255,255,.1) 2px,transparent 2px,transparent 10px);border:3px solid #666;border-left:none;border-right:none;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden}.goal-top .goal-net{background-color:#ff000026;border-bottom:none;border-top:3px solid #ff0000}.goal-bottom .goal-net{background-color:#0064ff26;border-top:none;border-bottom:3px solid #0066ff;flex-direction:column-reverse}.goal-label{font-weight:700;font-size:12px;text-shadow:1px 1px 2px rgba(0,0,0,.5);margin-bottom:2px}.goal-bottom .goal-label{color:#06f;margin-bottom:0;margin-top:2px}.goal-top .goal-label{color:red}.goal-squares{display:flex;gap:8px;font-size:10px;font-weight:700;opacity:.8}.goal-squares span{background:#0000004d;padding:2px 6px;border-radius:3px}.game-panel{position:relative;height:100%}.game-panel h2{margin:0 0 15px;font-size:28px}.score{display:flex;justify-content:center;align-items:center;gap:15px;margin:20px 0}.score-number{font-size:48px;font-weight:700;text-shadow:2px 2px 4px rgba(0,0,0,.5)}.score-separator{font-size:32px;opacity:.6}.turn-display{display:flex;justify-content:center;align-items:center;margin:10px 0 20px;padding:8px 16px;background:linear-gradient(135deg,#4299e126,#3182ce26);border:2px solid #4299e1;border-radius:8px;transition:all .3s ease}.turn-display.last-minutes{background:linear-gradient(135deg,#ef444433,#dc262633);border:2px solid #ef4444;animation:shake .5s ease-in-out infinite,pulse 1.5s ease-in-out infinite}@keyframes shake{0%,to{transform:translate(0)}20%,60%{transform:translate(-2px)}40%,80%{transform:translate(2px)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.8}}.turn-time{font-size:18px;font-weight:700;color:#90cdf4;letter-spacing:1px;transition:color .3s ease}.turn-display.last-minutes .turn-time{color:#fca5a5;text-shadow:0 0 10px rgba(239,68,68,.5)}.last-move{background:linear-gradient(135deg,#4299e11a,#3182ce1a);border:2px solid #4299e1;border-radius:8px;padding:12px;margin-top:15px;text-align:left;position:relative;top:.5%;overflow-anchor:none;animation:slideIn .3s ease}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes celebration{0%,to{transform:scale(1)}25%{transform:scale(1.05)}50%{transform:scale(1.1)}75%{transform:scale(1.05)}}.last-move-content{display:flex;flex-direction:column;gap:8px;font-size:clamp(18px,6vw,24px);align-items:center;text-align:center}.celebration-header,.celebration-footer{font-size:clamp(18px,5vw,30px);letter-spacing:clamp(2px,1.5vw,8px)}.celebration-text{font-size:clamp(14px,4vw,18px);font-weight:700;color:#48bb78;text-shadow:0 0 10px rgba(72,187,120,.5)}.goal-icon{font-size:clamp(20px,6vw,32px);margin-bottom:clamp(2px,1vw,5px)}.goal-text{font-size:clamp(13px,3.5vw,16px);font-weight:600;color:#48bb78}.combat-header{font-size:clamp(14px,4vw,18px);font-weight:700;color:#f6ad55;margin-bottom:clamp(3px,1vw,5px)}.combat-line{font-size:clamp(13px,3.8vw,18px);color:#cbd5e0;margin:clamp(2px,.8vw,3px) 0}.action-icon{font-size:clamp(16px,4.5vw,20px);margin-right:clamp(4px,1.5vw,8px);display:inline-block}.last-move-content>span{display:flex;align-items:center;gap:8px}.action-panel{margin-top:20px}.action-panel h3{margin:0 0 10px;font-size:16px}.doublepass-indicator{background:#ff00ff4d;padding:10px;border-radius:6px;margin-bottom:10px;border:2px solid #ff00ff;font-weight:700}.doublepass-indicator p{margin:5px 0 0;font-size:12px;font-weight:400}.action-button{width:100%;padding:12px;margin:5px 0;font-size:16px;font-weight:700;border:none;border-radius:8px;cursor:pointer;transition:all .2s;color:#fff;background:#666}.action-button:hover{transform:translate(5px)}.action-button.selected{background:#4caf50;box-shadow:0 4px 12px #4caf5080}.action-button.cancel{background:#f44336;margin-top:10px}.action-button:disabled{opacity:.5;cursor:not-allowed}.action-button:disabled:hover{transform:none}@media (max-width: 768px){.mobile-game-panel{padding:0;max-height:40vh;display:flex;flex-direction:column}.action-icon{display:none!important}.mobile-game-top-banner{position:fixed;top:0;left:0;right:0;z-index:999;background:linear-gradient(to bottom,#1a202c 0%,#1a202c 90%,transparent 100%)}.mobile-score-bar{display:flex;justify-content:center;align-items:center;padding:0 16px;gap:2px;background:#0000004d;flex-wrap:wrap}.mobile-score-player{position:absolute;left:90%!important;font-size:16px;font-size:12px;font-weight:600;color:#90cdf4;padding:2px 6px;border-radius:6px;border:2px solid transparent;box-shadow:0 0 8px #0000004d;background:#4299e12e}.mobile-score-numbers{display:flex;align-items:center;gap:8px}.mobile-score-number{font-size:22px;font-weight:700;text-shadow:2px 2px 4px rgba(0,0,0,.5)}.mobile-score-separator{font-size:20px;opacity:.6}.mobile-turn-display{width:100%;display:flex;justify-content:center;padding:4px 8px;background:linear-gradient(135deg,#4299e133,#3182ce33);border-top:1px solid rgba(66,153,225,.3);border-bottom:1px solid rgba(66,153,225,.3);transition:all .3s ease}.mobile-turn-inline{position:absolute;left:1%;font-size:12px;font-weight:600;color:#90cdf4;padding:2px 6px;border-radius:6px;background:#4299e12e;white-space:nowrap;display:flex;align-items:center;gap:4px}.mobile-turn-inline.last-minutes{background:linear-gradient(135deg,#ef444440,#dc262640);color:#fca5a5;border-top:1px solid rgba(239,68,68,.5);box-shadow:0 0 8px #ef444473;border-bottom:1px solid rgba(239,68,68,.5);animation:shake .9s ease-in-out infinite,pulse 1.5s ease-in-out infinite}.mobile-turn-time{font-size:14px;font-weight:700;color:#90cdf4;letter-spacing:.5px;transition:color .3s ease}.mobile-turn-display.last-minutes .mobile-turn-time{color:#fca5a5;text-shadow:0 0 8px rgba(239,68,68,.5)}.mobile-last-move-container{max-height:0;overflow:hidden;transition:max-height .3s ease}.mobile-last-move-container.expanded{max-height:200px;padding-bottom:6px}.mobile-last-move-toggle{display:flex;justify-content:center;align-items:center;padding:3px;background:#4299e133;border:none;border-top:1px solid rgba(66,153,225,.3);color:#90cdf4;font-size:11px;cursor:pointer;gap:4px;width:100%}.mobile-last-move-content{padding:3px 30px;background:#4299e11a;border-top:2px solid #4299e1}.last-move-content{font-size:16px;gap:2px;padding-bottom:6px}.mobile-action-bar{position:fixed;bottom:env(safe-area-inset-bottom);left:0;right:0;z-index:1200;padding:10px 12px 14px;background:transparent;box-shadow:0 20px 60px #00000080;width:100%;border-radius:15px;animation:mobileBarSlideUp .25s ease;margin-top:auto}@keyframes mobileBarSlideUp{0%{transform:translateY(100%)}to{transform:translateY(0)}}.mobile-doublepass-indicator{background:#ff00ff4d;padding:8px 12px;border-radius:8px;margin-bottom:10px;border:2px solid #ff00ff;font-weight:700;font-size:13px;text-align:center}.mobile-action-buttons{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:6px}.mobile-action-button{padding:8px 6px;font-size:13px;font-weight:600;border-radius:8px;border:none;min-height:36px;background:linear-gradient(135deg,#4a5568,#2d3748);color:#fff;box-shadow:0 1px 6px #00000059}.mobile-action-button.selected{background:linear-gradient(135deg,#48bb78,#38a169);box-shadow:0 0 10px #48bb7880}.mobile-action-button.cancel{background:linear-gradient(135deg,#f56565,#e53e3e)}.game-container{display:flex;flex-direction:column;min-height:100vh;height:auto;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}.mobile-action-button:disabled{opacity:.5;cursor:not-allowed}.game-container.mobile-with-top-banner .board-container{margin-top:80px}.game-container.mobile-with-bottom-panel .board-container{margin-bottom:20px;flex-shrink:0}.board-container{padding-top:0!important;padding-bottom:125px!important}}.rules-panel{background:linear-gradient(135deg,#1a202c,#2d3748);border:2px solid #4a5568;border-radius:12px;padding:20px;color:#e2e8f0;max-height:85vh;overflow-y:auto;box-shadow:0 4px 12px #0003;min-width:600px}.rules-section-header{cursor:pointer;-webkit-user-select:none;user-select:none;display:flex;align-items:center;gap:10px;transition:color .2s ease}.rules-section-header:hover{color:#90cdf4}.expand-icon{font-size:14px;display:inline-block;width:20px}.rules-content{margin-top:12px;animation:slideDown .3s ease}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.rules-panel::-webkit-scrollbar{width:8px}.rules-panel::-webkit-scrollbar-track{background:#2d3748;border-radius:4px}.rules-panel::-webkit-scrollbar-thumb{background:#4a5568;border-radius:4px}.rules-panel::-webkit-scrollbar-thumb:hover{background:#718096}.rules-title{font-size:24px;color:#fff;margin:0 0 20px;text-align:center;border-bottom:2px solid #4a5568;padding-bottom:12px}.rules-section{margin-bottom:20px;padding:15px;background:#0003;border-radius:8px;border-left:4px solid #4299e1}.rules-section h3{font-size:18px;color:#63b3ed;margin:0 0 12px}.rules-section p{margin:8px 0;line-height:1.6;color:#cbd5e0}.rules-section ul{margin:10px 0;padding-left:20px}.rules-section li{margin:8px 0;line-height:1.6;color:#cbd5e0}.rules-section strong{color:#90cdf4;font-weight:600}.rules-tip{background:#48bb781a;border:1px solid #48bb78;border-radius:6px;padding:8px 12px;margin-top:10px;font-size:14px;color:#68d391}.rules-highlight{background:#ed89361a;border:1px solid #ed8936;border-radius:6px;padding:8px 12px;margin-top:10px;font-weight:600;color:#f6ad55;text-align:center}.piece-info{display:flex;flex-direction:column;gap:8px;margin-top:10px}.piece-info div{padding:8px 12px;background:#0000004d;border-radius:6px;display:flex;align-items:center;gap:10px}.piece-icon{font-size:20px;width:24px;text-align:center}.stats-example{background:#0000004d;border-radius:6px;padding:12px;margin-top:10px;font-size:14px}.stats-example p{margin:4px 0}@media (max-width: 768px){.rules-panel{min-width:auto;width:100%;max-width:100%;padding:15px;max-height:80vh;border-radius:12px 12px 0 0}.rules-title{font-size:20px;margin-bottom:15px;padding-bottom:10px}.rules-section{margin-bottom:15px;padding:12px;border-left-width:3px}.rules-section h3{font-size:16px;margin-bottom:10px}.rules-section-header{gap:8px}.expand-icon{font-size:12px;width:16px}.rules-section p,.rules-section li{font-size:14px;line-height:1.5;margin:6px 0}.rules-section ul{padding-left:18px;margin:8px 0}.rules-tip{font-size:12px;padding:6px 10px;margin-top:8px}.rules-highlight{font-size:13px;padding:6px 10px;margin-top:8px}.piece-info{gap:6px;margin-top:8px}.piece-info div{padding:6px 10px;gap:8px;font-size:13px}.piece-icon{font-size:18px;width:20px}.stats-example{padding:10px;margin-top:8px;font-size:12px}.stats-example p{margin:3px 0}.rules-panel::-webkit-scrollbar{width:4px}}@media (max-width: 480px){.rules-panel{padding:12px;max-height:75vh}.rules-title{font-size:18px;margin-bottom:12px;padding-bottom:8px}.rules-section{margin-bottom:12px;padding:10px}.rules-section h3{font-size:15px;margin-bottom:8px}.rules-section p,.rules-section li{font-size:13px;line-height:1.4}.rules-tip,.rules-highlight{font-size:11px;padding:5px 8px}.piece-info div{padding:5px 8px;font-size:12px}.piece-icon{font-size:16px;width:18px}.stats-example{padding:8px;font-size:11px}}@media (max-width: 900px) and (orientation: landscape){.rules-panel{max-height:70vh;padding:12px}.rules-title{font-size:16px;margin-bottom:10px}.rules-section{padding:8px;margin-bottom:10px}.rules-section h3{font-size:14px;margin-bottom:6px}.rules-section p,.rules-section li{font-size:12px;margin:4px 0}}@media (min-width: 769px) and (max-width: 1024px){.rules-panel{min-width:auto;width:100%;max-width:700px;padding:18px}.rules-title{font-size:22px}.rules-section h3{font-size:17px}.rules-section p,.rules-section li{font-size:15px}}@media (max-width: 768px){.rules-section-header{padding:2px;margin:-8px;border-radius:6px;-webkit-tap-highlight-color:transparent}.rules-section-header:active{background:#90cdf41a}}.rules-indicator{position:fixed;left:1vw;top:40%;transform:translateY(-50%);z-index:1200;width:10px;background:linear-gradient(135deg,#2b6cb0,#2c5282);color:#fff;padding:10px 8px;border-radius:0 14px 14px 0;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px;font-weight:600;box-shadow:2px 4px 12px #0006;cursor:pointer;-webkit-user-select:none;user-select:none}.rules-indicator-icon{font-size:16px}.rules-indicator:active{transform:translateY(-50%) scale(.96)}.rules-indicator-text{writing-mode:vertical-rl;text-orientation:upright;letter-spacing:2px;margin-top:2px;font-size:10px}.rules-panel-mobile{position:fixed;top:0;left:0;height:100vh;width:80vw;max-width:360px;background:linear-gradient(135deg,#1a202c,#2d3748);z-index:1300;transform:translate(-100%);transition:transform .35s cubic-bezier(.4,0,.2,1);box-shadow:4px 0 20px #0009;padding:16px;overflow-y:auto}.rules-panel-mobile.open{transform:translate(0)}.rules-panel-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000008c;z-index:1250;opacity:0;pointer-events:none;transition:opacity .3s ease}.rules-panel-overlay.open{opacity:1;pointer-events:auto}.rules-close-button{position:absolute;top:0;right:10px;background:none;border:none;color:#fff;font-size:22px;padding:8px;margin:auto;cursor:pointer}.rules-desktop-wrapper{position:sticky;top:20px;align-self:flex-start}.game-over-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .3s ease}.game-over-card{background:linear-gradient(135deg,#1a202c,#2d3748);border:3px solid #4a5568;border-radius:20px;padding:50px 60px;text-align:center;box-shadow:0 20px 60px #00000080;animation:slideUp .5s ease;max-width:500px}.trophy-icon{font-size:80px;margin-bottom:20px;animation:trophyBounce 1s ease infinite}@keyframes trophyBounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.game-over-title{font-size:42px;color:#fff;margin:0 0 15px;text-shadow:2px 2px 8px rgba(0,0,0,.3)}.winner-announcement{font-size:28px;color:#48bb78;margin:0 0 30px;font-weight:600}.winner-announcement.draw{color:#fbbf24}.final-score{margin:30px 0;padding:25px;background:#0000004d;border-radius:12px;border:2px solid #4a5568}.score-label{display:block;font-size:14px;color:#a0aec0;text-transform:uppercase;letter-spacing:1px;margin-bottom:10px}.score-numbers{display:flex;align-items:center;justify-content:center;gap:20px;font-size:48px;font-weight:700;color:#fff}.score-dash{color:#718096}.new-game-button{padding:16px 40px;background:linear-gradient(135deg,#48bb78,#38a169);color:#fff;border:2px solid #2f855a;border-radius:12px;font-size:18px;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px #48bb784d;display:inline-flex;align-items:center;gap:10px;margin-top:20px}.new-game-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #48bb7866;background:linear-gradient(135deg,#38a169,#48bb78)}.new-game-button:active{transform:translateY(0)}.new-game-button .button-icon{font-size:20px}.online-game-header{display:flex;align-items:center;justify-content:center;gap:8px;margin:15px 0;padding:10px;background:#ffffff1a;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:12px;box-shadow:0 4px 16px #0003}.player-badge{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:10px 15px;background:#0000004d;border-radius:10px;border:2px solid transparent;transition:all .3s ease;min-width:160px;min-height:85px}.player-badge.active{border-color:#48bb78;background:#48bb7833;box-shadow:0 0 20px #48bb784d}.badge-label{font-size:12px;text-transform:uppercase;letter-spacing:1px;opacity:.7;color:#a0aec0}.badge-name{font-size:20px;font-weight:700;color:#fff;text-align:center}.vs-badge{font-size:20px;font-weight:700;color:#f6ad55;text-shadow:0 0 10px rgba(246,173,85,.5);flex-shrink:0;margin:0 2px}.turn-indicator{font-size:11px;margin-top:3px;padding:3px 6px;background:#48bb784d;border-radius:12px;color:#68d391;font-weight:600}@media (max-width: 768px){.online-game-header{display:flex!important;flex-direction:row!important;align-items:center;justify-content:center;flex-wrap:nowrap;gap:0px!important;width:100%;max-width:100%;padding:8px 6px!important;margin:8px 0!important}.player-badge{flex:1 1 0;min-width:0;min-height:65px;padding:2px 1px!important;gap:0;margin-left:20px!important;margin-right:20px!important}.vs-badge{flex:0 0 auto;font-size:14px;margin:0!important;padding:0 3px!important;white-space:nowrap}.badge-name{font-size:12px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.badge-label{font-size:9px}.turn-indicator{font-size:9px;padding:2px 4px;margin-top:2px}}@media (max-width: 1400px){.game-container{flex-direction:column}.rules-panel{max-height:none;margin-top:20px}}@media (max-width: 1200px){.game-container{flex-direction:column;align-items:center}.side-panel{width:100%;max-width:500px;margin-left:0}.board-container{margin-left:0}}@media (max-width: 768px){.square{width:43px!important;height:43px!important}.goal-square{position:relative;box-shadow:inset 0 0 0 3px gold!important}.goal-area{display:flex;align-items:center;justify-content:center;width:80%;max-width:145px;height:40px;position:relative}.goal-top{margin-bottom:-10px;z-index:1}.goal-bottom{margin-top:-10px;z-index:1}.goal-post{width:12px;height:40px;background:linear-gradient(to bottom,#fff,#ccc);border:2px solid #666;border-radius:4px;box-shadow:2px 2px 4px #0000004d}.goal-post.left{border-top-left-radius:8px;border-bottom-left-radius:8px}.goal-post.right{border-top-right-radius:8px;border-bottom-right-radius:8px}.rules-panel{min-width:auto;padding:15px}.game-over-card{padding:30px 40px;margin:20px}.online-game-header{flex-direction:column;gap:10px;padding:10px;margin-bottom:15px}.player-badge,.player-badge.opponent{width:100%;padding:12px}.vs-badge{font-size:16px;padding:8px}.board-container{margin-top:15px;width:100%}h1{font-size:22px;margin:15px 0}}@media (max-width: 480px){.square{width:40px;height:40px}.piece{font-size:28px}.board{padding:10px}h1{font-size:20px;margin:10px 0}.score-number{font-size:36px}.side-panel{padding:12px;margin:0 8px;width:calc(100% - 16px)}.online-game-header{padding:8px;margin-bottom:12px}.player-badge,.player-badge.opponent{padding:10px;font-size:14px}}@media (max-width: 900px) and (orientation: landscape){.game-container{flex-direction:row;align-items:flex-start;gap:10px;padding:10px}.side-panel{flex:0 0 280px;max-width:280px;padding:12px;margin:0}.board-container{flex:1;margin:0}.square{width:45px;height:45px}.piece{font-size:32px}h1{font-size:18px;margin:8px 0}.online-game-header{flex-direction:row;gap:8px;padding:6px;margin-bottom:10px}.player-badge,.player-badge.opponent{padding:8px;font-size:12px}.vs-badge{font-size:14px;padding:6px}}@media (min-width: 769px) and (max-width: 1024px){.game-container{gap:15px}.side-panel{max-width:400px;padding:18px}.square{width:55px;height:55px}.piece{font-size:40px}h1{font-size:26px}}@media (max-width: 360px){.square{width:36px;height:36px}.piece{font-size:24px}h1{font-size:18px}.side-panel{padding:10px;margin:0 5px;width:calc(100% - 10px)}.score-number{font-size:32px}}.user-settings-container{min-height:100vh;background:linear-gradient(135deg,#2c5f2d,#1a3d1b);display:flex;align-items:center;justify-content:center;padding:20px}.user-settings-card{background:linear-gradient(135deg,#1a202c,#2d3748);border:3px solid #4a5568;border-radius:20px;padding:40px;max-width:900px;width:100%;box-shadow:0 20px 60px #00000080;animation:slideUp .6s ease;position:relative}@keyframes slideUp{0%{transform:translateY(50px);opacity:0}to{transform:translateY(0);opacity:1}}.back-button{position:absolute;top:20px;left:20px;color:#90cdf4;cursor:pointer;font-size:16px;font-weight:600;padding:8px 16px;border-radius:8px;transition:all .2s;background:none;border:none}.back-button:hover{background:#90cdf41a;transform:translate(-3px)}.settings-title{text-align:center;color:#fff;font-size:36px;margin:0 0 30px;text-shadow:2px 2px 8px rgba(0,0,0,.3)}.settings-section{position:relative;background:#0000004d;border:2px solid #4a5568;border-radius:16px;padding:25px;margin-bottom:25px}.settings-section.coming-soon{opacity:.6}.section-title{color:#fff;font-size:24px;margin:0 0 15px;font-weight:700;display:flex;align-items:center;gap:10px}.section-description{color:#a0aec0;font-size:14px;margin:0 0 20px}.profile-info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:15px}.info-item{background:#90cdf41a;border:2px solid rgba(144,205,244,.3);border-radius:12px;padding:15px;display:flex;flex-direction:column;gap:8px}.info-label{color:#90cdf4;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.info-value{color:#fff;font-size:18px;font-weight:700}.info-value.ranking{color:#f59e0b;font-size:24px}.color-selector-group{margin-bottom:25px}.color-label{display:flex;align-items:center;justify-content:space-between;color:#fff;font-size:18px;font-weight:600;margin-bottom:12px}.color-name{font-size:16px;font-weight:700}.color-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(70px,1fr));gap:12px}.color-option{width:100%;aspect-ratio:1;border:2px solid transparent;border-color:#aaa;border-radius:12px;cursor:pointer;transition:all .3s ease;position:relative;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px #000c}.color-option:hover:not(.disabled){transform:scale(1.1);box-shadow:0 6px 20px #00000080}.color-option.selected{border-color:#fff;box-shadow:0 0 20px #ffffff80}.color-option.disabled{cursor:not-allowed;filter:grayscale(50%)}.checkmark{color:#fff;font-size:32px;font-weight:700;text-shadow:0 2px 8px rgba(0,0,0,.8)}.color-preview{margin:25px 0}.preview-box{display:flex;align-items:center;justify-content:center;gap:20px}.preview-square{width:120px;height:120px;border-radius:16px;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px #0006;border:3px solid rgba(255,255,255,.3)}.preview-square span{color:#fff;font-size:16px;font-weight:700;text-shadow:0 2px 8px rgba(0,0,0,.8)}.preview-vs{color:#fff;font-size:24px;font-weight:900}.lineup-status{margin:20px 0}.lineup-status-item{display:flex;align-items:center;gap:12px;padding:15px;border-radius:12px;font-weight:600;font-size:14px}.lineup-status-item.active{background:#48bb7826;border:2px solid rgba(72,187,120,.4);color:#48bb78}.lineup-status-item.inactive{background:#a0aec026;border:2px solid rgba(160,174,192,.3);color:#cbd5e0}.status-icon{font-size:20px}.status-text{flex:1}.edit-lineup-button{width:100%;padding:14px;background:linear-gradient(135deg,#4299e1,#3182ce);color:#fff;border:none;border-radius:12px;font-size:16px;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px #4299e166;display:flex;align-items:center;justify-content:center;gap:10px}.edit-lineup-button:hover{transform:translateY(-2px);box-shadow:0 6px 20px #4299e199}.edit-lineup-button:active{transform:translateY(0)}.save-button{width:100%;padding:16px;background:linear-gradient(135deg,#48bb78,#38a169);color:#fff;border:none;border-radius:12px;font-size:18px;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px #48bb7866;display:flex;align-items:center;justify-content:center;gap:10px}.save-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #48bb7899}.save-button:disabled{opacity:.5;cursor:not-allowed;transform:none}.error-message{background:#f5656526;border:2px solid rgba(245,101,101,.4);border-radius:10px;padding:14px;color:#f56565;font-size:14px;font-weight:600;margin-bottom:20px;text-align:center}.success-message{background:#48bb7826;border:2px solid rgba(72,187,120,.4);border-radius:10px;padding:14px;color:#48bb78;font-size:14px;font-weight:600;margin-bottom:20px;text-align:center}.coming-soon-badge{position:absolute;top:10;right:-35px;background:linear-gradient(45deg,#f59e0b,#d97706);color:#fff;padding:10px 14px;border-radius:12px;font-size:14px;font-weight:700;text-align:center;transform:rotate(35deg);box-shadow:0 4px 12px #f59e0b66;pointer-events:none}.loading-state{display:flex;flex-direction:column;align-items:center;gap:15px;padding:20px;color:#a0aec0}@media (max-width: 768px){.user-settings-card{padding:15px 12px;margin-top:20px}.settings-title{font-size:24px;margin-top:40px}.section-title{font-size:18px}.profile-info-grid{grid-template-columns:1fr}.color-options{grid-template-columns:repeat(4,1fr);gap:8px}.preview-square{width:80px;height:80px}.preview-square span{font-size:12px}.preview-vs{font-size:18px}.back-button{position:fixed;top:20px;left:20px;z-index:100}}.zone-defense{position:relative}.zone-defense:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:#0064ff40;pointer-events:none;border:2px solid rgba(0,100,255,.5)}.zone-midfield{position:relative}.zone-midfield:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:#ffff0040;pointer-events:none;border:2px solid rgba(255,255,0,.5)}.zone-attack{position:relative}.zone-attack:after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:#ff000040;pointer-events:none;border:2px solid rgba(255,0,0,.5)}.setup-panel h2{margin:0 0 5px;font-size:28px}.setup-panel h3{margin:0 0 10px;font-size:18px;color:#ffeb3b}.setup-instruction{font-size:14px;margin-bottom:15px;opacity:.9}.piece-selector{display:flex;flex-direction:column;gap:8px;margin:20px 0}.piece-button{display:flex;align-items:center;gap:10px;padding:12px;background:#fff;border:3px solid #444;border-radius:8px;cursor:pointer;transition:all .2s;color:#000}.piece-button:hover{transform:translate(5px);background:#f0f0f0}.piece-button.selected{background:#4caf50;color:#fff;border-color:#2e7d32}.piece-symbol{font-size:24px;width:30px;text-align:center}.piece-name{flex:1;text-align:left;font-weight:600;text-transform:capitalize}.piece-count{font-weight:700;background:#0003;padding:2px 8px;border-radius:12px}.setup-info{margin-top:20px;background:#0003;padding:15px;border-radius:8px}.setup-info h4{margin:0 0 10px;font-size:14px}.zone-rule{display:flex;align-items:center;gap:8px;margin:8px 0;font-size:13px;padding:8px;background:#0003;border-radius:6px;border-left:4px solid transparent}.formation-rules-content .zone-rule{display:flex;align-items:center;gap:10px;padding:10px 12px;margin:8px 0;font-size:13px;border-radius:6px;background:#00000040}.formation-rules-content .zone-attack-label{color:#f66;text-shadow:0 0 4px rgba(255,102,102,.8)}.formation-rules-content .zone-midfield-label{color:#ff6;text-shadow:0 0 4px rgba(255,255,102,.8)}.formation-rules-content .zone-defense-label{color:#68f;text-shadow:0 0 4px rgba(102,136,255,.8)}.formation-rules-content .zone-rule.invalid{border-left:4px solid #ff4444;background:#ff444426}.zone-defense-label{color:#68f;font-size:24px;text-shadow:0 0 4px rgba(102,136,255,.8)}.zone-midfield-label{color:#ff6;font-size:24px;text-shadow:0 0 4px rgba(255,255,102,.8)}.zone-attack-label{color:#f66;font-size:24px;text-shadow:0 0 4px rgba(255,102,102,.8)}.zone-rule.invalid{color:#f44;font-weight:700}.setup-tip{margin-top:15px;padding:10px;background:#ffeb3b33;border-left:3px solid #ffeb3b;border-radius:4px;font-size:13px}.generate-lineup-button,.lineup-ready-button{width:100%;padding:14px 20px;margin-bottom:15px;background:linear-gradient(135deg,#2d3748,#1a202c);color:#fff;border:2px solid;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 2px 4px #0000001a;display:flex;align-items:center;justify-content:center;gap:8px}.generate-lineup-button:hover,.lineup-ready-button:hover{transform:translateY(-1px);box-shadow:0 4px 8px #0003;background:linear-gradient(135deg,#1a202c,#2d3748)}.generate-lineup-button:active,.lineup-ready-button:active{transform:translateY(0)}.generate-lineup-button:disabled,.lineup-ready-button:disabled{opacity:.5;cursor:not-allowed}.generate-lineup-button .button-icon,.lineup-ready-button .button-icon{font-size:18px}.lineup-ready-button{margin-top:15px;margin-bottom:0}.formation-rules-indicator,.formation-rules-drawer,.formation-rules-overlay{display:none}@media (max-width: 768px){.setup-panel h3,.setup-instruction,.setup-tip{display:none}.formation-rules-indicator{display:flex;flex-direction:column;align-items:center;position:fixed!important;left:1vw!important;top:12vh!important;width:16px;transform:translateY(-50%);z-index:9999;background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;padding:10px 2px;border-radius:0 12px 12px 0;box-shadow:4px 0 15px #00000080}.formation-rules-indicator:active{transform:translateY(-50%) scale(.96)}.formation-rules-indicator-icon{font-size:12px!important;margin-bottom:2px}.formation-rules-indicator-text{writing-mode:vertical-rl;text-orientation:upright;font-size:9px}.formation-rules-drawer{display:block;position:fixed!important;top:0;left:0;height:48vh;width:85vw;max-width:300px;background:#1a202c;z-index:10000;transform:translate(-100%);transition:transform .3s cubic-bezier(0,0,.2,1);padding:10px;box-sizing:border-box;overflow-y:auto;border-radius:0 12px 12px 0}.formation-rules-drawer.open{transform:translate(0)!important}.formation-rules-drawer{transform:translate(calc(-100% - 24px))}.formation-rules-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding-bottom:12px;border-bottom:2px solid #4a5568}.formation-rules-title{font-size:20px;color:#f59e0b;font-weight:700}.formation-rules-close{background:none;border:none;color:#fff;font-size:28px;cursor:pointer;padding:0;line-height:1;width:32px;height:32px;display:flex;align-items:center;justify-content:center}.formation-rules-content .setup-info{margin-top:0;background:transparent;padding:0}.formation-rules-content h4{color:#90cdf4;margin-bottom:15px;font-size:16px}.formation-rules-content .zone-rule{display:flex;align-items:center;gap:12px;padding:12px;margin:10px 0;background:#0000004d;border-radius:8px}.formation-rules-content .zone-attack-label,.formation-rules-content .zone-midfield-label,.formation-rules-content .zone-defense-label{font-size:18px;line-height:1;display:inline-block}.formation-rules-content .zone-rule span:last-child{flex:1;font-size:14px;font-weight:500}.formation-rules-content .setup-tip-drawer{display:block;margin-top:10px;padding:5px;font-size:12px}.piece-selector{display:none!important}.piece-button{flex-direction:column!important;padding:4px 2px!important;min-height:55px!important;gap:2px!important;border-width:2px!important;border-radius:6px!important;justify-content:center!important;align-items:center!important}.piece-button:hover{transform:scale(1.05)}.piece-button:active{transform:scale(.98)}.piece-symbol{font-size:34px!important;width:auto!important;line-height:1!important;margin:0!important}.piece-name{display:none}.piece-count{font-size:15px;padding:4px 10px;background:#0000004d}.piece-button.selected .piece-count{background:#0006}.setup-panel .setup-info{display:none}.generate-lineup-button,.lineup-ready-button{padding:16px 20px;font-size:16px;border-radius:12px;margin-bottom:12px;min-height:52px}.generate-lineup-button .button-icon,.lineup-ready-button .button-icon{font-size:20px}.lineup-ready-button{margin-top:12px}}@media (max-width: 480px){.formation-rules-indicator{top:18%}.formation-rules-indicator-icon{font-size:16px}.formation-rules-drawer{max-width:280px;padding:16px}.piece-selector{gap:8px}.piece-button{padding:12px 8px;min-height:85px}.piece-symbol{font-size:30px}.piece-count{font-size:13px;padding:3px 8px}.generate-lineup-button,.lineup-ready-button{padding:14px 16px;font-size:15px;min-height:48px}}@media (max-width: 900px) and (orientation: landscape){.formation-rules-indicator{top:25%;padding:8px 5px}.formation-rules-drawer{max-width:280px;padding:15px}.formation-rules-header{margin-bottom:15px;padding-bottom:10px}.formation-rules-title{font-size:18px}.piece-selector{grid-template-columns:repeat(3,1fr);gap:8px}.piece-button{min-height:75px;padding:10px 6px}.piece-symbol{font-size:26px}.piece-count{font-size:12px}}@media (max-width: 768px){.mobile-setup-panel{position:fixed;padding:0;bottom:0;z-index:1200;width:105%;margin-top:auto}.mobile-setup-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.mobile-piece-scroll-container{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;margin:0 -12px;padding:4px 12px 6px}.mobile-piece-scroll-container::-webkit-scrollbar{height:6px}.mobile-piece-scroll-container::-webkit-scrollbar-track{background:#ffffff1a;border-radius:3px}.mobile-piece-scroll-container::-webkit-scrollbar-thumb{background:#ffffff4d;border-radius:3px}.mobile-piece-selector{display:flex;gap:4px;padding-bottom:4px}.mobile-piece-button{flex:0 0 45px!important;width:45px!important;height:65px!important;flex-direction:column!important;padding:4px!important;border-width:2px!important;gap:2px!important;justify-content:center;align-items:center;box-sizing:border-box;border:3px solid #444;border-radius:12px}.mobile-piece-button:active{transform:scale(.95)}.mobile-piece-button.selected{background:#4caf50;color:#fff;border-color:#2e7d32;box-shadow:0 4px 12px #4caf5066}.mobile-piece-symbol{font-size:32px;line-height:1}.mobile-piece-count{font-size:14px;font-weight:700;background:#00000026;padding:4px 8px;border-radius:12px}.mobile-piece-button.selected .mobile-piece-count{background:#00000040}.mobile-piece-symbol,.mobile-piece-count{display:block;text-align:center}.mobile-setup-actions{bottom:0;left:0;right:0;z-index:1200;display:flex;gap:5px;padding:4px 4px 10px;background:transparent;box-shadow:none;margin-top:auto}.mobile-setup-actions button{flex:1 1 0;max-width:100%;min-height:50px;border-radius:12px;font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:4px;transition:all .2s ease}.mobile-setup-actions .generate-lineup-button,.mobile-setup-actions .lineup-ready-button{width:auto!important;flex:1 1 0}.mobile-setup-bar{position:relative;left:0;right:0;z-index:1200;display:flex;flex-direction:column;gap:2px;padding:10px 12px 0;background:transparent;box-shadow:0 -6px 20px #00000059;-webkit-backdrop-filter:blur(1px);backdrop-filter:blur(1px)}.mobile-random-button{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.mobile-random-button:active{transform:scale(.97)}.mobile-confirm-button{background:linear-gradient(135deg,#48bb78,#38a169);color:#fff;min-height:relative!important;box-shadow:0 4px 12px #48bb7866}.mobile-confirm-button:disabled{opacity:.45;background:linear-gradient(135deg,#4a5568,#2d3748);box-shadow:none;cursor:not-allowed}.mobile-confirm-button:active:not(:disabled){transform:scale(.97)}}@media (max-width: 480px){.mobile-piece-button{min-width:70px;padding:10px 12px}.mobile-piece-symbol{font-size:32px}}.setup-ready-indicator{margin-top:20px;padding:20px;background:linear-gradient(135deg,#48bb781a,#38a1691a);border:2px solid #48bb78;border-radius:12px;text-align:center;animation:readyPulse 2s ease-in-out infinite}.setup-ready-icon{font-size:32px;margin-bottom:8px;display:block;animation:readyBounce .8s ease-in-out infinite}.setup-ready-title{font-size:18px;font-weight:700;color:#48bb78;margin:0 0 4px}.setup-ready-subtitle{font-size:13px;color:#9ae6b4;margin:0}@keyframes readyPulse{0%,to{box-shadow:0 0 #48bb7866}50%{box-shadow:0 0 0 8px #48bb7800}}@keyframes readyBounce{0%,to{transform:translateY(0)}50%{transform:translateY(-4px)}}.mobile-ready-indicator{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:14px 16px;background:linear-gradient(135deg,#48bb7826,#38a16926);border:2px solid #48bb78;border-radius:10px;animation:readyPulse 2s ease-in-out infinite;flex:1;min-height:50px}.mobile-ready-indicator .ready-icon{font-size:24px;animation:readyBounce .8s ease-in-out infinite}.mobile-ready-indicator .ready-text{font-size:15px;font-weight:700;text-shadow:2px 2px 8px rgba(0,0,0,1);color:#f5f5f5}.mobile-ready-indicator .ready-subtext{font-size:12px;text-shadow:2px 2px 8px rgba(0,0,0,1);color:#f5f5f5}.exit-confirmation-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:10001;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.exit-confirmation-modal{background:linear-gradient(135deg,#1a202c,#2d3748);border:2px solid #4a5568;border-radius:16px;padding:32px 28px;max-width:380px;width:90%;box-shadow:0 20px 60px #00000080;text-align:center}.exit-confirmation-modal h2{font-size:24px;font-weight:700;color:#fff;margin:0 0 12px;letter-spacing:.5px}.exit-confirmation-modal p{font-size:15px;color:#cbd5e0;margin:0 0 14px;line-height:1.5}.exit-confirmation-buttons{display:flex;gap:12px;justify-content:center}.exit-confirm-btn{flex:1;padding:12px 20px;border-radius:8px;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;text-transform:uppercase;letter-spacing:.5px;min-height:44px}.exit-confirm-btn.confirm{background:linear-gradient(135deg,#f56565,#e53e3e);color:#fff;box-shadow:0 4px 12px #f565654d}.exit-confirm-btn.confirm:hover{transform:translateY(-2px);box-shadow:0 6px 16px #f5656566}.exit-confirm-btn.confirm:active{transform:translateY(0)}.exit-confirm-btn.cancel{background:#4a5568;color:#e2e8f0;box-shadow:0 2px 8px #0003}.exit-confirm-btn.cancel:hover{background:#5a6a7e;transform:translateY(-2px);box-shadow:0 4px 12px #0000004d}.exit-confirm-btn.cancel:active{transform:translateY(0)}.desktop-exit-button{position:fixed;top:20px;right:8px;padding:10px 8px;background:linear-gradient(135deg,#ed8936,#dd6b20);color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 12px #ed89364d;z-index:1100;letter-spacing:.5px}.desktop-exit-button:hover{transform:translateY(-2px);box-shadow:0 6px 16px #ed893666}.desktop-exit-button:active{transform:translateY(0)}.exit-game-drawer-indicator,.exit-game-drawer{display:none}@media (max-width: 768px){.exit-game-drawer-indicator{display:flex;flex-direction:column;align-items:center;justify-content:center;position:fixed!important;left:1vw!important;top:15vh!important;width:16px;transform:translateY(-50%);z-index:9999;background:linear-gradient(135deg,#f56565,#e53e3e);color:#fff;padding:10px 2px;border-radius:0 12px 12px 0;box-shadow:4px 0 15px #00000080;cursor:pointer;transition:all .2s ease;border:none}.exit-game-drawer-indicator:active{transform:translateY(-50%) scale(.96)}.exit-game-drawer-indicator:hover{box-shadow:4px 0 20px #f5656580}.exit-game-indicator-icon{font-size:12px!important;margin-bottom:2px;writing-mode:vertical-rl;text-orientation:upright;font-size:9px;font-weight:700}.exit-game-drawer{display:block;position:fixed!important;top:10;left:0;height:20vh;width:48vw;max-width:300px;background:linear-gradient(135deg,#1a202c,#2d3748);z-index:10000;transform:translate(-100%);transition:transform .3s cubic-bezier(0,0,.2,1);padding:15px;box-sizing:border-box;overflow-y:auto;border-radius:0 12px 12px 0;box-shadow:10px 0 30px #00000080}.exit-game-drawer.open{transform:translate(0)!important}.exit-game-drawer-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px;padding-bottom:12px;border-bottom:2px solid #4a5568}.exit-game-drawer-title{font-size:18px;color:#f56565;font-weight:700}.exit-game-drawer-close{background:none;border:none;color:#fff;font-size:24px;cursor:pointer;padding:0;line-height:1;width:28px;height:28px;display:flex;align-items:center;justify-content:center}.exit-game-drawer-close:hover{color:#f56565}.exit-game-drawer-close:active{transform:scale(.95)}.exit-game-drawer-content{padding:0 8px}.exit-game-drawer-button{width:100%;padding:14px 16px;background:linear-gradient(135deg,#f56565,#e53e3e);color:#fff;border:none;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;gap:4px;box-shadow:0 4px 12px #f565654d;min-height:48px}.exit-game-drawer-button:active{transform:scale(.97)}.exit-game-drawer-button:hover{box-shadow:0 6px 16px #f5656566}.exit-game-icon{font-size:16px;font-weight:700}.desktop-exit-button{display:none!important}}.lineup-editor-section{background:#0003;border:2px solid #4a5568;border-radius:8px;padding:20px;margin:20px 0}.lineup-editor-section h2{color:#fff;font-size:24px;margin:0 0 15px;font-weight:700;display:flex;align-items:center;gap:10px}.lineup-editor-content{display:grid;grid-template-columns:200px 1fr 200px;gap:15px}.lineup-buttons{display:flex;flex-direction:column;gap:6px;margin-top:12px}.save-lineup-button,.clear-lineup-button{width:100%;padding:8px;border:none;border-radius:6px;font-weight:600;cursor:pointer;font-size:12px}.save-lineup-button{background:linear-gradient(135deg,#48bb78,#38a169);color:#fff}.save-lineup-button:hover:not(:disabled){transform:translateY(-1px)}.save-lineup-button:disabled{opacity:.5;cursor:not-allowed}.clear-lineup-button{background:#f4729c33;color:#f472a4;border:2px solid #f472a4}.clear-lineup-button:hover:not(:disabled){background:#f4729c4d}.clear-lineup-button:disabled{opacity:.5}.error-message,.success-message{margin-top:8px}.error-message{background:#f5656526;border:2px solid #f56565;border-radius:6px;padding:8px;color:#f56565;font-size:11px;text-align:center;word-break:break-word;white-space:normal}.success-message{background:#48bb7826;border:2px solid #48bb78;border-radius:6px;padding:8px;color:#48bb78;font-size:11px;text-align:center}.lineup-board-container{display:flex;flex-direction:column;align-items:center;gap:10px}.lineup-board{background:#8b4513;padding:8px;border-radius:8px;display:inline-block}.lineup-square{width:42px;height:42px;display:flex;align-items:center;justify-content:center;border:1px solid #333;background:#90ee90;cursor:pointer;transition:all .2s;font-size:18px;position:relative}.lineup-square.dark{background:#228b22}.lineup-square:hover{filter:brightness(1.15)}.lineup-square.zone-defense{border-left:4px solid #4299e1}.lineup-square.zone-midfield{border-left:4px solid #f6ad55}.lineup-square.zone-attack{border-left:4px solid #fc8181}.lineup-square.goal-square{background:#ffd70066;border:2px solid #ffd700}.lineup-square.goal-square:before{content:"🥅";position:absolute;font-size:10px;opacity:.6}.lineup-square.king-square{background:#ffd70099;border:2px solid #ffd700}.lineup-square.king-square:before{content:"♔";position:absolute;font-size:14px;color:gold;z-index:0}.dle-piece{width:100%;height:100%;display:flex;font-size:36px;align-items:center;justify-content:center;-webkit-user-select:none;user-select:none;position:relative;z-index:1}.lineup-panel{display:flex;flex-direction:column;gap:12px}.dle-piece-selector{background:#0000004d;border:2px solid #4a5568;border-radius:8px;padding:12px}.dle-piece-selector h4{color:#fff;font-size:13px;margin:0 0 8px}.piece-buttons-row{display:flex;flex-direction:column;gap:0}.dle-piece-button{width:100%;padding:8px;background:#64748b33;border:2px solid #4a5568;border-radius:6px;color:#fff;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:8px;font-size:12px;margin-bottom:6px}.dle-piece-button:last-child{margin-bottom:0}.dle-piece-button:hover:not(:disabled){background:#64748b66;border-color:#90cdf4}.dle-piece-button.selected{background:#48bb784d;border-color:#48bb78}.dle-piece-button:disabled{opacity:.4;cursor:not-allowed}.dle-piece-symbol{font-size:16px;min-width:20px}.dle-piece-label{flex:1;text-transform:capitalize;font-weight:600}.dle-piece-count{font-weight:700;color:#a0aec0;font-size:11px}.lineup-stats{background:#0000004d;border:2px solid #4a5568;border-radius:8px;padding:12px}.lineup-stats h4{color:#fff;font-size:13px;margin:0 0 8px}.lineup-stats-row{display:flex;flex-direction:column;gap:0}.stat-item{display:flex;align-items:baseline;gap:8px;padding:6px;font-size:11px;margin-bottom:6px;border-radius:4px;border-left:3px solid transparent}.stat-label{flex:1;text-transform:capitalize;line-height:.75;vertical-align:middle}.stat-value{font-weight:700;min-width:28px;text-align:right;line-height:.75;vertical-align:middle}.zone-defense-label,.zone-midfield-label,.zone-attack-label{vertical-align:middle;display:inline-flex;align-items:center;justify-content:center;font-size:15px;line-height:.75;flex-shrink:0}.stat-item.valid{color:#48bb78;border-left-color:#48bb78;background:#48bb781a}.stat-item.invalid{color:#f56565;border-left-color:#f56565;background:#f565651a}.stat-item.total{font-weight:700;margin-top:6px;padding-top:8px;border-top:1px solid rgba(255,255,255,.1)}.loading-state{display:flex;justify-content:center;padding:20px}.loading-state p{color:#a0aec0;font-size:12px}@media (max-width: 768px){.lineup-editor-content{grid-template-columns:1fr;grid-template-rows:auto auto auto;gap:8px}.lineup-stats{order:1;padding:10px}.lineup-stats h4{margin-bottom:10px}.lineup-stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:10px}.stat-item{flex-direction:column;align-items:center;padding:6px 4px;text-align:center;font-size:10px;gap:8px;min-height:65px;justify-content:center}.stat-item.total{margin-top:0;padding-top:6px;border-top:none}.stat-label{font-size:9px}.stat-value{font-size:11px;font-weight:700}.zone-defense-label,.zone-midfield-label,.zone-attack-label{font-size:12px}.dle-piece-selector{order:2;padding:10px}.dle-piece-selector h4{margin-bottom:8px}.piece-buttons-row{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.dle-piece-button{flex-direction:column;padding:6px 4px;font-size:9px;margin-bottom:0;text-align:center;gap:3px;min-height:60px}.dle-piece-symbol{font-size:18px}.dle-piece-label{font-size:8px}.dle-piece-count{font-size:9px}.lineup-board-container{order:3;width:100%;margin:0 auto;gap:2px}.lineup-square{width:34px;height:34px;font-size:14px}.dle-piece{font-size:30px}.lineup-buttons{margin-top:10px;flex-direction:row;gap:8px}.save-lineup-button,.clear-lineup-button{font-size:11px;padding:10px;flex:1}.error-message,.success-message{font-size:10px}}.opponent-left-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .3s ease-in-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.opponent-left-modal{background:linear-gradient(135deg,#1a202c,#2d3748);border:2px solid #4a5568;border-radius:20px;padding:40px;max-width:400px;width:90%;box-shadow:0 20px 60px #00000080;animation:slideUp .4s ease-out;text-align:center}@keyframes slideUp{0%{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}.modal-header{margin-bottom:30px}.modal-icon{font-size:48px;margin-bottom:15px;display:inline-block;animation:wave .6s ease-in-out}@keyframes wave{0%,to{transform:rotate(0)}25%{transform:rotate(15deg)}75%{transform:rotate(-15deg)}}.modal-header h2{color:#fff;font-size:24px;margin:0;font-weight:600;letter-spacing:-.5px}.modal-content{margin-bottom:30px}.modal-content p{color:#cbd5e0;font-size:15px;margin:10px 0;line-height:1.6}.modal-content .secondary-text{color:#a0aec0;font-size:14px}.modal-footer{display:flex;gap:12px;justify-content:center}.return-button{padding:14px 32px;background:linear-gradient(135deg,#48bb78,#38a169);border:none;border-radius:10px;color:#fff;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px #48bb7866;flex:1;max-width:200px}.return-button:hover{transform:translateY(-2px);box-shadow:0 6px 16px #48bb7899}.return-button:active{transform:translateY(0)}@media (max-width: 600px){.opponent-left-modal{padding:30px 20px;border-radius:16px}.modal-icon{font-size:40px}.modal-header h2{font-size:20px}.modal-content p{font-size:14px}.return-button{padding:12px 24px;font-size:15px}}.toast-container{position:fixed;bottom:5px;left:50%;transform:translate(-50%);z-index:2000;animation:fadeIn .3s ease-in-out;pointer-events:none}.toast-modal{background:linear-gradient(135deg,#1a202c,#2d3748);border:2px solid #4a5568;border-radius:16px;padding:20px 22px;min-width:280px;max-width:360px;box-shadow:0 12px 40px #0009;animation:slideUp .35s ease-out;text-align:center}.modal-header{margin-bottom:4px}.modal-icon{font-size:26px;margin-bottom:6px;display:block;animation:wave .6s ease-in-out}.modal-header h2{color:#fff;font-size:18px;margin:0;font-weight:600}.modal-content .secondary-text{color:#cbd5e0;font-size:14px;line-height:1.4}.toast-success .toast-modal{border-color:#38a169}.toast-warning .toast-modal{border-color:#d69e2e}.toast-error .toast-modal{border-color:#e53e3e}.spa-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000bf;display:flex;align-items:center;justify-content:center;z-index:3000;padding:20px;animation:spa-fadeIn .3s ease-out}@keyframes spa-fadeIn{0%{opacity:0}to{opacity:1}}.spa-modal{background:linear-gradient(135deg,#1a202c,#2d3748);border:3px solid #4a5568;border-radius:20px;padding:30px 24px;max-width:95vw;max-height:90vh;width:100%;box-shadow:0 20px 60px #000c;animation:spa-slideUp .4s cubic-bezier(.34,1.56,.64,1);overflow-y:auto;position:relative}@keyframes spa-slideUp{0%{transform:translateY(50px);opacity:0}to{transform:translateY(0);opacity:1}}.spa-close-button{position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:50%;background:#f5656526;border:2px solid rgba(245,101,101,.3);color:#f56565;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .3s ease;font-weight:700}.spa-close-button:active{background:#f5656540;transform:scale(.95)}.spa-header{text-align:center;margin-bottom:30px;padding-top:10px}.spa-icon{font-size:56px;margin-bottom:12px;display:block;animation:spa-bounce 2s ease-in-out infinite}@keyframes spa-bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-12px)}}.spa-title{color:#fff;font-size:24px;font-weight:700;margin:0 0 8px;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.spa-subtitle{color:#90cdf4;font-size:14px;font-weight:600;margin:0}.spa-content,.spa-section{margin-bottom:20px}.spa-section:last-of-type{margin-bottom:0}.spa-section-title{color:#90cdf4;font-size:15px;font-weight:700;margin:0 0 12px;text-transform:uppercase;letter-spacing:.5px}.spa-rules-list{display:flex;flex-direction:column;gap:10px;padding:12px;background:#4299e11a;border:2px solid rgba(66,153,225,.2);border-radius:12px}.spa-rule{display:flex;align-items:center;gap:12px}.spa-rule-color{font-size:20px;flex-shrink:0}.spa-rule-color.spa-attack{color:#f66}.spa-rule-color.spa-midfield{color:#ff6}.spa-rule-color.spa-defense{color:#68f}.spa-rule-text{color:#cbd5e0;font-size:14px;font-weight:500}.spa-steps{display:flex;flex-direction:column;gap:12px;padding:12px;background:#48bb781a;border:2px solid rgba(72,187,120,.2);border-radius:12px}.spa-step{display:flex;align-items:flex-start;gap:12px}.spa-step-number{width:28px;height:28px;min-width:28px;border-radius:50%;background:linear-gradient(135deg,#48bb78,#38a169);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;box-shadow:0 2px 8px #48bb784d}.spa-step-content{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.spa-step-title{color:#fff;font-size:14px;font-weight:600;line-height:1.2}.spa-step-desc{color:#a0aec0;font-size:13px;line-height:1.2}.spa-quick-tip{color:#cbd5e0;font-size:13px;margin:0;padding:12px;background:#fbbf241a;border-left:4px solid #fbbf24;border-radius:8px;line-height:1.5}.spa-quick-tip strong{color:#fbbf24;font-weight:600}.spa-divider{height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);margin:18px 0}.spa-footer{margin-top:24px;padding-top:16px;border-top:1px solid rgba(255,255,255,.1)}.spa-dismiss-button{width:100%;padding:14px 20px;background:linear-gradient(135deg,#4299e1,#3182ce);color:#fff;border:none;border-radius:12px;font-size:16px;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px #4299e166;display:flex;align-items:center;justify-content:center;gap:8px}.spa-dismiss-button:active{transform:scale(.98)}.spa-button-icon{font-size:18px;transition:transform .3s ease}.spa-dismiss-button:active .spa-button-icon{transform:translate(3px)}@media (max-width: 768px){.spa-modal{padding:24px 18px;max-height:85vh;border-radius:16px}.spa-close-button{top:14px;right:14px;width:28px;height:28px;font-size:16px}.spa-header{margin-bottom:24px}.spa-icon{font-size:48px;margin-bottom:10px}.spa-title{font-size:22px;margin-bottom:6px}.spa-subtitle{font-size:13px}.spa-section{margin-bottom:16px}.spa-section-title{font-size:13px;margin-bottom:10px}.spa-rules-list{gap:8px;padding:10px}.spa-rule{gap:10px}.spa-rule-text{font-size:13px}.spa-steps{gap:10px;padding:10px}.spa-step{gap:10px}.spa-step-number{width:24px;height:24px;min-width:24px;font-size:12px}.spa-step-title{font-size:13px}.spa-step-desc{font-size:12px}.spa-quick-tip{font-size:12px;padding:10px}.spa-divider{margin:14px 0}.spa-footer{margin-top:18px;padding-top:12px}.spa-dismiss-button{padding:12px 18px;font-size:15px;gap:6px}.spa-button-icon{font-size:16px}}@media (max-width: 480px){.spa-modal{padding:20px 16px;margin:0 10px}.spa-icon{font-size:42px}.spa-title{font-size:20px}.spa-subtitle,.spa-section-title{font-size:12px}.spa-step-number{width:22px;height:22px;min-width:22px;font-size:11px}}@media (min-width: 769px){.spa-overlay,.spa-modal{display:none!important}}