/* ---- Web fonts ---- */
/* Copied from the Google Fonts css2 response for the weights this app uses, so
   the browser needs no render-blocking request to fonts.googleapis.com before it
   can start fetching a face. The Greek, Cyrillic and Vietnamese subsets were
   dropped because no string here uses them.

   The second face per family is not Google's latin-ext subset. Every UI string
   is ASCII - Serbian is written here without diacritics, on purpose - so the
   only text that can reach beyond Latin-1 is a display name somebody typed, and
   the only one of those this audience types is South Slavic. Google's latin-ext
   subset of Noto Serif is 186,628 bytes to serve that; this one is 4,308.
   unicode-range gates the download, so an ASCII name costs nothing at all, and
   a name outside the range below renders in the stack's next font.

   The range is what the file draws, not what was asked for. The subset was
   requested as ten letters, but the subsetter closes over the accents those
   letters share, so both files also carry S-acute and Z-acute (U+015A-015B,
   U+0179-017A) as glyphs of their own. Declaring them costs no bytes and keeps
   a name that uses one from rendering half in a fallback face. Wider than the
   file downloads it for a letter it cannot draw; narrower leaves a letter it
   can draw to the fallback.

   Regenerate (the browser user agent is what makes Google answer in woff2):
   curl -A 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36' \
     'https://fonts.googleapis.com/css2?family=Noto+Serif:wght@400;500;600;700&family=Work+Sans:wght@400;500;600;700&display=swap'
   and for the South Slavic faces, the same with
     &text=%C4%86%C4%87%C4%8C%C4%8D%C4%90%C4%91%C5%A0%C5%A1%C5%BD%C5%BE

   That response does declare a range, and it is the one to read the file's real
   coverage out of. It is copied here with two groups dropped. Bare C, S and Z
   (U+43, U+53, U+5A and lowercase) are in the subset file, but the latin face
   above already draws them on every page, so listing them here would be a
   second face claiming letters the first one has covered since before this file
   existed - keeping the two ranges disjoint means nothing depends on which face
   a browser prefers when both match. Combining acute and caron (U+301, U+30C)
   are dropped for a duller reason: a zero-width mark cannot be width-tested, so
   whether these files really draw them was never confirmed here. An NFD name
   therefore still takes its mark from a system fallback. */

/* Noto Serif 400 - latin */
@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/noto-serif-latin.woff2)
    format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Noto Serif 500 - latin */
@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/noto-serif-latin.woff2)
    format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Noto Serif 600 - latin */
@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/noto-serif-latin.woff2)
    format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Noto Serif 700 - latin */
@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/noto-serif-latin.woff2)
    format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Noto Serif 400 - South Slavic */
@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/noto-serif-south-slavic.woff2)
    format('woff2');
  unicode-range: U+0106-0107, U+010C-010D, U+0110-0111, U+015A-015B, U+0160-0161, U+0179-017A,
    U+017D-017E;
}
/* Noto Serif 500 - South Slavic */
@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/noto-serif-south-slavic.woff2)
    format('woff2');
  unicode-range: U+0106-0107, U+010C-010D, U+0110-0111, U+015A-015B, U+0160-0161, U+0179-017A,
    U+017D-017E;
}
/* Noto Serif 600 - South Slavic */
@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/noto-serif-south-slavic.woff2)
    format('woff2');
  unicode-range: U+0106-0107, U+010C-010D, U+0110-0111, U+015A-015B, U+0160-0161, U+0179-017A,
    U+017D-017E;
}
/* Noto Serif 700 - South Slavic */
@font-face {
  font-family: 'Noto Serif';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(/assets/fonts/noto-serif-south-slavic.woff2)
    format('woff2');
  unicode-range: U+0106-0107, U+010C-010D, U+0110-0111, U+015A-015B, U+0160-0161, U+0179-017A,
    U+017D-017E;
}
/* Work Sans 400 - latin */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/work-sans-latin.woff2)
    format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Work Sans 500 - latin */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/work-sans-latin.woff2)
    format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Work Sans 600 - latin */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/work-sans-latin.woff2)
    format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Work Sans 700 - latin */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/work-sans-latin.woff2)
    format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304,
    U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Work Sans 400 - South Slavic */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/work-sans-south-slavic.woff2)
    format('woff2');
  unicode-range: U+0106-0107, U+010C-010D, U+0110-0111, U+015A-015B, U+0160-0161, U+0179-017A,
    U+017D-017E;
}
/* Work Sans 500 - South Slavic */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/work-sans-south-slavic.woff2)
    format('woff2');
  unicode-range: U+0106-0107, U+010C-010D, U+0110-0111, U+015A-015B, U+0160-0161, U+0179-017A,
    U+017D-017E;
}
/* Work Sans 600 - South Slavic */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/assets/fonts/work-sans-south-slavic.woff2)
    format('woff2');
  unicode-range: U+0106-0107, U+010C-010D, U+0110-0111, U+015A-015B, U+0160-0161, U+0179-017A,
    U+017D-017E;
}
/* Work Sans 700 - South Slavic */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/assets/fonts/work-sans-south-slavic.woff2)
    format('woff2');
  unicode-range: U+0106-0107, U+010C-010D, U+0110-0111, U+015A-015B, U+0160-0161, U+0179-017A,
    U+017D-017E;
}

