/* ============================================================
   SUBNINE — Velvet Lounge
   Deep felt, aged brass, warm cream. A modern card-club skin.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..900;1,9..144,500..900&family=DM+Mono:wght@300;400;500&display=swap");

:root {
  --ink:        #0a1410;
  --felt:       #143226;
  --felt-light: #1b3e30;
  --felt-edge:  #08190f;
  --brass:      #c9a96e;
  --brass-bright: #e8cb96;
  --brass-dim:  #7a6840;
  --cream:      #f5ead6;
  --cream-dim:  #b8a883;
  --paper:      #f7ecd4;
  --ember:      #c4503e;
  --sage:       #82a48f;
  --shadow-deep: rgba(0, 0, 0, 0.55);
  --shadow-soft: rgba(0, 0, 0, 0.28);

  --serif: "Fraunces", "Times New Roman", serif;
  --mono:  "DM Mono", ui-monospace, monospace;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  --radius-sm: 4px;
  --radius:    8px;
  --radius-lg: 14px;
}

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

/* Globally enforce the HTML `hidden` attribute. Without !important it
   loses to class-selector display rules (e.g. .btn { display: inline-flex }),
   which is why the Drop Selected button stayed visible on the action
   bar even when JS set hidden=true. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--felt);
  color: var(--cream);
  font-family: var(--serif);
  font-variation-settings: "opsz" 24, "SOFT" 30;
  font-weight: 400;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body {
  /* Atmospheric felt: warm radial wash + edge vignette + grain. */
  background:
    radial-gradient(ellipse at 50% 30%, var(--felt-light) 0%, var(--felt) 45%, var(--felt-edge) 100%),
    var(--felt);
  position: relative;
}

body::before {
  /* Grain layer — fractal noise, low alpha. */
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.18;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.8  0 0 0 0 0.7  0 0 0 0 0.5  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

body::after {
  /* Top vignette — like overhead lamp falloff. */
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, transparent 30%, rgba(0,0,0,0.35) 100%);
}

main, .page {
  position: relative;
  z-index: 3;
}

/* ----- Type ------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--serif);
  margin: 0;
  letter-spacing: -0.01em;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--brass);
}

.eyebrow::before,
.eyebrow::after {
  content: "—";
  display: inline-block;
  margin: 0 0.5em;
  color: var(--brass-dim);
}

.muted    { color: var(--cream-dim); }
.brass    { color: var(--brass); }
.serif-it { font-style: italic; font-variation-settings: "opsz" 96, "SOFT" 100; }

/* ----- Lobby ------------------------------------------------ */

.lobby {
  min-height: 100vh;
  display: grid;
  place-items: center;
  align-items: start; /* tall content starts from top, not clipped below fold */
  padding: var(--space-6) var(--space-4);
}

.lobby-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 460px;
}

/* Three fanned cards sitting above the panel */
.lobby-spread {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-bottom: -22px;
  position: relative;
  z-index: 2;
  pointer-events: none;
}

.ls-card {
  width: clamp(68px, 18vw, 92px);
  aspect-ratio: 1 / 1.4;
  border-radius: 9px;
  overflow: hidden;
  background: var(--paper);
  border: 1px solid rgba(0, 0, 0, 0.28);
  box-shadow:
    0 6px 20px -4px rgba(0, 0, 0, 0.65),
    0 2px 6px rgba(0, 0, 0, 0.35);
  flex-shrink: 0;
}

.ls-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.ls-card--l {
  transform: rotate(-13deg) translateY(10px);
  margin-right: -14px;
  z-index: 0;
}
.ls-card--c {
  transform: rotate(1deg);
  z-index: 1;
  position: relative;
}
.ls-card--r {
  transform: rotate(11deg) translateY(6px);
  margin-left: -14px;
  z-index: 0;
}

/* Brief game description + rules link inside the panel */
.lobby-about {
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid rgba(201, 169, 110, 0.15);
  text-align: center;
}

.lobby-blurb {
  font-family: var(--serif);
  font-style: italic;
  font-variation-settings: "opsz" 24, "SOFT" 60;
  font-size: clamp(0.82rem, 2.4vw, 0.92rem);
  color: var(--cream-dim);
  line-height: 1.55;
  margin: 0 0 var(--space-3);
}

.lobby-blurb em {
  color: var(--brass-bright);
  font-style: italic;
}

.lobby-about-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
}

.lobby-rules-btn {
  background: rgba(201, 169, 110, 0.08);
  border: 1px solid rgba(201, 169, 110, 0.28);
  border-radius: var(--radius);
  padding: 0.55rem var(--space-4);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass-bright);
  cursor: pointer;
  transition: background 200ms, border-color 200ms, color 200ms;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.lobby-rules-btn:hover {
  background: rgba(201, 169, 110, 0.16);
  border-color: var(--brass);
  color: var(--cream);
}

.lobby-share {
  margin-top: var(--space-4);
  text-align: center;
}

.share-label {
  display: block;
  font: 400 0.72rem/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brass-dim);
  margin-bottom: var(--space-2);
}

