/* The Echoed game shell — shared by every page in public/, linked AFTER the
   page's own <style> so these win at equal specificity.

   It is the Echoed app's design, not a look of its own: the same inks, the
   same red, surfaces that step ONE FILL LIGHTER instead of drawing borders, no
   shadows or glows on chrome, rounded-square avatars, Geologica. The page's
   ground is the app's float colour, because the page fills Echoed's game
   window. Board art (felt, wood, stones, pieces) belongs to each game and is
   not touched here.

   The pages were written against their own variable names (--bg-base,
   --accent, …); those are remapped below so their existing rules follow. */

@font-face {
  font-family: 'Geologica';
  src: url('/fonts/geologica.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --g-ground: #1f232a;
  --g-ink: #e4e6eb;
  --g-body: #c6c9d0;
  --g-muted: #959ba6;
  --g-red: #dc4a50;      /* fill */
  --g-red-hi: #e65e63;   /* fill, hover */
  --g-red-ink: #f08a8c;  /* red as text */
  --g-on-red: #ffffff;
  /* Plates one and two steps off the ground, in the ground's own direction. */
  --g-plate: color-mix(in srgb, var(--g-ground), var(--g-ink) 5%);
  --g-plate-hi: color-mix(in srgb, var(--g-ground), var(--g-ink) 10%);
  --g-plate-top: color-mix(in srgb, var(--g-ground), var(--g-ink) 15%);

  --bg-base: var(--g-ground);
  --bg: var(--g-ground);
  --bg-card: var(--g-plate);
  --panel: var(--g-plate);
  --bg-elevated: var(--g-plate-hi);
  --elevated: var(--g-plate-hi);
  --bg-input: var(--g-plate);
  --input: var(--g-plate);
  --border: transparent;
  --text-primary: var(--g-ink);
  --text: var(--g-ink);
  --text-secondary: var(--g-body);
  --text-muted: var(--g-muted);
  --muted: var(--g-muted);
  --faint: var(--g-muted);
  /* The pages used their old gold "accent" for game marks — X marks, stones,
     the last-move ring — not for anything that wants the player. Those become
     plain ink; the red below is kept for what does (your move, Rematch). */
  --accent: var(--g-ink);
  --mark-b: #8ab9e6;
  --o-mark: var(--mark-b); /* X/O games: X is ink, O is this blue */
  color-scheme: dark;
}

:root[data-theme="light"] {
  --g-ground: #eef1f7;
  --g-ink: #1b1d21;
  --g-body: #34383f;
  --g-muted: #545860;
  --g-red: #c7343b;
  --g-red-hi: #a8222a;
  --g-red-ink: #b3262e;
  --mark-b: #2f6fb0;
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 0;
  overflow: hidden;
  background: var(--g-ground);
  color: var(--g-ink);
  font-family: 'Geologica', ui-sans-serif, system-ui, 'Segoe UI', Roboto, sans-serif;
  font-weight: 350;
  -webkit-font-smoothing: antialiased;
}

/* ── The player bar ───────────────────────────────────────────────────────── */
#eg-bar {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px 16px 6px;
}
#eg-seats { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
#eg-seats:empty { display: none; }
.eg-seat {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  max-width: 260px;
  height: 46px;
  padding: 0 12px 0 8px;
  border-radius: 12px;
  background: var(--g-plate);
  transition: background-color .15s;
}
/* The player to move: one fill lighter. */
.eg-seat.turn { background: var(--g-plate-hi); }
.eg-seat.out, .eg-seat.away { opacity: .55; }
.eg-av {
  width: 30px; height: 30px; flex: none;
  border-radius: 8px;
  object-fit: cover;
}
.eg-ini {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--g-plate-top); color: var(--g-body);
  font-size: 13px; font-weight: 640;
}
.eg-text { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.eg-top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.eg-name {
  font-size: 14px; line-height: 18px; font-weight: 560; color: var(--g-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.eg-sub {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; line-height: 16px; color: var(--g-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* The side's own colour, as a small mark before the side name. */
.eg-seat.sided .eg-sub::before {
  content: ''; flex: none;
  width: 9px; height: 9px; border-radius: 3px;
  background: var(--eg-side);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--g-ink) 18%, transparent);
}
.eg-clock {
  margin-left: 4px; flex: none;
  font-size: 14px; font-weight: 640; font-variant-numeric: tabular-nums;
  color: var(--g-muted);
}
.eg-clock:empty { display: none; }
.eg-seat.turn .eg-clock { color: var(--g-ink); }
/* Your clock running out wants you: red. */
.eg-seat.you .eg-clock.low { color: var(--g-red-ink); }

/* The one status line. Red only when the move is yours. */
.status, #status {
  margin: 0;
  min-height: 18px;
  font-size: 13px; line-height: 18px; font-weight: 460;
  letter-spacing: 0;
  color: var(--g-muted);
  text-align: center;
}
.status.turn, #status.turn { color: var(--g-red-ink); font-weight: 560; }

/* ── The stage: extras, then the board fitted to what is left ────────────── */
#eg-stage {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 4px;
}
#eg-fit {
  flex: 1;
  min-height: 0;
  width: 100%;
  container-type: size;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Width is the smaller of the space's width and its height × the board's
   aspect (a page sets --board-ratio when its board is not square). */
#eg-fit > * {
  width: min(100cqw, calc(100cqh * var(--board-ratio, 1)));
  max-width: none;
  max-height: 100cqh;
  margin: 0;
  flex: none;
}

/* No drop shadow under the board itself — the board is on the page, not
   floating above it. (Shading on pieces is the game's art and stays.) */
#board { box-shadow: none; }

/* ── Footer ───────────────────────────────────────────────────────────────── */
.footer {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 0;
  padding: 6px 16px 14px;
}
.footer:not(:has(button:not([style*="display: none"]))) { padding-top: 0; }
/* The bar already says who you are and which side. */
.seat, #seat { display: none; }

.btn {
  height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: 8px;
  background: var(--g-plate-hi);
  color: var(--g-ink);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  box-shadow: none;
  filter: none;
  cursor: pointer;
  transition: background-color .15s, transform .15s;
}
.btn:hover { background: var(--g-plate-top); color: var(--g-ink); }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .5; pointer-events: none; }
.btn-primary { background: var(--g-red); color: var(--g-on-red); }
.btn-primary:hover { background: var(--g-red-hi); color: var(--g-on-red); filter: none; }

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

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