/* Titan — shared design system (mobile-first).
   Used by web/index.html (battle lab) and web/arena.html (engagement arena).
   Base layout is ONE column sized for a phone; the ≥960px breakpoint adds the
   desktop side panel. Keep page-specific rules in the pages; put anything both
   pages need here. Palette is the original dark theme. */

:root {
  --att: #b23b3b;            /* attacker red  */
  --att-text: #e08a8a;
  --def: #2f5fb2;            /* defender blue */
  --def-text: #8fb0e8;
  --bg: #15161a;
  --panel: #1f2128;
  --panel-2: #262a33;        /* raised / hover surfaces */
  --input: #13141a;
  --line: #33363f;
  --line-soft: #23252d;
  --text: #e8e8ea;
  --muted: #9a9fab;
  --faint: #8b8f99;
  --gold: #ffd24a;
  --green: #2e7d46;
  --green-hi: #369451;
  --danger: #a33d3d;
  --radius: 10px;
  --radius-s: 7px;
  --pad: 12px;
  --tap: 44px;               /* minimum touch-target height */
  --maxw: 1100px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 14px/1.45 system-ui, sans-serif;
}
h1 { font-size: 17px; margin: 0; font-weight: 650; }
h2 { font-size: 15px; margin: 0 0 8px; }
h3 { font-size: 13px; margin: 0 0 6px; color: var(--muted); font-weight: 600; }

/* ---- app frame: sticky status bar on top, one centered column ------------ */
.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 10px 14px; background: color-mix(in srgb, var(--bg) 88%, black);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(6px);
}
.topbar .sub { color: var(--faint); font-size: 12px; }
.app { max-width: var(--maxw); margin: 0 auto; padding: 12px; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.grow { flex: 1; min-width: 0; }
.muted { color: var(--muted); font-size: 12px; }
.hint { color: var(--faint); font-size: 12px; }
.hint.bad { color: var(--att-text); }
/* labeled checkbox on one tappable line: <label class="ckrow"><input type=checkbox>…</label> */
label.ckrow { display: flex; gap: 8px; align-items: center; min-height: var(--tap);
              margin: 0; font-size: 13px; color: var(--text); cursor: pointer; }

/* desktop: main column + side panel */
@media (min-width: 960px) {
  .app.with-side {
    display: grid; grid-template-columns: minmax(0, 1fr) 300px;
    gap: 14px; align-items: start;
  }
  .app.with-side > .side {
    position: sticky; top: 58px;
    max-height: calc(100vh - 72px); overflow-y: auto;
  }
}

/* ---- surfaces -------------------------------------------------------------- */
.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--pad);
}
.card.dim { opacity: .62; }
.banner {
  padding: 10px 12px; border-radius: var(--radius-s);
  background: var(--panel-2); border: 1px solid var(--line);
  color: var(--muted); font-size: 13px;
}

/* ---- creature chips / badges ---------------------------------------------- */
.chips {
  display: flex; flex-wrap: wrap; gap: 6px; min-height: 34px;
  border: 1px dashed var(--line); border-radius: var(--radius-s); padding: 6px;
}
.chip {
  background: var(--panel-2); border-radius: 14px; padding: 3px 10px;
  font-size: 12.5px; border: 1px solid var(--line);
}
.chip.att, .att .chip { border-color: var(--att); }
.chip.def, .def .chip { border-color: var(--def); }
button.chip { cursor: pointer; color: var(--text); font: inherit; }
button.chip:hover { background: #3a2020; }
.badge {
  display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--muted);
}
.badge.on { border-color: var(--gold); color: var(--gold); }
button.badge { cursor: pointer; font: inherit; font-size: 12px;
               min-height: var(--tap); padding: 8px 14px; border-radius: var(--radius-s); }

