:root{--space-0: #0b3540;--space-1: #06202a;--space-2: #03100e;--bg: #04120f;--bg-elev: rgba(8, 34, 41, .72);--bg-elev-2: rgba(12, 45, 54, .85);--bg-solid: #082129;--border: rgba(60, 180, 200, .28);--border-strong: rgba(54, 197, 255, .55);--text: #eefdf6;--text-dim: #9fc8bf;--text-faint: #7fabb8;--accent: #ffc21e;--accent-strong: #ffd45e;--accent-soft: rgba(255, 194, 30, .14);--green: #3ddc84;--energy: #36c5ff;--power: #ff9e16;--danger: #e94e4e;--type-unit: #3ddc84;--type-spell: #b388ff;--type-trap: #ff8ec4;--cta-from: #7debff;--cta-to: #13a6d6;--cta-edge: #ffd23f;--cta-text: #06262f;--radius: 12px;--radius-sm: 8px;--radius-lg: 18px;--shadow: 0 10px 30px rgba(0, 0, 0, .5);--glow-energy: 0 0 10px rgba(54, 197, 255, .45);--glow-accent: 0 0 14px rgba(255, 194, 30, .35);--maxw: 1200px;--font-display: "Cinzel", Georgia, "Times New Roman", serif;--font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;color-scheme:dark}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100%}html{background:radial-gradient(760px 520px at 8% 4%,rgba(61,220,132,.2),transparent 68%),radial-gradient(820px 560px at 96% 26%,rgba(54,197,255,.16),transparent 68%),radial-gradient(720px 520px at 22% 92%,rgba(255,207,58,.14),transparent 66%),linear-gradient(180deg,var(--space-0) 0%,var(--space-1) 55%,var(--space-2) 100%);background-attachment:fixed;background-color:var(--space-2)}body{color:var(--text);font-family:var(--font-body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}a{color:var(--accent-strong);text-decoration:none}a:hover{text-decoration:underline}h1,h2,h3,h4{line-height:1.25;font-weight:700}.app-shell{min-height:100vh;display:flex;flex-direction:column}.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 20px}.site-header{position:sticky;top:0;z-index:20;background:#04120fd1;backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}.site-header .container{display:flex;align-items:center;gap:24px;height:68px}.brand{display:flex;align-items:center;flex-shrink:0}.brand:hover{text-decoration:none}.brand img{height:30px;width:auto;display:block}.nav{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}.nav a{padding:8px 14px;border-radius:999px;color:var(--text-dim);font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;transition:background .15s,color .15s}.nav a:hover{color:var(--text);background:var(--bg-elev-2);text-decoration:none}.nav a.active{color:var(--accent);background:var(--accent-soft)}.site-main{flex:1;padding:32px 0 64px}.site-footer{border-top:1px solid var(--border);color:var(--text-faint);font-size:14px;padding:24px 0}.site-footer .container{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}.brandmark{display:flex;flex-direction:column;align-items:center;gap:6px}.brandmark img{width:min(520px,100%);height:auto;display:block}.brandmark .waveform{width:min(520px,100%);height:16px;display:block;color:var(--energy)}.brandmark .tagline{margin:6px 0 0;color:var(--text-faint);font-size:13px;font-weight:700;letter-spacing:.38em;text-transform:uppercase}.page-head{margin-bottom:24px}.page-head h1{margin:0 0 6px;font-family:var(--font-display);font-size:32px;letter-spacing:.02em;color:var(--accent)}.page-head p{margin:0;color:var(--text-dim);max-width:70ch}.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:700;border:1px solid var(--border);background:var(--bg-elev-2);color:var(--text-dim);white-space:nowrap}.badge.type-unit{color:var(--type-unit);border-color:color-mix(in srgb,var(--type-unit) 55%,transparent);background:color-mix(in srgb,var(--type-unit) 14%,transparent)}.badge.type-spell{color:var(--type-spell);border-color:color-mix(in srgb,var(--type-spell) 55%,transparent);background:color-mix(in srgb,var(--type-spell) 14%,transparent)}.badge.type-trap{color:var(--type-trap);border-color:color-mix(in srgb,var(--type-trap) 55%,transparent);background:color-mix(in srgb,var(--type-trap) 14%,transparent)}.badge-dot{width:8px;height:8px;border-radius:50%;display:inline-block}.energy{display:inline-grid;place-items:center;min-width:28px;height:28px;padding:0 6px;border-radius:50%;font-weight:800;font-size:14px;color:var(--cta-text);background:linear-gradient(180deg,var(--cta-from),var(--cta-to));box-shadow:var(--glow-energy)}.attack{display:inline-grid;place-items:center;min-width:30px;height:30px;padding:0 6px;font-weight:900;font-size:14px;color:#2a1500;background:linear-gradient(180deg,var(--power),#d96a00);clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);filter:drop-shadow(0 0 6px rgba(255,158,22,.55))}.filterbar{display:flex;flex-direction:column;gap:14px;padding:16px;margin-bottom:24px;background:var(--bg-elev);border:1.5px solid var(--border);border-radius:var(--radius-lg)}.filter-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.filter-row .filter-label{font-size:12px;font-weight:800;color:var(--text-faint);text-transform:uppercase;letter-spacing:.1em;min-width:64px}.search-input{flex:1;min-width:200px;padding:10px 14px;border-radius:var(--radius-sm);border:1.5px solid var(--border);background:#03100e99;color:var(--text);font-size:15px}.search-input:focus{outline:none;border-color:var(--energy);box-shadow:var(--glow-energy)}.chip{appearance:none;cursor:pointer;padding:7px 13px;border-radius:999px;border:1.5px solid var(--border);background:var(--bg-elev-2);color:var(--text-dim);font-size:14px;font-weight:600;transition:all .13s}.chip:hover{color:var(--text);border-color:var(--energy)}.chip.active{color:var(--bg);background:var(--accent);border-color:var(--accent)}.chip.active.type-unit{background:var(--type-unit);border-color:var(--type-unit)}.chip.active.type-spell{background:var(--type-spell);border-color:var(--type-spell)}.chip.active.type-trap{background:var(--type-trap);border-color:var(--type-trap)}.chip-count{font-weight:700;opacity:.7;margin-left:4px}.btn-clear{margin-left:auto;background:none;border:none;color:var(--text-faint);cursor:pointer;font-size:14px;font-weight:600}.btn-clear:hover{color:var(--accent)}.result-count{color:var(--text-dim);font-size:14px;margin:-8px 0 18px}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}.card-tile{display:flex;flex-direction:column;background:var(--bg-elev);border:1.5px solid var(--border);border-radius:var(--radius);overflow:hidden;cursor:pointer;text-align:left;padding:0;color:inherit;font:inherit;transition:transform .14s,border-color .14s,box-shadow .14s}.card-tile:hover{transform:translateY(-3px);border-color:var(--border-strong);box-shadow:var(--shadow),var(--glow-energy)}.card-art{position:relative;aspect-ratio:4 / 3;background:var(--bg-elev-2);overflow:hidden}.card-art img{width:100%;height:100%;object-fit:cover;display:block}.art-fallback{position:absolute;inset:0;display:grid;place-items:center;gap:4px;color:var(--text-faint);background:repeating-linear-gradient(45deg,#0c2d36e6,#0c2d36e6 12px,#fff0 12px,#ffffff08 24px);font-size:13px;text-align:center;padding:12px}.art-fallback .glyph{display:grid;line-height:0;color:var(--border-strong)}.card-art .cost-badge{position:absolute;top:8px;left:8px}.card-art .attack-badge{position:absolute;bottom:8px;right:8px}.card-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:8px;flex:1}.card-body .card-name{font-weight:800;font-size:16px;margin:0;letter-spacing:.01em}.card-body .card-desc{color:var(--text-dim);font-size:13.5px;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.card-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}.territory-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}.territory-tile{display:flex;flex-direction:column;background:var(--bg-elev);border:1.5px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}.territory-art{position:relative;aspect-ratio:16 / 9;background:var(--bg-elev-2)}.territory-art img{width:100%;height:100%;object-fit:cover;display:block}.territory-art .cat-badge{position:absolute;top:10px;right:10px}.territory-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px}.territory-body h3{margin:0;font-size:18px;font-weight:800}.territory-body p{margin:0;color:var(--text-dim);font-size:14px}.modal-overlay{position:fixed;inset:0;z-index:50;background:#020a09c2;backdrop-filter:blur(4px);display:grid;place-items:center;padding:20px}.modal{width:min(560px,100%);max-height:90vh;overflow:auto;background:var(--bg-solid);border:1.5px solid var(--border-strong);border-radius:var(--radius-lg);box-shadow:var(--shadow)}.modal .modal-art{aspect-ratio:4 / 3;background:var(--bg-elev-2);position:relative}.modal .modal-art img{width:100%;height:100%;object-fit:cover}.modal-content{padding:20px 22px 24px;display:flex;flex-direction:column;gap:14px}.modal-content h2{margin:0;font-size:24px;font-weight:800}.modal-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.modal-desc{color:var(--text);font-size:15px;margin:0}.modal-meta{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:14px;color:var(--text-dim);border-top:1px solid var(--border);padding-top:14px}.modal-meta dt{color:var(--text-faint);font-weight:600}.modal-meta dd{margin:0}.modal-close{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;border:none;background:#020a09a6;color:var(--text);font-size:20px;cursor:pointer;display:grid;place-items:center}.modal-close:hover{background:#020a09e6}.state{display:grid;place-items:center;gap:14px;padding:64px 20px;text-align:center;color:var(--text-dim)}.spinner{width:38px;height:38px;border:4px solid var(--border);border-top-color:var(--energy);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.state .err-title{color:var(--text);font-size:18px;font-weight:700}.state code{background:var(--bg-elev-2);padding:2px 7px;border-radius:6px;font-size:13px}.btn{appearance:none;cursor:pointer;display:inline-block;border:1.5px solid var(--border-strong);background:var(--bg-elev-2);color:var(--text);font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:13px;padding:13px 24px;border-radius:var(--radius-sm);transition:border-color .14s,box-shadow .14s,color .14s}.btn:hover{border-color:var(--energy);box-shadow:var(--glow-energy);text-decoration:none}.btn-primary{position:relative;border:none;color:var(--cta-text);background:linear-gradient(180deg,var(--cta-from),var(--cta-to));border-radius:0;padding:15px 30px;clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px)}.btn-primary:before{content:"";position:absolute;top:0;left:16px;right:0;height:4px;background:var(--cta-edge)}.btn-primary:hover{filter:brightness(1.08);box-shadow:none}.hero{text-align:center;padding:44px 0 30px}.hero-play{margin:34px 0 22px}.hero-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;align-items:center}.btn-play{position:relative;border:none;color:var(--cta-text);background:linear-gradient(180deg,var(--cta-from),var(--cta-to));border-radius:0;font-size:22px;font-weight:900;letter-spacing:.14em;padding:20px 66px;clip-path:polygon(20px 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%,0 20px);box-shadow:0 10px 34px #13a6d666;transition:filter .14s,transform .14s,box-shadow .14s}.btn-play:before{content:"";position:absolute;top:0;left:20px;right:0;height:5px;background:var(--cta-edge)}.btn-play:hover{filter:brightness(1.08);transform:translateY(-2px);box-shadow:0 14px 40px #13a6d680;text-decoration:none}.home-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-top:36px}.home-card{display:block;padding:22px;border-radius:var(--radius-lg);border:1.5px solid var(--border);background:var(--bg-elev);color:inherit;transition:transform .14s,border-color .14s,box-shadow .14s}.home-card:hover{transform:translateY(-3px);border-color:var(--border-strong);box-shadow:var(--glow-energy);text-decoration:none}.home-card .ico{display:flex;line-height:0}.home-card h3{margin:10px 0 6px;font-size:20px;font-weight:800}.home-card p{margin:0;color:var(--text-dim);font-size:15px}.home-card .stat-value{font-family:var(--font-display);font-size:38px;font-weight:700;color:var(--accent);line-height:1.1}.rules-layout{display:grid;grid-template-columns:240px 1fr;gap:36px;align-items:start}.rules-toc{position:sticky;top:92px;display:flex;flex-direction:column;gap:2px;border-left:2px solid var(--border);padding-left:14px}.rules-toc a{color:var(--text-dim);font-size:14px;padding:4px 0;cursor:pointer}.rules-toc a:hover{color:var(--text);text-decoration:none}.rules-toc a.active{color:var(--accent);font-weight:700}.rules-content{max-width:78ch}.rules-section{scroll-margin-top:92px;margin-bottom:40px}.rules-section>h2{font-family:var(--font-display);font-size:26px;margin:0 0 14px;padding-bottom:8px;border-bottom:1px solid var(--border);color:var(--accent);letter-spacing:.01em}.md h3{font-size:18px;margin:22px 0 8px;color:var(--energy)}.md h4{font-size:16px;margin:16px 0 6px;color:var(--green)}.md p{margin:0 0 12px}.md ul{margin:0 0 14px;padding-left:22px}.md li{margin:4px 0}.md li::marker{color:var(--energy)}.md strong{color:var(--text)}.md em{color:var(--accent-strong);font-style:italic}.md code{background:var(--bg-elev-2);padding:1px 6px;border-radius:5px;font-size:.9em;color:var(--accent-strong)}.glossary{display:grid;gap:10px}.glossary .term{background:var(--bg-elev);border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:12px 16px}.glossary .term dt{font-weight:800;color:var(--accent);margin-bottom:2px}.glossary .term dd{margin:0;color:var(--text-dim);font-size:14.5px}@media (max-width: 820px){.rules-layout{grid-template-columns:1fr}.rules-toc{display:none}.site-header .container{height:60px;gap:12px}.brand img{height:22px}.nav a{padding:7px 10px;font-size:12px}}@media (max-width: 560px){.site-header .container{height:auto;flex-wrap:wrap;justify-content:center;gap:8px;padding-top:10px;padding-bottom:10px}.brand{min-width:0}.brand img{max-width:100%}.nav{margin-left:0;width:100%;justify-content:center}}