*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;font-family:Segoe UI,system-ui,-apple-system,sans-serif;background:#0f172a;color:#e2e8f0}#app{width:100%;height:100%;display:flex;flex-direction:column}.landing-header{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem;background:#1e293b;gap:1rem;flex-shrink:0;border-bottom:1px solid #334155}.landing-header-left,.landing-header-right{display:flex;align-items:center;gap:.75rem}.landing-header-left,.landing-header-right{flex-shrink:0}.landing-logo{height:32px;width:auto}.landing{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;gap:1rem}.landing h1{font-size:3.5rem;font-weight:700;letter-spacing:.04em;color:#f1f5f9}.landing p{font-size:1.15rem;color:#94a3b8;margin-bottom:1rem}.landing button,.dialog button{padding:.75rem 2.5rem;font-size:1.15rem;font-weight:600;background:#3b82f6;color:#fff;border:none;border-radius:.5rem;cursor:pointer;transition:background .15s;margin:.5rem}.landing button:hover,.dialog button:hover{background:#2563eb}.landing #join-btn{background:#10b981}.landing #join-btn:hover{background:#059669}.room-name-input{padding:.75rem 1.5rem;font-size:1rem;background:#1e293b;color:#e2e8f0;border:2px solid #475569;border-radius:.5rem;width:260px;text-align:center}.room-name-input:focus{outline:none;border-color:#3b82f6}.mode-toggle{display:flex;align-items:center}.toggle-btn{padding:.6rem 1.5rem;font-size:.95rem;font-weight:600;border:2px solid transparent;border-radius:2rem;cursor:pointer;transition:all .25s ease;white-space:nowrap;min-width:130px;text-align:center}.toggle-btn.toggle-inactive{background:#334155;color:#cbd5e1}.toggle-btn.toggle-inactive:hover{background:#475569;color:#e2e8f0}.toggle-btn.toggle-active{background:#10b981;color:#fff;border-color:#047857;box-shadow:0 0 12px #10b9814d}.toggle-btn.toggle-active:hover{background:#059669;border-color:#047857}.mode-notice{color:#fbbf24;font-size:.9rem;margin-top:.5rem;padding:.75rem 1.5rem;background:#7c2d12;border-radius:.4rem}.offline-notice{color:#94a3b8;font-size:.85rem;margin-top:.5rem;font-style:italic}.game-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;flex-wrap:wrap}.game-header h3{margin:0;flex:0 0 auto}.landing-sections{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem;max-width:900px;margin:2rem auto;width:100%}.landing-section{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:1.5rem;background:#1e293b;border:1px solid #334155;border-radius:.5rem;transition:all .2s}.landing-section:hover{border-color:#475569;box-shadow:0 4px 12px #0000004d}.landing-section h3{font-size:1.25rem;font-weight:600;color:#f1f5f9;margin:0;text-align:center}.learn-buttons{display:flex;flex-direction:column;gap:.75rem;width:100%}.learn-buttons .action-btn{width:100%}.tutorial-games-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem;max-width:900px;margin:0 auto 2rem;max-height:400px;overflow-y:auto;padding:.5rem}.version-display{position:fixed;bottom:.75rem;right:.75rem;font-size:.75rem;color:#64748b;z-index:1;pointer-events:none;-webkit-user-select:none;user-select:none;font-family:Monaco,Menlo,Ubuntu Mono,monospace;letter-spacing:.02em}.tutorial-game-card{background:#1e293b;border:2px solid #334155;border-radius:.5rem;padding:1rem;cursor:pointer;transition:all .2s}.tutorial-game-card:hover{border-color:#3b82f6;transform:translateY(-2px);box-shadow:0 4px 12px #3b82f633}.tutorial-game-card.selected{border-color:#10b981;background:#0f3d2e;box-shadow:0 4px 12px #10b9814d}.tutorial-game-header{display:flex;justify-content:space-between;align-items:start;margin-bottom:.5rem;gap:.5rem}.tutorial-game-header h4{font-size:1.1rem;font-weight:600;color:#f1f5f9;margin:0;flex:1}.difficulty-badge{padding:.25rem .75rem;border-radius:.35rem;font-size:.8rem;font-weight:600;color:#fff;white-space:nowrap;text-transform:capitalize}.tutorial-game-card p{font-size:.9rem;color:#cbd5e1;margin:.5rem 0;line-height:1.4}.tutorial-game-meta{display:flex;gap:1rem;margin-top:.75rem;font-size:.85rem;color:#94a3b8}.quick-play-controls{display:flex;gap:.5rem;justify-content:center;margin-bottom:1rem;flex-wrap:wrap;width:100%}.action-btn{padding:.75rem 2rem;font-size:1rem;font-weight:600;background:#3b82f6;color:#fff;border:none;border-radius:.5rem;cursor:pointer;transition:all .15s;white-space:nowrap}.action-btn:hover:not(:disabled){background:#2563eb;transform:translateY(-1px)}.action-btn:disabled{opacity:.5;cursor:not-allowed}.action-btn-primary{background:#10b981}.action-btn-primary:hover:not(:disabled){background:#059669}.action-btn-secondary{background:#8b5cf6}.action-btn-secondary:hover:not(:disabled){background:#7c3aed}.tutorial-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1500}.tutorial-modal{background:#1e293b;border:1px solid #334155;border-radius:.5rem;width:90%;max-width:900px;max-height:90vh;display:flex;flex-direction:column;box-shadow:0 20px 25px -5px #00000080}.tutorial-modal-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem;border-bottom:1px solid #334155;flex-shrink:0}.tutorial-modal-header h2{font-size:1.5rem;font-weight:600;color:#f1f5f9;margin:0}.tutorial-modal-close-btn{background:none;border:none;font-size:1.5rem;color:#94a3b8;cursor:pointer;padding:0;line-height:1;transition:color .15s}.tutorial-modal-close-btn:hover{color:#e2e8f0}.tutorial-modal-body{padding:1.5rem;overflow-y:auto;flex:1}.tutorial-modal-actions{padding:1rem 1.5rem;display:flex;gap:.5rem;justify-content:flex-end;border-top:1px solid #334155;flex-shrink:0}.player-name-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1500}.player-name-modal{background:#1e293b;border:1px solid #334155;border-radius:.5rem;width:90%;max-width:400px;box-shadow:0 20px 25px -5px #00000080}.player-name-header{padding:1.5rem;border-bottom:1px solid #334155}.player-name-header h2{font-size:1.5rem;font-weight:600;color:#f1f5f9;margin:0}.player-name-body{padding:1.5rem}.player-name-input{width:100%;padding:.75rem 1rem;font-size:1rem;background:#0f172a;color:#e2e8f0;border:2px solid #475569;border-radius:.35rem;font-family:inherit;transition:border-color .15s}.player-name-actions{padding:1rem 1.5rem;display:flex;gap:.5rem;justify-content:flex-end;border-top:1px solid #334155}.account-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1500}.account-modal{background:#1e293b;border:1px solid #334155;border-radius:.5rem;width:90%;max-width:400px;box-shadow:0 20px 25px -5px #00000080}.account-modal-header{padding:1.5rem;border-bottom:1px solid #334155}.account-modal-header h2{font-size:1.5rem;font-weight:600;color:#f1f5f9;margin:0}.account-modal-body{padding:1.5rem;display:flex;flex-direction:column;gap:.75rem}.account-modal-body label{font-size:.9rem;font-weight:500;color:#cbd5e1}.account-name-input{padding:.75rem 1rem;font-size:1rem;background:#0f172a;color:#e2e8f0;border:2px solid #475569;border-radius:.35rem;font-family:inherit;transition:border-color .15s}.account-name-input:focus{outline:none;border-color:#3b82f6}.account-modal-actions{padding:1rem 1.5rem;display:flex;gap:.5rem;justify-content:flex-end;border-top:1px solid #334155}.custom-game-setup-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:1500}.custom-game-setup-modal{background:#1e293b;border:1px solid #334155;border-radius:.5rem;width:90%;max-width:500px;box-shadow:0 20px 25px -5px #00000080;display:flex;flex-direction:column}.custom-game-setup-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem;border-bottom:1px solid #334155}.custom-game-setup-header h2{font-size:1.5rem;font-weight:600;color:#f1f5f9;margin:0}.custom-game-setup-close-btn{background:none;border:none;font-size:1.5rem;color:#94a3b8;cursor:pointer;padding:0;line-height:1;transition:color .15s}.custom-game-setup-close-btn:hover{color:#e2e8f0}.custom-game-setup-body{padding:1.5rem;display:flex;flex-direction:column;gap:1.5rem}.player-count-section{display:flex;flex-direction:column;gap:.75rem}.player-count-section label{font-weight:500;color:#f1f5f9;font-size:.9rem;text-transform:uppercase;letter-spacing:.05em}.player-count-selector{display:flex;gap:.5rem;flex-wrap:wrap}.player-count-btn{padding:.75rem 1rem;background:#0f172a;color:#e2e8f0;border:2px solid #475569;border-radius:.35rem;font-size:1rem;font-weight:500;cursor:pointer;transition:all .15s}.player-count-btn:hover{border-color:#64748b;background:#1e293b}.player-count-btn.selected{background:#3b82f6;border-color:#3b82f6;color:#fff}.player-names-section{display:flex;flex-direction:column;gap:.75rem}.player-names-section label{font-weight:500;color:#f1f5f9;font-size:.9rem;text-transform:uppercase;letter-spacing:.05em}#player-names-inputs{display:flex;flex-direction:column;gap:.75rem}.player-name-input-group{display:flex;flex-direction:column;gap:.25rem}.player-name-input-group label{font-size:.85rem;color:#cbd5e1;font-weight:400;text-transform:none}.player-name-input{padding:.75rem 1rem;font-size:1rem;background:#0f172a;color:#e2e8f0;border:2px solid #475569;border-radius:.35rem;font-family:inherit;transition:border-color .15s}.player-name-input:focus{outline:none;border-color:#3b82f6}.custom-game-setup-actions{padding:1rem 1.5rem;display:flex;gap:.5rem;justify-content:flex-end;border-top:1px solid #334155}.dialog{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:1rem}.dialog h2{font-size:2rem;font-weight:600;color:#f1f5f9}.dialog input{padding:.75rem 1.5rem;font-size:1rem;background:#1e293b;color:#e2e8f0;border:2px solid #475569;border-radius:.5rem;text-transform:uppercase;letter-spacing:.15em;width:200px;text-align:center}.dialog input:focus{outline:none;border-color:#3b82f6}.dialog #join-cancel-btn{background:#6b7280}.dialog #join-cancel-btn:hover{background:#4b5563}.rooms-list{width:340px;max-height:240px;overflow-y:auto;display:flex;flex-direction:column;gap:.5rem}.rooms-loading,.rooms-empty{color:#94a3b8;font-size:.9rem;text-align:center;padding:1rem 0}.room-row{display:flex;align-items:center;justify-content:space-between;padding:.6rem .85rem;background:#1e293b;border:1px solid #334155;border-radius:.4rem}.room-info{display:flex;align-items:center;gap:.6rem;overflow:hidden}.room-row-name{font-weight:600;font-size:.9rem;color:#e2e8f0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:140px}.room-row-code{font-size:.75rem;color:#64748b;letter-spacing:.08em}.room-row-players{font-size:.78rem;color:#94a3b8}.room-join-btn{padding:.3rem .85rem!important;font-size:.82rem!important;margin:0!important;background:#10b981!important}.room-join-btn:hover{background:#059669!important}.join-manual{display:flex;align-items:center;gap:.5rem}.join-manual input{padding:.55rem 1rem;font-size:.9rem;background:#1e293b;color:#e2e8f0;border:2px solid #475569;border-radius:.5rem;text-transform:uppercase;letter-spacing:.15em;width:160px;text-align:center}.join-manual input:focus{outline:none;border-color:#3b82f6}.join-manual button{padding:.55rem 1.2rem!important;font-size:.9rem!important;margin:0!important}.game-logo{display:block;height:32px;width:auto;border-radius:.35rem}.game-header{display:flex;align-items:center;justify-content:space-between;padding:.5rem 1rem;background:#1e293b;gap:1rem;flex-shrink:0;border-bottom:1px solid #334155}.game-header>div{display:flex;align-items:center;gap:.75rem}.header-left{flex-shrink:0}.header-center{flex:1;display:flex;align-items:center;gap:.75rem;min-width:0;flex-wrap:wrap}.header-right{flex-shrink:0}.game-actions{display:flex;align-items:center;gap:.75rem}.phase-action-btn{padding:.4rem .9rem;font-size:.85rem;font-weight:600;background:#2563eb;color:#fff;border:none;border-radius:.35rem;cursor:pointer}.reset-camera-btn{padding:.35rem .6rem;font-size:1rem;background:#334155;color:#e2e8f0;border:1px solid #475569;border-radius:.35rem;cursor:pointer;line-height:1}.reset-camera-btn:hover{background:#475569}.export-game-btn{padding:.4rem .9rem;font-size:.85rem;font-weight:600;background:#10b981;color:#fff;border:none;border-radius:.35rem;cursor:pointer;transition:all .15s}.export-game-btn:hover{background:#059669;transform:translateY(-1px);box-shadow:0 2px 6px #10b9814d}.header-btn{padding:.5rem 1rem;font-size:.9rem;font-weight:500;background:#334155;color:#e2e8f0;border:1px solid #475569;border-radius:.4rem;cursor:pointer;transition:all .15s;white-space:nowrap}.header-btn:hover{background:#475569;color:#f1f5f9}.settings-btn{padding:.35rem .6rem;font-size:1rem;background:#334155;color:#e2e8f0;border:1px solid #475569;border-radius:.35rem;cursor:pointer;line-height:1;transition:all .15s}.settings-btn:hover{background:#475569}.settings-modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:2000}.settings-modal{background:#1e293b;border:1px solid #334155;border-radius:.5rem;width:90%;max-width:400px;box-shadow:0 20px 25px -5px #00000080}.settings-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem;border-bottom:1px solid #334155}.settings-header h2{font-size:1.5rem;font-weight:600;color:#f1f5f9;margin:0}.settings-close-btn{background:none;border:none;font-size:1.5rem;color:#94a3b8;cursor:pointer;padding:0;line-height:1;transition:color .15s}.settings-close-btn:hover{color:#e2e8f0}.settings-body{padding:1.5rem}.settings-group{margin-bottom:1.5rem}.settings-group:last-child{margin-bottom:0}.settings-label{display:block;font-size:.95rem;font-weight:600;color:#e2e8f0;margin-bottom:.75rem}.sound-control{display:flex;align-items:center;gap:.75rem}.sound-toggle-btn{background:#334155;border:1px solid #475569;border-radius:.35rem;padding:.4rem .6rem;font-size:1.25rem;cursor:pointer;flex-shrink:0;transition:all .15s;line-height:1}.sound-toggle-btn:hover{background:#475569}.volume-slider{flex:1;height:6px;border-radius:3px;background:#334155;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#10b981;cursor:pointer;transition:all .15s}.volume-slider::-webkit-slider-thumb:hover{background:#059669;box-shadow:0 0 8px #10b98166}.volume-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:#10b981;cursor:pointer;border:none;transition:all .15s}.volume-slider::-moz-range-thumb:hover{background:#059669;box-shadow:0 0 8px #10b98166}.volume-display{min-width:45px;text-align:right;font-size:.9rem;font-weight:600;color:#cbd5e1}.animation-control{display:flex;align-items:center;gap:.75rem}.animation-toggle-btn{background:#334155;border:1px solid #475569;border-radius:.35rem;padding:.4rem .6rem;font-size:1.25rem;cursor:pointer;flex-shrink:0;transition:all .15s;line-height:1;min-width:40px;text-align:center}.animation-toggle-btn:hover{background:#475569}.animation-display{font-size:.9rem;font-weight:600;color:#cbd5e1}.export-game-btn:active{transform:translateY(0)}.phase-action-btn:disabled{background:#475569;cursor:not-allowed;opacity:.75}#back-btn{padding:.35rem .9rem;font-size:.9rem;background:#334155;color:#e2e8f0;border:none;border-radius:.3rem;cursor:pointer;transition:background .15s}#back-btn:hover{background:#475569}.room-code{font-size:.9rem;color:#64748b;font-weight:500;letter-spacing:.05em}.local-players-badges{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}.you-badge{display:inline-flex;align-items:center;gap:.45rem;padding:.2rem .5rem;border-radius:999px;background:#0f172a;border:1px solid #334155}.you-color{width:12px;height:12px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:#475569}.you-badge .you-label,#you-label{font-size:.78rem;color:#cbd5e1;font-weight:600}#hex-info{color:#94a3b8;font-size:.95rem}.game-wrapper{display:grid;grid-template-columns:auto 1fr;flex:1;overflow:hidden;gap:.5rem;padding:.5rem}.players-panel,.pieces-panel,.options-panel,.setup-panel,.perspective-panel{grid-column:1}#game-container{grid-column:2;grid-row:1 / span 3}.players-panel,.pieces-panel,.options-panel{display:flex;flex-direction:column;background:#1e293b;border-radius:.5rem;border:1px solid #334155;overflow:hidden;width:220px;max-height:100%;transition:height .3s ease,max-height .3s ease}.players-panel.expanded,.pieces-panel.expanded,.options-panel.expanded{max-height:100%}.players-panel:not(.expanded){max-height:50px}.pieces-panel:not(.expanded){max-height:50px}.options-panel:not(.expanded){max-height:50px}.setup-panel{display:flex;flex-direction:column;background:#1e293b;border-radius:.5rem;border:1px solid #334155;overflow:hidden;width:220px;max-height:100%;transition:height .3s ease,max-height .3s ease}.setup-panel.expanded{max-height:100%}.setup-panel:not(.expanded){max-height:50px}.setup-panel-content{padding:.75rem;overflow-y:auto;flex:1}.setup-instruction{font-size:.85rem;color:#cbd5e1;margin:0 0 .5rem;padding:.5rem;background:#0f172a;border-radius:.25rem}.setup-requirement{font-size:.75rem;color:#fbbf24;margin:0 0 .5rem;padding:.5rem;background:#1f2937;border-radius:.25rem;border-left:2px solid #fbbf24}.setup-piece-buttons{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.5rem}.setup-piece-btn{padding:.4rem .6rem;font-size:.75rem;background:#334155;color:#cbd5e1;border:1px solid #475569;border-radius:.25rem;cursor:pointer;transition:all .2s}.setup-piece-btn:hover{background:#475569;color:#f1f5f9}.setup-piece-btn.selected{background:#3b82f6;border-color:#1e40af;color:#fff}.setup-piece-btn:disabled{opacity:.5;cursor:not-allowed;background:#1e293b;color:#64748b}.setup-piece-btn:disabled:hover{background:#1e293b;color:#64748b}.setup-message{font-size:.75rem;color:#94a3b8;margin:.5rem 0;padding:.5rem;background:#0f172a;border-radius:.25rem;text-align:center;min-height:2rem;display:flex;align-items:center;justify-content:center}.setup-panel-buttons{display:flex;gap:.5rem}.setup-btn{flex:1;padding:.5rem;font-size:.75rem;background:#334155;color:#cbd5e1;border:1px solid #475569;border-radius:.25rem;cursor:pointer;transition:all .2s}.setup-btn:hover:not(:disabled){background:#475569;color:#f1f5f9}.perspective-panel{display:flex;flex-direction:column;background:#1e293b;border-radius:.5rem;border:1px solid #334155;overflow:hidden;width:220px;max-height:100%;transition:height .3s ease,max-height .3s ease}.perspective-panel.expanded{width:220px}.perspective-panel.expanded{max-height:100%}.perspective-panel:not(.expanded){max-height:50px}.players-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem;background:#0f172a;border-bottom:1px solid #334155;flex-shrink:0}.players-header h3{font-size:.95rem;font-weight:600;color:#f1f5f9;margin:0;white-space:nowrap}.toggle-btn{background:transparent;border:none;color:#94a3b8;cursor:pointer;font-size:1.2rem;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;transition:color .15s}.toggle-btn:hover{color:#cbd5e1}.players-list{flex:1;overflow-y:auto;padding:.5rem;display:flex;flex-direction:column;gap:.5rem}.players-panel:not(.expanded) .players-list{display:none}.pieces-list{display:flex;flex-direction:column;gap:.45rem;padding:.5rem;overflow-y:auto}.pieces-panel:not(.expanded) .pieces-list{display:none}.options-content{flex:1;overflow-y:auto;padding:.5rem;display:flex;flex-direction:column;gap:.5rem}.options-panel:not(.expanded) .options-content{display:none}.option-item{padding:.5rem;background:#0f172a;border-radius:.35rem;border:1px solid #334155;display:flex;align-items:center;justify-content:center;gap:.5rem}.perspective-list{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;padding:.5rem;overflow-y:auto}.perspective-panel:not(.expanded) .perspective-list{display:none}.piece-item{border:1px solid #334155;border-radius:.4rem;background:#0f172a;color:#cbd5e1;padding:.45rem .55rem;text-align:left;font-size:.82rem;cursor:default}.piece-item:hover{border-color:#64748b}.piece-item.selected{background:#1d4ed8;border-color:#93c5fd;color:#eff6ff}.perspective-btn{border:1px solid #334155;border-radius:.4rem;background:#0f172a;color:#cbd5e1;padding:.5rem;text-align:center;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .15s}.perspective-btn:hover{border-color:#64748b;background:#1e293b}.perspective-btn.active{background:#2563eb;border-color:#93c5fd;color:#eff6ff}.player-item{display:flex;align-items:center;gap:.75rem;padding:.5rem .75rem;background:#334155;border-radius:.35rem;font-size:.85rem;color:#e2e8f0;border:2px solid transparent;transition:all .2s ease}.player-item.player-turn{background:#475569;border-color:#fbbf24;box-shadow:0 0 8px #fbbf244d}.player-color-box{width:16px;height:16px;border-radius:.25rem;flex-shrink:0;border:1px solid rgba(255,255,255,.1)}.player-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.8rem}#game-container{flex:1;overflow:hidden}#game-container canvas{touch-action:none}@media (max-width: 768px){.game-wrapper{display:flex;flex-direction:column;position:relative;padding:0;gap:0}#game-container{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0}.players-panel,.pieces-panel,.options-panel,.perspective-panel{position:relative;z-index:10;width:auto;max-width:220px;margin:.25rem;pointer-events:auto;opacity:.92}.players-panel:not(.expanded),.pieces-panel:not(.expanded),.options-panel:not(.expanded),.perspective-panel:not(.expanded){max-height:40px}.game-header{position:relative;z-index:10}}.victory-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:10000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);pointer-events:auto;opacity:1;visibility:visible}.victory-modal{background:linear-gradient(135deg,#1e293b,#0f172a);border:2px solid #64748b;border-radius:1rem;padding:2rem;max-width:500px;text-align:center;box-shadow:0 20px 60px #000c}.victory-header{border-left:4px solid #3b82f6;padding-left:1.5rem;margin-bottom:2rem;text-align:left}.victory-header h2{font-size:2rem;font-weight:700;color:#eff6ff;margin-bottom:.5rem}.victory-header p{font-size:1.1rem;color:#cbd5e1}.winner-name{color:#f1f5f9;font-weight:600}.victory-actions{display:flex;flex-direction:column;gap:.75rem}.victory-btn{padding:.75rem 1.5rem;font-size:1rem;font-weight:500;border:none;border-radius:.5rem;cursor:pointer;transition:all .2s}.victory-primary{background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#eff6ff}.victory-primary:hover{background:linear-gradient(135deg,#3b82f6,#2563eb);transform:translateY(-2px);box-shadow:0 8px 16px #2563eb4d}.victory-secondary{background:#334155;color:#e2e8f0}.victory-secondary:hover{background:#475569;transform:translateY(-2px)}.victory-btn:active{transform:translateY(0)}.piece-item-container{display:flex;gap:.4rem;align-items:stretch;border-radius:.4rem;transition:all .2s ease;padding:.25rem;margin:-.25rem}.piece-item-container.piece-selected{background:#fbbf241a;border:2px solid #fbbf24;box-shadow:0 0 8px #fbbf244d;padding:.25rem}.piece-item{flex:1;background:#0f172a;border:1px solid #334155;border-radius:.4rem;color:#94a3b8;padding:.45rem .55rem;transition:all .15s}.piece-item:hover{border-color:#64748b;color:#cbd5e1;background:#1e293b}.piece-info-btn{width:28px;min-width:28px;padding:.45rem;border:1px solid #334155;border-radius:.4rem;background:#0f172a;color:#94a3b8;font-size:1rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;flex-shrink:0}.piece-info-btn:hover{border-color:#64748b;color:#cbd5e1;background:#1e293b}.game-info-btn{width:100%;padding:.45rem .55rem;margin-bottom:.5rem;border:1px solid #334155;border-radius:.4rem;background:#0f172a;color:#cbd5e1;font-size:.82rem;font-weight:600;cursor:pointer;transition:all .15s;text-align:left}.game-info-btn:hover{border-color:#64748b;background:#1e293b;color:#e2e8f0}.replay-viewer{display:flex;flex-direction:column;height:100%;background:#0f172a;color:#e2e8f0}.replay-header{display:flex;align-items:center;justify-content:space-between;padding:1.5rem;background:#1e293b;border-bottom:1px solid #334155;flex-wrap:wrap;gap:1rem}.replay-header h2{flex:1;text-align:center;font-size:1.8rem;font-weight:700}.replay-header button{padding:.5rem 1rem;background:#334155;border:1px solid #475569;border-radius:.4rem;color:#e2e8f0;cursor:pointer;font-weight:500;transition:all .15s}.replay-header button:hover{background:#475569;border-color:#64748b}.replay-info{text-align:right;font-size:.9rem;color:#cbd5e1}.replay-info p{margin:0;line-height:1.3}.replay-board-container{flex:1;display:flex;align-items:center;justify-content:center;background:#0f172a;border:1px solid #334155;margin:1rem;border-radius:.4rem;min-height:300px;overflow:auto}.replay-controls{display:flex;align-items:center;justify-content:space-between;padding:1.5rem;background:#1e293b;border-top:1px solid #334155;gap:1rem;flex-wrap:wrap}.replay-controls button{padding:.6rem 1.2rem;background:#6366f1;border:none;border-radius:.4rem;color:#f1f5f9;font-weight:600;cursor:pointer;transition:all .15s;font-size:.95rem}.replay-controls button:hover:not(:disabled){background:#4f46e5;transform:translateY(-1px);box-shadow:0 2px 8px #6366f14d}.replay-controls button:disabled{background:#334155;color:#64748b;cursor:not-allowed;opacity:.6}.move-display{flex:1;text-align:center;min-width:200px}.move-display p{margin:0;font-size:1rem;color:#cbd5e1;font-family:Courier New,monospace;padding:.5rem}.replay-status{padding:1rem;text-align:center;background:#0f172a;border-top:1px solid #334155}.replay-status p{margin:0;color:#94a3b8;font-size:.9rem}.file-input-wrapper{display:flex;flex-direction:column;gap:1rem;margin:2rem 0}.file-input-wrapper input[type=file]{padding:.75rem;background:#1e293b;border:1px solid #334155;border-radius:.4rem;color:#e2e8f0;cursor:pointer}.file-input-wrapper input[type=file]::file-selector-button{padding:.5rem 1rem;background:#6366f1;border:none;border-radius:.3rem;color:#f1f5f9;font-weight:600;cursor:pointer;margin-right:1rem}.file-input-wrapper input[type=file]::file-selector-button:hover{background:#4f46e5}.piece-info-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000bf;display:flex;align-items:center;justify-content:center;z-index:2000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);animation:fadeIn .2s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.piece-info-modal-content{background:linear-gradient(135deg,#1e293b,#0f172a);border:2px solid #334155;border-radius:1rem;max-width:500px;width:90%;max-height:85vh;overflow-y:auto;box-shadow:0 20px 60px #000000e6;animation:slideUp .3s ease-out}@keyframes slideUp{0%{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}.piece-info-header{display:flex;align-items:center;justify-content:space-between;padding:1.5rem;background:#0f172a;border-bottom:1px solid #334155;flex-shrink:0}.piece-info-header-title{display:flex;align-items:center;gap:1rem}.piece-info-header-icon{width:40px;height:40px;flex-shrink:0}.piece-info-header h2{font-size:1.5rem;font-weight:700;color:#f1f5f9;margin:0}.piece-info-close-btn{background:transparent;border:none;color:#94a3b8;font-size:1.8rem;cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;transition:color .15s;line-height:1}.piece-info-close-btn:hover{color:#cbd5e1}.piece-info-body{padding:1.5rem;display:flex;flex-direction:column;gap:1.5rem}.piece-info-section{display:flex;flex-direction:column;gap:.5rem}.piece-info-section h3{font-size:1rem;font-weight:700;color:#93c5fd;margin:0;text-transform:uppercase;letter-spacing:.05em;text-shadow:0 0 10px rgba(147,197,253,.2)}.piece-info-section p{font-size:.95rem;color:#e2e8f0;line-height:1.6;margin:0}.ai-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:999;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.ai-modal{background:linear-gradient(135deg,#1e293b,#0f172a);border:2px solid #64748b;border-radius:.75rem;padding:1.5rem;max-width:400px;box-shadow:0 20px 60px #000c}.ai-modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;border-bottom:1px solid #334155;padding-bottom:1rem}.ai-modal-header h2{font-size:1.5rem;font-weight:700;color:#f1f5f9;margin:0}.ai-modal-close{background:transparent;border:none;color:#94a3b8;font-size:1.5rem;cursor:pointer;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;transition:color .15s}.ai-modal-close:hover{color:#cbd5e1}.ai-modal-content p{color:#cbd5e1;margin-bottom:.75rem;font-size:.9rem}.ai-strategy-list{display:flex;flex-direction:column;gap:.75rem;max-height:400px;overflow-y:auto;padding-right:.5rem}.ai-strategy-btn{display:flex;flex-direction:column;align-items:flex-start;gap:.25rem;padding:.75rem 1rem;background:#334155;border:1px solid #475569;border-radius:.5rem;color:#e2e8f0;cursor:pointer;transition:all .15s;text-align:left}.ai-strategy-btn:hover{background:#475569;border-color:#64748b;transform:translate(4px)}.ai-strategy-btn:active{transform:translate(2px)}.strategy-name{font-weight:600;color:#f1f5f9;font-size:.95rem}.strategy-desc{font-size:.8rem;color:#94a3b8}.add-ai-btn{width:100%;padding:.6rem .75rem;background:#1d4ed8;border:1px solid #3b82f6;border-radius:.35rem;color:#f0f9ff;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .15s;margin-top:.5rem}.add-ai-btn:hover{background:#2563eb;border-color:#60a5fa;transform:translateY(-1px);box-shadow:0 4px 12px #2563eb4d}.add-ai-btn:active{transform:translateY(0)}.setup-overlay{position:fixed;bottom:0;left:0;right:0;min-height:auto;max-height:30vh;background:linear-gradient(180deg,#1e293b,#0f172a);border-top:2px solid #475569;padding:1rem;z-index:1000;box-shadow:0 -4px 20px #0009;animation:slideUp .3s ease-out;pointer-events:none;display:block!important;visibility:visible!important;opacity:1!important}.setup-overlay-content{max-width:900px;margin:0 auto;display:flex;gap:1.5rem;align-items:flex-start;pointer-events:auto;min-height:auto}.setup-overlay-header{flex:1;min-width:200px}.setup-overlay-header h3{margin:0 0 .5rem;font-size:1.1rem;font-weight:600;color:#f1f5f9}.setup-overlay-header p{margin:.25rem 0;font-size:.9rem;color:#cbd5e1;line-height:1.4}.setup-requirement{font-size:.85rem!important;color:#fbbf24!important;font-weight:500}.setup-piece-selector{flex:2;display:flex;flex-direction:column;gap:.75rem}.setup-piece-buttons{display:flex;flex-wrap:wrap;gap:.5rem}.setup-piece-btn{padding:.6rem 1rem;background:#334155;border:2px solid #475569;border-radius:.4rem;color:#e2e8f0;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s}.setup-piece-btn:hover{background:#475569;border-color:#64748b;transform:translateY(-2px)}.setup-piece-btn.active{background:#3b82f6;border-color:#60a5fa;color:#f0f9ff;box-shadow:0 0 12px #3b82f666}.setup-message{font-size:.85rem;color:#60a5fa;margin:0;min-height:1.2em;display:flex;align-items:center}.setup-message:empty{display:none}.setup-overlay-footer{display:flex;gap:.5rem;flex-shrink:0}.setup-btn{padding:.6rem 1rem;background:#334155;border:1px solid #475569;border-radius:.4rem;color:#e2e8f0;font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s;white-space:nowrap}.setup-btn:hover:not(:disabled){background:#475569;border-color:#64748b;transform:translateY(-2px)}.setup-btn:disabled{opacity:.5;cursor:not-allowed}.setup-close{background:#7f1d1d;border-color:#dc2626;color:#fecaca}.setup-close:hover{background:#991b1b;border-color:#ef4444;color:#fca5a5}.setup-mode-toggle{display:flex;align-items:center}.setup-mode-btn{padding:.5rem 1rem;font-size:.85rem;font-weight:600;background:#8b5cf6;color:#fff;border:2px solid #a78bfa;border-radius:.35rem;cursor:pointer;transition:all .2s;white-space:nowrap}.setup-mode-btn:hover:not(:disabled){background:#7c3aed;border-color:#c4b5fd;box-shadow:0 0 8px #8b5cf666}.setup-mode-btn:disabled{opacity:.5;cursor:not-allowed}.setup-mode-btn.custom-mode{background:#06b6d4;border-color:#22d3ee}.setup-mode-btn.custom-mode:hover:not(:disabled){background:#0891b2;border-color:#06d6d6;box-shadow:0 0 8px #06b6d466}.start-game-btn{padding:.5rem 1.2rem;font-size:.9rem;font-weight:700;background:#10b981;color:#fff;border:2px solid #34d399;border-radius:.4rem;cursor:pointer;transition:all .2s}.start-game-btn:hover:not(:disabled){background:#059669;border-color:#6ee7b7;box-shadow:0 0 12px #10b98166;transform:translateY(-2px)}.start-game-btn:disabled{background:#6b7280;border-color:#9ca3af;color:#d1d5db;opacity:.6;cursor:not-allowed}.language-control{display:flex;gap:.75rem;align-items:center}.language-flag-btn{font-size:1.5rem;padding:.5rem .7rem;background:#334155;border:2px solid #475569;border-radius:.35rem;cursor:pointer;transition:all .15s;line-height:1}.language-flag-btn:hover{background:#475569;border-color:#64748b}.language-flag-btn.active{background:#3b82f6;border-color:#60a5fa;box-shadow:0 0 8px #3b82f666}.render-mode-control{display:flex;gap:.75rem;align-items:center}.render-mode-btn{padding:.5rem 1rem;background:#334155;border:2px solid #475569;border-radius:.35rem;color:#cbd5e1;cursor:pointer;font-weight:500;font-size:.9rem;transition:all .15s}.render-mode-btn:hover{background:#475569;border-color:#64748b}.render-mode-btn.active{background:#3b82f6;border-color:#60a5fa;box-shadow:0 0 8px #3b82f666;color:#e0f2fe}.phase-status{font-size:.85rem;color:#94a3b8}@media (max-width: 1024px){.setup-overlay-content{flex-direction:column;gap:1rem}.setup-overlay-header,.setup-piece-selector,.setup-overlay-footer{width:100%}}