.share-links {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.share-link {
  background: none;
  border: 1px solid rgba(201, 169, 110, 0.2);
  border-radius: var(--radius-sm);
  color: var(--cream-dim);
  font: 400 0.78rem/1 var(--mono);
  letter-spacing: 0.03em;
  padding: var(--space-2) var(--space-3);
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.share-link:hover {
  border-color: var(--brass);
  color: var(--cream);
  background: rgba(201, 169, 110, 0.08);
}

.panel {
  width: 100%;
  max-width: 460px;
  padding: var(--space-7) var(--space-6);
  background:
    linear-gradient(180deg, rgba(255, 235, 195, 0.04) 0%, rgba(0,0,0,0.10) 100%),
    var(--felt-light);
  border-radius: var(--radius-lg);
  box-shadow:
    0 1px 0 rgba(255,235,195,0.06) inset,
    0 0 0 1px rgba(201, 169, 110, 0.18) inset,
    0 30px 60px -20px var(--shadow-deep),
    0 8px 24px -8px var(--shadow-soft);
  position: relative;
  animation: rise 720ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Brass corner ornaments (deco) */
.panel::before,
.panel::after {
  content: "";
  position: absolute;
  width: 44px;
  height: 44px;
  border: 1px solid var(--brass-dim);
  pointer-events: none;
}
.panel::before {
  top: 12px; left: 12px;
  border-right: none; border-bottom: none;
  border-top-left-radius: 6px;
}
.panel::after {
  bottom: 12px; right: 12px;
  border-left: none; border-top: none;
  border-bottom-right-radius: 6px;
}

.brand {
  text-align: center;
  margin-bottom: var(--space-6);
}

.brand .mark {
  display: inline-flex;
  align-items: center;
  gap: 0.04em;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 900;
  font-variation-settings: "opsz" 144, "SOFT" 0;
  font-size: clamp(4.4rem, 14vw, 6.4rem);
  line-height: 0.85;
  background: linear-gradient(180deg, var(--cream) 28%, var(--brass-bright) 62%, var(--brass-dim) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.05em;
}

/* The slash that splits S from 9. A thin brass hairline, slightly tilted —
   reads as an old-fashioned numero divider, not a forward-slash. */
.brand .mark .slash {
  display: inline-block;
  width: 0.06em;
  height: 1.05em;
  background: var(--brass);
  -webkit-text-fill-color: initial;
  margin: 0 0.12em;
  transform: rotate(18deg);
  border-radius: 1px;
  align-self: center;
  box-shadow: 0 0 12px rgba(232, 203, 150, 0.35);
}

.brand .wordmark {
  margin-top: var(--space-3);
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
}

.brand .wordmark::before,
.brand .wordmark::after {
  content: "";
  flex: 0 0 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--brass-dim) 50%, transparent);
}

.brand .tagline {
  margin-top: var(--space-3);
}

/* Form fields */
.field {
  display: block;
  margin-bottom: var(--space-4);
}

.field label {
  display: block;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: var(--space-2);
}

.field input[type="text"] {
  width: 100%;
  background: rgba(0, 0, 0, 0.25);
  color: var(--cream);
  font-family: var(--serif);
  font-size: 1.1rem;
  font-variation-settings: "opsz" 36, "SOFT" 50;
  padding: 0.75rem 0.85rem;
  border: none;
  border-bottom: 1px solid var(--brass-dim);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  outline: none;
  transition: border-color 200ms, background 200ms;
}

.field input[type="text"]::placeholder {
  color: var(--cream-dim);
  font-style: italic;
  opacity: 0.5;
}

.field input[type="text"]:focus {
  border-bottom-color: var(--brass-bright);
  background: rgba(0, 0, 0, 0.35);
}

.field-hint {
  margin: 0.5rem 0 0;
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.10em;
  color: var(--cream-dim);
  font-style: italic;
}

/* Difficulty pill segmented control */
.pills {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  background: rgba(0, 0, 0, 0.30);
  border: 1px solid var(--brass-dim);
  border-radius: var(--radius);
  padding: 4px;
}

.pills input { display: none; }

.pills label {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: center;
  padding: 0.55rem 0.5rem;
  color: var(--cream-dim);
  border-radius: 6px;
  cursor: pointer;
  transition: color 200ms, background 200ms;
  margin: 0;
  user-select: none;
}

.pills label:hover { color: var(--cream); }

.pills input:checked + label {
  background: linear-gradient(180deg, var(--brass-bright) 0%, var(--brass) 100%);
  color: var(--ink);
  box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset, 0 4px 12px -4px rgba(201,169,110,0.4);
}

/* Buttons (chip-styled) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: 0.95rem 1.25rem;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink);
  background: linear-gradient(180deg, var(--brass-bright) 0%, var(--brass) 100%);
  border: 1px solid var(--brass-dim);
  border-radius: var(--radius);
  cursor: pointer;
  position: relative;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.4) inset,
    0 -1px 0 rgba(0,0,0,0.15) inset,
    0 6px 18px -8px rgba(201,169,110,0.5);
  transition: transform 120ms ease, box-shadow 200ms;
}

.btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.5) inset,
    0 -1px 0 rgba(0,0,0,0.15) inset,
    0 10px 24px -8px rgba(232, 203, 150, 0.55);
}

.btn:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: 0 0 0 1px var(--brass-dim) inset, 0 2px 6px -4px rgba(0,0,0,0.4);
}

.btn:disabled {
  cursor: not-allowed;
  opacity: 0.45;
  filter: saturate(0.4);
}

.btn-ghost {
  background: transparent;
  color: var(--brass);
  box-shadow: 0 0 0 1px var(--brass-dim) inset;
}

.btn-ghost:hover:not(:disabled) {
  background: rgba(201, 169, 110, 0.08);
  color: var(--brass-bright);
  box-shadow: 0 0 0 1px var(--brass) inset;
}

/* Loading shimmer while /auth/me is in-flight */
.lobby-loading {
  height: 3.5rem;
}

/* "Sign in with Google" button — inherits .btn shape, overrides colour */
.btn-google {
  text-decoration: none;
  display: inline-flex;
  gap: var(--space-3);
  background: var(--paper);
  color: #3c4043;
  border-color: rgba(0, 0, 0, 0.18);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 1px 3px rgba(0,0,0,0.20);
}
.btn-google:hover:not(:disabled) {
  background: #f8f0e0;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.9) inset,
    0 4px 10px -4px rgba(0,0,0,0.25);
}

/* "Demo round complete" banner — shown above the sign-in button when
   the user is bounced back from a played-out demo session. */
.demo-over-banner {
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: rgba(201,169,110,0.10);
  border: 1px solid rgba(201,169,110,0.32);
  border-radius: var(--radius);
  text-align: center;
}
.demo-over-title {
  margin: 0 0 var(--space-1);
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--brass-bright);
  letter-spacing: 0.01em;
}
.demo-over-sub {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--cream-dim);
}

/* Lobby "or" divider between sign-in and demo blocks */
.lobby-or {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-4) 0 var(--space-3);
  color: var(--brass-dim);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}
.lobby-or::before,
.lobby-or::after {
  content: "";
  flex: 1;
  border-top: 1px solid rgba(201,169,110,0.18);
}

.lobby-demo {
  text-align: center;
}
.lobby-demo-blurb {
  margin: 0 0 var(--space-3);
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.85rem;
  color: var(--cream-dim);
}
.lobby-demo #turnstileWrap {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-3);
  min-height: 65px;
}
.btn-ghost-brass {
  background: rgba(201,169,110,0.08);
  color: var(--brass-bright);
  border: 1px solid rgba(201,169,110,0.45);
  width: 100%;
}
.btn-ghost-brass:hover:not(:disabled) {
  background: rgba(201,169,110,0.18);
  border-color: var(--brass);
  color: var(--cream);
}
.btn-ghost-brass:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Authenticated player row */
.auth-player {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid rgba(201,169,110,0.18);
}

.auth-name {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-style: italic;
  font-variation-settings: "opsz" 48, "SOFT" 60;
  color: var(--cream);
}

.auth-signout {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass-dim);
  text-decoration: none;
  transition: color 180ms;
}
.auth-signout:hover { color: var(--brass); }

/* "You have a game in progress" resume block */
.resume-hint {
  margin: 0 0 var(--space-5);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--cream-dim);
  font-style: italic;
}

.resume-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Leave button in the game header — small, unobtrusive text link */
.btn-leave {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass-dim);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  border-radius: var(--radius-sm);
  transition: color 180ms, background 180ms;
}
.btn-leave:hover {
  color: var(--ember);
  background: rgba(196, 80, 62, 0.08);
}

.divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-5) 0;
  color: var(--brass-dim);
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--brass-dim) 50%, transparent 100%);
}

/* ----- Waiting area ----------------------------------------- */

.waiting {
  min-height: 100vh;
  display: grid;
  place-items: center;
  align-items: start; /* tall content starts from top, not clipped below fold */
  padding: var(--space-6) var(--space-4);
  text-align: center;
}

.waiting .stamp {
  font-family: var(--mono);
  font-size: clamp(2.6rem, 11vw, 5rem);
  font-weight: 500;
  letter-spacing: 0.15em;
  color: var(--brass-bright);
  text-shadow: 0 2px 0 rgba(0,0,0,0.4), 0 0 30px rgba(232, 203, 150, 0.2);
  padding: var(--space-4) var(--space-5);
  border: 2px solid var(--brass-dim);
  border-radius: var(--radius);
  display: inline-block;
  position: relative;
  background:
    linear-gradient(180deg, rgba(232, 203, 150, 0.04), transparent),
    rgba(0,0,0,0.15);
  animation: stamp-in 700ms cubic-bezier(0.16, 1, 0.3, 1) 200ms both;
}

.waiting .stamp::before,
.waiting .stamp::after {
  content: "✦";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--brass-dim);
  font-size: 1rem;
}
.waiting .stamp::before { left: -1.2em; }
.waiting .stamp::after  { right: -1.2em; }

.waiting .seats {
  margin: var(--space-7) auto 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 360px;
  width: 100%;
}

