/* Coop Strategic Survivor — one hand-rolled stylesheet, no framework.
   Dark, slightly grim fantasy. The map is the hero. (Specs/06-ui-ux.md) */

:root {
  --bg:        #12110f;
  --bg-raised: #1b1917;
  --bg-sunken: #0c0b0a;
  --line:      #322e29;
  --ink:       #e8e2d6;
  --ink-dim:   #a49b8c;
  --ink-faint: #6f6759;

  --accent:      #c9a227;   /* lamplight gold */
  --accent-ink:  #1a1710;
  --danger:      #c4553d;
  --ok:          #6f9b5a;

  /* terrain */
  --t-plains:   #7d8b52;
  --t-forest:   #2f4a30;
  --t-hills:    #9a7b3f;
  --t-mountain: #5d5a55;
  --t-water:    #35506b;
  --t-ruins:    #574a63;
  --t-corrupt:  #3b1145;

  /* player slots — blue / green / orange / pink, distinguishable in the
     common colour-vision deficiencies and always paired with a glyph */
  --s1: #4d90d6;
  --s2: #61a95f;
  --s3: #d78a34;
  --s4: #cf6f9e;

  /* Specs/06-ui-ux.md §2. Safe to let cells grow now that the map scrolls
     inside its own box instead of stretching the page. */
  --cell: clamp(18px, 2.2vmin, 34px);
  --panel-w: 320px;
  --radius: 6px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.5 ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

h1, h2, h3 { font-weight: 600; letter-spacing: .01em; margin: 0 0 .5em; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.1rem; color: var(--ink-dim); text-transform: uppercase; letter-spacing: .08em; }
h3 { font-size: 1.05rem; }
p  { margin: 0 0 .75em; }
a  { color: var(--accent); }
code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

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

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .5rem 1rem;
  background: var(--bg-raised); border-bottom: 1px solid var(--line);
}
.brand { font-weight: 600; color: var(--ink); text-decoration: none; letter-spacing: .04em; }
.topbar-user { display: flex; align-items: center; gap: .75rem; }
.topbar-user .who { color: var(--ink-dim); }
.topbar-user form { margin: 0; }

main { padding: 1rem; }

/* --- controls ------------------------------------------------------------- */

