/* Ten-foot UI: dark ground, few elements, nothing smaller than it needs to be.
   Sizes are in vw/vh on purpose — the same file has to read on a 1080p TV,
   a 4K TV, and a laptop screen during development. */

:root {
  --bg: #0E1014;
  --panel: #161A22;
  --neutral: #1F242E;
  --edge: #2C333F;
  --ink: #F2F4F8;
  --dim: #8A93A3;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, "Segoe UI", Roboto, sans-serif;
  overflow: hidden;
}

#stage {
  position: relative; height: 100%;
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: 1fr auto;
}

header {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 2vh 3vw 0;
}

.wordmark {
  font-size: 1.6vw; letter-spacing: .38em;
  text-transform: uppercase; color: var(--dim);
}

#scores {
  grid-column: 2; grid-row: 2;
  display: flex; flex-direction: column; justify-content: center;
  gap: 2.2vh; padding: 0 3vw 0 1vw;
  min-width: 13vw;
}

.score { display: flex; align-items: center; gap: .9vw; }
.swatch {
  width: 1.1vw; height: 5vh; border-radius: 6px; flex: none;
  object-fit: cover; display: inline-block;
}
.swatch.sq {
  width: 1.4vw; height: 1.4vw; border-radius: 4px;
  vertical-align: middle; margin-right: .5vw;
}

.score .body { display: grid; gap: .3vh; }
.score .who {
  font-size: 1.1vw; letter-spacing: .16em;
  text-transform: uppercase; color: var(--dim);
  white-space: nowrap;
}
/* Ground held now is the live figure and gets the weight; points banked sit
   under it in small grey, so the two can never read as one number. */
.score .tiles { font-size: 2.4vw; font-weight: 800; line-height: 1; }
.score .total { font-size: 1vw; font-weight: 600; color: var(--dim); }
.score .species { font-size: .9vw; color: var(--dim); letter-spacing: .1em; }
.score .roster { font-size: .85vw; color: var(--dim); max-width: 12vw; line-height: 1.5; }
.score .mate { display: block; white-space: nowrap; }
.face { border-radius: 50%; vertical-align: middle; margin-right: .35vw; }
.face.sm { width: 1.3vw; height: 1.3vw; }
.score .dot {
  display: inline-block; width: .55vw; height: .55vw; border-radius: 50%;
  margin-right: .35vw; vertical-align: baseline;
}

#boardWrap { position: relative; display: grid; place-items: center; }
canvas { display: block; }

/* Lobby */
#lobby {
  position: absolute; inset: 0;
  display: grid; place-content: center; gap: 2vh;
  text-align: center; background: var(--bg);
}

#lobby .kicker {
  font-size: 1.4vw; letter-spacing: .34em;
  text-transform: uppercase; color: var(--dim);
}

#code {
  font-size: 16vw; font-weight: 800; letter-spacing: .12em; line-height: .9;
  font-variant-numeric: tabular-nums;
}

#joinRow { display: grid; justify-items: center; gap: 1.2vh; }
#qr {
  width: 14vh; height: 14vh; border-radius: 8px;
  padding: .8vh; background: #0E1014; border: 2px solid var(--edge);
}
#qr[hidden] { display: none; }
#joinUrl { font-size: 1.7vw; color: var(--dim); }

#roster { display: flex; flex-wrap: wrap; gap: .8vw; justify-content: center; max-width: 70vw; }
.chip {
  padding: .7vh 1.4vw; border: 2px solid var(--edge); border-radius: 999px;
  font-size: 1.5vw; font-weight: 600;
}

#controls { display: flex; gap: 1vw; justify-content: center; align-items: center; flex-wrap: wrap; }

button {
  font: inherit; font-size: 1.5vw; font-weight: 700;
  color: var(--ink); background: var(--panel);
  border: 2px solid var(--edge); border-radius: 10px;
  padding: 1.2vh 2vw; cursor: pointer;
}
button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
button.primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
button:focus-visible { outline: 3px solid #4C7DF0; outline-offset: 3px; }

.balanced::after { content: " ·  balanced"; color: var(--dim); font-weight: 500; }

#status { font-size: 1.3vw; color: var(--dim); }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }

/* --- Round clock ---------------------------------------------------------- */

#clock { text-align: center; }
#roundLabel {
  font-size: 1.2vw; letter-spacing: .3em;
  text-transform: uppercase; color: var(--dim);
}
#timer {
  font-size: 3.4vw; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums;
}
/* The last ten seconds are the whole point of holding ground, so say so. */
#timer.urgent { color: #E8433F; }

/* --- Curtain: intermission and result ------------------------------------- */

#curtain {
  position: absolute; inset: 0;
  display: grid; place-content: center; gap: 1.4vh;
  text-align: center;
  background: rgba(14, 16, 20, .30);
}
#curtain[hidden] { display: none; }

