/* Da Table — landing page (contract 2026-08-30 item 2).
   Restyled 2026-09-13 ("this landing page ... impress my friends"): the
   real table (webtable/hero.jpg, a blurred render; hero-sharp.jpg the
   crisp crop) sits behind everything, one warm accent (the orange the
   table's Command Center / Start a new game buttons already wear), dark
   panels, system fonts only — the site runs behind a tunnel and makes
   zero third-party requests. Element ids, class hooks and copy are the
   ones landing.js and the tests pin; only the chrome changed.
   style.css itself is not linked because its html/body rules
   (overflow: hidden, fixed chrome) belong to the board, not a page. */

:root {
  --bg: #0b0d10;
  --panel: rgba(15, 17, 21, 0.82);
  --panel-solid: #14171c;
  --panel-edge: rgba(255, 255, 255, 0.09);
  --panel-edge-hi: rgba(255, 255, 255, 0.16);
  --well: rgba(255, 255, 255, 0.035);
  --ink: #ece7dd;
  --dim: #9c988f;
  --blue: #6b9be0;
  --red: #d8655e;
  /* the one warm accent: the table's .hot button (style.css #cmdCenterBtn.hot,
     landing .bigBtn.hot): #e08a3c edge on a #b8651b fill */
  --amber: #e08a3c;
  --amber-deep: #b8651b;
  --amber-glow: rgba(224, 138, 60, 0.28);
  --green: #7fb069;
  --danger: #d05a4e;
  --display: Impact, "Haettenschweiler", "Arial Narrow Bold", "Segoe UI Black",
             "Arial Black", sans-serif;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; min-height: 100%;
  color: var(--ink); line-height: 1.45;
}
/* the page colour lives on html only: an opaque body would paint OVER
   the negative-z-index #backdrop once it has content */
html { background: var(--bg); scrollbar-gutter: stable; }
body { background: transparent; }

button {
  background: rgba(255, 255, 255, 0.06); color: var(--ink);
  border: 1px solid var(--panel-edge-hi);
  border-radius: 6px; padding: 6px 12px; cursor: pointer; font: inherit;
  font-size: 13px; font-weight: 600; letter-spacing: 0.01em;
  transition: background 0.12s, border-color 0.12s, transform 0.08s;
}
button:hover { background: rgba(255, 255, 255, 0.11); border-color: rgba(255, 255, 255, 0.28); }
button:active { transform: translateY(1px); }
button:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
input, textarea, select {
  background: rgba(0, 0, 0, 0.35); color: var(--ink);
  border: 1px solid var(--panel-edge-hi);
  border-radius: 6px; padding: 7px 10px; font: inherit; font-size: 14px;
}
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--amber);
  box-shadow: 0 0 0 3px var(--amber-glow);
}
input::placeholder, textarea::placeholder { color: #6f6c66; }
code { background: rgba(0, 0, 0, 0.4); padding: 1px 6px; border-radius: 4px; }
[hidden] { display: none !important; }

/* ---------- the table behind everything ---------- */
/* one fixed layer: the blurred render always, the crisp render on top of
   it while the login is up (the felt on the right is where the copy sits,
   so the board on the left stays in plain view). Logged in, the layer
   dims so the panels read; no script touches it — :has() on the two
   surfaces landing.js already toggles. */
#backdrop {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: var(--bg) url("hero.jpg") center / cover no-repeat;
  transition: opacity 0.6s ease;
}
#backdrop::before {
  content: ""; position: absolute; inset: 0;
  background: url("hero-sharp.jpg") center / cover no-repeat;
  opacity: 0; transition: opacity 0.6s ease;
}
#backdrop::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 40%, rgba(6, 7, 9, 0.75) 100%),
    linear-gradient(180deg, rgba(6, 7, 9, 0.35), transparent 30%, transparent 70%, rgba(6, 7, 9, 0.7));
}
body:has(#loginOverlay:not([hidden])) #backdrop::before { opacity: 1; }
body:has(#wrap:not([hidden])) #backdrop::after {
  background:
    radial-gradient(120% 90% at 50% 30%, rgba(6, 7, 9, 0.3) 30%, rgba(6, 7, 9, 0.75) 100%),
    linear-gradient(180deg, rgba(6, 7, 9, 0.55), rgba(6, 7, 9, 0.3) 40%, rgba(6, 7, 9, 0.7));
}

/* ---------- page column ---------- */
/* the whole screen, not a centred column (Matt 2026-09-12: "we need to
   use the whole screen in this website") */
#wrap {
  padding: 0 clamp(16px, 3vw, 48px) 72px;
  display: flex; flex-direction: column; gap: 22px;
  min-height: 100vh;
}

