/* Barbarian Kings — an inked-vellum campaign-ledger theme */
:root{
  --ink:#1a1712; --ink2:#25201a; --board:#141019;
  --vellum:#e9ddc1; --vellum2:#d8c9a4; --vellum3:#c3b085;
  --line:#3a3025; --line2:#5a4a34;
  --ember:#b5533a; --ember-d:#8a3d2a;
  --gilt:#cba23f; --gilt-d:#9a781f;
  --sea:#2c4b5d; --sea2:#223b49;
  --good:#4f8f5a; --bad:#b5533a;
  --p0:#c94f4f; --p1:#3f7fc9; --p2:#4faa5a; --p3:#c9a03f; --p4:#9a5fc0;
  --shadow:0 2px 10px rgba(0,0,0,.5);
  --disp:"Iowan Old Style","Palatino Linotype","Palatino",Georgia,serif;
  --body:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --data:"DejaVu Sans Mono","SF Mono",ui-monospace,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:var(--body); color:var(--vellum); background:var(--board);
  background-image:
    radial-gradient(120% 80% at 50% -10%, #2a2233 0%, #141019 55%, #0d0a12 100%);
  overflow:hidden; -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--disp); font-weight:600; letter-spacing:.04em; margin:0}
.smallcaps{font-variant:small-caps; letter-spacing:.08em}

/* ---------- layout ---------- */
#app{display:grid; grid-template-columns:1fr 336px; grid-template-rows:52px 1fr; height:100%}
#topbar{grid-column:1/3; display:flex; align-items:center; gap:14px; padding:0 16px;
  background:linear-gradient(#241d15,#1a140d); border-bottom:2px solid var(--line2);
  box-shadow:0 2px 8px rgba(0,0,0,.5); z-index:20}
#brand{font-family:var(--disp); font-variant:small-caps; letter-spacing:.12em; font-size:20px;
  color:var(--vellum); text-shadow:0 1px 0 #000}
#brand b{color:var(--gilt)}
#turnbox{font-family:var(--data); font-size:12px; color:var(--vellum2);
  padding:3px 10px; border:1px solid var(--line2); border-radius:3px; background:rgba(0,0,0,.25)}
#kings{display:flex; gap:8px; margin-left:auto; align-items:center}
.king-chip{display:flex; align-items:center; gap:6px; padding:3px 9px; border-radius:3px;
  background:rgba(0,0,0,.28); border:1px solid var(--line2); font-size:12px; font-family:var(--data)}
.king-chip .swatch{width:11px; height:11px; border-radius:2px; border:1px solid rgba(0,0,0,.4)}
.king-chip.dead{opacity:.4; text-decoration:line-through}
.king-chip.me{outline:1px solid var(--gilt)}

