/* 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}}