/* top strip: brand small on the left, who-you-are on the right; the
   page title (Pick a fight / Bring your army / Your games) under it */
header {
  display: grid; gap: 4px 16px; align-items: center;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "brand who" "title title";
  padding: 18px 0 14px;
  border-bottom: 1px solid var(--panel-edge);
  margin: 0 calc(-1 * clamp(16px, 3vw, 48px)) 4px;
  padding-left: clamp(16px, 3vw, 48px); padding-right: clamp(16px, 3vw, 48px);
  background: linear-gradient(180deg, rgba(6, 7, 9, 0.85), rgba(6, 7, 9, 0.45));
  position: sticky; top: 0; z-index: 5;
  backdrop-filter: blur(6px);
}
.eyebrow {
  grid-area: brand;
  font-family: var(--display); font-size: 22px; font-weight: 400;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--amber);
  line-height: 1;
}
h1 {
  grid-area: title;
  font-family: var(--display); font-size: clamp(30px, 4vw, 44px);
  font-weight: 400; margin: 6px 0 0; letter-spacing: 0.04em;
  text-transform: uppercase; line-height: 1; color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6);
}
.who { grid-area: who; display: flex; gap: 14px; align-items: center; }
.chip {
  display: inline-flex; gap: 7px; align-items: center;
  background: rgba(0, 0, 0, 0.45); border: 1px solid var(--panel-edge-hi);
  border-radius: 999px; padding: 5px 13px; font-size: 13px; color: var(--ink);
}
.chip #connDot { color: var(--green); font-size: 11px; }
.chip.off #connDot { color: var(--dim); }
.chip.err #connDot { color: var(--danger); }
#logoutLink { font-size: 13px; color: var(--dim); }

/* ---------- cards / doors ---------- */
.card, .door {
  background: var(--panel); border: 1px solid var(--panel-edge);
  border-radius: 10px; padding: 18px 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(10px);
}
.door h2 {
  margin: 0 0 4px; font-family: var(--display); font-size: 22px;
  letter-spacing: 0.06em; text-transform: uppercase; font-weight: 400;
  color: #fff; line-height: 1.1;
}
.door h2::before {
  content: ""; display: inline-block; width: 10px; height: 10px;
  background: var(--amber); margin-right: 10px; vertical-align: 2px;
  transform: rotate(45deg);
}
.doorNote { margin: 0 0 14px; font-size: 14px; color: var(--dim); }

/* resume: the one amber-edged thing on the page, same accent the table
   gives the moments that want your eyes (gate cards, confirm pop). It
   wears the crisp render: the card IS the table, one click away. */
.resume {
  display: block; text-decoration: none; color: var(--ink);
  border-color: var(--amber); cursor: pointer; position: relative;
  overflow: hidden; min-height: 132px;
  background: linear-gradient(90deg, rgba(10, 12, 15, 0.95) 30%, rgba(10, 12, 15, 0.35)),
              url("hero-sharp.jpg") right center / cover no-repeat;
  box-shadow: 0 0 0 3px var(--amber-glow), 0 10px 30px rgba(0, 0, 0, 0.45);
}
.resume:hover { box-shadow: 0 0 0 4px var(--amber-glow), 0 12px 34px rgba(0, 0, 0, 0.5); }
.resumeTitle {
  font-family: var(--display); font-size: 26px; letter-spacing: 0.05em;
  text-transform: uppercase; color: #fff;
}
.resumeTitle::after { content: "  →"; color: var(--amber); }
.resumeSub { font-size: 14px; color: var(--amber); margin-top: 4px; font-weight: 600; }