.seat {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background:
    linear-gradient(180deg, rgba(255,235,195,0.04), transparent),
    rgba(0, 0, 0, 0.20);
  border: 1px solid var(--brass-dim);
  border-radius: var(--radius);
  text-align: left;
  animation: seat-in 500ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.seat .avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
  font-variation-settings: "opsz" 36;
  font-size: 1.1rem;
  background: linear-gradient(135deg, var(--brass-bright), var(--brass-dim));
  color: var(--ink);
  border: 1px solid var(--brass);
  flex-shrink: 0;
}

.seat .name {
  font-family: var(--serif);
  font-size: 1.05rem;
  font-variation-settings: "opsz" 36, "SOFT" 50;
}

.seat .role {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cream-dim);
}

.seat[data-bot="true"] .avatar {
  background: linear-gradient(135deg, var(--sage), var(--felt-light));
  color: var(--cream);
  border-color: var(--sage);
}

.dots {
  display: inline-flex;
  gap: 4px;
  margin-left: 4px;
}
.dots span {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--brass);
  animation: blink 1.2s infinite;
}
.dots span:nth-child(2) { animation-delay: 0.15s; }
.dots span:nth-child(3) { animation-delay: 0.30s; }

.waiting-actions {
  margin-top: var(--space-6);
  max-width: 360px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* ----- Main game area --------------------------------------- */

.table {
  /* Lock to the visible viewport height so the action-bar always
     lives on the bottom edge. Without this, expanding content in
     .play (e.g., the show banner appearing) pushes the table taller
     than 100vh and the page starts scrolling — taking the action-bar
     off-screen on phones. dvh tracks the dynamic viewport (browser
     chrome appearing/disappearing); falls back to 100vh on engines
     that don't support it. */
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: var(--space-3) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom));
  gap: var(--space-3);
  overflow: hidden;
}

.table-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding-top: env(safe-area-inset-top);
  /* Reserve room on the right for the fixed help-toggle button so the
     last score chip never sits underneath it. */
  padding-right: 48px;
}

.gameid-stamp {
  font-family: var(--mono);
  font-size: 0.85rem;
  letter-spacing: 0.22em;
  color: var(--brass);
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--brass-dim);
  border-radius: var(--radius-sm);
  background: rgba(0,0,0,0.2);
}

.round-pill {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--cream-dim);
}

.scores {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.score-chip {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.5rem 0.85rem;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(201,169,110,0.25);
  border-radius: 999px;
  font-size: 0.85rem;
  transition: all 240ms ease;
  position: relative;
}

.score-chip[data-active="true"] {
  border-color: var(--brass-bright);
  background: rgba(201, 169, 110, 0.18);
  box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.18), 0 0 24px -4px rgba(232, 203, 150, 0.4);
  animation: pulse-active 1.6s ease-in-out infinite;
}

.score-chip .who {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.95rem;
  font-variation-settings: "opsz" 24, "SOFT" 50;
  color: var(--cream);
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.score-chip .metric {
  display: inline-flex;
  align-items: baseline;
  gap: 0.32em;
  white-space: nowrap;
}

.score-chip .m-num {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 1rem;
  color: var(--brass-bright);
  letter-spacing: 0.02em;
}

.score-chip .m-lbl {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream-dim);
}

.score-chip .sep {
  display: inline-block;
  width: 1px;
  height: 14px;
  background: var(--brass-dim);
  opacity: 0.55;
}

/* Opponents row — each opponent gets their own "seat" with name, score,
   and a fan of small face-down cards mirroring how the player sees their
   own hand at the bottom of the table. */
.opponents {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: 0 var(--space-3);
  margin-top: var(--space-2);
}
.opponent-seat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 0.55rem 0.85rem 0.55rem 0.95rem;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(201, 169, 110, 0.22);
  border-radius: 14px;
  transition: all 240ms ease;
  position: relative;
  min-height: 56px;
}
.opponent-seat[data-active="true"] {
  border-color: var(--brass-bright);
  background: rgba(201, 169, 110, 0.16);
  box-shadow:
    0 0 0 2px rgba(201, 169, 110, 0.18),
    0 0 24px -4px rgba(232, 203, 150, 0.4);
  animation: pulse-active 1.6s ease-in-out infinite;
}

.opponent-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex-shrink: 0;
}
.opponent-meta .who {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  font-variation-settings: "opsz" 24, "SOFT" 50;
  color: var(--cream);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 180px;
}
.opponent-meta .metric {
  display: inline-flex;
  align-items: baseline;
  gap: 0.32em;
}
.opponent-meta .m-num {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.95rem;
  color: var(--brass-bright);
}
.opponent-meta .m-lbl {
  font-family: var(--mono);
  font-size: 0.55rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream-dim);
}

/* Mini face-down hand for the opponent. Each card is the same back-of-card
   SVG the deck uses, just shrunk. The cards overlap and fan slightly so
   the count is countable but the row also feels like a held hand. */
.opponent-hand {
  display: flex;
  align-items: center;
  flex-shrink: 1;
  min-width: 0;
  /* Padding above keeps the parabolic-dip transforms from clipping. */
  padding: 6px 0 4px;
}
.opponent-hand .mini-back {
  width: clamp(22px, 6vw, 30px);
  aspect-ratio: 200 / 280;
  border-radius: 2.5px;
  border: 0.5px solid rgba(0, 0, 0, 0.55);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 2px 4px rgba(0, 0, 0, 0.35);
  flex-shrink: 0;
  transform-origin: 50% 100%;
  transition: filter 240ms ease;
}
.opponent-hand .mini-back + .mini-back {
  margin-left: clamp(-12px, -3.4vw, -8px);  /* overlap to fan */
}

/* Low-hand danger flag — kicks in at ≤2 cards. Overrides the brass
   active glow because "opponent could call sutla next turn" is a
   stronger signal than "it's their turn." */
.opponent-seat[data-low-hand="true"] {
  border-color: var(--ember);
  box-shadow:
    0 0 0 1px rgba(196, 80, 62, 0.45),
    0 0 22px -2px rgba(196, 80, 62, 0.55);
  animation: pulse-low-hand 1.3s ease-in-out infinite;
}
.opponent-seat[data-low-hand="true"] .mini-back {
  filter: hue-rotate(-12deg) saturate(1.2) brightness(1.05);
}
@keyframes pulse-low-hand {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(196, 80, 62, 0.45),
      0 0 16px -2px rgba(196, 80, 62, 0.5);
  }
  50% {
    box-shadow:
      0 0 0 2px rgba(196, 80, 62, 0.65),
      0 0 28px -2px rgba(196, 80, 62, 0.8);
  }
}

/* My-score chip — slimmer than opponent chips, sits between hand and
   the action bar. No pip count (player can see their own hand). */
.my-score {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-3);
  padding: 0.35rem 0.85rem;
  margin: 0 auto;
  width: max-content;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(201, 169, 110, 0.22);
  border-radius: 999px;
  transition: all 240ms ease;
  position: relative;
  z-index: 2;
}
.my-score:empty { display: none; }
.my-score[data-active="true"] {
  border-color: var(--brass-bright);
  background: rgba(201, 169, 110, 0.18);
  box-shadow:
    0 0 0 2px rgba(201, 169, 110, 0.18),
    0 0 18px -2px rgba(232, 203, 150, 0.35);
  animation: pulse-active 1.6s ease-in-out infinite;
}
.my-score .who {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.9rem;
  font-variation-settings: "opsz" 24, "SOFT" 50;
  color: var(--cream);
}
.my-score .metric {
  display: inline-flex;
  align-items: baseline;
  gap: 0.32em;
}
.my-score .m-num {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 1rem;
  color: var(--brass-bright);
}
.my-score .m-lbl {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream-dim);
}

