/* Imperial Knights: Titanic Duel Tracker */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:         #0a0908;
  --surface:    #141210;
  --surface2:   #1c1a16;
  --border:     #2a2620;
  --accent:     #c9a227;
  --accent-hi:  #e8bf50;
  --accent-dim: #5a4818;
  --text:       #c4b49a;
  --text-dim:   #6a5e4e;
  --danger:     #9a2020;
  --danger-hi:  #d03030;
  --crit:       #6a1010;
  --crit-glow:  #c03030;
}

body { background: var(--bg); color: var(--text); font-family: var(--font-body); min-height: 100vh; }

/* ── Toast ──────────────────────────────────────────────────────────────── */
#kn-toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: #1a1814; border: 1px solid var(--accent-dim); color: var(--accent-hi);
  font-family: var(--font-head); font-size: .65rem; letter-spacing: .08em;
  padding: 8px 18px; border-radius: 3px; z-index: 999; white-space: nowrap;
  box-shadow: 0 2px 12px rgba(0,0,0,.8);
}
/* Urgent variant — game-changing events (e.g. a knight destroyed at 6
   sections). Bigger, red, wraps/caps width on mobile since these messages
   run longer than routine toasts, and flashes a few times to grab attention
   on both screens rather than blending in with routine action confirmations. */