/* ---- Editorial Tactility design tokens ---- */
:root {
  color-scheme: dark;

  /* ---- Canonical surfaces ---- */
  --surface: #03170b;
  --surface-container-lowest: #001206;
  --surface-container-low: #0b2013;
  --surface-container: #0f2417;
  --surface-container-high: #172c1f;
  --surface-container-highest: #24392b;
  --surface-bright: #293e2f;

  /* ---- Material colors ---- */
  --primary: #d8c4a2;
  --primary-fixed: #f5e0bd;
  --primary-fixed-dim: #d8c4a2;
  --on-primary: #3b2f17;
  --secondary: #b6ccb7;
  --tertiary: #e9bf90;
  --outline-variant: #434843;

  /* ---- Legacy aliases retained for existing selectors ---- */
  --gold: var(--primary);
  --gold-glow: var(--primary-fixed);
  --on-gold: var(--on-primary);

  /* ---- Felt atmosphere ---- */
  --table-glow: color-mix(in oklch, var(--surface-container-highest) 68%, var(--tertiary));
  --felt-ink: var(--surface-container-lowest);
  --felt-vein: color-mix(in oklch, var(--primary) 5%, transparent);

  /* ---- Text (warm ivory) ---- */
  --ivory: #f1eadc;
  --ivory-dim: #d0e9d4;
  --ivory-faint: #c3c8c1;
  --on-surface: var(--ivory-dim);
  --on-surface-variant: var(--ivory-faint);

  /* ---- Primary accent (warm gold) ---- */
  --gold-soft: color-mix(in oklch, var(--gold) 12%, transparent);
  --gold-wash: color-mix(in oklch, var(--gold) 6%, transparent);

  /* ---- Wood/parchment accents ---- */
  --wood: #513922;
  --wood-dark: #2e2116;
  --parchment: var(--primary);

  /* ---- Cards (ivory paper) ---- */
  --card-face: var(--primary-fixed);
  --red-suit: #8d3d34;
  --black-suit: #203126;

  /* ---- Phase-driven color temperature ---- */
  --phase-neutral: var(--gold);
  --phase-warm: oklch(0.68 0.14 50);
  --phase-cool: oklch(0.66 0.07 220);
  --phase-complete: oklch(0.70 0.10 145);

  /* ---- Status ---- */
  --ok: #92c9a0;
  --warn: var(--tertiary);
  --danger: #c7796d;

  /* ---- Status tints (derived via color-mix) ---- */
  --tint-ok: color-mix(in oklch, var(--ok) 8%, transparent);
  --tint-ok-strong: color-mix(in oklch, var(--ok) 14%, transparent);
  --tint-warn-strong: color-mix(in oklch, var(--warn) 14%, transparent);
  --tint-danger-strong: color-mix(in oklch, var(--danger) 14%, transparent);
  --tint-accent: color-mix(in oklch, var(--gold) 12%, transparent);

  /* ---- Ghost borders & overlays ---- */
  --ghost-border: color-mix(in srgb, var(--outline-variant) 15%, transparent);
  --ghost-border-strong: color-mix(in srgb, var(--outline-variant) 28%, transparent);
  --rule-faint: var(--ghost-border);
  --rule: var(--ghost-border-strong);

  /* ---- Ambient shadows: green-tinted, diffused, never pure black ---- */
  --shadow-sm: 0 10px 24px color-mix(in srgb, var(--surface-container-lowest) 7%, transparent);
  --shadow-md: 0 18px 38px color-mix(in srgb, var(--surface-container-lowest) 9%, transparent);
  --shadow-lg: 0 24px 46px color-mix(in srgb, var(--surface-container-lowest) 10%, transparent);
  --shadow-dramatic: 0 30px 70px color-mix(
    in srgb,
    var(--surface-container-lowest) 12%,
    transparent
  );
  --shadow-inset: inset 0 12px 28px color-mix(
    in srgb,
    var(--surface-container-lowest) 8%,
    transparent
  );

  /* ---- Spacing (4px base) ---- */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s6: 24px;
  --s8: 32px;

  /* ---- Radius ---- */
  --r: 6px;
  --r-lg: 8px;
  --r-card: 6px;
  --r-xl: 12px;
  --r-pill: 999px;

  /* ---- Typography ---- */
  --font: "Noto Serif", Georgia, serif;
  --font-ui: "Work Sans", system-ui, sans-serif;
  --font-mono: ui-monospace, monospace;

  /* ---- Fluid type scale (Major Third 1.25) ---- */
  --step--3: clamp(0.51rem, 0.46rem + 0.19vw, 0.58rem);
  --step--2: clamp(0.64rem, 0.58rem + 0.24vw, 0.72rem);
  --step--1: clamp(0.75rem, 0.69rem + 0.30vw, 0.88rem);
  --step-0: clamp(0.88rem, 0.81rem + 0.36vw, 1.0rem);
  --step-1: clamp(1.0rem, 0.94rem + 0.45vw, 1.25rem);
  --step-2: clamp(1.25rem, 1.13rem + 0.56vw, 1.56rem);
  --step-3: clamp(1.56rem, 1.38rem + 0.70vw, 1.95rem);
  --step-4: clamp(1.95rem, 1.69rem + 0.88vw, 2.44rem);

  /* ---- Touch targets ---- */
  --touch-min: 44px;

  /* ---- Safe area insets (notched devices) ---- */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  /* ---- Card dimensions (responsive) ---- */
  --card-w: clamp(48px, 12.5vw, 78px);
  --card-h: calc(var(--card-w) * 1.43);

  /* ---- Content constraint ---- */
  --content-max: 72rem;
  --gutter: clamp(var(--s4), 3vw, var(--s8));
}