/* Center play area */
.play {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  position: relative;
  /* min-height: 0 lets this grid row shrink below its content size
     instead of overflowing the table. overflow-y: auto gives the play
     area its own scroll bar if the show banner + cue + log + hand
     genuinely exceed the available space on a small phone — instead
     of dragging the action-bar down with it. */
  min-height: 0;
  overflow-y: auto;
}

.piles {
  display: flex;
  gap: clamp(var(--space-3), 5vw, var(--space-6));
  align-items: flex-end;
  padding: var(--space-4);
  position: relative;
}

.piles::before {
  /* warm spotlight under piles */
  content: "";
  position: absolute;
  inset: -10% 5% -25% 5%;
  background: radial-gradient(ellipse at 50% 50%, rgba(232, 203, 150, 0.10) 0%, transparent 70%);
  pointer-events: none;
  z-index: -1;
}

.pile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

.pile-label {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--cream-dim);
}

/* The card visual */
.card {
  --w: clamp(74px, 17vw, 110px);
  --h: calc(var(--w) * 1.4);
  width: var(--w);
  height: var(--h);
  border-radius: 8px;
  background: var(--paper);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.5) inset,
    0 0 0 1px rgba(0,0,0,0.18) inset,
    0 14px 22px -10px var(--shadow-deep),
    0 4px 8px -2px var(--shadow-soft);
  overflow: hidden;
  user-select: none;
  position: relative;
  cursor: pointer;
  transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 200ms, filter 200ms;
}

.card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  pointer-events: none;
}

.card.empty {
  background:
    repeating-linear-gradient(
      45deg,
      rgba(201, 169, 110, 0.08),
      rgba(201, 169, 110, 0.08) 6px,
      transparent 6px,
      transparent 12px
    ),
    rgba(0, 0, 0, 0.20);
  border: 1px dashed var(--brass-dim);
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.24em;
  color: var(--cream-dim);
  text-transform: uppercase;
  cursor: default;
}

/* Gate the hover lift behind (hover: hover) so iOS Safari doesn't
   leave the last-tapped card stuck in the hover state — that's why
   the rightmost card "perked up for no reason" after a tap. Touch
   devices report (hover: none) and skip this rule entirely. */
@media (hover: hover) {
  .card.tappable:hover {
    transform: translateY(-6px);
    box-shadow:
      0 1px 0 rgba(255,255,255,0.5) inset,
      0 0 0 1px var(--brass) inset,
      0 22px 30px -12px var(--shadow-deep),
      0 0 30px -4px rgba(232, 203, 150, 0.35);
  }
}

.pile .card {
  --w: clamp(82px, 19vw, 120px);
  --h: calc(var(--w) * 1.4);
}

.deal-cue {
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.1rem;
  color: var(--cream-dim);
  font-variation-settings: "opsz" 60, "SOFT" 100;
  min-height: 1.6em;
  transition: opacity 200ms;
}

/* Hand */
.hand-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.hand {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: var(--space-3) 0 var(--space-4);
  perspective: 1200px;
  min-height: calc(var(--space-3) + 110px * 1.4);
  /* allow horizontal scroll on small screens if hand grows */
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.hand::-webkit-scrollbar { display: none; }

.hand .card {
  margin-left: -28px;
  transform-origin: bottom center;
  flex: 0 0 auto;
}

/* Cards that are *new this render* — used both for round-start deal and
   the rare path where renderHand sees an unannounced new card. The
   optimistic pick handlers don't use this; they animate the element
   directly via Web Animations. */
.hand .card.arriving {
  animation: card-arrive 380ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes card-arrive {
  from { opacity: 0; transform: scale(0.92) translateY(-6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.hand .card:first-child { margin-left: 0; }

.hand .card.selected {
  transform: translateY(-30px) rotate(-3deg) scale(1.04);
  box-shadow:
    0 0 0 3px var(--brass-bright) inset,
    0 0 0 6px rgba(232, 203, 150, 0.22),
    0 32px 40px -12px rgba(0, 0, 0, 0.7),
    0 0 48px -2px rgba(232, 203, 150, 0.55);
  filter: brightness(1.08) saturate(1.06);
  z-index: 5;
  animation: selected-pulse 1.6s ease-in-out infinite;
}

/* Brass coin badge above each selected card. Unambiguous "this card is
   in the drop pile" signal — no need to count brass borders. */
.hand .card.selected::before {
  content: "✓";
  position: absolute;
  top: -18px;
  left: 50%;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--brass-bright) 0%, var(--brass) 100%);
  color: var(--ink);
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-weight: 900;
  font-size: 0.95rem;
  line-height: 1;
  border: 1.5px solid var(--brass-dim);
  box-shadow:
    0 0 0 2px var(--ink),
    0 4px 12px rgba(0, 0, 0, 0.5),
    0 0 20px rgba(232, 203, 150, 0.6);
  transform: translateX(-50%) scale(1);
  animation: badge-pop 280ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
  z-index: 6;
  pointer-events: none;
}

@keyframes badge-pop {
  from { transform: translateX(-50%) scale(0); opacity: 0; }
  to   { transform: translateX(-50%) scale(1); opacity: 1; }
}

@keyframes selected-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 3px var(--brass-bright) inset,
      0 0 0 6px rgba(232, 203, 150, 0.22),
      0 32px 40px -12px rgba(0, 0, 0, 0.7),
      0 0 48px -2px rgba(232, 203, 150, 0.55);
  }
  50% {
    box-shadow:
      0 0 0 3px var(--brass-bright) inset,
      0 0 0 8px rgba(232, 203, 150, 0.32),
      0 32px 40px -12px rgba(0, 0, 0, 0.7),
      0 0 60px 0 rgba(232, 203, 150, 0.7);
  }
}

@media (hover: hover) {
  .hand .card.tappable:not(.selected):hover {
    transform: translateY(-10px);
  }
}

.action-bar {
  /* 3-column grid keeps each toggle anchored to its own slot regardless
     of which siblings are visible. The middle column is `auto` (sized
     to Quick drop's content) sandwiched between two 1fr fillers, so
     Quick drop stays at the dead centre of the bar even when Drop
     Selected is hidden. (1fr 1fr 1fr was equal-thirds, but Drop
     Selected's text is wider than 1/3 of the bar on phones — the
     button overflowed into Quick drop's column, dragging the visible
     centre rightward.) */
  display: grid;
  /* minmax(0, 1fr) lets the filler tracks shrink below their content
     width — without it, an over-wide item on the right (Drop Selected)
     forces its 1fr column to expand to the item's intrinsic size,
     which pushes the whole bar past its parent's edge. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background:
    linear-gradient(180deg, rgba(255, 235, 195, 0.04), transparent),
    rgba(0, 0, 0, 0.30);
  border: 1px solid rgba(201, 169, 110, 0.25);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  /* Belt-and-suspenders: clip any item that still tries to overflow
     after minmax+shorter labels (e.g., extreme zoom levels). */
  overflow: hidden;
}

.action-bar > :nth-child(1) { justify-self: start; }
.action-bar > :nth-child(2) { justify-self: center; }
.action-bar > :nth-child(3) { justify-self: end; }

/* Drop Selected when Quick drop is on: still occupies its grid cell
   (visibility: hidden vs display: none) so the bar's layout — and
   therefore the play area above — stays pixel-stable when the toggle
   flips. aria-hidden + tabindex=-1 keep it out of focus / SR flow. */
#dropSelected.stowed {
  visibility: hidden;
  pointer-events: none;
}

