:root {
	--ink: #1a1a1a;
	--fire: #c0392b;
	--bg: #f7f5f0;
	--rule: #d8d2c4;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	font: 16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
	color: var(--ink);
	background: var(--bg);
}

.site-header,
.site-main,
.site-footer {
	max-width: 960px;
	margin: 0 auto;
	padding: 1rem 1.25rem;
}

.site-header { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; }
.site-header h1 { margin: 0; font-size: 1.5rem; }
.site-header a { color: var(--fire); text-decoration: none; }
.site-nav { display: flex; gap: 1rem; }
.site-nav a { color: var(--ink); font-weight: 600; font-size: 0.95rem; }
.site-nav a:hover { color: var(--fire); }

.page-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; }

table.games-list { width: 100%; border-collapse: collapse; margin-top: 0.5rem; }
table.games-list th, table.games-list td { text-align: left; padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--rule); }
table.games-list th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: #777; }
table.games-list tbody tr:hover { background: #fff; }

.status { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; padding: 0.1em 0.5em; border-radius: 3px; border: 1px solid var(--rule); }
/* Tones follow GameStatus::tone, which reports the PHASE rather than the
   games.status column — that column says 'setup' for games the engine has
   mid-deployment. 'setup' and 'active' are kept as aliases so any other
   caller styling by the raw column still lands somewhere sensible. */
.status-setup,
.status-unavailable { color: #8a6d1f; border-color: #e0d3a6; }
.status-active,
.status-play      { color: #1b7a3d; border-color: #b6dcc2; }
.status-finished  { color: #555; }
.status-abandoned { color: #999; }
.status-unavailable { color: #a33; border-color: #e6b8b8; }
.turn-progress    { font-variant-numeric: tabular-nums; color: #666; }

.lede { font-size: 1.1rem; }
code { background: #fff; padding: 0.1em 0.35em; border: 1px solid var(--rule); border-radius: 3px; }

table.campaigns { width: 100%; border-collapse: collapse; margin-top: 0.5rem; }
table.campaigns th,
table.campaigns td { text-align: left; padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--rule); }
table.campaigns th { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: #777; }

.site-footer { color: #888; font-size: 0.85rem; border-top: 1px solid var(--rule); margin-top: 2rem; }

.cta { color: var(--fire); font-weight: 600; text-decoration: none; }
.error { background: #fdecea; border: 1px solid #f5c6cb; color: #842029; padding: 0.6rem 0.8rem; border-radius: 4px; }

form.new-game { max-width: 640px; }
.field { display: block; margin: 0 0 1rem; }
.field > span { display: block; font-weight: 600; margin-bottom: 0.25rem; }
.field input[type="text"], .field select { width: 100%; padding: 0.45rem 0.5rem; border: 1px solid var(--rule); border-radius: 4px; font: inherit; background: #fff; }
.field small { color: #777; }

fieldset.options, details.options { border: 1px solid var(--rule); border-radius: 4px; padding: 0.75rem 1rem; margin: 0 0 1rem; background: #fff; }
fieldset.options legend, details.options summary { font-weight: 600; padding: 0 0.4rem; cursor: pointer; }
.opt { display: block; padding: 0.15rem 0; font-size: 0.95rem; }
.opt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0.1rem 1rem; margin-top: 0.5rem; }

button[type="submit"] { background: var(--fire); color: #fff; border: 0; padding: 0.6rem 1.2rem; border-radius: 4px; font: inherit; font-weight: 600; cursor: pointer; }

table.kv { border-collapse: collapse; }
table.kv th { text-align: left; padding: 0.3rem 1rem 0.3rem 0; color: #777; font-weight: 600; vertical-align: top; }
table.kv td { padding: 0.3rem 0; }

/* ── New-game wizard ───────────────────────────────────────────── */
.wizard-steps { display: flex; gap: 0.5rem; list-style: none; padding: 0; margin: 0 0 1.5rem; counter-reset: step; }
.wizard-steps li { counter-increment: step; color: #999; font-size: 0.9rem; font-weight: 600; padding: 0.3rem 0.8rem; border-bottom: 3px solid var(--rule); flex: 1; }
.wizard-steps li::before { content: counter(step) ". "; }
.wizard-steps li.current { color: var(--fire); border-bottom-color: var(--fire); }
.wizard-steps li.done { color: var(--ink); border-bottom-color: #b9b1a0; }

.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; margin: 1rem 0; }
.card { display: block; padding: 1rem; border: 1px solid var(--rule); border-radius: 6px; background: #fff; text-decoration: none; color: inherit; transition: border-color .12s, box-shadow .12s; }
.card:hover { border-color: var(--fire); box-shadow: 0 2px 8px rgba(192,57,43,.12); }
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.card-head h3 { margin: 0; font-size: 1.1rem; }
.badge { font-size: 0.7rem; color: #777; background: var(--bg); border: 1px solid var(--rule); border-radius: 3px; padding: 0.1em 0.4em; white-space: nowrap; }
.card-meta { color: #777; font-size: 0.85rem; margin: 0.3rem 0; }
.card-desc { font-size: 0.9rem; margin: 0.4rem 0 0; }
.note { color: #888; font-size: 0.85rem; font-style: italic; }

.seat-choice { display: grid; gap: 0.5rem; margin: 0 0 1rem; }
.seat-choice label { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.6rem 0.75rem; border: 1px solid var(--rule); border-radius: 6px; cursor: pointer; }
.seat-choice label:has(input:checked) { border-color: #888; background: #fafafa; }
.seat-choice input { margin-top: 0.2rem; }
.opt-group-title { margin: 1.4rem 0 0.5rem; padding-bottom: 0.3rem; border-bottom: 1px solid var(--rule); }
.opt-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0.6rem; }
.opt-card { display: flex; gap: 0.6rem; padding: 0.6rem 0.7rem; border: 1px solid var(--rule); border-radius: 5px; background: #fff; cursor: pointer; }
.opt-card:hover:not(.disabled) { border-color: var(--fire); }
.opt-card.disabled { opacity: 0.55; cursor: not-allowed; background: #faf9f6; }
.opt-card input { margin-top: 0.2rem; }
.opt-body { display: flex; flex-direction: column; gap: 0.15rem; }
.opt-name { font-weight: 600; font-size: 0.92rem; }
/* Kit acronyms in an option's name carry their expansion as a tooltip.
   Browsers style <abbr> inconsistently (some underline, some not), so say
   it explicitly and match the dotted-underline affordance the counter
   popover uses for the same job. */
/* An obsolete option is not pending work — it is never coming, because the
   rule it changes no longer applies. Struck through so it reads as closed
   rather than as something still on its way. */
.opt-card.status-obsolete .opt-name { text-decoration: line-through; text-decoration-thickness: 1px; }
.opt-card.status-obsolete .opt-reason { font-style: italic; }

.opt-name abbr,
.opt-desc abbr { cursor: help; text-decoration: underline dotted; text-underline-offset: 2px; }
/* The description is small grey prose; a full-strength dotted rule under
   every acronym in it reads as noise, so soften it there only. */
.opt-desc abbr { text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); }
.opt-desc { font-size: 0.82rem; color: #555; }
.opt-reason { font-size: 0.78rem; color: var(--fire); font-style: italic; }
.rec { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.03em; color: #777; border: 1px solid var(--rule); border-radius: 3px; padding: 0 0.3em; margin-left: 0.3em; vertical-align: middle; }
.rec-always .rec { color: #1b7a3d; border-color: #b6dcc2; }
.rec-often .rec  { color: #8a6d1f; border-color: #e0d3a6; }

.actions { display: flex; align-items: center; gap: 1.2rem; margin-top: 1.5rem; }

.flow-panel { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.5rem 0 1rem; }
.flow-panel form { margin: 0; }
.flow-panel button { background: #fff; color: var(--ink); border: 1px solid var(--rule); padding: 0.45rem 0.9rem; border-radius: 4px; font: inherit; cursor: pointer; }
.flow-panel button:hover { border-color: var(--fire); color: var(--fire); }

.muted { color: #888; font-size: 0.9em; }
.opt-list { list-style: none; padding: 0.5rem 0 0; margin: 0; columns: 2; }
.opt-list li { padding: 0.1rem 0; break-inside: avoid; }

.presets { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 1.2rem 0 0.3rem; }
.presets-label { font-weight: 600; margin-right: 0.2rem; }
.presets button { background: #fff; color: var(--ink); border: 1px solid var(--rule); padding: 0.4rem 0.8rem; border-radius: 4px; font: inherit; font-size: 0.88rem; cursor: pointer; }
.presets button:hover { border-color: var(--fire); }
.presets button.active { background: var(--fire); color: #fff; border-color: var(--fire); }

.opt-num { display: inline-block; min-width: 1.6em; text-align: center; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.78rem; color: #555; background: var(--bg); border: 1px solid var(--rule); border-radius: 3px; padding: 0 0.25em; margin-right: 0.35em; }
.rec-sometimes .rec { color: #6c6c6c; }


/* ───────── Setup progress nav (games/_setup_nav.tpl) ─────────
   Setup is serial: only the stage the game is actually in is reachable, so
   only it is a link or marked current. The others are inert, and `done` and
   `todo` are told apart — a bar that dims one stage for an unrelated reason
   reads as "that one is next", which is the confusion this replaced. */
.setup-steps { display: flex; gap: 6px; align-items: center; margin: 0 0 14px; font-size: 14px; }
.setup-steps a,
.setup-steps span.on,
.setup-steps span.done,
.setup-steps span.todo { padding: 3px 10px; border-radius: 5px; border: 1px solid #ddd; }
.setup-steps a { text-decoration: none; color: #555; }
.setup-steps .on   { background: #2d3a52; border-color: #2d3a52; color: #fff; font-weight: 600; }
.setup-steps .done { color: #777; border-style: dashed; }
.setup-steps .todo { color: #aaa; border-color: #eee; }
.setup-steps .sep  { color: #bbb; border: 0; padding: 0; }

/* ───────── New-game grouping (games/new/grouping.tpl) ─────────
   One arrangement per line, each group boxed. The groups within an
   arrangement are separate PLAYERS, not a spectrum, so they need a visible
   boundary rather than a comma — reading "Germany, Italy, Japan" without one
   cannot tell you whether that is one player or three. */
.grouping-side { margin: 16px 0 6px; font-size: 0.95rem; }
.grouping-opts { list-style: none; margin: 0; padding: 0; }
.grouping-opts li { border-top: 1px solid #eee; }
.grouping-opts li:last-child { border-bottom: 1px solid #eee; }
.grouping-opts label { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
                       padding: 7px 6px; cursor: pointer; }
.grouping-opts label:hover { background: #f6f8fb; }
.grouping-opts input { margin: 0; }
.grouping-opts .grp { border: 1px solid #d6dae2; border-radius: 5px; background: #fff;
                      padding: 2px 9px; font-size: 0.9rem; white-space: nowrap; }
/* A radio that is checked tints its whole row, so the current pick is legible
   at a glance in a list of ten near-identical arrangements. */
.grouping-opts input:checked ~ .grp { border-color: #2d3a52; background: #eef1f7; font-weight: 600; }
.grouping-split { margin-bottom: 26px; padding-bottom: 8px; }
/* Panels are tab-switched now, so they no longer need a divider between them. */
/* The rule-24.1.2 recommendation, marked in place rather than listed apart —
   it is one arrangement among the legal ones, not a separate kind of thing. */
.grouping-opts .grp-rec { border: 1px solid #b8d4b8; border-radius: 999px; background: #eef6ee;
                          color: #3a6a3a; padding: 1px 9px; font-size: 0.78rem;
                          text-transform: uppercase; letter-spacing: 0.04em; }
/* A submit button that has to read as a link: the wizard steps post their
   state forward and back, so "back" is a form submission, not an href — but
   it should not look like a second call to action next to the real one.
   `all: unset` is avoided deliberately; the button[type=submit] rule above
   would otherwise have to be undone piece by piece anyway. */
/* button.linkish, not .linkish: the site-wide button[type="submit"] rule has
   two selectors' worth of weight and was painting every one of these as a red
   call to action - which is the opposite of what the class is for. */
button.linkish, .linkish { background: none; border: 0; padding: 0; margin: 0; font: inherit;
           font-weight: normal; color: #2d5aa8; text-decoration: underline;
           cursor: pointer; }
button.linkish:hover, .linkish:hover { color: #1b3d75; }

/* The wizard's back control, in the same place on every step: its own line,
   under the forward button. One of the three is a real link (step 2 needs no
   state) and two are submits, so both are styled here rather than only the
   button — the steps should not be told apart by how "back" looks. */
.wizard-back { margin: 0.9rem 0 0; font-size: 0.92rem; }
.wizard-back a,
.wizard-back button { background: none; border: 0; padding: 0; font: inherit;
                      font-weight: normal; color: #2d5aa8; text-decoration: underline;
                      cursor: pointer; }
.wizard-back a:hover,
.wizard-back button:hover { color: #1b3d75; }
/* The scenario / player-count cards became submit buttons when the wizard
   moved to POST, which put them under the `button[type="submit"]` rule above
   and painted every card fire-red. Restate the card's own look; `all: unset`
   is not used because it would drop the .card rule too. */
.card-form { display: contents; }
button.card { text-align: left; font: inherit; font-weight: normal; cursor: pointer;
              background: #fff; color: inherit; border: 1px solid var(--rule);
              border-radius: 6px; padding: 1rem; width: 100%; }
button.card:hover { border-color: var(--fire); box-shadow: 0 2px 8px rgba(192,57,43,.12); }
/* Seat-split tabs on the grouping step. Stacking the splits vertically put the
   second below the fold, where it read as absent rather than as an
   alternative. Today only odd player counts have a second split — that falls
   out of the sides having to be within one seat of each other, so it is a
   consequence of the current constraints rather than a rule; the tab bar keys
   off how many splits there ARE (Grouping::seatSplits). */
.split-tabs { display: flex; gap: 4px; margin: 14px 0 0; border-bottom: 2px solid #e6e6e6; }
.split-tab { background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -2px;
             padding: 7px 14px; font: inherit; font-size: 0.92rem; color: #666; cursor: pointer; }
.split-tab:hover { color: var(--ink); }
.split-tab.on { color: var(--ink); font-weight: 600; border-bottom-color: var(--fire); }
.split-tab .tab-rec { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
                      border: 1px solid #b8d4b8; background: #eef6ee; color: #3a6a3a;
                      font-size: 0.7rem; font-weight: 600; text-transform: uppercase;
                      letter-spacing: 0.04em; vertical-align: 1px; }

/* ───────── Sign-in ───────── */
/* The current account sits at the far right of the header, opposite the nav.
   "Sign out" is a POST (signing out changes state), so it is a button that
   has to read as a link — see .linkish. */
.site-user { margin-left: auto; display: flex; align-items: center; gap: 0.7rem; font-size: 0.9rem; }
.site-user form { margin: 0; }

/* The signed-in user as a slug: face, name, and everything else about the
   account folded away behind it. No script - hover opens it, and a click
   focuses the button, which :focus-within catches. */
.user-menu { position: relative; }
.user-slug { display: flex; align-items: center; gap: 0.45rem; font: inherit; font-weight: 600;
             color: var(--ink); background: #fff; border: 1px solid var(--rule);
             border-radius: 999px; padding: 0.2rem 0.7rem 0.2rem 0.25rem; cursor: pointer; }
.user-slug:hover { border-color: #bdb4a4; }
.user-slug .caret { color: #8a8378; font-size: 0.7rem; }

.user-menu-panel { display: none; position: absolute; right: 0; top: 100%; z-index: 20;
                   min-width: 12rem; padding: 0.3rem; background: #fff;
                   border: 1px solid var(--rule); border-radius: 8px;
                   box-shadow: 0 6px 18px rgba(0, 0, 0, 0.10); }
.user-menu:hover .user-menu-panel,
.user-menu:focus-within .user-menu-panel { display: block; }
.user-menu-email { padding: 0.35rem 0.6rem 0.45rem; color: #777; font-size: 0.85rem;
                   border-bottom: 1px solid #eee9df; margin-bottom: 0.3rem;
                   overflow: hidden; text-overflow: ellipsis; }
/* Specific enough to beat the site-wide submit-button styling: a menu row is
   not a call to action, whatever element it is made of. */
.user-menu-panel .menu-item { display: block; width: 100%; text-align: left; font: inherit;
                              font-weight: 400; color: var(--ink); background: none; border: 0;
                              border-radius: 6px; padding: 0.4rem 0.6rem; cursor: pointer; }
.user-menu-panel .menu-item:hover { background: #f4f0ea; }

.account-list { list-style: none; padding: 0; margin: 1rem 0; max-width: 34rem; }
.account-list li + li { margin-top: 0.4rem; }
.account-list form { margin: 0; }
.account-list button { display: flex; align-items: baseline; gap: 0.8rem; width: 100%;
                       text-align: left; background: #fff; color: inherit; font: inherit;
                       font-weight: normal; border: 1px solid var(--rule); border-radius: 6px;
                       padding: 0.7rem 0.9rem; cursor: pointer; }
.account-list button:hover { border-color: var(--fire); box-shadow: 0 2px 8px rgba(192,57,43,.12); }
.account-name { font-weight: 600; }
.account-email { color: #777; font-size: 0.88rem; }
/* Internal tools say so on the page as well as in the URL: a debug listing
   that looks like the real one is a debug listing someone will mistake for it. */
.debug-banner { background: #fff4e0; border: 1px solid #e8c98a; border-left-width: 4px;
                border-radius: 4px; padding: 0.6rem 0.8rem; margin: 0 0 1rem; font-size: 0.9rem; }

/* ───────── Home campaign table ───────── */
.campaigns .num { text-align: right; font-variant-numeric: tabular-nums; }
/* A campaign the engine cannot start yet is still worth listing — the table
   is the rulebook's contents, not a menu — but it should not read as an
   offer. Shaded, italic and named as such: three signals, because the row
   still has to be readable as data rather than as an error. */
.campaign-unimplemented { background: #f6f6f6; color: #8a8a8a; font-style: italic; }
.unimplemented-note { font-style: italic; color: #999; font-size: 0.86rem; white-space: nowrap; }

/* ───────── Setup: players ───────── */
.seats { width: 100%; max-width: 46rem; border-collapse: collapse; margin: 1rem 0; }
.seats th, .seats td { padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.seats th { text-align: left; font-size: 0.85rem; color: #777; font-weight: 600; }
.seats .num { width: 3rem; text-align: right; font-variant-numeric: tabular-nums; color: #777; }
.seats .seat-email { color: #666; font-size: 0.9rem; }
.seats .seat-when { color: #777; font-size: 0.88rem; white-space: nowrap; }
/* A seat still waiting is the one with something to do on it, so it is the
   one that stands out; a filled seat recedes. */
.seat-accepted { background: #f6faf6; }
.seat-invited  { background: #fffdf3; }
.seats form.inline { display: inline; margin-left: 0.5rem; }
.cta-small { background: #2d5a3a; color: #cfc; border: 1px solid #3a6a4a; border-radius: 4px;
             padding: 0.15rem 0.6rem; font: inherit; font-size: 0.85rem; cursor: pointer; }

/* ───────── Invitation landing ─────────
   Narrow and centred: the page has one question on it, and the person
   reading it arrived from an email with no idea what the site is. */
.invite-card { max-width: 34rem; margin: 1.5rem auto; }
.invite-kicker { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem;
                 color: #999; margin: 0 0 0.2rem; }
.invite-card h2 { margin-top: 0; }
.invite-card h2 em { font-style: normal; color: var(--fire); }
.invite-facts { margin: 1.2rem 0; }
.invite-error { color: #b00; background: #fdeaea; border: 1px solid #f3b9b9;
                border-radius: 6px; padding: 0.6rem 0.8rem; }
.invite-signup { border: 1px solid var(--rule); border-radius: 8px; padding: 1rem; margin: 0.8rem 0 1.4rem; }
.invite-signup .field { display: block; margin-bottom: 0.6rem; }
.invite-signup .field span { display: block; font-size: 0.9rem; margin-bottom: 0.25rem; }
/* The invitation link, shown to the game's owner. A read-only input rather
   than text: it selects on focus, so it can be copied without a script. */
.invite-link { margin-top: 0.35rem; }
.invite-link input { width: 100%; max-width: 30rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
                     font-size: 0.78rem; color: #555; background: #fafafa;
                     border: 1px solid var(--rule); border-radius: 4px; padding: 0.25rem 0.4rem; }
.mail-ok  { color: #3a6a3a; }
.mail-bad { color: #b00; cursor: help; text-decoration: underline dotted; }

/* ───────── Debug tools ─────────
   Boxed and labelled in the footer rather than sitting in the main nav: they
   are for inspecting the data, not for playing, and a tool that looks like a
   feature gets used as one. */
.debug-tools { display: flex; align-items: baseline; gap: 0.8rem; flex-wrap: wrap;
               border: 1px solid var(--rule); border-radius: 6px;
               padding: 0.5rem 0.75rem; margin: 0 0 0.8rem; font-size: 0.88rem; }
.debug-tools-label { color: #999; font-weight: 600; text-transform: uppercase;
                     letter-spacing: 0.04em; font-size: 0.72rem; }
.debug-tools a { color: #666; }
.debug-tools a:hover { color: var(--ink); }
/* The invitation's roster. Seats still waiting on somebody are italic, so a
   glance separates who is in from who is merely expected. */
.invite-roster { margin: 1.2rem 0; }
.invite-roster th { width: 7rem; font-weight: 600; color: #666; }
.invite-roster td.pending { font-style: italic; color: #888; }

/* ───────── Avatars ─────────
   Circular, to the left of the name, aligned to the text rather than the
   line box so a 24px image does not push rows apart. */
.avatar { display: inline-block; width: 24px; height: 24px; border-radius: 50%;
          vertical-align: -7px; margin-right: 0.4rem; background: #eee; }
/* A seat with nobody in it keeps the space, so names stay in one column. */
.avatar-empty { background: transparent; border: 1px dashed #d8d8d8; }
.user-slug .avatar { margin-right: 0; }

/* In a table the player column is whatever width is left over, and a long
   address in a narrow one would otherwise wrap under the face. Flex keeps
   the two together and lets the text wrap beside the image instead. */
.seat-who { display: flex; align-items: center; gap: 0.4rem; }
.seat-who .avatar { flex: 0 0 auto; margin-right: 0; }

/* ───────── Bidding (rule 24.1.2) ─────────
   The explanation carries as much weight as the controls here: a bid is an
   offset from a number the player has to be shown, so the page has to teach
   before it can ask. Set apart rather than inline, so a player who has bid
   before can skip it in one glance. */
.explainer { border-left: 3px solid var(--rule); padding: 0.1rem 0 0.1rem 1rem;
             margin: 1.2rem 0; max-width: 46rem; }
.explainer h3 { margin: 1rem 0 0.4rem; font-size: 1rem; }
.explainer h3:first-child { margin-top: 0.4rem; }
.explainer p { margin: 0.5rem 0; color: #333; }
.explainer code { background: #efeade; border-radius: 3px; padding: 0 0.3em; font-size: 0.92em; }

.groups-table { border-collapse: collapse; margin: 0.6rem 0 1.4rem; min-width: 28rem; }
.groups-table th, .groups-table td { text-align: left; padding: 0.45rem 0.8rem; border-bottom: 1px solid var(--rule); }
.groups-table thead th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: #777; }
.groups-table .num { text-align: right; }
.groups-table tfoot td, .groups-table tfoot th { border-bottom: 0; color: #777; font-size: 0.9rem; }

/* A power and the objectives it is expected to hold, kept together - the
   number means nothing detached from the name it belongs to. */
.power { display: inline-block; margin-right: 0.9rem; white-space: nowrap; }
.power .expected { margin-left: 0.3rem; padding: 0.05rem 0.35rem; border-radius: 999px;
                   background: #eee9df; color: #5a5348; font-size: 0.8rem;
                   font-variant-numeric: tabular-nums; }

.auction-seats { width: 100%; max-width: 44rem; }
.auction-seats .num { text-align: right; font-variant-numeric: tabular-nums; }
.auction-seats thead th.num { text-align: right; }
.seat-me { background: #f6faf6; }
.seat-out td { opacity: 0.55; }
.top-bid { font-weight: 700; color: var(--fire); }
.round-flag { margin-left: 0.6rem; font-size: 0.8rem; font-weight: 400; color: #777;
              text-transform: uppercase; letter-spacing: 0.04em; }

.pick-panel { border: 1px solid var(--rule); border-radius: 6px; padding: 0.9rem 1rem;
              margin: 1rem 0; max-width: 44rem; background: #fffdf8; }
.pick-panel h4 { margin: 0 0 0.7rem; }

.bid-panel { display: flex; align-items: center; flex-wrap: wrap; gap: 0.9rem;
             border: 1px solid var(--rule); border-radius: 6px; padding: 0.8rem 1rem;
             margin: 1rem 0; max-width: 44rem; background: #fffdf8; }
.bid-panel p { margin: 0; }
.bid-form { display: flex; align-items: center; gap: 0.5rem; }
.bid-form input { width: 6em; font: inherit; padding: 0.35rem 0.5rem;
                  border: 1px solid var(--rule); border-radius: 4px; }

.group-choices { display: flex; flex-direction: column; gap: 0.5rem; align-items: flex-start; }
.group-choices button { text-align: left; }
.group-choices .muted { display: block; font-weight: 400; font-size: 0.85rem; }

.auction-log { color: #555; font-size: 0.9rem; }

/* The last round's silent bid: dropping out there sets your own number, so
   it gets said out loud rather than left to be worked out from the log. */
.drop-cost { border: 1px solid #e6d9a8; background: #fdfae9; border-radius: 6px;
             padding: 0.7rem 1rem; margin: 0 0 1rem; max-width: 44rem; }
.drop-cost p { margin: 0.3rem 0; }

.scrapping-for { color: #555; margin: 0.4rem 0 1rem; }

/* ───────── Debug: play as ─────────
   Development only (init.php's DEBUG_TOOLS). Same bordered-box, labelled
   idiom as the footer's debug tools, so it reads as scaffolding rather than
   as part of the game. */
.debug-players { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem;
                 border: 1px dashed var(--rule); border-radius: 6px;
                 padding: 0.45rem 0.7rem; margin: 0 0 1.2rem; background: #faf7f0; }
.debug-players form { margin: 0; }
.debug-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em;
               color: #8a8378; margin-right: 0.2rem; }
button.debug-player { display: flex; align-items: center; gap: 0.4rem; font: inherit;
                      font-size: 0.88rem; font-weight: 400; color: var(--ink);
                      background: #fff; border: 1px solid var(--rule); border-radius: 999px;
                      padding: 0.15rem 0.7rem 0.15rem 0.2rem; cursor: pointer; }
button.debug-player:hover { border-color: #bdb4a4; }
button.debug-player.is-me { background: #eef4ee; border-color: #bcd2bc; cursor: default; }
.debug-powers { color: #777; font-size: 0.82rem; }

/* ───────── Scrapping (rule 24.1.5) ─────────
   One face per counter, not two: the popup carries everything the back used
   to have to say, and a pool of 40 counters is easier to read over at half
   the height. */
.scrap-legend { color: #777; font-size: 0.85rem; margin: 0.3rem 0 1rem; }
.scrap-power { margin: 0.9rem 0; }
.scrap-power > summary { cursor: pointer; font-size: 1.1rem; font-weight: 700; padding: 0.4rem 0; }
.scrap-type-label { font-size: 0.95rem; font-weight: 700; color: #2d3a52;
                    border-bottom: 1px solid #e2e2e2; padding-bottom: 0.15rem;
                    margin: 0.9rem 0 0.4rem; }
.scrap-group { margin: 0.3rem 0 0.8rem; }
.scrap-group-label { color: #777; font-weight: 600; font-size: 0.78rem; margin: 0.4rem 0 0.3rem; }
.scrap-units { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.scrap-unit { display: inline-flex; line-height: 0; }
.scrap-unit .face { position: relative; display: block; line-height: 0; }
.scrap-unit .face img, .scrap-unit .face .noart {
	width: 56px; height: 56px; border-radius: 3px; display: block; background: #eae6dc; }
.scrap-unit .face .noart { display: flex; align-items: center; justify-content: center;
                           font: 8px/1.1 ui-monospace, monospace; color: #777;
                           text-align: center; word-break: break-all; }

.scrap-unit.scrappable { cursor: pointer; }
.scrap-unit.scrappable input { position: absolute; opacity: 0; pointer-events: none; }
.scrap-unit.scrappable .face img, .scrap-unit.scrappable .face .noart { outline: 2px dashed #59c; }
/* Ticked: dimmed, with a cross over it. Loud on purpose — this is the one
   choice on the page that cannot be taken back. */
.scrap-unit.scrappable input:checked ~ .face img,
.scrap-unit.scrappable input:checked ~ .face .noart {
	outline: 3px solid #e23; opacity: 0.5; filter: grayscale(0.5); }
.scrap-unit.scrappable input:checked ~ .face::after {
	content: "\2715"; position: absolute; inset: 0; display: flex;
	align-items: center; justify-content: center; color: #e23;
	font: 900 42px/1 system-ui, sans-serif;
	text-shadow: 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff; pointer-events: none; }
.scrap-unit.keep .face img, .scrap-unit.keep .face .noart { outline: 2px solid #e2e2e2; }
.scrap-unit.keep { opacity: 0.92; }
/* Already gone: shown greyed, since it is a record rather than a choice. */
.scrap-unit.gone .face img { outline: 2px solid #d8d2c4; opacity: 0.55; filter: grayscale(0.85); }

.scrap-commit { margin: 1.2rem 0 0.4rem; }

.scrap-roster { width: 100%; max-width: 52rem; border-collapse: collapse; margin: 0.6rem 0 1rem; }
.scrap-roster th, .scrap-roster td { text-align: left; vertical-align: top;
                                     padding: 0.7rem 0.8rem; border-bottom: 1px solid var(--rule); }
.scrap-roster th { width: 14rem; font-weight: 600; }
.roster-powers { display: block; margin-top: 0.15rem; color: #777; font-weight: 400; font-size: 0.85rem; }
.scrap-count { margin: 0 0 0.5rem; }

/* "(you)" beside a name, on any page that lists the people in a game. A bare
   "You" reads fine in a sentence and badly in a list of players: you lose
   which of them you are. */
.you { color: #8a8378; font-weight: 400; }

/* The may-scrap conditions. A list rather than prose because campaigns add
   their own, and a list takes another one without being rewritten. */
.scrap-rules { margin: 0.5rem 0; padding-left: 1.2rem; }
.scrap-rules li { margin: 0.35rem 0; color: #333; }

/* A link that carries a page forward the way a submit button does — the step
   after scrapping is a move to another page, not a form, but it is the same
   act to whoever is clicking it and should look like one. */
a.cta-button { display: inline-block; background: var(--fire); color: #fff; border: 0;
               padding: 0.6rem 1.2rem; border-radius: 4px; font: inherit; font-weight: 600;
               text-decoration: none; cursor: pointer; }
a.cta-button:hover { background: #a63125; color: #fff; }