/* ---- Reset ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--tertiary) 82%, transparent);
  outline-offset: 3px;
}

/* Eliminate 300ms tap delay and tap highlight on mobile */
a,
button,
[role="button"],
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* ---- Base ---- */
html {
  background-color: var(--surface);
}

body {
  font-family: var(--font-ui);
  font-size: var(--step-0);
  color: var(--ivory);
  background-color: var(--surface);
  background-image:
    radial-gradient(
    ellipse 76% 54% at 56% 18%,
    color-mix(in srgb, var(--surface-bright) 34%, transparent),
    transparent 62%
  ),
    radial-gradient(
    ellipse 90% 80% at 48% 58%,
    color-mix(in srgb, var(--surface-container) 72%, transparent),
    transparent 74%
  ),
    linear-gradient(180deg, var(--surface) 0%, var(--surface-container-lowest) 100%);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: calc(var(--safe-top) + var(--s2));
  left: var(--s2);
  transform: translateY(-150%);
  padding: var(--s2) var(--s3);
  border-radius: var(--r);
  background: var(--primary);
  color: var(--on-primary);
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--shadow-md);
  transition: transform 0.16s ease;
}

.skip-link:focus-visible {
  transform: translateY(0);
}

.lang-toggle {
  position: fixed;
  z-index: 30;
  top: calc(var(--safe-top) + var(--s2));
  right: calc(env(safe-area-inset-right, 0px) + var(--s2));
}

.lang-toggle form {
  display: inline-flex;
  gap: 0;
  padding: 2px;
  border-radius: var(--r);
  /* No backdrop-filter: this toggle is on-screen for the whole game, and a
     persistent backdrop-filter layer makes iOS Safari re-rasterize and flash
     the whole viewport white every few seconds while idle (mobile-only, engine
     bug; desktop and reduced-motion are unaffected). Use a near-solid plaque
     instead of frosting the felt behind it. */
  background: color-mix(in srgb, var(--surface-container) 96%, transparent);
  box-shadow: inset 0 0 0 1px var(--ghost-border), var(--shadow-sm);
}

.lang-toggle button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--on-surface-variant);
  font-family: var(--font-ui);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.06rem;
  text-transform: uppercase;
  min-width: var(--touch-min);
  min-height: var(--touch-min);
  padding: 4px 10px;
  border-radius: calc(var(--r) - 2px);
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease;
}

.lang-toggle button[aria-current="true"] {
  background: var(--primary);
  color: var(--on-primary);
  box-shadow: var(--shadow-sm);
}

.lang-toggle button:not([aria-current="true"]):hover {
  color: var(--on-surface);
  background: color-mix(in srgb, var(--surface-container-highest) 70%, transparent);
}

.lang-toggle button:focus-visible {
  outline: 2px solid var(--primary-fixed);
  outline-offset: 2px;
}

a {
  color: var(--primary-fixed);
  text-decoration-color: color-mix(in srgb, var(--primary) 48%, transparent);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 0.08em;
}

@media (hover: hover) {
  a {
    text-decoration-color: color-mix(in srgb, var(--primary) 34%, transparent);
  }
  a:hover {
    text-decoration-color: var(--primary-fixed);
  }
}

