:root{--ink:#18332f;--deep:#0e211f;--paper:#efe7d6;--text:#202c29;--muted:#687164;--gold:#a88a58;--line:#baa980;--red:#9c4338;--jade:#74b7ad;--enemy:#c56855;--font:var(--font-body);--serif:var(--font-body)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(ellipse at 30% 0,#30463e,transparent 55%),repeating-linear-gradient(110deg,#ffffff02 0 1px,transparent 1px 7px),#0e211f;color:var(--paper);font:14px var(--font)}button,input,select{font:inherit}button{cursor:pointer;min-height:44px;border:1px solid #a88a5866;border-radius:2px;background:#efe7d6;color:var(--text);padding:10px 14px;font-weight:600;transition:background .15s,box-shadow .15s}button:hover:not(:disabled){background:#f8f0dc;box-shadow:0 0 0 1px #a88a58}button:disabled{opacity:.45;cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--jade);outline-offset:3px}.primary{background:linear-gradient(135deg,#aa5041,#873d33);border:1px solid #c78765;box-shadow:inset 0 0 0 3px #71392c66;color:#fff0d6;letter-spacing:.06em}.primary:hover:not(:disabled){background:#b05b49}.muted{font-size:12px;line-height:1.7;color:var(--muted)}.eyebrow{font-size:10px;letter-spacing:.24em;font-weight:600;color:var(--gold);margin:0 0 8px}h1,h2,h3,p{margin:0}h2,h3{font-family:var(--serif)}h2{font-size:30px;letter-spacing:.08em}h3{font-size:18px}a{color:inherit}input,select{border:1px solid #b9ac8c;background:#faf3e5;color:var(--text);padding:10px;min-width:0;border-radius:2px;min-height:44px}input[type=number]{font-variant-numeric:tabular-nums}.masthead{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:linear-gradient(90deg,#112825f2,#18332fe8);border-bottom:1px solid #a88a5866;position:relative;z-index:2}.brand{display:flex;gap:12px;align-items:center;text-decoration:none}.seal{writing-mode:vertical-rl;background:#883d33;color:#edcf9f;border:3px double #c28d63;padding:6px 4px;font:18px var(--serif);letter-spacing:2px}.brand h1{font:25px var(--serif);letter-spacing:.19em;color:#ead8b5}.brand div>span{font-size:10px;letter-spacing:.24em;color:#a7b6a7}.top-right{display:flex;align-items:center;gap:18px}.prototype{font-size:10px;color:#a9b7a7;letter-spacing:.12em}.icon-button{background:transparent;border-radius:50%;padding:0;width:36px;min-height:36px;color:#e8d6b4}.shell{max-width:1520px;margin:0 auto;padding:25px 30px}.home{padding-top:24px}.home-hero{position:relative;min-height:480px;display:grid;grid-template-columns:1fr 1fr;overflow:hidden;border-bottom:1px solid #a88a5866;background:linear-gradient(90deg,#0c2429f2 0,#102b2ee6 33%,#10272782 100%),url('assets/battlefield-v3.webp') center/cover}.home-hero:after{content:'';position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 110px #081b1ccc}.hero-copy{position:relative;z-index:1;padding:70px 60px 40px}.hero-copy h2{font-size:clamp(38px,5vw,64px);line-height:1.32;color:#f1e0be;font-weight:500;letter-spacing:.13em;text-shadow:0 4px 14px #0005}.home-intro{margin:24px 0;color:#b4c2b6;font-size:15px;line-height:1.85}.hero-rule{display:flex;gap:0;margin:24px 0;color:#d9c39b;font-size:12px}.hero-rule span{padding:0 16px;border-right:1px solid #a88a5877}.hero-rule span:first-child{padding-left:0}.hero-rule span:last-child{border:0}.hero-link{display:inline-block;text-decoration:none;color:#8dd0bd;font-size:12px;letter-spacing:.15em;border-bottom:1px solid #74b7ad66;padding-bottom:7px}.hero-portrait{position:relative;z-index:1;min-height:480px;overflow:hidden}.standing{display:block;width:100%;height:100%}.standing img{width:100%;height:100%;object-fit:contain;display:block}.hero-portrait>.standing{position:absolute;inset:0;filter:drop-shadow(0 8px 18px #061b1b)}.hero-portrait .standing img{object-position:50% 7%;height:125%;width:115%;margin-left:-5%}.hero-name{position:absolute;bottom:24px;right:32px;border-left:2px solid var(--gold);padding-left:14px;z-index:1;text-shadow:0 2px 6px #000}.hero-name b{display:block;font:30px var(--serif);letter-spacing:.2em;color:#f5e2bb}.hero-name span{font-size:11px;color:#c1cdbd;letter-spacing:.1em}.hero-side-note{position:absolute;right:20px;top:40px;writing-mode:vertical-rl;letter-spacing:.45em;color:#a88a58b3;font:14px var(--serif);z-index:2}.mode-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:24px 0}.mode-grid section{position:relative;border:1px solid #a88a585e;background:linear-gradient(145deg,#223c34,#132d27);padding:24px;display:grid;gap:10px;align-content:start;box-shadow:inset 0 0 0 5px #a88a5808}.mode-number{font:30px var(--serif);color:#a88a58;margin-bottom:3px}.mode-grid h3{font-size:23px;letter-spacing:.12em;color:#e9d8b8}.mode-grid p{font-size:12px;color:#b1bdab;line-height:1.8;margin:10px 0 13px}.mode-grid input,.mode-grid select,.mode-grid button{width:100%}.mode-grid input,.mode-grid select{background:#0f2721;color:#e0d6bd;border-color:#a88a5855}.mode-grid input::placeholder{color:#91a391}.join-row{display:flex;gap:8px}.join-row button{width:75px}.home-foot{display:flex;justify-content:space-between;color:#a3b2a1;font-size:11px;border-top:1px solid #a88a5833;padding-top:15px;letter-spacing:.07em}.home-foot span{color:#baa77c}#homeStatus{margin-top:15px;font-size:12px;color:#e0ba8c}.mode-bar{display:flex;align-items:center;gap:16px;margin-bottom:26px}.mode-bar button{background:transparent;color:#d8c6a5;font-size:12px}.mode-bar b{font-size:12px;letter-spacing:.06em}.mode-bar>.muted{margin-left:auto;color:#93a28f}.setup-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}.setup-head h2{color:#eee0bf;font-size:32px;font-weight:500}.setup-head p:not(.eyebrow){color:#abb9a6;font-size:12px;line-height:1.8;margin-top:12px}.muster-seal{font:22px var(--serif);letter-spacing:.18em;border:3px double #a88a5877;color:#c9b182;padding:12px 15px;line-height:1.2;transform:rotate(-4deg);text-align:center}.muster-seal small{font-size:12px}.setup-grid{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:24px}.section-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #a88a584d;padding-bottom:14px;margin-bottom:14px;color:#e3d1af}.section-head h3 small{font:10px var(--font);color:#a5b39f;margin-left:10px}.section-head>span{font-size:12px;color:#b7c8ae}.presets{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}.presets button{background:#223b31;border-color:#a88a5855;color:#cebea0;font-size:11px;padding:8px 12px}.general-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}.general-cell{position:relative;min-width:0}.general{width:100%;padding:0;background:linear-gradient(160deg,#d9d0b8,#ede3ce 65%,#c2b79d);border:1px solid #9f926f;position:relative;overflow:hidden;min-height:250px;text-align:left;display:block;box-shadow:inset 0 0 0 4px #eee5cf66}.general:hover:not(:disabled){background:#f2e6cf}.general.selected{border:2px solid #b9c5a2;box-shadow:0 0 0 1px #74b7ad66,inset 0 0 0 4px #18473b22}.general-art{height:198px;padding:9px 6px 0;background:radial-gradient(ellipse at 50% 60%,#fff9e855,transparent 65%)}.general-art .standing img{object-position:50% 0}.general-caption{position:relative;background:linear-gradient(0deg,#132d26,#132d26e6);padding:12px 11px;color:#e9d7b1}.general-caption h3{font-size:19px;letter-spacing:.13em;font-weight:500;white-space:nowrap}.general .tag{font-size:9px;color:#aab7a2;display:block;margin-top:6px;line-height:1.7}.faction-mark{position:absolute;top:8px;left:8px;background:#384b40;color:#eddfc3;border:1px solid #a88a58a6;font:13px var(--serif);padding:3px 5px;z-index:1}.faction-魏 .faction-mark{background:#354755}.faction-吳 .faction-mark{background:#71483b}.selected-mark{position:absolute;right:6px;top:10px;color:#dfeac8;background:#284d3de0;font-size:9px;padding:3px 5px;z-index:1;min-height:0}.selected-mark:empty{display:none}.inspect-link{background:transparent;border:none;border-bottom:1px solid #a88a583d;border-radius:0;padding:7px 2px;color:#b7c0aa;font-size:9px;min-height:36px;width:100%;text-align:left}.inspect-link:hover:not(:disabled){background:#213a30;color:#ead7b4}.intro-map-caption{display:flex;justify-content:space-between;gap:12px;padding-top:18px;margin-top:15px;border-top:1px solid #a88a5833;color:#8c9e8b;font-size:10px}.roster-panel{align-self:start;position:sticky;top:15px;background:repeating-linear-gradient(110deg,#88724603 0 1px,transparent 1px 6px),var(--paper);color:var(--text);padding:22px;border:1px solid #baa781;box-shadow:inset 0 0 0 5px #b49c7520,0 8px 24px #0002}.roster-title{display:flex;justify-content:space-between;align-items:center;margin:12px 0 16px}.roster-title h3{font-size:21px}.roster-title strong{font-size:22px;font-variant-numeric:tabular-nums}.over,.validation{color:var(--red)}.roster-row{padding:10px 0;border-bottom:1px solid #b7a98455;margin-bottom:5px}.roster-person{display:flex;align-items:center;gap:12px;margin-bottom:9px}.roster-person>div{display:grid;gap:5px}.roster-person b{font:16px var(--serif)}.roster-person span:not(.headshot){font-size:10px;color:#6a705c}.headshot{display:block;position:relative;overflow:hidden;width:55px;height:63px;flex-shrink:0;background:linear-gradient(135deg,#dbd2b9,#b5bba4);border:1px solid #a88a5877}.headshot img{position:absolute;width:100%;height:250%;top:-5%;object-fit:cover;object-position:50% 0;display:block}.inputs{display:flex;gap:6px;align-items:center;font-size:11px}.inputs select{flex:1;width:100px}.inputs input{width:73px}.empty-slot{border:1px dashed #b7a985;padding:25px 8px;text-align:center;font-size:11px;color:#7d806e;margin-bottom:9px}.roster-panel>.primary{width:100%;margin-top:12px}.validation{font-size:11px;min-height:20px;line-height:1.6;margin-top:10px}.footnote{font-size:10px;line-height:1.7;color:#747a67;padding-top:14px}.lobby{max-width:720px;margin:50px auto;background:#eae0c8;color:var(--text);border:1px solid #a88a58;box-shadow:inset 0 0 0 6px #a88a5822;padding:35px}.lobby h2{font:32px var(--serif)}.lobby p{line-height:1.8;margin:20px 0;color:#67715e}.lobby input{width:100%;margin-bottom:12px}.lobby button{margin:5px 8px 5px 0}
/* Battle HUD and five-army command surface */
.view-battle .masthead{height:52px}.view-battle .brand h1{font-size:20px}.view-battle .seal{font-size:13px;padding:3px}.view-battle .brand div>span{font-size:8px}.battle-shell{padding:12px 18px 22px}.battle-top{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 auto 12px;max-width:1320px}.phase-heading{display:flex;align-items:center;gap:15px}.round-badge{font-size:10px;color:#adbaab;margin-bottom:4px}.phase-heading h2{font-size:21px;font-weight:500;color:#e4d3b1}.phase-pill{font-size:10px;color:#d0b98b;border:1px solid #a88a5866;padding:5px 8px;border-radius:2px;white-space:nowrap}.battle-stats{display:flex;align-items:center;gap:18px}.stat{font-size:9px;color:#a2b4a0}.stat b{display:block;font-size:19px;color:#e2dabd;margin-top:3px;font-variant-numeric:tabular-nums}.clock{font-size:28px;color:#e9d5ac;font-variant-numeric:tabular-nums;font-weight:600;min-width:64px}.clock.urgent{color:#ed9a79}.battle-stats button{background:#213c31;color:#cfbea0;min-height:35px;font-size:10px;padding:7px 9px}.battle-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;max-width:1320px;margin:auto}.field-wrap{border:1px solid #a88a5877;position:relative;background:#152e26;box-shadow:inset 0 0 0 3px #b79a5b11,0 8px 24px #0003}.field-top{display:flex;justify-content:space-between;gap:10px;padding:10px 14px;background:#102923;color:#c4ceb8;font-size:10px;border-bottom:1px solid #a88a5833}.field-top b{color:#d7c393;font-size:11px;letter-spacing:.12em}.field-top>span{color:#9caf9b;font-size:9px}.campaign-time{position:relative;padding:10px 14px;background:linear-gradient(90deg,#1c372c,#152f28);border-bottom:1px solid #a88a5855}.campaign-time>b{font:22px var(--serif);color:#eddfbc;margin-right:12px}.campaign-time>span{font-size:10px;color:#aab9a5}.day-timeline{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;margin-top:7px}.day-timeline span{text-align:center;font-size:10px;padding:5px 2px;border:1px solid #a88a5833;color:#829985;position:relative}.day-timeline .current{color:#f1dfb6;border-color:#b29761;background:#a88a5822}.day-timeline .current:after{content:'';position:absolute;height:2px;bottom:-1px;left:20%;right:20%;background:#c5b181}.enemy-roster{font-size:9px;padding:7px 12px;color:#bac7b1;border-bottom:1px solid #a88a5833;background:#163229;line-height:1.5}.canvas-wrap{position:relative;aspect-ratio:1000/640;touch-action:none;line-height:0;overflow:hidden}canvas{display:block;width:100%;height:100%;cursor:crosshair}.field-hint{position:absolute;left:10px;bottom:8px;max-width:80%;padding:7px 10px;background:#112b25db;color:#dfd3b5;border:1px solid #a88a5844;font-size:9px;line-height:1.5;pointer-events:none;box-shadow:0 2px 8px #0002}.field-legend{display:flex;flex-wrap:wrap;gap:12px;padding:8px 12px;background:#132b25;color:#9aaf97;font-size:9px}.field-legend span:last-child{margin-left:auto;font-size:8px}.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--jade);margin-right:5px}.dot.enemy{background:var(--enemy)}.map-tools{position:absolute;right:9px;top:9px;display:flex;gap:4px;line-height:normal}.map-tools button{background:#17342ce8;color:#e8d6b3;border-color:#a88a5866;min-height:34px;width:34px;padding:0;font-size:18px}.unit-cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin-top:10px}.unit-card{display:flex;text-align:left;gap:8px;align-items:center;padding:10px 8px;background:linear-gradient(145deg,#203a32,#142d27);border:1px solid #a88a5866;color:#e6d3ad;position:relative;min-width:0;box-shadow:inset 0 0 0 3px #a88a5808}.unit-card:hover:not(:disabled){background:#294536}.unit-card.selected{border-color:#ccbc8b;box-shadow:inset 0 0 0 1px #c6bb8b66,0 0 10px #b9b47733;background:#27483b}.unit-card .headshot{width:43px;height:68px;background:#89907a;border-color:#b6a47755}.unit-slot{position:absolute;left:5px;top:2px;font:10px var(--serif);color:#c5b083;z-index:1}.unit-copy{min-width:0;flex:1}.unit-name{font:16px var(--serif);white-space:nowrap;letter-spacing:.08em}.unit-type{font-size:8px;color:#aebba1;margin-top:4px;white-space:nowrap}.unit-number{font-size:14px;font-variant-numeric:tabular-nums;display:block;margin-top:5px;color:#e7d5ac}.unit-number small{font-size:8px;color:#a5b69a}.unit-status{font-size:8px;color:#9fb196;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:5px}.morale-bars{display:flex;gap:3px;margin-top:6px}.morale-bars i{height:3px;flex:1;background:#5f735633;transform:skewX(-12deg)}.morale-bars .on{background:#74b7ad}.morale-bars.low .on{background:#c56855}.unit-card.lost{opacity:.45;filter:grayscale(.65)}.base-bars{display:flex;gap:16px;font-size:9px;color:#a8b69e;margin-top:9px}.base-bars>div{flex:1}.base-bars span{float:right}.bar{background:#5b604738;height:3px;margin-top:4px}.bar i{display:block;height:100%;background:#74b7ad}.bar.enemy i{background:#c56855}.event-strip{display:flex;gap:16px;padding:10px 0;border-top:1px solid #a88a5833;margin-top:10px;font-size:9px;color:#98ad94;min-height:30px}.event-strip b{color:#bba67d;white-space:nowrap}.events{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.phase-progress{height:2px;background:#a88a5822;margin:8px auto 0;max-width:1320px}.phase-progress i{display:block;height:100%;background:#a88a58;transition:width .15s}.orders-panel{background:repeating-linear-gradient(120deg,#826a4003 0 1px,transparent 1px 5px),var(--paper);color:var(--text);padding:17px;border:1px solid #b79e72;box-shadow:inset 0 0 0 4px #bba57e1c;align-self:start}.commander-heading{display:flex;align-items:center;gap:14px;border-bottom:1px solid #baab8755;padding-bottom:13px;margin-bottom:12px}.commander-heading h3{font-size:27px;font-weight:500;letter-spacing:.14em}.commander-heading>div>span{font-size:10px;color:#68725f}.commander-heading .eyebrow{font-size:10px;margin-bottom:5px}.commander-portrait{padding:0;border:1px solid #a88a58;width:73px;height:92px;background:#d8d0b8;min-height:0}.commander-portrait .headshot{width:100%;height:100%;border:0}.order-title{display:none}.draft-heading{color:#f1e1be;background:#1b3a30;font-size:10px;letter-spacing:.08em;padding:9px;margin-bottom:12px}.passive-box{font-size:10px;line-height:1.8;background:#dce0cb66;padding:10px;border-left:2px solid #a88a58;margin-bottom:13px;color:#596350}.passive-box b{color:#253b2a}.label{display:block;font-size:10px;color:#66705d;margin:14px 0 7px}.segmented{display:flex;gap:4px}.segmented button{flex:1;padding:8px 2px;font-size:10px;background:#e6dfcd}.segmented button.active{background:#244537;color:#eee0b9;border-color:#547662}.route-actions{display:flex;gap:5px}.route-actions button{font-size:10px;padding:7px 4px;flex:1;min-height:36px}.route-actions .active{border-color:#3e6c56;background:#d4dfc5}.orders-list{list-style:none;padding:0;margin:10px 0;min-height:40px}.orders-list li{display:flex;align-items:center;gap:8px;padding:9px 0;border-bottom:1px solid #b7aa8244;font-size:10px}.orders-list li>span:first-child{width:21px;height:21px;background:#497467;color:#f3e8cf;border-radius:50%;display:grid;place-items:center;flex-shrink:0}.orders-list li>span:nth-child(2){flex:1}.orders-list small{display:block;margin-top:4px;color:#757c65;font-size:9px;line-height:1.6}.orders-list .remove{margin-left:auto;padding:0 4px;min-height:26px;min-width:26px;background:transparent;border:0}.retreat-row{display:flex;align-items:center;gap:5px;font-size:10px}.retreat-row input{width:53px;padding:7px;min-height:37px}.retreat-row select{flex:1;min-width:0;font-size:10px;padding:7px;min-height:37px}.retreat-position{width:100%;font-size:10px;margin-top:8px;min-height:36px;padding:8px}.forecast-note{font-size:9px;line-height:1.7;color:#788069;margin-top:12px}.command-footer{padding-top:14px;border-top:1px solid #b4a68255;margin-top:14px}.command-footer>.primary,.command-footer>#clearDraft{width:100%;padding:12px}.command-footer p{font-size:9px;color:#778068;text-align:center;line-height:1.7;margin-top:9px}.deploy-note{font-size:11px;color:#68735f;line-height:1.85;margin:14px 0}.deploy-info{display:flex;justify-content:space-between;font-size:11px;border-bottom:1px solid #b8a98444;padding:9px 0}.watch-heading{text-align:center;padding:8px 0 14px}.watch-seal{font:30px var(--serif);color:#a88a58;margin:5px}.watch-heading h3{font-size:16px}.watch-heading p{font-size:11px;line-height:1.8;color:#717b65;margin-top:8px}.watch-objectives{margin:12px 0}.objective-row{display:flex;justify-content:space-between;border-bottom:1px solid #b3a78444;font-size:10px;padding:9px 0}.objective-row span{color:#7a806c;font-size:9px}.speed-row{display:flex;align-items:center;justify-content:space-between;font-size:10px;color:#768168}.speed-row button{min-height:30px;padding:4px 9px}.guide,.connection{background:#d3c299;color:#203e2b;font-size:10px;line-height:1.7;padding:8px 12px;border-bottom:1px solid #a88a5866}.guide button{font-size:9px;margin-left:12px;min-height:28px;padding:4px 8px}.connection{background:#294439;color:#b4ceb7}.panel-toggle{display:none}
/* Portrait gallery, reports and dialogs */
dialog{color:var(--text);background:var(--paper);border:1px solid #b69c71;border-radius:2px;padding:28px;max-width:670px;width:calc(100% - 28px);max-height:90dvh;overflow:auto;box-shadow:inset 0 0 0 5px #bda98522,0 25px 100px #041a18b3}dialog::backdrop{background:#071c1cce;backdrop-filter:blur(5px)}dialog .close{position:absolute;right:10px;top:10px;padding:0;width:35px;min-height:35px;background:transparent;border:0;font-size:23px;z-index:2}.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:25px 0}.help-grid b{font-size:12px}.help-grid p{font-size:11px;color:#687361;line-height:1.85;margin-top:8px}.terrain-help{display:flex;gap:8px;flex-wrap:wrap;font-size:10px;margin:10px 0 15px}.terrain-help span{background:#dedac6;padding:6px 8px}.close-help{margin-top:18px;min-width:150px}.result-content{text-align:center}.result-content h2{font-size:37px;font-weight:500;margin:14px 0;color:#263f2d}.reason{font-size:11px;line-height:1.8;color:#738067}.result-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:25px 0}.result-stats>div{padding:20px;background:#dce0c8;border:1px solid #b8aa80;font-size:11px}.result-stats b{display:block;font-size:27px;margin:10px 0}.turning-points{text-align:left;padding:17px 0;border-top:1px solid #b6aa8644}.turning-points h3{font-size:17px}.turning-points p{font-size:11px;margin-top:10px;line-height:1.6}.feedback{text-align:left;border-top:1px solid #b6aa8644;padding-top:20px}.feedback p{font-size:11px;margin-bottom:10px}.rating-row{display:flex;gap:6px;margin-bottom:15px}.rating-row button{flex:1;font-size:11px;padding:8px 2px}.rating-row .active{background:#315c45;color:#efe3c3}.result-actions{display:flex;gap:8px;margin-top:20px}.result-actions button{flex:1;font-size:11px;padding:10px 4px}.toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:#132d28;color:#eedcbc;border:1px solid #a88a5877;box-shadow:0 8px 30px #0005;padding:12px 20px;z-index:40;text-align:center;font-size:12px;max-width:90vw}.portrait-layout{display:grid;grid-template-columns:1.15fr 1fr;gap:35px;align-items:center;min-height:500px}.portrait-stage{position:relative;height:65dvh;min-height:440px;max-height:690px;background:radial-gradient(ellipse at 50% 65%,#c7cbb5aa,transparent 65%)}.portrait-stage .standing{filter:drop-shadow(0 4px 8px #394f4028)}.portrait-inscription{position:absolute;left:0;top:20px;writing-mode:vertical-rl;font:18px var(--serif);letter-spacing:.24em;color:#a08d62}.portrait-details h2{font-size:40px;font-weight:500;letter-spacing:.16em}.portrait-personality{font:14px var(--serif);color:#8a7958;margin:14px 0 25px}.portrait-trait{padding:15px 0;border-top:1px solid #baa98066}.portrait-trait span{display:block;font-size:10px;color:#83866f;letter-spacing:.15em;margin-bottom:7px}.portrait-trait b{font:21px var(--serif)}.portrait-trait p{font-size:11px;line-height:1.8;color:#68715c;margin-top:7px}.portrait-details>.primary{width:100%;margin-top:15px}.portrait-navigation{display:flex;align-items:center;justify-content:space-between;margin-top:23px;color:#859075;font-size:11px}.portrait-navigation button{padding:6px 12px}#portraitDialog{max-width:900px;padding:30px 40px;background:linear-gradient(120deg,#e3ddc9,#f1e9d8)}[hidden]{display:none!important}
@media(min-width:1600px){.general-art{height:240px}.general{min-height:295px}.unit-card .headshot{width:56px;height:79px}.battle-layout{grid-template-columns:minmax(0,1fr) 330px}.orders-panel{padding:22px}}
@media(max-width:1200px){.general-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.setup-grid{grid-template-columns:minmax(0,1fr) 300px}.shell{padding:20px}.unit-card .headshot{width:35px;height:60px}.unit-card{padding:10px 6px;gap:5px}.unit-name{font-size:14px}.unit-type{font-size:7px}.hero-copy{padding:60px 40px}.battle-layout{grid-template-columns:minmax(0,1fr) 285px}}
@media(max-width:900px){.setup-grid{grid-template-columns:minmax(0,1fr) 275px}.general-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.general-art{height:180px}.general{min-height:234px}.battle-layout{grid-template-columns:minmax(0,1fr) 255px}.battle-stats{gap:11px}.stat b{font-size:17px}.orders-panel{padding:12px}.unit-card{display:block;text-align:center;padding:7px 3px}.unit-card .headshot{width:35px;height:40px;margin:auto auto 5px}.unit-status{font-size:7px}.home-hero{min-height:430px}.hero-copy{padding:50px 25px}.hero-portrait{min-height:430px}}
@media(max-width:760px){.masthead{height:62px;padding:0 15px}.brand h1{font-size:21px}.brand div>span{font-size:8px}.prototype{display:none}.seal{font-size:15px}.shell{padding:15px 12px}.home-hero{min-height:390px;grid-template-columns:1.1fr 1fr;margin:0 -12px}.hero-copy{padding:40px 16px;z-index:2}.hero-copy h2{font-size:35px;line-height:1.38;letter-spacing:.09em}.home-intro{font-size:11px;line-height:1.8;margin:20px 0}.hero-rule{flex-wrap:wrap;font-size:9px;line-height:2;margin:18px 0}.hero-rule span{padding:0 7px}.hero-portrait{min-height:390px;margin-left:-40px}.hero-portrait .standing img{height:110%;width:150%;margin-left:-22%}.hero-name{right:9px;bottom:18px;padding-left:7px}.hero-name b{font-size:22px}.hero-name span{font-size:8px}.hero-side-note{font-size:10px;right:8px;top:25px}.mode-grid{grid-template-columns:1fr;gap:12px;margin-top:16px}.mode-grid section{grid-template-columns:30px 1fr;gap:8px 12px;padding:19px}.mode-grid section>button,.mode-grid section>input,.mode-grid section>select,.mode-grid section>.join-row{grid-column:2}.mode-number{font-size:23px}.mode-grid h3{font-size:21px}.mode-grid p{font-size:11px;margin:8px 0}.home-foot{font-size:9px;display:block;line-height:2}.home-foot span{display:block}.mode-bar{font-size:10px;gap:10px;margin-bottom:18px}.mode-bar>.muted{display:none}.mode-bar button{font-size:10px;padding:8px}.setup-head{margin-bottom:20px}.setup-head h2{font-size:25px}.setup-head p:not(.eyebrow){font-size:10px}.muster-seal{font-size:17px;padding:9px}.muster-seal small{font-size:10px}.setup-grid{display:flex;flex-direction:column;gap:25px}.general-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.general-art{height:170px;padding:7px 0 0}.general{min-height:220px}.general-caption{padding:10px 7px}.general-caption h3{font-size:17px}.general .tag{font-size:8px;margin-top:4px}.faction-mark{font-size:11px;left:5px;top:5px;padding:2px 4px}.selected-mark{right:4px;top:7px;font-size:8px;padding:2px}.inspect-link{font-size:8px;min-height:35px}.section-head h3{font-size:16px}.section-head h3 small{display:none}.presets{gap:5px}.presets button{font-size:9px;padding:6px 8px}.roster-panel{position:static;padding:18px}.roster-row{display:flex;align-items:center;gap:12px;padding:10px 0}.roster-person{margin:0;min-width:125px}.roster-person .headshot{width:43px;height:52px}.roster-person b{font-size:15px}.roster-person>div{gap:5px}.inputs{flex:1}.inputs select{min-width:65px;width:70px;padding:7px;font-size:10px}.inputs input{width:58px;padding:7px;font-size:11px}.intro-map-caption{font-size:9px}.battle-shell{padding:9px 8px 220px}.view-battle .masthead{height:48px;padding:0 12px}.view-battle .brand h1{font-size:18px}.view-battle .brand div>span{font-size:7px}.battle-top{gap:8px;flex-wrap:wrap;margin-bottom:8px}.phase-heading{gap:8px}.phase-heading h2{font-size:18px}.phase-pill{font-size:8px;padding:4px 6px}.round-badge{font-size:9px}.battle-stats{gap:11px;width:100%;padding-top:7px;border-top:1px solid #a88a5833}.stat{font-size:8px}.stat b{font-size:16px;margin-top:2px}.clock{font-size:24px;min-width:48px;margin-left:auto}.battle-stats button{padding:6px 8px;min-height:32px;font-size:9px}.battle-layout{display:flex;flex-direction:column;gap:8px}.field-top{padding:8px 10px}.field-top>span{font-size:8px}.field-top b{font-size:10px}.campaign-time{padding:9px 10px}.campaign-time>b{font-size:20px;margin-right:9px}.campaign-time>span{font-size:9px}.day-timeline{gap:3px;margin-top:7px}.day-timeline span{font-size:9px;padding:5px 2px}.enemy-roster{padding:6px 9px;font-size:8px}.canvas-wrap{min-height:240px;aspect-ratio:1000/640}.field-hint{font-size:8px;padding:5px 7px;left:6px;bottom:6px;max-width:80%}.field-legend{gap:8px;font-size:8px;padding:7px 9px}.field-legend span:last-child{font-size:7px}.map-tools{right:6px;top:6px}.map-tools button{width:31px;min-height:31px;font-size:16px}.unit-cards{position:fixed;bottom:70px;left:8px;right:8px;z-index:20;margin:0;gap:4px;background:#102823;padding:3px;border-top:1px solid #a88a58}.unit-card{display:block;text-align:center;padding:6px 3px;height:87px}.unit-card .headshot{width:31px;height:32px;float:left;margin:0 4px 2px 0}.unit-name{font-size:12px;padding-top:3px;letter-spacing:0}.unit-type{font-size:7px;margin-top:3px}.unit-number{font-size:12px;clear:both;margin-top:5px}.unit-status{font-size:7px;margin-top:4px}.unit-slot{font-size:8px;left:4px;top:0}.morale-bars{gap:2px;margin-top:5px}.morale-bars i{height:2px}.base-bars{font-size:8px;gap:12px}.event-strip{font-size:8px;gap:9px;padding:8px 0;margin-top:8px}.orders-panel{border:0;padding:0;background:transparent;box-shadow:none}.orders-panel:not(.expanded)>*:not(.panel-toggle):not(.command-footer){display:none}.orders-panel.expanded{position:fixed;bottom:204px;left:8px;right:8px;max-height:50dvh;overflow:auto;background:var(--paper);padding:15px;z-index:19;border:1px solid #b9a174;box-shadow:0 -8px 35px #0005}.orders-panel .panel-toggle{display:block;position:fixed;bottom:162px;left:8px;right:8px;width:calc(100% - 16px);background:#294a3c;color:#e0d0ac;border:1px solid #a88a5877;z-index:21;min-height:36px;padding:7px;font-size:11px}.orders-panel .command-footer{position:fixed;bottom:0;left:0;right:0;margin:0;padding:8px 12px calc(7px + env(safe-area-inset-bottom));background:#142d26f5;border-top:1px solid #a88a5866;z-index:21}.command-footer p{font-size:8px;color:#a6b799;margin-top:5px}.command-footer>.primary,.command-footer>#clearDraft{min-height:40px;padding:10px;font-size:12px}.command-footer>#clearDraft{background:#29493c;color:#eadbbd;border-color:#a88a5866}.commander-heading{padding-bottom:10px;margin-bottom:10px;gap:12px}.commander-portrait{width:55px;height:65px}.commander-heading h3{font-size:23px}.passive-box{font-size:10px;margin-bottom:8px}.draft-heading{font-size:10px;padding:7px}.segmented button,.route-actions button{font-size:10px;min-height:40px}.retreat-row input,.retreat-row select{min-height:40px}.watch-heading{padding:8px}.watch-seal{display:none}.watch-heading p{font-size:10px}.guide,.connection{font-size:9px;padding:7px 9px}.help-grid{grid-template-columns:1fr;gap:15px;margin:20px 0}dialog{padding:24px 20px}.result-actions{flex-wrap:wrap}.result-actions button{min-width:90px}.result-stats>div{padding:16px 8px}.result-stats b{font-size:23px}.result-content h2{font-size:31px}#portraitDialog{padding:22px 18px}.portrait-layout{grid-template-columns:1fr;gap:15px;min-height:0}.portrait-stage{height:49dvh;min-height:330px;max-height:450px}.portrait-inscription{left:8px;font-size:14px}.portrait-details h2{font-size:31px}.portrait-details .eyebrow{font-size:9px}.portrait-personality{margin:10px 0 15px}.portrait-trait{padding:10px 0}.portrait-trait b{font-size:18px}.portrait-navigation{margin-top:16px}.lobby{margin-top:20px;padding:25px 20px}.lobby h2{font-size:28px}}
@media(max-width:380px){.general-art{height:155px}.general{min-height:207px}.general-caption h3{font-size:16px}.general .tag{font-size:7px}.unit-card .headshot{width:26px;height:30px;margin-right:2px}.unit-name{font-size:11px}.roster-person{min-width:115px}.roster-person .headshot{width:35px}.inputs input{width:53px}.inputs select{width:62px}.hero-copy h2{font-size:31px}.hero-portrait{margin-left:-55px}}

/* 點將台：金卡以金色外框識別，入編提示保留青色外光。 */
.setup-shell .general.rarity-gold{border:3px solid transparent;background:linear-gradient(160deg,#d9d0b8,#ede3ce 65%,#c2b79d) padding-box,linear-gradient(145deg,#fff4bb 0%,#b47b21 18%,#f7d97c 39%,#8e5b16 62%,#dfab43 82%,#fff0ae 100%) border-box;box-shadow:0 0 0 1px #69501e,inset 0 0 0 2px #f8e7ae,inset 0 0 0 5px #a7772d55,0 3px 10px #281b0e55}
.setup-shell .general.rarity-gold.selected{background:linear-gradient(160deg,#d9d0b8,#ede3ce 65%,#c2b79d) padding-box,linear-gradient(145deg,#fff8cf 0%,#c28a2a 18%,#ffe696 39%,#a46c1c 62%,#efc361 82%,#fff3ba 100%) border-box;box-shadow:0 0 0 2px #69b9ae,0 0 13px #74b7ad99,inset 0 0 0 2px #fff1bd,inset 0 0 0 5px #a7772d88}
@media(orientation:landscape) and (max-height:550px) and (min-width:761px){.view-battle .masthead{display:none}.battle-shell{padding-top:7px}.battle-top{margin-bottom:7px}.field-top,.enemy-roster{display:none}.campaign-time{padding:6px 10px}.campaign-time>b{font-size:18px}.day-timeline{margin-top:4px}.day-timeline span{padding:3px;font-size:8px}.canvas-wrap{height:55dvh;aspect-ratio:auto}.orders-panel{max-height:95dvh;overflow:auto}.unit-card .headshot{display:none}.unit-card{min-height:70px}.unit-status{font-size:7px}.base-bars,.event-strip{display:none}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

.map-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.three-dimensional{background:#98a391}.map-tools{flex-wrap:wrap;max-width:310px;justify-content:flex-end}.map-tools button{min-width:36px;min-height:36px}.map-tools #moveCamera{width:auto;font-size:10px;padding:6px 8px}.map-tools button.active{background:#74b7ad;color:#18332f}.expanded-map{position:fixed!important;inset:16px 16px 120px!important;z-index:50;aspect-ratio:auto!important;height:auto!important;width:auto!important;border:1px solid #a88a58;box-shadow:0 0 0 100vmax #081c1de8}.expanded-map .field-hint{bottom:12px}.expanded-map .map-tools{top:12px;right:12px}@media(max-width:760px){.map-tools{max-width:235px;gap:3px}.map-tools button{min-width:30px;min-height:30px}.map-tools #moveCamera{font-size:9px}.expanded-map{inset:8px 8px 210px!important}.three-dimensional{aspect-ratio:1.2!important;min-height:290px}.field-hint{font-size:8px}}
@media(min-width:761px){.view-battle .masthead{height:50px}.view-battle .battle-shell{padding:12px 18px}.battle-top{margin-bottom:10px}.canvas-wrap{aspect-ratio:auto;height:clamp(330px,calc(100dvh - 355px),660px)}.campaign-time{padding:10px 12px}.campaign-time>b{font-size:23px}.day-timeline{margin-top:7px}.day-timeline span{padding:5px}.field-top{padding:8px 12px}.guide{padding:6px 12px}.unit-card{min-height:85px;padding-top:8px;padding-bottom:8px}.base-bars,.event-strip{margin-top:6px}.map-tools{max-width:310px}}
/* Native high-detail head portraits, without full-body crop transforms. */
.standing{position:relative;overflow:hidden;isolation:isolate}
.standing img.portrait-face,.hero-portrait .standing img.portrait-face,.general-art .standing img.portrait-face,.headshot img.portrait-face{display:block;position:static;top:auto;left:auto;width:100%;height:100%;margin:0;object-fit:contain;object-position:50% 50%}
.general-art{padding:0}
.portrait-stage{overflow:hidden}
.headshot{background:radial-gradient(ellipse at 50% 35%,#3c5355,#142c2e);border-color:#a88a5880}

/* Shared battlefield: keep the map and five armies in one viewport. */
.map-tools .view-preset{width:auto;font-size:10px;padding:6px 9px}
@media(min-width:761px){
 .view-battle .battle-shell{padding:10px 16px;max-width:1840px}
 .battle-layout{grid-template-columns:minmax(0,1fr) 280px;gap:14px;align-items:start}
 .battle-top{margin-bottom:8px}.phase-heading h2{font-size:23px}.phase-pill{font-size:9px}
 .field-top{padding:7px 11px}.campaign-time{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;padding:7px 11px;align-items:center}
 .campaign-time>b{font-size:20px;margin:0}.campaign-time>span{font-size:9px}.day-timeline{grid-column:1/-1;margin-top:2px;gap:4px}.day-timeline span{padding:3px;font-size:9px}
 .enemy-roster{padding:5px 10px;font-size:9px}.guide{padding:5px 10px}.field-legend{padding:5px 10px}
 .canvas-wrap{height:clamp(330px,calc(100dvh - 302px),760px);aspect-ratio:auto}
 .unit-cards{margin-top:7px;gap:6px}.unit-card{min-height:78px;padding:7px 6px}.unit-card .headshot{width:44px;height:64px}
 .unit-name{font-size:15px}.unit-number{font-size:16px;margin-top:4px}.unit-status{font-size:8px}.unit-type{font-size:8px}.morale-bars{margin-top:4px}
 .orders-panel{max-height:calc(100dvh - 134px);overflow:auto;padding:17px}.commander-portrait{width:66px;height:80px}.commander-heading h3{font-size:27px}
 .base-bars{gap:18px;margin-top:5px;font-size:9px}.event-strip{padding-top:5px;margin-top:4px;font-size:9px}.map-tools{max-width:340px;gap:4px}
}
@media(min-width:1400px){.battle-layout{grid-template-columns:minmax(0,1fr) 310px}.unit-card .headshot{width:53px;height:72px}.unit-card{min-height:87px}.canvas-wrap{height:clamp(400px,calc(100dvh - 315px),780px)}}
@media(max-width:760px){.map-tools .view-preset{font-size:9px;padding:4px 6px}}
.standing.scene-portrait img.portrait-face,.hero-portrait .standing.scene-portrait img.portrait-face,.general-art .standing.scene-portrait img.portrait-face,.headshot.scene-portrait img.portrait-face{object-fit:cover;object-position:50% 25%}

@media(min-width:761px){
 .view-battle .field-top{display:none}.view-battle .battle-top{min-height:40px;margin-bottom:7px}.view-battle .phase-heading h2{font-size:20px;margin:2px 0 0}.view-battle .clock{font-size:29px}.view-battle .stat b{font-size:22px}
 .view-battle .canvas-wrap{height:clamp(260px,calc(100dvh - 350px),760px)}
 .view-battle .unit-card{min-height:73px}.view-battle .unit-card .headshot{height:58px}.view-battle .field-legend{font-size:8px;padding:4px 10px}
 .view-battle .orders-panel{max-height:calc(100dvh - 119px)}
}
@media(min-width:1400px){.view-battle .canvas-wrap{height:clamp(350px,calc(100dvh - 355px),780px)}}

@media(min-width:761px){.view-battle .orders-panel .command-footer{position:sticky;bottom:-17px;z-index:3;margin-left:-17px;margin-right:-17px;padding:11px 17px;background:#e9e2cc;border-top:1px solid #b4a47d;box-shadow:0 -6px 14px #e9e2cccc}.view-battle .command-footer p{font-size:9px;line-height:1.6}}
/* Centered battlefield; orders appear only after choosing an army card. */
.view-battle .battle-layout{display:grid;grid-template-columns:minmax(0,1fr);max-width:1520px;margin-inline:auto;align-items:start}
.view-battle .battle-layout.orders-open{grid-template-columns:minmax(0,1fr) 310px}
.view-battle .orders-panel[hidden]{display:none!important}
.view-battle .orders-panel .panel-toggle{display:block;position:static;width:100%;margin:0 0 12px;min-height:36px;background:#294a3c;color:#efe7d6}
.view-battle .battle-command-dock{display:flex;justify-content:center;align-items:center;min-height:44px;margin:8px auto;color:#adbaab;font-size:11px}
.view-battle .battle-command-dock button{min-width:240px}
.view-battle .unit-cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.view-battle .unit-card{display:flex;align-items:center;text-align:left;gap:10px;height:auto;min-height:104px;padding:8px;overflow:hidden}
.view-battle .unit-card .headshot{display:block;float:none;width:62px;height:86px;flex:0 0 62px;margin:0}
.view-battle .unit-card .headshot img{position:static;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 25%;margin:0}
.view-battle .unit-copy{min-width:0;flex:1}.view-battle .unit-number{clear:none}.view-battle .unit-name{padding-top:0}.view-battle .unit-type,.view-battle .unit-status{overflow-wrap:anywhere}
@media(max-width:1100px){.view-battle .unit-cards{display:flex;overflow-x:auto;scroll-snap-type:x proximity}.view-battle .unit-card{flex:0 0 190px;scroll-snap-align:start}.view-battle .battle-layout.orders-open{grid-template-columns:minmax(0,1fr) 280px}}
@media(max-width:760px){
 .view-battle .battle-shell{padding-bottom:160px}
 .view-battle .battle-layout,.view-battle .battle-layout.orders-open{grid-template-columns:minmax(0,1fr)}
 .view-battle .unit-cards{bottom:8px;left:8px;right:8px;padding:5px;z-index:25}
 .view-battle .unit-card{height:110px;min-height:110px;flex-basis:190px}
 .view-battle .orders-panel.expanded{position:fixed;top:60px;bottom:140px;left:auto;right:8px;width:min(340px,calc(100vw - 24px));max-height:none;padding:15px;background:var(--paper);border:1px solid #b9a174;overflow:auto;z-index:24}
 .view-battle .orders-panel .command-footer{position:static;width:auto;margin:12px 0 0;padding:10px 0;background:transparent}
 .view-battle .battle-command-dock{position:fixed;bottom:131px;left:8px;right:8px;margin:0;z-index:22;background:#142d26;padding:4px;font-size:10px}
 .view-battle .battle-command-dock button{width:100%;min-width:0;min-height:36px;padding:7px}
}

/* Battle reference typography, 2026-10-15. */
:root{--font-body:"Times New Roman", "DFKai-SB", "BiauKai", "KaiTi", "STKaiti", serif;--font-calligraphy:"Times New Roman", "DFKai-SB", "BiauKai", "KaiTi", "STKaiti", serif;--font-numeric:"Times New Roman", "DFKai-SB", "BiauKai", "KaiTi", "STKaiti", serif;--font:var(--font-body);--serif:var(--font-body)}
h1,h2,h3,.brand .seal,.unit-name,.general-name,.primary{font-family:var(--font-calligraphy)}
input,select,textarea,button{font-family:inherit}
.primary,h1,h2,h3,.unit-name,.general-name{font-family:var(--font-calligraphy)}
.clock,.stat b,.unit-number,input[type=number]{font-family:var(--font-numeric);font-variant-numeric:tabular-nums}

/* Homepage: Han-era command tent, shared jade, bronze and paper materials. */
.view-home .masthead{background:#102824;border-bottom-color:#a88a5844}.view-home .brand h1{font-family:var(--font-calligraphy)}
.campaign-home{max-width:1440px;padding:26px 36px 30px}.campaign-hero{position:relative;isolation:isolate;min-height:540px;overflow:hidden;border:1px solid #a88a5870;background:#102824;box-shadow:0 20px 65px #0003}
.campaign-hero:after{content:'';position:absolute;inset:10px;border:1px solid #a88a5830;pointer-events:none;z-index:5}
.campaign-art{position:absolute;inset:0;background:#25372e url('assets/tong-pass-ma-chao-v1.webp') center 48%/cover no-repeat;filter:saturate(.82)}.campaign-art:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#102824 0%,#102824ec 20%,#102824b5 42%,#10282435 72%,#10282430 100%),linear-gradient(0deg,#102824d9 0%,transparent 28%);z-index:3}
.campaign-portrait{position:absolute;overflow:hidden;top:0;bottom:0}.campaign-portrait .standing{height:100%}.campaign-portrait .standing.scene-portrait img.portrait-face{object-fit:cover;object-position:center top;height:100%}.campaign-portrait.rear-left{left:0;width:49%;opacity:.6;filter:saturate(.65)}.campaign-portrait.rear-right{right:0;width:40%;opacity:.65;filter:saturate(.65)}.campaign-portrait.lead{left:25%;width:57%;z-index:2;mask-image:linear-gradient(90deg,transparent,#000 13%,#000 80%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 13%,#000 80%,transparent)}
.campaign-copy{position:relative;z-index:4;padding:58px 0 72px 50px;width:55%}.campaign-copy .eyebrow{font-size:11px;letter-spacing:.28em}.campaign-kicker{display:flex;gap:10px;align-items:center;margin:22px 0 12px;color:#c5c3a9;font-size:12px;letter-spacing:.16em}.campaign-kicker span{width:30px;height:1px;background:#a88a58}.campaign-copy h2{font-size:clamp(42px,4.5vw,66px);line-height:1.28;font-weight:500;letter-spacing:.1em;color:#f0dfba;text-shadow:0 4px 15px #071d1a}.campaign-copy h2 span{color:#c9a76c}.campaign-intro{margin:20px 0 26px;font-size:14px;line-height:1.9;color:#bdc8ba}.campaign-actions{display:flex;align-items:flex-start;flex-direction:column;gap:15px}.campaign-actions .primary{min-height:56px;min-width:280px;text-align:left;font-size:20px;padding:12px 22px;box-shadow:inset 0 0 0 3px #71392c66,0 7px 24px #0003}.campaign-actions .primary span{float:right;margin-left:22px}.campaign-actions a{font-size:13px;color:#b9cabc;text-decoration:none;min-height:32px;padding:5px 0;border-bottom:1px solid #a88a5866}.campaign-note{color:#95a99b;font-size:11px;margin-top:13px}.campaign-inscription{position:absolute;right:32px;top:45px;z-index:4;writing-mode:vertical-rl;display:flex;gap:10px;text-shadow:0 2px 5px #000}.campaign-inscription span{color:#e0c89c;font-size:14px;letter-spacing:.3em}.campaign-inscription b{color:#efdfc5;font:25px var(--font-calligraphy);letter-spacing:.2em}.campaign-bottom{position:absolute;bottom:0;left:0;right:0;z-index:4;display:flex;justify-content:space-between;padding:15px 30px;background:#0a211bd9;border-top:1px solid #a88a5844;color:#b1bda9;font-size:11px;letter-spacing:.14em}
.war-principles{display:grid;grid-template-columns:repeat(3,1fr);padding:23px 22px;border-bottom:1px solid #a88a5850;gap:22px}.war-principles>div{display:flex;align-items:center;gap:16px;justify-content:center}.war-principles>div+div{border-left:1px solid #a88a5844}.war-principles>div>span{font:30px var(--font-calligraphy);color:#a88a58}.war-principles b{font:21px var(--font-calligraphy);letter-spacing:.12em;color:#e9dbbe}.war-principles small{display:block;color:#a7b6a5;font-size:12px;margin-top:7px}
.campaign-section-head{display:flex;align-items:end;justify-content:space-between;padding:30px 0 19px;scroll-margin-top:16px}.campaign-section-head h3{font-size:29px;color:#e9dbbe}.campaign-section-head>span{color:#91a697;font-size:12px;letter-spacing:.12em}.campaign-modes{display:grid;grid-template-columns:1fr 1fr;gap:22px}.campaign-modes>section{position:relative;padding:27px 30px;border:1px solid #a88a5870}.campaign-solo{background:linear-gradient(125deg,#efe7d6,#dfd5bc);color:#202c29;box-shadow:inset 0 0 0 5px #a88a5814}.campaign-friends{background:linear-gradient(125deg,#203c32,#142d27)}.mode-heading{display:flex;gap:16px;align-items:center}.campaign-modes .mode-number{position:static;font:34px var(--font-calligraphy);color:#987b49;border:1px solid #a88a5870;width:52px;height:57px;text-align:center;line-height:55px}.campaign-modes h3{font-size:28px;letter-spacing:.12em}.campaign-modes .eyebrow{font-size:10px;margin-bottom:5px}.mode-description{line-height:1.9;font-size:13px;margin:16px 0 22px;color:#586354}.campaign-friends .mode-description{color:#bdc7b6}.solo-controls{display:grid;grid-template-columns:1fr auto;gap:9px 12px}.solo-controls label{grid-column:1/-1;font-size:11px;color:#626c61}.solo-controls button{min-width:150px;font-size:18px}.friend-controls>label{display:block;font-size:11px;color:#bac4b2;margin-bottom:9px}.friend-create{display:grid;grid-template-columns:1fr auto;gap:12px}.friend-create button,.campaign-friends .join-row button{background:#304d40;color:#eddfc3;border-color:#a88a5877}.campaign-friends input{background:#10271f;color:#efe7d6;border-color:#a88a5870}.campaign-friends input::placeholder{color:#92a293}.campaign-friends .join-row{display:flex;gap:10px;align-items:center;margin-top:12px}.campaign-friends .join-row input{flex:1;width:80px}.room-label{font-size:11px;color:#a9b6a4;white-space:nowrap}.offline-room-note{font-size:11px;color:#d8c096;margin-top:10px}.campaign-home .home-foot{padding:20px 0 8px;margin:0}.campaign-home #homeStatus{display:flex;gap:16px;flex-wrap:wrap;margin:8px 0}.campaign-home #homeStatus .hero-link{font-size:11px;color:#aabbab}
@media(min-width:1600px){.campaign-hero{min-height:590px}.campaign-copy{padding-top:72px}}
@media(max-width:1000px){.campaign-home{padding:20px}.campaign-copy{padding-left:30px;width:60%}.campaign-copy h2{font-size:48px}.campaign-modes>section{padding:23px}.solo-controls{grid-template-columns:1fr}.solo-controls button{width:100%}.war-principles{padding-inline:0;gap:10px}.war-principles>div{gap:10px}.war-principles small{font-size:10px}}
@media(max-width:640px){.view-home .masthead{padding-inline:16px}.campaign-home{padding:12px}.campaign-hero{min-height:660px}.campaign-art{inset:0 0 auto 0;height:400px;background-position:59% 30%}.campaign-art:after{background:linear-gradient(0deg,#102824 0%,#10282435 42%,transparent 76%),linear-gradient(90deg,#10282445,transparent 70%)}.campaign-portrait.lead{left:23%;width:60%}.campaign-portrait.rear-left{width:47%}.campaign-inscription{right:20px;top:24px}.campaign-inscription b{font-size:22px}.campaign-inscription span{font-size:11px}.campaign-copy{padding:252px 24px 66px;width:100%;background:linear-gradient(0deg,#102824 58%,transparent 86%)}.campaign-copy .eyebrow{font-size:9px}.campaign-kicker{margin:15px 0 10px;font-size:11px}.campaign-copy h2{font-size:42px;line-height:1.2;letter-spacing:.08em}.campaign-intro{font-size:12px;margin:15px 0 19px}.campaign-actions{gap:10px}.campaign-actions .primary{width:100%;min-width:0;font-size:18px}.campaign-actions a{font-size:12px}.campaign-note{font-size:10px}.campaign-bottom{padding:13px 20px;font-size:8px;letter-spacing:.04em}.war-principles{gap:0;padding:20px 0}.war-principles>div{display:block;text-align:center}.war-principles>div>span{font-size:23px;display:block;margin-bottom:6px}.war-principles b{font-size:17px;letter-spacing:0}.war-principles small{font-size:10px;line-height:1.7;margin:5px auto 0;max-width:90px}.campaign-section-head{padding-top:24px}.campaign-section-head h3{font-size:26px}.campaign-section-head>span{display:none}.campaign-modes{grid-template-columns:1fr;gap:15px}.campaign-modes>section{padding:24px}.solo-controls{grid-template-columns:1fr auto}.solo-controls button{min-width:114px}.friend-create{gap:8px}.friend-create button{padding-inline:10px}.campaign-home .home-foot{display:block;text-align:center;font-size:10px;line-height:1.8}.campaign-home .home-foot span{display:block;margin-top:6px}.campaign-home #homeStatus{justify-content:center}}
@media(prefers-reduced-motion:no-preference){.campaign-copy{animation:campaign-arrive .7s ease-out}.campaign-art{animation:campaign-arrive 1.1s ease-out}@keyframes campaign-arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}}
.campaign-friends .join-row button{flex:0 0 auto;width:auto;white-space:nowrap}.campaign-friends .join-row input{min-width:0}

/* Separate half-length selection art from complete head-and-collar portraits. */
.headshot.scene-portrait img.portrait-face,
.view-battle .unit-card .headshot.scene-portrait img.portrait-face{object-fit:contain;object-position:center center}
.view-setup .roster-person{gap:14px;min-width:0}
.view-setup .roster-person .headshot{width:82px;height:104px;flex:0 0 82px;margin:0;border:1px solid #a88a5899;background:radial-gradient(ellipse at 50% 35%,#3c5355,#142c2e)}
.view-setup .roster-person>div{min-width:0}
.view-setup .roster-person b{font-size:19px}
.view-setup .roster-person span:not(.headshot){font-size:12px;line-height:1.6}
@media(max-width:760px){.view-setup .roster-person .headshot{width:76px;height:96px;flex-basis:76px}.view-setup .roster-person b{font-size:18px}}
/* Larger head portraits with the troop controls beside each portrait. */
.view-setup .roster-row{display:grid;grid-template-columns:104px minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:14px;align-items:start;min-width:0;padding:12px 0}
.view-setup .roster-person{display:contents}
.view-setup .roster-person .headshot{grid-column:1;grid-row:1/3;width:104px;height:132px;min-width:0;margin:0}
.view-setup .roster-person>div{grid-column:2;grid-row:1;display:grid;gap:2px;min-width:0;margin-bottom:7px}
.view-setup .roster-person b{font-size:18px;line-height:1.25;white-space:nowrap}
.view-setup .roster-person span:not(.headshot){font-size:11px;line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.view-setup .roster-row .inputs{grid-column:2;grid-row:2;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px;align-items:center;min-width:0}
.view-setup .roster-row .inputs select{grid-column:1/-1;width:100%;min-width:0;min-height:36px;padding:5px 7px}
.view-setup .roster-row .inputs input{grid-column:1;width:100%;min-width:0;min-height:36px;padding:5px 7px}
.view-setup .roster-row .inputs>span{grid-column:2;white-space:nowrap}
@media(max-width:760px){.view-setup .roster-row{grid-template-columns:104px minmax(0,1fr)}.view-setup .roster-person .headshot{width:104px;height:132px;flex-basis:auto}}

/* Five collected-card magatama, shared by standing art and head portraits. */
.jade-row{display:flex;justify-content:center;align-items:center;gap:3px;min-width:0;min-height:20px;padding:3px 5px;background:linear-gradient(90deg,#112b28ed,#183a32f5,#112b28ed);border:1px solid #bc9a5d99;border-radius:30px;box-shadow:0 2px 8px #09151299;white-space:nowrap}
.jade{display:block;flex:none;width:17px;height:17px;filter:drop-shadow(0 1px 2px #000b)}
.jade.gold{color:#f4c95f}.jade.red{color:#da5147}
.general-art,.headshot,.portrait-stage,.commander-portrait,.collection-portrait{position:relative}
.general-art>.standing>.jade-row,.headshot>.jade-row,.portrait-stage>.standing>.jade-row,.commander-portrait>.jade-row,.collection-portrait>.standing>.jade-row,.campaign-portrait.lead>.standing>.jade-row{position:absolute;left:50%;bottom:7px;transform:translateX(-50%);z-index:2}
.general-art>.standing>.jade-row{bottom:6px}
.headshot>.jade-row{bottom:2px;gap:1px;padding:1px 2px;min-height:0}.headshot .jade{width:11px;height:11px}
.roster-person .headshot .jade{width:13px;height:13px}
.portrait-stage>.standing>.jade-row{bottom:14px;gap:7px;padding:7px 13px}.portrait-stage .jade{width:26px;height:26px}
.campaign-portrait.lead>.standing>.jade-row{bottom:30px}
.portrait-upgrade{display:grid;gap:10px;justify-items:start;margin:10px 0 18px;color:#504b3d;font-size:16px}.portrait-upgrade>.jade-row{position:static;transform:none}.portrait-upgrade button{min-height:48px;font-size:16px}
.collection-entry{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 28px;margin-top:22px;border:1px solid #a98c58;background:linear-gradient(100deg,#213e32,#142d2b);color:#eee0bd}.collection-entry h3{font:500 27px var(--font-calligraphy)}.collection-entry p:last-child{font-size:15px;margin-top:6px;color:#bcc9b5}.collection-entry button{min-height:48px;font-size:16px;white-space:nowrap}
.collection-shell{max-width:1320px}.collection-head{display:flex;gap:24px;align-items:start;margin:8px 0 28px}.collection-head>button{flex:none;background:#233d32;color:#eadbb7;min-height:48px}.collection-head h2{font:500 42px var(--font-calligraphy);color:#f2dfb4}.collection-head p:last-child{font-size:16px;line-height:1.7;margin-top:10px;color:#c0cbbd;max-width:750px}
.collection-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}.collection-card{min-width:0;background:#eee3cb;border:1px solid #b49b6e;color:#20332c;box-shadow:0 5px 18px #06151266}.collection-portrait{display:block;width:100%;height:245px;padding:0;border:0;overflow:hidden;background:radial-gradient(ellipse at 50% 45%,#d6d1bc,#9aa995)}.collection-portrait>.standing{height:100%}.collection-portrait .standing img{object-fit:cover;object-position:center top}.collection-card-copy{display:grid;gap:6px;padding:13px}.collection-card-copy h3{font:500 25px var(--font-calligraphy)}.collection-card-copy span{font-size:15px}.collection-card-copy button{font-size:15px;min-height:48px;background:#244c3d;color:#f3e6ca}.collection-card-copy button:disabled{background:#ddd1b9;color:#5c6156;opacity:1}
.card-reward{padding:18px;margin:18px 0;border:1px solid #b49b6e;background:#e9dec6;color:#28372e}.card-reward h3{font:500 25px var(--font-calligraphy)}.card-reward p{font-size:16px;line-height:1.6;margin:6px 0 12px}.reward-choices{display:flex;flex-wrap:wrap;gap:10px}.reward-choices>button[data-claim]{display:grid;gap:5px;justify-items:center;min-width:88px;padding:5px;background:#25463c;color:#f1e5cc}.reward-choices .headshot{width:70px;height:73px}.reward-choices .jade{width:8px;height:8px}.reward-choices>button>span:last-child{font:500 17px var(--font-calligraphy)}.reward-choices>#rewardCollection{min-height:48px;background:#25463c;color:#f1e5cc;font-size:16px}
@media(max-width:1100px){.collection-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){.collection-entry{align-items:stretch;flex-direction:column;padding:18px}.collection-entry button{width:100%}.collection-head{display:block}.collection-head>button{margin-bottom:18px}.collection-head h2{font-size:34px}.collection-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.collection-portrait{height:190px}.collection-card-copy{padding:10px}.collection-card-copy h3{font-size:21px}.collection-card-copy span{font-size:14px}.collection-card-copy button{font-size:14px}.portrait-stage>.standing>.jade-row{bottom:8px}.portrait-stage .jade{width:23px;height:23px}.reward-choices>button[data-claim]{min-width:calc(33.33% - 8px)}}
@media(max-width:359px){.collection-portrait{height:158px}.collection-portrait .jade{width:13px;height:13px}.collection-card-copy button{font-size:13px}.general-art .jade{width:12px;height:12px}}

.view-setup .roster-remove{padding:0;min-height:0;cursor:pointer;overflow:hidden;touch-action:manipulation}
.view-setup .roster-remove .roster-remove-mark{position:absolute;top:3px;right:3px;z-index:3;display:grid;place-items:center;width:22px;height:22px;border:1px solid #dfc995;background:#6e3228e8;color:#fff0d6;font:700 18px/1 Arial,sans-serif;pointer-events:none}
.view-setup .roster-remove:hover:not(:disabled),.view-setup .roster-remove:focus-visible{box-shadow:0 0 0 2px #a95746}

/* Show each general’s complete original scene in the personal page. */
#portraitDialog .portrait-stage{height:auto;min-height:0;max-height:none;aspect-ratio:auto;background:#142c28;overflow:hidden}
#portraitDialog .portrait-full-scene{display:block;width:100%;height:auto;object-fit:contain}

/* Six-axis character ratings in the general details panel. */
#portraitDialog .portrait-personality{margin:8px 0 12px}
#portraitDialog .portrait-ability{border-top:1px solid #baa98066;border-bottom:1px solid #baa98066;padding:6px 0 1px;margin:7px 0 12px}
#portraitDialog .ability-title{display:flex;justify-content:space-between;align-items:baseline;font:15px var(--serif);color:#514c3c}
#portraitDialog .ability-title small{font:10px var(--font);color:#8b866f;letter-spacing:.05em}
#portraitDialog .ability-chart{display:block;width:min(100%,300px);height:auto;margin:0 auto;overflow:visible}
#portraitDialog .ability-ring{fill:none;stroke:#c0b496;stroke-width:1}
#portraitDialog .ability-ring:last-of-type{stroke:#9f8c67;stroke-width:1.5}
#portraitDialog .ability-axis{stroke:#c1b596;stroke-width:1}
#portraitDialog .ability-area{fill:#a6534770;stroke:#8e4439;stroke-width:2;stroke-linejoin:round}
#portraitDialog .ability-node{fill:#873d33;stroke:#f3dfba;stroke-width:1}
#portraitDialog .ability-label{fill:#514937;font:12px var(--serif)}
#portraitDialog .ability-value{fill:#9a4b3c;font:700 12px var(--font)}
#portraitDialog .portrait-upgrade{gap:6px;margin:8px 0 12px}
#portraitDialog .portrait-trait{padding:10px 0}
#portraitDialog .portrait-navigation{margin-top:12px}

/* Place upgrade jades beneath the complete scene, outside the painting. */
#portraitDialog .portrait-stage{background:transparent}
#portraitDialog .portrait-jade{display:flex;justify-content:center;padding:10px 0 1px}
#portraitDialog .portrait-jade>.jade-row{position:static;transform:none;gap:5px;min-height:0;padding:4px 11px}
#portraitDialog .portrait-jade .jade{width:20px;height:20px}

/* The five jades sit inside the lower edge of the original artwork. */
#portraitDialog .portrait-stage{position:relative;isolation:isolate}
#portraitDialog .portrait-jade{position:absolute;inset:auto 0 14px;z-index:2;display:flex;justify-content:center;padding:0;pointer-events:none}
#portraitDialog .portrait-jade>.jade-row{gap:8px;min-height:0;padding:6px 14px;background:linear-gradient(110deg,#0d2926ed,#194238f2,#0d2926ed);border:1px solid #d0ad70c9;box-shadow:0 4px 16px #061b1bc9,inset 0 1px 0 #fff3}
#portraitDialog .portrait-jade .jade{width:27px;height:27px;filter:drop-shadow(0 1px 2px #000c)}
@media(max-width:640px){#portraitDialog .portrait-jade{bottom:11px}#portraitDialog .portrait-jade .jade{width:26px;height:26px}}

/* Roster troop slider: one stop per 100 soldiers. */
.view-setup .roster-row .inputs .troop-slider{grid-column:1/-1;display:grid;gap:2px;min-width:0;margin-top:2px}
.view-setup .roster-row .inputs .troop-slider input[type=range]{grid-column:1/-1;appearance:none;-webkit-appearance:none;display:block;width:100%;height:22px;min-height:22px;padding:0;margin:0;border:0;background:transparent;cursor:pointer;accent-color:#9b7845}
.view-setup .troop-slider input[type=range]::-webkit-slider-runnable-track{height:10px;border:1px solid #9f8e70;border-radius:2px;background:repeating-linear-gradient(to right,transparent 0 calc(var(--troop-tick,2%) - 1px),#fff9e4a8 calc(var(--troop-tick,2%) - 1px) var(--troop-tick,2%)),linear-gradient(to right,#997444 var(--troop-fill,0%),#d5c9b0 var(--troop-fill,0%))}
.view-setup .troop-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:20px;margin-top:-6px;border:2px solid #f7edd6;border-radius:3px;background:#2b675f;box-shadow:0 1px 4px #201e1a88}
.view-setup .troop-slider input[type=range]::-moz-range-track{height:10px;border:1px solid #9f8e70;border-radius:2px;background:#d5c9b0}
.view-setup .troop-slider input[type=range]::-moz-range-progress{height:10px;background:#997444}
.view-setup .troop-slider input[type=range]::-moz-range-thumb{width:14px;height:18px;border:2px solid #f7edd6;border-radius:3px;background:#2b675f;box-shadow:0 1px 4px #201e1a88}
.view-setup .troop-slider-scale{display:flex;justify-content:space-between;gap:2px;color:#756b55;font-size:9px;line-height:1.2;font-variant-numeric:tabular-nums;white-space:nowrap}

.orders-panel .policy-note{margin:8px 0 14px;padding:10px 11px;border-left:3px solid #9d8250;background:#e6dbc4a8;color:#4d584e;font-size:11px;line-height:1.7}

/* Four troop identities: cavalry / shield / spear / bow. */
.roster-type-note{display:block;grid-column:1/-1;font-size:14px;line-height:1.5;color:#536455;margin:2px 0 5px;white-space:normal}
.unit-type b svg,.troop-glyph svg{display:block;width:1em;height:1em;flex:none}
.troop-guide{border-top:1px solid #b69a6555;margin:20px 0;padding-top:8px}
.troop-guide h3{font-size:22px}.troop-guide #troopGuide{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.troop-guide-card{display:flex;gap:12px;align-items:flex-start;background:#d4c49e22;border:1px solid #b69a6555;padding:14px}
.troop-guide-card>b{display:grid;place-items:center;background:#183b36;color:#efca7c;width:40px;height:44px;flex:none;font-size:26px;border-radius:4px}
.troop-guide-card>b svg{width:28px;height:32px}.troop-guide-card strong{font-size:20px}.troop-guide-card p{margin:4px 0 0;line-height:1.6;font-size:16px}
.shield-guide-note{display:flex;align-items:center;gap:18px;margin:14px 0;background:#d1c29822;padding:10px 16px}
.shield-guide-note img{width:180px;height:auto;flex:none}.shield-guide-note p{font-size:16px;line-height:1.7;margin:0}.shield-guide-note b{font-size:22px}
@media(max-width:600px){.troop-guide #troopGuide{grid-template-columns:1fr}.shield-guide-note{flex-direction:column;gap:6px;text-align:center}.shield-guide-note img{width:210px}.roster-type-note{font-size:14px}}