/* ---- buttons / inputs (touch-sized) ---------------------------------------- */
button.btn, .seg button {
  font: inherit; cursor: pointer; color: var(--text);
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: var(--radius-s); padding: 8px 14px; min-height: var(--tap);
}
button.btn:hover { background: #363a45; }
button.btn:disabled { opacity: .45; cursor: default; }
button.btn.primary { background: var(--green); border-color: var(--green); color: #fff; font-weight: 600; }
button.btn.primary:hover { background: var(--green-hi); }
button.btn.danger { background: transparent; border-color: var(--danger); color: #e08a8a; }
button.btn.danger:hover { background: #3a2020; }
button.btn.mini { min-height: 30px; padding: 3px 10px; font-size: 12px; }
button.btn.block { width: 100%; }
label { display: block; font-size: 12px; color: var(--muted); margin: 8px 0 3px; }
select, input {
  width: 100%; background: var(--input); color: var(--text);
  border: 1px solid var(--line); border-radius: 6px;
  padding: 9px 10px; font: inherit; min-height: var(--tap);
}
.seg { display: flex; border: 1px solid var(--line); border-radius: var(--radius-s); overflow: hidden; }
.seg button { flex: 1; border: 0; border-radius: 0; background: var(--input); }
.seg button.on { background: var(--green); color: #fff; font-weight: 600; }
/* checkboxes must not inherit the full-width touch sizing of text inputs */
input[type="checkbox"] { width: auto; min-height: 0; }

/* collapsible cards: <details class="card"><summary>…</summary>…</details> */
details.card > summary {
  cursor: pointer; user-select: none; font-weight: 600; font-size: 13px;
  color: var(--text); padding: 2px 0; list-style-position: inside;
}
details.card:not([open]) { padding-bottom: var(--pad); }

/* ---- the board: SVG scales to the column, capped so desktop stays sane ----- */
.board { max-width: 720px; margin: 0 auto; }
.board svg {
  width: 100%; height: auto; display: block;
  background: #000; border-radius: var(--radius-s);
  touch-action: manipulation;
}

/* action bar under the board: full-width tap targets on phones. JS-built plain
   <button>s inside .actions get .btn sizing without needing the class. */
.actions { display: flex; gap: 8px; flex-wrap: wrap; }
.actions .btn { flex: 1 1 130px; }
.actions > button:not([class]) {
  flex: 1 1 130px; font: inherit; cursor: pointer; color: var(--text);
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: var(--radius-s); padding: 8px 14px; min-height: var(--tap);
}
.actions > button:not([class]):hover { background: #363a45; }

/* ---- eval bar --------------------------------------------------------------- */
.evalbar { border-radius: 6px; overflow: hidden; background: var(--def); height: 10px; }
.evalbar > i { display: block; height: 100%; background: var(--att); }
.evaltext { font-size: 12px; color: var(--muted); margin-top: 4px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.eval-regime {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.03em;
  text-transform: uppercase; padding: 2px 7px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted); background: #1a1c22;
}
.eval-regime.crushing, .eval-regime.won { color: #8fd48f; border-color: #3d6b3d; background: #152015; }
.eval-regime.ahead { color: #b8d98a; border-color: #4a6a30; background: #181f12; }
.eval-regime.even, .eval-regime.draw { color: #c8ccd6; border-color: var(--line); }
.eval-regime.behind { color: #e0b080; border-color: #6a4a28; background: #1f1810; }
.eval-regime.desperate, .eval-regime.lost { color: #f0a0a0; border-color: #6b3030; background: #201515; }

/* ---- log / monospace wells -------------------------------------------------- */
.note, .logbox {
  white-space: pre-wrap; font-family: ui-monospace, monospace; font-size: 12px;
  color: #bcd; background: #000; border-radius: var(--radius-s);
  padding: 10px; overflow: auto; max-height: 200px;
}

/* ---- tables (results): scroll inside, never widen the page ------------------ */
.tablewrap { overflow-x: auto; }
table.results { border-collapse: collapse; width: 100%; font-size: 12.5px; }
table.results th, table.results td {
  text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line-soft);
  white-space: nowrap;
}
table.results th { color: var(--muted); font-weight: 600; }

/* ---- bottom sheet: decision dialogs dock to the thumb on phones ------------- */
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: var(--panel); border-top: 2px solid var(--gold);
  border-radius: 14px 14px 0 0; padding: 14px;
  max-height: 70vh; overflow: auto;
  box-shadow: 0 -8px 30px #000c;
}
.sheet h2 { color: var(--gold); }
@media (min-width: 960px) {           /* desktop: same element as a centered card */
  .sheet {
    position: static; border: 1px solid var(--gold); border-radius: var(--radius);
    box-shadow: none; max-height: none;
  }
}

/* ---- toasts ------------------------------------------------------------------ */
.toast {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 50;
  background: #2a1d1d; border: 1px solid var(--danger); color: #eec;
  border-radius: 8px; padding: 9px 14px; font-size: 13px; max-width: 92vw;
}