.muted {
  color: var(--on-surface-variant);
  font-size: var(--step--1);
}

/* ---- Utility classes ---- */
.stack {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.toolbar {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
}

.spread {
  justify-content: space-between;
}

.eyebrow {
  font-family: var(--font-ui);
  font-size: var(--step--2);
  text-transform: uppercase;
  letter-spacing: 0.05rem;
  color: var(--tertiary);
  font-weight: 500;
}

.pill {
  font-size: var(--step--2);
  background: var(--surface-container-highest);
  padding: 4px 10px;
  border-radius: var(--r);
  box-shadow: inset 0 0 0 1px var(--ghost-border);
  white-space: nowrap;
  color: var(--on-surface);
  letter-spacing: 0.05rem;
  text-transform: uppercase;
}

.mono {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  white-space: pre-wrap;
  word-break: break-all;
}

/* ---- Cross-document view transitions (full page loads) ---- */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.24s;
  animation-timing-function: ease;
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

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

/* ---- Shared form styles (join + home) ---- */
.join-card label,
.home-label {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  font-size: var(--step--1);
  color: var(--ivory-dim);
}

.join-card input[type="text"],
.home-input {
  font-size: var(--step-0);
  padding: var(--s3) var(--s3);
  min-height: var(--touch-min);
  border-radius: var(--r);
  border: none;
  outline: 1px solid var(--ghost-border);
  outline-offset: -1px;
  background: var(--surface-container-highest);
  color: var(--ivory);
  transition: outline-color 0.12s ease, background 0.12s ease;
}

.join-card input[type="text"]:focus,
.home-input:focus {
  outline-color: color-mix(in srgb, var(--tertiary) 58%, transparent);
  background: var(--surface-bright);
}

/* ---- Checkbox row (home launcher) ----
   .home-label stacks its label above its control; a checkbox reads as a row,
   so it gets its own class rather than a modifier on that one. */
.home-check {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--s3);
  min-height: var(--touch-min);
  font-size: var(--step--1);
  color: var(--ivory-dim);
  cursor: pointer;
}

.home-checkbox {
  flex: none;
  width: var(--s4);
  height: var(--s4);
  accent-color: var(--tertiary);
  cursor: pointer;
}

.home-checkbox:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--tertiary) 58%, transparent);
  outline-offset: 2px;
}

/* A measure, so the sentence wraps on its own terms rather than on whatever
   width the card happens to have. */
.home-check-hint {
  margin: 0;
  font-size: var(--step--2);
  max-width: 52ch;
}

/* The placeholder is the example address, so it has to fit: at --step-0 the
   two side-by-side inputs clipped "west@example.com" to "west@example.con" on a
   desktop card. One step down still reads comfortably and holds the whole
   address at every width the pair is shown at. */
.home-input[type="email"] {
  font-size: var(--step--1);
}

/* ===========================================================================
   Home page: Anteroom layout (mobile-first)
   =========================================================================== */

body.home-page {
  min-height: 100dvh;
  background: var(--surface);
}

.anteroom {
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  position: relative;
  isolation: isolate;
}

.home-card-backdrop {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}

.home-bg-card {
  position: absolute;
  display: grid;
  align-content: start;
  justify-items: start;
  gap: 2px;
  width: clamp(92px, 8.8vw, 138px);
  aspect-ratio: 0.7;
  padding: clamp(10px, 1vw, 15px);
  border-radius: var(--r-card);
  color: color-mix(in srgb, var(--on-primary) 78%, transparent);
  background: linear-gradient(
    145deg,
    color-mix(in srgb, var(--card-face) 78%, transparent),
    color-mix(in srgb, var(--primary-fixed-dim) 48%, transparent)
  );
  box-shadow:
    0 28px 76px color-mix(in srgb, var(--surface-container-lowest) 24%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--primary-fixed) 34%, transparent);
  opacity: 0.27;
  filter: saturate(0.86);
  transform-origin: center;
}

.home-bg-card span:first-child {
  font-family: var(--font);
  font-size: clamp(1.35rem, 1.6vw, 2rem);
  font-weight: 600;
  line-height: 1;
}

.home-bg-card span:last-child {
  font-size: clamp(1.1rem, 1.35vw, 1.7rem);
  line-height: 1;
}

.home-bg-card.suit-hearts,
.home-bg-card.suit-diamonds {
  color: color-mix(in srgb, var(--red-suit) 88%, transparent);
}

.home-bg-card.suit-spades,
.home-bg-card.suit-clubs {
  color: color-mix(in srgb, var(--black-suit) 92%, transparent);
}

