/*
 * life-counter.css — the /life-counter/ app surface. Loaded ONLY by that page,
 * after styles.css, which still owns the shell, the content region below the
 * app and every token used here.
 *
 * WHY A SECOND STYLESHEET, when the site has had exactly one for its whole
 * life: this is the site's first surface designed to be read upside-down from
 * a phone flat on a table (FUTURE_ADDITIONS.md → life counter §S2), and none
 * of DESIGN.md's patterns were built for it. It is a dark, full-viewport app
 * region with rotated zones and hit targets the size of half a tile — ~350
 * lines that no other page can ever reuse, on a stylesheet that is already
 * 280 KB and 4h-cached on all 656 pages. Bumping styles.css for it would
 * rewrite the site-wide date token on every page for CSS none of them load a
 * rule of. The tooling (bump-asset.mjs / check-asset-versions.mjs) handles a
 * second .css exactly like any other versioned asset; this one gets a letter
 * token, not the date token.
 *
 * Tokens: everything here uses styles.css's :root palette (--ink-slate,
 * --parchment, --accent, --mana-*, --radius, --link) plus the --lc-* set
 * declared on .lc-app. --iw / --ih / --rot / --life-fs are set per zone from
 * life-counter.js (zone geometry is measured, not styled — see the rotation
 * comment on .lc-zone-inner).
 */

/* ---------- the app region ---------- */

.lc-app {
  position: relative;
  --lc-bg: #151a23;                 /* a shade below --ink-slate: the "table" */
  --lc-zone: #242b38;
  --lc-text: #f7f4ec;               /* --parchment, on the dark ground */
  --lc-muted: rgba(247, 244, 236, 0.62);
  --lc-line: rgba(247, 244, 236, 0.14);
  --lc-chrome: #1b212c;
  --lc-danger: #c2453a;
  --lc-warn: #d9a441;
  --lc-hit-plus: rgba(255, 255, 255, 0.04);
  --lc-hit-minus: rgba(0, 0, 0, 0.14);
  background: var(--lc-bg);
  color: var(--lc-text);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: 8px 0 24px;
  /* touch-action: none only on the play surface, below — the setup card and
     sheets are ordinary scrolling UI. */
}

/* Live game: the app takes the viewport. The page beneath is still there —
   "Leave game on this page" in the menu puts it back — but a phone flat on a
   table must show nothing that scrolls or wraps (§S2). z-index sits above the
   pinned header (100) and below the site's overlay layers, none of which open
   over a live game; the sheets below are the counter's own overlays. */
