/* ==========================================================================
   Narde — site and board styles
   All colours are tokens below; components only reference variables.
   ========================================================================== */

/* "Sea and sun" palette: ocean blue as the main colour, with turquoise, amber
   and terracotta accents. :root holds the light tokens; [data-theme="dark"] on
   <html> swaps them. Dark is the default theme: base.html sets it before the
   first paint unless the visitor chose light with the header toggle. The board itself is a physical
   object and stays light in both themes. */
:root {
  /* page */
  --bg: #f6f8fc;
  --bg-glow-1: rgba(37, 99, 235, 0.13);
  --bg-glow-2: rgba(245, 158, 11, 0.14);
  --bg-glow-3: rgba(20, 184, 166, 0.12);
  --surface: #ffffff;
  --surface-2: #eef3fa;
  --ink: #13203a;
  --ink-soft: #3b4a66;
  --muted: #6b7a96;
  --line: #e3e9f3;
  --line-strong: #d2dbea;

  /* main accent: ocean blue, with a blue-to-deep-cyan gradient for primary buttons */
  --accent: #1d64d8;
  --accent-strong: #1550b8;
  --accent-text: #1a56c4;
  --accent-grad: linear-gradient(135deg, #2563eb 0%, #0e7490 100%);
  --accent-grad-strong: linear-gradient(135deg, #1d4ed8 0%, #155e75 100%);
  --accent-glow: rgba(37, 99, 235, 0.28);
  --accent-soft: #eaf2ff;
  --accent-border: #c4dafc;
  --accent-ring: rgba(37, 99, 235, 0.25);
  --accent-ink: #ffffff;
  /* the four-colour stripe under the header and the hero headline */
  --stripe: linear-gradient(90deg, #2563eb, #14b8a6, #f59e0b, #f0643c);
  --headline: linear-gradient(100deg, #1d4ed8 10%, #0e8a9e 55%, #e07a00 95%);

  /* account (user chip in the header) */
  --user: #c2410c;
  --user-strong: #9a3412;

  /* status */
  --good: #0f9f6e;
  --online: #22c55e;
  --pending: #f59e0b;
  --danger: #e11d48;
  --danger-strong: #be123c;
  --danger-text: #be123c;
  --danger-soft: #fff1f3;
  --danger-border: #fecdd6;
  --warn-text: #92400e;
  --warn-soft: #fff7e6;
  --warn-border: #ffd88a;
  --gold: #ffc23d;
  --toast-bg: #13203a;
  --toast-ink: #f6f8fc;
  --clock-bg: #13203a;
  --clock-ink: #ffffff;

  /* board */
  --board-frame: #15294a;
  --board-bar: #0e1d36;
  --board-tray: #0e1d36;
  --board-felt: #fbf1df;
  --felt-ink: #1f2a3d;  /* text drawn on the felt */
  /* muted clay and teal-grey: the original pairing, toned down so the points
     sit behind the checkers and move hints */
  --point-a: #a86b55;
  --point-b: #5f8790;
  --home-tint: rgba(37, 99, 235, 0.08);
  --checker-light: #fffaf2;
  --checker-light-edge: #c9bfae;
  --checker-dark: #1b2333;
  --checker-dark-edge: #44506a;
  --die-face: #ffffff;
  --die-pip: #13203a;
  --inlay: #e8b04a;  /* gold inlay on the bar and tray */

  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 1px 2px rgba(19, 32, 58, 0.05), 0 4px 14px rgba(19, 32, 58, 0.06);
  --shadow-lg: 0 24px 48px rgba(19, 32, 58, 0.22);
  --board-shadow: 0 14px 36px rgba(21, 41, 74, 0.28);
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font-body);
  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: #0a111f;
  --bg-glow-1: rgba(37, 99, 235, 0.22);
  --bg-glow-2: rgba(245, 158, 11, 0.08);
  --bg-glow-3: rgba(20, 184, 166, 0.12);
  --surface: #111b2e;
  --surface-2: #18243b;
  --ink: #eaf1ff;
  --ink-soft: #c2cfe6;
  --muted: #8796b3;
  --line: #1f2c45;
  --line-strong: #2c3c5c;

  --accent: #3b82f6;
  --accent-strong: #60a5fa;
  --accent-text: #8ec5ff;
  --accent-grad: linear-gradient(135deg, #2563eb 0%, #0e7490 100%);
  --accent-grad-strong: linear-gradient(135deg, #3b82f6 0%, #0891b2 100%);
  --accent-glow: rgba(37, 99, 235, 0.4);
  --accent-soft: #13233f;
  --accent-border: #24447a;
  --accent-ring: rgba(96, 165, 250, 0.4);
  --accent-ink: #ffffff;
  --headline: linear-gradient(100deg, #7cb4ff 10%, #4fd1c5 55%, #ffb547 95%);

  --user: #c2410c;
  --user-strong: #ea580c;

  --good: #34d399;
  --danger: #e11d48;
  --danger-strong: #f43f5e;
  --danger-text: #fda4af;
  --danger-soft: #3a1426;
  --danger-border: #6b1f3d;
  --warn-text: #fcd34d;
  --warn-soft: #36260b;
  --warn-border: #6b4a12;
  --toast-bg: #1f2d4a;
  --toast-ink: #eaf1ff;
  --clock-bg: #2c3c5c;
  --clock-ink: #ffffff;

  --board-frame: #0f2140;
  --board-bar: #0a1628;
  --board-tray: #0a1628;
  --board-felt: #ecdcc0;
  --home-tint: rgba(37, 99, 235, 0.11);

  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 14px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.55);
  --board-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(900px 520px at 8% -8%, var(--bg-glow-1), transparent 65%),
    radial-gradient(760px 480px at 105% 4%, var(--bg-glow-2), transparent 62%),
    radial-gradient(820px 520px at 50% 115%, var(--bg-glow-3), transparent 65%),
    var(--bg);
  background-attachment: fixed;
  color: var(--ink);
  font: 16px/1.55 var(--font-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; margin: 0 0 0.5em; }
h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); letter-spacing: -0.03em; }
h2 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
a { color: var(--accent-text); text-underline-offset: 2px; }
a:hover { color: var(--accent-strong); }
img, svg { max-width: 100%; }
[hidden] { display: none !important; }

.muted { color: var(--muted); }
.small { font-size: 0.875rem; }
.center { text-align: center; }
.lead { font-size: 1.1rem; color: var(--ink-soft); }
.eyebrow { text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.75rem; color: var(--accent-text); font-weight: 700; margin-bottom: 0.6em; }

/* -- header / footer ------------------------------------------------------ */

.site-header {
  background: var(--surface);
  color: var(--ink);
  padding-top: env(safe-area-inset-top, 0px);
  position: relative;
}
.site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--stripe); }
.site-header__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0.7rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.brand { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--ink); text-decoration: none; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.02em; }
.brand:hover { color: var(--ink); }
.brand__mark { width: 28px; height: 28px; }
.brand__light { fill: #f59e0b; }
.brand__dark { fill: #2563eb; stroke: var(--surface); stroke-width: 1.4; }
.site-nav { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.site-nav a, .site-nav .link-button { color: var(--ink-soft); text-decoration: none; font-weight: 500; }
.site-nav a:hover, .site-nav .link-button:hover { color: var(--ink); }
.site-nav .button { color: var(--accent-ink); }
.site-nav__links { display: flex; align-items: center; gap: 1.25rem; }
.site-nav__links > a { padding: 0.35rem 0; border-bottom: 2px solid transparent; }
.site-nav__links > a.is-current { color: var(--ink); border-bottom-color: var(--accent); }
.site-nav .nav-play { font-weight: 700; color: var(--ink); }
.nav-account { display: inline-flex; align-items: center; gap: 0.5rem; margin-left: 0.25rem; }
.site-nav .user-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  max-width: 14rem;
  min-height: 36px;
  padding: 0.25rem 0.85rem 0.25rem 0.25rem;
  border-radius: 999px;
  background: var(--user);
  color: #ffffff;
  font-weight: 600;
  transition: background 0.15s;
}
.site-nav .user-chip:hover { background: var(--user-strong); color: #ffffff; }
.user-chip__avatar { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); font-size: 0.85rem; font-weight: 700; }
.user-chip__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-nav button.nav-signout {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 36px;
  padding: 0.3rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink-soft);
  font: 500 0.9rem/1.2 var(--font-body);
  box-shadow: none;
  cursor: pointer;
}
.site-nav button.nav-signout:hover { background: var(--danger-soft); border-color: var(--danger-border); color: var(--danger-text); }
.nav-signout svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.site-nav button.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  min-height: 0;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--accent-text);
  box-shadow: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, transform 0.3s;
}
.site-nav button.theme-toggle:hover { background: var(--accent-soft); }
.site-nav button.theme-toggle:active { transform: rotate(-20deg); }
.theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle__moon { fill: currentColor; }
/* show what the button switches to: the moon in light mode, the sun in dark mode */
:root[data-theme="dark"] .theme-toggle__moon,
:root:not([data-theme="dark"]) .theme-toggle__sun { display: none; }
:root[data-theme="dark"] .site-nav button.theme-toggle { color: var(--gold); }