/* the two "doors" view: your games beside the friend door, the bots
   across the full width under them; one column under 1000px. No column
   is ever left empty (HANDOFF's known gap, fixed here). */
#doorsView {
  display: grid; gap: 18px;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "deck" "friend" "bots";
}
.deck { grid-area: deck; display: flex; flex-direction: column; gap: 14px; }
.door.friend { grid-area: friend; }
.door.bots { grid-area: bots; }
@media (min-width: 1000px) {
  #doorsView {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "deck friend" "bots bots";
    align-items: stretch;
  }
}
/* "Your games" is a door of its own on this view: a big plain link
   styled as a card (landing.js opens the games screen from it) */
#gamesLink {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; text-decoration: none; color: #fff; flex: 1 1 auto;
  padding: 18px 20px; border-radius: 10px; min-height: 84px;
  font-family: var(--display); font-size: 24px; letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--panel); border: 1px solid var(--panel-edge);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); backdrop-filter: blur(10px);
  transition: border-color 0.12s, background 0.12s;
}
#gamesLink::after {
  content: "start a new game or pick up a saved one  →";
  font-family: "Segoe UI", system-ui, sans-serif; font-size: 13px;
  letter-spacing: 0; text-transform: none; color: var(--dim); text-align: right;
}
#gamesLink:hover { border-color: var(--amber); background: rgba(20, 22, 27, 0.92); color: #fff; }
#gamesLink:hover::after { color: var(--amber); }

/* ---------- opponent gallery ---------- */
.gallery {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
}
.galleryEmpty { color: var(--dim); font-size: 14px; grid-column: 1 / -1; }
.oppCard {
  border: 1px solid var(--panel-edge); border-radius: 8px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 8px;
  background: var(--well); min-width: 0;
  transition: border-color 0.12s, background 0.12s;
}
.oppCard:hover { border-color: var(--panel-edge-hi); background: rgba(255, 255, 255, 0.05); }
/* landing.js builds head(name, faction, button) + persona + details; the
   head dissolves into the card's column so the order reads name, faction,
   persona, play button, list — the button under the words it sells */
.oppHead { display: contents; }
.oppName {
  order: 1; font-family: var(--display); font-size: 24px; letter-spacing: 0.04em;
  text-transform: uppercase; color: #fff; line-height: 1;
}
.oppFaction {
  order: 2; font-size: 12px; color: var(--dim); text-transform: uppercase;
  letter-spacing: 0.08em; margin-top: -4px;
}
.oppPersona { order: 3; font-size: 14px; margin: 0; color: var(--ink); flex: 1 1 auto; }
.oppHead button {
  order: 4; margin-top: 4px; padding: 9px 14px; width: 100%;
  border-color: var(--amber); color: #fff; font-size: 14px;
  background: rgba(224, 138, 60, 0.12);
}
.oppHead button:hover { background: var(--amber-deep); border-color: var(--amber); }
.oppCard details { order: 5; font-size: 13px; }
.oppCard summary { cursor: pointer; color: var(--dim); }
.oppCard summary:hover { color: var(--ink); }
.oppCard pre {
  margin: 6px 0 0; padding: 8px 10px; background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--panel-edge); border-radius: 6px;
  font: 12px/1.5 Consolas, monospace; white-space: pre-wrap;
  overflow-x: auto; max-height: 320px; overflow-y: auto;
}