/* Slick switch for "Call Show" */
.switch {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  user-select: none;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.switch input { display: none; }

.switch .track {
  width: 42px;
  height: 24px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--brass-dim);
  border-radius: 999px;
  position: relative;
  transition: background 200ms, border-color 200ms;
  flex-shrink: 0;
}

.switch .track::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  background: var(--cream-dim);
  border-radius: 50%;
  transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1), background 200ms;
}

.switch input:checked + .track {
  background: rgba(196, 80, 62, 0.30);
  border-color: var(--ember);
}

.switch input:checked + .track::after {
  transform: translateX(18px);
  background: var(--ember);
  box-shadow: 0 0 12px rgba(196, 80, 62, 0.6);
}

.switch .label {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cream-dim);
  transition: color 200ms;
  white-space: nowrap;
}

.switch input:checked ~ .label { color: var(--ember); }

.btn-drop {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  padding: 0.7rem 1.1rem;
  white-space: nowrap;
}

/* Toast (errors / system) */
.toast {
  position: fixed;
  top: max(var(--space-4), env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%) translateY(-150%);
  background: linear-gradient(180deg, #2a1212, #160707);
  border: 1px solid var(--ember);
  color: var(--cream);
  padding: 0.8rem 1.1rem;
  border-radius: var(--radius);
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  z-index: 100;
  max-width: calc(100vw - 2rem);
  box-shadow: 0 12px 36px -10px rgba(0,0,0,0.7);
  transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.toast.show {
  transform: translateX(-50%) translateY(0);
  animation: shake-soft 360ms ease-out 320ms;
}

.toast.info { border-color: var(--brass); background: linear-gradient(180deg, #1c2a20, #0d1812); }

/* Show-banner: when someone calls SHOW, dramatic reveal. Inline within
   the .play column so it sits between the play-log and the hand
   without ever overlapping the cards (the previous fixed-bottom
   placement landed right on top of the hand on phone-sized screens). */
.show-banner {
  align-self: center;
  background: linear-gradient(180deg, rgba(196, 80, 62, 0.95), rgba(140, 50, 40, 0.95));
  color: var(--cream);
  padding: 0.5rem 1rem;
  border-radius: 16px;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-align: center;
  text-transform: uppercase;
  box-shadow: 0 10px 30px -8px rgba(196, 80, 62, 0.6);
  animation: pulse-active 1.6s ease-in-out infinite;
  /* Allow wrapping rather than ellipsis-clipping long bot names. The
     pill stays inside the play column via max-width and centers itself. */
  max-width: calc(100% - var(--space-4));
  word-break: break-word;
}

/* ----- Card flight ghosts (cloned cards animating across the page) -- */

.fly-ghost {
  position: fixed;
  z-index: 90;
  pointer-events: none;
  transition: transform 580ms cubic-bezier(0.32, 0.72, 0.36, 1.04),
              opacity 280ms ease;
  border-radius: 8px;
  background: var(--paper);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.5) inset,
    0 0 0 1px rgba(0,0,0,0.18) inset,
    0 30px 50px -12px rgba(0,0,0,0.6),
    0 0 32px -4px rgba(232, 203, 150, 0.4);
  overflow: hidden;
}

.fly-ghost img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

/* Card mid-drop: the ghost handles the visible flight; the original
   element vanishes instantly and then collapses its slot width so
   neighbouring cards smoothly fill the gap. The transform/animation
   overrides are critical — without them, .selected's tilt + lift +
   pulse stays in effect while max-width collapses, rendering the
   original as a tilted shrinking sliver next to the ghost. */
.card.flying-out {
  opacity: 0;
  pointer-events: none;
  max-width: 0;
  margin-left: 0 !important;
  overflow: hidden;
  transform: none !important;
  animation: none !important;
  transition: max-width 360ms cubic-bezier(0.4, 0, 0.2, 1),
              margin-left 360ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ----- Activity log line — what just happened on the table --------- */

.play-log {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass);
  text-align: center;
  min-height: 1.4em;
  opacity: 0;
  transition: opacity 320ms ease;
  margin-top: -0.5rem;
}

.play-log.show {
  opacity: 1;
  animation: log-pulse 2.6s ease-out;
}

.play-log .who { color: var(--cream); }
.play-log .verb { color: var(--brass-bright); }
.play-log .pip {
  display: inline-block;
  margin-left: 0.25em;
  font-family: var(--serif);
  font-size: 1rem;
  letter-spacing: 0;
}
.play-log .pip.red { color: #d96650; }
.play-log .pip.black { color: var(--cream); }

/* ----- Help button + modal ---------------------------------------- */

/* Profile initials button — top-right, lobby only */
.profile-toggle {
  position: fixed;
  top: max(0.75rem, calc(env(safe-area-inset-top) + 0.5rem));
  right: 0.75rem;
  z-index: 80;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(201, 169, 110, 0.14);
  border: 1px solid rgba(201, 169, 110, 0.38);
  color: var(--brass-bright);
  font-family: var(--mono);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 200ms, border-color 200ms;
}
.profile-toggle:hover {
  background: rgba(201, 169, 110, 0.26);
  border-color: var(--brass);
}

/* Profile overlay */
.profile-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: var(--space-5);
  background: radial-gradient(ellipse at 50% 30%, rgba(20, 50, 38, 0.88) 0%, rgba(8, 25, 15, 0.97) 70%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fade-in 280ms ease both;
}
.profile-overlay[hidden] { display: none; }

.profile-card {
  position: relative;
  max-width: 300px;
  width: 100%;
  padding: var(--space-7) var(--space-6) var(--space-6);
  text-align: center;
  background:
    linear-gradient(180deg, rgba(255,235,195,0.06) 0%, rgba(0,0,0,0.20) 100%),
    var(--felt);
  border-radius: var(--radius-lg);
  box-shadow:
    0 1px 0 rgba(255,235,195,0.08) inset,
    0 0 0 1px rgba(201,169,110,0.22) inset,
    0 40px 80px -20px rgba(0,0,0,0.7);
  animation: rise 520ms cubic-bezier(0.16, 1, 0.3, 1) 60ms both;
}

.profile-close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  background: none;
  border: none;
  color: var(--cream-dim);
  font-size: 0.9rem;
  cursor: pointer;
  padding: var(--space-2);
  opacity: 0.45;
  transition: opacity 200ms;
  line-height: 1;
}
.profile-close:hover { opacity: 1; }

.profile-avatar-lg {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(201,169,110,0.28), rgba(201,169,110,0.10));
  border: 1px solid rgba(201,169,110,0.38);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--brass-bright);
  margin: 0 auto var(--space-3);
}

.profile-first-name {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 800;
  font-variation-settings: "opsz" 72, "SOFT" 50;
  font-size: clamp(1.6rem, 6vw, 2rem);
  background: linear-gradient(180deg, var(--cream) 30%, var(--brass-bright) 62%, var(--brass-dim) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: var(--space-2);
  line-height: 1.1;
}

.profile-level-name {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: var(--space-5);
}

.profile-footnote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.78rem;
  color: var(--cream-dim);
  opacity: 0.5;
  margin-bottom: var(--space-5);
  line-height: 1.45;
}

.profile-signout {
  width: 100%;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.help-toggle {
  position: fixed;
  top: max(0.75rem, calc(env(safe-area-inset-top) + 0.5rem));
  right: 0.75rem;
  z-index: 80;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid var(--brass-dim);
  color: var(--brass);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
  font-size: 1.1rem;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 200ms, color 200ms, border-color 200ms, transform 120ms;
}

.help-toggle:hover {
  background: rgba(201, 169, 110, 0.18);
  color: var(--brass-bright);
  border-color: var(--brass);
}

.help-toggle:active { transform: scale(0.94); }

/* On the lobby the ? button sits hidden — "How to play" is inside the panel */
.help-toggle--lobby { display: none; }

/* On the game page the profile button sits left of the ? help button */
.profile-toggle--game {
  right: calc(0.75rem + 36px + 0.5rem);
}

.help-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: var(--space-5);
  overflow-y: auto;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(20, 50, 38, 0.85) 0%, rgba(8, 25, 15, 0.96) 70%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fade-in 280ms ease both;
}

.help-modal[hidden] { display: none; }

.help-card {
  position: relative;
  max-width: 460px;
  width: 100%;
  padding: var(--space-7) var(--space-5) var(--space-5);
  background:
    linear-gradient(180deg, rgba(255, 235, 195, 0.06) 0%, rgba(0, 0, 0, 0.20) 100%),
    var(--felt);
  border-radius: var(--radius-lg);
  box-shadow:
    0 1px 0 rgba(255, 235, 195, 0.08) inset,
    0 0 0 1px rgba(201, 169, 110, 0.22) inset,
    0 40px 80px -20px rgba(0, 0, 0, 0.7);
  animation: rise 520ms cubic-bezier(0.16, 1, 0.3, 1) 60ms both;
}

.help-card::before,
.help-card::after {
  content: "";
  position: absolute;
  width: 48px;
  height: 48px;
  border: 1px solid var(--brass);
  pointer-events: none;
}
.help-card::before {
  top: 12px; left: 12px;
  border-right: none; border-bottom: none;
}
.help-card::after {
  bottom: 12px; right: 12px;
  border-left: none; border-top: none;
}

.help-eyebrow {
  text-align: center;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: var(--space-2);
}
.help-eyebrow::before,
.help-eyebrow::after {
  content: "✦";
  display: inline-block;
  margin: 0 0.6em;
  color: var(--brass-dim);
}

.help-card h2 {
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 800;
  font-variation-settings: "opsz" 144, "SOFT" 50;
  font-size: clamp(1.7rem, 5vw, 2.2rem);
  line-height: 1;
  background: linear-gradient(180deg, var(--cream) 30%, var(--brass-bright) 60%, var(--brass-dim) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-5);
}

.help-card section { margin-bottom: var(--space-4); }

.help-card h3 {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--brass);
  margin: 0 0 var(--space-2);
}