/* Language switch: a two-option pill beside the theme switch, on every screen size. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 36px;
  padding: 3px;
  margin-right: -0.6rem;  /* sits close to the theme switch, like one control group */
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
}
.site-nav .lang-switch__option {
  display: grid;
  place-items: center;
  min-width: 36px;
  height: 28px;
  padding: 0 0.55rem;
  border-radius: 999px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.site-nav .lang-switch__option:hover { color: var(--ink); background: var(--surface-2); }
.site-nav .lang-switch__option.is-current { background: var(--accent-grad); color: var(--accent-ink); box-shadow: 0 1px 6px var(--accent-glow); }
.site-nav .lang-switch__option:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.site-main { flex: 1; width: 100%; max-width: 1280px; margin: 0 auto; padding: 1.75rem 1rem 3rem; }
.page-game .site-main { padding-top: 1rem; }

.site-footer { text-align: center; color: var(--muted); font-size: 0.85rem; padding: 1.5rem 1rem calc(1.5rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); }

/* -- building blocks --------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.4rem;
  margin-bottom: 1.25rem;
}
.narrow { max-width: 560px; margin-left: auto; margin-right: auto; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 1.25rem; }
.grid-2 > .card { margin-bottom: 0; }
.grid-2 { margin-bottom: 1.25rem; }
.page-head { margin-bottom: 1.25rem; }

.button, button[type="submit"], .auth-card button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.55rem 1.15rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: var(--accent-grad);
  color: var(--accent-ink);
  font: 600 1rem/1.2 var(--font-body);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.1s;
  box-shadow: 0 2px 10px var(--accent-glow);
}
.button:hover, button[type="submit"]:hover { background: var(--accent-grad-strong); color: var(--accent-ink); box-shadow: 0 4px 16px var(--accent-glow); }
.button:active, button[type="submit"]:active { transform: translateY(1px); }
.button:disabled { opacity: 0.55; cursor: progress; }
.button:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--accent-ring); outline-offset: 2px; }
.button--ghost, button[type="submit"].button--ghost, .auth-card button.button--ghost { background: var(--surface); border-color: var(--line-strong); color: var(--ink); box-shadow: none; }
.button--ghost:hover, button[type="submit"].button--ghost:hover { background: var(--surface-2); border-color: var(--line-strong); color: var(--ink); }
/* Sizes also match button[type="submit"], whose base rule is more specific than a single class. */
.button--small, button[type="submit"].button--small { min-height: 36px; padding: 0.35rem 0.85rem; font-size: 0.9rem; }
.button--large, button[type="submit"].button--large { min-height: 52px; padding: 0.7rem 1.5rem; font-size: 1.05rem; }
.button--danger, button[type="submit"].button--danger { background: var(--danger); box-shadow: none; }
.button--danger:hover { background: var(--danger-strong); box-shadow: none; }

.link-button { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; color: var(--accent-text); box-shadow: none; min-height: 0; }
.site-nav .link-button { min-height: 0; border: 0; background: none; box-shadow: none; padding: 0; font-weight: 500; }
.link-button.danger { color: var(--danger-text); text-decoration: underline; }
.inline-form { display: inline; margin: 0; }

input[type="text"], input[type="email"], input[type="password"], input[type="search"], select, textarea {
  width: 100%;
  min-height: 44px;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); outline: none; }
textarea { min-height: 90px; }
label { font-weight: 600; font-size: 0.9rem; color: var(--ink-soft); }
.stack-form { display: flex; flex-direction: column; gap: 0.55rem; align-items: stretch; }
.stack-form .button, .stack-form button { align-self: flex-start; margin-top: 0.4rem; }
/* Profile: account settings as tappable rows (icon, title, hint, chevron). */
.profile-settings > .card h2 { margin-bottom: 0.9rem; }
.settings-links { display: flex; flex-direction: column; gap: 0.6rem; }
.settings-link {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  min-height: 64px;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.settings-link:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--ink); }
.settings-link:active { transform: translateY(1px); }
.settings-link__icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent-text); }
.settings-link__icon svg, .settings-link__chevron { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.settings-link__text { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; flex: 1; }
.settings-link__title { font-weight: 600; }
.settings-link__hint { font-size: 0.85rem; color: var(--muted); }
.settings-link__chevron { flex: none; color: var(--muted); }
.settings-link:hover .settings-link__chevron { color: var(--accent-text); }
.ruleset-notes { margin: 0 0 0.3rem; padding-left: 1.1rem; font-size: 0.85rem; }

.badge { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; background: var(--surface-2); border: 1px solid var(--line); color: var(--ink-soft); margin-left: 0.4rem; vertical-align: middle; }
.badge--active { background: var(--accent-soft); border-color: var(--accent-border); color: var(--accent-text); }
.badge--waiting { background: var(--warn-soft); border-color: var(--warn-border); color: var(--warn-text); }
.badge--finished { background: var(--surface-2); border-color: var(--line); color: var(--ink-soft); }
.badge--cancelled { background: var(--danger-soft); border-color: var(--danger-border); color: var(--danger-text); }

.messages { max-width: 1280px; margin: 1rem auto 0; padding: 0 1rem; width: 100%; }
.message { padding: 0.75rem 1rem; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line); margin-bottom: 0.5rem; transition: opacity 0.5s; }
.message--success { border-color: var(--accent-border); background: var(--accent-soft); }
.message--error { border-color: var(--danger-border); background: var(--danger-soft); }
.message.is-leaving { opacity: 0; }