.home-bg-card-1 {
  top: 5%;
  right: clamp(-88px, -5vw, -42px);
  transform: rotate(-10deg);
}

.home-bg-card-2 {
  top: 16%;
  right: clamp(-18px, 2vw, 30px);
  opacity: 0.14;
  transform: rotate(8deg);
}

.home-bg-card-3 {
  right: clamp(-96px, -4vw, -48px);
  bottom: 5%;
  opacity: 0.13;
  transform: rotate(13deg);
}

.home-bg-card-4 {
  right: clamp(44px, 7vw, 112px);
  bottom: -8%;
  opacity: 0.12;
  transform: rotate(-7deg);
}

.anteroom-slab {
  position: relative;
  z-index: 1;
  background: var(--surface-container-low);
  padding: var(--s4) var(--gutter);
  padding-top: calc(var(--s4) + var(--safe-top));
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.inscription {
  font-family: var(--font);
  font-size: var(--step-4);
  font-weight: 700;
  color: var(--ivory);
  letter-spacing: 0;
  line-height: 1.1;
}

.anteroom-scroll {
  position: relative;
  z-index: 1;
  padding: var(--gutter);
  padding-bottom: calc(var(--gutter) + var(--safe-bottom));
  display: grid;
  align-content: center;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(var(--s4), 3vw, var(--s6));
  overflow-y: auto;
}

.anteroom-footer {
  position: relative;
  z-index: 1;
  padding-inline: max(var(--gutter), var(--safe-left)) max(var(--gutter), var(--safe-right));
  padding-block-end: max(var(--s2), var(--safe-bottom));
  pointer-events: none;
  display: flex;
  align-items: baseline;
  gap: var(--s3);
}

.anteroom-footer .muted {
  font-size: var(--step--2);
  opacity: 0.64;
}

/* The footer sets pointer-events: none so the decorative card backdrop behind
   it stays reachable; anything actually clickable in there has to opt back in. */
.anteroom-footer-link {
  pointer-events: auto;
  font-size: var(--step--2);
  color: var(--ivory-dim);
  text-decoration-color: color-mix(in srgb, var(--primary-fixed) 40%, transparent);
  text-underline-offset: 0.25em;
}

.anteroom-footer-link:hover {
  color: var(--primary-fixed);
}

@media (max-width: 639.98px) {
  .anteroom-slab {
    padding-top: calc(var(--safe-top) + var(--touch-min) + var(--s4));
  }

  .home-bg-card {
    opacity: 0.27;
  }

  .home-bg-card-1 {
    top: 72px;
    right: 4px;
  }

  .home-bg-card-2 {
    top: 312px;
    right: -4px;
    opacity: 0.17;
  }

  .home-bg-card-3,
  .home-bg-card-4 {
    display: none;
  }
}

@media (min-width: 640px) {
  .anteroom {
    grid-template-columns: 2fr 3fr;
    grid-template-rows: 1fr;
  }

  .anteroom-slab {
    position: sticky;
    top: 0;
    height: 100dvh;
    justify-content: center;
    box-shadow: inset -34px 0 48px -52px color-mix(in srgb, var(--primary) 22%, transparent);
    padding: var(--s8) var(--gutter);
  }

  .anteroom-scroll {
    gap: var(--s6);
  }

  .anteroom-footer {
    position: absolute;
    inset-inline-start: max(var(--gutter), var(--safe-left));
    inset-block-end: max(var(--s2), var(--safe-bottom));
    padding: 0;
  }
}

.lobby-panel {
  background: var(--surface-container);
  border-radius: var(--r-lg);
  padding: var(--s6);
  box-shadow: var(--shadow-sm);
  border: none;
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  animation: editorial-rise 540ms ease both;
}

.lobby-panel h2 {
  font-family: var(--font);
  font-size: var(--step-2);
  font-weight: 600;
  color: var(--ivory);
  line-height: 1.15;
}

.lobby-action-card {
  justify-content: space-between;
}

.lobby-primary-action {
  background: var(--surface-container);
}

.lobby-invite-action {
  background: var(--surface-container-high);
  animation-delay: 100ms;
}

.lobby-form {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.lobby-form-compact {
  align-items: flex-start;
}

.pending-invite-banner {
  display: grid;
  gap: var(--s3);
  padding: var(--s4);
  border-radius: var(--r);
  background: color-mix(in srgb, var(--surface-container-high) 72%, transparent);
  box-shadow: var(--shadow-sm);
  animation: editorial-rise 420ms ease both;
}

.active-game-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  padding: var(--s4);
  border-radius: var(--r);
  background: color-mix(in srgb, var(--primary) 10%, var(--surface-container-high));
  box-shadow:
    var(--shadow-sm),
    inset 0 0 0 1px color-mix(in srgb, var(--primary) 20%, transparent);
  animation: editorial-rise 420ms ease both;
  flex-wrap: wrap;
}

.pending-invite-title,
.active-game-title {
  font-family: var(--font);
  font-size: var(--step-0);
  font-weight: 600;
  color: var(--ivory);
  line-height: 1.2;
}

.pending-invite-list {
  display: grid;
  gap: var(--s2);
}

.pending-invite {
  display: grid;
  gap: var(--s3);
  align-items: center;
  padding: var(--s3);
  border-radius: var(--r);
  background: color-mix(in srgb, var(--surface-container-highest) 76%, transparent);
}

.pending-invite > div {
  display: grid;
  gap: 2px;
}

.pending-seat {
  color: var(--tertiary);
  font-family: var(--font-ui);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.05rem;
  text-transform: uppercase;
}

@media (min-width: 620px) {
  .pending-invite {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

/* ---- Home page forms ---- */
.home-form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s3);
  margin-bottom: var(--s3);
}

@media (min-width: 480px) {
  .home-form-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
  }
}

