:root{--bg: #1a1410;--bg-elev: #221a14;--bg-cell: #2c2118;--bg-cell-home: #3a2a18;--text: #ece4d4;--text-muted: #9a8e7a;--accent: #c9a86a;--accent-strong: #e8c984;--error: #d96a6a;--water: #243a4a;--border: #3a2c20;--light: #d9bd6d;--horde: #6e3a5a;--valid-move: #4e7a3a;--valid-attack: #8a3a3a;--last-move: #2f5a8a;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color-scheme:dark}*{box-sizing:border-box}html,body,#root{margin:0;padding:0;min-height:100vh;background:var(--bg);color:var(--text)}.app{display:flex;flex-direction:column;min-height:100vh}.app-header{background:var(--bg-elev);border-bottom:1px solid var(--border);padding:1rem 1.5rem;display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}.app-header h1{margin:0;font-size:1.4rem;color:var(--accent);letter-spacing:.04em}.app-header nav{display:flex;gap:1.25rem;flex-wrap:wrap;align-items:center}.app-header nav a{color:var(--text-muted);text-decoration:none;font-size:.95rem}.app-header nav a:hover{color:var(--text)}.user-chip{background:var(--bg-cell);color:var(--accent);padding:.25rem .6rem;border-radius:999px;font-size:.85rem}.link-button{background:none;border:none;color:var(--text-muted);cursor:pointer;font:inherit;padding:0}.link-button:hover{color:var(--text)}.locale-switcher{margin-left:auto;background:var(--bg-cell);color:var(--accent);border:1px solid var(--border);border-radius:4px;padding:.25rem .6rem;font-size:.8rem;font-weight:700}.locale-switcher:hover{border-color:var(--accent);background:var(--bg-elev)}.app-main{flex:1;padding:1.5rem;max-width:1200px;width:100%;margin:0 auto}.page h2{color:var(--accent);margin-top:0}.placeholder,.muted{color:var(--text-muted)}.muted{font-size:.9rem}.error{color:var(--error);margin:.5rem 0}.form{display:flex;flex-direction:column;gap:.75rem;max-width:28rem}.form label{display:flex;flex-direction:column;gap:.25rem}.form label span{font-size:.85rem;color:var(--text-muted)}.form input,.form select,.panel select{background:var(--bg-cell);color:var(--text);border:1px solid var(--border);border-radius:4px;padding:.5rem .6rem;font:inherit}button{background:var(--bg-cell);color:var(--text);border:1px solid var(--border);border-radius:4px;padding:.5rem .9rem;font:inherit;cursor:pointer;transition:background .15s,border-color .15s}button:hover:not(:disabled){background:var(--bg-elev);border-color:var(--accent)}button:disabled{opacity:.5;cursor:not-allowed}button.primary{background:var(--accent);color:var(--bg);border-color:var(--accent)}button.primary:hover:not(:disabled){background:var(--accent-strong)}.panel{background:var(--bg-elev);border:1px solid var(--border);border-radius:6px;padding:1rem 1.25rem;margin-bottom:1rem}.panel h3{margin-top:0;color:var(--accent)}.inline-label{display:flex;gap:.5rem;align-items:center;margin-right:1rem}.games-list{list-style:none;padding:0;margin:0}.games-list li{display:grid;grid-template-columns:1fr auto auto auto;gap:.75rem;align-items:center;padding:.5rem 0;border-bottom:1px solid var(--border)}.games-list li:last-child{border-bottom:none}.game-creator{color:var(--accent)}.game-status,.game-time{color:var(--text-muted);font-size:.85rem}.board{display:grid;grid-template-columns:repeat(10,minmax(36px,1fr));grid-template-rows:repeat(10,minmax(36px,1fr));width:min(85vw,70vh,720px);aspect-ratio:1 / 1;gap:2px;background:var(--border);border:2px solid var(--border);border-radius:4px}.cell{background:var(--bg-cell);border:none;padding:0;margin:0;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:outline .1s,box-shadow .1s;position:relative;overflow:hidden}.cell:disabled{cursor:default}.cell-tile-light{background-image:url(/img/tiles.png);background-size:900% 300%;background-position:25% 0%;background-repeat:no-repeat}.cell-tile-horde{background-image:url(/img/tiles.png);background-size:900% 300%;background-position:25% 50%;background-repeat:no-repeat}.cell-tile-water{background-image:url(/img/tiles.png);background-size:900% 300%;background-position:25% 100%;background-repeat:no-repeat}.cell-tile-neutral{background:var(--bg-cell)}.cell-selected{outline:3px solid var(--accent);outline-offset:-3px;z-index:2}.cell-valid-move:after,.cell-valid-attack:after{content:"";position:absolute;top:25%;right:25%;bottom:25%;left:25%;border-radius:50%;pointer-events:none}.cell-valid-move:after{background:#4e7a3a8c}.cell-valid-attack:after{background:#d95a5a8c}.cell-last-from,.cell-last-to{box-shadow:inset 0 0 0 2px var(--last-move)}.piece{width:92%;height:92%;border-radius:4px;position:relative;-webkit-user-select:none;user-select:none;overflow:hidden;display:flex;align-items:center;justify-content:center}.piece-art{background-image:url(/img/soldiers.png);background-size:600% 400%;background-repeat:no-repeat}.piece-power-overlay{position:absolute;top:2px;left:4px;font-size:.95rem;font-weight:700;color:#fff;text-shadow:-1px -1px 0 #000,1px -1px 0 #000,-1px 1px 0 #000,1px 1px 0 #000,0 0 4px rgba(0,0,0,.8);z-index:2}.piece-light{box-shadow:inset 0 0 0 1px #d9bd6d80}.piece-horde{box-shadow:inset 0 0 0 1px #b464c866}.piece-hidden{background-image:none;background:repeating-linear-gradient(45deg,#3a2a18,#3a2a18 6px,#2a1a10 6px,#2a1a10 12px);color:var(--accent)}.piece-light.piece-hidden{background:repeating-linear-gradient(45deg,#b8a868,#b8a868 6px,#9a8a40 6px,#9a8a40 12px)}.piece-horde.piece-hidden{background:repeating-linear-gradient(45deg,#4e2840,#4e2840 6px,#2a1424 6px,#2a1424 12px)}.piece-back{font-size:1.6rem;font-weight:700}.sprite-LIGHT-ANCIENT_DRAGON{background-position:0% 0%}.sprite-LIGHT-ARCHANGEL{background-position:20% 0%}.sprite-LIGHT-ARCHMAGE{background-position:40% 0%}.sprite-LIGHT-HIGH_PRIEST{background-position:60% 0%}.sprite-LIGHT-TREANT{background-position:80% 0%}.sprite-LIGHT-UNICORN{background-position:100% 0%}.sprite-LIGHT-PALADIN{background-position:0% 33.333%}.sprite-LIGHT-SCOUT{background-position:20% 33.333%}.sprite-LIGHT-SAPPER{background-position:40% 33.333%}.sprite-LIGHT-SPY{background-position:60% 33.333%}.sprite-LIGHT-MINE{background-position:80% 33.333%}.sprite-LIGHT-ARTIFACT{background-position:100% 33.333%}.sprite-HORDE-BALOR{background-position:0% 66.667%}.sprite-HORDE-LICH{background-position:20% 66.667%}.sprite-HORDE-BEHOLDER{background-position:40% 66.667%}.sprite-HORDE-DEMON{background-position:60% 66.667%}.sprite-HORDE-ILLITHID{background-position:80% 66.667%}.sprite-HORDE-OGRE{background-position:100% 66.667%}.sprite-HORDE-FALLEN_PALADIN{background-position:0% 100%}.sprite-HORDE-SCOUT{background-position:20% 100%}.sprite-HORDE-SAPPER{background-position:40% 100%}.sprite-HORDE-SPY{background-position:60% 100%}.sprite-HORDE-MINE{background-position:80% 100%}.sprite-HORDE-ARTIFACT{background-position:100% 100%}.piece-power{font-size:1.1rem;font-weight:700}.piece-name{font-size:.65rem;opacity:.9;margin-top:1px}.setup-layout{display:grid;grid-template-columns:1fr 300px;gap:1.5rem;align-items:start}.setup-board-wrap{display:flex;flex-direction:column;align-items:center}.setup-board{margin-bottom:1rem}.cell-locked{opacity:.5;pointer-events:none;filter:grayscale(.6) brightness(.6)}.setup-actions{display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center}.army-panel{background:var(--bg-elev);border:1px solid var(--border);border-radius:6px;padding:1rem}.army-panel h3{margin-top:0;color:var(--accent)}.army-list{display:flex;flex-direction:column;gap:.35rem}.army-item{display:grid;grid-template-columns:2rem 1fr auto;gap:.5rem;align-items:center;padding:.4rem .6rem;text-align:left}.army-item-power{font-weight:700;color:var(--accent)}.army-item-name{font-size:.85rem}.army-item-count{color:var(--text-muted);font-size:.8rem}.army-item-selected{outline:2px solid var(--accent)}.game-layout{display:grid;grid-template-columns:1fr 280px;gap:1.5rem;align-items:start}.game-board-wrap{display:flex;justify-content:center}.game-header{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap}.game-header h2{margin:0}.game-meta{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap}.turn-indicator{padding:.3rem .6rem;border-radius:4px;background:var(--bg-cell);color:var(--text-muted)}.turn-indicator.my-turn{background:var(--accent);color:var(--bg);font-weight:700}.ws-status{font-size:.8rem;padding:.2rem .5rem;border-radius:4px}.ws-on{background:#4e7a3a4d;color:#a0d080}.ws-off{background:#8a3a3a4d;color:#d99090}.combat-log{background:var(--bg-elev);border:1px solid var(--border);border-radius:6px;padding:1rem;max-height:70vh;overflow-y:auto}.combat-log h3{margin-top:0;color:var(--accent)}.combat-log ol{padding-left:1.5rem;margin:0}.combat-log li{margin-bottom:.35rem;font-size:.85rem}.log-you{color:var(--accent);font-weight:700}.log-them{color:var(--text-muted)}.health-grid{display:grid;grid-template-columns:max-content 1fr;gap:.4rem 1rem;background:var(--bg-elev);padding:1rem 1.25rem;border:1px solid var(--border);border-radius:6px;max-width:28rem}.health-grid dt{color:var(--text-muted)}.health-grid dd{margin:0}.app-footer{border-top:1px solid var(--border);padding:.75rem 1.5rem;color:var(--text-muted);text-align:center}@keyframes piece-appear{0%{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}@keyframes flash-attack{0%,to{background-color:transparent}50%{background-color:#d95a5a99}}.piece{animation:piece-appear .18s ease-out}.cell-valid-move:after,.cell-valid-attack:after{animation:piece-appear .15s ease-out}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:100;animation:piece-appear .18s ease-out}.modal{background:var(--bg-elev);border:1px solid var(--border);border-radius:8px;padding:2rem 2.5rem;max-width:28rem;width:90vw;text-align:center}.modal h2{margin-top:0}.modal-actions{display:flex;gap:.75rem;justify-content:center;margin-top:1rem}.victory-modal.victory-win h2{color:var(--accent-strong)}.victory-modal.victory-loss h2{color:var(--error)}.victory-winner{font-size:1.1rem}.victory-reason{color:var(--text-muted)}.rules-armies{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem;margin:1rem 0}.rules-armies h4{color:var(--accent);margin-top:0}.rules-armies ul{padding-left:1.2rem}.game-sidebar{display:flex;flex-direction:column;gap:1rem}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.75rem;margin:1rem 0 1.5rem}.stat-card{background:var(--bg-elev);border:1px solid var(--border);border-radius:6px;padding:1rem;text-align:center}.stat-card.stat-win{border-color:#a0d08080}.stat-card.stat-loss{border-color:#d9909080}.stat-value{font-size:1.8rem;font-weight:700;color:var(--accent)}.stat-label{font-size:.85rem;color:var(--text-muted);margin-top:.25rem}.admin-panel{margin-top:2rem;border-top:2px solid var(--accent);padding-top:1rem}.admin-panel h3{color:var(--accent)}.admin-panel h4{color:var(--accent);margin-top:0}.admin-form{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center}.admin-form input{background:var(--bg-cell);color:var(--text);border:1px solid var(--border);border-radius:4px;padding:.4rem .6rem;font:inherit;min-width:12rem}.admin-form button.danger{background:#d95a5a33;border-color:var(--error);color:#ff9a9a}.admin-form button.danger:hover:not(:disabled){background:#d95a5a59}.badge{display:inline-block;padding:.1rem .4rem;border-radius:3px;font-size:.7rem;font-weight:700;margin-right:.3rem}.badge-bot{background:#7878784d;color:var(--text-muted)}.badge-admin{background:#c9a86a4d;color:var(--accent)}.rating-card{background:linear-gradient(135deg,#c9a86a2e,#c9a86a0d);border:1px solid var(--accent);border-radius:8px;padding:1rem 1.5rem;margin:1rem 0;display:flex;align-items:baseline;gap:1.5rem;flex-wrap:wrap}.rating-label{color:var(--accent);text-transform:uppercase;font-size:.8rem;letter-spacing:.05em}.rating-value{font-size:2.2rem;font-weight:700;color:var(--accent-strong)}.rating-meta{color:var(--text-muted);font-size:.85rem}.leaderboard-table tbody tr.leaderboard-me{background:#c9a86a1f;font-weight:700}.history-table{width:100%;border-collapse:collapse;background:var(--bg-elev);border:1px solid var(--border);border-radius:6px;overflow:hidden}.history-table th,.history-table td{padding:.6rem .75rem;text-align:left;border-bottom:1px solid var(--border)}.history-table th{color:var(--accent);font-weight:400;font-size:.85rem;background:var(--bg-cell)}.history-table tr:last-child td{border-bottom:none}.result-win{color:#a0d080;font-weight:700}.result-loss{color:#d99090;font-weight:700}.result-cancel{color:var(--text-muted)}.pagination{display:flex;justify-content:center;align-items:center;gap:1rem;margin-top:1rem}.reconnect-banner{background:#d9905a2e;border:1px solid rgba(217,144,90,.5);color:#f0c890;padding:.6rem 1rem;border-radius:6px;margin:.75rem 0;text-align:center;font-size:.9rem}.piece-shield{position:absolute;top:2px;right:3px;font-size:.9rem;color:#9adfff;text-shadow:0 0 3px rgba(0,0,0,.8),0 0 6px rgba(120,200,255,.6);z-index:3}.piece-ability-spent{position:absolute;bottom:2px;right:4px;font-size:.6rem;color:var(--accent);text-shadow:0 0 3px rgba(0,0,0,.8);z-index:3}.ability-bar{background:#c9a86a26;border:1px solid var(--accent);border-radius:6px;padding:.5rem .9rem;margin:.5rem 0;display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.chat-panel{background:var(--bg-elev);border:1px solid var(--border);border-radius:6px;padding:1rem;display:flex;flex-direction:column;max-height:40vh}.chat-panel h3{margin-top:0;color:var(--accent)}.chat-messages{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:.4rem;margin-bottom:.5rem;min-height:6rem}.chat-message{padding:.35rem .55rem;border-radius:4px;background:var(--bg-cell);font-size:.85rem}.chat-mine{background:#c9a86a26;border-left:2px solid var(--accent)}.chat-them{border-left:2px solid var(--text-muted)}.chat-sender{font-weight:700;color:var(--accent);margin-right:.5rem}.chat-time{color:var(--text-muted);font-size:.7rem}.chat-content{margin-top:.15rem;word-wrap:break-word}.chat-input{display:flex;gap:.5rem}.chat-input input{flex:1;background:var(--bg-cell);color:var(--text);border:1px solid var(--border);border-radius:4px;padding:.4rem .6rem;font:inherit}.ability-bar input{background:var(--bg-cell);color:var(--text);border:1px solid var(--border);border-radius:4px;padding:.3rem .5rem;font-size:.85rem;min-width:18rem}.reconnect-banner.reconnect-urgent{background:#d95a5a38;border-color:#d95a5aa6;color:#ff9a9a;animation:piece-appear .5s ease-out}@media (max-width: 600px){.stats-grid{grid-template-columns:repeat(2,1fr)}.history-table{font-size:.8rem}.history-table th,.history-table td{padding:.4rem .5rem}}@media (max-width: 900px){.app-main{padding:1rem}.setup-layout,.game-layout{grid-template-columns:1fr;gap:1rem}.combat-log{max-height:30vh}.board{width:min(96vw,80vh,720px)}}.mobile-tabs{display:none;gap:.25rem;background:var(--bg-elev);border:1px solid var(--border);border-radius:6px;padding:.25rem}.mobile-tabs button{flex:1;background:transparent;border:none;padding:.5rem;color:var(--text-muted);border-radius:4px}.mobile-tabs button.active{background:var(--accent);color:var(--bg)}@media (max-width: 600px){.app-header{padding:.5rem .75rem;gap:.75rem}.app-header h1{font-size:1.1rem}.app-header nav{gap:.6rem;font-size:.85rem}.app-main{padding:.75rem}.board{width:100vw;max-width:96vw;grid-template-columns:repeat(10,minmax(32px,1fr));grid-template-rows:repeat(10,minmax(32px,1fr))}.piece-power-overlay{font-size:.75rem;top:1px;left:2px}.mobile-tabs{display:flex;margin:.75rem 0}.setup-layout,.game-layout{display:flex;flex-direction:column}.army-panel,.combat-log{max-height:40vh;overflow-y:auto}.panel-hidden-mobile{display:none}.setup-actions button{flex:1 1 30%;min-width:100px}.game-header{gap:.5rem}.game-header h2{font-size:1.05rem}.turn-indicator{font-size:.85rem;padding:.2rem .5rem}}@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px){.game-layout,.setup-layout{display:grid;grid-template-columns:1fr 200px}.board{width:min(70vw,92vh)}.combat-log,.army-panel{max-height:88vh}.mobile-tabs{display:none}}