:root{
  --bg:#061018;--panel:#0b1720;--panel2:#111f2a;--text:#edf6fb;--muted:#92a9b8;
  --cyan:#31c6ff;--cyan2:#0e7ea7;--orange:#ff7a35;--line:#29404e;--danger:#ff4f55;
  --ok:#53e39e;--gold:#f5c85b;--shadow:0 18px 45px rgba(0,0,0,.38);
}
*{box-sizing:border-box}html{background:var(--bg);color:var(--text);font-family:Inter,Segoe UI,Arial,sans-serif;scroll-behavior:smooth}body{margin:0;min-height:100vh;background:radial-gradient(circle at 50% 0,#153044 0,#061018 55%);overflow-x:hidden}button,select{font:inherit}button{cursor:pointer}.screen{display:none;min-height:calc(100vh - 68px)}.screen.active{display:block}.topbar{position:sticky;top:0;z-index:50;height:68px;display:flex;align-items:center;gap:24px;padding:0 28px;background:rgba(4,11,16,.9);backdrop-filter:blur(18px);border-bottom:1px solid rgba(111,183,218,.18)}.brand{display:flex;align-items:center;gap:10px;color:var(--text);background:none;border:0;padding:0}.brand-mark{display:grid;place-items:center;width:34px;height:34px;border:2px solid var(--cyan);border-radius:50%;color:var(--cyan);font-size:24px;box-shadow:0 0 18px rgba(49,198,255,.28)}.brand b{letter-spacing:.12em;font-size:18px}.brand small{display:block;color:var(--cyan);font-size:11px;letter-spacing:.4em;text-align:left}.main-nav{display:flex;gap:4px;flex:1}.main-nav button{color:#bdd0db;background:none;border:0;padding:12px 14px;border-radius:10px}.main-nav button:hover{background:#10212c;color:white}.profile-chip{display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--line);border-radius:12px;background:rgba(17,31,42,.8);font-size:12px;color:var(--muted)}.profile-chip b{color:white}.icon-button{background:none;border:0;color:white;font-size:16px}.home-screen{position:relative;isolation:isolate;background:url('assets/bg_menu.webp') center/cover no-repeat;min-height:calc(100vh - 68px)}.home-screen:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(1,7,11,.94) 0%,rgba(2,10,15,.72) 42%,rgba(2,8,12,.18) 72%,rgba(2,8,12,.5) 100%),linear-gradient(0deg,#061018 0%,transparent 45%)}.home-content{max-width:760px;padding:10vh 7vw 60px}.eyebrow{color:var(--cyan);font-weight:700;letter-spacing:.18em;font-size:12px}.home-content h1{margin:12px 0 10px;font-size:clamp(52px,8vw,102px);line-height:.88;letter-spacing:.02em;text-shadow:0 8px 30px #000}.lead{font-size:clamp(18px,2vw,26px);line-height:1.45;color:#d8e7ef;max-width:680px}.home-actions{display:flex;gap:12px;margin:30px 0 48px}.primary,.secondary,.back-button{border-radius:10px;padding:12px 18px;font-weight:700;border:1px solid transparent;transition:.2s}.primary{background:linear-gradient(135deg,#1197c3,#31c6ff);color:#041018;box-shadow:0 8px 22px rgba(49,198,255,.22)}.primary:hover{transform:translateY(-1px);filter:brightness(1.08)}.primary:disabled{opacity:.4;cursor:not-allowed;transform:none}.secondary,.back-button{background:rgba(11,23,32,.82);border-color:#3a596c;color:#eaf5fa}.secondary:hover,.back-button:hover{border-color:var(--cyan);background:#10232e}.large{padding:16px 24px;font-size:16px}.compact{padding:8px 12px;font-size:12px}.feature-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.feature-row article{padding:16px;background:rgba(7,17,24,.72);border:1px solid rgba(78,137,167,.3);border-radius:14px}.feature-row b{display:block;color:white;font-size:18px}.feature-row span{display:block;margin-top:4px;color:var(--muted);font-size:13px;line-height:1.35}.page-screen{padding:52px clamp(20px,5vw,72px) 80px}.page-head{max-width:900px;margin:0 auto 34px;text-align:center}.page-head h2{font-size:clamp(34px,5vw,58px);margin:8px 0 10px}.page-head p{color:var(--muted);font-size:17px;line-height:1.5}.mode-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;max-width:1200px;margin:auto}.mode-card{overflow:hidden;border:1px solid #274354;border-radius:18px;background:linear-gradient(180deg,#12212c,#0a151d);box-shadow:var(--shadow)}.mode-image{height:280px;background-size:cover;background-position:center;position:relative}.mode-image:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#0a151d,transparent 65%)}.lines-mode .mode-image{background-image:url('assets/bg_lines.webp')}.tactical-mode .mode-image{background-image:url('assets/bg_tactical.webp')}.mode-body{padding:24px}.mode-duration{color:var(--gold);font-size:12px;letter-spacing:.12em}.mode-body h3{font-size:30px;margin:8px 0}.mode-body p,.mode-body li{color:#b9cbd5;line-height:1.55}.mode-body ul{padding-left:18px}.mode-body .primary{width:100%;margin-top:12px}.game-screen{padding:14px 20px 50px}.game-hud{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:14px;max-width:1440px;margin:0 auto 12px}.back-button{padding:9px 12px}.round-indicator{text-align:center;color:var(--muted)}.round-indicator b{color:white}.scoreboard{display:flex;gap:10px;align-items:center;padding:9px 14px;border:1px solid var(--line);border-radius:10px;background:#0c1821}.scoreboard b{font-size:20px;color:white}.scoreboard i{color:var(--muted);font-style:normal}.lines-screen{background:radial-gradient(circle at 50% 10%,rgba(28,80,105,.35),transparent 45%),#061018}.stake-bar{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:center;max-width:1260px;margin:0 auto 12px;padding:10px 16px;border:1px solid #314a59;border-radius:12px;background:#0b1720}.stake-bar>div:last-child{text-align:right}.stake-bar small{display:block;color:var(--muted)}.stake-bar span{font-weight:700}.stake-core{color:var(--gold);font-size:12px;letter-spacing:.16em}.lines-board{max-width:1260px;margin:auto;padding:12px 20px 18px;border:1px solid #294658;border-radius:18px;background:linear-gradient(180deg,rgba(15,31,43,.96),rgba(4,13,19,.95)),url('assets/bg_lines.webp') center/cover;box-shadow:var(--shadow)}.side-label{text-align:center;font-size:11px;letter-spacing:.18em;color:var(--muted);margin:4px}.enemy-label{color:#ffb18a}.player-label{color:#8ee5ff}.lanes-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;min-height:220px}.lane-slot{position:relative;min-height:220px;border:1px dashed #496476;border-radius:14px;display:flex;align-items:stretch;justify-content:center;background:rgba(0,0,0,.24);overflow:hidden;transition:.2s}.lane-slot:hover{border-color:var(--cyan)}.lane-slot.empty:after{content:"Выберите героя";place-self:center;color:#67808f;font-size:13px}.enemy-lanes .lane-slot.empty:after{content:"СКРЫТАЯ КАРТА"}.card-back{width:100%;min-height:100%;display:grid;place-items:center;background:radial-gradient(circle,#173b50,#07131b 66%);border:1px solid #3f6174;color:#77dfff;font-size:40px}.versus-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;text-align:center;color:#73909f;font-size:10px;letter-spacing:.18em;padding:8px 0}.draft-panel{max-width:1260px;margin:14px auto 0;padding:18px;border:1px solid #263f4e;border-radius:18px;background:#0a151d}.draft-head,.loot-head,.hand-header{display:flex;justify-content:space-between;align-items:flex-end;gap:16px}.draft-head h3,.loot-head h3,.hand-header h3{margin:0}.draft-head p,.loot-head p,.hand-header span{margin:4px 0 0;color:var(--muted);font-size:12px}.draft-actions{display:flex;gap:10px}.hand-scroll{display:flex;gap:12px;overflow-x:auto;padding:14px 2px 8px;scroll-snap-type:x proximity}.loot-hand{display:flex;flex-wrap:wrap;gap:10px;padding-top:10px}.hero-card{position:relative;flex:0 0 180px;min-height:260px;border-radius:14px;overflow:hidden;border:1px solid #3b5868;background:#0f1c25;box-shadow:0 10px 25px rgba(0,0,0,.32);scroll-snap-align:start;transition:.18s}.hero-card:hover{transform:translateY(-3px);border-color:var(--cyan)}.hero-card.selected{outline:2px solid var(--gold);transform:translateY(-4px)}.hero-card.compact-card{flex:1 1 auto;width:100%;min-height:210px}.hero-art{height:145px;background-size:cover;background-position:center top;position:relative}.hero-art:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#0e1a23,transparent 70%)}.hero-card.vandals{border-color:#70422d}.hero-card.vandals:hover{border-color:var(--orange)}.hero-info{padding:10px 11px}.hero-name-row{display:flex;justify-content:space-between;gap:8px;align-items:center}.hero-name{font-weight:800;font-size:15px}.stars{color:var(--gold);font-size:11px;white-space:nowrap}.role{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-top:2px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:9px 0}.stat{padding:5px 4px;border-radius:7px;background:#172733;text-align:center;font-size:11px}.stat b{display:block;font-size:15px}.stat.strength b{color:#ff6c70}.stat.tech b{color:#55d3ff}.stat.mutation b{color:#8ee676}.ability{font-size:10px;line-height:1.35;color:#c2d2da}.ability b{display:block;color:white}.card-actions{position:absolute;inset:auto 8px 8px;display:flex;gap:5px;opacity:0;transition:.2s}.hero-card:hover .card-actions{opacity:1}.card-actions button{flex:1;border:0;border-radius:7px;padding:6px;background:#174e68;color:white;font-size:10px}.loot-card{position:relative;min-width:160px;max-width:220px;flex:1;padding:12px;border:1px solid #6b5a2d;border-radius:12px;background:linear-gradient(135deg,#201b10,#111b22);color:#eaf5fa;transition:.18s;text-align:left}.loot-card:hover{border-color:var(--gold);transform:translateY(-2px)}.loot-card.selected{outline:2px solid var(--gold)}.loot-icon{font-size:25px;color:var(--gold)}.loot-card b{display:block;margin:4px 0}.loot-card small{color:#b9c6cc;line-height:1.35}.attached-loot{position:absolute;right:7px;top:7px;z-index:3;padding:5px 7px;border-radius:8px;background:#4b3d16;color:#ffe99a;font-size:10px;border:1px solid #8b7734}.line-result{position:absolute;inset:auto 8px 8px;z-index:4;padding:7px;border-radius:8px;text-align:center;font-weight:800;font-size:11px;background:rgba(3,10,14,.88)}.line-result.win{color:var(--ok)}.line-result.loss{color:#ff8585}.line-result.draw{color:#d7dce0}.tactical-screen{background:linear-gradient(rgba(5,14,20,.72),rgba(5,14,20,.92)),url('assets/bg_tactical.webp') center/cover fixed}.tactical-layout{display:grid;grid-template-columns:240px minmax(420px,780px) 250px;gap:14px;max-width:1400px;margin:auto;align-items:start}.mission-panel,.context-panel,.tactical-hand-panel{background:rgba(6,17,24,.94);border:1px solid #2f4a59;border-radius:15px;padding:14px}.mission-panel h3,.context-panel h3{margin:0 0 10px}.mission-card{padding:10px;border:1px solid #355263;border-radius:10px;background:#101f29;margin-bottom:8px}.mission-card b{display:block;font-size:12px}.mission-card small{display:block;color:var(--muted);line-height:1.35;margin-top:4px}.base-status{display:flex;justify-content:space-between;padding:10px;margin-top:8px;border-radius:9px;background:#10212c}.lex-base b{color:var(--cyan)}.van-base b{color:var(--orange)}.board-wrap{min-width:0}.tactical-board{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;aspect-ratio:1/1;padding:14px;border:1px solid #3f5f70;border-radius:18px;background:radial-gradient(circle at center,rgba(61,100,120,.2),rgba(1,7,10,.9)),url('assets/bg_tactical.webp') center/cover;box-shadow:var(--shadow)}.board-cell{position:relative;border:1px solid rgba(112,156,180,.38);border-radius:12px;background:rgba(4,12,17,.62);overflow:hidden;min-width:0}.board-cell.center-zone{box-shadow:inset 0 0 0 1px rgba(245,200,91,.28)}.board-cell.ruin:before{content:"РУИНЫ";position:absolute;left:5px;bottom:5px;color:#d8c16f;font-size:8px;letter-spacing:.12em;z-index:1}.board-cell.highlight{border-color:var(--cyan);box-shadow:0 0 0 2px rgba(49,198,255,.3),inset 0 0 26px rgba(49,198,255,.15)}.board-cell.attack-highlight{border-color:var(--danger);box-shadow:0 0 0 2px rgba(255,79,85,.28),inset 0 0 28px rgba(255,79,85,.18)}.base-piece{position:absolute;inset:8px;border-radius:10px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;border:1px solid}.base-piece.lexards{background:rgba(13,78,107,.78);border-color:var(--cyan)}.base-piece.vandals{background:rgba(103,49,26,.8);border-color:var(--orange)}.base-piece strong{font-size:13px}.base-piece small{font-size:9px;color:#d6e6ed}.unit{position:absolute;inset:5px;border-radius:10px;overflow:hidden;border:2px solid #56cdf6;background:#0e1c25;cursor:pointer}.unit.vandals{border-color:#ff8a50}.unit.selected{box-shadow:0 0 0 3px var(--gold)}.unit.wounded:after{content:"РАНЕН";position:absolute;inset:auto 0 0;background:#8b2528;color:white;font-size:8px;text-align:center;padding:3px}.unit-art{height:62%;background-size:cover;background-position:center top}.unit-info{padding:3px 5px;font-size:9px;background:#0b161d}.unit-info b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.unit-stats{display:flex;gap:5px;margin-top:2px}.unit-stats span:nth-child(1){color:#ff777a}.unit-stats span:nth-child(2){color:#59d3ff}.unit-stats span:nth-child(3){color:#99ed7c}.tactical-message{margin-top:8px;padding:10px;border:1px solid #315064;border-radius:10px;background:#0a1720;color:#c8d9e1;text-align:center;font-size:13px}.context-card{min-height:160px;border:1px dashed #3c596a;border-radius:11px;padding:10px;color:var(--muted)}.context-card.empty{display:grid;place-items:center;text-align:center}.context-actions{display:grid;gap:8px;margin-top:10px}.context-actions button,.turn-actions button{width:100%}.turn-actions{display:grid;gap:8px;margin-top:10px}.tactical-hand-panel{max-width:1400px;margin:14px auto 0}.collection-controls{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-bottom:22px}.filter,.collection-controls select,.rules-tabs button{padding:10px 14px;border-radius:10px;border:1px solid #385464;background:#0d1b24;color:white}.filter.active,.rules-tabs button.active{border-color:var(--cyan);color:var(--cyan);background:#0c2b3a}.collection-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px;max-width:1300px;margin:auto}.collection-grid .hero-card{width:100%;flex:none}.lore-screen{padding-top:0}.lore-hero{min-height:440px;margin:0 calc(-1 * clamp(20px,5vw,72px));display:flex;align-items:flex-end;padding:60px clamp(20px,7vw,100px);background:linear-gradient(90deg,rgba(3,10,14,.94),rgba(3,10,14,.2)),url('assets/bg_lore.webp') center/cover}.lore-copy{max-width:640px}.lore-copy h2{font-size:72px;margin:4px 0}.lore-copy p{font-size:20px;line-height:1.5;color:#dbe9ef}.lore-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;max-width:1100px;margin:35px auto}.lore-grid article{padding:24px;border:1px solid #294758;border-radius:15px;background:#0b1821}.lore-grid h3{font-size:26px;margin:0 0 8px}.lore-grid p{color:var(--muted);line-height:1.6}.rules-tabs{display:flex;justify-content:center;gap:8px;margin-bottom:24px}.rules-content{display:none;max-width:850px;margin:auto;padding:26px;border:1px solid #2c4858;border-radius:16px;background:#0b1821}.rules-content.active{display:block}.rules-content li,.rules-content p{color:#c3d3db;line-height:1.6}.rule-callout{padding:16px;border-left:4px solid var(--orange);background:#25170f;border-radius:8px;color:#ffe1d1}.modal-layer[hidden]{display:none}.modal-layer{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.72);backdrop-filter:blur(8px);display:grid;place-items:center;padding:20px}.modal{position:relative;width:min(980px,96vw);max-height:90vh;overflow:auto;border:1px solid #436477;border-radius:18px;background:#09161e;box-shadow:0 35px 90px rgba(0,0,0,.58);padding:26px}.modal-close{position:absolute;right:12px;top:10px;width:36px;height:36px;border:1px solid #365365;border-radius:50%;background:#0c1d27;color:white;font-size:22px;z-index:2}.modal h2{margin-top:0}.result-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.result-lane{padding:12px;border:1px solid #355263;border-radius:13px;background:#0e1c25}.result-lane h4{text-align:center;margin:0 0 8px}.comparison-row{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;margin:5px 0;font-size:12px}.comparison-row span:first-child{text-align:right}.comparison-row b{padding:4px 7px;border-radius:6px;background:#172834}.comparison-row span:last-child{text-align:left}.round-summary{text-align:center;margin-top:18px;padding:15px;border-radius:12px;background:#102530}.toast{position:fixed;left:50%;bottom:24px;z-index:200;transform:translate(-50%,20px);opacity:0;padding:12px 18px;border:1px solid #416274;border-radius:10px;background:#0b1c26;color:white;transition:.25s;pointer-events:none}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:1050px){.tactical-layout{grid-template-columns:1fr}.mission-panel,.context-panel{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.mission-panel h3,.context-panel h3{grid-column:1/-1}.tactical-board{max-width:720px;margin:auto}.game-hud{grid-template-columns:auto 1fr auto}.game-hud .compact{display:none}.main-nav{display:none}.profile-chip span{display:none}}
@media(max-width:760px){.topbar{height:60px;padding:0 12px}.brand b{font-size:15px}.profile-chip{margin-left:auto}.screen{min-height:calc(100vh - 60px)}.home-content{padding:12vh 20px 40px}.home-actions{flex-direction:column}.feature-row{grid-template-columns:1fr}.page-screen{padding:35px 14px 60px}.mode-grid{grid-template-columns:1fr}.mode-image{height:220px}.game-screen{padding:8px}.game-hud{grid-template-columns:auto 1fr;gap:8px}.scoreboard{grid-column:1/-1;justify-content:center}.round-indicator{text-align:right}.stake-bar{grid-template-columns:1fr 1fr}.stake-core{display:none}.lanes-row{gap:6px;min-height:180px}.lane-slot{min-height:180px}.lines-board{padding:8px}.hero-card{flex-basis:155px;min-height:235px}.hero-art{height:125px}.draft-head{align-items:flex-start;flex-direction:column}.draft-actions{width:100%}.draft-actions button{flex:1}.result-grid{grid-template-columns:1fr}.tactical-layout{display:block}.mission-panel,.context-panel{display:block;margin-bottom:10px}.tactical-board{gap:5px;padding:7px}.unit{inset:2px}.unit-art{height:55%}.unit-info{font-size:7px}.collection-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.collection-grid .hero-card{min-height:245px}.lore-hero{min-height:380px}.lore-copy h2{font-size:50px}.lore-grid{grid-template-columns:1fr}.modal{padding:18px}.loot-card{min-width:145px}.versus-strip{gap:6px;font-size:8px}}
@media(max-width:420px){.collection-grid{grid-template-columns:1fr}.profile-chip{padding:5px}.brand small{display:none}.lane-slot{min-height:165px}.hero-card.compact-card{min-height:165px}.hero-card.compact-card .hero-art{height:92px}.hero-card.compact-card .ability{display:none}.stats{gap:2px}.stat{font-size:9px}.stat b{font-size:13px}}