/* ---------- map ---------- */
#mapwrap{position:relative; overflow:hidden; background:
  radial-gradient(140% 120% at 50% 40%, #221a12 0%, #17110b 70%, #0f0b07 100%)}
#map{width:100%; height:100%; display:block; cursor:grab; touch-action:none}
#map.grabbing{cursor:grabbing}
.hex{stroke:#0c0906; stroke-width:1.4; transition:filter .12s}
.hex.selectable{cursor:pointer}
.hex.moveTarget{stroke:var(--gilt); stroke-width:2.6}
.hex.selected{stroke:#fff; stroke-width:2.8; filter:drop-shadow(0 0 5px rgba(255,255,255,.6))}
.hex.attackTarget{stroke:var(--ember); stroke-width:2.6}
.rlabel{font-family:var(--data); font-size:7.5px; fill:#efe6cf; opacity:.72;
  paint-order:stroke; stroke:#000; stroke-width:2px; text-anchor:middle; pointer-events:none}
.capstar{fill:var(--gilt); stroke:#000; stroke-width:.6; pointer-events:none}
.counter{pointer-events:none}
.counter rect{stroke:#000; stroke-width:1.2; rx:2}
.counter .cstr{font-family:var(--data); font-weight:700; font-size:11px; fill:#111; text-anchor:middle}
.counter .cglyph{font-size:12px; text-anchor:middle}
.orderArrow{stroke:var(--gilt); stroke-width:3; fill:none; marker-end:url(#arrowhead);
  opacity:.9; filter:drop-shadow(0 1px 2px #000)}
.orderArrow.attack{stroke:var(--ember)}

#mapctl{position:absolute; left:12px; bottom:12px; display:flex; gap:6px}
#mapctl button{width:32px; height:32px; font-size:16px}
#legend{position:absolute; right:12px; bottom:12px; background:rgba(15,11,7,.82);
  border:1px solid var(--line2); border-radius:4px; padding:7px 9px; font-size:10px;
  font-family:var(--data); color:var(--vellum2); display:grid; grid-template-columns:auto auto;
  gap:2px 10px}
#legend i{display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:5px; vertical-align:-1px}

/* ---------- side ledger ---------- */
#ledger{background:linear-gradient(#e9ddc1,#ddceac); color:#2a2015;
  border-left:3px solid var(--line2); display:flex; flex-direction:column; overflow:hidden;
  box-shadow:inset 3px 0 12px rgba(0,0,0,.25)}
#ledger .phase{padding:10px 14px; border-bottom:1px solid #b7a680;
  background:linear-gradient(#2a2015,#1c150d); color:var(--vellum)}
#ledger .phase h2{font-size:16px; color:var(--gilt); font-variant:small-caps; letter-spacing:.1em}
#ledger .phase p{margin:3px 0 0; font-size:11.5px; color:var(--vellum2); line-height:1.4}
#ledgerbody{flex:1; overflow-y:auto; padding:12px 14px}
.sec{margin-bottom:14px}
.sec h3{font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:#6b5535;
  border-bottom:1px solid #bfae86; padding-bottom:3px; margin-bottom:7px}
.kv{display:flex; justify-content:space-between; font-family:var(--data); font-size:12px; padding:2px 0}
.kv b{color:#3a2c18}
.coin{color:var(--gilt-d); font-weight:700}

.btn{font-family:var(--body); font-size:13px; border:1px solid #4a3a22; border-radius:4px;
  padding:7px 12px; background:linear-gradient(#f2e8cd,#dcc9a2); color:#2a2015; cursor:pointer;
  box-shadow:0 1px 0 #fff inset, 0 1px 3px rgba(0,0,0,.25); font-weight:600}
.btn:hover{background:linear-gradient(#f8f0da,#e5d4ae)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn.primary{background:linear-gradient(var(--ember),var(--ember-d)); color:#fff; border-color:#5c2718}
.btn.primary:hover{filter:brightness(1.08)}
.btn.gilt{background:linear-gradient(var(--gilt),var(--gilt-d)); color:#231a09; border-color:#6a520f}
.btn.wide{width:100%; margin-top:6px}
.btnrow{display:flex; gap:6px; flex-wrap:wrap}

.recruit-row,.spell-row{display:flex; align-items:center; gap:8px; padding:6px 7px; margin-bottom:5px;
  background:rgba(255,255,255,.4); border:1px solid #c2b088; border-radius:4px}
.recruit-row .glyph{font-size:18px; width:22px; text-align:center}
.recruit-row .rn{flex:1}
.recruit-row .rn b{font-size:12.5px} .recruit-row .rn small{display:block; color:#6b5535; font-size:10px; line-height:1.25}
.recruit-row .cost{font-family:var(--data); font-size:11px; color:var(--gilt-d); font-weight:700}
.pts{display:flex; align-items:center; gap:3px}
.pts button{width:22px; height:22px; padding:0; font-size:14px; line-height:1}
.pts span{font-family:var(--data); width:20px; text-align:center; font-weight:700}

.mono{font-family:var(--data)}
.hint{font-size:11px; color:#6b5535; line-height:1.45}
.sel-army{background:rgba(42,32,21,.9); color:var(--vellum); border-radius:5px; padding:10px 12px; margin-bottom:12px}
.sel-army h3{color:var(--gilt); border:0; margin-bottom:6px}
.stack-line{display:flex; justify-content:space-between; font-family:var(--data); font-size:12px}
.slider{width:100%}

/* ---------- log ---------- */
#logwrap{border-top:1px solid #b7a680; background:#f2e9d3; max-height:34%; overflow-y:auto; padding:8px 12px}
#logwrap h3{position:sticky; top:0; background:#f2e9d3}
.logline{font-family:var(--data); font-size:11px; color:#40311c; padding:2px 0; border-bottom:1px dotted #cbb98f; line-height:1.35}
.logline.battle{color:#7a2f1c}
.logline.turnhead{color:#2a2015; font-weight:700; margin-top:4px}

/* ---------- overlays ---------- */
.overlay{position:fixed; inset:0; background:rgba(8,6,4,.78); display:flex; align-items:center;
  justify-content:center; z-index:60; backdrop-filter:blur(2px)}
.panel{background:linear-gradient(#efe4c8,#e0d0ac); color:#2a2015; width:min(560px,92vw);
  border:2px solid #4a3a22; border-radius:8px; box-shadow:var(--shadow); padding:0; overflow:hidden}
.panel .head{background:linear-gradient(#2a2015,#1a140d); color:var(--vellum); padding:16px 20px}
.panel .head h1{font-size:26px; color:var(--gilt); font-variant:small-caps; letter-spacing:.08em}
.panel .head p{margin:4px 0 0; color:var(--vellum2); font-size:13px}
.panel .body{padding:18px 20px}
.field{margin-bottom:14px}
.field label{display:block; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:#6b5535; margin-bottom:5px}
.seg{display:flex; gap:6px; flex-wrap:wrap}
.seg button{flex:1; min-width:56px}
.seg button.on{background:linear-gradient(var(--ember),var(--ember-d)); color:#fff; border-color:#5c2718}
.result-scroll{max-height:52vh; overflow-y:auto; font-family:var(--data); font-size:12px; line-height:1.5}

/* toast */
#toast{position:fixed; left:50%; top:64px; transform:translateX(-50%); z-index:50;
  background:rgba(20,15,9,.94); color:var(--vellum); border:1px solid var(--gilt-d);
  border-radius:5px; padding:9px 16px; font-size:13px; box-shadow:var(--shadow);
  opacity:0; transition:opacity .25s, transform .25s; pointer-events:none; max-width:80vw; text-align:center}
#toast.show{opacity:1; transform:translateX(-50%) translateY(0)}

/* responsive */
@media (max-width:820px){
  #app{grid-template-columns:1fr; grid-template-rows:48px 46vh 1fr}
  #ledger{border-left:0; border-top:3px solid var(--line2)}
  #kings .king-chip small{display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* v1.2 command-interface enhancements */
.counter.currentArmy rect{stroke:#fff;stroke-width:3;filter:drop-shadow(0 0 5px rgba(255,255,255,.9))}
.counter.orderedArmy rect{stroke:var(--gilt);stroke-width:2.5;stroke-dasharray:3 2}
.army-status{font-family:var(--data);font-size:10px;font-weight:700;letter-spacing:.06em;padding:4px 6px;margin:0 0 7px;border-radius:3px}
.army-status.waiting{background:rgba(181,83,58,.22);color:#f1b09f;border:1px solid var(--ember)}
.army-status.done{background:rgba(203,162,63,.18);color:#f0d27c;border:1px solid var(--gilt)}
.order-progress .btnrow .btn{flex:1;min-width:88px;padding:6px 5px;font-size:11px}

/* v1.3 battle & intelligence interface */
.province-intel{margin-top:14px}
.province-card{background:rgba(255,255,255,.46);border:1px solid #b9a57a;border-radius:5px;padding:9px 10px;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.province-title{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:15px;margin-bottom:6px;color:#342716}
.terrain-pill{font-family:var(--data);font-size:9px;text-transform:uppercase;letter-spacing:.08em;background:#d7c49b;border:1px solid #ae9665;border-radius:999px;padding:2px 7px;color:#594426}
.province-army{margin-top:7px;padding-top:6px;border-top:1px dotted #b9a57a}
.province-empty,.province-warning{margin-top:7px;padding-top:6px;border-top:1px dotted #c6b58f}
.province-warning{color:#7a2f1c}
.battle-card{margin:8px 0 12px;border:1px solid #8d6d3c;border-radius:6px;overflow:hidden;background:#f4ead2;box-shadow:0 2px 6px rgba(0,0,0,.12)}
.battle-place{padding:7px 10px;background:linear-gradient(#3a2c1c,#24190f);color:var(--gilt);font-family:var(--data);font-weight:700;letter-spacing:.04em}
.battle-sides{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;padding:10px;text-align:center}
.battle-sides span{min-width:0}.battle-sides b{display:block;color:#3b2b18}.battle-sides small{display:block;margin-top:2px;color:#765b35;font-size:10px}
.battle-vs{font-family:var(--data);font-size:10px;color:#8b3e2b!important;font-weight:700}
.battle-math{display:flex;justify-content:space-around;gap:8px;padding:6px 8px;border-top:1px solid #cfbc91;border-bottom:1px solid #cfbc91;background:#eadcbd;font-family:var(--data);font-size:10px}
.battle-outcome{text-align:center;padding:8px 10px;font-weight:700;color:#7a2f1c;text-transform:uppercase;letter-spacing:.06em;font-size:11px}


/* v1.4 campaign command center */
.logfilters{display:flex;gap:4px;flex-wrap:wrap;margin:3px 0 7px;position:sticky;top:18px;background:#f2e9d3;padding:3px 0;z-index:2}
.logfilter{border:1px solid #b7a680;background:#e8dcc0;color:#594426;border-radius:999px;padding:3px 7px;font:700 9px var(--data);cursor:pointer}
.logfilter.on{background:#3a2c1c;color:var(--gilt);border-color:#6d5736}
.logline.magic{color:#5f3d78}.logline.movement{color:#315a47}.logline.realm{color:#40311c}

/* v1.5 strategic war room */
.war-room{background:rgba(74,58,34,.06);border:1px solid #c5b286;border-radius:5px;padding:9px 10px}
.objective-line,.threat-row{display:flex;justify-content:space-between;align-items:center;gap:8px;font:11px var(--data)}
.objective-line b{color:#654a20}.objective-bar{height:8px;background:#d5c39d;border:1px solid #a99364;border-radius:999px;overflow:hidden;margin:6px 0}
.objective-bar i{display:block;height:100%;background:linear-gradient(90deg,#7a5422,#c7a13b)}
.war-sub{margin-top:9px;padding-top:7px;border-top:1px dotted #b9a57a;text-transform:uppercase;letter-spacing:.07em;font:700 10px var(--data);color:#6b5535}
.war-sub small{float:right}.threat-row{padding:4px 0;border-bottom:1px dotted #d0c19e}.threat-swatch{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;border:1px solid rgba(0,0,0,.3)}
.frontier-list{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:6px}.frontier-jump{cursor:pointer;text-align:left;background:#e9ddc1;border:1px solid #b8a274;border-radius:4px;padding:5px 6px;color:#3c2d19}.frontier-jump:hover{background:#f4ead2;border-color:#7e6336}.frontier-jump span,.frontier-jump small{display:block}.frontier-jump span{font-weight:700}.frontier-jump small{font:9px var(--data);color:#715938;margin-top:2px}

/* v1.6 battlefield intelligence */
.threat-list{grid-template-columns:1fr}.frontier-jump em{float:right;font:700 8px var(--data);font-style:normal;letter-spacing:.05em;border-radius:999px;padding:2px 5px;background:#d8c7a4;color:#594426}.frontier-jump.threat-critical{border-left:4px solid #8b2e22}.frontier-jump.threat-high{border-left:4px solid #b05a2b}.frontier-jump.threat-guarded{border-left:4px solid #9b7a2e}.frontier-jump.threat-favorable{border-left:4px solid #4d704b}.frontier-jump.threat-critical em{background:#8b2e22;color:#fff}.frontier-jump.threat-high em{background:#b05a2b;color:#fff}.frontier-jump.threat-guarded em{background:#d6bd69;color:#3a2c1c}.frontier-jump.threat-favorable em{background:#6f8a62;color:#fff}.threat-advice{font-weight:700!important;color:#4b3921!important}.threat-summary{margin-top:7px;padding:6px 7px;border-radius:4px;background:#dfd2b5;font:10px var(--data);color:#594426}.threat-summary.alert{background:#ead1c7;color:#762f23;border:1px solid #c6907e}

/* v1.7 war-plan review */
.order-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin:5px 0 7px}.order-summary span{text-align:center;background:#dfd2b5;border:1px solid #c0ad82;border-radius:4px;padding:4px 2px;font:700 9px var(--data);color:#594426}.order-alert{margin:6px 0;padding:6px 7px;border:1px solid #c6907e;border-radius:4px;background:#ead1c7;color:#762f23;font:10px var(--data)}.order-card{margin:5px 0;border:1px solid #b9a57a;border-left-width:4px;border-radius:4px;background:#eee2c8;padding:6px 7px}.order-route{display:flex;justify-content:space-between;gap:8px;font:700 10px var(--data);color:#3d2d19}.order-route em{font-style:normal;font-size:8px;letter-spacing:.05em;border-radius:999px;padding:2px 5px;background:#d8c7a4}.order-detail{display:grid;grid-template-columns:auto 1fr auto;gap:7px;align-items:center;margin-top:3px;font:9px var(--data);color:#6a5130}.order-detail small{font-size:9px}.order-detail a{color:var(--bad);text-decoration:none;font-size:12px}.rating-risky{border-left-color:#8b2e22}.rating-contested{border-left-color:#b05a2b}.rating-favorable{border-left-color:#7c7a35}.rating-strong{border-left-color:#4d704b}.rating-open,.rating-claim{border-left-color:#527b73}.rating-transfer{border-left-color:#7b6b52}.rating-risky .order-route em{background:#8b2e22;color:#fff}.rating-contested .order-route em{background:#b05a2b;color:#fff}.rating-strong .order-route em{background:#4d704b;color:#fff}

/* v1.8 order control + map forecasts */
.order-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:7px}.forecastBadge{pointer-events:none}.forecastBadge rect{fill:#efe2c4;stroke:#6f5935;stroke-width:1.2;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}.forecastBadge text{font:700 8px var(--data);fill:#342514;letter-spacing:.04em}.forecastBadge.rating-risky rect{fill:#8b2e22;stroke:#4d1711}.forecastBadge.rating-risky text,.forecastBadge.rating-contested text,.forecastBadge.rating-strong text{fill:#fff}.forecastBadge.rating-contested rect{fill:#b05a2b;stroke:#6d3217}.forecastBadge.rating-strong rect{fill:#4d704b;stroke:#294329}.forecastBadge.rating-favorable rect{fill:#d8d29b}.forecastBadge.rating-open rect,.forecastBadge.rating-claim rect{fill:#b8d5cf}


/* v1.9 war council debrief */
.debrief-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
.debrief-stat{position:relative;background:#eadcbd;border:1px solid #bda775;border-radius:6px;padding:9px 8px;text-align:center}
.debrief-stat small{display:block;text-transform:uppercase;letter-spacing:.07em;color:#715938;font:8px var(--data)}
.debrief-stat b{display:block;margin:3px 0 1px;font:700 19px var(--data);color:#342716}
.debrief-stat em{font:700 9px var(--data);font-style:normal;color:#705b3e}
.debrief-stat em.up{color:#35643a}.debrief-stat em.down{color:#8b2e22}.debrief-stat em.flat{color:#705b3e}
.debrief-territory{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:8px 0 10px}
.debrief-territory>div{background:#f0e5cc;border:1px solid #c9b68b;border-radius:5px;padding:7px}
.debrief-territory strong{display:block;margin-bottom:4px;font:700 9px var(--data);text-transform:uppercase;letter-spacing:.06em;color:#655033}
.debrief-territory span{display:block;font:10px var(--data);padding:2px 0}.debrief-territory .gain{color:#35643a}.debrief-territory .loss{color:#8b2e22}
.debrief-quiet{margin:8px 0 10px;padding:7px;border:1px solid #cab991;border-radius:5px;background:#eee2c8;color:#665438;font:10px var(--data);text-align:center}
.debrief-events h3{margin:8px 0 5px;color:#5a4528;font-size:12px;text-transform:uppercase;letter-spacing:.06em}
@media(max-width:520px){.debrief-grid{grid-template-columns:1fr}.debrief-territory{grid-template-columns:1fr}}


/* v2.0 royal advisor */
.advisor-list{display:grid;gap:6px}.advisor-card{border:1px solid #bba77d;border-left:4px solid #7b6b52;border-radius:5px;background:#eee2c8;padding:7px 8px}.advisor-card strong{display:block;font:700 10px var(--data);color:#3e2e19;margin-bottom:2px}.advisor-card span{display:block;font:9px/1.35 var(--data);color:#685334}.advisor-card.danger{border-left-color:#8b2e22;background:#ead4c9}.advisor-card.danger strong{color:#76291f}.advisor-card.opportunity{border-left-color:#4d704b;background:#dfe4c9}.advisor-card.opportunity strong{color:#365237}.royal-advisor h3:after{content:"  ·  A focuses the frontier";font:8px var(--data);font-weight:400;color:#816b48;text-transform:none;letter-spacing:0}

/* claimed territory visibility */
.owner-tag{font:700 7px var(--data);paint-order:stroke;stroke:#15100a;stroke-width:2.2px;stroke-linejoin:round;letter-spacing:.02em;pointer-events:none}
.claimed .wash{mix-blend-mode:normal}
.legend-divider{font-weight:700;margin-left:8px;padding-left:8px;border-left:1px solid rgba(255,255,255,.25)}
#legend .dead{opacity:.45;text-decoration:line-through}