#curtainKicker {
  font-size: 1.3vw; letter-spacing: .34em;
  text-transform: uppercase; color: var(--ink);
  text-shadow: 0 0 1.2vh rgba(14,16,20,1), 0 0 3vh rgba(14,16,20,.95), 0 .4vh 2.4vh rgba(14,16,20,.9);
}
#curtainTitle {
  font-size: 7vw; font-weight: 800; line-height: 1;
  text-shadow: 0 0 1.2vh rgba(14,16,20,1), 0 0 3vh rgba(14,16,20,.95), 0 .4vh 2.4vh rgba(14,16,20,.9);
}
#curtainActions { display: flex; gap: 1vw; justify-content: center; margin-top: 2vh; }

#curtainSub {
  font-size: 1.8vw; color: var(--ink);
  text-shadow: 0 0 1.2vh rgba(14,16,20,1), 0 0 3vh rgba(14,16,20,.95), 0 .4vh 2.4vh rgba(14,16,20,.9);
}

#curtainScores {
  display: flex; gap: 3vw; justify-content: center; flex-wrap: wrap;
  max-width: 80vw; margin: 1.5vh 0;
}
.tally { display: grid; justify-items: center; gap: .5vh; }
.tally .bar { width: 4vw; height: .8vh; border-radius: 99px; }
.tally .pts {
  font-size: 3vw; font-weight: 800; line-height: 1;
  text-shadow: 0 0 1.2vh rgba(14,16,20,1), 0 0 3vh rgba(14,16,20,.95), 0 .4vh 2.4vh rgba(14,16,20,.9);
}
.tally .who { font-size: 1.2vw; color: var(--dim); }
.tally .unit { font-size: 1vw; letter-spacing: .3em; text-transform: uppercase; color: var(--dim); }


/* --- Lobby: headcount, splits, team slots --------------------------------- */

#setup { display: grid; gap: 2vh; justify-items: center; }
#setup[hidden] { display: none; }

.stepper { display: flex; align-items: center; gap: 2vw; }
.stepper button {
  font-size: 2.4vw; font-weight: 800; line-height: 1;
  width: 4vw; height: 4vw; padding: 0; border-radius: 50%;
}
.stepper .count { display: grid; justify-items: center; min-width: 8vw; }
.stepper .count .n { font-size: 4.5vw; font-weight: 800; line-height: 1; }
.stepper .count .unit {
  font-size: 1vw; letter-spacing: .3em; text-transform: uppercase; color: var(--dim);
}

.options { display: flex; gap: 1vw; flex-wrap: wrap; justify-content: center; max-width: 70vw; }
.options button { display: grid; gap: .4vh; justify-items: center; }
.options .split { font-size: 1.6vw; font-weight: 800; }
.options .tag {
  font-size: .8vw; letter-spacing: .24em; text-transform: uppercase; color: var(--dim);
}

#slots { display: flex; gap: 1.2vw; flex-wrap: wrap; justify-content: center; max-width: 80vw; }
#slots[hidden] { display: none; }

.slot {
  min-width: 12vw; padding: 1.6vh 1.4vw;
  border: 3px solid var(--edge); border-radius: 14px;
  display: grid; gap: .5vh; align-content: start;
}
/* A ready team is filled in rather than outlined, so the host can read the
   room's state from across it without counting checkmarks. */
.slot.ready { background: rgba(255,255,255,.06); }
.slotHead { display: flex; align-items: center; }
.slotName { font-size: 1.7vw; font-weight: 800; line-height: 1.1; }
.slotSpecies { font-size: 1vw; letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.slotMembers { display: grid; gap: .2vh; margin-top: .4vh; }
.member { font-size: 1.1vw; }
.member.lead::after { content: " · lead"; color: var(--dim); font-size: .85vw; }
.member.bot { color: var(--dim); font-style: italic; }

.slotActions { display: flex; gap: .4vw; margin-top: .8vh; }
button.mini {
  font-size: .9vw; font-weight: 700; padding: .6vh .8vw;
  border-radius: 8px; border: 2px solid var(--edge);
  background: transparent; color: var(--dim);
}
.slotMembers .empty { font-size: 1.1vw; color: var(--dim); font-style: italic; }
.slotMeta { font-size: .9vw; color: var(--dim); margin-top: .4vh; }

.tally .roster { font-size: 1vw; color: var(--dim); max-width: 14vw; }


/* --- Lobby rules card ----------------------------------------------------- */

#rules {
  display: flex; gap: 3vw; justify-content: center;
  margin-top: 2.5vh; padding-top: 2.5vh;
  border-top: 2px solid var(--edge);
  max-width: 76vw; text-align: left;
}
.ruleCol { display: grid; gap: .7vh; align-content: start; font-size: 1.05vw; color: var(--dim); }
.ruleCol b { color: var(--ink); }
#legend { display: grid; gap: .5vh; }
.legendRow { display: flex; align-items: center; }
.ruleHead {
  font-size: .95vw; letter-spacing: .24em; text-transform: uppercase;
  color: var(--ink); margin-bottom: .4vh;
}