@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;450;500;550;600;650;700&family=Noto+Serif:ital,wght@0,400;0,500;0,600;0,650;0,700;1,400;1,500&display=swap');
:root{--bg:#101712;--panel:#19211b;--panel2:#202820;--ink:#e9e7dc;--muted:#a3ad9e;--gold:#dbb87a;--line:#354032;--accent:#d4a858;--serif:'Noto Serif',Georgia,serif;--sans:'Be Vietnam Pro',system-ui,sans-serif;color-scheme:dark}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:13px/1.7 var(--sans)}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button{color:inherit}a{color:var(--gold);text-underline-offset:4px}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--gold);outline-offset:4px}button{border:0}button:disabled{opacity:.4;cursor:not-allowed}[hidden]{display:none!important}.topbar{height:90px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 5%;gap:28px;background:#141c16}.brand{display:flex;align-items:center;gap:12px;color:var(--ink);text-decoration:none;font-family:var(--serif);font-size:24px;letter-spacing:2px}.brand-mark{font-size:41px;color:var(--gold);line-height:1}.brand small{display:block;font:8px/1.6 var(--sans);letter-spacing:2.1px;color:var(--muted)}nav{height:100%;display:flex;gap:35px}.nav{background:none;padding:0;position:relative;font-weight:500;color:var(--muted);font-size:12px}.nav.active{color:var(--gold)}.nav.active:after{position:absolute;content:'';height:2px;bottom:0;background:var(--gold);left:0;right:0}#army-count{font-size:10px;display:inline-block;background:#333b2d;color:var(--gold);min-width:21px;padding:0 5px;margin-left:6px;border-radius:3px}.source-btn{background:none;color:var(--muted);font-size:11px}.source-btn span{margin-left:10px;color:var(--gold)}main{max-width:1480px;margin:auto;padding:0 5%}.intro{height:322px;position:relative;overflow:hidden;border-bottom:1px solid #66704a;background:#18211a;margin-bottom:36px}.intro-art{position:absolute;inset:0;background:linear-gradient(90deg,#18211a 12%,#18211aee 34%,#18211a0a 80%),linear-gradient(0deg,#18211a 0%,transparent 30%),url('assets/T6e3IkL.png') center 38%/cover;opacity:.8}.intro-content{position:relative;padding:30px 36px}.eyebrow{color:var(--gold);font-size:9px;font-weight:600;letter-spacing:2.1px;display:flex;align-items:center;gap:8px}.eyebrow>span{width:19px;height:1px;background:var(--gold)}h1{font:500 39px/1.28 var(--serif);letter-spacing:-1.5px;margin:13px 0}h1 em{font-weight:400;color:var(--gold)}.intro-content>p:not(.eyebrow){font-size:11px;line-height:1.85;color:#b4bcae;margin:13px 0 20px}.version{font-size:9px;color:#b7c1ae;display:flex;align-items:center;gap:8px}.version i{width:5px;height:5px;background:#a5b87f;border-radius:50%}.version span{opacity:.5}.intro-seal{position:absolute;right:34px;top:36px;border:1px solid #d2b0727a;color:#d9b47dcc;writing-mode:vertical-rl;font:35px/1.2 var(--serif);padding:8px 6px}.intro-seal span{font:7px var(--sans);letter-spacing:2px;margin-top:6px}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:18px}.step-label{font-size:9px;letter-spacing:2px;color:var(--gold);font-weight:600}h2{font:500 22px/1.45 var(--serif);margin:5px 0 0;letter-spacing:-.5px}.section-heading>p{font-size:10px;color:var(--muted);line-height:1.8;text-align:right;margin:0}.clans{display:grid;grid-template-columns:repeat(4,1fr) 95px;gap:10px;margin-bottom:29px}.clan{display:flex;align-items:center;text-align:left;gap:15px;background:var(--panel);border:1px solid var(--line);padding:16px 18px;position:relative;transition:.18s}.clan:hover{border-color:#85866b;background:#263024}.clan.active{background:#2a2c20;border-color:var(--gold)}.clan.active:after{content:'';width:5px;height:5px;position:absolute;right:12px;top:12px;background:var(--gold);border-radius:50%}.clan strong{display:block;font:600 16px var(--serif);margin-bottom:4px}.clan small{font-size:9px;color:var(--muted)}.clan-icon{font-size:30px;color:var(--clan-color);font-family:var(--serif);font-weight:400;line-height:1}.clan.N{padding:12px;display:block;text-align:center}.clan.N strong{font-size:12px}.clan.N .clan-icon{display:none}.workspace{display:grid;grid-template-columns:340px 1fr;border:1px solid var(--line);background:var(--panel);align-items:start}.roster{border-right:1px solid var(--line);align-self:stretch;background:#151d17}.roster-head{padding:22px 20px 12px}.roster-head>div:first-child{display:flex;align-items:center;justify-content:space-between}.roster-head h2{font-size:21px;margin:0}.roster-head>div>span{color:var(--muted);font-size:10px}.search{display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:#101712;margin:17px 0 12px;padding:7px 10px}.search>span{font-size:23px;line-height:1;color:var(--muted)}.search input{width:100%;border:0;outline:none;background:none;color:var(--ink);font-size:11px;min-width:0}.search kbd{font:10px var(--sans);color:#7b8878;border:1px solid var(--line);padding:0 4px}.filters{display:flex;gap:5px}.filters button{background:none;color:var(--muted);font-size:10px;flex:1;padding:6px 4px}.filters .active{color:var(--gold);background:#303426;border:1px solid #655c3a}.global-search{display:flex;align-items:center;gap:5px;font-size:9px;color:var(--muted);margin-top:12px}.global-search input{accent-color:var(--gold);width:12px;height:12px}.unit-list{padding:0 10px 15px;max-height:1020px;overflow:auto;scrollbar-width:thin;scrollbar-color:#46503b transparent}.unit-card{width:100%;border:1px solid transparent;display:flex;align-items:center;background:none;text-align:left;gap:13px;padding:10px;margin-bottom:3px;position:relative}.unit-card:hover{background:#232d20}.unit-card.selected{border-color:#a58a51;background:#2b3022}.unit-card.selected:before{content:'';position:absolute;left:-1px;top:20%;bottom:20%;width:2px;background:var(--gold)}.portrait{width:55px;height:48px;object-fit:contain;flex-shrink:0;filter:drop-shadow(0 4px 3px #0006)}.unit-info{min-width:0;flex:1}.unit-info strong{font-size:12px;font-weight:500;display:block}.unit-info small{font-size:10px;color:var(--muted);display:block;margin-top:1px}.unit-info .mini-cost{font-size:9px;color:#b3b593;margin-top:3px}.unit-card .arrow{color:var(--gold);font-size:16px}.badge{font-size:8px;letter-spacing:1px;font-weight:500;color:var(--gold);border:1px solid #665b39;background:#3c382355;padding:3px 7px;display:inline-block}.unit-card .badge{position:absolute;right:7px;top:5px;font-size:7px;padding:0 4px}.empty{padding:25px 15px;color:var(--muted);font-size:12px}.placeholder{width:55px;height:48px;display:flex;flex-direction:column;justify-content:center;align-items:center;border:1px solid #424d3a;color:#aeb89a;font-size:20px;flex-shrink:0}.placeholder small{font-size:7px;color:var(--muted)}.detail{min-width:0;padding:28px 32px 32px}.unit-hero{display:flex;align-items:center;gap:20px;padding-bottom:25px;border-bottom:1px solid var(--line)}.unit-hero .portrait{width:110px;height:98px;object-fit:contain;background:radial-gradient(ellipse,#b0934a20,transparent 70%)}.unit-hero .placeholder{width:100px;height:90px}.unit-hero h2{font-size:29px;margin:7px 0 2px;line-height:1.3}.english-name{color:var(--muted);font-size:12px;margin:0}.unit-title{flex:1}.unit-meta{display:flex;gap:5px;flex-wrap:wrap}.unit-meta .badge.secondary{color:#aebaab;border-color:#46503e;background:none}.attack-meta{display:flex;gap:25px;padding:15px 0 19px;border-bottom:1px solid var(--line)}.attack-meta small{color:var(--muted);font-size:9px;display:block;margin-bottom:3px}.attack-meta strong{font-size:11px;font-weight:500}.detail-section{padding-top:23px}.detail-section>header{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}.detail-section h3{font:500 18px var(--serif);margin:0}.section-num{font:10px var(--sans);color:var(--gold);margin-right:9px}.source-link{font-size:9px;color:var(--muted)}.route{display:flex;flex-direction:column;position:relative;background:#131c15;padding:16px 20px;border:1px solid #303c2d;gap:0}.route-step{display:flex;align-items:center;gap:12px;min-height:45px;position:relative}.route-step:not(:last-child):before{content:'';position:absolute;left:11px;top:32px;bottom:-11px;width:1px;background:#4a563d}.route-step .node{border:1px solid #68714f;border-radius:50%;width:23px;height:23px;display:grid;place-items:center;font-size:9px;color:#b8bf9d;flex-shrink:0;z-index:1;background:#19231a}.route-step:last-child .node{color:var(--gold);border-color:#a58a51;background:#333324}.route-step strong{font-size:11px;font-weight:500}.route-step small{font-size:9px;display:block;color:var(--muted);line-height:1.3}.route-step:last-child strong{color:var(--gold)}.costs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:12px 0}.cost{padding:12px 13px;border:1px solid var(--line);background:#20281e}.cost small{font-size:9px;color:var(--muted);display:block}.cost strong{font:500 22px var(--serif);color:var(--gold);display:block;margin-top:4px}.cost:nth-child(2) strong{color:#a6c7cd}.cost:nth-child(3) strong{color:#d6d7b5}.cost strong.unknown{font:10px var(--sans);padding:8px 0}.note{font-size:10px;color:var(--muted);line-height:1.8;margin:9px 0}.note a{color:#c5c7ac}.note.warning{color:#c9b57c;border-left:2px solid #a58a51;padding-left:10px}.add-row{display:flex;gap:10px;margin-top:14px}.quantity{display:flex;border:1px solid #586047;align-items:center;background:#101712}.quantity button{background:none;color:var(--muted);padding:8px 13px}.quantity input{border:0;width:35px;text-align:center;background:none;color:var(--ink);appearance:textfield;-moz-appearance:textfield}.quantity input::-webkit-inner-spin-button{appearance:none}.primary{background:var(--gold);color:#202718;padding:10px 18px;font-size:11px;font-weight:600;flex:1}.primary:hover{background:#ecc98b}.outline{border:1px solid #59634b;background:none;color:var(--gold);padding:9px 15px;font-size:11px}.armor-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}.armor-cell{padding:11px 6px 9px;text-align:center;border:1px solid var(--line);background:#1d271e}.armor-cell span{display:block;font-size:9px;color:var(--muted)}.armor-cell strong{font:500 19px var(--serif);display:block;margin:4px 0}.armor-cell small{font-size:8px;color:var(--muted)}.armor-cell.weak{border-color:#69533a;background:#392d2060}.armor-cell.weak strong,.weak-text{color:#e4b576}.armor-cell.resist strong{color:#a1bc8d}.legend{display:flex;justify-content:space-between;font-size:8px;margin-top:8px;color:var(--muted)}.legend .good{color:#a1bc8d}.legend .bad{color:#e4b576}.match-controls{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}.match-controls label{font-size:9px;color:var(--muted);display:flex;align-items:center;gap:6px}.match-controls select{max-width:170px;border:1px solid var(--line);background:#101712;color:#cdd0bd;padding:5px 8px;font-size:10px}.match-tabs{display:flex;border-bottom:1px solid var(--line);margin-bottom:12px;gap:22px}.match-tabs button{background:none;color:var(--muted);font-size:10px;padding:7px 0 9px}.match-tabs button.active{color:var(--gold);border-bottom:1px solid var(--gold)}.matches{display:grid;grid-template-columns:1fr 1fr;gap:8px;max-height:320px;overflow:auto;scrollbar-width:thin}.match{display:flex;align-items:center;text-align:left;gap:9px;border:1px solid var(--line);background:#1c251c;padding:8px}.match:hover{border-color:#7d835c}.match .portrait{width:38px;height:35px}.match .placeholder{width:38px;height:35px}.match strong{font-size:10px;font-weight:500;display:block}.match small{font-size:8px;color:var(--muted);display:block}.multiplier{margin-left:auto;white-space:nowrap;color:#e4b576;font:500 18px var(--serif)}.more-matches{font-size:9px;color:var(--muted);margin:8px 0}.army-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:24px}.army-summary .cost{padding:20px}.army-summary .cost strong{font-size:30px}.army-list{border:1px solid var(--line);background:var(--panel);padding:12px 24px}.army-line{display:flex;gap:20px;align-items:center;border-bottom:1px solid var(--line);padding:18px 0;flex-wrap:wrap}.army-line:last-child{border:0}.army-line>.unit-info{flex:1}.army-line .line-total{font-size:11px;color:var(--muted);min-width:150px}.remove{background:none;color:#c49c83;font-size:11px;padding:8px}.army-empty{text-align:center;padding:70px 20px;border:1px solid var(--line);background:var(--panel)}.army-empty>span{font-size:50px;color:var(--gold)}.army-empty h2{margin-bottom:10px}.army-empty p{color:var(--muted)}.army-empty button{margin-top:15px;flex:initial}.buildings{padding:24px;background:var(--panel);border:1px solid var(--line);margin-top:20px}.building-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:15px}.building-tags span{border:1px solid var(--line);padding:7px 12px;font-size:11px;color:var(--muted)}footer{border-top:1px solid var(--line);margin-top:50px;padding:27px 0 32px;display:flex;align-items:center;justify-content:space-between;gap:25px;color:var(--muted)}.footer-brand{display:flex;gap:10px;align-items:center;font-size:28px;color:var(--gold)}.footer-brand>span{font:500 14px var(--serif);letter-spacing:1px}.footer-brand small{display:block;font:8px/1.7 var(--sans);color:var(--muted);letter-spacing:0}footer p{font-size:9px;line-height:1.8}footer>a{font-size:9px;white-space:nowrap}dialog{background:#1c251e;border:1px solid #64704e;color:var(--ink);max-width:700px;width:calc(100% - 32px);padding:30px 35px;max-height:85vh}dialog::backdrop{background:#071009c9;backdrop-filter:blur(5px)}.modal-head{display:flex;align-items:center;justify-content:space-between}.modal-head button{background:none;font-size:27px;color:var(--muted)}dialog h2{font-size:28px;margin:15px 0 22px}dialog p:not(.eyebrow){font-size:11px;line-height:1.9;color:#b9c1b1}dialog strong{color:var(--ink);font-weight:500}.muted{color:var(--muted)}#toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,15px);opacity:0;pointer-events:none;transition:.2s;background:#e2c48c;color:#182116;box-shadow:0 5px 40px #0008;padding:12px 22px;font-size:12px;z-index:5}#toast.show{opacity:1;transform:translate(-50%,0)}
@media(min-width:1500px){.workspace{grid-template-columns:380px 1fr}.detail{padding:32px 44px}.intro{height:340px}.intro-content{padding:35px 42px}h1{font-size:43px}.unit-list{max-height:1035px}}@media(max-width:1100px){.topbar{padding:0 3%;gap:15px}main{padding:0 3%}.workspace{grid-template-columns:290px 1fr}.detail{padding:24px}.clan{padding:14px 11px;gap:9px}.clan strong{font-size:14px}.clans{grid-template-columns:repeat(4,1fr) 70px}.brand{font-size:20px}.matches{grid-template-columns:1fr}.unit-hero h2{font-size:24px}.unit-hero .portrait{width:85px}.armor-cell span{font-size:8px}.source-btn{font-size:10px}.topbar nav{gap:22px}}@media(max-width:760px){.topbar{height:auto;min-height:100px;flex-wrap:wrap;padding:15px 5% 0;gap:12px}.brand{font-size:21px}.brand small{font-size:7px}.brand-mark{font-size:33px}.source-btn{margin-left:auto}.topbar nav{order:3;width:100%;height:38px;gap:25px;justify-content:center}.nav{font-size:11px}main{padding:0 4%}.intro{height:290px;margin-bottom:26px}.intro-content{padding:28px 20px}.intro-art{background-position:center 34%;opacity:.65}.intro-seal{right:18px;top:25px;font-size:27px}h1{font-size:33px}.eyebrow{font-size:8px;letter-spacing:1.5px}.section-heading{align-items:start}.section-heading h2{font-size:20px}.section-heading>p{display:none}.step-label{font-size:8px}.clans{grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:18px}.clan{padding:12px 4px;display:block;text-align:center}.clan .clan-icon{display:block;font-size:25px;margin-bottom:9px}.clan strong{font-size:12px}.clan small{font-size:8px}.clan.N{grid-column:1/-1;padding:5px;display:flex;justify-content:center;gap:10px}.clan.N strong{margin:0;font:10px var(--sans)}.clan.N small{font-size:9px}.clan.active:after{right:7px;top:7px;width:4px;height:4px}.workspace{display:block}.roster{border:0;border-bottom:1px solid var(--line)}.roster-head{padding:17px 15px 10px}.roster-head h2{font-size:19px}.search{margin:12px 0 9px}.global-search{margin:7px 0 0}.unit-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px;max-height:270px;padding:5px 8px 12px}.unit-card{padding:9px 6px;gap:6px;margin:0;min-height:80px}.unit-card .portrait{width:42px;height:42px}.unit-info strong{font-size:10px}.unit-info small{font-size:8px}.unit-info .mini-cost{font-size:8px}.unit-card .arrow{display:none}.unit-card .badge{font-size:6px}.detail{padding:23px 16px}.unit-hero{gap:10px}.unit-hero .portrait{width:82px;height:84px}.unit-hero h2{font-size:25px}.english-name{font-size:11px}.armor-grid{gap:4px}.armor-cell{padding:10px 3px}.armor-cell strong{font-size:18px}.armor-cell small{font-size:7px}.armor-cell span{font-size:8px}.matches{grid-template-columns:1fr 1fr}.match{padding:7px 5px;gap:4px}.match .portrait{width:30px}.match strong{font-size:8px}.multiplier{font-size:15px}.match small{font-size:7px}.cost{padding:11px 9px}.cost strong{font-size:20px}.detail-section h3{font-size:17px}.primary{font-size:10px;padding:10px}.army-summary{grid-template-columns:1fr 1fr;gap:8px}.army-summary .cost{margin:0;padding:16px}.army-line{gap:10px}.army-list{padding:7px 14px}.army-line .line-total{font-size:10px;min-width:100px}.army-line .quantity button{padding:6px 10px}.army-line>.unit-info{min-width:120px}.army-line .portrait{width:45px}.army-line .quantity{margin-left:auto}footer{display:block;padding:22px 0}footer p{margin:15px 0}.footer-brand small{font-size:9px}dialog{padding:20px}dialog h2{font-size:24px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
/* Complete compendium */
.topbar nav{gap:25px}.coverage-strip{display:flex;align-items:center;gap:24px;border-bottom:1px solid var(--line);padding:14px 0;margin-top:-23px;margin-bottom:30px;color:var(--muted);font-size:10px}.coverage-strip strong{font:500 18px var(--serif);color:var(--ink);padding-right:5px}.coverage-strip>button{margin-left:auto}.text-button{background:none;padding:0;color:var(--gold);font-size:10px;text-decoration:underline;text-underline-offset:4px}.clan-summary{display:grid;grid-template-columns:1.5fr 1fr;background:linear-gradient(120deg,#252c20,#19231b);border:1px solid var(--line);margin:-11px 0 24px;padding:22px 26px;gap:40px}.clan-summary h2{font-size:24px}.clan-summary p:not(.eyebrow){color:#c1c8b9;font-size:12px;margin:9px 0}.clan-summary small{font-size:10px;color:var(--muted)}.clan-summary-side{display:flex;flex-direction:column;justify-content:center;align-items:start;gap:9px;border-left:1px solid var(--line);padding-left:30px}.clan-summary-side>span{font-size:8px;letter-spacing:1.5px;color:var(--gold)}.clan-summary-side>strong{font-size:11px;font-weight:500}.unit-overview{font-size:12px;color:#bcc5b6;margin:19px 0 16px;line-height:1.9}.detail-jumps{display:flex;gap:16px;flex-wrap:wrap;padding-bottom:15px;border-bottom:1px solid var(--line)}.detail-jumps a{font-size:10px;text-decoration:none;color:var(--gold)}.detail-jumps a:hover{text-decoration:underline}.health-reference{display:flex;gap:22px;flex-wrap:wrap;background:#111a13;padding:13px 15px;margin-top:10px}.health-reference>span{font-size:8px;letter-spacing:.8px;color:var(--muted)}.health-reference strong{display:block;color:#d8d9c7;font:500 13px var(--sans);letter-spacing:0;margin-top:4px}.health-reference>small{font-size:8px;color:var(--muted);flex-basis:100%;line-height:1.6}.portrait-gallery{display:flex;gap:12px;background:#131d15;padding:12px;margin:14px 0}.portrait-gallery figure{margin:0;display:flex;gap:8px;align-items:center}.portrait-gallery img{width:60px;height:55px;object-fit:contain}.portrait-gallery figcaption{font-size:9px;color:var(--muted)}.starting-unit{display:flex;flex-direction:column;gap:7px;font-size:10px;color:var(--muted);margin-bottom:12px}.starting-unit select{width:100%;background:#111a13;border:1px solid var(--line);padding:9px 10px;color:var(--ink);font-size:11px}.branch-links{display:flex;gap:6px;flex-wrap:wrap;margin-top:11px}.branch-links>small{flex-basis:100%;color:var(--muted);font-size:9px}.branch-links button{padding:6px 8px;font-size:10px;background:#273021;color:#dcc48f;border:1px solid #404d35}.branch-links button span{display:block;font-size:8px;color:var(--muted);margin-top:2px}.multiplier.neutral{color:#b8c1aa}.matches{margin-top:10px}.duel{border:1px solid var(--line);background:#111a14;padding:15px;margin-top:20px}.duel>label{font-size:10px;color:var(--muted);display:flex;flex-direction:column;gap:8px}.duel select{background:#202a1e;color:var(--ink);border:1px solid #425039;padding:7px;max-width:100%;font-size:11px}.duel-results{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:15px}.duel-results>div{background:#202a1f;padding:12px}.duel-results small{font-size:9px;display:block;color:var(--muted)}.duel-results strong{font:500 29px var(--serif);color:var(--gold);display:block;margin:6px 0}.duel-results span{font-size:9px;color:#b9c1ac}.ability-tabs{display:flex;gap:10px;border-bottom:1px solid var(--line)}.ability-tabs button{padding:9px 0;background:none;color:var(--muted);font-size:10px;flex:1}.ability-tabs button.active{border-bottom:2px solid var(--gold);color:var(--gold)}.ability-tabs button>span{font-size:8px;padding:2px 5px;background:#313b29;margin-left:3px}.ability-card{border:1px solid var(--line);background:#131d15;margin-bottom:9px}.ability-card summary{padding:13px 15px;display:flex;justify-content:space-between;align-items:center;gap:15px;cursor:pointer;list-style:none}.ability-card summary::-webkit-details-marker{display:none}.ability-card summary strong{font-size:12px;font-weight:500;display:block}.ability-card summary small{font-size:10px;color:var(--muted);display:block;margin-top:3px}.expand-icon{font-size:20px;font-weight:400;color:var(--gold)}.ability-card[open] .expand-icon{transform:rotate(45deg)}.ability-card>div{padding:0 15px 15px}.ability-card p{font-size:11px;color:#c4ccbc;line-height:1.9;margin:4px 0 12px}.ability-card p.acquisition{padding:10px 12px;background:#202b1e;font-size:10px}.acquisition strong{color:var(--gold);display:block;font-size:8px;text-transform:uppercase;letter-spacing:1px;margin-bottom:5px}.ability-source{display:flex;gap:10px;flex-wrap:wrap;align-items:center;border-top:1px solid var(--line);padding-top:8px;font-size:8px;color:var(--muted)}.ability-source>span{margin-right:auto}.usage-tips{border-left:2px solid #7b8451;margin:20px 0 0;padding:0 0 0 15px}.usage-tips h4{font:500 15px var(--serif);margin:0 0 10px}.usage-tips ul{padding-left:15px;margin:0;color:#b8c2ae;font-size:11px;line-height:1.9}.usage-tips>small{font-size:8px;color:var(--muted);display:block;margin-top:10px}.detail-section{scroll-margin-top:20px}.library-toolbar{display:flex;gap:20px;padding:17px 20px;background:var(--panel);border:1px solid var(--line);margin-bottom:20px}.library-toolbar>label{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:11px}.library-toolbar select{padding:9px;background:#111b13;color:var(--ink);border:1px solid #46513c}.library-toolbar>input{flex:1;border:1px solid #46513c;padding:9px 12px;background:#111b13;color:var(--ink);font-size:11px;min-width:0}.library-toolbar .search{margin:0;flex:1}.building-list{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:25px}.building-card{padding:23px;background:var(--panel);border:1px solid var(--line);min-width:0}.building-card h3{font:500 21px var(--serif);margin:10px 0 3px}.building-card>p:not(.eyebrow):not(.english-name):not(.note){font-size:12px;color:#bcc5b3;line-height:1.8;margin:15px 0}.building-card .eyebrow{font-size:8px;letter-spacing:1px}.building-units{display:flex;flex-wrap:wrap;gap:5px;margin:15px 0}.building-units>button{display:flex;align-items:center;gap:6px;text-align:left;background:#242e21;border:1px solid #394832;padding:5px 8px;flex:1;min-width:120px;color:var(--ink);font-size:10px}.building-units>button small{display:block;color:var(--muted);font-size:8px}.building-units .portrait{width:33px;height:30px}.mechanic-list{display:flex;flex-direction:column;gap:18px}.mechanic-card{display:grid;grid-template-columns:1fr 1.6fr;gap:40px;background:var(--panel);border:1px solid var(--line);padding:30px}.mechanic-card h2{font-size:23px;margin:12px 0}.mechanic-card .english-name{font-size:11px}.mechanic-card>div>p:not(.english-name){font-size:12px;line-height:1.9;margin:0 0 15px;color:#bec7b7}.dependency-warning{background:#302c1d;border:1px solid #786039;padding:14px 18px;margin:16px 0;color:#d6c391;font-size:11px}.dependency-warning .outline{margin:10px 5px 0 0;font-size:10px}.unit-list{max-height:1050px}.roster{position:sticky;top:15px;align-self:start}.unit-card .unit-info strong{line-height:1.45}.topbar nav .nav{font-size:11px}
@media(max-width:1100px){.building-list{grid-template-columns:repeat(2,1fr)}.topbar nav{gap:17px}.clan-summary{gap:22px;padding:20px}.clan-summary-side{padding-left:20px}.mechanic-card{gap:25px}.coverage-strip{gap:18px}.coverage-strip>button{display:none}}
@media(max-width:760px){.topbar nav{justify-content:space-between;gap:15px;overflow-x:auto}.topbar nav .nav{font-size:10px;white-space:nowrap}.coverage-strip{gap:11px;flex-wrap:wrap;padding:13px 0;margin-top:-16px;margin-bottom:23px;font-size:8px}.coverage-strip strong{font-size:14px;padding-right:2px}.clan-summary{display:block;padding:17px;margin-top:-4px;margin-bottom:18px}.clan-summary p:not(.eyebrow){font-size:11px}.clan-summary small{font-size:9px}.clan-summary-side{border-left:0;border-top:1px solid var(--line);padding:13px 0 0;margin-top:15px;gap:6px}.clan-summary h2{font-size:21px}.clan-summary-side strong{font-size:10px}.roster{position:static}.unit-overview{font-size:11px}.health-reference{gap:17px}.health-reference strong{font-size:12px}.health-reference>small{font-size:8px}.detail-jumps{gap:20px}.detail-jumps a{font-size:9px}.ability-tabs button{font-size:9px}.ability-card summary strong{font-size:11px}.ability-card p{font-size:11px}.ability-source{font-size:8px}.building-list{grid-template-columns:1fr}.building-card{padding:20px}.library-toolbar{padding:12px;gap:8px;flex-wrap:wrap}.library-toolbar>input{flex-basis:100%;font-size:11px}.library-toolbar>label{font-size:10px}.library-toolbar select{font-size:11px}.mechanic-card{display:block;padding:22px}.mechanic-card>div+div{margin-top:20px}.mechanic-card h2{font-size:22px}.mechanic-card>div>p:not(.english-name){font-size:12px}.duel-results>div{padding:10px}.duel-results small{font-size:8px}.duel-results strong{font-size:26px}.usage-tips ul{font-size:11px}}
@media(min-width:761px){.roster{max-height:calc(100vh - 30px);overflow:hidden}.unit-list{max-height:calc(100vh - 235px)}}
/* Building artwork and clan variants */
.building-visual{margin:-23px -23px 20px;background:#111a14;border-bottom:1px solid var(--line)}.building-image{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:205px;background:radial-gradient(ellipse at center,#3e4b2d55,transparent 75%);padding:14px;overflow:hidden}.building-image img{width:100%;height:100%;object-fit:contain;transition:transform .2s}.building-image:hover img{transform:scale(1.05)}.building-image.is-icon img{width:85px;height:85px;object-fit:contain}.image-zoom{position:absolute;right:13px;bottom:11px;color:var(--gold);font-size:23px;line-height:1;background:#111a14cc;padding:4px 6px;border:1px solid var(--line)}.building-image-caption{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:0 14px 11px;font-size:8px;color:var(--muted)}.building-image-caption a{font-size:8px;color:var(--muted)}.building-variants{display:flex;gap:5px;padding:0 12px 13px;flex-wrap:wrap}.building-variants button{border:1px solid var(--line);padding:5px 7px;background:#1c271c;color:var(--muted);font-size:9px;flex:1;white-space:nowrap}.building-variants button.active{border-color:#9f8651;background:#343622;color:var(--gold)}#building-image-dialog{max-width:650px;padding:24px}#building-image-dialog h2{margin:8px 0 5px}.building-full-image{display:flex;justify-content:center;align-items:center;min-height:250px;margin:22px 0 15px;padding:20px;background:radial-gradient(ellipse,#3d4a2c55,transparent 75%);border:1px solid var(--line)}.building-full-image img{max-width:100%;max-height:400px;object-fit:contain;width:auto;height:auto}.building-full-image.is-icon img{width:120px;image-rendering:auto}#building-image-dialog .modal-head button{color:var(--muted);background:none;font-size:28px}
@media(max-width:760px){.building-visual{margin:-20px -20px 18px}.building-image{height:220px}.building-image-caption{font-size:9px}.building-image-caption a{font-size:9px}.building-variants button{font-size:10px;padding:7px 8px}.building-full-image{min-height:220px}}
/* Construction dependencies and budget */
#construction{margin:28px 0 44px;border:1px solid var(--border,#394237);background:#151c16;scroll-margin-top:100px}.tree-heading,.tree-controls,.tree-legend{padding:22px 24px;display:flex;justify-content:space-between;gap:18px;align-items:center}.tree-heading h3{font-size:25px;margin:5px 0}.tree-clans{display:flex;gap:6px;flex-wrap:wrap}.tree-clans button{padding:9px 13px;border:1px solid #424a3b;background:transparent;color:#c5c6b8;cursor:pointer}.tree-clans button[aria-pressed=true]{color:#e0c88b;border-color:#cfb775;background:#373625}.tree-controls{padding-top:0;padding-bottom:14px}.tree-controls label{display:flex;gap:12px;align-items:center;font-size:13px}.tree-controls select{max-width:390px;background:#101710;color:#dedfce;border:1px solid #4c5445;padding:12px}.tree-controls>span,.tree-legend{font-size:11px;color:#a9b09f}.tree-legend{justify-content:flex-start;padding:10px 24px;border-top:1px solid #303a2d;border-bottom:1px solid #303a2d;flex-wrap:wrap}.upgrade-key{color:#b5a2d8}.tree-scroll{overflow:auto;background:radial-gradient(ellipse at top,#26302633,transparent);overscroll-behavior-x:contain}.tree-chart{position:relative}.tree-chart svg{position:absolute;inset:0;color:#68705d}.tree-chart svg>path{fill:none;stroke:#424e3c;stroke-width:1.3}.tree-chart svg>path.lit{stroke:#c6ae72;stroke-width:2}.tree-chart svg>path.upgrade{stroke-dasharray:5 4;stroke:#a18cc4}.tree-level{position:absolute;top:14px;font-size:9px;letter-spacing:2px;color:#929d87}.tree-node{position:absolute;width:182px;height:86px;padding:9px;display:flex;align-items:center;gap:8px;text-align:left;border:1px solid #3f4a38;background:#192018;color:#b3bba9;cursor:pointer}.tree-node img{width:37px;height:37px;object-fit:contain;flex-shrink:0}.tree-node strong{display:block;font-size:12px;font-weight:600;line-height:1.3}.tree-node small{display:block;font-size:9px;line-height:1.4;margin:4px 0;color:#9aa48e}.tree-node em{font-size:10px;font-style:normal;color:#c8bb94;white-space:nowrap}.tree-node.in-path{border-color:#95834e;color:#e5dcc3;background:#292d1e}.tree-node.selected{border:2px solid #e2c681;box-shadow:0 0 20px #d9b85217}.tree-node.owned{border-color:#79a584}.tree-node b{position:absolute;right:4px;top:0;color:#9cc49b}.tree-detail{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #36402f}.tree-detail>div{padding:28px}.tree-detail h3{font-size:30px;margin:8px 0}.tree-detail p{font-size:13px;line-height:1.8}.tree-detail .text-button{font-size:inherit}.tree-price{color:#e1c889;font-size:18px!important}.tree-price small{display:block;font-size:11px;color:#a4ad99}.tree-budget{background:#20281b;border-left:1px solid #36402f}.tree-totals{display:flex;gap:45px}.tree-totals strong{font-family:Georgia,serif;font-size:38px;color:#e2c98e}.tree-totals small{font-family:inherit;font-size:14px;display:block;color:#aab69a}.tree-budget ol{padding-left:20px;font-size:12px}.tree-budget li{padding:7px 0;border-bottom:1px solid #3a432e}.tree-budget li small{display:block;color:#aeb698;font-size:11px}.tree-owned,.tree-source{border-top:1px solid #36402f;padding:18px 24px;font-size:12px}.tree-owned summary,.tree-source summary{cursor:pointer;color:#d3c99d}.tree-owned>div{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:18px 0}.tree-owned label{display:flex;gap:8px;align-items:center;cursor:pointer}.tree-owned input{accent-color:#c3ac6c}.tree-source p{line-height:1.8;max-width:850px}.construction-card-cost{border-top:1px solid #3c4535;padding-top:14px;margin-top:14px;font-size:12px;color:#d6c18c}.construction-card-cost small{display:block;color:#9da78e;margin:5px 0 10px}.tree-card-button{border:1px solid #5c6044;padding:8px 12px;background:transparent;color:#d8c389;cursor:pointer;font-size:12px}.tree-node:focus-visible,.tree-clans button:focus-visible,.tree-scroll:focus-visible{outline:2px solid #f3da93;outline-offset:3px}
@media(max-width:700px){.tree-heading,.tree-controls{align-items:flex-start;flex-direction:column;padding:18px 16px}.tree-heading h3{font-size:22px}.tree-clans{width:100%}.tree-clans button{flex:1;padding:9px 7px;font-size:12px}.tree-controls label{width:100%;display:block}.tree-controls select{display:block;width:100%;max-width:none;margin-top:7px;font-size:13px}.tree-legend{padding:12px 16px;gap:8px}.tree-detail{grid-template-columns:1fr}.tree-detail>div{padding:22px 18px}.tree-budget{border-left:0;border-top:1px solid #36402f}.tree-owned>div{grid-template-columns:repeat(2,1fr)}.tree-owned,.tree-source{padding:18px 16px}}
.tree-legend .access-key{color:#9fbc9e}.tree-chart svg>path.access{stroke:#81a780;stroke-dasharray:2 4}.building-card{scroll-margin-top:100px}
.tree-quick{padding:12px 24px 20px;display:flex;justify-content:space-between;gap:12px;align-items:center;font-size:12px;color:#a8b19d}.tree-quick strong{color:#dfc68a;font-size:16px;margin-left:10px}.tree-quick .text-button{font-size:12px}.tree-detail{scroll-margin-top:90px}@media(max-width:700px){.tree-quick{padding:0 16px 18px;align-items:flex-start;flex-direction:column}.tree-quick strong{display:block;margin:6px 0 0}.tree-scroll:before{content:'Vuốt ngang để xem hết sơ đồ →';display:block;padding:10px 16px;font-size:11px;color:#a9b497}}
/* Top-down construction tree, with details alongside on desktop. */
.tree-workspace{display:grid;grid-template-columns:minmax(0,1fr) 330px;align-items:start;border-top:1px solid #36402f}.tree-graph-panel{min-width:0}.tree-sidebar{min-width:0;border-left:1px solid #36402f;background:#192117}.tree-detail{display:block;border-top:0}.tree-detail>div{padding:22px}.tree-detail h3{font-size:26px}.tree-budget{border-left:0;border-top:1px solid #36402f}.tree-owned>div{grid-template-columns:1fr 1fr}.tree-owned,.tree-source{padding:18px 22px}.tree-scroll{max-height:calc(100vh - 170px);min-height:400px;overscroll-behavior:contain}.tree-scroll:before{display:none}.tree-chart{margin:0 auto}.tree-node{width:124px;height:94px;padding:8px 7px;gap:5px;align-items:flex-start}.tree-node img{width:25px;height:25px;margin-top:2px}.tree-node>span{min-width:0}.tree-node strong{font-size:10px;line-height:1.35}.tree-node small{font-size:8px;line-height:1.35;overflow-wrap:anywhere;margin:4px 0}.tree-node em{white-space:normal;display:block;font-size:9px;line-height:1.4}.tree-level{font-size:9px;letter-spacing:1.5px;pointer-events:none}.tree-heading h3{font-size:23px}.tree-legend{padding:13px 16px;font-size:10px;gap:10px}.tree-sidebar .tree-totals{gap:32px}.tree-sidebar .tree-totals strong{font-size:34px}.tree-sidebar .tree-detail p{font-size:12px}.tree-sidebar .tree-detail .note{font-size:10px}.tree-sidebar .tree-detail .eyebrow{font-size:9px}.tree-sidebar .tree-owned label{font-size:11px}.tree-sidebar .tree-source p{font-size:11px}.tree-sidebar{position:sticky;top:18px;max-height:calc(100vh - 36px);overflow-y:auto}.tree-scroll:focus-visible{outline-offset:-3px}
@media(max-width:999px){.tree-workspace{grid-template-columns:1fr}.tree-sidebar{position:static;max-height:none;border-left:0;border-top:1px solid #36402f}.tree-scroll{max-height:70vh}.tree-detail{display:grid;grid-template-columns:1fr 1fr}.tree-detail .tree-budget{border-top:0;border-left:1px solid #36402f}.tree-owned>div{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.tree-detail{display:block}.tree-detail .tree-budget{border-top:1px solid #36402f;border-left:0}.tree-owned>div{grid-template-columns:1fr 1fr}.tree-scroll{max-height:65vh}.tree-node{height:94px}.tree-controls>span{font-size:11px}.tree-scroll:before{display:none}}
/* Hero skill artwork and acquisition paths */
.hero-skill-guide{padding:12px 14px;background:#253020;border-left:2px solid #b69d60;color:#c8d1bb;font-size:11px;line-height:1.8;margin:16px 0 10px}.ability-card summary .skill-art{display:flex;flex:0 0 56px;align-items:center;justify-content:center;width:56px;height:56px;background:radial-gradient(ellipse,#60663a44,transparent 75%)}.skill-art img{display:block;width:52px;height:52px;object-fit:contain}.skill-art.is-portrait{background:#23301e;border:1px solid #3d4c35}.skill-art.is-portrait img{width:49px;height:49px}.ability-card summary .ability-name{flex:1;min-width:0}.ability-name em{font-style:normal;font-size:9px;color:#bca66f;display:block;margin-top:7px;line-height:1.5}.ability-card .expand-icon{flex-shrink:0}.ability-card .acquisition{padding:12px 14px;background:#202b1e;font-size:10px;margin:12px 0}.ability-card .acquisition>p{font-size:11px;line-height:1.8;margin:5px 0 10px}.ability-card .acquisition>small{font-size:8px;color:#99a78e;line-height:1.7;display:block;margin-top:10px}.skill-building-link{display:flex;align-items:center;gap:10px;width:100%;padding:10px;background:#131e13;border:1px solid #455238;text-align:left;color:#d8c28e;cursor:pointer}.skill-building-link img{width:38px;height:38px;object-fit:contain;flex:0 0 38px}.skill-building-link b{font-size:11px;font-weight:500;display:block}.skill-building-link small{font-size:9px;color:#a3b292;display:block;margin-top:4px;line-height:1.5}.skill-building-link:hover{border-color:#ba9b56}.skill-building-link:focus-visible{outline:2px solid #e2c481;outline-offset:3px}.ability-card p.skill-image-note{font-size:9px;color:#92a086;line-height:1.7}.ability-card .skill-research-cost b{font-size:11px;color:#dac68c}.ability-tabs{flex-wrap:wrap}
@media(max-width:760px){.ability-card summary{padding:12px;gap:10px}.ability-card summary .skill-art{flex-basis:48px;width:48px;height:48px}.skill-art img{width:46px;height:46px}.skill-art.is-portrait img{width:43px;height:43px}.ability-name em{font-size:9px}.ability-card .acquisition{padding:11px}.hero-skill-guide{font-size:10px}.ability-tabs button{min-width:65px}.skill-building-link{padding:9px}}