.game-list { list-style: none; margin: 0; padding: 0; }
.game-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.75rem 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.game-row:first-child { border-top: 0; }
.row-actions { display: flex; gap: 0.5rem; }

.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 0.93rem; }
.table th, .table td { text-align: left; padding: 0.6rem 0.5rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table th { color: var(--muted); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; }
.table tbody tr:last-child td { border-bottom: 0; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.9rem; margin-bottom: 1.25rem; }
.stat { display: flex; flex-direction: column; align-items: center; margin: 0; padding: 1rem; }
.stat__value { font-size: 1.8rem; font-weight: 800; color: var(--accent-text); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat__label { color: var(--muted); font-size: 0.85rem; }
.pager { display: flex; gap: 1rem; justify-content: center; margin-top: 1rem; }

.facts { display: grid; grid-template-columns: auto auto; justify-content: center; gap: 0.3rem 1rem; margin: 1rem 0 1.5rem; }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; font-weight: 600; }

/* auth pages (django-allauth) */
/* "or" divider and social sign-in buttons (templates/socialaccount/snippets).
   Colours follow Google's and Apple's button guidelines for light and dark. */
.auth-divider { display: flex; align-items: center; gap: 0.85rem; margin: 1.4rem 0 1.1rem; color: var(--muted); font-size: 0.85rem; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--line-strong); }
.social-buttons { display: flex; flex-direction: column; gap: 0.6rem; }
.auth-card form.social-form { display: block; }
.auth-card button.social-button {
  position: relative;
  width: 100%;
  min-height: 48px;
  gap: 0.75rem;
  padding: 0.6rem 1rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.98rem;
  box-shadow: 0 1px 2px rgba(19, 32, 58, 0.08);
}
.auth-card button.social-button:hover { box-shadow: 0 2px 8px rgba(19, 32, 58, 0.16); }
.social-button__logo { display: grid; place-items: center; width: 20px; height: 20px; flex: none; }
.social-button__logo svg { width: 100%; height: 100%; }
.auth-card button.social-button--google { background: #ffffff; border-color: #747775; color: #1f1f1f; }
.auth-card button.social-button--google:hover { background: #f8f9fa; color: #1f1f1f; }
.auth-card button.social-button--apple { background: #000000; border-color: #000000; color: #ffffff; }
.auth-card button.social-button--apple:hover { background: #1c1c1e; color: #ffffff; }
:root[data-theme="dark"] .auth-card button.social-button--google { background: #131314; border-color: #8e918f; color: #e3e3e3; }
:root[data-theme="dark"] .auth-card button.social-button--google:hover { background: #1e1f20; color: #e3e3e3; }
:root[data-theme="dark"] .auth-card button.social-button--apple { background: #ffffff; border-color: #ffffff; color: #000000; }
:root[data-theme="dark"] .auth-card button.social-button--apple:hover { background: #f2f2f7; color: #000000; }
.auth-card { max-width: 480px; margin: 1rem auto; }
.auth-card form { display: flex; flex-direction: column; gap: 0.6rem; }
.auth-card form p { margin: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.auth-card ul { padding-left: 1.1rem; }
.auth-card .helptext, .auth-card .errorlist { font-size: 0.85rem; color: var(--muted); }
.auth-card .errorlist { color: var(--danger-text); }
/* Checkbox rows (e.g. "Ține-mă minte"): the box first, then its label, on one line. */
.auth-card form p:has(> input[type="checkbox"]) { flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: 0.65rem; min-height: 44px; }
.auth-card form p:has(> input[type="checkbox"]) label { font-size: 0.95rem; font-weight: 500; color: var(--ink); cursor: pointer; }
.auth-card input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 22px;
  height: 22px;
  min-height: 0;
  margin: 0;
  border: 1.5px solid var(--line-strong);
  border-radius: 6px;
  background: var(--surface) center / 14px no-repeat;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}
.auth-card input[type="checkbox"]:hover { border-color: var(--accent); }
.auth-card input[type="checkbox"]:checked {
  border-color: var(--accent);
  background-color: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3L13 4.5' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* -- landing page ---------------------------------------------------------- */

.hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 2.5rem; align-items: center; padding: 1.5rem 0 2.5rem; }
.hero__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.5rem; }
/* Both hero buttons the same size, whether a link or a form's submit button. */
.hero__actions .inline-form { display: contents; }
.hero__actions .button { min-width: 13rem; }
.hero__art svg { width: 100%; filter: drop-shadow(0 18px 36px rgba(21, 41, 74, 0.3)); }
.art-frame { fill: var(--board-frame); }
.art-felt { fill: var(--board-felt); }
.art-points polygon { fill: var(--point-a); }
.art-points--alt polygon { fill: var(--point-b); }
.art-light circle { fill: var(--checker-light); stroke: var(--checker-light-edge); }
.art-dark circle { fill: var(--checker-dark); stroke: var(--checker-dark-edge); }
.art-dice rect { fill: var(--die-face); stroke: #d2dbea; }
.art-dice circle { fill: var(--die-pip); }

@media (max-width: 760px) {
  .hero { grid-template-columns: 1fr; padding-top: 0.5rem; }
  .hero__art { order: -1; max-width: 420px; }
}

/* ==========================================================================
   Game page
   ========================================================================== */

.game { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1.25rem; align-items: start; }
.game__board { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.game__panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  position: sticky;
  top: 1rem;
}

.board-frame { position: relative; }
.board {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1000 / 760;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  border-radius: 16px;
  box-shadow: var(--board-shadow);
}

/* board surfaces */
.frame { fill: var(--board-frame); }
.felt { fill: var(--board-felt); }
.bar { fill: var(--board-bar); }
.tray { fill: var(--board-tray); }
.tray-divider { stroke: rgba(255, 255, 255, 0.12); stroke-width: 2; }

/* ornaments (Caucasian inlay motifs; see board.js) */
.ornament { fill: none; stroke: var(--inlay); stroke-width: 1.4; opacity: 0.6; }
.ornament--fill { fill: var(--inlay); stroke: none; }
.ornament--tray { fill: var(--board-tray); opacity: 0.7; }
.felt-lattice { fill: url(#felt-lattice); pointer-events: none; }
.lattice-line { fill: none; stroke: rgba(31, 42, 61, 0.05); stroke-width: 1; }
.lattice-dot { fill: rgba(31, 42, 61, 0.07); }
.felt-medallion { fill: none; stroke: rgba(31, 42, 61, 0.1); stroke-width: 1.6; }
.pt-inlay { fill: none; stroke: rgba(255, 248, 235, 0.38); stroke-width: 1.4; stroke-linejoin: round; }
.pt-gem { fill: rgba(255, 248, 235, 0.8); }
.pt--a { fill: var(--point-a); }
.pt--b { fill: var(--point-b); }
.home-zone { fill: var(--home-tint); }
.home-zone--opponent { fill: rgba(19, 32, 58, 0.04); }
.direction { fill: none; stroke: rgba(19, 32, 58, 0.16); stroke-width: 3; stroke-dasharray: 2 10; stroke-linecap: round; }
.pt-num { fill: #9aa5b8; font: 600 11px var(--font-body); text-anchor: middle; opacity: 0.75; }
.zone-label { fill: rgba(19, 32, 58, 0.42); font: 700 13px var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; }

/* checkers */
.checker__body { stroke-width: 1.5; }
.checker--white .checker__body { stroke: var(--checker-light-edge); }
.checker--black .checker__body { stroke: #070b14; }
/* the carved face: groove, eight-pointed star and centre dot */
.checker__motif { stroke-width: 1.6; stroke-linejoin: round; }
.checker--white .checker__motif { stroke: rgba(150, 118, 72, 0.5); fill: rgba(150, 118, 72, 0.45); }
.checker--black .checker__motif { stroke: rgba(232, 176, 74, 0.38); fill: rgba(232, 176, 74, 0.4); }
.checker__halo { fill: none; stroke: transparent; stroke-width: 4; pointer-events: none; }
.is-selectable .checker__halo { stroke: var(--gold); animation: halo-pulse 1.4s ease-in-out infinite; }
.is-selected .checker__halo { stroke: #ffe08a; stroke-width: 7; animation: none; }
.is-selected .checker__body { filter: brightness(1.08); }
.is-moving .checker__halo { stroke: rgba(255, 224, 138, 0.8); }
.checker-count { font: 700 19px var(--font-body); text-anchor: middle; pointer-events: none; }
.checker-count--white { fill: #3b4a66; }
.checker-count--black { fill: #f6f8fc; }

@keyframes halo-pulse {
  0%, 100% { stroke-opacity: 0.35; }
  50% { stroke-opacity: 1; }
}

/* move hints */
.dest-tri { fill: rgba(112, 222, 138, 0.8); stroke: #eafff0; stroke-width: 2; pointer-events: none; }
.source-tri { fill: rgba(255, 208, 102, 0.42); pointer-events: none; }
.ghost { fill: rgba(255, 255, 255, 0.35); stroke: #fff; stroke-width: 2.5; stroke-dasharray: 6 5; pointer-events: none; animation: ghost-pulse 1.2s ease-in-out infinite; }
.tray-target { fill: rgba(112, 222, 138, 0.3); stroke: #9fe6b0; stroke-width: 2.5; stroke-dasharray: 7 6; pointer-events: none; animation: ghost-pulse 1.2s ease-in-out infinite; }
/* destinations reached by using several dice in a row: the same green, a
   deeper shade */
.dest-tri--combined { fill: rgba(30, 150, 72, 0.85); stroke: #c6f1d3; }
.ghost--combined { fill: rgba(190, 236, 204, 0.4); stroke: #d4f6de; }
.tray-target--combined { fill: rgba(30, 150, 72, 0.32); stroke: #4cbf72; }
@keyframes ghost-pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}
.trail { fill: none; stroke: #f7d27a; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1 9; opacity: 0.95; pointer-events: none; }
.trail--faded { opacity: 0.4; }
.trail-arrow { fill: #f7d27a; }
.slab { stroke-width: 1.2; }
.slab--white { fill: #f6efe3; stroke: var(--checker-light-edge); }
.slab--black { fill: #1b2333; stroke: var(--checker-dark-edge); }

.hit { fill: transparent; }
.hit--active { cursor: pointer; }
.hit:focus { outline: none; }
.hit--active:focus-visible { stroke: var(--gold); stroke-width: 3; }

/* dice */
.die__body { fill: url(#grad-die); stroke: #d2dbea; stroke-width: 1.5; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.35)); }
.die__pip { fill: var(--die-pip); }
.die { transition: opacity 0.25s; }
.die.is-used { opacity: 0.3; }
/* a die in mid-throw: its shadow is drawn separately (see board.js animateRoll),
   since a CSS drop-shadow would turn with the die */
.die.is-tumbling { pointer-events: none; }
.die.is-tumbling .die__body { filter: none; }
.die__shade { fill: #13203a; pointer-events: none; }
.die-shadow { fill: rgba(11, 22, 40, 0.45); pointer-events: none; }
.die-thud { fill: none; stroke: rgba(19, 32, 58, 0.4); stroke-width: 2; pointer-events: none; }
.roll-hint { cursor: pointer; }
.roll-hint .die { animation: roll-hint 1.6s ease-in-out infinite; }
.roll-hint .die:last-child { animation-delay: 0.2s; }
.roll-hint:focus { outline: none; }
.roll-hint:focus-visible .die__body { stroke: var(--gold); stroke-width: 4; }
@keyframes roll-hint {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* player cards */
.player-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.55rem 0.9rem;
  border-radius: var(--radius-sm);
  background: var(--surface);
  border: 1.5px solid var(--line);
  min-height: 48px;
  transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
}
.player-card.is-active { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-ring); background: var(--accent-soft); }
.player-card { position: relative; overflow: hidden; }
.player-card__stats .is-warning { color: var(--danger-text); font-weight: 600; }

/* turn clock */
.clock {
  margin-left: auto;
  padding: 0.1rem 0.6rem;
  border-radius: 999px;
  background: var(--clock-bg);
  color: var(--clock-ink);
  font: 700 0.95rem/1.4 var(--font-body);
  font-variant-numeric: tabular-nums;
  order: 2;
}
.clock.is-low { background: var(--danger); animation: ghost-pulse 1s ease-in-out infinite; }
.clock-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: var(--accent-grad);
  transform-origin: left center;
  transition: transform 0.25s linear;
}
.clock-bar.is-low { background: var(--danger); }
.field-help { margin: 0; }
.player-card__identity { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.player-card__name { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player-card__you { font-weight: 400; color: var(--muted); }
.player-card__stats { display: flex; gap: 1rem; font-size: 0.85rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.color-chip { width: 18px; height: 18px; border-radius: 50%; flex: none; border: 1.5px solid var(--checker-light-edge); }
.color-chip--white { background: radial-gradient(circle at 40% 35%, #ffffff, #e6dccb); }
.color-chip--black { background: radial-gradient(circle at 40% 35%, #44506a, #070b14); border-color: var(--checker-dark-edge); }
.color-chip--none { background: var(--line); }
.presence { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.presence.is-online { background: var(--online); box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.18); }
.presence.is-offline { background: var(--line-strong); }

/* side panel */
.panel-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.connection { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--muted); }
.connection__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--pending); }
.connection[data-state="connected"] .connection__dot { background: var(--online); }
.connection[data-state="reconnecting"] .connection__dot { background: var(--pending); animation: ghost-pulse 1s infinite; }
.connection[data-state="denied"] .connection__dot { background: var(--danger); }
.ruleset-chip { font-size: 0.78rem; color: var(--muted); }
.panel-row__end { display: inline-flex; align-items: center; gap: 0.5rem; }
.sound-toggle { display: inline-grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; padding: 0; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-soft); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sound-toggle:hover { background: var(--surface-2); }
.sound-toggle:focus-visible { outline: 3px solid var(--accent-ring); outline-offset: 2px; }
.sound-toggle svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sound-toggle[aria-pressed="false"] { color: var(--muted); }
.sound-toggle[aria-pressed="true"] .sound-toggle__off,
.sound-toggle[aria-pressed="false"] .sound-toggle__on { display: none; }
.status-line { font-weight: 600; font-size: 1.05rem; margin: 0; min-height: 1.6em; }
.controls { display: flex; flex-direction: column; gap: 0.55rem; }
.controls .button { width: 100%; }
.invite-box { display: flex; flex-direction: column; gap: 0.6rem; }
.invite-box .button { width: 100%; }
.button__icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.copy-field { display: flex; gap: 0.4rem; }
.copy-field input { min-width: 0; font-size: 0.85rem; }
.copy-field .button, .copy-field button { flex: none; margin: 0; }

/* Share dialog: a centred card on large screens, a bottom sheet on phones. */
.share-dialog {
  width: min(92vw, 440px);
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-lg);
}
.share-dialog::backdrop { background: rgba(8, 14, 28, 0.5); backdrop-filter: blur(3px); }
.share-dialog[open] { animation: pop-in 0.3s cubic-bezier(0.2, 1.2, 0.4, 1); }
.share-dialog__card { display: flex; flex-direction: column; gap: 0.9rem; padding: 1.25rem; }
.share-dialog__card:focus { outline: none; }
.share-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.share-dialog__head h2 { margin: 0; font-size: 1.35rem; }
.share-dialog__head form { margin: 0; }
.share-dialog .share-dialog__close {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--ink-soft);
  font-size: 1.6rem;
  line-height: 1;
  box-shadow: none;
}
.share-dialog .share-dialog__close:hover { background: var(--line); color: var(--ink); box-shadow: none; }
.share-dialog__lead { margin: 0; color: var(--ink-soft); }
.share-dialog__more { align-self: center; min-height: 44px; font-weight: 600; }

/* Invitation opened without an account: log in, or continue as a guest. */
.join-dialog__accounts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.join-dialog__accounts .button { margin: 0; }
.join-dialog__or { display: flex; align-items: center; gap: 0.75rem; margin: 0; color: var(--ink-soft); font-size: 0.85rem; }
.join-dialog__or::before, .join-dialog__or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.join-dialog__guest { display: flex; flex-direction: column; gap: 0.5rem; margin: 0; }
.join-dialog__guest .button { width: 100%; margin: 0.25rem 0 0; }
.join-dialog__guest p { margin: 0; }
.guest-note a { font-weight: 600; }

@media (max-width: 640px) {
  .share-dialog { width: 100%; margin: auto 0 0; border-radius: 22px 22px 0 0; }
  .share-dialog__card { padding: 1.1rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px)); }
  .share-dialog[open] { animation: sheet-up 0.3s cubic-bezier(0.2, 1, 0.4, 1); }
}
@keyframes sheet-up { from { transform: translateY(100%); } }

/* -- chat ------------------------------------------------------------------- */

.chat-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 40px;
  padding: 0 0.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-soft);
  font: 600 0.9rem/1 var(--font-body);
  cursor: pointer;
}
.chat-toggle:hover { background: var(--surface-2); }
.chat-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linejoin: round; }
.chat-toggle__badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--danger);
  color: #ffffff;
  font: 700 0.72rem/20px var(--font-body);
  text-align: center;
}

/* Speech bubbles over the board: the opponent's at the top, the viewer's at the bottom. */
.chat-bubble {
  position: absolute;
  left: 50%;
  z-index: 3;
  max-width: min(80%, 420px);
  padding: 0.55rem 1rem;
  border: 0;
  border-radius: 18px;
  background: var(--surface);
  color: var(--ink);
  font: 600 1rem/1.35 var(--font-body);
  text-align: center;
  overflow-wrap: anywhere;
  box-shadow: 0 8px 24px rgba(8, 14, 28, 0.35);
  cursor: pointer;
  transform: translateX(-50%);
}
.chat-bubble--top { top: 7%; }
.chat-bubble--bottom { bottom: 7%; background: var(--accent-soft); }
.chat-bubble.is-emoji { padding: 0.3rem 0.8rem; font-size: 2.2rem; line-height: 1.1; }
.chat-bubble.is-visible { animation: bubble 4.5s ease forwards; }
@keyframes bubble {
  0% { opacity: 0; transform: translate(-50%, 8px) scale(0.9); }
  6%, 85% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -6px) scale(1); }
}

.chat-dialog .share-dialog__head h2 { margin-right: auto; }
.chat-mute { font-size: 0.85rem; font-weight: 600; color: var(--muted); text-decoration: underline; min-height: 44px; }
.chat-mute[aria-pressed="true"] { color: var(--accent-text); }
.chat-log { list-style: none; margin: 0; padding: 0.25rem; display: flex; flex-direction: column; gap: 0.5rem; max-height: min(38vh, 320px); overflow-y: auto; overscroll-behavior: contain; }
.chat-log:empty { display: none; }
.chat-empty { margin: 0; text-align: center; }
.chat-msg { align-self: flex-start; max-width: 85%; display: flex; flex-direction: column; gap: 0.15rem; }
.chat-msg--mine { align-self: flex-end; align-items: flex-end; }
.chat-msg__meta { font-size: 0.75rem; color: var(--muted); }
.chat-msg__text { padding: 0.5rem 0.8rem; border-radius: 16px 16px 16px 4px; background: var(--surface-2); color: var(--ink); overflow-wrap: anywhere; }
.chat-msg--mine .chat-msg__text { border-radius: 16px 16px 4px 16px; background: var(--accent-soft); }
.chat-msg__text.is-emoji { padding: 0.1rem 0.3rem; background: none; font-size: 2rem; line-height: 1.15; }
.chat-quick { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chat-quick button {
  min-height: 44px;
  padding: 0 0.85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font: 600 0.95rem/1 var(--font-body);
  cursor: pointer;
}
.chat-quick button:hover { background: var(--surface-2); }
.chat-quick button:active { transform: scale(0.96); }
.chat-quick:not(.chat-quick--phrases) { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0.3rem; }
.chat-quick .chat-quick__emoji { min-width: 0; padding: 0; font-size: 1.4rem; }

/* Share buttons: brand-coloured round icons with the name underneath. */
.share-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.share {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  min-height: 78px;
  padding: 0.5rem 0.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.1s, border-color 0.15s;
}
.share:hover { color: var(--ink); border-color: var(--line-strong); }
.share:active { transform: scale(0.97); }
.share__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #ffffff; background: var(--share-color, var(--accent)); }
.share__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.share--whatsapp { --share-color: #25d366; }
.share--viber { --share-color: #7360f2; }
.share--telegram { --share-color: #229ed9; }
.share--facebook { --share-color: #1877f2; }
.share--sms { --share-color: #475569; }
.share--copy { --share-color: var(--accent); font: 600 0.85rem/1.3 var(--font-body); cursor: pointer; }
.share--copy.is-copied { border-color: var(--good); color: var(--good); }
.share--copy.is-copied .share__icon { background: var(--good); }
.match-box { border-top: 1px solid var(--line); padding-top: 0.75rem; }
.match-box__title { font-size: 0.8rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.4rem; }
.match-box__score { display: flex; flex-direction: column; gap: 0.3rem; }
.match-box__cell { display: flex; align-items: center; gap: 0.5rem; }
.match-box__name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.match-box__points { font-size: 1.3rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.resign-box { border-top: 1px solid var(--line); padding-top: 0.75rem; font-size: 0.9rem; }
.resign-confirm p { margin-bottom: 0.5rem; }
.resign-confirm .button { margin-right: 0.3rem; }
.help summary { cursor: pointer; color: var(--muted); font-size: 0.9rem; }

/* banner, toast, result */
.board-banner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 0.6rem 1.4rem;
  border-radius: 999px;
  background: var(--accent-grad);
  color: #ffffff;
  font-weight: 700;
  box-shadow: 0 8px 24px var(--accent-glow);
  pointer-events: none;
  opacity: 0;
}
.board-banner.is-visible { animation: banner 1.6s ease forwards; }
@keyframes banner {
  0% { opacity: 0; transform: translate(-50%, -40%) scale(0.95); }
  15%, 75% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -55%) scale(1); }
}

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 20px);
  max-width: min(92vw, 520px);
  padding: 0.75rem 1.1rem;
  border-radius: var(--radius-sm);
  background: var(--toast-bg);
  color: var(--toast-ink);
  box-shadow: 0 10px 30px rgba(8, 14, 28, 0.3);
  z-index: 50;
  opacity: 0;
  transition: opacity 0.25s, transform 0.25s;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.toast[data-kind="error"] { background: var(--danger-strong); }

.result {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(8, 14, 28, 0.5);
  backdrop-filter: blur(4px);
  z-index: 40;
  animation: fade-in 0.3s ease;
}
.result__card {
  position: relative;
  overflow: hidden;
  width: min(100%, 440px);
  background: var(--surface);
  border-radius: 18px;
  padding: 2rem 1.5rem 1.5rem;
  text-align: center;
  box-shadow: var(--shadow-lg);
  animation: pop-in 0.45s cubic-bezier(0.2, 1.4, 0.4, 1);
}
.result__title { font-size: 1.9rem; position: relative; }
.result__detail, .result__score { position: relative; }
.result__score { color: var(--muted); font-size: 0.92rem; }
.result__actions { position: relative; display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; margin-top: 1rem; }
.result__confetti { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.result.is-celebrating .result__confetti {
  opacity: 0.55;
  background-image:
    radial-gradient(circle, #ffc23d 3px, transparent 4px),
    radial-gradient(circle, #f0643c 3px, transparent 4px),
    radial-gradient(circle, #14b8a6 3px, transparent 4px),
    radial-gradient(circle, #2563eb 2px, transparent 3px);
  background-size: 70px 70px, 90px 90px, 110px 110px, 60px 60px;
  background-position: 0 0, 30px 20px, 50px 40px, 10px 50px;
  animation: confetti 2.4s linear infinite;
}
@keyframes confetti {
  from { background-position: 0 -70px, 30px -70px, 50px -70px, 10px -60px; }
  to { background-position: 0 140px, 30px 200px, 50px 260px, 10px 120px; }
}
@keyframes fade-in { from { opacity: 0; } }
@keyframes pop-in { from { transform: scale(0.85); opacity: 0; } }

@media (max-width: 960px) {
  .game { grid-template-columns: 1fr; }
  .game__panel { position: static; }
  .controls {
    position: sticky;
    bottom: 0;
    z-index: 5;
    background: var(--surface);
    padding: 0.5rem 0 calc(0.5rem + env(safe-area-inset-bottom, 0px));
  }
  .controls:not(:has(.button:not([hidden]))) { display: none; }
}

@media (max-width: 560px) {
  .site-main { padding-left: 0.6rem; padding-right: 0.6rem; }
  .site-footer { padding: 1.25rem 0.75rem; line-height: 1.9; }
  .page-game .site-footer { display: none; }  /* the board keeps the whole screen */
}

/* Phones and small tablets: the board fills the width, seen as from the
   player's seat (their side at the bottom), with slim player bars and the
   status and buttons right under it. Turning the phone sideways gives the
   largest board (see the landscape block below). */
@media (max-width: 820px) {
  .page-game .site-main { padding: 0.35rem 0.15rem 0.75rem; }
  .game { gap: 0.5rem; }
  .game__board { gap: 0.3rem; }
  .board { border-radius: 8px; box-shadow: 0 6px 18px rgba(19, 32, 58, 0.22); }
  .player-card { min-height: 40px; padding: 0.3rem 0.65rem; gap: 0.5rem; flex-wrap: nowrap; }
  .player-card__name { font-size: 0.95rem; }
  .player-card__stats { gap: 0.6rem; font-size: 0.78rem; white-space: nowrap; }
  .color-chip { width: 16px; height: 16px; }
  .clock { padding: 0 0.5rem; font-size: 0.85rem; }
  .game__panel { padding: 0.75rem; gap: 0.7rem; }
  .status-line { order: -2; font-size: 1rem; text-align: center; min-height: 0; }
  .controls { order: -1; }
  .invite-box { order: -1; }
  .controls .button--large { min-height: 50px; }
}

/* Phones held sideways: no header, the board takes the full height and the
   player bars and controls move to a column beside it. */
@media (orientation: landscape) and (max-height: 520px) {
  .page-game .site-header { display: none; }
  .page-game .site-main { max-width: none; padding: 0.4rem calc(0.5rem + env(safe-area-inset-right, 0px)) 0.4rem calc(0.5rem + env(safe-area-inset-left, 0px)); }
  .game {
    height: calc(100dvh - 0.8rem);
    grid-template-columns: auto minmax(220px, 1fr);
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "board top" "board panel" "board bottom";
    gap: 0.4rem 0.6rem;
    align-items: start;
  }
  .game__board { display: contents; }
  .board-frame { grid-area: board; }
  .player-card--top { grid-area: top; }
  .player-card--bottom { grid-area: bottom; }
  .board { height: calc(100dvh - 0.8rem); width: auto; max-width: calc(100vw - 250px); }
  .game__panel { grid-area: panel; position: static; align-self: stretch; min-height: 0; overflow-y: auto; padding: 0.6rem; gap: 0.6rem; }
  .status-line { order: -2; font-size: 0.95rem; min-height: 0; }
  .controls { order: -1; position: static; padding: 0; }
  .player-card { min-height: 40px; padding: 0.3rem 0.65rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ==========================================================================
   Lobby: matchmaking and open games
   ========================================================================== */

.play-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.5rem; }

/* The two big choices at the top of the lobby. Selectors carry two classes so
   they win over the generic submit-button styles. */
.play-choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 0.75rem; }
.play-choices .choice {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  min-height: 96px;
  margin: 0;
  padding: 1rem 1.15rem;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform 0.1s, box-shadow 0.15s, border-color 0.15s;
}
.play-choices .choice:hover { border-color: var(--accent); background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.play-choices .choice:active { transform: translateY(1px); }
.play-choices .choice--primary,
.play-choices .choice--primary:hover { border-color: transparent; background: var(--accent-grad); color: #ffffff; box-shadow: 0 6px 18px var(--accent-glow); }
.choice__icon { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: linear-gradient(135deg, #f59e0b, #f0643c); color: #ffffff; }
.choice--primary .choice__icon { background: rgba(255, 255, 255, 0.2); }
.choice__icon svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.choice__text { display: flex; flex-direction: column; gap: 0.2rem; }
.choice__title { font-size: 1.3rem; font-weight: 800; letter-spacing: -0.01em; }
.choice__hint { font-size: 0.95rem; line-height: 1.4; color: var(--muted); }
.choice--primary .choice__hint { color: rgba(255, 255, 255, 0.88); }

/* Optional settings folded away under the choices. */
.game-options { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: 0.75rem; }
.game-options summary { cursor: pointer; color: var(--ink-soft); font-weight: 600; min-height: 36px; display: flex; align-items: center; gap: 0.5rem; list-style: none; }
.game-options summary::-webkit-details-marker { display: none; }
.game-options summary::before { content: ""; width: 0.5rem; height: 0.5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform 0.2s; }
.game-options[open] summary::before { transform: rotate(45deg); }
.game-options[open] summary { margin-bottom: 0.6rem; }

/* Invitation page (opened from a shared link). */
.invite-page { padding: 2rem 1.25rem; }
.invite-page h1 { font-size: clamp(1.6rem, 6vw, 2.1rem); }
.invite-page__badge { display: inline-grid; place-items: center; width: 72px; height: 72px; margin-bottom: 1rem; border-radius: 22px; background: var(--accent-grad); color: #ffffff; box-shadow: 0 8px 22px var(--accent-glow); }
.invite-page__badge svg { width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-width: 2; }
.invite-page__actions { display: flex; flex-direction: column; gap: 0.6rem; }
.invite-page__go { width: 100%; min-height: 58px; font-size: 1.15rem; }
.invite-page__details { text-align: left; margin-top: 1.5rem; }
.hero__login { margin: 0.9rem 0 0; color: var(--muted); }
.stack-form .play-actions .button { margin-top: 0; align-self: auto; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.card-head h2 { margin: 0; }
.inline-label { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; }
.inline-label select { width: auto; min-height: 38px; }
.badge--warning { background: var(--warn-soft); border-color: var(--warn-border); color: var(--warn-text); }

.search-status { display: grid; grid-template-columns: auto 1fr; gap: 0.9rem 1rem; align-items: center; padding: 0.5rem 0; }
.search-status .button, .search-status > p { grid-column: 1 / -1; margin: 0; }
.search-status__text { display: flex; flex-direction: column; gap: 0.15rem; }
.search-status__text strong { font-size: 1.1rem; }
.search-status__pulse { position: relative; width: 56px; height: 56px; }
.search-status__pulse span {
  position: absolute;
  top: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  animation: seek-bounce 1.4s ease-in-out infinite;
}
.search-status__pulse span:first-child { left: 0; background: radial-gradient(circle at 40% 35%, #ffffff, #e6dccb); border: 1.5px solid var(--checker-light-edge); }
.search-status__pulse span:last-child { right: 0; background: radial-gradient(circle at 40% 35%, #44506a, #070b14); border: 1.5px solid var(--checker-dark-edge); animation-delay: 0.7s; }
@keyframes seek-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.seek-list { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.seek-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.7rem 0;
  border-top: 1px solid var(--line);
}
.seek-row:first-child { border-top: 0; }
.seek-row.is-own { background: var(--accent-soft); border-radius: 10px; padding-left: 0.6rem; padding-right: 0.6rem; }
.seek-row__info { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.seek-row__who { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.seek-row__rating { font-weight: 700; font-variant-numeric: tabular-nums; padding: 0 0.45rem; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line); }
.seek-row__details { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.seek-row__confirm { max-width: 420px; }
.seek-row__confirm p { margin-bottom: 0.4rem; }
.seek-row__confirm .button { margin-right: 0.3rem; }

.proposal h2 { margin-bottom: 0.6rem; }
.proposal__players { font-weight: 600; }
.proposal__gap { color: var(--accent-text); }
.proposal__state { min-height: 1.4em; font-weight: 600; color: var(--good); }
.proposal__timer { height: 6px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin: 0.5rem 0 0.25rem; }
.proposal__timer span { display: block; height: 100%; background: var(--accent-grad); transform-origin: left center; transition: transform 1s linear; }

/* ==========================================================================
   Home, rules and leaderboard pages
   ========================================================================== */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.site-footer nav { margin-bottom: 0.4rem; }
.site-footer__legal { font-size: 0.82rem; }
.auth-legal { margin: 1rem 0 0; }

/* legal pages (terms, privacy, cookies) */
.legal h2 { font-size: 1.2rem; }
.legal-table td { white-space: normal; vertical-align: top; }
.legal-table code { font-size: 0.85rem; white-space: nowrap; }
.site-footer a { color: var(--muted); }

.page-home .hero { padding-bottom: 1.75rem; }
.page-home .hero h1 { font-size: clamp(2.3rem, 5.5vw, 3.6rem); letter-spacing: -0.04em; line-height: 1.05; margin-bottom: 0.3em; background: var(--headline); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__tagline { font-size: clamp(1.25rem, 2.6vw, 1.6rem); font-weight: 700; letter-spacing: -0.02em; color: var(--accent-text); margin-bottom: 0.35em; }
/* The dice of the hero illustration give a little roll every few seconds. */
.art-die { transform-box: fill-box; transform-origin: center; animation: art-die-roll 6s cubic-bezier(0.3, 0.7, 0.4, 1) infinite; }
.art-die--second { animation-delay: 0.12s; }
@keyframes art-die-roll {
  0%, 78% { transform: translateY(0) rotate(0deg); }
  86% { transform: translateY(-14px) rotate(200deg); }
  94% { transform: translateY(0) rotate(360deg); }
  97% { transform: translateY(-3px) rotate(360deg); }
  100% { transform: translateY(0) rotate(360deg); }
}

.home-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.home-grid > .card { margin-bottom: 0; }
.home-grid .card-head { margin-bottom: 0.3rem; }
.home-rules { text-align: center; margin: 1.75rem 0 0; font-size: 1.05rem; }
.empty-state { text-align: center; padding: 1rem 0 0.5rem; }
.empty-state p { color: var(--muted); max-width: 46ch; margin: 0 auto 1rem; }

.rating-chip { font-weight: 700; font-variant-numeric: tabular-nums; padding: 0 0.45rem; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line); }
.cell-action { text-align: right; }
.seek-table td, .leader-table td { white-space: normal; vertical-align: middle; }
.leader-table tr.is-me td { background: var(--accent-soft); }
.rank { display: inline-grid; place-items: center; min-width: 1.8rem; height: 1.8rem; border-radius: 50%; font-weight: 700; font-variant-numeric: tabular-nums; }
.rank--1 { background: #f2c14e; color: #4a3500; }
.rank--2 { background: #d9d9d9; color: #3a3a3a; }
.rank--3 { background: #d79b6a; color: #45220a; }
.my-rank { padding: 1rem 1.4rem; }
.my-rank a { margin-left: 0.5rem; }

.breadcrumbs { font-size: 0.88rem; color: var(--muted); margin-bottom: 0.75rem; }
.breadcrumbs a { color: var(--muted); }

.rules { max-width: 860px; margin: 0 auto; }
.rules__head { margin-bottom: 1.25rem; }
.rules section { margin-bottom: 1.75rem; scroll-margin-top: 1rem; }
.rules section > h2 { font-size: 1.45rem; }
.rules p, .rules li { line-height: 1.7; }
.rules ul { padding-left: 1.2rem; }
.rules__toc ol { columns: 2; column-gap: 2rem; margin: 0; padding-left: 1.3rem; }
.rules__toc li { margin-bottom: 0.25rem; break-inside: avoid; }
.rules__summary ul { margin: 0; }
.rules__figure { margin: 0 0 1rem; }
.rules__figure svg { width: 100%; max-width: 560px; display: block; margin: 0 auto; filter: drop-shadow(0 12px 28px rgba(21, 41, 74, 0.25)); }
.rules__figure figcaption { text-align: center; color: var(--muted); font-size: 0.9rem; margin-top: 0.6rem; }
.rules__cta { text-align: center; }
.diagram-zone--dark { fill: rgba(19, 32, 58, 0.07); }
.diagram-zone--light { fill: var(--home-tint); }
.diagram-path { fill: none; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 2 9; }
.diagram-path--light { stroke: #ffffff; }
.diagram-path--dark { stroke: var(--board-frame); }
.diagram-arrow--light { fill: #ffffff; }
.diagram-arrow--dark { fill: var(--board-frame); }
.diagram-label { font: 700 15px var(--font-body); fill: var(--felt-ink); }

@media (max-width: 900px) {
  .home-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .rules__toc ol { columns: 1; }
  /* Open games become stacked cards on phones. */
  .seek-table thead { display: none; }
  .seek-table, .seek-table tbody, .seek-table tr, .seek-table td { display: block; width: 100%; }
  .seek-table tr { padding: 0.6rem 0; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto; gap: 0.15rem 0.75rem; }
  .seek-table td { border: 0; padding: 0; }
  .seek-table td:first-child { grid-column: 1; }
  .seek-table td:nth-child(2) { grid-column: 2; grid-row: 1; text-align: right; }
  .seek-table td:nth-child(3), .seek-table td:nth-child(4) { grid-column: 1; font-size: 0.88rem; }
  .seek-table .cell-action { grid-column: 2; grid-row: 2 / span 2; align-self: center; }
}

@media (max-width: 760px) {
  /* Phones: a compact board illustration on top, then the centred headline
     and two full-width buttons of the same size. */
  .page-home .hero { padding-top: 0.25rem; gap: 1.25rem; text-align: center; }
  .page-home .hero__art { width: 100%; max-width: min(340px, 40vh); margin: 0 auto; }
  .page-home .hero__actions { display: grid; grid-template-columns: 1fr; gap: 0.6rem; max-width: 360px; margin: 1.25rem auto 0; }
  .page-home .hero__actions .button { width: 100%; min-width: 0; }
}

@media (max-width: 560px) {
  .site-nav .user-chip { max-width: 10rem; }
  .nav-signout span { display: none; }  /* icon only on small screens */
}

/* -- phone navigation: a tab bar at the bottom ------------------------------
   The header keeps only the logo and the theme switch; menu links and the
   account move to the tab bar. During a game the tab bar is hidden so the
   board and the move buttons keep the whole screen. */

.tab-bar { display: none; }

@media (max-width: 640px) {
  .site-header__inner { flex-wrap: nowrap; padding: 0.5rem 0.85rem 0.6rem; }
  .site-nav__links, .site-nav .nav-account { display: none; }
  .site-nav { gap: 1rem; }
  /* bigger touch targets */
  .lang-switch { height: 40px; }
  .site-nav .lang-switch__option { min-width: 40px; height: 32px; }
  .site-nav button.theme-toggle { width: 40px; height: 40px; }

  body:not(.page-game) { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); }
  body:not(.page-game) .tab-bar { display: grid; }
  body:not(.page-game) .toast { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }

  .tab-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    grid-template-columns: repeat(4, 1fr);
    padding: 0.3rem 0.25rem calc(0.3rem + env(safe-area-inset-bottom, 0px));
    background: var(--surface);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 20px rgba(19, 32, 58, 0.08);
  }
  .tab-bar__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 54px;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 600;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .tab-bar__item:hover { color: var(--ink); }
  .tab-bar__icon { display: grid; place-items: center; width: 58px; height: 30px; border-radius: 999px; transition: background 0.2s, transform 0.15s; }
  .tab-bar__item:active .tab-bar__icon { transform: scale(0.92); }
  .tab-bar__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
  .tab-bar__item.is-current { color: var(--accent-text); }
  .tab-bar__item.is-current .tab-bar__icon { background: var(--accent-soft); }
  .tab-bar__avatar { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--user); color: #ffffff; font-size: 0.75rem; font-weight: 700; }
}

/* ==========================================================================
   Computer opponent, rematch and replay
   ========================================================================== */

/* "Sau joacă cu calculatorul" under the home buttons, and the offer while
   searching in the lobby: quiet links. */
.hero__computer { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem 0.75rem; margin: 1rem 0 0; }
@media (max-width: 760px) {
  .page-home .hero__computer { justify-content: center; }
}
/* Plain link look; submit buttons are styled as buttons site-wide, hence the attribute selector. */
.computer-link, button[type="submit"].computer-link, button[type="submit"].computer-link:hover {
  display: inline-flex; align-items: center; gap: 0.45rem; min-height: 0; padding: 0.35rem 0;
  border: 0; background: none; box-shadow: none; color: var(--accent-text); font: 600 1rem/1.3 var(--font-body); text-decoration: none;
}
.computer-link:hover span { text-decoration: underline; }
.computer-icon, .computer-link svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.choice--computer .choice__icon { background: linear-gradient(135deg, #14b8a6, #0e7490); }
.search-status__computer { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem 0.75rem; padding-top: 0.6rem; border-top: 1px dashed var(--line-strong); }

/* Rematch (game panel and result dialog) */
.rematch-box { display: flex; flex-direction: column; gap: 0.6rem; border-top: 1px solid var(--line); padding-top: 0.75rem; }
.rematch-box__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.rematch-box__actions .button { flex: 1 1 auto; }
.rematch-note { margin: 0; font-weight: 600; font-size: 0.95rem; color: var(--muted); }
.rematch-note.is-incoming { color: var(--accent-text); }
.result__card .rematch-note { position: relative; margin-top: 0.75rem; text-align: center; }

/* Replay links (history tables, game panel) */
.replay-link { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 600; white-space: nowrap; }
.replay-link svg { width: 14px; height: 14px; fill: currentColor; }
.table__action { white-space: nowrap; }

/* Replay page */
.page-replay .presence { display: none; }
.page-replay .replay__head { order: -10; }  /* above the status line, also where phones reorder the panel */
.replay__head h1 { font-size: 1.35rem; margin: 0 0 0.15rem; }
.replay__head p { margin: 0; }
.replay__status { min-height: 3em; }
.replay-controls { display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
.replay-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-height: 0;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface);
  color: var(--ink);
  box-shadow: none;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.replay-btn:hover:not(:disabled) { background: var(--surface-2); }
.replay-btn:active:not(:disabled) { transform: scale(0.94); }
.replay-btn:disabled { opacity: 0.35; cursor: default; }
.replay-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.replay-btn--play { width: 58px; height: 58px; border: 0; background: var(--accent-grad); color: var(--accent-ink); box-shadow: 0 4px 14px var(--accent-glow); }
.replay-btn--play:hover:not(:disabled) { background: var(--accent-grad-strong); }
.replay-btn--play svg { width: 24px; height: 24px; }
.replay-btn__play { fill: currentColor; stroke: none; }
.replay-btn__pause { display: none; stroke-width: 3.2; }
.replay-btn--play.is-playing .replay-btn__play { display: none; }
.replay-btn--play.is-playing .replay-btn__pause { display: block; }
.replay-scrub { display: flex; flex-direction: column; gap: 0.3rem; }
.replay-slider { width: 100%; accent-color: var(--accent); min-height: 0; padding: 0; }
.replay-counter { text-align: center; font-variant-numeric: tabular-nums; }
.replay-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.25rem; border-top: 1px solid var(--line); padding-top: 0.75rem; font-size: 0.92rem; }