body.lc-live { overflow: hidden; overscroll-behavior: none; }
body.lc-live .lc-app {
  position: fixed;
  inset: 0;
  z-index: 800;
  margin: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  padding-top: env(safe-area-inset-top, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.lc-app button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.lc-app button:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
/* ⚠ The reset above is (0,1,1). Every button-styling rule below is written
   `.lc-app .lc-x` so it outranks it — a bare `.lc-btn` loses and renders as
   plain text (found on the first screenshot pass, 2026-09-03). */

/* ---------- setup (before a game, inside the page flow) ---------- */

.lc-setup { padding: 22px; }
.lc-setup h2 { margin: 0 0 4px; color: var(--lc-text); font-size: 1.3rem; }
.lc-setup .lc-hint { color: var(--lc-muted); margin: 0 0 18px; font-size: 0.95rem; }
.lc-setup-row { display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: flex-end; }
.lc-setup-row .lc-label { display: block; font-size: 0.85rem; color: var(--lc-muted); margin-bottom: 8px; }
.lc-seg { display: inline-flex; border: 1px solid var(--lc-line); border-radius: var(--radius); overflow: hidden; }
.lc-seg button {
  min-width: 46px; min-height: 44px; padding: 0 14px;
  color: var(--lc-muted); font-weight: 600;
  border-right: 1px solid var(--lc-line);
}
.lc-seg button:last-child { border-right: 0; }
.lc-seg button[aria-pressed="true"] { background: var(--accent); color: var(--ink-slate); }
.lc-setup input[type="number"] {
  font: inherit; width: 96px; min-height: 44px; padding: 6px 10px;
  border: 1px solid var(--lc-line); border-radius: var(--radius);
  background: var(--lc-chrome); color: var(--lc-text);
}
.lc-setup-actions { margin-top: 22px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.lc-app .lc-btn {
  min-height: 46px; padding: 10px 20px;
  border-radius: var(--radius); font-weight: 600;
  background: var(--accent); color: var(--ink-slate);
}
.lc-app .lc-btn:hover, .lc-app .lc-btn:focus { background: var(--accent-hover); }
.lc-app .lc-btn--quiet { background: transparent; color: var(--lc-text); border: 1px solid var(--lc-line); }
.lc-app .lc-btn--quiet:hover, .lc-app .lc-btn--quiet:focus { background: rgba(255, 255, 255, 0.06); }
.lc-app .lc-btn--danger { background: var(--lc-danger); color: #fff; }
.lc-app .lc-btn--danger:hover, .lc-app .lc-btn--danger:focus { background: #a83a30; }
.lc-resume { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.lc-resume p { margin: 0; }
.lc-resume strong { color: var(--lc-text); }
.lc-setup .lc-note { color: var(--lc-muted); font-size: 0.9rem; margin: 14px 0 0; }
.lc-setup .lc-note a { color: var(--lc-text); }

/* ---------- the table ---------- */

.lc-table {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  gap: 4px;
  padding: 4px;
  touch-action: none;            /* a press is a press, never a scroll → no pointercancel */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.lc-table[data-layout="2"] { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
.lc-table[data-layout="3"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.lc-table[data-layout="4"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.lc-table[data-layout="5"] { grid-template-columns: 1fr 1fr; grid-template-rows: repeat(6, 1fr); }
.lc-table[data-layout="6"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; }

/* Landscape and tablet. Two attribute selectors, so these outrank the portrait
   rules above on specificity rather than on source order — the JS sets
   data-orient from the table's MEASURED shape (life-counter.js applyLayout),
   not from a media query, because the app is a box inside a page and its own
   proportions are the question. */
.lc-table[data-orient="landscape"][data-layout="2"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
.lc-table[data-orient="landscape"][data-layout="3"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.lc-table[data-orient="landscape"][data-layout="4"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.lc-table[data-orient="landscape"][data-layout="5"] { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; }
.lc-table[data-orient="landscape"][data-layout="6"] { grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; }

/* Seat tints. One colour per seat, mixed into the zone ground, so "the red
   seat" reads across a table at a glance without a name. The order follows
   the mana wheel and lands the two light tokens (W, gold) last, where a 2–4
   player table never reaches them. */
.lc-zone[data-tint="0"] { --lc-tint: var(--mana-r); }
.lc-zone[data-tint="1"] { --lc-tint: var(--mana-u); }
.lc-zone[data-tint="2"] { --lc-tint: var(--mana-g); }
.lc-zone[data-tint="3"] { --lc-tint: #7a5c9e; }         /* B, lifted off the ground */
.lc-zone[data-tint="4"] { --lc-tint: var(--accent); }
.lc-zone[data-tint="5"] { --lc-tint: #7f8ea3; }         /* W: a cool steel — parchment vanishes on slate */

.lc-zone {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  background: color-mix(in srgb, var(--lc-tint, var(--lc-zone)) 26%, var(--lc-zone));
  outline: 2px solid transparent;
  outline-offset: -2px;
  transition: outline-color 0.15s;
}
.lc-zone.is-active { outline-color: var(--lc-tint, var(--accent)); }
.lc-zone.is-out { background: #1d222c; }

/* Commander art (v2, 2026-09-03): the crop fills the player's frame — it sits
   on the INNER box so it rotates with the seat — under a scrim dark enough to
   keep the life figure legible at a glance. --art is set from script, and
   only from cards.scryfall.io. The hit halves and the face stack above the
   pseudo-element because they are positioned later siblings. */
.lc-zone.has-art .lc-zone-inner {
  background: var(--art) center / cover no-repeat;
}
.lc-zone.has-art .lc-zone-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(21, 26, 35, 0.55), rgba(21, 26, 35, 0.72));
}
.lc-zone.has-art.is-out .lc-zone-inner { filter: grayscale(1); }

/* Rotation. The zone is the grid cell; the INNER box is the player's frame,
   sized in JS to the cell's measured width/height (swapped for 90°/270°) and
   rotated about the centre. That is the only way a rotated box fills its
   cell exactly — a CSS transform never changes layout size, so without the
   swap a 90° zone would overflow one axis and leave a gap on the other.
   --iw/--ih are unitless px set by the ResizeObserver in life-counter.js. */
.lc-zone-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--iw, 200) * 1px);
  height: calc(var(--ih, 200) * 1px);
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
  transform-origin: center;
}
.lc-zone[data-rot="0"]   { --rot: 0deg; }
.lc-zone[data-rot="90"]  { --rot: 90deg; }
.lc-zone[data-rot="180"] { --rot: 180deg; }
.lc-zone[data-rot="270"] { --rot: 270deg; }

/* The two halves: the WHOLE half is the target (§S3), the glyph is a hint. */
.lc-app .lc-hit {
  position: absolute;
  top: 0; bottom: 0;
  width: 50%;
  display: flex;
  align-items: center;
  border-radius: 0;
}
.lc-app .lc-hit-minus { left: 0; justify-content: flex-start; background: var(--lc-hit-minus); }
.lc-app .lc-hit-plus  { right: 0; justify-content: flex-end; background: var(--lc-hit-plus); }
.lc-app .lc-hit:active { background: rgba(255, 255, 255, 0.12); }
.lc-hit-glyph {
  font-size: calc(var(--life-fs, 80px) * 0.32);
  font-weight: 300;
  color: var(--lc-muted);
  padding: 0 4%;
  line-height: 1;
}

/* Everything the player reads sits over the hit halves; only its own buttons
   take pointer events, so a tap between them still counts life. */
.lc-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: none;
  padding: 6px 8px;
}
.lc-face button { pointer-events: auto; }

/* "from?" — the damage-source strip, sitting just above the zone's control row.
   Two rules here, and both are corrections of the same mistake: the strip was
   costing the table something every time it appeared.

   ⚠⚠ THE CONTAINER MUST NOT TAKE POINTER EVENTS. As a flex child of a
   full-bleed `.lc-face` with `pointer-events: auto`, it stretched the whole
   width of the zone and swallowed every tap in that band for the six seconds it
   was up — directly after a life loss, which is exactly when a hand comes back
   to ± to correct one. Only the chips are hit-testable now (`.lc-face button`
   below), so the tap halves stay live either side of them.

   ⚠⚠ AND IT IS TAKEN OUT OF FLOW. As a flex child it was also a fourth row in a
   `space-between` column, so showing and hiding it MOVED THE LIFE NUMBER —
   the largest thing on the screen jumping every time somebody lost life, and
   jumping back six seconds later. Absolute means the face's layout is identical
   whether the strip is up or not, and it means five chips at a six-player table
   can wrap without stealing height from the tap halves. */
.lc-attrib {
  position: absolute;
  left: 0;
  right: 0;
  /* ⚠ Anchored to the BOTTOM, over the Cmdr/counters row, not floated above
     it. At six players the zone is short enough that anything higher lands on
     the life total itself — the one thing on the screen that must stay
     readable — and five chips wrapping to two rows made that certain. The
     control row is the least time-critical band in the zone and it is only
     covered for six seconds. */
  bottom: 2px;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
  pointer-events: none;
  padding: 4px;
  /* Its own ground. Sitting over the control row, a transparent strip put the
     chips on top of the Cmdr label and both became unreadable; an opaque band
     reads as one layer that has temporarily taken the row, which is what it
     is. Rounded to match the panels rather than looking like a cut-off. */
  background: rgba(21, 26, 35, 0.93);
  border-radius: 10px;
}
.lc-attrib[hidden] { display: none; }
.lc-attrib-q {
  font-size: calc(var(--life-fs, 80px) * 0.13);
  color: var(--lc-muted);
}
/* ⚠ Deliberately tight. Every pixel of chip sits over a tap half for six
   seconds, and at six players there are five of them — measured at 167 of
   189px with the roomier metrics, which wrapped to a second row and blocked
   twice the band. Small enough to stay on one row at the narrowest zone the
   layouts produce, still above the 34px this file uses elsewhere for a
   thumb. */
.lc-app .lc-attrib-btn {
  font-size: calc(var(--life-fs, 80px) * 0.14);
  font-weight: 600;
  min-height: 34px;
  padding: 2px 7px;
  border-radius: 100px;
  background: rgba(0, 0, 0, 0.42);
  color: var(--lc-text);
  border: 1px solid var(--lc-line);
}
.lc-app .lc-attrib-btn:hover, .lc-app .lc-attrib-btn:focus-visible { background: var(--accent); color: var(--ink-slate); }
.lc-face-top, .lc-face-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-height: 28px;
}
.lc-app .lc-name {
  font-size: calc(var(--life-fs, 80px) * 0.19);
  font-weight: 600;
  color: var(--lc-text);
  padding: 4px 8px;
  border-radius: 100px;
  max-width: 70%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-height: 28px;
}
.lc-app .lc-name.is-placeholder { color: var(--lc-muted); font-weight: 500; }
.lc-name-wrap { display: flex; flex-direction: column; min-width: 0; max-width: 70%; }
.lc-name-wrap .lc-name { max-width: 100%; }
.lc-cmdr-line {
  font-size: calc(var(--life-fs, 80px) * 0.14);
  color: var(--lc-muted);
  padding: 0 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.lc-cmdr-line[hidden] { display: none; }
.lc-turn {
  font-size: calc(var(--life-fs, 80px) * 0.16);
  font-weight: 700;
  color: var(--ink-slate);
  background: var(--lc-tint, var(--accent));
  padding: 3px 9px;
  border-radius: 100px;
  white-space: nowrap;
}
.lc-life {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.15em;
  font-size: var(--life-fs, 80px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.02em;
  pointer-events: none;
}
.lc-life.is-low .lc-life-num { color: #ff9d94; }
.lc-delta {
  font-size: 0.32em;
  font-weight: 600;
  color: var(--lc-muted);
  min-width: 1.6em;
  text-align: left;
  transition: opacity 0.4s;
}
.lc-delta[hidden] { display: none; }
.lc-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.lc-chip {
  font-size: calc(var(--life-fs, 80px) * 0.15);
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 100px;
  background: rgba(0, 0, 0, 0.32);
  color: var(--lc-text);
  white-space: nowrap;
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.lc-chip--lethal { background: var(--lc-danger); color: #fff; }
.lc-chip--mark { background: var(--accent); color: var(--ink-slate); }
.lc-chip--warn { background: var(--lc-warn); color: var(--ink-slate); }
.lc-app .lc-icon-btn {
  font-size: calc(var(--life-fs, 80px) * 0.16);
  font-weight: 600;
  color: var(--lc-text);
  background: rgba(0, 0, 0, 0.28);
  border-radius: 100px;
  padding: 4px 11px;
  min-height: 32px;
  min-width: 44px;
  white-space: nowrap;
}
.lc-app .lc-icon-btn:hover, .lc-app .lc-icon-btn:focus-visible { background: rgba(0, 0, 0, 0.45); }

/* In-zone panels (commander damage, counters, the "out?" prompt). They sit in
   the player's frame — rotated with the zone — because the person answering
   is the one facing it. */
.lc-panel {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--lc-tint, var(--lc-zone)) 18%, #1a1f29);
  display: flex;
  flex-direction: column;
  padding: 8px;
  gap: 6px;
  overflow: auto;
  font-size: calc(var(--life-fs, 80px) * 0.19);
}
.lc-panel[hidden] { display: none; }
.lc-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  min-height: 32px;
}
.lc-panel-head .lc-icon-btn { font-size: 0.85em; }
.lc-panel-rows { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; justify-content: center; }
.lc-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 6px;
  min-height: 40px;
}
.lc-row-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
.lc-row-label small { display: block; font-size: 0.72em; color: var(--lc-muted); font-weight: 500; }
.lc-row-val {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  min-width: 2.2em;
  text-align: center;
  font-size: 1.15em;
}
.lc-row-val.is-lethal { color: #ff9d94; }
.lc-app .lc-step {
  min-width: 44px;
  min-height: 40px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.08);
  font-size: 1.15em;
  font-weight: 600;
}
.lc-app .lc-step:hover, .lc-app .lc-step:focus-visible { background: rgba(255, 255, 255, 0.16); }
.lc-panel-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.lc-row--set { grid-template-columns: minmax(0, 1fr) 4.5em auto; }
.lc-row--set input {
  font: inherit; min-height: 40px; width: 100%; padding: 4px 6px; text-align: center;
  border: 1px solid var(--lc-line); border-radius: var(--radius);
  background: rgba(0, 0, 0, 0.3); color: var(--lc-text); font-variant-numeric: tabular-nums;
}
.lc-app .lc-step.is-on { background: var(--accent); color: var(--ink-slate); }
.lc-panel .lc-btn { min-height: 40px; padding: 6px 14px; font-size: 0.95em; }
.lc-prompt { justify-content: center; align-items: center; text-align: center; gap: 12px; }
.lc-prompt p { margin: 0; font-weight: 700; font-size: 1.1em; }
.lc-prompt small { color: var(--lc-muted); font-size: 0.8em; }
.lc-out {
  justify-content: center; align-items: center; text-align: center; gap: 10px;
  background: rgba(20, 24, 32, 0.82);
}
.lc-out p { margin: 0; font-size: 1.4em; font-weight: 800; letter-spacing: 0.08em; color: var(--lc-muted); }
.lc-out small { color: var(--lc-muted); }

/* ---------- chrome bar ---------- */

.lc-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: var(--lc-chrome);
  border-top: 1px solid var(--lc-line);
}
.lc-bar button {
  min-height: 44px;
  padding: 6px 12px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--lc-text);
  white-space: nowrap;
}
.lc-bar button:hover, .lc-bar button:focus-visible { background: rgba(255, 255, 255, 0.08); }
.lc-bar button:disabled { color: var(--lc-muted); opacity: 0.55; cursor: default; }
.lc-bar .lc-bar-turn { flex: 1 1 auto; text-align: center; font-variant-numeric: tabular-nums; }
.lc-bar .lc-bar-turn small { display: block; font-size: 0.72rem; color: var(--lc-muted); font-weight: 500; }
.lc-bar .lc-bar-end { background: var(--accent); color: var(--ink-slate); }
.lc-bar .lc-bar-end:hover, .lc-bar .lc-bar-end:focus-visible { background: var(--accent-hover); }
@media (max-width: 380px) {
  .lc-bar button { padding: 6px 9px; font-size: 0.88rem; }
}

/* ---------- sheets (upright: the phone gets picked up for these) ----------
   Viewport-fixed rather than app-absolute so the same sheet serves the setup
   card (a Discard confirm) and the live takeover; 810 sits just over the
   takeover's 800. */

.lc-sheet {
  position: fixed;
  inset: 0;
  z-index: 810;
  background: rgba(10, 13, 18, 0.72);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.lc-sheet[hidden] { display: none; }
.lc-sheet-card {
  width: 100%;
  max-width: 640px;
  max-height: 100%;
  overflow: auto;
  background: var(--lc-chrome);
  border-radius: 14px 14px 0 0;
  padding: 18px 18px calc(18px + env(safe-area-inset-bottom, 0));
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5);
  touch-action: pan-y;
  user-select: text;
  -webkit-user-select: text;
}
.lc-sheet-card h2 { margin: 0 0 4px; font-size: 1.25rem; color: var(--lc-text); }
.lc-sheet-card h3 { margin: 18px 0 8px; font-size: 1rem; color: var(--lc-text); }
.lc-sheet-card p { margin: 0 0 12px; color: var(--lc-muted); font-size: 0.95rem; }
.lc-sheet-card p strong { color: var(--lc-text); }
.lc-sheet-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.lc-sheet-actions .lc-btn { flex: 1 1 auto; text-align: center; }
.lc-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--lc-line);
  color: var(--lc-text);
}
.lc-toggle span small { display: block; color: var(--lc-muted); font-size: 0.85rem; }
.lc-toggle input { width: 22px; height: 22px; accent-color: var(--accent); flex: 0 0 auto; }
.lc-status { color: var(--lc-muted); font-size: 0.9rem; margin: 10px 0 0; }
.lc-status--error { color: #ff9d94; }
.lc-field { display: flex; flex-direction: column; gap: 4px; margin: 10px 0; }
.lc-field label { font-size: 0.85rem; color: var(--lc-muted); }
.lc-partner-in { display: flex; gap: 6px; align-items: center; }
.lc-partner-in input { flex: 1 1 auto; min-width: 0; }
.lc-app .lc-end-partner-x {
  flex: 0 0 auto;
  min-width: 44px; min-height: 44px;
  border-radius: var(--radius);
  border: 1px solid var(--lc-line);
  color: var(--lc-muted);
  font-size: 1.2rem; line-height: 1;
}
.lc-app .lc-end-partner-x:hover, .lc-app .lc-end-partner-x:focus-visible { color: var(--lc-text); }
.lc-end-partner-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.lc-end-partner-row[hidden] { display: none; }
.lc-app .lc-end-partner-add { align-self: start; }
.lc-end-row .lc-end-partner-row, .lc-end-row .lc-end-partner-add { grid-column: 1 / -1; }

.lc-field input[type="text"], .lc-field select {
  font: inherit; min-height: 44px; padding: 8px 10px;
  border: 1px solid var(--lc-line); border-radius: var(--radius);
  background: var(--lc-bg); color: var(--lc-text);
}
.lc-setup select {
  font: inherit; min-height: 44px; padding: 6px 10px; max-width: 220px;
  border: 1px solid var(--lc-line); border-radius: var(--radius);
  background: var(--lc-chrome); color: var(--lc-text);
}
.lc-check {
  display: flex; align-items: center; gap: 10px;
  margin: 14px 0 0; color: var(--lc-text); cursor: pointer;
}
.lc-check input { width: 20px; height: 20px; accent-color: var(--accent); flex: 0 0 auto; margin: 0; }
.lc-check small { display: block; color: var(--lc-muted); font-size: 0.85rem; }
.lc-chip-row, .lc-tool-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.lc-tool-row { margin-bottom: 4px; }
/* One-line result for the table tools (rolls, who goes first). Upright,
   above the bar, gone in a moment. */
.lc-toast {
  position: fixed;
  left: 50%;
  bottom: calc(76px + env(safe-area-inset-bottom, 0));
  transform: translateX(-50%);
  z-index: 805;
  background: var(--accent);
  color: var(--ink-slate);
  font-weight: 700;
  font-size: 1.05rem;
  padding: 10px 18px;
  border-radius: 100px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
  max-width: 90vw;
  text-align: center;
}
.lc-toast[hidden] { display: none; }
.lc-chip-row[hidden] { display: none; }
.lc-app .lc-chip-btn {
  font-size: 0.9rem; font-weight: 600; min-height: 36px; padding: 4px 12px;
  border-radius: 100px; border: 1px solid var(--lc-line); color: var(--lc-text);
}
.lc-app .lc-chip-btn:hover, .lc-app .lc-chip-btn:focus-visible { background: rgba(255, 255, 255, 0.08); }

/* End-of-game: one row per seat. Place · name · you · commander · died to. */
.lc-end-summary { display: flex; flex-wrap: wrap; gap: 6px 14px; font-variant-numeric: tabular-nums; }
.lc-end-row {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--lc-line);
}
.lc-end-row .lc-end-cmdr { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.lc-end-row select, .lc-end-row input[type="text"] {
  font: inherit; min-height: 44px; padding: 6px 8px; min-width: 0; width: 100%;
  border: 1px solid var(--lc-line); border-radius: var(--radius);
  background: var(--lc-bg); color: var(--lc-text);
}
.lc-end-row .lc-end-cause { max-width: 200px; }
.lc-end-row .lc-self {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 10px; border-radius: var(--radius);
  border: 1px solid var(--lc-line); color: var(--lc-muted); font-size: 0.9rem; white-space: nowrap;
}
.lc-end-row .lc-self input { accent-color: var(--accent); width: 18px; height: 18px; margin: 0; }
.lc-end-row .lc-self:has(input:checked) { color: var(--ink-slate); background: var(--accent); border-color: var(--accent); }
.lc-end-life { color: var(--lc-muted); font-size: 0.85rem; white-space: nowrap; }
.lc-end-note { margin-top: 12px; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .lc-zone, .lc-delta { transition: none; }
}

/* ---------- the page content below the app ---------- */
.lc-how ol li { margin: 0.4em 0; }
.lc-kbd { font-family: inherit; font-weight: 600; white-space: nowrap; }