/* ---------- friend door: the two seats ---------- */
#seatList { display: flex; flex-direction: column; gap: 8px; }
.seatRow {
  display: flex; gap: 10px; align-items: center; font-size: 14px;
  border: 1px solid var(--panel-edge); border-radius: 8px;
  padding: 12px 14px; background: var(--well);
  border-left-width: 4px;
}
.seatRow.blue { border-left-color: var(--blue); }
.seatRow.red { border-left-color: var(--red); }
.seatRow .pdot { color: var(--dim); font-size: 11px; }
.seatRow.here .pdot { color: var(--green); }
.seatRow .slab {
  font-family: var(--display); font-size: 15px; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--dim); width: 48px;
}
.seatRow.blue .slab { color: var(--blue); }
.seatRow.red .slab { color: var(--red); }
.seatRow .pname { font-weight: 600; color: var(--ink); }
.seatRow.blue .pname { color: #fff; }
.seatRow.red .pname { color: #fff; }

/* ---------- army screen (match contract item E) ---------- */

/* the four numbered steps ("make the screen explain itself", Matt
   2026-09-12): one column, a big number per step, one line of help */
.backLink { display: inline-block; margin-bottom: 8px; }
/* a fresh game's confirmation (game.new lands back on the army screen):
   a banner in the page's highlight colour, not a dim aside */
.freshNote {
  margin: 0 0 14px; padding: 12px 14px; font-size: 15px;
  background: rgba(224, 138, 60, 0.12); border: 1px solid var(--amber);
  border-left-width: 5px; border-radius: 8px; color: var(--ink);
}
.freshNote:empty { display: none; }
.sideNote { margin: 0 0 16px; font-size: 14px; color: var(--dim); }
.sideNote.blue { color: var(--blue); }
.sideNote.red { color: var(--red); }
.steps { list-style: none; margin: 0; padding: 0;
         display: flex; flex-direction: column; gap: 0; }
.step {
  display: flex; flex-direction: column; gap: 10px;
  padding: 20px 0 22px; border-top: 1px solid var(--panel-edge);
}
.step:first-child { border-top: 0; padding-top: 4px; }
.stepHead { display: flex; align-items: center; gap: 12px;
            font-family: var(--display); font-size: 22px; font-weight: 400;
            letter-spacing: 0.05em; text-transform: uppercase; color: #fff; }
.stepNum {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
  background: rgba(224, 138, 60, 0.12); border: 1px solid var(--amber);
  color: var(--amber); font-size: 17px; letter-spacing: 0;
}
.stepHint { margin: 0; font-size: 13.5px; color: var(--dim); max-width: 72ch; }
#armyName { max-width: 460px; font-size: 16px; padding: 9px 12px; }
.emptyRows { font-size: 13px; }
.addRow { align-self: flex-start; }
.bigBtn {
  align-self: flex-start; font-size: 17px; font-weight: 700;
  padding: 13px 30px; border-radius: 8px; letter-spacing: 0.01em;
  background: #2f6b3a; border-color: var(--green); color: #fff;
}
.bigBtn:hover { background: #378045; }
.bigBtn:disabled {
  background: rgba(255, 255, 255, 0.05); border-color: var(--panel-edge);
  color: var(--dim); cursor: not-allowed; transform: none;
}
/* the second big button (save and continue): blue, so the two don't read
   as one action; the "hot" one (start a new game) is the page's one
   highlighted button (Matt 2026-09-13: "a highlighted button") */
.bigBtn.alt { background: #2b4a6f; border-color: #4a7cc0; }
.bigBtn.alt:hover { background: #33587f; }
.bigBtn.hot {
  background: #b8651b; border-color: #e08a3c;
  box-shadow: 0 0 0 3px rgba(224, 138, 60, .25);
}
.bigBtn.hot:hover { background: #c9722a; }
.placeWhy { font-size: 13px; color: var(--dim); min-height: 18px; }
.placeWhy.bad { color: var(--danger); }
#armySkip { align-self: flex-start; }
.seatRow .youTag {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--green);
  border: 1px solid var(--green); border-radius: 999px; padding: 1px 8px;
}
.seatNote { margin: 12px 0 0; }

#armyPaste {
  width: 100%; resize: vertical; margin-bottom: 10px;
  background: rgba(0, 0, 0, 0.4); color: var(--ink); border: 1px solid var(--panel-edge-hi);
  border-radius: 6px; padding: 10px 12px;
  font: 12.5px/1.5 Consolas, monospace;
}

#armyScreen .row { display: flex; gap: 8px; align-items: center; }
#armyScreen .quiet { color: var(--dim); font-size: 13px; }
a.quiet { cursor: pointer; text-decoration: underline; color: var(--dim); }
a.quiet:hover { color: var(--ink); }

.armyTableWrap { overflow-x: auto; margin-top: 10px; }
/* rows are cards in a grid that fills the width: three across on a wide
   monitor, two on a laptop, one on a phone */
#armyTable { width: 100%; font-size: 14px; }
#armyTable { display: block; }
#armyTable thead { display: none; }
#armyTable #armyRows {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr));
}
#armyRows tr {
  display: grid; align-items: center; gap: 12px; padding: 10px;
  grid-template-columns: 160px minmax(0, 1fr) 60px 32px;
  background: var(--well); border: 1px solid var(--panel-edge); border-radius: 8px;
}
#armyTable td { padding: 0; min-width: 0; }
#armyTable .cname input { width: 100%; min-width: 0; }
#armyTable .cname .pts { color: var(--dim); font-size: 11px; margin-left: 6px; }
#armyTable .cnum { width: 52px; }
#armyTable .cnum input { width: 52px; }
#armyTable tr.unparsed .cname input { border-color: var(--amber); }

/* ---------- sculpt thumbnails ("render what it looks like") ----------
   Fixed box from the first paint — loading, stand-in and failure all
   occupy exactly the thumbnail's footprint, so nothing jumps as meshes
   stream in. The shimmer is the loading state; blank never is. */
.thumbBtn {
  position: relative; display: block; padding: 0; overflow: hidden;
  width: 160px; height: 160px; border-radius: 6px;
  background: radial-gradient(circle at 50% 40%, #2a3039, #171a20 75%);
  border: 1px solid var(--panel-edge);
}
.thumbBtn:hover, .thumbBtn:focus-visible {
  border-color: var(--amber); outline: none; background:
    radial-gradient(circle at 50% 40%, #323946, #1a1e25 75%);
}
.thumbBtn canvas, .pickCard canvas {
  display: block; width: 100%; height: 100%;
}
.thumbBtn .thumbHint {
  position: absolute; inset: auto 0 0 0; font-size: 12px; line-height: 22px;
  background: rgba(10, 11, 13, 0.7); color: var(--ink); opacity: 0;
  transition: opacity 0.12s; pointer-events: none;
}
.thumbBtn:hover .thumbHint, .thumbBtn:focus-visible .thumbHint { opacity: 1; }
.loading > canvas { opacity: 0; }
.loading::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 20%,
    rgba(255, 255, 255, 0.07) 45%, transparent 70%);
  background-size: 220% 100%; animation: shimmer 1.1s linear infinite;
}
@keyframes shimmer { from { background-position: 120% 0; }
                     to { background-position: -120% 0; } }
@media (prefers-reduced-motion: reduce) { .loading::after { animation: none; } }

.pickLine {
  display: flex; gap: 8px; align-items: baseline; margin-top: 4px;
  font-size: 12px; min-height: 18px; flex-wrap: wrap;
}
.pickLabel { color: var(--ink); font-weight: 600; }
.pickSrc { color: var(--dim); }
.pickSrc.good { color: var(--green); }
.pickSrc.warn { color: var(--amber); }
.pickSrc.bad { color: var(--danger); }
.pickLine .change {
  padding: 0 8px; font-size: 12px; line-height: 18px; margin-left: auto;
}
/* the players' votes: a check / an X beside swap, the counts under the
   picture (min-height: the row doesn't jump when the tally arrives) */
.vote { padding: 0 8px; font-size: 12px; line-height: 18px; color: var(--dim); }
.vote.yes.on { color: var(--green); border-color: var(--green); }
.vote.no.on { color: var(--danger); border-color: var(--danger); }
.thumbCol { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.voteCount {
  font-size: 11px; color: var(--dim); text-align: center;
  max-width: 160px; min-height: 1.3em;
}
.groupRow .voteCount { max-width: 120px; }
.voteCount.voteRefused { color: var(--danger); }

/* ---------- the picker ---------- */
#pickOverlay {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(6, 7, 9, 0.78); backdrop-filter: blur(3px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 5vh 12px; overflow-y: auto;
}
.pickBox {
  background: var(--panel-solid); border: 1px solid var(--panel-edge-hi);
  border-radius: 10px; padding: 16px; width: 100%; max-width: 1600px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.pickHead { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; }
.pickTitle { font-size: 17px; font-weight: 600; }
.pickSub { font-size: 12px; color: var(--dim); margin-top: 2px; }
#pickClose { margin-left: auto; font-size: 16px; padding: 2px 10px; }
.pickGrid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.pickSection {
  grid-column: 1 / -1; font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--dim); margin-top: 6px;
}
.pickCard {
  position: relative; display: flex; flex-direction: column; gap: 6px;
  padding: 6px; text-align: left; border-radius: 6px; min-width: 0;
  background: var(--well); border: 1px solid var(--panel-edge);
}
.pickCard:hover, .pickCard:focus-visible {
  border-color: var(--ink); outline: none; background: rgba(255, 255, 255, 0.07);
}
.pickCard.current { border-color: var(--amber); box-shadow: 0 0 0 1px var(--amber); }
.pickCard .pthumb {
  position: relative; aspect-ratio: 1 / 1; width: 100%; max-width: 100%;
  border-radius: 4px; overflow: hidden;
  background: radial-gradient(circle at 50% 40%, #2a3039, #14171c 75%);
}
.pickCard .plabel {
  font-size: 12px; line-height: 1.3; overflow-wrap: anywhere;
}
.pickCard .pnote { font-size: 11px; color: var(--dim); }
.pickCard .pnote.bad { color: var(--danger); }
.pickCard .pvotes { font-size: 11px; color: var(--dim); }
.badges { position: absolute; top: 10px; left: 10px; display: flex; gap: 4px; }
.badge {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 1px 6px; border-radius: 8px;
  background: rgba(10, 11, 13, 0.8); border: 1px solid var(--panel-edge);
}
.badge.auto { color: var(--green); border-color: var(--green); }
.badge.now { color: var(--amber); border-color: var(--amber); }

@media (max-width: 480px) {
  #wrap { padding-left: 12px; padding-right: 12px; }
  .door { padding: 12px; }
  .armyMeta { flex-wrap: wrap; }
  #armyRows tr {
    grid-template-columns: 88px minmax(0, 1fr) 52px 28px; gap: 8px; padding: 8px;
  }
  .thumbBtn { width: 88px; height: 88px; }
  .pickGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ---------- a unit with several kinds of model (Boyz + their Nob) ---------- */
#armyRows tr.multi { grid-template-columns: minmax(0, 1fr); }
.unitHead {
  display: grid; gap: 8px; align-items: center;
  grid-template-columns: minmax(0, 1fr) auto 32px;
}
.unitHead .unitSize { color: var(--dim); font-size: 12px; white-space: nowrap; }
.groupRow {
  display: grid; gap: 10px; align-items: center; margin-top: 8px;
  grid-template-columns: 120px minmax(0, 1fr) 60px;
  padding-top: 8px; border-top: 1px solid var(--panel-edge);
}
.groupRow .thumbBtn { width: 120px; height: 120px; }
.groupRow .modelName { font-weight: 600; font-size: 13px; }
.groupRow .cnum input { width: 52px; }
.gear { color: var(--ink); font-size: 12px; margin-top: 3px; opacity: 0.85; }
.gearWarn { color: var(--amber); font-size: 12px; margin-top: 3px; }
.groupNote { color: var(--dim); font-size: 11px; margin-top: 3px; }
@media (max-width: 480px) {
  .groupRow { grid-template-columns: 88px minmax(0, 1fr) 52px; gap: 8px; }
  .groupRow .thumbBtn { width: 88px; height: 88px; }
  .voteCount, .groupRow .voteCount { max-width: 88px; }
}
#armyTable .cdel { width: 28px; }
#armyTable .cdel .del { padding: 2px 7px; color: var(--dim); }
#armyTable .cdel .del:hover { color: var(--danger); }

.seatRow .seatArmy {
  margin-left: auto; flex: 0 0 auto; border-color: var(--green); color: #fff;
  background: rgba(127, 176, 105, 0.12);
}
.seatRow .seatArmy:hover { background: #2f6b3a; }

/* ---------- "Your games" (games-save-resume, 2026-09-13) ----------
   two columns on a wide screen: the new-game form on the left, the
   saved games on the right; one column under 1000px */
#gamesScreen { display: grid; gap: 4px 28px; grid-template-columns: minmax(0, 1fr); }
#gamesScreen > * { grid-column: 1; }
@media (min-width: 1000px) {
  #gamesScreen { grid-template-columns: minmax(320px, 440px) minmax(0, 1fr); }
  #gamesScreen > #gamesBack, #gamesScreen > #gamesSaveNote { grid-column: 1 / -1; }
  #gamesScreen > .newGame { grid-column: 1; grid-row: span 4; align-self: start; }
  #gamesScreen > h2, #gamesScreen > #gamesList,
  #gamesScreen > #gamesEmpty, #gamesScreen > #gamesWatchNote { grid-column: 2; }
}
.newGame {
  display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px;
  padding: 16px 18px; background: var(--well);
  border: 1px solid var(--panel-edge-hi); border-radius: 10px;
}
.newGame .stepHead { font-size: 22px; }
.newGame label { display: block; font-size: 13px; color: var(--dim); }
.newGame label input, .newGame label select {
  display: block; margin-top: 4px; width: 100%; max-width: 420px;
  font-size: 15px; padding: 8px 11px;
}
.newGame select {
  background: rgba(0, 0, 0, 0.35); color: var(--ink); border: 1px solid var(--panel-edge-hi);
  border-radius: 6px; font: inherit;
}
.newGame select option { background: var(--panel-solid); color: var(--ink); }
.newGame .bigBtn { margin-top: 4px; }
#gamesList { display: flex; flex-direction: column; gap: 10px; }
.gameCard {
  display: grid; gap: 4px 12px; align-items: center;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 14px 16px; background: var(--well);
  border: 1px solid var(--panel-edge); border-radius: 10px;
}
.gameCard.current { border-color: var(--amber); box-shadow: 0 0 0 2px var(--amber-glow); }
.gameTitle { font-size: 16px; font-weight: 600; overflow-wrap: anywhere; color: #fff; }
.gameNow {
  grid-column: 1; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--amber);
}
/* the current game's card also says whether YOUR army is on the table
   yet (a player who saved without placing must not expect it there) */
.gameNote { grid-column: 1; font-size: 13px; color: var(--dim); }
.gameNote.missing { color: var(--amber); }
.gameCard .resume {
  grid-column: 2; grid-row: 1 / span 3; border-color: var(--green); color: #fff;
  background: rgba(127, 176, 105, 0.12); padding: 9px 18px; font-size: 14px;
  min-height: 0; box-shadow: none;
}
.gameCard .resume:hover { background: #2f6b3a; box-shadow: none; }
.gameCard .resume:disabled { border-color: var(--panel-edge); color: var(--dim); cursor: not-allowed; background: transparent; }
.gameCard .why { grid-column: 1 / -1; min-height: 0; }
.gameCard .why:empty { display: none; }
#newGameOppPick span { display: block; margin-top: 4px; }
#gamesScreen h2 { margin-top: 6px; }
#gamesSaveNote { color: var(--green); font-size: 13px; margin: 0 0 8px; }
#gamesSaveNote:empty { display: none; }
@media (max-width: 480px) {
  .gameCard { grid-template-columns: minmax(0, 1fr); }
  .gameCard .resume { grid-column: 1; grid-row: auto; justify-self: start; }
  .gameNow { grid-column: 1; }
}

/* ---------- overlays (index.html idiom, style.css parity) ---------- */
#confirmOverlay .row, #leaveOverlay .row {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}
#confirmOverlay .bigBtn, #leaveOverlay .bigBtn { align-self: auto; }
#loginOverlay, #deadOverlay, #confirmOverlay, #leaveOverlay {
  position: fixed; inset: 0; z-index: 55;
  background: rgba(6, 7, 9, 0.72); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
#deadOverlay { z-index: 60; }   /* a dead server outranks a login card */
.deadBox {
  background: var(--panel-solid); border: 1px solid var(--panel-edge-hi);
  border-top: 3px solid var(--amber);
  border-radius: 10px; padding: 26px 36px 24px; text-align: center;
  max-width: 520px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}
.deadTitle {
  font-family: var(--display); font-size: 26px; letter-spacing: 0.04em;
  text-transform: uppercase; margin-bottom: 8px; color: #fff;
}
.deadBody { color: var(--dim); margin-bottom: 16px; font-size: 15px; }
.deadRetry { color: var(--amber); font-size: 13px; }
#confirmOverlay button:not(.bigBtn), #leaveOverlay button:not(.bigBtn) {
  font-size: 15px; padding: 12px 22px; border-radius: 8px;
}

/* ---------- the login: the whole viewport is the hero ---------- */
/* no card in a void: the crisp render fills the screen, the copy sits on
   the felt to the right of the board, and the code box is one row */
#loginOverlay {
  background: linear-gradient(90deg, rgba(6, 7, 9, 0.15) 30%, rgba(6, 7, 9, 0.72) 62%, rgba(6, 7, 9, 0.85));
  backdrop-filter: none;
  justify-content: flex-end; align-items: center;
  padding: 24px clamp(24px, 8vw, 140px) 24px 24px;
}
.loginHero {
  width: min(100%, 560px); display: flex; flex-direction: column; gap: 14px;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7);
}
.loginBrand {
  font-size: 12px; font-weight: 700; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--amber);
}
.loginTitle {
  margin: 0; font-family: var(--display); font-weight: 400;
  font-size: clamp(64px, 9vw, 120px); line-height: 0.92; letter-spacing: 0.03em;
  text-transform: uppercase; color: #fff;
}
.loginTitle::after {
  content: ""; display: block; width: 72px; height: 5px; margin-top: 18px;
  background: var(--amber);
}
.loginLine {
  margin: 0; font-size: clamp(16px, 1.5vw, 20px); color: var(--ink);
  max-width: 34ch; line-height: 1.4;
}
#loginOverlay .row {
  display: flex; gap: 10px; margin-top: 8px; text-shadow: none;
}
#loginCode {
  flex: 1 1 auto; min-width: 0; font-size: 18px; padding: 13px 16px;
  background: rgba(0, 0, 0, 0.55); border-color: rgba(255, 255, 255, 0.22);
  border-radius: 8px; letter-spacing: 0.04em;
}
#loginGo {
  flex: 0 0 auto; font-size: 17px; font-weight: 700; padding: 13px 26px;
  border-radius: 8px; background: var(--amber-deep); border-color: var(--amber);
  color: #fff; box-shadow: 0 0 0 3px var(--amber-glow);
}
#loginGo:hover { background: #c9722a; }
#loginNote { font-size: 14px; color: var(--amber); min-height: 1.3em; }
#loginNote:empty { display: none; }
@media (max-width: 999px) {
  #loginOverlay {
    background: linear-gradient(180deg, rgba(6, 7, 9, 0.35), rgba(6, 7, 9, 0.85) 60%);
    justify-content: center; align-items: flex-end; padding: 24px;
  }
  .loginHero { width: min(100%, 640px); }
}