/* One control and the sentence explaining it, stacked at every width. This is
   deliberately not .home-form-row: that class splits into two columns for the
   pair of email inputs, which put the hint in a narrow gutter beside the label. */
.home-expert-row {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  margin-bottom: var(--s3);
}

@media (min-width: 840px) {
  .anteroom-scroll {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pending-invite-banner,
  .active-game-banner {
    grid-column: 1 / -1;
  }
}

.home-page form {
  margin-top: 0;
}

@keyframes editorial-rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- Cards ---- */
.card {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: var(--card-w);
  height: var(--card-h);
  background:
    radial-gradient(
    circle at 34% 18%,
    color-mix(in srgb, var(--primary-fixed) 86%, transparent),
    transparent 48%
  ),
    linear-gradient(145deg, var(--primary-fixed) 0%, var(--card-face) 48%, var(--primary) 100%);
  border-radius: var(--r-card);
  border: none;
  outline: 1px solid color-mix(in srgb, var(--outline-variant) 15%, transparent);
  outline-offset: -1px;
  box-shadow: var(--shadow-md);
  font-family: var(--font);
  font-weight: 600;
  line-height: 1;
  user-select: none;
  position: relative;
  overflow: hidden;
  touch-action: manipulation;
}

/* Paper noise grain overlay */
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.03;
  pointer-events: none;
  mix-blend-mode: multiply;
}

.card-rank {
  position: relative;
  z-index: 1;
  font-size: clamp(0.95rem, 0.8rem + 0.55vw, 1.25rem);
}
.card-suit {
  position: relative;
  z-index: 1;
  font-size: clamp(1.15rem, 0.95rem + 0.65vw, 1.5rem);
  margin-top: 2px;
}
.card-corner {
  position: absolute;
  z-index: 1;
  font-size: clamp(0.52rem, 0.42rem + 0.35vw, 0.72rem);
  line-height: 0.95;
  text-align: center;
}
.card-corner-top {
  top: 7px;
  left: 7px;
}
.card-corner-bottom {
  right: 7px;
  bottom: 7px;
  transform: rotate(180deg);
}
.card-label {
  font-size: var(--step-0);
  color: var(--ivory-dim);
}

.suit-red {
  color: var(--red-suit);
}
.suit-black {
  color: var(--black-suit);
}

.card-back {
  background:
    radial-gradient(
    circle at 50% 36%,
    color-mix(in srgb, var(--tertiary) 14%, transparent),
    transparent 44%
  ),
    repeating-linear-gradient(
    45deg,
    var(--surface-container-highest),
    var(--surface-container-highest) 4px,
    var(--surface-container-high) 4px,
    var(--surface-container-high) 8px
  );
  color: var(--primary);
}

.card-back::after {
  display: none;
}

.card-btn {
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
  min-height: var(--touch-min);
  min-width: var(--touch-min);
}

@media (hover: hover) {
  .card-btn:hover {
    transform: translateY(calc(var(--card-drop, 0px) - 8px)) rotate(var(--card-angle, 0deg));
    box-shadow: var(--shadow-lg);
    filter: brightness(1.03);
  }
}

.card-btn:active {
  transform: translateY(calc(var(--card-drop, 0px) - 4px)) rotate(var(--card-angle, 0deg))
    scale(1.03);
  box-shadow: var(--shadow-md);
  z-index: 3;
}

