:root{font-family:Inter,system-ui,sans-serif;color:#e5e7eb;background:radial-gradient(circle at 50% 32%,rgba(250,204,21,.14),transparent 30%),#111827}body{margin:0;min-height:100vh;background:radial-gradient(circle at 50% 32%,rgba(250,204,21,.14),transparent 30%),#111827}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.55}[hidden]{display:none!important}.start-screen{display:grid;place-items:center;min-height:100vh;padding:24px;box-sizing:border-box}.start-panel{width:min(100%,420px)}.start-panel h1,.mode-panel h1{margin:0 0 28px;font-size:48px;line-height:1;text-align:center}.start-actions{display:grid;gap:12px}.start-panel button,.join-game-form input,.theme-select select{min-height:48px;border-radius:8px;font:inherit}.start-panel button{border:0;background:#facc15;color:#111827;font-weight:800}.start-panel button:hover{background:#fde047}.start-panel .secondary-action{background:#e5e7eb}.start-panel .secondary-action:hover{background:#f9fafb}.mode-panel,.match-builder-panel{width:min(100%,560px)}.match-builder-panel{display:grid;gap:16px}.mode-heading{display:grid;gap:4px;margin-bottom:14px;color:#cbd5e1;font-weight:700;text-align:center}.mode-heading p{margin:0;color:#e5e7eb;font-size:18px}.mode-heading span{color:#94a3b8;font-size:13px}.mode-carousel{display:grid;grid-template-columns:52px minmax(0,1fr) 52px;gap:12px;align-items:center;margin-bottom:14px}.mode-arrow{width:52px;height:52px;border:1px solid #374151;border-radius:8px;background:#1f2937;color:#facc15;font:inherit;font-size:34px;font-weight:800}.mode-arrow:hover{border-color:#facc15;background:#293548}.mode-card{display:grid;gap:12px;text-align:center}.mode-art{display:grid;place-items:center;min-height:230px;border:1px solid #374151;border-radius:8px;background:linear-gradient(135deg,#0f172ae6,#1f2937f2),#1f2937;color:#64748b;font-size:26px;font-weight:900;text-transform:uppercase}.mode-card h2,.mode-card p{margin:0}.mode-card h2{color:#facc15;font-size:24px}.mode-card p{min-height:38px;color:#cbd5e1;font-weight:700}.mode-dots{display:flex;justify-content:center;gap:7px;margin:0 0 14px}.mode-dots button{width:9px;height:9px;border:0;border-radius:999px;background:#475569;padding:0}.mode-dots button.active{background:#facc15}.mode-panel>.primary-action,.mode-panel>.secondary-action{width:100%;min-height:46px;border:0;border-radius:8px;background:#e5e7eb;color:#111827;font:inherit;font-weight:800}.mode-panel>.primary-action{margin-bottom:10px;background:#facc15}.mode-panel>.primary-action:hover{background:#fde047}.match-builder-panel h1{margin:0 0 8px;font-size:42px;line-height:1;text-align:center}.builder-section{display:grid;gap:10px}.builder-section h2,.builder-section-heading h2{margin:0;color:#facc15;font-size:16px}.builder-section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.builder-section-heading span{color:#94a3b8;font-size:13px;font-weight:800}.board-size-options{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.board-size-options button,.builder-actions button{min-height:42px;border:0;border-radius:8px;font:inherit;font-weight:800}.board-size-options button{background:#1f2937;color:#e5e7eb;border:1px solid #374151}.board-size-options button.active{background:#facc15;color:#111827;border-color:#facc15}.unit-count-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.unit-count-row,.win-condition-row{display:flex;align-items:center;gap:10px;min-width:0;color:#e5e7eb;font-weight:750}.unit-count-row{justify-content:space-between;min-height:42px;border:1px solid #374151;border-radius:8px;background:#0f172a;padding:0 10px}.unit-count-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.unit-count-row input{width:62px;min-height:30px;border:1px solid #374151;border-radius:8px;background:#111827;color:#e5e7eb;font:inherit;font-weight:800;text-align:center}.win-condition-list{display:grid;gap:8px}.win-condition-row{min-height:34px}.win-condition-row input{width:18px;height:18px;accent-color:#facc15}.builder-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.builder-actions .primary-action{background:#facc15;color:#111827}.builder-actions .secondary-action{background:#e5e7eb;color:#111827}.primary-action{width:100%}.theme-select,.setup-load-select{display:grid;gap:6px;color:#cbd5e1;font-size:13px;font-weight:700}.theme-select select,.setup-load-select select{border:1px solid #374151;background:#0f172a;color:#e5e7eb;padding:0 12px}.theme-select select{text-transform:capitalize}.setup-load-select select{width:100%;min-width:0;min-height:42px;border-radius:8px;font:inherit}.join-game-form{display:grid;grid-template-columns:128px 1fr;gap:10px}.join-game-form input{min-width:0;border:1px solid #374151;background:#0f172a;box-sizing:border-box;color:#e5e7eb;padding:0 14px}.join-game-form input::placeholder{color:#94a3b8}.pre-game-status{display:grid;gap:12px;color:#cbd5e1;font-weight:600;text-align:center}.pre-game-status p,.setup-panel h1,.setup-panel p{margin:0}.setup-screen{display:grid;grid-template-columns:320px minmax(420px,720px);gap:24px;min-height:100vh;padding:24px;box-sizing:border-box;align-items:center;justify-content:center}.setup-panel,.panel{background:#1f2937;border:1px solid #374151;border-radius:16px;padding:16px}.setup-panel{display:grid;gap:18px}.setup-panel p{color:#cbd5e1;font-weight:600}.setup-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.setup-actions button{min-height:42px;border:0;border-radius:8px;background:#e5e7eb;color:#111827;font:inherit;font-weight:800}.setup-actions button:hover{background:#f9fafb}.setup-actions .primary-action{background:#facc15}.setup-actions .primary-action:hover{background:#fde047}.piece-pool{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;overflow:auto;padding-right:4px}.pool-piece{aspect-ratio:1;width:100%}.pool-piece.selected{border-color:#facc15;background:#713f12;color:#fef3c7}.setup-board{width:min(100%,calc(100vh - 48px),720px);aspect-ratio:1}.finished-screen{min-height:100vh}.page{display:grid;grid-template-columns:260px 1fr 260px;gap:24px;min-height:100vh;padding:24px;box-sizing:border-box}.actions{display:flex;gap:8px;flex-wrap:wrap}.actions button{padding:8px 10px;border:0;border-radius:8px}.board{position:relative;display:grid;gap:var(--board-gap, 4px);align-self:center}.cell,.figure-piece,.animated-piece,.battle-piece{display:grid;place-items:center;border:1px solid #374151;border-radius:8px;background:#0f172a;color:#e5e7eb;font-weight:700;overflow:hidden;padding:3px;box-sizing:border-box}.cell{min-height:42px;font-size:12px}.cell.blocked-cell{cursor:not-allowed;background:radial-gradient(circle at 35% 35%,rgba(56,189,248,.35),transparent 35%),linear-gradient(135deg,#0f766e,#164e63);border-color:#67e8f9;box-shadow:inset 0 0 0 2px #67e8f959,inset 0 0 18px #082f49e6}.blocked-cell-mark{width:70%;height:70%;border:2px solid rgba(236,254,255,.75);border-radius:35% 65% 40% 60%;background:#0e749073}.figure-piece.red,.animated-piece.red,.battle-piece.red{background:#7f1d1d}.figure-piece.blue,.animated-piece.blue,.battle-piece.blue{background:#1e3a8a}.cell.selected{outline:3px solid #facc15}.cell.setup-zone{border-color:#facc15;box-shadow:inset 0 0 0 1px #facc1559}.figure-token{display:grid;place-items:center;width:100%;height:100%;min-height:0}.figure-icon{display:block;width:100%;height:100%;aspect-ratio:1;object-fit:contain;pointer-events:none;-webkit-user-select:none;user-select:none}.figure-fallback{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.animated-piece,.battle-piece{position:absolute;z-index:30;width:calc((100% - ((var(--board-width) - 1) * var(--board-gap))) / var(--board-width));height:calc((100% - ((var(--board-height) - 1) * var(--board-gap))) / var(--board-height));pointer-events:none}.animated-piece{left:calc(var(--from-x) * (((100% - ((var(--board-width) - 1) * var(--board-gap))) / var(--board-width)) + var(--board-gap)));top:calc(var(--from-y) * (((100% - ((var(--board-height) - 1) * var(--board-gap))) / var(--board-height)) + var(--board-gap)));animation:piece-move .45s ease-in-out forwards}.battle-piece{left:calc(var(--to-x) * (((100% - ((var(--board-width) - 1) * var(--board-gap))) / var(--board-width)) + var(--board-gap)));top:calc(var(--to-y) * (((100% - ((var(--board-height) - 1) * var(--board-gap))) / var(--board-height)) + var(--board-gap)));transform:translate(24%) scale(.96);animation:battle-reveal .9s ease-in-out forwards}.animated-piece.battle-attacker{animation:piece-battle-move .9s ease-in-out forwards}.animated-piece.winner,.battle-piece.winner{outline:3px solid #facc15}.animated-piece.loser,.battle-piece.loser{opacity:.65;filter:grayscale(1)}@keyframes piece-move{to{left:calc(var(--to-x) * (((100% - ((var(--board-width) - 1) * var(--board-gap))) / var(--board-width)) + var(--board-gap)));top:calc(var(--to-y) * (((100% - ((var(--board-height) - 1) * var(--board-gap))) / var(--board-height)) + var(--board-gap)))}}@keyframes piece-battle-move{55%,to{left:calc(var(--to-x) * (((100% - ((var(--board-width) - 1) * var(--board-gap))) / var(--board-width)) + var(--board-gap)));top:calc(var(--to-y) * (((100% - ((var(--board-height) - 1) * var(--board-gap))) / var(--board-height)) + var(--board-gap)));transform:translate(-24%)}}@keyframes battle-reveal{0%,45%{opacity:0;transform:translate(24%) scale(.9)}55%,to{opacity:1;transform:translate(24%) scale(.96)}}@media(max-width:760px){.join-game-form,.board-size-options,.builder-actions,.unit-count-grid,.setup-screen,.page{grid-template-columns:1fr}}