.help-card p,
.help-card ol,
.help-card ul {
  font-family: var(--serif);
  font-size: 0.95rem;
  font-variation-settings: "opsz" 24, "SOFT" 50;
  color: var(--cream);
  line-height: 1.5;
  margin: 0;
}

.help-card ol,
.help-card ul {
  padding-left: 1.25rem;
}

.help-card li + li { margin-top: 4px; }
.help-card strong { color: var(--brass-bright); font-weight: 600; }
.help-card em { color: var(--brass); font-style: italic; }

.help-card .pip-line {
  font-family: var(--mono);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  color: var(--cream);
}

.help-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--brass-dim);
  background: rgba(0, 0, 0, 0.3);
  color: var(--cream-dim);
  cursor: pointer;
  font-size: 1.25rem;
  font-family: var(--serif);
  display: grid;
  place-items: center;
  transition: color 200ms, border-color 200ms, background 200ms;
}
.help-close:hover {
  color: var(--brass-bright);
  border-color: var(--brass);
  background: rgba(201, 169, 110, 0.12);
}

.help-got-it {
  margin-top: var(--space-3);
  width: 100%;
}

/* ----- How-to-play video modal ------------------------------------ */

.video-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 25, 15, 0.97);
  animation: fade-in 200ms ease both;
}

.video-modal[hidden] { display: none !important; }

.video-modal-player {
  display: block;
  /* Portrait video — scale to fit viewport, maintain aspect ratio natively */
  width: auto;
  height: auto;
  max-width: 100vw;
  max-height: 100dvh;
  /* Clip 2px off each side to kill sub-pixel shimmer on video edges */
  clip-path: inset(0 4px);
}

.video-modal-close {
  position: fixed;
  top: max(0.75rem, env(safe-area-inset-top, 0.75rem));
  right: 0.75rem;
  z-index: 310;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.8rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 150ms, border-color 150ms;
}

.video-modal-close:hover {
  background: rgba(0, 0, 0, 0.8);
  border-color: rgba(255, 255, 255, 0.4);
}

/* On wider screens, cap at a comfortable portrait column */
@media (min-width: 540px) {
  .video-modal-player {
    max-height: 88vh;
    clip-path: inset(0 2px round var(--radius-lg));
    box-shadow: 0 40px 80px -10px rgba(0, 0, 0, 0.8);
  }
}

/* ----- Round winner overlay --------------------------------------- */

/* Leave confirmation dialog */
.leave-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: rgba(8, 25, 15, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fade-in 200ms ease both;
  padding: var(--space-5);
}

.leave-overlay[hidden] { display: none; }

.leave-card {
  background:
    linear-gradient(180deg, rgba(255,235,195,0.05) 0%, rgba(0,0,0,0.12) 100%),
    var(--felt-light);
  border: 1px solid rgba(201,169,110,0.22);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px -12px var(--shadow-deep);
  padding: var(--space-6) var(--space-6) var(--space-5);
  max-width: 320px;
  width: 100%;
  text-align: center;
}

.leave-title {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-style: italic;
  font-variation-settings: "opsz" 48, "SOFT" 60;
  color: var(--cream);
  margin-bottom: var(--space-2);
}

.leave-body {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--cream-dim);
  margin: 0 0 var(--space-5);
}

.leave-actions {
  display: flex;
  gap: var(--space-3);
}

.leave-actions .btn {
  flex: 1;
}

.leave-signout {
  margin-top: var(--space-4);
  text-align: center;
}

.btn-ember {
  background: linear-gradient(180deg, #d4604c 0%, var(--ember) 100%);
  border-color: #a33d2d;
  color: var(--cream);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.15) inset,
    0 6px 18px -8px rgba(196,80,62,0.6);
}
.btn-ember:hover:not(:disabled) {
  box-shadow:
    0 1px 0 rgba(255,255,255,0.2) inset,
    0 10px 24px -8px rgba(196,80,62,0.7);
}

.winner-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  align-items: start;
  overflow-y: auto;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(20, 50, 38, 0.85) 0%, rgba(8, 25, 15, 0.96) 70%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: fade-in 320ms ease both;
  padding: var(--space-5);
}

.winner-overlay[hidden] { display: none; }

.winner-card {
  position: relative;
  max-width: 440px;
  width: 100%;
  padding: var(--space-7) var(--space-5) var(--space-6);
  text-align: center;
  background:
    linear-gradient(180deg, rgba(255, 235, 195, 0.06) 0%, rgba(0,0,0,0.20) 100%),
    var(--felt);
  border-radius: var(--radius-lg);
  box-shadow:
    0 1px 0 rgba(255,235,195,0.08) inset,
    0 0 0 1px rgba(201, 169, 110, 0.22) inset,
    0 40px 80px -20px rgba(0,0,0,0.7);
  animation: rise 600ms cubic-bezier(0.16, 1, 0.3, 1) 80ms both;
}