@media (pointer: coarse) {
  .hand-area .card.card-touch-preview {
    transform: translateY(calc(var(--card-drop, 0px) * var(--card-drop-scale, 1) - 14px))
      rotate(calc(var(--card-angle, 0deg) * var(--card-angle-scale, 1))) scale(1.07);
    box-shadow:
      var(--shadow-lg),
      0 0 32px color-mix(in srgb, var(--tertiary) 24%, transparent);
    outline: 2px solid color-mix(in srgb, var(--primary-fixed) 72%, transparent);
    outline-offset: 2px;
    filter: brightness(1.05);
    opacity: 1;
    z-index: 22;
  }
}

.card-btn.card-forced {
  outline: 2px solid color-mix(in srgb, var(--tertiary) 55%, transparent);
  outline-offset: 2px;
  box-shadow:
    var(--shadow-lg),
    0 0 34px color-mix(in srgb, var(--tertiary) 18%, transparent);
}

.card-btn.card-forced .card-rank {
  text-decoration: underline solid var(--tertiary);
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

/* Armed (first tap) state for the touch two-tap play commit. The card pops
   clear of the fan into a large, isolated target; a second tap submits. */
.card-form button[data-armed="true"] {
  transform: translateY(-52px) scale(1.12);
  transform-origin: center;
  z-index: 30;
  box-shadow:
    var(--shadow-lg),
    0 0 36px color-mix(in srgb, var(--tertiary) 22%, transparent);
  outline: 3px solid var(--tertiary);
  outline-offset: 2px;
  filter: brightness(1.05);
}

/* Illegal-during-play affordance */
.card-btn.card-illegal {
  cursor: not-allowed;
  opacity: 0.55;
  filter: saturate(0.6);
}
@media (hover: hover) {
  .card-btn.card-illegal:hover {
    transform: translateY(var(--card-drop, 0px)) rotate(var(--card-angle, 0deg));
    box-shadow: var(--shadow-md);
    filter: saturate(0.6);
  }
}
.card-btn.card-illegal:active {
  transform: translateY(var(--card-drop, 0px)) rotate(var(--card-angle, 0deg));
}

@keyframes card-shake {
  0%,
  100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-6px);
  }
  40% {
    transform: translateX(5px);
  }
  60% {
    transform: translateX(-3px);
  }
  80% {
    transform: translateX(2px);
  }
}
.card-btn.card-shake {
  animation: card-shake 0.32s ease;
}
@media (prefers-reduced-motion: reduce) {
  .card-btn.card-shake {
    animation: none;
  }
}

.card-btn[data-selected="true"] {
  transform: translateY(calc(var(--card-drop, 0px) - 14px)) rotate(var(--card-angle, 0deg));
  outline: 2px solid var(--primary-fixed);
  outline-offset: 2px;
  box-shadow:
    var(--shadow-lg),
    0 0 36px color-mix(in srgb, var(--tertiary) 28%, transparent);
  z-index: 2;
}

/* Give the first discard candidate a quiet static cue until selection starts. */
.hand-area.is-discarding[data-discard-count="0"] > .card-btn:first-child:not([data-selected="true"]):not(:disabled):not(.card-touch-preview) {
  outline: 2px solid color-mix(in srgb, var(--tertiary) 58%, transparent);
  outline-offset: 2px;
  box-shadow:
    var(--shadow-md),
    0 0 14px color-mix(in srgb, var(--tertiary) 18%, transparent);
}

/* Keep the legal set visibly distinct without continuously repainting every card. */
.hand-area.is-self-turn .card-btn.card-illegal {
  opacity: 0.42;
  filter: saturate(0.55);
}
.hand-area.is-self-turn .card-btn:not(.card-illegal):not(.card-forced):not([data-selected="true"]):not([data-armed="true"]):not(:disabled):not(.card-touch-preview) {
  outline: 1px solid color-mix(in srgb, var(--tertiary) 46%, transparent);
  outline-offset: 1px;
  box-shadow:
    var(--shadow-md),
    0 0 12px color-mix(in srgb, var(--tertiary) 16%, transparent);
}

/* ---- Buttons ---- */
.action-btn {
  font-size: var(--step--2);
  font-weight: 500;
  padding: var(--s2) var(--s4);
  min-height: var(--touch-min);
  min-width: 5.6rem;
  max-width: 100%;
  border-radius: 999px;
  border: none;
  box-shadow: inset 0 0 0 1px var(--primary-fixed);
  background: transparent;
  color: var(--on-surface);
  cursor: pointer;
  transition: background 0.12s ease, box-shadow 0.12s ease, transform 0.12s ease;
  white-space: nowrap;
  line-height: 1.12;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* } */

  /* @media (hover: hover) { */
  .action-btn:hover {
    background: var(--gold-wash);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 32%, transparent);
  }
}

.action-btn:active {
  background: color-mix(in oklch, var(--gold) 18%, transparent);
  transform: translateY(1px) scale(0.97);
}