#kn-toast.kn-toast-urgent {
  background: #2a1010; border: 2px solid #d03030; color: #ff8080;
  font-size: .85rem; padding: 12px 22px; white-space: normal;
  max-width: min(90vw, 480px); text-align: center;
  box-shadow: 0 2px 20px rgba(208,48,48,.5);
  animation: kn-toast-flash 0.6s ease-in-out 4;
}
@keyframes kn-toast-flash {
  0%, 100% { background: #2a1010; box-shadow: 0 2px 20px rgba(208,48,48,.5); }
  50%      { background: #6a1818; box-shadow: 0 2px 28px rgba(208,48,48,.9); }
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  background: none; border: 1px solid var(--accent-dim); color: var(--accent);
  border-radius: 2px;
}
.btn:hover { border-color: var(--accent-hi); color: var(--accent-hi); }
.btn-primary { background: var(--accent-dim); border-color: var(--accent); color: var(--accent-hi); }
.btn-primary:hover { background: #6a5020; }
.btn-danger { border-color: var(--danger); color: #c04040; }
.btn-danger:hover { border-color: var(--danger-hi); color: var(--danger-hi); }

/* ── Views ───────────────────────────────────────────────────────────────── */
.kn-view { display: none; }
.kn-view.active { display: block; }

/* ── Lobby ───────────────────────────────────────────────────────────────── */
.kn-lobby-header {
  text-align: center; padding: 48px 20px 16px;
}
.kn-title {
  font-family: var(--font-head); font-size: 1.6rem; letter-spacing: .18em;
  color: var(--accent-hi); text-shadow: 0 0 20px rgba(201,162,39,.3);
}
.kn-logo {
  max-width: 300px; width: 55%; height: auto; display: block; margin: 0 auto 10px;
  filter: drop-shadow(0 0 16px rgba(201,162,39,.35));
}
.kn-logo-topbar {
  height: 28px; width: auto;
  filter: drop-shadow(0 0 6px rgba(201,162,39,.4));
  flex-shrink: 0;
}
.kn-subtitle { font-family: var(--font-head); font-size: .62rem; letter-spacing: .18em; color: var(--text-dim); text-transform: uppercase; }

.kn-lobby-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  max-width: 1400px; margin: 40px auto; padding: 0 20px;
}
@media (max-width: 660px) { .kn-lobby-grid { grid-template-columns: 1fr; } }

.kn-panel {
  background: var(--surface); border: 1px solid var(--border);
  border-top: 2px solid var(--accent-dim);
  padding: 20px;
}
.kn-panel-head {
  font-family: var(--font-head); font-size: .72rem; letter-spacing: .14em;
  color: var(--accent); margin-bottom: 18px; padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

/* ── Last Battle banner ──────────────────────────────────────────────────── */
.kn-last-battle {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-dim);
  border-radius: 4px;
  padding: 10px 16px;
}
.kn-lb-label {
  font-family: var(--font-head); font-size: .6rem; letter-spacing: .08em;
  color: var(--text-dim); white-space: nowrap;
}
.kn-lb-matchup { display: flex; align-items: center; gap: 6px; font-size: .78rem; }
.kn-lb-knight { color: var(--text); }
.kn-lb-winner { color: var(--accent-hi); font-weight: bold; }
.kn-lb-vs { color: var(--text-dim); }

/* ── Saved Knight configs (lobby cards) ─────────────────────────────────── */
.kn-al-cards { padding: 0 20px; }
.kn-al-section-label {
  font-family: var(--font-head); font-size: .62rem; letter-spacing: .14em;
  color: var(--accent); text-transform: uppercase;
  padding-bottom: 4px; border-bottom: 1px solid var(--border);
}
.kn-al-section-label-guest { color: #4a8aaa; border-bottom-color: #1a2a3a; }
.kn-al-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px;
}
@media (max-width: 660px) { .kn-al-grid { grid-template-columns: 1fr; } }
.kn-al-card:only-child { grid-column: 1 / -1; }
.kn-al-card {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 4px solid var(--accent-dim); border-radius: 4px;
  padding: 12px 14px; position: relative; overflow: hidden; min-height: 108px;
}
.kn-al-card-photo {
  position: absolute; top: 0; right: 0; bottom: 0; width: 62%;
  background-size: cover; background-position: center center;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.7) 45%, black 80%);
  mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,.7) 45%, black 80%);
  opacity: .55; pointer-events: none;
}
.kn-al-card-content { position: relative; z-index: 1; }
.kn-al-card-tier {
  font-family: var(--font-head); font-size: .58rem; letter-spacing: .1em;
  color: var(--accent-hi); text-transform: uppercase; margin-bottom: 2px;
}
.kn-al-card-name { font-size: .82rem; color: var(--text); margin-bottom: 8px; }
.kn-al-card-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.kn-al-household { color: var(--text-dim); font-size: .68rem; font-style: italic; }
.kn-al-date { color: var(--text-dim); font-size: .62rem; white-space: nowrap; }
.kn-al-card-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.kn-al-card-guest { border-left-color: #4a8aaa; background: #10182a; }
.kn-al-card-guest .kn-al-card-tier { color: #7ab8d8; }
.kn-al-card-guest .kn-al-card-name { color: #b0c8e0; }

.kn-al-save-wrap { margin-top: 8px; }
.kn-al-save-btn {
  background: none; border: 1px solid var(--accent-dim); color: var(--accent);
  font-family: var(--font-head); font-size: .58rem; letter-spacing: .08em;
  padding: 4px 10px; border-radius: 2px; cursor: pointer; text-transform: uppercase;
}
.kn-al-save-btn:hover { border-color: var(--accent); color: var(--accent-hi); }
.kn-al-form { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.kn-al-name-input {
  flex: 1 1 160px; background: var(--bg); border: 1px solid var(--border);
  color: var(--text); font-size: .7rem; padding: 4px 8px; border-radius: 2px;
}
.kn-al-pin-input {
  flex: 1 1 140px; background: var(--bg); border: 1px solid var(--border);
  color: var(--text); font-size: .7rem; padding: 4px 8px; border-radius: 2px;
}
.kn-al-pin-btn { opacity: .75; }
.kn-al-pin-form { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }

.kn-field { margin-bottom: 14px; }
.kn-field label {
  display: block; font-family: var(--font-head); font-size: .55rem;
  letter-spacing: .1em; color: var(--text-dim); margin-bottom: 4px;
  text-transform: uppercase;
}
.kn-field input, .kn-field select, .kn-field textarea {
  width: 100%; background: #0d0c0a; border: 1px solid var(--border);
  color: var(--text); font-family: var(--font-body); font-size: .8rem;
  padding: 6px 10px; border-radius: 2px; outline: none;
}
.kn-field input:focus, .kn-field select:focus { border-color: var(--accent-dim); }
.kn-field select { cursor: pointer; }

.kn-weapon-checklist { display: flex; flex-direction: column; gap: 4px; }
.kn-wp-check {
  display: flex; align-items: center; gap: 6px;
  font-size: .75rem; cursor: pointer; color: var(--text);
}
.kn-wp-check input { width: auto; cursor: pointer; }
.kn-wp-lobby-meta {
  display: block; font-size: .58rem; color: var(--text-dim);
  margin-left: 20px; margin-top: 1px; font-style: italic;
}
.kn-wp-hint {
  font-size: .65rem; color: var(--text-dim); font-style: italic;
  margin: 0 0 8px; padding: 5px 8px;
  border-left: 2px solid var(--accent-dim); line-height: 1.5;
}
.kn-wp-check-wrap { display: flex; flex-direction: column; }
.kn-wp-mounts {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-left: 20px; margin-top: 2px; font-size: .65rem; color: var(--text-dim);
}
.kn-wp-mounts-label { font-style: italic; }
.kn-wp-mount-opt { display: inline-flex; align-items: center; gap: 3px; cursor: pointer; }
.kn-wp-mount-opt input { width: auto; cursor: pointer; }

.kn-err { color: var(--danger-hi); font-size: .68rem; margin-bottom: 8px; min-height: 16px; }

/* ── Waiting ─────────────────────────────────────────────────────────────── */
.kn-waiting-card {
  max-width: 420px; margin: 60px auto; background: var(--surface);
  border: 1px solid var(--border); border-radius: 4px; padding: 36px;
  text-align: center;
}
.kn-code-label {
  font-family: var(--font-head); font-size: .55rem; letter-spacing: .18em;
  color: var(--text-dim); margin-bottom: 10px;
}
.kn-code-display {
  font-family: var(--font-head); font-size: 3.4rem; letter-spacing: .35em;
  color: var(--accent-hi); text-shadow: 0 0 24px rgba(201,162,39,.4);
  margin-bottom: 8px;
}
.kn-code-hint { font-size: .7rem; color: var(--text-dim); margin-bottom: 20px; }

.kn-poll-dot {
  width: 8px; height: 8px; background: var(--accent); border-radius: 50%;
  margin: 0 auto 16px; animation: kn-pulse 1.8s ease-in-out infinite;
}
@keyframes kn-pulse {
  0%, 100% { opacity: .3; transform: scale(.8); }
  50%       { opacity: 1;  transform: scale(1.2); }
}

/* ── Persistent header ───────────────────────────────────────────────────── */
.kn-header {
  background: var(--surface); border-bottom: 3px solid var(--accent);
  padding: 10px 20px; position: sticky; top: 0; z-index: 100;
}
.kn-header-inner {
  display: flex; align-items: center; gap: 16px;
  max-width: 1400px; margin: 0 auto;
}
.kn-header-logo { height: 52px; width: auto; display: block; filter: drop-shadow(0 0 6px rgba(201,162,39,.35)); }
.kn-title-area { line-height: 1.1; }
.kn-header-subtitle {
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: .7rem; letter-spacing: .2em; color: var(--accent); opacity: .7;
}
.kn-header-title {
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: 1.6rem; letter-spacing: .12em; color: var(--text);
}
.kn-header-auth { margin-left: auto; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
/* Header buttons share suite.css's .btn-sm box model (font-size/padding) so
   every header control reads as the same size — each keeps its own color/
   border treatment, only the structural sizing is unified. */
.btn-kn-auth-in {
  background: none; color: var(--accent);
  border: 1px solid rgba(201,162,39,.35);
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 14px; cursor: pointer; opacity: .7; white-space: nowrap;
}
.btn-kn-auth-in:hover { opacity: 1; background: rgba(201,162,39,.08); }
.btn-kn-auth-out {
  background: none; color: var(--accent);
  border: 1px solid rgba(201,162,39,.35);
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 14px; cursor: pointer; opacity: .7;
  text-decoration: none; white-space: nowrap;
}
.btn-kn-auth-out:hover { opacity: 1; background: rgba(201,162,39,.08); }
.btn-kn-waaagh {
  background: none; color: rgba(200,80,60,.85);
  border: 1px solid rgba(200,80,60,.35);
  font-family: Impact, 'Arial Narrow', sans-serif;
  font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 14px; cursor: pointer; text-decoration: none;
  opacity: .8; white-space: nowrap;
}
.btn-kn-waaagh:hover { opacity: 1; background: rgba(200,80,60,.08); color: #e05030; }
.kn-notify-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; color: var(--accent);
  border: 1px solid rgba(201,162,39,.35);
  font-family: var(--font-head);
  font-size: .8rem; letter-spacing: .1em; text-transform: uppercase;
  padding: 6px 14px; cursor: pointer;
  opacity: .8; white-space: nowrap;
}
.kn-notify-toggle:hover { opacity: 1; background: rgba(201,162,39,.08); }
.kn-notify-toggle input { accent-color: var(--accent); margin: 0; }

/* Mobile: shrink the header to bb7s-style compact proportions, and
   deliberately split it into 2 predictable lines (logo+title, then the
   button cluster right-aligned below) rather than trying to guess whether
   everything fits on one line at every phone width. .kn-top-bar below is
   made non-sticky on mobile (see its own rule) specifically so this
   variable-height header can never cause a sticky-offset overlap. */
@media (max-width: 600px) {
  .kn-header { padding: 8px 12px; }
  .kn-header-inner { gap: 10px; flex-wrap: wrap; row-gap: 6px; }
  .kn-header-logo { height: 34px; }
  .kn-header-subtitle { display: none; }
  .kn-header-title { font-size: 1.1rem; }
  .kn-header-auth { flex-basis: 100%; justify-content: flex-end; }
  .btn-kn-auth-in, .btn-kn-auth-out, .btn-kn-waaagh, .kn-notify-toggle {
    font-size: .68rem; padding: 5px 8px;
  }
}

/* ── Game board ──────────────────────────────────────────────────────────── */
.kn-top-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px; row-gap: 6px;
  background: var(--surface); border-bottom: 1px solid var(--border);
  padding: 8px 16px; position: sticky; top: 72px; z-index: 100;
}
.kn-round-display {
  font-family: var(--font-head); font-size: .68rem; letter-spacing: .1em;
  color: var(--accent); margin-right: auto;
}
@media (max-width: 600px) {
  /* Non-sticky on mobile — the header above can now be 1 or 2 lines
     depending on content, and the top-bar itself can wrap too, so a
     hardcoded pixel `top` offset would be guesswork that breaks the moment
     either row's real height differs from the guess. Scrolling the top bar
     with the page is a fine tradeoff on a phone; it's still always visible
     right below the header, just not pinned while scrolling further down. */
  .kn-top-bar { position: static; padding: 6px 10px; }
}
.kn-target-setter { display: flex; align-items: center; gap: 6px; }
.kn-target-setter label {
  font-family: var(--font-head); font-size: .58rem; letter-spacing: .08em;
  color: var(--text-dim);
}
.kn-target-setter input {
  width: 180px; background: var(--bg); border: 1px solid var(--border);
  color: var(--text); font-size: .75rem; padding: 3px 6px; border-radius: 2px;
}

.kn-board {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0; min-height: calc(100vh - 44px);
}
/* Solo mode: only one knight column renders, so split ITS content into two
   independently-flowing columns instead of leaving the rest of the viewport
   empty — a narrow left column for the stat/roll controls, a wide right
   column for the hit-map/weapons/crit-ref reference content (which actually
   benefits from the extra room). .kn-col-left/.kn-col-right are plain wrapper
   divs around the existing children (index.php) — every child's own markup,
   IDs, and JS bindings are unchanged, they're just grouped.
   A first pass tried this with CSS Grid + grid-column alone (no wrappers),
   relying on auto-placement to stack each column independently — that's
   wrong when one column's item count/DOM order differs from the other's,
   since grid ROWS span both columns sized to the tallest item in that row:
   pinning the hit-map to "row 1" also forced column 1's row 1 (just the
   short header) to match the image's full height, leaving a large empty
   gap in column 1 before its next item could render in row 2. Two real
   wrapper divs with independent flex columns avoids this entirely — each
   column's height is its own content's height, full stop. */
.kn-board.solo-mode { grid-template-columns: 1fr; max-width: 1200px; margin: 0 auto; }
.kn-board.solo-mode .kn-knight-col { display: flex; gap: 28px; align-items: flex-start; }
.kn-board.solo-mode .kn-knight-col > .kn-col-left { flex: 0 1 380px; min-width: 260px; }
.kn-board.solo-mode .kn-knight-col > .kn-col-right { flex: 1 1 0; min-width: 0; }
@media (max-width: 700px) {
  .kn-board { grid-template-columns: 1fr; }
  .kn-board.solo-mode .kn-knight-col { flex-direction: column; }
  .kn-board.solo-mode .kn-knight-col > .kn-col-left { flex: 1 1 auto; }
}

.kn-knight-col {
  border-right: 1px solid var(--border); padding: 16px 14px;
  background: var(--surface);
}
.kn-knight-col:last-child { border-right: none; background: #0f0e12; }

.kn-col-head {
  border-bottom: 1px solid var(--border); padding-bottom: 10px; margin-bottom: 12px;
}
.kn-col-knightname {
  font-family: var(--font-head); font-size: .62rem; letter-spacing: .1em;
  color: var(--accent); text-transform: uppercase; font-style: italic; margin-bottom: 2px;
}
.kn-col-name {
  font-family: var(--font-head); font-size: .9rem; letter-spacing: .06em;
  color: var(--accent-hi); margin-bottom: 2px;
}
.kn-col-meta { font-size: .68rem; color: var(--text-dim); font-style: italic; }
/* Move table */
.kn-move-table {
  display: flex; gap: 10px; margin-top: 6px; flex-wrap: wrap;
}
.kn-mv-row {
  display: flex; align-items: baseline; gap: 4px;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 2px; padding: 2px 7px;
}
.kn-mv-label { font-size: .52rem; color: var(--text-dim); letter-spacing: .04em; }
.kn-mv-val   { font-family: var(--font-head); font-size: .68rem; color: var(--accent); }
.kn-mv-crit-note {
  display: none; width: 100%; font-size: .6rem; color: #c04040;
  font-style: italic; margin-top: 2px;
}

/* Actions reference */
.kn-actions-ref {
  margin-top: 8px; border: 1px solid var(--border); border-radius: 3px;
  background: var(--bg);
}
.kn-actions-ref summary {
  font-family: var(--font-head); font-size: .52rem; letter-spacing: .1em;
  color: var(--text-dim); padding: 5px 10px; cursor: pointer; list-style: none;
  user-select: none; text-transform: uppercase;
}
.kn-actions-ref summary::-webkit-details-marker { display: none; }
.kn-act-table {
  width: 100%; border-collapse: collapse;
  font-size: .68rem; padding: 6px 10px 8px;
}
.kn-act-table tr { border-top: 1px solid var(--border); }
.kn-act-table tr:first-child { border-top: none; }
.kn-act-table td { padding: 3px 10px; }
.kn-act-table td:first-child { color: var(--text); }
.kn-act-table td:last-child  {
  color: var(--accent); font-family: var(--font-head);
  font-size: .62rem; text-align: right; white-space: nowrap;
}

/* AP row */
.kn-ap-row {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 3px; padding: 8px 12px; margin-bottom: 10px;
}
.kn-ap-label {
  font-family: var(--font-head); font-size: .55rem; letter-spacing: .12em;
  color: var(--text-dim); margin-right: 4px;
}
.kn-ap-val {
  font-family: var(--font-head); font-size: 1.4rem; color: var(--accent-hi);
  min-width: 28px; text-align: center;
}
.kn-ap-max { font-size: .7rem; color: var(--text-dim); }
.kn-ap-btn {
  background: none; border: 1px solid var(--accent-dim); color: var(--accent);
  font-size: .9rem; width: 26px; height: 26px; line-height: 1; cursor: pointer;
  border-radius: 2px; transition: border-color .12s, color .12s;
}
.kn-ap-btn:hover { border-color: var(--accent-hi); color: var(--accent-hi); }

/* Objective row */
.kn-obj-row {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 3px; padding: 8px 12px; margin-bottom: 10px;
}
.kn-obj-label {
  font-family: var(--font-head); font-size: .55rem; letter-spacing: .12em;
  color: var(--text-dim); margin-right: 4px;
}
.kn-obj-val {
  font-family: var(--font-head); font-size: 1.4rem; color: var(--accent-hi);
  min-width: 28px; text-align: center;
}
.kn-obj-btn {
  background: none; border: 1px solid var(--accent-dim); color: var(--accent);
  font-size: .9rem; width: 26px; height: 26px; line-height: 1; cursor: pointer;
  border-radius: 2px; transition: border-color .12s, color .12s;
}
.kn-obj-btn:hover { border-color: var(--accent-hi); color: var(--accent-hi); }

/* Sections Destroyed row — automated destroy-6-sections win-condition counter */
.kn-sections-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 3px; padding: 8px 12px; margin-bottom: 10px;
}
.kn-sections-label {
  font-family: var(--font-head); font-size: .55rem; letter-spacing: .1em;
  color: var(--text-dim);
}
.kn-sections-val {
  font-family: var(--font-head); font-size: 1.1rem; color: var(--accent-hi);
  min-width: 20px; text-align: center;
}
.kn-sections-max { font-size: .7rem; color: var(--text-dim); }
.kn-sections-badge {
  font-family: var(--font-head); font-size: .58rem; letter-spacing: .08em;
  color: #ff6060; border: 1px solid #a03030; border-radius: 2px; padding: 2px 8px;
}
.kn-sections-row.kn-sections-destroyed {
  border-color: #a03030; background: rgba(160,48,48,.12);
}
.kn-sections-row.kn-sections-destroyed .kn-sections-val { color: #ff6060; }

/* Shield row */
.kn-shield-row {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 14px; flex-wrap: wrap;
}
.kn-shield-label {
  font-family: var(--font-head); font-size: .55rem; letter-spacing: .1em;
  color: var(--text-dim); white-space: nowrap;
}
.kn-shield-toggle {
  background: none; border: 1px solid var(--border); color: var(--text-dim);
  font-family: var(--font-head); font-size: .52rem; letter-spacing: .06em;
  padding: 4px 12px; cursor: pointer; border-radius: 2px;
  transition: border-color .12s, color .12s, background .12s;
}
.kn-shield-toggle:hover:not(:disabled) { border-color: var(--accent-dim); color: var(--text); }
.kn-shield-toggle.active {
  border-color: var(--accent); color: var(--accent-hi);
  background: rgba(201,162,39,.14); font-weight: bold;
}
.kn-knight-col:last-child .kn-shield-toggle.active {
  border-color: #4a8aaa; color: #7ab8d8; background: rgba(74,138,170,.1);
}
.kn-shield-toggle:disabled, .kn-shield-toggle.disabled {
  opacity: .35; cursor: not-allowed;
}
.kn-shield-disabled-note {
  font-family: var(--font-head); font-size: .5rem; color: var(--danger-hi);
  letter-spacing: .06em;
}

/* Damage roll / Armour test — main dashboard, per knight column */
.kn-roll-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 12px;
}
.kn-roll-row-dmg { align-items: flex-start; }
.kn-roll-label {
  font-family: var(--font-head); font-size: .55rem; letter-spacing: .1em;
  color: var(--text-dim); white-space: nowrap;
}
/* white-space: normal overrides .kn-roll-label's nowrap — a hint span that
   grows past a one-liner (e.g. a longer tooltip-style note) should wrap
   inside the row instead of bleeding into the next column. */
.kn-roll-hint { font-size: .5rem; opacity: .6; text-transform: none; letter-spacing: normal; white-space: normal; }
/* Each weapon gets its own row (chip + result) so multiple weapons' damage can
   stay on screen at once for the round, instead of one shared slot the next
   roll overwrites. */
.kn-roll-chip-list { display: flex; flex-direction: column; gap: 5px; flex: 1 1 auto; min-width: 0; }
.kn-roll-chip-item { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kn-roll-chip {
  background: none; border: 1px solid var(--border); color: var(--text-dim);
  font-family: var(--font-head); font-size: .58rem; letter-spacing: .04em;
  padding: 4px 10px; cursor: pointer; border-radius: 2px; flex-shrink: 0;
}
.kn-roll-chip:hover { border-color: var(--accent); color: var(--accent-hi); }
.kn-roll-chip-dmg { color: var(--accent); }
.kn-roll-reroll-toggle {
  font-size: .62rem; color: var(--text-dim); display: flex; align-items: center; gap: 5px;
  white-space: nowrap;
}
.kn-roll-readout {
  font-family: var(--font-head); font-size: .62rem; color: var(--accent-hi);
  min-height: 1.1em;
}
.kn-roll-mod-input {
  width: 40px; background: var(--bg); border: 1px solid var(--border);
  color: var(--text); font-size: .75rem; padding: 3px 6px; border-radius: 2px;
}
.kn-roll-row:not(.kn-roll-row-dmg) .kn-roll-readout { flex-basis: 100%; }

/* Limited-use weapons (per-battle counter, not per-round) */
.kn-uses-item { display: flex; align-items: center; gap: 6px; }
.kn-uses-name { font-size: .68rem; color: var(--text); flex: 1 1 auto; min-width: 0; }
.kn-uses-val {
  font-family: var(--font-head); font-size: .9rem; color: var(--accent-hi);
  min-width: 14px; text-align: center;
}
.kn-uses-max { font-size: .62rem; color: var(--text-dim); }
.kn-uses-btn {
  background: none; border: 1px solid var(--accent-dim); color: var(--accent);
  font-size: .78rem; width: 20px; height: 20px; line-height: 1; cursor: pointer;
  border-radius: 2px; transition: border-color .12s, color .12s;
}
.kn-uses-btn:hover { border-color: var(--accent-hi); color: var(--accent-hi); }

/* Map / list view toggle */
.kn-hit-map, .kn-hit-list { }
.kn-diagram-placeholder {
  display: flex; align-items: center; justify-content: center;
  min-height: 200px; border: 1px dashed var(--border);
  color: var(--text-dim); font-size: .65rem; font-style: italic;
  border-radius: 2px; margin-bottom: 8px;
}
.kn-view-toggle-btn {
  font-family: var(--font-head); letter-spacing: .06em;
}

/* Critical Damage Reference (static table) */
.kn-crit-ref {
  margin: 12px 0 8px; border-top: 1px solid var(--border);
}
.kn-crit-ref-summary {
  font-family: var(--font-head); font-size: .62rem; letter-spacing: .08em;
  color: var(--text-dim); cursor: pointer; padding: 6px 0;
  list-style: none; user-select: none;
}
.kn-crit-ref-summary::-webkit-details-marker { display: none; }
.kn-crit-ref-summary::before { content: '▸ '; }
.kn-crit-ref[open] .kn-crit-ref-summary::before { content: '▾ '; }
.kn-crit-ref-table {
  width: 100%; border-collapse: collapse; margin-top: 4px;
  font-size: .76rem;
}
.kn-crit-ref-table th {
  font-family: var(--font-head); font-size: .58rem; letter-spacing: .1em;
  color: var(--text-dim); text-align: left; padding: 4px 6px;
  border-bottom: 1px solid var(--border);
}
.kn-crit-ref-table td {
  padding: 4px 6px; vertical-align: top; border-bottom: 1px solid rgba(42,38,32,.6);
  color: var(--text-dim);
}
.kn-ref-loc-id {
  font-family: var(--font-head); font-weight: bold; color: var(--accent-dim);
  white-space: nowrap;
}
.kn-ref-loc-label { font-family: var(--font-head); font-size: .7rem; }
.kn-ref-effect { font-style: italic; }
.kn-ref-paired {
  color: #c07010; font-size: .65em; margin-left: 3px; cursor: help;
}
tr.crit-ref-triggered td {
  color: var(--text); background: rgba(106,16,16,.25);
}
tr.crit-ref-triggered .kn-ref-loc-id { color: var(--danger-hi); }
tr.crit-ref-triggered .kn-ref-loc-label { color: #e08070; }

/* Hit locations */
.kn-locations { margin-bottom: 16px; }

.kn-loc-row {
  border: 1px solid var(--border); border-radius: 3px;
  padding: 8px 10px; margin-bottom: 6px;
  background: var(--surface2); transition: border-color .2s, background .2s;
}
.kn-loc-row.loc-critical {
  border-color: var(--crit-glow); background: #1a0808;
  box-shadow: 0 0 8px rgba(192,48,48,.2);
}

.kn-loc-head {
  display: flex; align-items: center; gap: 6px; margin-bottom: 6px;
}
.kn-loc-id {
  font-family: var(--font-head); font-size: .68rem; letter-spacing: .1em;
  color: var(--text-dim); background: var(--border);
  padding: 2px 6px; border-radius: 2px; white-space: nowrap;
}
.kn-loc-label {
  font-family: var(--font-head); font-size: .75rem; letter-spacing: .05em;
  color: var(--text); flex: 1;
}
.kn-crit-badge {
  font-family: var(--font-head); font-size: .5rem; letter-spacing: .12em;
  color: var(--crit-glow); border: 1px solid var(--crit-glow);
  padding: 1px 5px; border-radius: 2px; animation: crit-pulse 1.6s ease-in-out infinite;
}
@keyframes crit-pulse {
  0%, 100% { opacity: .7; }
  50%       { opacity: 1; }
}
.kn-loc-effect {
  font-size: .62rem; font-style: italic; color: #c04040;
  margin-top: 4px; padding-top: 4px; border-top: 1px solid #2a1010;
}

/* Bubbles */
.kn-bubbles { display: flex; flex-wrap: wrap; gap: 6px; }
.kn-bubble {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1.5px solid var(--accent-dim); background: transparent;
  cursor: pointer; transition: background .15s, border-color .15s, transform .1s;
  display: inline-block;
}
.kn-bubble:hover { border-color: var(--accent); transform: scale(1.1); }
.kn-bubble.filled {
  background: var(--accent-dim); border-color: var(--accent);
}
.loc-critical .kn-bubble.filled {
  background: var(--crit); border-color: var(--crit-glow);
}

/* Guest column bubbles: blue tint */
.kn-knight-col:last-child .kn-bubble { border-color: #2a3a52; }
.kn-knight-col:last-child .kn-bubble:hover { border-color: #4a8aaa; }
.kn-knight-col:last-child .kn-bubble.filled { background: #1a3050; border-color: #4a7aaa; }
.kn-knight-col:last-child .kn-loc-id { background: #1a2030; color: #6090b0; }

/* ── Coin flip overlay ───────────────────────────────────────────────────── */
.coin-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.88);
  display: flex; align-items: center; justify-content: center; z-index: 300;
}
.coin-modal {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 4px; padding: 32px 40px; text-align: center;
  box-shadow: 0 4px 40px rgba(0,0,0,.9);
}
.coin-img {
  width: 220px; height: 220px; object-fit: contain; display: block; margin: 0 auto 20px;
  border-radius: 50%; box-shadow: 0 0 32px rgba(201,162,39,.3);
}
.coin-label {
  font-family: var(--font-head); font-size: 1.4rem; letter-spacing: .2em;
  margin-bottom: 4px;
}
.coin-label-heads { color: var(--accent-hi); }
.coin-label-tails  { color: #7ab8d8; }

.coin-btn { border-color: #5a3a5a; color: #b888c8; }
.coin-btn:hover { border-color: #9a6aaa; color: #d8a8e8; }

/* ── Aim Table overlay ───────────────────────────────────────────────────── */
.aim-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.85);
  display: flex; align-items: center; justify-content: center; z-index: 200;
}
.aim-modal {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 4px; padding: 24px 28px; max-width: 560px; width: 95%;
  box-shadow: 0 4px 40px rgba(0,0,0,.8);
}
.aim-modal-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 18px;
}
.aim-modal-title {
  font-family: var(--font-head); font-size: .9rem; letter-spacing: .2em;
  color: var(--accent-hi);
}
.aim-close {
  background: none; border: 1px solid var(--border); color: var(--text-dim);
  font-family: var(--font-head); font-size: .55rem; letter-spacing: .08em;
  padding: 4px 10px; cursor: pointer; border-radius: 2px;
}
.aim-close:hover { border-color: var(--accent-dim); color: var(--accent); }

.aim-section-label {
  font-family: var(--font-head); font-size: .62rem; letter-spacing: .16em;
  color: #4a9aaa; margin-bottom: 8px; padding: 4px 0;
  border-bottom: 1px solid #1a3a40;
}

.aim-table {
  width: 100%; border-collapse: collapse; margin-bottom: 4px;
}
.aim-table th {
  font-family: var(--font-head); font-size: .6rem; letter-spacing: .1em;
  color: var(--text-dim); text-align: center; padding: 4px 8px;
  border-bottom: 1px solid var(--border);
}
.aim-table td { text-align: center; padding: 5px 4px; border-bottom: 1px solid #1a1816; }
.aim-row-label {
  font-family: var(--font-head); font-size: .58rem; letter-spacing: .06em;
  color: var(--text); text-align: left !important; padding-left: 0 !important;
  white-space: nowrap;
}
.aim-hit  { color: #60c060; font-size: 1rem; }
.aim-miss { font-size: .75rem; letter-spacing: -2px; }
.aim-left, .aim-right { color: #c9a227; }
.aim-up, .aim-down    { color: #6aabcc; }

.aim-legend {
  margin-top: 14px; font-size: .65rem; color: var(--text-dim); text-align: center;
}
.aim-legend .aim-hit  { font-size: .8rem; }
.aim-legend .aim-miss { font-size: .7rem; letter-spacing: -1px; }

/* ── Aim Table roll controls ─────────────────────────────────────────────── */
.aim-roll-controls {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--border);
}
.aim-shot-tabs { display: flex; gap: 6px; }
.aim-shot-tab {
  background: none; border: 1px solid var(--border); color: var(--text-dim);
  font-family: var(--font-head); font-size: .6rem; letter-spacing: .08em;
  padding: 5px 11px; border-radius: 3px; cursor: pointer;
}
.aim-shot-tab.active { background: var(--accent-dim); border-color: var(--accent); color: var(--accent-hi); }
.aim-roll-readout {
  font-family: var(--font-head); font-size: .72rem; color: var(--accent-hi);
  min-height: 1.2em; flex-basis: 100%;
}
.aim-table td.aim-cell-active {
  border-radius: 4px; box-shadow: 0 0 0 2px var(--accent-hi) inset;
  animation: aim-cell-pulse .6s ease-out;
}
@keyframes aim-cell-pulse {
  0%   { box-shadow: 0 0 0 2px var(--accent-hi) inset, 0 0 10px 2px rgba(201,162,39,.6); }
  100% { box-shadow: 0 0 0 2px var(--accent-hi) inset, 0 0 0 0 rgba(201,162,39,0); }
}
@media (prefers-reduced-motion: reduce) {
  .aim-table td.aim-cell-active { animation: none; }
}

/* ── Image-overlay hit tracker ───────────────────────────────────────────── */
.kn-image-tracker { margin-bottom: 14px; }

.kn-img-wrap {
  position: relative; display: block;
  background: #080706; border: 1px solid var(--border); border-radius: 3px;
  overflow: hidden;
}
.kn-diagram-img { width: 100%; display: block; }
.kn-overlay-svg {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none;
}

/* Individual hit dot — red outlines for both teams */
.kn-hit-dot { cursor: pointer; pointer-events: all; }
.kn-hit-dot circle {
  fill: rgba(80,8,8,.25);
  stroke: #c03030;
  stroke-width: 0.5;
  transition: fill .15s, stroke .15s;
}
.kn-hit-dot:hover circle { stroke: #e05050; fill: rgba(120,20,20,.4); }
.kn-hit-dot.filled circle { fill: #8a1a1a; stroke: #e03030; stroke-width: 0.6; }
.kn-hit-dot.filled.crit-loc circle { fill: var(--crit); stroke: var(--crit-glow); stroke-width: 0.6; }

/* Critical damage strip */
.kn-crit-strip {
  margin-top: 6px; display: flex; flex-direction: column; gap: 4px;
}
.kn-crit-entry {
  display: flex; align-items: center; gap: 6px;
  background: #1a0808; border: 1px solid var(--crit-glow);
  border-radius: 3px; padding: 5px 8px;
  animation: crit-pulse 1.6s ease-in-out infinite;
}
.kn-crit-entry-label {
  font-family: var(--font-head); font-size: .58rem; color: var(--text); flex: 0 0 auto;
}
.kn-loc-effect-inline {
  font-size: .6rem; font-style: italic; color: #c04040; flex: 1;
}

/* ── Reference card modal ─────────────────────────────────────────────────── */
/* Wider than the base .aim-modal (560px) since this table has 5 columns plus
   rule text — table-layout:fixed + explicit widths force that text to wrap
   instead of blowing the table (and the whole modal) out into horizontal scroll. */
.kn-ref-modal { max-width: 700px; width: 95%; max-height: 85vh; overflow-y: auto; }
.kn-ref-side-tabs { margin-bottom: 10px; }
.kn-ref-modal-img {
  display: block; max-width: 220px; margin: 10px auto 0;
  opacity: .85; filter: drop-shadow(0 0 8px rgba(201,162,39,.25));
}
.kn-ref-wpn-tbl { width: 100%; table-layout: fixed; }
.kn-ref-wpn-tbl th:first-child,
.kn-ref-wpn-tbl td:first-child { text-align: left; width: 44%; }
.kn-ref-wpn-tbl th:nth-child(2), .kn-ref-wpn-tbl td:nth-child(2) { width: 14%; }
.kn-ref-wpn-tbl th:nth-child(3), .kn-ref-wpn-tbl td:nth-child(3) { width: 14%; }
.kn-ref-wpn-tbl th:nth-child(4), .kn-ref-wpn-tbl td:nth-child(4) { width: 12%; }
.kn-ref-wpn-tbl th:nth-child(5), .kn-ref-wpn-tbl td:nth-child(5) { width: 16%; }
.kn-ref-wpn-name { font-size: .72rem; overflow-wrap: break-word; white-space: normal; }
.kn-ref-rule { color: var(--text-dim); font-size: .68rem; font-style: italic; overflow-wrap: break-word; }
.kn-ref-crit-tbl { width: 100%; table-layout: fixed; }
.kn-ref-crit-tbl th:first-child,
.kn-ref-crit-tbl td:first-child { text-align: left; width: 32%; }
.kn-ref-effect { font-size: .7rem; color: var(--text-dim); text-align: left; overflow-wrap: break-word; }
.kn-ref-locid { font-size: .62rem; color: rgba(201,162,39,.45); }

/* Weapons panel */
.kn-weapons-panel {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 3px; padding: 10px;
}
.kn-weapons-head {
  font-family: var(--font-head); font-size: .55rem; letter-spacing: .1em;
  color: var(--text-dim); margin-bottom: 8px; text-transform: uppercase;
}
.kn-weapons-list { list-style: none; }
.kn-weapon-entry {
  padding: 5px 0; border-bottom: 1px solid var(--border);
  transition: opacity .2s;
}
.kn-weapon-entry:last-child { border-bottom: none; }
.kn-wp-name {
  font-size: .9rem; color: var(--text); margin-bottom: 4px;
}
.kn-wp-stats {
  display: flex; gap: 8px; flex-wrap: wrap;
}
.kn-wp-stat {
  display: flex; align-items: baseline; gap: 4px;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 2px; padding: 3px 10px; font-size: 1rem;
}
.kn-wp-stat-l {
  font-family: var(--font-head); font-size: .7rem;
  letter-spacing: .06em; color: var(--text-dim);
}
.kn-wp-rule {
  font-size: .78rem; color: #6a9a6a; font-style: italic; margin-top: 4px;
}
.kn-weapon-entry.weapon-disabled { opacity: .4; }
.kn-weapon-entry.weapon-disabled .kn-wp-name { text-decoration: line-through; }
.kn-wp-disabled-note {
  font-family: var(--font-head); font-size: .48rem; color: #c04040;
  margin-left: 6px; letter-spacing: .06em; text-decoration: none;
}

/* ── Phase badge (top bar) ───────────────────────────────────────────────── */
/* Matches .btn-sm's box model (font-size/padding from ../suite.css) so it
   doesn't read as a third, smaller control sitting next to real buttons. */
.kn-phase-badge {
  font-family: var(--font-head); font-size: .8rem; letter-spacing: .12em;
  padding: 6px 14px; border-radius: 2px; border: 1px solid;
}
.phase-plan {
  color: #a0d0ff; border-color: #2a5080; background: #0a1e30;
}
.phase-execute {
  color: #ffa080; border-color: #803020; background: #2a0e08;
}

/* ── Plan / Execute phase panels ─────────────────────────────────────────── */
.kn-plan-phase,
.kn-execute-phase {
  margin-bottom: 10px;
  border: 1px solid var(--border); border-radius: 3px;
  overflow: hidden;
}

/* Phase banner strip */
.kn-phase-banner {
  font-family: var(--font-head); font-size: .6rem; letter-spacing: .1em;
  padding: 6px 12px;
}
.plan-active  { background: #0a1e30; color: #a0d0ff; border-bottom: 1px solid #1a4a70; }
.own-locked   { background: #0a2a10; color: #80d880; border-bottom: 1px solid #1a4a28; }
.opp-locked   { background: #1a2a10; color: #80c870; border-bottom: 1px solid #2a4a18; }
.opp-planning { background: #12100e; color: var(--text-dim); border-bottom: 1px solid var(--border); }
.execute-active { background: #2a0e08; color: #ffa080; border-bottom: 1px solid #803020; }

/* Action checklist (picker) */
.kn-action-picker {
  display: flex; flex-direction: column; gap: 0;
}
.kn-action-row {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px; cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background .1s;
}
.kn-action-row:last-child { border-bottom: none; }
.kn-action-row:hover { background: var(--surface2); }
.kn-action-row.selected { background: #0e1e0a; }
.kn-action-row.over-budget { opacity: .4; cursor: not-allowed; }
.kn-action-row input[type="checkbox"] {
  accent-color: var(--accent); width: 16px; height: 16px; cursor: pointer; flex-shrink: 0;
}
.kn-action-row.over-budget input { cursor: not-allowed; }
.kn-action-num {
  font-family: var(--font-head); font-size: .6rem; color: var(--text-dim);
  width: 14px; text-align: center; flex-shrink: 0;
}
.kn-action-name {
  flex: 1; font-size: .85rem; color: var(--text);
}
.kn-action-row.selected .kn-action-name { color: #90d890; }
.kn-action-ap-chip {
  font-family: var(--font-head); font-size: .6rem; letter-spacing: .06em;
  color: var(--accent); background: var(--surface2);
  padding: 2px 8px; border-radius: 2px; border: 1px solid var(--accent-dim);
  flex-shrink: 0;
}

/* Lock footer */
.kn-plan-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px; background: var(--surface2); border-top: 1px solid var(--border);
}
.kn-plan-ap-info {
  font-family: var(--font-head); font-size: .6rem; letter-spacing: .06em; color: var(--accent);
}
.kn-plan-ap-info.ap-over { color: var(--danger-hi); }

.btn-lock {
  background: var(--accent-dim); border-color: var(--accent); color: var(--accent-hi);
  font-size: .6rem; padding: 5px 14px;
}
.btn-lock:hover { background: #6a5020; }
.btn-lock.btn-lock-dim { opacity: .35; cursor: not-allowed; }
.btn-ghost {
  background: none; border-color: var(--border); color: var(--text-dim);
  font-size: .55rem; padding: 3px 8px;
}
.btn-ghost:hover { border-color: var(--text-dim); color: var(--text); }

/* Locked-in display (own side, waiting for opponent) */
.kn-plan-locked-items { padding: 6px 0; }
.kn-plan-item {
  display: flex; align-items: center; gap: 10px;
  padding: 5px 12px; border-bottom: 1px solid var(--border);
}
.kn-plan-item:last-child { border-bottom: none; }
.kn-plan-item-num {
  font-family: var(--font-head); font-size: .6rem; color: var(--text-dim);
  width: 16px; text-align: center; flex-shrink: 0;
}
.kn-plan-item-name { flex: 1; font-size: .85rem; color: #90d890; }
.kn-plan-item-ap {
  font-family: var(--font-head); font-size: .6rem; color: var(--accent);
}

.kn-lock-status {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 7px 12px; font-size: .72rem; color: var(--text-dim); font-style: italic;
  border-top: 1px solid var(--border);
}
.lock-both { color: #80d880; font-style: normal; }

/* Execute phase plan list */
.kn-exec-list { padding: 4px 0; }
.kn-exec-item {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 12px; border-bottom: 1px solid var(--border);
}
.kn-exec-item:last-child { border-bottom: none; }
.kn-exec-num {
  font-family: var(--font-head); font-size: .6rem; color: var(--text-dim);
  width: 16px; text-align: center; flex-shrink: 0;
}
.kn-exec-name { flex: 1; font-size: .85rem; }
.kn-exec-ap {
  font-family: var(--font-head); font-size: .6rem; color: var(--accent);
}

.kn-plan-empty {
  padding: 10px 12px; font-size: .72rem; color: var(--text-dim); font-style: italic;
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.kn-footer {
  background: var(--surface); border-top: 1px solid rgba(201,162,39,.2);
  color: rgba(201,162,39,.45); font-family: var(--font-head);
  font-size: .58rem; letter-spacing: .1em; text-align: center;
  padding: 14px 16px 16px;
}
.kn-footer-copy {
  color: var(--accent); font-size: .65rem; letter-spacing: .1em; margin-bottom: 5px;
}
.kn-footer-email { color: var(--text); text-decoration: none; opacity: .75; }
.kn-footer-email:hover { opacity: 1; text-decoration: underline; }
.kn-footer-legal { color: rgba(201,162,39,.42); font-size: .55rem; letter-spacing: .08em; }

/* ── E-ink mode ─────────────────────────────────────────────────────────────
   High-contrast black-on-white overrides for e-ink tablets (Boox Go/Palma) at
   the table — see ../suite.css for the shared motion/glow kill switch. Most
   of the app already reads from the :root custom properties above, so
   redefining them here recolors the bulk of the dashboard in one place.

   --accent-dim is deliberately kept DARK here (not a middle grey) because it
   plays two conflicting roles in the base theme: a plain border color (wants
   dark) and a "filled/marked" background with no text on top, e.g. a wound
   pip (also wants dark, so it reads as visibly marked against the white
   page) — but it's ALSO used as a filled-BUTTON background with text drawn
   on top (.btn-primary/.aim-shot-tab.active/.btn-lock), which is the one
   role that wants the opposite: light behind dark text. Rather than split
   the difference into an illegible middle grey, those three button rules
   are called out explicitly below to flip to white text on the now-black
   fill — a solid black pill, same "primary action" affordance, just
   colorless. Same reasoning applies to --crit (a filled critical-pip
   background — must stay dark to be visible, not white).

   The remaining explicit overrides below fall into two buckets: (1) hardcoded
   (non-variable) colors — guest-side theming, phase/critical/aim/coin state,
   hit-location dot fills — none of which were ever the SOLE carrier of
   meaning (existing glyphs ◄►▲▼◎, guest name/position, "CRITICAL"/
   "DESTROYED"/phase-banner text already said what the color was
   reinforcing); and (2) hardcoded text colors that were only ever legible
   against the app's original DARK ambient background (light green/gold
   accents at low opacity) and go invisible once that background flips to
   white — the lock-status/weapon-rule/reference-card/footer text below. */
:root[data-eink] {
  --bg:         #fff;
  --surface:    #fff;
  --surface2:   #f0f0f0;
  --border:     #000;
  --accent:     #000;
  --accent-hi:  #000;
  --accent-dim: #000;
  --text:       #000;
  --text-dim:   #333;
  --danger:     #000;
  --danger-hi:  #000;
  --crit:       #000;
  --crit-glow:  #000;
}

/* Filled-button trio: white text on the now-black --accent-dim fill */
[data-eink] .btn-primary,
[data-eink] .aim-shot-tab.active,
[data-eink] .btn-lock { color: #fff !important; }
[data-eink] .btn-primary:hover,
[data-eink] .btn-lock:hover { background: #333 !important; }
[data-eink] .btn-danger { color: #000 !important; }

/* Form fields — the one hardcoded (non-var) input background in the app;
   everything else already reads var(--bg), which the root override above
   already handles. */
[data-eink] .kn-field input,
[data-eink] .kn-field select,
[data-eink] .kn-field textarea { background: #fff !important; color: #000 !important; }

[data-eink] #kn-toast,
[data-eink] .kn-toast-urgent { background: #fff !important; color: #000 !important; border-color: #000 !important; }

/* Location-id tag (e.g. "1L") — background var(--border) with color
   var(--text-dim) reads fine in the original dark theme but becomes
   near-black-on-black once --border goes solid black above. */
[data-eink] .kn-loc-id { background: var(--surface2) !important; color: #000 !important; }

[data-eink] .kn-knight-col:last-child { background: #fff !important; }
[data-eink] .kn-knight-col:last-child .kn-bubble { border-color: var(--border) !important; }
[data-eink] .kn-knight-col:last-child .kn-bubble:hover { border-color: var(--accent) !important; }
[data-eink] .kn-knight-col:last-child .kn-bubble.filled { background: var(--accent-dim) !important; border-color: var(--accent) !important; }
[data-eink] .kn-knight-col:last-child .kn-shield-toggle.active { background: var(--surface2) !important; color: #000 !important; border-color: #000 !important; }
[data-eink] .kn-al-section-label-guest { color: #000 !important; border-bottom-color: #000 !important; }
[data-eink] .kn-al-card-guest { background: #fff !important; border-left-color: #000 !important; }
[data-eink] .kn-al-card-guest .kn-al-card-tier,
[data-eink] .kn-al-card-guest .kn-al-card-name { color: #000 !important; }

[data-eink] .kn-sections-badge { color: #000 !important; border-color: #000 !important; }
[data-eink] .kn-sections-row.kn-sections-destroyed { border-color: #000 !important; background: #eee !important; }
[data-eink] .kn-sections-row.kn-sections-destroyed .kn-sections-val { color: #000 !important; }
[data-eink] tr.crit-ref-triggered td { background: #eee !important; color: #000 !important; }
[data-eink] tr.crit-ref-triggered .kn-ref-loc-label { color: #000 !important; }
[data-eink] .kn-loc-row.loc-critical { background: #f4f4f4 !important; }
[data-eink] .kn-loc-effect,
[data-eink] .kn-loc-effect-inline,
[data-eink] .kn-mv-crit-note,
[data-eink] .kn-wp-disabled-note { color: #000 !important; border-top-color: #000 !important; }
[data-eink] .kn-crit-strip .kn-crit-entry { background: #eee !important; }
[data-eink] .kn-hit-dot circle { fill: rgba(0,0,0,.08) !important; stroke: #000 !important; }
[data-eink] .kn-hit-dot:hover circle { fill: rgba(0,0,0,.18) !important; stroke: #000 !important; }
[data-eink] .kn-hit-dot.filled circle { fill: #000 !important; stroke: #000 !important; }

[data-eink] .aim-hit, [data-eink] .aim-left, [data-eink] .aim-right,
[data-eink] .aim-up, [data-eink] .aim-down,
[data-eink] .aim-section-label { color: #000 !important; }
[data-eink] .aim-section-label { border-bottom-color: #000 !important; }
[data-eink] .coin-label-heads, [data-eink] .coin-label-tails { color: #000 !important; }
[data-eink] .coin-btn { border-color: #000 !important; color: #000 !important; }

[data-eink] .phase-plan, [data-eink] .phase-execute { color: #000 !important; border-color: #000 !important; background: #fff !important; }
[data-eink] .plan-active, [data-eink] .own-locked, [data-eink] .opp-locked,
[data-eink] .opp-planning, [data-eink] .execute-active { background: #fff !important; color: #000 !important; border-bottom-color: #000 !important; }

/* Text colors only ever legible against the original dark ambient background
   (light green/gold accents, some at low opacity) — invisible on white. */
[data-eink] .kn-plan-item-name,
[data-eink] .lock-both,
[data-eink] .kn-action-row.selected .kn-action-name,
[data-eink] .kn-wp-rule,
[data-eink] .kn-ref-locid { color: #000 !important; }
[data-eink] .kn-action-row.selected { background: #eee !important; }
[data-eink] .kn-footer, [data-eink] .kn-footer-legal { color: #333 !important; }

[data-eink] .btn-kn-waaagh { color: #000 !important; border-color: #000 !important; }
[data-eink] .kn-ref-paired { color: #000 !important; }

/* .btn-kn-auth-in/.btn-kn-auth-out/.kn-notify-toggle all share the exact
   same hardcoded rgba(201,162,39,.35) gold border as .btn-kn-waaagh, but
   only .btn-kn-waaagh got the eink override above — found from a real-
   device screenshot showing "History"/"Sign In"/the Notify-E-ink toggles
   still gold-bordered while the rest of the header had correctly flattened
   to black. None of these read the --border/--accent variables for their
   border-color (that's why the :root[data-eink] redefinition above never
   reached them), so each needs its own explicit override. */
[data-eink] .btn-kn-auth-in,
[data-eink] .btn-kn-auth-out,
[data-eink] .kn-notify-toggle { color: #000 !important; border-color: #000 !important; }

/* Aim Table roll highlight — .aim-cell-active conveys "this is the rolled
   cell" entirely via a colored inset box-shadow ring, with no border or
   background change backing it up. ../suite.css's shared motion/glow kill
   switch (`box-shadow: none !important`) removes that ring suite-wide,
   which silently erased the ONLY visual cue this state had — found via a
   real-device screenshot showing the roll readout text present but no
   highlighted cell anywhere in either table. Give it a real border instead,
   since box-sizing:border-box (top of this file) means adding one doesn't
   shift layout the way it would without it. */
[data-eink] .aim-table td.aim-cell-active { border: 2px solid #000 !important; }

/* ── E-ink optimization pass #2 (2026-07-21) ───────────────────────────────
   Same photo-opacity bug found in hive's army-library card, also present
   here: .kn-al-card-photo was tuned to blend into the original dark
   --surface, now white under eink. Also: legible body font, native-widget
   theming, sturdier hairline borders, bigger tap targets. See
   ../CLAUDE.md "E-ink mode" for the full rationale. */
[data-eink] .kn-al-card-photo { opacity: .92 !important; }

:root { color-scheme: dark; }
:root[data-eink] {
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color-scheme: light;
}

[data-eink] * { border-width: 2px !important; }

[data-eink] .btn { min-height: 44px; padding: 12px 22px; }
[data-eink] .btn-sm { min-height: 40px; padding: 10px 18px; }
[data-eink] input[type="checkbox"],
[data-eink] input[type="radio"] { transform: scale(1.4); }

/* Header cluster (.btn-kn-auth-in/.btn-kn-auth-out/.btn-kn-waaagh/
   .kn-notify-toggle) isn't classed .btn/.btn-sm so it missed the bump
   above — matches its own normal-mode .btn-sm-equivalent sizing (.8rem/
   6px 14px, see the "structural sizing is unified" comment near their
   base rules), so it gets the same .btn-sm tap-target tier here. */
[data-eink] .btn-kn-auth-in,
[data-eink] .btn-kn-auth-out,
[data-eink] .btn-kn-waaagh,
[data-eink] .kn-notify-toggle {
  min-height: 40px;
  padding: 10px 18px;
}

/* ── E-ink button hierarchy (2026-07-23) ───────────────────────────────────
   Ported from bb7s/hive (see their CLAUDE.md files for the full writeup).
   Knights was already in better shape than either — .btn-primary/.btn-lock/
   .aim-shot-tab.active are solid black fills (see the dual-role --accent-dim
   handling above) and .btn-ghost is deliberately unfilled (its own quiet/
   neutral tier), so those three already form a working hierarchy. The one
   real gap: .btn-danger renders pixel-identical to .btn-ghost under eink —
   both a plain black-outline/black-text box, since --danger just flattens
   to the same #000 as --border with no extra weight cue. Bumped to a 3px
   border + bold text, same treatment as bb7s/hive's own .btn-danger, so a
   destructive action still reads as "handle with care" without its red
   color. */
[data-eink] .btn-danger {
  border-width: 3px !important;
  font-weight: bold;
}