.winner-card::before,
.winner-card::after {
  content: "";
  position: absolute;
  width: 56px;
  height: 56px;
  border: 1px solid var(--brass);
  pointer-events: none;
}
.winner-card::before {
  top: 12px; left: 12px;
  border-right: none; border-bottom: none;
}
.winner-card::after {
  bottom: 12px; right: 12px;
  border-left: none; border-top: none;
}

.winner-eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: var(--space-3);
}

.winner-eyebrow::before,
.winner-eyebrow::after {
  content: "✦";
  display: inline-block;
  margin: 0 0.6em;
  color: var(--brass-dim);
}

.winner-name {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 800;
  font-variation-settings: "opsz" 144, "SOFT" 50;
  font-size: clamp(2.2rem, 7vw, 3.4rem);
  line-height: 1.05;
  background: linear-gradient(180deg, var(--cream) 30%, var(--brass-bright) 60%, var(--brass-dim) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-2);
}

.winner-verb {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2rem;
  font-variation-settings: "opsz" 60, "SOFT" 100;
  color: var(--cream-dim);
  margin-bottom: var(--space-5);
}

/* Round-end reveal: each player's hand at the moment the round
   ended, alongside their score delta. Replaces the "deltas only"
   summary as the primary signal of who won and how. */
.winner-hands {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: var(--space-4) 0 var(--space-3);
  text-align: left;
}

.winner-hand-row {
  padding: var(--space-2) var(--space-3);
  background: rgba(0, 0, 0, 0.20);
  border: 1px solid rgba(201, 169, 110, 0.18);
  border-radius: var(--radius);
  transition: background 240ms, border-color 240ms;
}

.winner-hand-row.winner {
  background: rgba(201, 169, 110, 0.14);
  border-color: var(--brass);
  box-shadow: 0 0 0 1px rgba(201, 169, 110, 0.2),
              0 0 22px -6px rgba(232, 203, 150, 0.4);
}

.winner-hand-row.bust {
  background: rgba(196, 80, 62, 0.10);
  border-color: rgba(196, 80, 62, 0.45);
}

.winner-hand-row .who-line {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--cream);
  margin-bottom: 4px;
}

.winner-hand-row .role {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass);
}

.winner-hand-row.bust .role { color: var(--ember); }

.winner-hand-row .cards {
  display: flex;
  align-items: flex-end;
  position: relative; /* anchor for sutla-spark absolute children */
}

.winner-hand-row .mini-card {
  /* Responsive size — bigger on roomy phones, never so big a six-card
     hand overflows the row. clamp(min, preferred, max). */
  width: clamp(58px, 17vw, 84px);
  aspect-ratio: 1 / 1.4;
  border-radius: 7px;
  background: var(--paper);
  overflow: hidden;
  /* Overlap also responsive: tighter on narrow viewports so multi-card
     hands fit, looser on wider ones. clamp() with negative values:
     min is the *most negative* (biggest overlap), max is the least. */
  margin-left: clamp(-20px, -3.5vw, -12px);
  border: 1px solid rgba(0, 0, 0, 0.22);
  box-shadow:
    0 2px 0 rgba(0, 0, 0, 0.18),
    0 6px 12px -2px rgba(0, 0, 0, 0.45);
  flex: 0 0 auto;
}

.winner-hand-row .mini-card:first-child {
  margin-left: 0;
}

.winner-hand-row .mini-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.winner-hand-row .delta {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 1.1rem;
  color: var(--brass-bright);
  text-align: right;
  margin-top: var(--space-1);
}

.winner-hand-row.bust .delta { color: var(--ember); }

.winner-hand-row .delta-label {
  display: block;
  font-size: 0.55rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream-dim);
  font-weight: 400;
}

.winner-deltas {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}

.winner-delta {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--space-3) var(--space-4);
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(201, 169, 110, 0.3);
  border-radius: var(--radius);
  min-width: 110px;
}

.winner-delta .lbl {
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cream-dim);
}

.winner-delta .num {
  font-family: var(--mono);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--brass-bright);
}

.winner-delta.win .num { color: var(--brass-bright); }
.winner-delta.bust .num { color: var(--ember); }

.winner-actions {
  display: flex;
  gap: var(--space-3);
}

.winner-actions .btn { flex: 1; }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

@keyframes log-pulse {
  0%   { opacity: 0; transform: translateY(-4px); }
  10%  { opacity: 1; transform: translateY(0); }
  90%  { opacity: 1; }
  100% { opacity: 0; }
}

/* Brass spark particles for the winner card. CSS-only, no JS. */
.spark {
  position: absolute;
  width: 6px; height: 6px;
  background: var(--brass-bright);
  border-radius: 50%;
  filter: blur(0.5px);
  pointer-events: none;
  opacity: 0;
  animation: spark 1.6s ease-out infinite;
}
.spark:nth-child(1) { top: 18%; left: 14%; animation-delay: 0s; }
.spark:nth-child(2) { top: 22%; right: 18%; animation-delay: 0.4s; }
.spark:nth-child(3) { bottom: 28%; left: 22%; animation-delay: 0.8s; }
.spark:nth-child(4) { bottom: 22%; right: 16%; animation-delay: 1.2s; }
.spark:nth-child(5) { top: 50%; left: 6%; animation-delay: 0.6s; }
.spark:nth-child(6) { top: 50%; right: 6%; animation-delay: 1.0s; }

@keyframes spark {
  0%   { opacity: 0; transform: scale(0); }
  20%  { opacity: 1; transform: scale(1.4); }
  100% { opacity: 0; transform: scale(0.4) translateY(-30px); }
}

/* ----- Animations ------------------------------------------- */