.action-btn:disabled {
  opacity: 0.62;
  cursor: not-allowed;
}

/* Bid pill: tabular numerics so 6/7/8 line up; min-width inherited from .action-btn. */
.action-btn.is-bid {
  font-variant-numeric: tabular-nums;
  padding-inline: var(--s4);
}

/* Secondary (Pass / Skip / Ne dodjem): a quieter pill, still a pill.
   --ghost-border is outline-variant at 15%, and taking 80% of that left a 12%
   ring of a colour that is already near the surface - so Pass, one of the two
   moves the auction is made of, carried no visible edge at all and read as a
   caption under the bid buttons. The ring is the same one the other pills wear,
   dimmed; that is the whole difference in emphasis. */
.action-btn.is-secondary {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary-fixed-dim) 45%, transparent);
  color: color-mix(in srgb, var(--on-surface) 82%, transparent);
}

/* Destructive (settle by otpisivanje): danger outline at rest so it cannot be
   mistaken for the primary next-hand button; filled while armed for confirm. */
.action-btn.is-danger {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 55%, transparent);
  color: var(--danger);
}
@media (hover: hover) {
  .action-btn.is-danger:hover {
    background: color-mix(in srgb, var(--danger) 12%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 70%, transparent);
  }
}
.action-btn.is-danger[data-armed="true"] {
  background: color-mix(in srgb, var(--danger) 26%, var(--surface-container-highest));
  color: var(--on-surface);
  box-shadow:
    0 0 0 1px var(--danger),
    0 0 14px color-mix(in srgb, var(--danger) 30%, transparent);
}

:focus-visible.action-btn,
.action-btn:focus-visible {
  outline: 2px solid var(--primary-fixed);
  outline-offset: 2px;
}

.primary-btn {
  font-size: var(--step--1);
  font-weight: 600;
  padding: var(--s3) var(--s6);
  min-height: var(--touch-min);
  border-radius: var(--r);
  border: none;
  background:
    radial-gradient(circle at 32% 18%, var(--primary-fixed) 0%, var(--primary) 68%),
    var(--primary);
  color: var(--on-gold);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.12s ease, filter 0.12s ease, transform 0.12s ease;
}

@media (hover: hover) {
  .primary-btn:hover {
    box-shadow: var(--shadow-md);
    filter: brightness(1.06);
  }
}

.primary-btn:active {
  box-shadow: var(--shadow-md);
  filter: brightness(0.95);
  transform: translateY(1px) scale(0.97);
}

@media (prefers-reduced-motion: reduce) {
  .action-btn:active,
  .primary-btn:active {
    transform: none;
  }
}

.primary-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  filter: none;
}

/* ---- Badges ---- */
.trick-count {
  font-size: var(--step--2);
  background: var(--surface-container-highest);
  padding: 1px 6px;
  border-radius: var(--r-lg);
  font-variant-numeric: tabular-nums;
}

.ai-badge,
.away-badge {
  font-size: var(--step--2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ivory-faint);
  background: var(--surface-container-highest);
  padding: 1px 5px;
  border-radius: var(--r-card);
}

.away-badge {
  letter-spacing: 0.03em;
  opacity: 0.78;
}

/* ---- Settlement ceremony ---- */
.settlement-ceremony {
  background: var(--surface-container-high);
  border-radius: var(--r-xl);
  padding: var(--s6);
  max-width: 420px;
  margin: var(--s4) auto;
  box-shadow: var(--shadow-dramatic);
}

.settlement-header {
  margin-bottom: var(--s3);
  text-wrap: balance;
}
.settlement-ranking {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  margin-bottom: var(--s3);
}

.settlement-rank {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s2) var(--s3);
  border-radius: var(--r);
  background: var(--surface-container-highest);
  animation: editorial-rise 360ms ease both;
  animation-delay: calc(var(--i, 0) * 90ms);
}

@media (prefers-reduced-motion: reduce) {
  .settlement-rank {
    animation: none;
  }
}

.rank-1 {
  font-weight: bold;
  background: var(--gold-soft);
}
.rank-2 {
  background: var(--gold-wash);
}
.rank-3 {
  background: color-mix(in oklch, var(--danger) 6%, transparent);
}
.rank-place {
  width: 2.5rem;
  color: var(--ivory-dim);
  font-size: var(--step--1);
}
.rank-name {
  flex: 1;
}
.rank-score {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.settlement-section {
  margin-top: var(--s3);
}

.settlement-transfer,
.settlement-adjustment {
  font-size: var(--step--1);
  padding: var(--s1) 0;
  color: var(--ivory-dim);
}

.settlement-replay {
  margin: 0;
}

.settlement-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s4);
  padding-top: var(--s4);
  border-top: 1px solid var(--rule-faint);
}