.lead{padding:34px 0 26px;}

.lead h1{
  font-family:var(--display);font-weight:800;
  font-size:clamp(32px,6vw,54px);line-height:.96;
  letter-spacing:-.03em;margin:0 0 10px;
}

.lead p{margin:0;color:var(--bone-dim);font-size:14.5px;}

.warn{
  margin:0 0 18px;padding:12px 16px;
  background:rgba(229,132,102,.12);
  border-left:2px solid var(--rust);
  font-size:13.5px;color:var(--bone-dim);
}

.warn[hidden]{display:none;}

/* ---- round bar: the shared, non-partisan state ---- */

.roundbar{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:18px;align-items:center;
  background:var(--ground-2);
  border:1px solid var(--line);
  padding:14px 16px;
}

.rlabel{
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--bone-dim);
}

.pips{display:flex;gap:6px;justify-content:center;}

.pip{
  width:38px;height:38px;border:1px solid var(--line);
  background:transparent;color:var(--bone-dim);
  font-family:var(--mono);font-size:14px;cursor:pointer;
  transition:all .15s ease;
}

.pip[aria-pressed="true"]{
  background:var(--accent-solid);border-color:var(--accent-solid);
  color:var(--ink-on-accent);font-weight:600;
}

/* ---- army panels ---- */

.armies{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:2px;margin-top:2px;
}

.army{
  background:var(--ground-2);
  border:1px solid var(--line);
  padding:18px 16px 20px;
}

.army.turn{border-color:var(--accent);}

.army-head{
  display:flex;align-items:center;gap:10px;
  padding-bottom:14px;border-bottom:1px solid var(--line);
}

.army-head input{
  flex:1;min-width:0;background:transparent;border:0;
  color:var(--bone);font-family:var(--display);font-weight:700;
  font-size:20px;letter-spacing:-.015em;padding:2px 0;
}

.army-head input:focus{outline:none;border-bottom:1px solid var(--accent);}

.turnflag{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:34px;
  font-family:var(--mono);font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);
  border:1px solid var(--accent);padding:3px 7px;
  background:transparent;cursor:pointer;white-space:nowrap;
}

.army.turn .turnflag{background:var(--accent-solid);color:var(--ink-on-accent);}

/* counters */

.counters{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2px;margin:14px 0 4px;}

.counter{background:var(--ground-3);padding:12px 10px;text-align:center;}

.counter .cname{
  font-family:var(--mono);font-size:9px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--bone-dim);margin-bottom:6px;
}

.counter .row{display:flex;align-items:center;justify-content:center;gap:6px;}

.counter output{
  font-family:var(--mono);font-weight:600;font-size:30px;
  font-variant-numeric:tabular-nums;
  color:var(--accent);min-width:2.4ch;line-height:1;
}

.step{
  width:38px;height:38px;flex:0 0 auto;
  background:transparent;border:1px solid var(--line);
  color:var(--bone);font-size:19px;line-height:1;cursor:pointer;
  transition:background .14s ease,border-color .14s ease;
}

.step:hover{background:var(--ground-2);border-color:var(--accent);}
.step:active{background:var(--accent-solid);color:var(--ink-on-accent);}

/* footer actions */

.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px;}

.btn{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;background:transparent;
  border:1px solid var(--line);color:var(--bone-dim);
  padding:11px 16px;cursor:pointer;
}

.btn:hover{color:var(--bone);border-color:var(--accent);}
.btn.danger:hover{color:var(--rust);border-color:var(--rust);}

.saved{
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--bone-dim);
  align-self:center;margin-left:auto;
}

@media (max-width:760px){
  .armies{grid-template-columns:minmax(0,1fr);}
  .roundbar{grid-template-columns:1fr;gap:12px;text-align:center;}
  .pips{flex-wrap:wrap;}
}