@keyframes rise {
  from { opacity: 0; transform: translateY(28px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes stamp-in {
  0%   { opacity: 0; transform: scale(1.18) rotate(-2deg); }
  60%  { opacity: 1; transform: scale(0.96) rotate(0.5deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes seat-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes blink {
  0%, 100% { opacity: 0.25; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.3); }
}

@keyframes pulse-active {
  0%, 100% { box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.18), 0 0 24px -4px rgba(232, 203, 150, 0.3); }
  50%      { box-shadow: 0 0 0 6px rgba(201, 169, 110, 0.30), 0 0 36px -2px rgba(232, 203, 150, 0.6); }
}

@keyframes shake-soft {
  10%, 90% { transform: translate(-50%, 0); }
  20%, 80% { transform: translate(calc(-50% - 4px), 0); }
  30%, 50%, 70% { transform: translate(calc(-50% + 6px), 0); }
  40%, 60% { transform: translate(calc(-50% - 6px), 0); }
}

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

/* ----- Level-up overlay ---------------------------------------- */

.levelup-overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: grid;
  place-items: center;
  background: rgba(5, 18, 12, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: levelup-bg-in 0.4s ease both;
}

@keyframes levelup-bg-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.levelup-card {
  position: relative;
  text-align: center;
  padding: var(--space-8) var(--space-7);
  background: radial-gradient(ellipse at 50% 0%, rgba(201,169,110,0.18) 0%, transparent 70%),
              rgba(10, 28, 18, 0.96);
  border: 1px solid rgba(201,169,110,0.35);
  border-radius: calc(var(--radius) * 2);
  box-shadow: 0 0 80px rgba(201,169,110,0.25), 0 8px 40px rgba(0,0,0,0.7);
  animation: levelup-card-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  overflow: hidden;
}

@keyframes levelup-card-in {
  from { transform: scale(0.82) translateY(24px); opacity: 0; }
  to   { transform: scale(1) translateY(0); opacity: 1; }
}

.levelup-eyebrow {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: var(--space-3);
}

.levelup-title {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--cream-dim);
  margin-bottom: var(--space-2);
}

.levelup-name {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 900;
  font-variation-settings: "opsz" 72, "SOFT" 60;
  font-size: clamp(2.4rem, 10vw, 3.6rem);
  line-height: 1;
  background: linear-gradient(
    160deg,
    var(--cream) 0%,
    var(--brass-bright) 40%,
    #f5e08a 60%,
    var(--brass-dim) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: levelup-name-in 0.6s 0.2s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes levelup-name-in {
  from { transform: scale(0.7); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* Burst sparks around the card */
.levelup-sparks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.levelup-sparks span {
  position: absolute;
  width: 3px;
  height: 16px;
  border-radius: 2px;
  background: var(--brass-bright);
  opacity: 0;
  transform-origin: 50% 100%;
}

.levelup-sparks span:nth-child(1) { top: 8%;  left: 14%; animation: ls1 1s 0.05s ease-out both; }
.levelup-sparks span:nth-child(2) { top: 4%;  left: 48%; animation: ls2 1s 0.10s ease-out both; }
.levelup-sparks span:nth-child(3) { top: 8%;  right:14%; animation: ls3 1s 0.07s ease-out both; }
.levelup-sparks span:nth-child(4) { top: 46%; left: 2%;  animation: ls4 1s 0.15s ease-out both; }
.levelup-sparks span:nth-child(5) { top: 46%; right: 2%; animation: ls5 1s 0.12s ease-out both; }
.levelup-sparks span:nth-child(6) { bottom:8%; left: 14%; animation: ls6 1s 0.08s ease-out both; }
.levelup-sparks span:nth-child(7) { bottom:4%; left: 48%; animation: ls7 1s 0.18s ease-out both; }
.levelup-sparks span:nth-child(8) { bottom:8%; right:14%; animation: ls8 1s 0.06s ease-out both; }

@keyframes ls1 { 0%{opacity:1;transform:rotate(-40deg) translateY(0) scaleY(.3)} 45%{opacity:.9;transform:rotate(-40deg) translateY(-30px) scaleY(1)} 100%{opacity:0;transform:rotate(-40deg) translateY(-54px) scaleY(.5)} }
@keyframes ls2 { 0%{opacity:1;transform:rotate(-10deg) translateY(0) scaleY(.3)} 45%{opacity:.9;transform:rotate(-10deg) translateY(-36px) scaleY(1)} 100%{opacity:0;transform:rotate(-10deg) translateY(-62px) scaleY(.5)} }
@keyframes ls3 { 0%{opacity:1;transform:rotate(40deg)  translateY(0) scaleY(.3)} 45%{opacity:.9;transform:rotate(40deg)  translateY(-30px) scaleY(1)} 100%{opacity:0;transform:rotate(40deg)  translateY(-54px) scaleY(.5)} }
@keyframes ls4 { 0%{opacity:1;transform:rotate(-70deg) translateY(0) scaleY(.3)} 45%{opacity:.9;transform:rotate(-70deg) translateY(-28px) scaleY(1)} 100%{opacity:0;transform:rotate(-70deg) translateY(-50px) scaleY(.5)} }
@keyframes ls5 { 0%{opacity:1;transform:rotate(70deg)  translateY(0) scaleY(.3)} 45%{opacity:.9;transform:rotate(70deg)  translateY(-28px) scaleY(1)} 100%{opacity:0;transform:rotate(70deg)  translateY(-50px) scaleY(.5)} }
@keyframes ls6 { 0%{opacity:1;transform:rotate(40deg)  translateY(0) scaleY(.3)} 45%{opacity:.9;transform:rotate(40deg)  translateY(-30px) scaleY(1)} 100%{opacity:0;transform:rotate(40deg)  translateY(-54px) scaleY(.5)} }
@keyframes ls7 { 0%{opacity:1;transform:rotate(10deg)  translateY(0) scaleY(.3)} 45%{opacity:.9;transform:rotate(10deg)  translateY(-36px) scaleY(1)} 100%{opacity:0;transform:rotate(10deg)  translateY(-62px) scaleY(.5)} }
@keyframes ls8 { 0%{opacity:1;transform:rotate(-40deg) translateY(0) scaleY(.3)} 45%{opacity:.9;transform:rotate(-40deg) translateY(-30px) scaleY(1)} 100%{opacity:0;transform:rotate(-40deg) translateY(-54px) scaleY(.5)} }

/* ----- Responsive tweaks ------------------------------------ */

@media (max-width: 480px) {
  .table-head { gap: var(--space-2); }
  .scores { flex-wrap: nowrap; }
  .score-chip { font-size: 0.78rem; padding: 0.4rem 0.65rem; gap: 0.5rem; flex-shrink: 1; min-width: 0; }
  /* On phones drop the labels — numbers + name are enough; the dot
     separator still tells you they're two distinct metrics. */
  .score-chip .m-lbl { display: none; }
  .score-chip .m-num { font-size: 0.9rem; }
  .score-chip .who { max-width: 80px; }
  .play { gap: var(--space-2); }
  .piles { padding: var(--space-2) var(--space-4); }
  .deal-cue { font-size: 0.95rem; }
  .hand { min-height: calc(var(--space-3) + 74px * 1.4 + 30px); }
  .panel { padding: var(--space-6) var(--space-5); }
  .hand .card { margin-left: -34px; }
  .hand .card.selected::before { width: 26px; height: 26px; top: -14px; font-size: 0.85rem; }
  .action-bar { padding: var(--space-2) var(--space-3); }
  .btn-drop { padding: 0.6rem 0.9rem; font-size: 0.7rem; letter-spacing: 0.22em; }
  .switch { gap: 6px; }
  .switch .track { width: 34px; height: 20px; }
  .switch .track::after { width: 14px; height: 14px; }
  .switch input:checked + .track::after { transform: translateX(14px); }
  .switch .label { font-size: 0.6rem; letter-spacing: 0.06em; }
  /* Winner card: tighter on small phones so Next Round button stays visible */
  .winner-card { padding: var(--space-4) var(--space-4); }
  .winner-name { font-size: clamp(1.8rem, 6vw, 2.4rem); margin-bottom: var(--space-1); }
  .winner-verb { font-size: 1rem; margin-bottom: var(--space-3); }
  .winner-hand-row .mini-card { width: clamp(44px, 12vw, 56px); }
}

@media (min-width: 720px) {
  .table {
    padding: var(--space-5) var(--space-6) calc(var(--space-5) + env(safe-area-inset-bottom));
    max-width: 900px;
    margin: 0 auto;
  }
  .hand .card { margin-left: -22px; }
}

/* ----- Sutla burst animation -------------------------------- */

/* Six sparks absolutely positioned within the empty .cards area.
   JS sets --tx / --ty per spark so they scatter in different directions. */
.sutla-spark {
  position: absolute;
  top: 28px;
  left: 28px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brass-bright);
  box-shadow: 0 0 5px var(--brass), 0 0 10px rgba(232, 203, 150, 0.4);
  pointer-events: none;
  animation: sutla-spark 500ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes sutla-spark {
  0%   { opacity: 0; transform: translate(0, 0) scale(0); }
  18%  { opacity: 1; transform: translate(0, 0) scale(1.4); }
  100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(0.1); }
}

/* ----- Ad slots --------------------------------------------- */

/* ----- Privacy footer --------------------------------------- */

.site-footer {
  text-align: center;
  padding: var(--space-4) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom));
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cream-dim);
  opacity: 0.45;
}

.site-footer a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: opacity 200ms;
}

.site-footer a:hover { opacity: 1; }