button, .button {
  display: inline-block; font: inherit; cursor: pointer; text-decoration: none;
  padding: .45rem .8rem; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--bg-raised); color: var(--ink);
}
button:hover, .button:hover { border-color: var(--ink-faint); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
button.primary:hover { filter: brightness(1.08); }
button.ghost, .button.ghost { background: transparent; }
button.link {
  background: none; border: none; color: var(--ink-dim);
  padding: .2rem; text-decoration: underline;
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

label { display: block; margin-top: .6rem; color: var(--ink-dim); font-size: .85rem; }
input, select {
  width: 100%; font: inherit; padding: .45rem .6rem; border-radius: var(--radius);
  background: var(--bg-sunken); color: var(--ink); border: 1px solid var(--line);
}
form.stack { margin-bottom: 1.5rem; }
form.stack button { margin-top: .8rem; }

.hint  { color: var(--ink-faint); font-size: .82rem; margin-top: .35rem; }
.empty { color: var(--ink-faint); font-style: italic; }
.tagline { color: var(--ink-dim); }
.ominous { color: #b08bbd; }

.error {
  margin: .5rem 0; padding: .5rem .7rem; border-radius: var(--radius);
  background: color-mix(in srgb, var(--danger) 18%, transparent);
  border: 1px solid var(--danger); color: #f0c9bf;
}

.notice {
  margin: .5rem 0; padding: .5rem .7rem; border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border: 1px solid var(--accent); color: var(--ink);
}

.badge {
  padding: .1rem .45rem; border-radius: 999px; font-size: .78rem;
  background: var(--bg-sunken); border: 1px solid var(--line); color: var(--ink-dim);
}
.badge.danger { border-color: var(--danger); color: #f0c9bf; }

/* --- cards / landing ------------------------------------------------------ */

.centered { display: flex; justify-content: center; padding-top: 3vh; }
.card {
  width: min(28rem, 100%); padding: 1.5rem;
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: 10px;
}
.card.auth h1 { margin-bottom: .2em; }

/* CSS-only tabs: the radios drive which panel is visible, no JS involved. */
.tabs { margin-top: 1rem; }
.tabs > input { position: absolute; opacity: 0; pointer-events: none; }
.tabs > label {
  display: inline-block; margin: 0 .25rem 0 0; padding: .4rem .8rem;
  border: 1px solid var(--line); border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
  color: var(--ink-dim); cursor: pointer; font-size: .9rem;
}
.tabs > input:checked + label { background: var(--bg-sunken); color: var(--ink); }
.tabs > input:focus-visible + label { outline: 2px solid var(--accent); }
.tabpanel { display: none; padding: 1rem; background: var(--bg-sunken); border: 1px solid var(--line); border-radius: 0 var(--radius) var(--radius); }
#tab-login:checked    ~ #panel-login    { display: block; }
#tab-register:checked ~ #panel-register { display: block; }

/* --- admin ---------------------------------------------------------------- */

.admin { max-width: 52rem; margin: 0 auto; }
.admin .col { margin-top: 1.5rem; }
.userlist { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.usercard {
  display: grid; grid-template-columns: 1fr auto; gap: .2rem .8rem; align-items: center;
  padding: .6rem .8rem; background: var(--bg-raised);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.usercard.pending { border-color: var(--accent); }
.usercard-main { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.usercard .username { font-weight: 600; }
.usercard-meta { grid-column: 1; color: var(--ink-faint); font-size: .82rem; }
.usercard-actions {
  grid-column: 2; grid-row: 1 / span 2;
  display: flex; align-items: center; gap: .4rem;
}
.usercard-actions form { margin: 0; }
.usercard-actions .hint { margin: 0; }

/* --- lobby ---------------------------------------------------------------- */

.lobby { display: grid; grid-template-columns: 1fr; gap: 2rem; max-width: 68rem; margin: 0 auto; }
@media (min-width: 900px) { .lobby { grid-template-columns: 1.4fr 1fr; } }

.gamelist { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.gamecard {
  display: grid; gap: .35rem .75rem; align-items: center;
  grid-template-columns: 1fr auto;
  padding: .7rem .9rem; background: var(--bg-raised);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.gamecard.dim { opacity: .55; }
.gamecard-main { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.gamecard .gamename { font-weight: 600; color: var(--ink); text-decoration: none; }
.gamecard .code { font-family: ui-monospace, monospace; color: var(--ink-faint); letter-spacing: .1em; }
.gamecard-meta {
  grid-column: 1; display: flex; gap: .9rem; flex-wrap: wrap;
  color: var(--ink-dim); font-size: .85rem;
}
.gamecard .button { grid-row: 1 / span 2; grid-column: 2; }

.waiting .invitecode { text-align: center; margin: 1rem 0; }
.waiting .invitecode code {
  font-size: 2.4rem; letter-spacing: .35em; padding: .3em .2em .3em .55em;
  background: var(--bg-sunken); border: 1px dashed var(--line); border-radius: var(--radius);
  color: var(--accent);
}
.playerlist { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .35rem; }
.of { color: var(--ink-faint); font-weight: 400; }

/* --- player chips --------------------------------------------------------- */

.chip {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .15rem .5rem; border-radius: 999px; font-size: .85rem;
  background: var(--bg-sunken); border: 1px solid var(--line);
}
.chip .dot { font-size: .8em; }
.chip.s1 { border-color: var(--s1); } .chip.s1 .dot { color: var(--s1); }
.chip.s2 { border-color: var(--s2); } .chip.s2 .dot { color: var(--s2); }
.chip.s3 { border-color: var(--s3); } .chip.s3 .dot { color: var(--s3); }
.chip.s4 { border-color: var(--s4); } .chip.s4 .dot { color: var(--s4); }
.chip.me { font-weight: 600; }
.chip.dead { opacity: .5; text-decoration: line-through; }

/* --- game layout ---------------------------------------------------------- */

/* minmax(0, 1fr), not 1fr: a grid item defaults to min-width:auto, so a plain
   1fr track refuses to shrink below the tilemap's intrinsic width (a 48-wide
   map is ~1440px). That pushed the side panel out of the viewport and made the
   whole page scroll sideways on large screens. min-width:0 on the children is
   the same guard one level down. */
.game { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
@media (min-width: 900px) {
  .game { grid-template-columns: minmax(0, 1fr) var(--panel-w); align-items: start; }
}
.board { min-width: 0; }

.hud {
  display: grid; gap: .5rem; margin-bottom: .75rem; padding: .6rem .8rem;
  background: var(--bg-raised); border: 1px solid var(--line); border-radius: var(--radius);
}
.hud-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.hud .day { font-weight: 600; font-size: 1.05rem; }
.hud .deadline { color: var(--ink-dim); }
.hud .players { display: flex; gap: .4rem; flex-wrap: wrap; margin-left: auto; }
.hud .resources { font-variant-numeric: tabular-nums; color: var(--ink); }
.hud .resources .cap { color: var(--ink-faint); font-size: .82rem; }
.hud .resources .garrison { margin-left: auto; font-weight: 600; }

/* --- the map -------------------------------------------------------------- */

.mapwrap {
  min-width: 0;
  background: var(--bg-sunken); border: 1px solid var(--line);
  border-radius: var(--radius); padding: .5rem;
}
.map {
  display: grid;
  grid-template-columns: repeat(var(--size), var(--cell));
  grid-auto-rows: var(--cell);
  gap: 1px;
  /* Scroll inside the map, never the page. width:max-content sizes the grid to
     its tracks so it can be centred once the viewport is wider than the map,
     instead of hugging the left edge of a huge screen. */
  overflow: auto;
  max-width: 100%;
  width: max-content;
  margin-inline: auto;
  max-height: min(72vh, calc(var(--cell) * var(--size) + var(--size) * 1px));
  /* the threat gradient, felt rather than read */
  background: radial-gradient(circle at 100% 100%, #3a0f16 0%, transparent 55%);
}

.cell {
  all: unset;
  display: grid; place-items: center;
  width: var(--cell); height: var(--cell);
  font-size: calc(var(--cell) * .62); line-height: 1;
  cursor: pointer; user-select: none;
}
.cell:hover  { box-shadow: inset 0 0 0 2px var(--ink-dim); }
.cell:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); outline: none; }

.t-plains   { background: var(--t-plains); }
.t-forest   { background: var(--t-forest); }
.t-hills    { background: var(--t-hills); }
.t-mountain { background: var(--t-mountain); color: #2c2a27; }
.t-water    { background: var(--t-water); }
.t-ruins    { background: var(--t-ruins); color: #cdbcd9; }

/* Terrain decoration lives in CSS so the per-cell markup stays small; :empty
   keeps it from colliding with a building or corruption glyph. */
.cell.t-mountain:empty::after { content: "▲"; font-size: .8em; }
.cell.t-ruins:empty::after    { content: "⌒"; font-size: .8em; }

.cell.owned { box-shadow: inset 0 0 0 2px var(--line); }
.cell.owned.s1 { box-shadow: inset 0 0 0 2px var(--s1); }
.cell.owned.s2 { box-shadow: inset 0 0 0 2px var(--s2); }
.cell.owned.s3 { box-shadow: inset 0 0 0 2px var(--s3); }
.cell.owned.s4 { box-shadow: inset 0 0 0 2px var(--s4); }

.cell.influenced {
  background-color: var(--t-corrupt);
  background-blend-mode: multiply;
  color: #d9a8e8;
  animation: corrupt 4s ease-in-out infinite;
}
@keyframes corrupt { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.35); } }
@media (prefers-reduced-motion: reduce) { .cell.influenced { animation: none; } }

.cell.heart {
  background: #0a0406;
  color: #ff5a4d;
  box-shadow: inset 0 0 6px 2px #7a1420, 0 0 8px 2px #4d0d14;
}

.legend { margin-top: .6rem; color: var(--ink-dim); font-size: .85rem; }
.legend summary { cursor: pointer; }
.legend ul { list-style: none; margin: .5rem 0; padding: 0; display: grid; gap: .3rem; }
.legend li { display: flex; align-items: center; gap: .5rem; }
.legend .sw {
  display: inline-grid; place-items: center;
  width: 1.1rem; height: 1.1rem; border-radius: 3px; font-size: .8rem;
}
.legend .sw.t-plains { background: var(--t-plains); }
.legend .sw.t-forest { background: var(--t-forest); }
.legend .sw.t-hills { background: var(--t-hills); }
.legend .sw.t-mountain { background: var(--t-mountain); }
.legend .sw.t-water { background: var(--t-water); }
.legend .sw.t-ruins { background: var(--t-ruins); }
.legend .sw.influenced { background: var(--t-corrupt); color: #d9a8e8; }
.legend .sw.heart { background: #0a0406; color: #ff5a4d; }

/* --- side panel ----------------------------------------------------------- */

.panel {
  min-width: 0;
  background: var(--bg-raised); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
/* Beside the map on desktop, and pinned there: the map is tall enough to
   scroll, and the panel is where every action lives, so it must not scroll
   away from the tile you just clicked. */
@media (min-width: 900px) {
  .panel {
    position: sticky; top: 1rem;
    max-height: calc(100vh - 2rem);
    display: flex; flex-direction: column;
  }
  #side-panel { overflow-y: auto; }
}
/* Bottom-sheet feel on small screens (Specs/06-ui-ux.md §4): the panel keeps
   its own scroll and its tab bar stays put, so the "↑ Map" link is always
   reachable however far down the panel you have read. */
@media (max-width: 899px) {
  .panel { display: flex; flex-direction: column; max-height: 70vh; }
  .panel .paneltabs { position: sticky; top: 0; z-index: 1; }
  .panel #side-panel { overflow-y: auto; }
  /* Cap the map so the panel below it is never pushed a whole screen away. */
  .map { max-height: min(60vh, calc(var(--cell) * var(--size) + var(--size) * 1px)); }
}

.paneltabs { display: flex; border-bottom: 1px solid var(--line); }
.paneltabs .tab {
  flex: 1; border: none; border-radius: 0; background: var(--bg-sunken);
  color: var(--ink-faint); padding: .5rem .3rem; font-size: .85rem;
  text-align: center; text-decoration: none; line-height: 1.4;
}

/* The panel already sits beside the map on desktop, so the way back is only
   needed once it stacks underneath. */
.paneltabs .backtomap { display: none; }
@media (max-width: 899px) {
  .paneltabs .backtomap {
    display: block; flex: 0 0 auto; padding-inline: .7rem;
    color: var(--accent); font-weight: 600;
  }
}
.paneltabs .tab.active { background: var(--bg-raised); color: var(--ink); }
#side-panel { padding: .9rem; min-height: 8rem; }

.tilepanel .coords { color: var(--ink-faint); font-weight: 400; font-size: .9rem; }
.facts { display: grid; grid-template-columns: 1fr auto; gap: .25rem .75rem; margin: .75rem 0; }
.facts dt { color: var(--ink-dim); font-size: .85rem; }
.facts dd { margin: 0; font-variant-numeric: tabular-nums; }

.owner.s1 { color: var(--s1); } .owner.s2 { color: var(--s2); }
.owner.s3 { color: var(--s3); } .owner.s4 { color: var(--s4); }

.buildingcard, .thcard {
  display: flex; align-items: center; gap: .6rem; margin: .75rem 0;
  padding: .6rem .7rem; background: var(--bg-sunken);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.buildingcard .glyph, .thcard .glyph { font-size: 1.5rem; }
.buildingcard .name, .thcard .name { font-weight: 600; }
.buildingcard .level, .thcard .hp { margin-left: auto; color: var(--ink-dim); font-size: .85rem; }
.thcard .level { color: var(--ink-dim); font-weight: 400; font-size: .85rem; }

/* --- actions in the panel ------------------------------------------------- */

.panel h4 {
  margin: 1.1rem 0 .4rem; font-size: .8rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-dim);
}
.note { color: var(--ink-faint); font-weight: 400; font-size: .85em; }
.why  { display: block; margin-top: .3rem; color: var(--ink-faint); font-size: .78rem; }
.short { color: var(--danger); }

button.danger { border-color: var(--danger); color: #f0c9bf; }
button.danger:hover { background: color-mix(in srgb, var(--danger) 22%, transparent); }

.action { margin: .6rem 0; }
.action button { width: 100%; }

.cost {
  display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem;
  font-size: .8rem; font-variant-numeric: tabular-nums;
}
.costpart {
  padding: .05rem .4rem; border-radius: 999px;
  background: var(--bg-sunken); border: 1px solid var(--line); color: var(--ink-dim);
}
.costpart.short { border-color: var(--danger); color: #f0c9bf; }

.buildlist { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.buildopt form { margin: 0; }
.buildopt button {
  display: grid; grid-template-columns: 1.6rem 1fr auto; align-items: center;
  gap: .5rem; width: 100%; text-align: left;
}
.buildopt .glyph { font-size: 1.15rem; }
.buildopt .name { font-weight: 600; }
.buildopt .kind {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-faint);
}
.buildopt.blocked { opacity: .7; }

.firststeps {
  margin: .8rem 0; padding: .7rem .8rem; border-radius: var(--radius);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
}
.firststeps ol { margin: .4rem 0 0; padding-left: 1.2rem; font-size: .85rem; color: var(--ink-dim); }
.firststeps li { margin-bottom: .2rem; }

/* --- itemised sums (defence, economy) ------------------------------------- */

.sums { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.sums th, .sums td { padding: .25rem 0; text-align: left; font-weight: 400; }
.sums th { color: var(--ink-dim); }
.sums td { text-align: right; }
.sums td .cost { justify-content: flex-end; }
.sums tfoot th, .sums tfoot td {
  border-top: 1px solid var(--line); padding-top: .4rem;
  font-weight: 700; color: var(--ink);
}

.trainform label { margin-top: 0; }
.trainform input { margin-bottom: .5rem; }

/* --- team panel ----------------------------------------------------------- */

.teamlist { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.member {
  padding: .5rem .6rem; border-radius: var(--radius);
  background: var(--bg-sunken); border: 1px solid var(--line); border-left-width: 3px;
}
.member.s1 { border-left-color: var(--s1); } .member.s2 { border-left-color: var(--s2); }
.member.s3 { border-left-color: var(--s3); } .member.s4 { border-left-color: var(--s4); }
.member.dead { opacity: .5; }
.member-head { display: flex; align-items: baseline; gap: .4rem; }
.member-head .state { margin-left: auto; color: var(--ink-faint); font-size: .78rem; }
.member-stats {
  display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .3rem;
  font-size: .8rem; color: var(--ink-dim); font-variant-numeric: tabular-nums;
}
.member-stats .def { margin-left: auto; color: var(--ink); }

.giftgrid {
  display: grid; grid-template-columns: auto 1fr; gap: .3rem .6rem;
  align-items: center; margin: .5rem 0;
}
.giftgrid label { margin: 0; }

/* --- ready toggle --------------------------------------------------------- */

.readyform { margin: 0; }
button.ready {
  font-weight: 700; letter-spacing: .06em; padding: .4rem 1.1rem;
  border-color: var(--ink-faint); color: var(--ink-dim);
}
button.ready.on {
  background: var(--ok); border-color: var(--ok); color: #0f1a0c;
}

.paneltabs .tab:not(:disabled) { cursor: pointer; color: var(--ink-dim); }
.paneltabs .tab:not(:disabled):hover { background: var(--bg-raised); color: var(--ink); }

.panel-note { color: var(--ink-dim); }
.panel-note .button { margin-top: .6rem; }

/* --- morning report ------------------------------------------------------- */

.banner {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  margin-top: 1rem; padding: .6rem .9rem; border-radius: var(--radius);
  background: var(--bg-raised); border: 1px solid var(--accent);
}
.banner-icon { font-size: 1.2rem; color: var(--accent); }
.banner-text { flex: 1; min-width: 12rem; }

.reportpage { max-width: 46rem; margin: 0 auto; }
.report { display: grid; gap: 1.2rem; }
.report-head h2 { font-size: 1.35rem; text-transform: none; letter-spacing: 0; color: var(--ink); }
.chronicle { color: var(--ink-dim); font-style: italic; }

.verdict { font-weight: 700; font-size: 1.1rem; }
.verdict.won  { color: var(--ok); }
.verdict.lost { color: var(--danger); }

.strike {
  padding: .9rem 1rem; border-radius: var(--radius);
  background: var(--bg-raised); border: 1px solid var(--line); border-left-width: 4px;
}
.strike.held     { border-left-color: var(--ok); }
.strike.breached { border-left-color: var(--danger); }
.strike h3 { font-size: 1rem; }

.bars { display: grid; gap: .35rem; margin: .6rem 0 .9rem; }
.bar {
  position: relative; height: 1.6rem; border-radius: 3px;
  background: var(--bg-sunken); overflow: hidden;
}
.bar .fill { position: absolute; inset: 0 auto 0 0; }
.bar.attack  .fill { background: color-mix(in srgb, var(--danger) 70%, transparent); }
.bar.defense .fill { background: color-mix(in srgb, var(--ok) 65%, transparent); }
.bar .label {
  position: relative; display: block; padding: .2rem .5rem;
  font-size: .8rem; font-variant-numeric: tabular-nums; color: var(--ink);
}

.losses { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .2rem; font-size: .9rem; }
.losses .razed { color: var(--danger); font-weight: 600; }

.destroyed-head { margin: .7rem 0 .2rem; color: var(--ink-dim); font-size: .85rem; }
.destroyed { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.destroyed li {
  padding: .15rem .5rem; border-radius: 999px; font-size: .8rem;
  background: var(--bg-sunken); border: 1px solid var(--line); color: var(--ink-dim);
}

.dawntable { width: 100%; border-collapse: collapse; font-size: .88rem; font-variant-numeric: tabular-nums; }
.dawntable th, .dawntable td { padding: .3rem .4rem; text-align: left; }
.dawntable thead th { color: var(--ink-faint); font-weight: 400; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--line); }
.dawntable tbody th { font-weight: 600; }
.dawntable tbody th.s1 { color: var(--s1); } .dawntable tbody th.s2 { color: var(--s2); }
.dawntable tbody th.s3 { color: var(--s3); } .dawntable tbody th.s4 { color: var(--s4); }

.omen {
  padding: .8rem 1rem; border-radius: var(--radius);
  background: color-mix(in srgb, #6b2d7a 16%, transparent);
  border: 1px solid color-mix(in srgb, #b08bbd 40%, transparent);
}
.omen-text { margin: 0; color: #d9bce2; font-style: italic; }

/* report as an overlay over the board */
.overlay {
  position: fixed; inset: 0; z-index: 20; overflow: auto;
  background: rgba(6, 5, 4, .78); padding: 4vh 1rem;
}
.overlay-card {
  position: relative; max-width: 46rem; margin: 0 auto; padding: 1.5rem;
  background: var(--bg); border: 1px solid var(--line); border-radius: 10px;
}
.overlay-close {
  position: absolute; top: .6rem; right: .6rem;
  padding: .2rem .55rem; line-height: 1;
}
.overlay-actions { margin-top: 1.2rem; }

/* --- end screen ----------------------------------------------------------- */

.endcard { width: min(34rem, 100%); text-align: center; }
.endcard.won  { border-color: color-mix(in srgb, var(--ok) 55%, var(--line)); }
.endcard.lost { border-color: color-mix(in srgb, var(--danger) 55%, var(--line)); }
.endcard h1 { font-size: 1.8rem; }
.endcard .playerlist { justify-items: center; margin: 1rem 0; }
.endcard .button { margin-top: .4rem; }