:root{color-scheme:dark;--bg:#101915;--panel:#1a2520;--line:#35473b;--ink:#eee9d9;--muted:#a5b4a7;--gold:#e0b966;--blue:#7bc4e7}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 system-ui,sans-serif}header{padding:24px 32px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.eyebrow{font-size:10px;letter-spacing:2px;color:var(--gold)}h1{font-size:28px;margin:4px 0 0}h1 span{font-size:12px;font-weight:400;color:var(--muted)}h2{font-size:20px;margin:3px 0}h3{font-size:14px;margin:0 0 12px}p{margin:8px 0}main{max-width:1600px;margin:auto;padding:24px 32px;display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px}.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.actions,.save-actions{display:flex;gap:8px;flex-wrap:wrap}button,select{font:inherit;color:var(--ink);background:#24352b;border:1px solid #4d6251;border-radius:5px;padding:8px 12px;cursor:pointer}button:hover{background:#354d3e}button:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:3px}button:disabled{opacity:.4;cursor:default}button.primary{background:var(--gold);color:#19231b;border-color:var(--gold);font-weight:700}button.quiet{background:transparent;color:var(--muted);font-size:12px}.battle-summary{display:flex;justify-content:space-between;padding:12px 16px;background:#22362e;border:1px solid var(--line);font-size:12px;letter-spacing:1px}#blue-status{color:#9bd8f0}#red-status{color:#ffaea2}canvas{width:100%;height:auto;display:block;background:#344c36;cursor:crosshair;border:1px solid var(--line);touch-action:none}.field-caption{display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:12px;padding:12px 0}.below{display:grid;grid-template-columns:1.3fr 1fr;gap:28px;margin-top:18px}.below section{border-top:1px solid var(--line);padding-top:16px}.muted{font-size:12px;color:var(--muted)}label{display:block;margin:8px 0;color:var(--muted);font-size:12px}select{display:block;width:100%;margin-top:5px}.legend{display:flex;gap:16px;margin-top:14px;font-size:11px;color:var(--blue)}.panel{background:var(--panel);border:1px solid var(--line);padding:16px;margin-bottom:16px;border-radius:8px}.panel-heading{display:flex;justify-content:space-between;align-items:center}#funds{color:var(--gold);font-size:12px}#budget{color:var(--muted);font-size:11px;margin:4px 0 14px}.roster{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.roster button{padding:7px 2px;font-size:12px;position:relative}.roster button small{display:block;font-size:9px;color:var(--muted)}.roster button.selected{border-color:var(--gold);background:#495238}.roster button.player:after{content:'★';position:absolute;right:2px;top:-4px;color:var(--gold);font-size:10px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:12px 0}.stats div{padding:6px;background:#111d17;border-radius:4px}.stats small{display:block;color:var(--muted);font-size:10px}.tactic-help{min-height:52px;font-size:12px;color:var(--muted)}#result{background:#263a2b;border:1px solid var(--gold);padding:20px;margin-top:12px;border-radius:8px}#result h2{color:var(--gold)}.candidates{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.candidates button{text-align:left;font-size:12px}.candidates button.selected{border-color:var(--gold)}.save-actions button{font-size:12px}footer{padding:20px 32px;border-top:1px solid var(--line);color:var(--muted);font-size:11px}a{color:var(--gold)}#save-status{font-size:12px;color:var(--muted)}@media(max-width:1050px){main{grid-template-columns:minmax(0,1fr) 290px;padding:20px;gap:16px}.toolbar{align-items:flex-start;flex-direction:column}}@media(max-width:760px){main{grid-template-columns:1fr;padding:12px}header{padding:16px;gap:20px}.below{grid-template-columns:1fr}.roster{grid-template-columns:repeat(10,1fr)}aside{display:grid;grid-template-columns:1fr}.field-caption{flex-direction:column}}

/* Phase 5: readable unit loadouts and field states. */
.soldier-heading{display:flex;align-items:center;gap:12px}.soldier-heading h2{font-size:18px}.soldier-heading p{margin:2px 0}.portrait{width:72px;height:72px;flex-shrink:0;border-radius:5px;border:1px solid #746443;background:radial-gradient(circle,#596047,#273b2b);image-rendering:pixelated}.live-soldier{padding:7px 10px;margin-top:12px;background:#111d17;border-left:2px solid var(--gold);font-size:12px;color:#e8ddb9}.ability-picker{margin:14px 0 8px;padding:10px;border:1px solid var(--line);border-radius:5px}.ability-picker legend{color:var(--muted);font-size:12px;padding:0 5px}.ability-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.ability-grid label{display:flex;align-items:center;gap:4px;margin:0;padding:5px 2px;background:#202f25;color:var(--ink);font-size:11px;cursor:pointer}.ability-grid input{accent-color:var(--gold);margin:0}.ability-grid label:has(input:disabled){opacity:.5}.ability-grid label:has(input:checked){background:#4a4d30}.status-legend{display:flex;flex-wrap:wrap;gap:5px;margin:12px 0}.status-legend span{font-size:10px;padding:3px 6px;border:1px solid var(--line);border-radius:3px;color:#d7dbbb}#field{image-rendering:pixelated}#field:focus-visible{outline:2px solid var(--gold);outline-offset:2px}.tactic-help{min-height:0}.workspace{min-width:0}.battle-summary{gap:10px;align-items:center}.battle-summary span{font-size:11px;letter-spacing:.3px}.battle-summary strong{font-size:17px;white-space:nowrap}

.ability-notes{font-size:11px;color:var(--muted)}.ability-notes p{margin:5px 0}

.art-note{font-size:10px;color:#b6b391;line-height:1.35}

.skill-icon{display:block;max-width:160px;height:26px;object-fit:contain;image-rendering:pixelated;margin:5px 0 8px}

/* Original-game visual reference: bronze controls, dark framed panels, ivory type. */
:root{--bg:#17140e;--panel:#242018;--line:#786747;--ink:#fff5d4;--muted:#c5b996;--gold:#dac17b;--blue:#a3dce9}
body{background:radial-gradient(ellipse at top,#50432b 0,#252015 45%,#100f0b 100%);font-family:Georgia,"Yu Mincho","MS PMincho",serif}
header{background:linear-gradient(110deg,#161510,#59401e 48%,#20190e);border-bottom:3px double #b59b56;box-shadow:0 3px 12px #0009}
h1{color:#f1d995;text-shadow:2px 2px 2px #000;font-weight:normal;letter-spacing:2px}
.eyebrow{color:#d6bd7b}.panel,#result{border:3px double #867651;border-radius:2px;background:linear-gradient(135deg,#373126dd,#141510f5);box-shadow:inset 0 0 12px #000,0 2px 5px #0009}
button,select{border:3px double #95876b;border-radius:2px;background:linear-gradient(#90602e 0%,#5f3716 45%,#3b260e 51%,#68441a 100%);color:#fff4ce;text-shadow:1px 1px 2px #000;box-shadow:inset 0 0 4px #e2c27c66,0 1px 3px #000a;font-family:inherit}
button:hover:not(:disabled){filter:brightness(1.2);background:linear-gradient(#aa743c,#6a421a 50%,#805627)}
button:active:not(:disabled){box-shadow:inset 0 2px 7px #000;transform:translateY(1px)}
button.primary{background:linear-gradient(#b37b39,#794417 48%,#502b0c 51%,#8c541e);color:#fff3ca;border-color:#c4ab72;font-weight:normal}
button.quiet,.save-actions button{background:linear-gradient(#285752,#123c38 50%,#092825);color:#f2e6be}
select option{background:#292318;color:#fff2cc;text-shadow:none}
.roster button{background:linear-gradient(#3d3829,#171a13);border-color:#7b7152}
.roster button.selected{background:linear-gradient(#8b7139,#3f381c);border-color:#f0d99c}
.battle-summary{background:linear-gradient(#804b25,#3a1e0e 50%,#633419);border:3px double #a58c50;color:#fff5da;box-shadow:inset 0 0 6px #000}
#blue-status{color:#d3f3ff;background:#244c62;padding:3px 7px;border:1px solid #86968b}
#red-status{color:#ffe7d7;background:#741e22;padding:3px 7px;border:1px solid #a47b60}
#timer{padding:2px 8px;border:1px solid #ac956a;background:#2b1b10}
#field{border:3px double #98844d;background:#afc66a}
.stats div,.live-soldier{background:#15170f;border-radius:0}.stats small{color:#dfcfa5}
.portrait{border-radius:0;border:3px double #a8986f;background:#24261b}
.ability-picker{border-radius:0;border-color:#766b4b}.ability-grid label{background:#2b2c1d}.ability-grid label:has(input:checked){background:#6c5c2e}
.status-legend span{border-radius:0;background:#2d281b;color:#e9d7aa}
.below section,footer{border-color:#695b3d}.skill-icon{height:29px}
@media(max-width:760px){h1{font-size:23px}.battle-summary{padding:6px;gap:4px}.battle-summary span{font-size:10px;padding:3px!important}}

/* Eight readable class silhouettes, rendered locally from code. */
.class-key{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:3px;padding:8px;border:1px solid #6c603e;background:#24271a;margin:2px 0 14px}.class-key>div{text-align:center;min-width:0}.class-key canvas{width:56px;height:56px;max-width:100%;margin:auto;border:0;background:transparent;cursor:default;image-rendering:pixelated}.class-key span{font-size:11px;color:#e7dbb6;display:block}.class-key-note{grid-column:1/-1;display:block;font-size:10px;color:#c0b791;text-align:center;padding-top:7px}@media(max-width:600px){.class-key{grid-template-columns:repeat(4,minmax(0,1fr));}.class-key canvas{width:50px;height:50px}}

.formation-tools{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:9px 12px;background:linear-gradient(#342d1e,#222217);border:1px solid #847147;border-bottom:0}.formation-tools label{display:flex;align-items:center;gap:8px;font-size:11px;margin:0;color:#d9cda6}.formation-tools select{width:150px;max-width:100%;margin:0;padding:5px 8px;font-size:12px}.formation-tools button{padding:6px 10px;font-size:12px}.formation-tools #formation-help{flex-basis:100%;font-size:10px;line-height:1.45;color:#c9bf9b}.formation-tools:has(button:disabled) #formation-help{opacity:.8}@media(max-width:600px){.formation-tools{padding:8px;gap:6px}.formation-tools label{width:100%}.formation-tools select{flex:1}.formation-tools button{flex:1}}

.quick-armies{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:14px 0;border-bottom:1px solid #675a35;margin-bottom:12px}.quick-armies h3{flex-basis:100%;margin:0}.quick-armies label{display:flex;align-items:center;gap:8px;margin:0}.quick-armies select{width:auto;min-width:80px}.quick-armies p{flex-basis:100%;margin:0;font-size:12px}.quick-armies input[type=checkbox]{width:auto}