/* Pants on Fire — styling
   Mobile-first, Kahoot-aktig følelse: store knapper, klar typografi,
   leken fargekombinasjon (denim-blå bunn + flamme-orange aksenter).
*/

:root {
  /* GAME SHOW palett — teatralt party-spill, høy kontrast, store displays.
     Fra Claude Designs redesign-pakke. Mettet aubergine bg, hot orange CTA,
     cream cards, dramatic pantsy-rød.

     Token-system:
       SURFACES (mood) — aubergine bg + cream/cream-glow cards
       ACTION         — primary orange signatur for ALL CTA
       IDENTITY       — pantsy-rød (rolle), smarty-gold (best clue), accent-cool (info)
       STATUS         — danger/success/warning kept separate */

  /* SURFACES — mer dramatisk dybde enn før (svartere bg, varmere cream) */
  --surface-deep: #0F0418;     /* Nesten-svart aubergine — gir mer kontrast */
  --surface-mid:  #1F0E2C;     /* Elevation 1 — for dark cards */
  --surface-hi:   #2B143D;     /* Elevation 2 — modal-overflater */
  --surface-lo:   #160820;     /* Recessed — input bg, secondary */
  --surface-card: #FFF4DE;     /* Cream — varmere enn før */
  --surface-card-bright: #FFF8E8;
  --surface-card-quiet: rgba(255, 244, 222, 0.55);

  /* Bakoverkompatibilitet */
  --bg: var(--surface-deep);
  --bg-2: var(--surface-mid);
  --card: var(--surface-card);

  /* TEKST */
  --text-on-deep: #FFF4DE;     /* Cream på aubergine */
  --text-on-card: #1A0820;     /* Deep aubergine på cream — høyere kontrast */
  --text-muted: rgba(255, 244, 222, 0.7);
  --text-faint: rgba(255, 244, 222, 0.4);
  --ink-soft: #3F1A4A;         /* Soft tekst på cream */
  --ink:      #1A0820;          /* Hardest tekst på cream — for input + body */
  --card-fg: var(--text-on-card);
  --muted: var(--text-muted);
  --border: #F0E2C2;

  /* PRIMARY ACTION — Game Show fire-orange, mer mettet enn før */
  --primary: #FF5722;          /* Game Show orange — knall */
  --primary-hover: #D33E14;
  --primary-on: #ffffff;
  --primary-fg: var(--primary-on);
  --primary-2: var(--primary-hover);
  --primary-glow: rgba(255, 87, 34, 0.45);

  /* Bakover: --fire alias */
  --fire: var(--primary);
  --fire-dim: var(--primary-hover);
  --ember: #FFC857;            /* Warm gold-orange aksent */

  /* SECONDARY */
  --secondary: #FFC857;
  --secondary-2: #E8A93A;

  /* COOL ACCENT */
  --accent-cool: #14b8a6;
  --accent-cool-deep: #0f766e;
  --accent-cool-bg: rgba(20, 184, 166, .12);

  /* IDENTITET — Game Show pantsy-rød (sterkere enn rose) + gold */
  --pantsy: #FF1744;           /* Hot crimson — Pantsy-drama */
  --pantsy-2: #D81144;
  --pantsy-deep: #A8082E;
  --pantsy-glow: rgba(255, 23, 68, 0.30);
  --pantsy-hi: #FF3D6B;        /* Lighter for highlights */
  --gold: #FFD24A;             /* Smarty / celebration gold */
  --gold-deep: #C99820;
  --gold-glow: rgba(255, 210, 74, 0.30);
  --smarty-gold: var(--gold);

  /* STATUS */
  --danger: #FF1744;
  --success: #16a34a;
  --warning: #FFC857;

  /* SHAPE — større radius enn før (Game Show: 28 cards, 18 buttons) */
  --radius: 18px;
  --radius-card: 28px;
  --radius-btn: 18px;
  --radius-pill: 999px;
  --shadow: 0 10px 30px rgba(0, 0, 0, .35);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, .50);
  --shadow-glow: 0 8px 24px var(--primary-glow);

  /* TYPOGRAFI — Game Show: Bricolage display, Inter Tight body, JetBrains Mono codes */
  --font-display: "Bricolage Grotesque", "Archivo Black", system-ui, sans-serif;
  --font-body: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  /* GAME SHOW bakgrunn — radial gradient fra varm aubergine på toppen
     til near-black i bunnen. Solid bg-color UNDER gradienten så safe-area-
     inset-top og -bottom IKKE viser hvit fra default html-bg på iOS. */
  background-color: #0F0418;
  background-image: radial-gradient(ellipse at 50% 0%, #3A0E2A 0%, #1A0820 50%, #0F0418 100%);
  background-attachment: fixed;
  color: var(--text-on-deep);
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
/* Sikre at html har samme solid bg så Safari ikke viser hvit topp/bunn-stripe
   under bounce-scroll eller i dynamic-island området. */
html {
  background-color: #0F0418;
}

/* GAME SHOW typografi — display på alt stort, Inter Tight på body. */
.brand,
.hero h1,
h2,
.code-display,
.reveal-card .word,
.share-card .share-winner .name,
.share-card .share-brand,
.recap-card .player-name,
.timer span:not(.label) {
  font-family: var(--font-display);
  letter-spacing: -0.035em;
  font-weight: 700;
}

/* Mono brukes for 4-tegns rom-koder + technical readouts */
.code-display,
input.code-input {
  font-family: var(--font-mono);
  letter-spacing: 0.18em;
  font-weight: 700;
}

.app {
  max-width: 480px;
  margin: 0 auto;
  /* Fallback for Safari < 15.4 */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  /* env(safe-area-inset-*) tar høyde for iPhone-notch + dynamic island.
     Vi LEGGER TIL en buffer på 16px så innhold aldri klippes av dynamic island
     på iPhone 14 Pro+ (env-verdien dekker bare statusbar-høyden, ikke buffer
     for klikkbart område rundt dynamic island).
     Black-translucent status bar mode (PWA) gir env() = full status bar height. */
  padding:
    calc(env(safe-area-inset-top, 0px) + 16px)
    max(12px, env(safe-area-inset-left))
    max(20px, env(safe-area-inset-bottom))
    max(12px, env(safe-area-inset-right));
}

/* Større padding på iPad og oppover */
@media (min-width: 600px) {
  .app { padding-left: 20px; padding-right: 20px; }
}

/* ---------------- Top bar — GAME SHOW ---------------- */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 14px;
  color: rgba(255, 244, 222, .7);
}
.topbar-right { display: flex; align-items: center; gap: 8px; }
.topbar .brand {
  display: flex;
  align-items: center;
  gap: 6px;
  /* Display-font på wordmark — Bricolage Grotesque, ikke samme som body */
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-on-deep);
  font-size: 18px;
}
.topbar .brand .flame {
  display: inline-block;
  filter: drop-shadow(0 0 8px var(--primary-glow));
}
/* Brand-pantsy span gets specifikt display-font weight i game show — */
.topbar .brand .brand-pantsy {
  font-family: var(--font-display);
  font-weight: 700;
}
.lang-toggle, .icon-btn {
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.15);
  color: white;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
}
.icon-btn { padding: 6px 10px; font-size: 16px; }
.icon-btn.muted { opacity: 0.5; }

/* Profil-knapp øverst til høyre — match Claude Designs AppBar-avatar.
   Subtle dark-transparent bg + 1px hvit border + cream-tekst (ikke solid fire).
   Tidligere var den var(--primary) som var altfor påtrengende. */
.profile-btn {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--surface-hi);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--text-on-deep);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0;
  padding: 0;
  transition: transform .12s ease, background .12s ease;
  box-shadow: none;
}
.profile-btn:hover { background: rgba(255, 255, 255, 0.10); }
.profile-btn:active { transform: scale(0.96); }

/* ---------------- Screens ----------------
   `#screen` (i index.html) er parent for alle render()-cycle-screens.
   Den må ha flex:1 og display:flex slik at child .screen får full høyde
   og kan plassere bottom-CTA pinnet via flex-spacer eller margin-top:auto. */
#screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* PRINSIPP 1: bottom-CTA er ALLTID pinnet til bunnen av skjermen.
   Helper-class `.pin-bottom` på en CTA pusher den ned via margin-top:auto.
   PRINSIPP 2: hovedkortet på 03/04/05/06/07 har flex:1 så det vokser til
   å fylle all plass mellom topp-eyebrow og bottom-CTA — se .reveal-card,
   .handover-card, .clue-floor-card og .pre-reveal-card. */
.screen > .pin-bottom,
.screen .pin-bottom {
  margin-top: auto;
}
.screen > .btn:last-child {
  /* Knapper som direkte siste-barn av .screen får automatisk pin-bottom
     hvis det ikke allerede er en flex:1-search før dem. Dette gjelder
     reveal-screen, clue-screen, etc. */
  flex-shrink: 0;
}
/* slideIn-animasjonen er beholdt men bare anvendt på .screen.intro,
   som settes KUN ved fase-skifte (ikke per re-render). Tidligere fikk
   .screen alltid animation, som re-startet på hver state-oppdatering
   og skapte synlig "blink-in" på iOS Safari. */
.screen.intro {
  animation: slideIn .28s cubic-bezier(.32, .72, .32, 1);
}
@keyframes slideIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---------------- Hero (home) — GAME SHOW ----------------
   Ny mascot-sone: SVG-flamme + SVG-jeans side-ved-side, ingen emoji.
   "Pants on Fire" wordmark i Bricolage med per-bokstav drop-in. */
.hero {
  text-align: center;
  /* Komprimert padding så hjem-skjermen passer uten scroll på mindre telefoner.
     Tidligere 24x16x20 → 8x16x4. */
  padding: 8px 16px 4px;
}
.hero .logo {
  font-size: 64px;
  line-height: 1;
  filter: drop-shadow(0 6px 20px var(--primary-glow));
  animation: flicker 2s ease-in-out infinite alternate;
}
.hero .logo-img {
  display: block;
  margin: 0 auto;
  width: 96px;
  height: 96px;
  border-radius: 22px;
  animation: none;
  filter: drop-shadow(0 8px 24px var(--primary-glow));
  -webkit-user-select: none;
  user-select: none;
}
@keyframes flicker {
  0%   { transform: rotate(-2deg) scale(1); }
  50%  { transform: rotate(2deg) scale(1.04); }
  100% { transform: rotate(-1deg) scale(1); }
}

/* GAME SHOW mascot composer — flame venstre, jeans høyre, baseline-aligned */
.hero-mascot {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0;
  /* Tighter height — komprimert hero-zone for å passe uten scroll */
  height: 130px;
  margin: 2px auto;
  position: relative;
  /* compensate for flame on left to optically center the composition */
  margin-left: -8px;
}
.hero-mascot .mascot-flame {
  transform-origin: 50% 100%;
  animation: heroFlameStrut 1.6s ease-in-out infinite;
  margin-right: -18px;
  margin-bottom: 4px;
}
.hero-mascot .mascot-flame svg {
  display: block;
  filter: drop-shadow(0 0 14px var(--primary));
  transform-origin: 50% 100%;
  animation: heroFlameBlaze 0.6s ease-in-out infinite;
}
.hero-mascot .mascot-jeans {
  transform-origin: 50% 100%;
  animation: heroJeansRock 2.4s ease-in-out infinite;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.4));
}
.hero-mascot .mascot-jeans svg { display: block; }
@keyframes heroFlameStrut {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-6px) rotate(4deg); }
}
@keyframes heroFlameBlaze {
  0%, 100% { transform: scaleY(1) scaleX(1); opacity: 1; }
  33%      { transform: scaleY(1.08) scaleX(0.96); opacity: 0.92; }
  66%      { transform: scaleY(0.95) scaleX(1.04); opacity: 1; }
}
@keyframes heroJeansRock {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(3deg); }
}

/* GAME SHOW per-letter drop-in for "Pants on Fire" */
.hero h1 {
  /* Tighter margin over og under wordmark — komprimerer hele hero-zonen */
  margin: 2px 0 2px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(38px, 12vw, 48px);
  letter-spacing: -0.04em;
  line-height: 0.95;
  color: var(--text-on-deep);
}
.hero h1 .letter {
  display: inline-block;
  white-space: pre;
  animation: letterDrop 0.5s cubic-bezier(.2, .9, .3, 1.2) both;
}
.hero h1 .letter.fire-pulse {
  animation: letterDrop 0.5s cubic-bezier(.2, .9, .3, 1.2) both,
             letterFirePulse 6s ease-in-out infinite;
  animation-delay: 0s, 1.6s;
}
@keyframes letterDrop {
  0%   { transform: translateY(-14px); opacity: 0; }
  100% { transform: translateY(0);     opacity: 1; }
}
@keyframes letterFirePulse {
  0%, 92%, 100% { color: var(--text-on-deep); text-shadow: none; }
  94% { color: var(--primary);   text-shadow: 0 0 14px rgba(255, 87, 34, .55); }
  96% { color: var(--gold);      text-shadow: 0 0 18px rgba(255, 210, 74, .65); }
  98% { color: var(--primary);   text-shadow: 0 0 14px rgba(255, 87, 34, .55); }
}

.hero p.tagline {
  font-size: 14px;
  color: var(--text-muted);
  /* Komprimert margin-top — match Pantsy-3 design (10→6) */
  margin: 6px auto 0;
  max-width: 280px;
  line-height: 1.4;
}

/* ---------------- Cards — GAME SHOW ----------------
   Større radius (28), varmere cream, sterkere shadow. */
.card {
  background: var(--surface-card);
  color: var(--text-on-card);
  border-radius: var(--radius-card);
  padding: 16px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .28);
  border: 1px solid rgba(240, 226, 194, .6);
}
.card.bright {
  background: var(--surface-card-bright);
  box-shadow: var(--shadow);
}
.card.quiet {
  background: var(--surface-card-quiet);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .16);
  border-color: rgba(240, 226, 194, .35);
}
/* Dark surface card-variant — matcher Claude Designs `surface` (deep aubergine elevation 1).
   Brukes på lobby-kategorier og lobby-players slik at de ikke konkurrerer med
   det store cream code-kortet (visuell hierarki). Cream forblir for kort med
   primært lese-fokus (code, regler), dark for "sekundære" info-kort. */
.card.dark {
  background: var(--surface-mid);
  color: var(--text-on-deep);
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.32);
}
.card.dark .label,
.card.dark .eyebrow.on-card {
  color: var(--text-faint);
}
/* Lite "+ invite" / "Edit ›"-link i dark cards — bruker faint-text */
.card.dark .card-row-link {
  font-size: 12px;
  color: var(--text-faint);
  font-weight: 600;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
}
.card.dark .card-row-link:hover { color: var(--text-soft); }
.card.sm { padding: 12px 14px; border-radius: var(--radius-btn); }
.card .label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.card-section {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(231, 224, 211, .7);
}

/* ---------------- Inputs ----------------
   Cream-tone bakgrunn istedenfor ren hvit — matcher kort og brand,
   slipper "kontorpapir"-følelsen i lobby-form-feltene. */
input[type="text"], input[type="number"], select, textarea {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid var(--border);
  border-radius: 12px;
  font-size: 17px;
  font-family: inherit;
  background: #fdf8ec;
  color: var(--card-fg);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-glow);
}
textarea {
  min-height: 120px;
  resize: vertical;
  font-size: 15px;
  line-height: 1.4;
}
input.code-input {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  font-size: 28px;
  padding: 16px 12px;
  /* GAME SHOW: JetBrains Mono for codes — distinct from body, evokes terminals */
  font-family: var(--font-mono);
  color: var(--card-fg);
}
input.code-input::placeholder {
  color: #a89a86;
  font-weight: 600;
  letter-spacing: 0.18em;
}

/* ---------------- Buttons — GAME SHOW ---------------- */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 20px;
  border-radius: var(--radius-btn);
  border: none;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: transform .08s, box-shadow .12s, background .15s;
  width: 100%;
  min-height: 52px;
  user-select: none;
}
.btn:active { transform: scale(0.98); }
.btn-primary {
  background: linear-gradient(180deg, var(--primary) 0%, var(--primary-hover) 100%);
  color: var(--primary-on);
  /* Subtil drop-shadow uten farge-glød — match Claude Design (drop-shadow uten halo).
     Tidligere: 0 8px 22px var(--primary-glow) + btnPulse-animasjon → for "festspill". */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.btn-primary:disabled {
  opacity: 0.6;
}
.btn-secondary {
  background: linear-gradient(180deg, var(--secondary) 0%, var(--secondary-2) 100%);
  color: var(--text-on-card);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14);
}
.btn-ghost {
  background: transparent;
  color: var(--text-on-deep);
  /* Tydeligere ghost-border for at brukerne ser at det er en knapp.
     Tidligere 0.15 alpha var nesten usynlig på dark bg. */
  border: 1px solid rgba(255, 244, 222, 0.18);
}
.btn-ghost:hover {
  background: rgba(255, 244, 222, 0.06);
  border-color: rgba(255, 244, 222, 0.28);
}
.btn-cream {
  background: var(--surface-card);
  color: var(--text-on-card);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
}
.btn-danger {
  background: var(--danger);
  color: white;
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
.btn-row { display: flex; gap: 10px; }
.btn-row .btn { flex: 1; }
.btn.btn-sm {
  padding: 10px 16px;
  font-size: 14px;
  min-height: 42px;
}

/* ---------------- Player list ---------------- */
.player-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.player {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 9px 12px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
}
.player .avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f97316, #ec4899);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 16px;
  color: white;
  flex-shrink: 0;
}
/* Avatar med rolle-stamp (kjent klubb) — wrapper over standard avatar.
   Stempel sitter nederst-til-høyre som en liten badge. Subtil — ikke
   en stor "klistremerke", bare en hint på rollen. */
.player .avatar.avatar-wrap {
  position: relative;
  overflow: visible;
}
.avatar-initials { display: inline-block; }
.avatar-role {
  position: absolute;
  bottom: -3px;
  right: -3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #1a0e1f;
  border: 2px solid #f5ecd8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  line-height: 1;
  z-index: 1;
}
.player .name {
  flex: 1 1 auto;
  font-weight: 600;
  /* Lange navn (maxlength=20) må trunkere så badges ikke pushes ut av rad. */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.player .score {
  font-weight: 800;
  font-size: 18px;
  color: white;
  background: rgba(0,0,0,.25);
  padding: 4px 10px;
  border-radius: 999px;
  min-width: 44px;
  text-align: center;
  /* Hvis raden wrap'er (mange badges), holder vi score helt til høyre slik at
     den aldri ramler til venstre kant av en ny rad. */
  margin-left: auto;
}
.player .badge {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: 0.05em;
}
.badge-host { background: rgba(249,115,22,.25); color: #fed7aa; }
.badge-you { background: rgba(59,130,246,.25); color: #bfdbfe; }
.badge-disc { background: rgba(0,0,0,.3); color: #a89a86; }
.badge-pantsy { background: var(--pantsy); color: white; }
.badge-pantsy-flex {
  margin-left: 6px;
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  line-height: 1;
}
.badge-pantsy-flex .bp-fire {
  font-size: 12px;
  line-height: 1;
  display: inline-block;
}
.badge-pantsy-flex .bp-text {
  letter-spacing: .06em;
  line-height: 1;
}
.badge-gold { background: var(--gold); color: #2a1424; }
.player.dimmed { opacity: 0.55; }
.player.winner {
  background: linear-gradient(135deg, #fcd34d 0%, #f59e0b 100%);
  color: #2a1424;
  border: none;
}
.player.winner .score { background: rgba(0,0,0,.15); color: #2a1424; }
.player.winner .name { color: #2a1424; }

/* Vote buttons */
/* ---------------- Vote list — GAME SHOW cream pills ---------------- */
.vote-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  isolation: isolate;
}
.vote-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--surface-card);
  color: var(--text-on-card);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: var(--radius-btn);
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: -0.01em;
  cursor: pointer;
  transition: transform .12s, box-shadow .18s;
  min-height: 56px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
  text-align: left;
}
.vote-btn:hover { transform: translateY(-1px); }
.vote-btn:active { transform: scale(0.98); }
.vote-btn.selected,
.vote-btn.selected:disabled {
  background: linear-gradient(160deg, var(--primary) 0%, var(--pantsy) 100%) !important;
  color: #fff !important;
  border-color: var(--pantsy-hi) !important;
  box-shadow: 0 6px 18px var(--primary-glow), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
  opacity: 1 !important;
}
/* Smarty-tone: 07c best-clue vote bruker GULL-gradient i stedet for fire→pantsy.
   Match til Pantsy-3 design's smarty-variant av VoteRow. */
.vote-btn.smarty-tone.selected,
.vote-btn.smarty-tone.selected:disabled {
  background: linear-gradient(160deg, #FFE38A 0%, var(--gold) 100%) !important;
  color: #3A2410 !important;
  border-color: #8A5A1A !important;
  box-shadow: 0 6px 18px rgba(255, 210, 74, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}
.vote-btn .vote-check.smarty {
  background: #fff;
  color: #8A5A1A;
}
/* Vote-screen layout — pinner waiting-row til bunn */
.vote-screen {
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - 80px);
}
.vote-waiting-bottom {
  flex-shrink: 0;
  margin-top: 0;
}
.vote-btn.disabled {
  background: rgba(255, 244, 222, 0.06);
  color: var(--text-faint);
  border-color: rgba(255, 244, 222, 0.06);
  cursor: not-allowed;
  box-shadow: none;
}
.vote-btn.dimmed {
  opacity: 0.55;
}
/* YOU-tag på egen rad i vote-list */
.vote-btn .you-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  background: rgba(255, 244, 222, 0.10);
  color: var(--text-faint);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  margin-left: auto;
}
/* Selected checkmark badge */
.vote-btn .vote-check {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #fff;
  color: var(--pantsy);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 12px;
  line-height: 1;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  margin-left: auto;
}

/* ---------------- Reveal card — GAME SHOW ----------------
   Konsistent struktur over alle reveal-typer: eyebrow → mascot → stage label
   → big display → coaching footer. Card = dark gradient med fire-tinted border.
   Pantsy-variant = solid pantsy-rød med inner heat-glow.
   Smarty-variant = cream med soft gold glow. */
.reveal-card {
  background: linear-gradient(160deg, var(--surface-hi) 0%, var(--surface-lo) 100%);
  color: var(--text-on-deep);
  border: 1px solid rgba(255, 87, 34, 0.20);
  border-radius: var(--radius-card);
  padding: 28px 24px;
  text-align: center;
  box-shadow: var(--shadow-lg);
  /* Prinsipp 2: card fyller all plass mellom outer-eyebrow og bottom-CTA.
     min-height beholdes som fallback; flex:1 vinner når .screen er full-height. */
  min-height: 320px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  position: relative;
  overflow: hidden;
}
/* Soft glow i øverste høyre hjørne — gir warmth uten å være distraherende */
.reveal-card::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 87, 34, 0.22) 0%, transparent 70%);
  pointer-events: none;
}
.reveal-card.pantsy {
  background: var(--pantsy);
  color: #fff;
  border-color: var(--pantsy-hi);
}
.reveal-card.pantsy::before {
  /* Inner heat — bunn-sentrert, varmere */
  top: auto;
  bottom: -80px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(255, 180, 80, 0.40) 0%, rgba(255, 80, 40, 0.18) 40%, transparent 70%);
  animation: pantsyHeatBreathe 3.4s ease-in-out infinite;
}
@keyframes pantsyHeatBreathe {
  0%, 100% { opacity: 0.55; transform: translateX(-50%) scale(1); }
  50%      { opacity: 0.90; transform: translateX(-50%) scale(1.05); }
}
.reveal-card.smarty {
  background: var(--surface-card);
  color: var(--text-on-card);
  border-color: var(--gold);
}
.reveal-card.smarty::before {
  background: radial-gradient(circle, var(--gold-glow) 0%, transparent 65%);
  animation: smartyGlow 4s ease-in-out infinite;
}
@keyframes smartyGlow {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50%      { opacity: 0.75; transform: scale(1.03); }
}
.reveal-card .cat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
  opacity: 0.7;
  position: relative;
}
.reveal-card .stage-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  opacity: 0.7;
  position: relative;
}
.reveal-card .word {
  font-family: var(--font-display);
  font-size: clamp(40px, 12vw, 56px);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 0.95;
  margin: 10px 0 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
  position: relative;
}
/* Coaching footer — separated by hairline, calmer copy under big display */
.reveal-card .coaching {
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  padding-top: 14px;
  font-size: 13px;
  line-height: 1.5;
  opacity: 0.85;
  margin-top: auto;
  position: relative;
}
.reveal-card.smarty .coaching {
  border-top-color: rgba(26, 8, 32, 0.10);
}

/* SVG flame mascot på pre-reveal card — sentered, soft glow ring rundt */
.reveal-flame {
  align-self: center;
  margin-bottom: 18px;
  position: relative;
}
.reveal-flame::before {
  content: "";
  position: absolute;
  inset: -28px;
  background: radial-gradient(circle, rgba(255, 87, 34, 0.30) 0%, transparent 65%);
  animation: revealPulse 2.8s ease-in-out infinite;
  pointer-events: none;
}
.reveal-flame svg {
  position: relative;
  transform-origin: 50% 100%;
  animation: revealFlameFlicker 2s ease-in-out infinite;
  filter: drop-shadow(0 4px 14px rgba(255, 87, 34, 0.55));
}
@keyframes revealPulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50%      { opacity: 0.7; transform: scale(1.05); }
}
@keyframes revealFlameFlicker {
  0%, 100% { transform: scaleY(1) rotate(-2deg); }
  33%      { transform: scaleY(1.06) rotate(3deg); }
  66%      { transform: scaleY(0.96) rotate(-3deg); }
}

/* Pantsy-emoji wrapper for in-game (small, used in scoreboard rows) */
.reveal-card .pantsy-emoji {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  font-size: 0;
  margin-bottom: 4px;
}
.reveal-card .pantsy-emoji .pe-pants { font-size: 50px; line-height: 1; }
.reveal-card .pantsy-emoji .pe-fire {
  font-size: 36px;
  line-height: 1;
  filter: drop-shadow(0 0 8px var(--primary-glow));
  animation: pantsyFireFlicker 1.6s ease-in-out infinite alternate;
}
@keyframes pantsyFireFlicker {
  from { transform: scale(1) translateY(0); opacity: 1; }
  to   { transform: scale(1.08) translateY(-2px); opacity: .92; }
}
.reveal-card .hint {
  font-size: 14px;
  opacity: 0.85;
  margin-top: 6px;
}

.reverse-options-card {
  background: white;
  color: var(--card-fg);
  border-radius: 22px;
  padding: 24px;
  box-shadow: var(--shadow-lg);
}
.reverse-options-card .options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}
.reverse-options-card .opt-tile {
  padding: 16px 12px;
  background: #f5ecd8;
  border: 2px solid var(--border);
  border-radius: 12px;
  font-weight: 700;
  text-align: center;
  font-size: 15px;
}

.tap-cover {
  background: linear-gradient(150deg, #1e293b 0%, #0f172a 100%);
  color: white;
  border-radius: 22px;
  padding: 60px 24px;
  text-align: center;
  cursor: pointer;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  border: 2px dashed rgba(255,255,255,.2);
}
.tap-cover .icon { font-size: 56px; }

/* ---------------- Discuss screen ---------------- */
.starter-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  color: #2a1424;
  font-weight: 800;
  border-radius: 999px;
  align-self: center;
  box-shadow: 0 4px 12px rgba(251,191,36,.4);
}
.category-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: rgba(255, 244, 222, .10);
  border: 1px solid rgba(255, 244, 222, .18);
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-body);
  font-weight: 600;
  align-self: center;
}

/* ---------------- Timer ---------------- */
.timer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 20px;
  background: var(--surface-card-bright);
  color: var(--text-on-card);
  border-radius: 16px;
  font-size: 28px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  box-shadow: var(--shadow);
}
.timer .label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--muted);
}
.timer.warning {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
}
.timer.danger {
  background: linear-gradient(135deg, #fee2e2, #fecaca);
  animation: pulse 1s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

/* ---------------- Result ---------------- */
.banner {
  text-align: center;
  padding: 24px 18px;
  border-radius: 18px;
  font-size: 22px;
  font-weight: 900;
  margin-bottom: 8px;
}
.banner.caught { background: linear-gradient(135deg, #16a34a, #15803d); color: white; }
.banner.escaped { background: linear-gradient(135deg, var(--pantsy), var(--pantsy-2)); color: white; }
.banner .emoji { font-size: 36px; display: block; margin-bottom: 6px; }

.delta-up { color: var(--success); font-weight: 700; }
.delta-down { color: var(--danger); font-weight: 700; }

/* Drama-reveal animation */
.drama-row {
  opacity: 0;
  transform: translateX(-12px);
  animation: dramaSlide .35s ease forwards;
}
@keyframes dramaSlide {
  to { opacity: 1; transform: translateX(0); }
}

/* Pulsing suspense på pantsy-reveal stage 0 */
@keyframes dramaPulse {
  from { transform: scale(1); opacity: 0.85; }
  to   { transform: scale(1.08); opacity: 1; }
}
.drama-suspense { cursor: pointer; }

/* ======= PANTSED-momentet =======
   Stage 1: pantsy avsløres med fallende bukse + "PANTSED!"-stempel.
   Hele kortet er den sentrale visuelle peak-en — STORT navn,
   roterende stempel (på engelsk: "rubber stamp" effect), bouncy entry. */
.pantsy-reveal-card {
  position: relative;
  background: linear-gradient(150deg, #2d1832 0%, #1a0e1f 100%);
  border: 1px solid rgba(245, 158, 11, .25);
  border-radius: 18px;
  padding: 22px 16px 18px;
  text-align: center;
  color: white;
  overflow: hidden;
  animation: pantsyBounce 0.85s cubic-bezier(0.34, 1.56, 0.64, 1);
  /* Flexbox-layout: ikon til venstre, tekst-blokken sentralt+balansert */
  display: flex;
  align-items: center;
  gap: 14px;
}
.pantsy-reveal-card .pantsy-card-text {
  flex: 1;
  min-width: 0;
  text-align: left;
}
/* Inne i flex-tekstblokk skal pantsy-name være litt mer kompakt — ellers wrapper for stygt
   ved siden av det 72px brede ikonet på smale skjermer */
.pantsy-reveal-card .pantsy-card-text .pantsy-name {
  font-size: clamp(28px, 7.4vw, 42px);
  margin: 2px 0 4px;
}
@keyframes pantsyBounce {
  0%   { opacity: 0; transform: scale(0.6) translateY(-30px); }
  35%  { opacity: 1; transform: scale(1.08) translateY(8px); }
  55%  { transform: scale(0.96) translateY(-4px); }
  72%  { transform: scale(1.03) translateY(2px); }
  88%  { transform: scale(0.99) translateY(-1px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
/* Beholder cardPop som alias for tilbakekompatibilitet (winner-banner bruker den) */
@keyframes cardPop {
  0%   { opacity: 0; transform: scale(0.85); }
  60%  { opacity: 1; transform: scale(1.03); }
  100% { opacity: 1; transform: scale(1); }
}

/* Pantsy-navnet — STORT, det største elementet på skjermen */
.pantsy-reveal-card .pantsy-name {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-size: clamp(34px, 9vw, 48px);
  font-weight: 800;
  line-height: 1.05;
  margin: 4px 0 6px;
  color: #fef3c7;
  text-shadow: 0 2px 18px rgba(245, 158, 11, .35);
  letter-spacing: -0.02em;
}

/* Pantsy-icon på result-kort — flex-child til venstre, balansert med tekst-blokken.
   To varianter:
     - icon-caught (Pantsy ble tatt): 🔥 wiggler side-til-side (på fyr — pantsed!)
     - icon-escaped (Pantsy slapp unna): 👖 spinner rundt — bukse løp avgårde */
.pantsy-icon {
  font-size: 64px;
  line-height: 1;
  pointer-events: none;
  transform-origin: center center;
  flex-shrink: 0;
  width: 72px;
  text-align: center;
  z-index: 1;
}
.pantsy-icon.icon-caught {
  animation: pantsyFireWiggle 1.1s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(249,115,22,.55));
}
.pantsy-icon.icon-escaped {
  animation: pantsyJeansSpin 2.4s linear infinite;
}
@keyframes pantsyFireWiggle {
  0%, 100% { transform: rotate(-8deg) translateX(-2px) scale(1); }
  50%      { transform: rotate(8deg) translateX(2px) scale(1.06); }
}
@keyframes pantsyJeansSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* PANTSED!/ESCAPED!-stempel — rubber stamp effekt:
   pop in med scale-down + rotation, skarp border, semi-transparent for
   "trykket på papir" feel */
.stamp {
  position: absolute;
  top: 14px;
  right: -8px;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 6px 14px 5px;
  border: 3px solid currentColor;
  border-radius: 6px;
  text-transform: uppercase;
  transform: rotate(8deg) scale(1);
  opacity: 0.92;
  /* Pop-in animation med EKTE dramatic delay — pantsy-card bounces inn først (0.85s),
     pants faller (1.1s + 0.25s delay), så STEMPEL slår inn med suspense.
     Total: 1.4s pause før stempel = ekte "drumroll"-feel. */
  animation: stampPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1.4s both;
  z-index: 2;
  pointer-events: none;
}
/* Pantsy-navnet fades inn etter card-bounce er ferdig — gir tid til å bygge spenning
   før vi avslører hvem det var. */
.pantsy-reveal-card .pantsy-name {
  animation: pantsyNameReveal 0.5s ease-out 0.85s both;
}
@keyframes pantsyNameReveal {
  0%   { opacity: 0; transform: translateY(8px) scale(0.95); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.stamp.pantsed {
  color: #fb7185;
  background: rgba(251, 113, 133, 0.08);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
}
.stamp.escaped {
  color: #34d399;
  background: rgba(52, 211, 153, 0.08);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
}
@keyframes stampPop {
  0%   { opacity: 0; transform: rotate(8deg) scale(2.2); }
  50%  { opacity: 0.92; transform: rotate(8deg) scale(0.92); }
  75%  { transform: rotate(8deg) scale(1.04); }
  100% { opacity: 0.92; transform: rotate(8deg) scale(1); }
}

/* Vote-timer som horisontal progress bar. Fyll-bredde 100% → 0% over timer-perioden.
   Farge skifter fra amber (ok) → rød (danger) når det nærmer seg 0. Mer dramatisk enn ren tekst. */
.vote-timer-bar {
  position: relative;
  height: 28px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  overflow: hidden;
  margin: 8px 0 14px;
  isolation: isolate;
}
.vote-timer-bar-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--secondary), var(--secondary-2));
  /* Smooth interpolering — synker jevnt selv om JS oppdaterer hver 100ms */
  transition: width 0.12s linear, background 0.4s ease;
}
.vote-timer-bar-fill[data-urgency="warning"] {
  background: linear-gradient(90deg, #f97316, #ea580c);
}
.vote-timer-bar-fill[data-urgency="danger"] {
  background: linear-gradient(90deg, #ef4444, #dc2626);
  animation: voteTimerPulse 0.5s ease-in-out infinite alternate;
}
@keyframes voteTimerPulse {
  from { opacity: 0.85; }
  to   { opacity: 1; }
}
.vote-timer-bar-text {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  color: white;
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
  font-variant-numeric: tabular-nums;
}

/* Confidence-popup overlay — vises når en kandidat tappes (ikke permanent UI) */
.conf-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 20px;
  animation: toastIn 0.18s ease;
}
.conf-popup {
  background: var(--surface-card-bright);
  border-radius: 18px;
  padding: 18px;
  max-width: 360px;
  width: 100%;
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
.conf-row {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.conf-star {
  flex: 1;
  background: #f5ecd8;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 12px 6px;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.1s ease, background 0.15s ease;
}
.conf-star:hover, .conf-star:active {
  background: #fef3c7;
  border-color: var(--secondary);
  transform: scale(1.04);
}

/* ======= End-of-game podium =======
   Vinner-banner → 3-plass podium → resten i kompakt liste → awards. */
.winner-banner {
  text-align: center;
  background: linear-gradient(150deg, #2d1832 0%, #1a0e1f 100%);
  border: 1px solid rgba(245, 158, 11, .3);
  border-radius: 22px;
  padding: 24px 18px 18px;
  color: white;
  animation: cardPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.winner-banner .winner-tag {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 800;
  color: var(--secondary);
  margin: 6px 0 2px;
}
.winner-banner .winner-name {
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  font-size: clamp(36px, 9vw, 50px);
  font-weight: 800;
  line-height: 1.05;
  color: #fef3c7;
  text-shadow: 0 2px 18px rgba(245, 158, 11, .35);
  letter-spacing: -0.02em;
}
.winner-banner .winner-score {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 2px;
}

.podium-row {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 10px;
  margin-top: 12px;
  padding: 0 6px;
}
.podium-slot {
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}
.podium-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--secondary);
  color: #1a0e1f;
  font-weight: 800;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}
.podium-name {
  font-size: 13px;
  font-weight: 700;
  color: white;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.podium-pts {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,.6);
  margin-bottom: 6px;
}
.podium-block {
  width: 100%;
  background: rgba(255,255,255,.08);
  border-radius: 8px 8px 0 0;
  padding: 14px 0;
  font-weight: 800;
  font-size: 16px;
  color: rgba(255,255,255,.55);
}
.podium-slot.rank-1 .podium-block { background: linear-gradient(180deg, var(--secondary), var(--secondary-2)); color: #1a0e1f; padding: 30px 0 24px; }
.podium-slot.rank-2 .podium-block { background: rgba(255,255,255,.18); color: white; padding: 22px 0 18px; }
.podium-slot.rank-3 .podium-block { background: rgba(255,255,255,.10); color: white; padding: 16px 0 14px; }
.podium-slot.rank-1 .podium-avatar { background: var(--secondary); width: 56px; height: 56px; font-size: 20px; box-shadow: 0 0 0 3px rgba(245,158,11,.4); }

.rest-list {
  background: rgba(255,255,255,.04);
  border-radius: 12px;
  margin-top: 12px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rest-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px;
  color: rgba(255,255,255,.85);
}
.rest-rank { min-width: 28px; font-weight: 800; color: rgba(255,255,255,.45); font-size: 13px; text-align: center; }
.rest-name { flex: 1; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rest-score { font-weight: 800; font-size: 14px; }

.awards-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.award-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, rgba(245,158,11,.18), rgba(245,158,11,.06));
  border: 1px solid rgba(245,158,11,.3);
  border-radius: 12px;
  padding: 12px 14px;
  color: white;
}
.award-icon { font-size: 32px; }
.award-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 800; color: var(--secondary); }
.award-name { font-size: 18px; font-weight: 800; line-height: 1.1; margin-top: 2px; color: #fef3c7; }
.award-sub { font-size: 12px; opacity: 0.7; margin-top: 2px; }

/* Reduser motion-respekt — alle dramatiske animasjoner deaktiveres for brukere
   som har slått på "Reduce Motion" på OS-nivå. Vi beholder layout/sluttilstand,
   men dropper bouncy/spinning effekter. */
@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;
  }
  .pantsy-icon { animation: none !important; }
  .stamp { transform: rotate(8deg); }
}

/* Settings collapse-knapp — visuell pille i header når settings-panelet er åpent.
   Tidligere var det bare en grå tekst-link som var lett å overse. Pillen har
   bakgrunn + ramme + clear "▴" chevron + tekst, så det er åpenbart at den lukker
   panelet. Holder samme paret-cream-tone som card-quiet for å ikke konkurrere
   med innholdet, men har nok kontrast til å bli sett. */
.settings-collapse-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: #efe7d2;
  border: 0.5px solid #d6c9ad;
  border-radius: 999px;
  color: #2a1424;
  cursor: pointer;
  font-family: inherit;
  line-height: 1;
  transition: background-color .15s ease, border-color .15s ease, transform .1s ease;
}
.settings-collapse-btn:hover {
  background: #e6dcc1;
  border-color: #b8a880;
}
.settings-collapse-btn:active {
  transform: scale(0.97);
}

/* Fokus-stil for tastatur-navigasjon — synlig outline når elementer fokuseres
   via Tab. Browsers default outline kan være knapt synlig på mørk bg. */
:focus-visible {
  outline: 2px solid var(--secondary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Minimal scoreboard for round-result. Én tett linje per spiller — ingen avatarer,
   ingen badges, bare rank · navn · score · delta. */
.mini-board {
  background: rgba(255,255,255,.04);
  border-radius: 12px;
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
}
.mini-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  color: white;
  border-bottom: 0.5px solid rgba(255,255,255,.06);
  /* Slide-inn animasjon med staggered delay (satt i JS via inline style) */
  opacity: 0;
  transform: translateX(-8px);
  animation: miniRowIn 0.32s ease-out forwards;
}
@keyframes miniRowIn {
  to { opacity: 1; transform: translateX(0); }
}
.mini-row:last-child { border-bottom: none; }
.mini-row.top { color: var(--secondary); }
.mini-arrow {
  font-size: 11px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 4px;
  font-variant-numeric: tabular-nums;
  /* Pop-in animasjon — gir live "rank changed!"-følelse */
  animation: arrowPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s both;
}
.mini-arrow.up { color: #34d399; background: rgba(52,211,153,.15); }
.mini-arrow.down { color: #f87171; background: rgba(248,113,113,.15); }
@keyframes arrowPop {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.2); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
/* Delta-pille bouncer inn på samme måte */
.mini-delta {
  animation: arrowPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s both;
}
.mini-rank {
  min-width: 26px;
  font-weight: 800;
  font-size: 13px;
  color: rgba(255,255,255,.5);
  font-variant-numeric: tabular-nums;
}
.mini-row.top .mini-rank { color: var(--secondary); }
.mini-name {
  flex: 1;
  font-weight: 700;
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mini-score {
  font-weight: 900;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  min-width: 36px;
  text-align: right;
}
.mini-delta {
  font-size: 12px;
  font-weight: 700;
  min-width: 38px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.mini-delta.up   { color: #34d399; }
.mini-delta.down { color: #f87171; }

/* Velocity-leaderboard: rank-arrows for rang-endring fra forrige runde */
.drama-leaderboard {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(255,255,255,.04);
  border-radius: 14px;
  padding: 10px 8px;
}
.drama-leaderboard .player {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: rgba(255,255,255,.06);
  border-radius: 10px;
  color: white;
}
.drama-leaderboard .player.winner {
  background: linear-gradient(135deg, rgba(245,158,11,.35), rgba(245,158,11,.15));
  border: 1px solid rgba(245,158,11,.5);
}
.drama-leaderboard .player .name {
  flex: 1;
  font-weight: 700;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rank-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  font-size: 12px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 6px;
}
.rank-arrow.up   { color: #34d399; background: rgba(52,211,153,.12); }
.rank-arrow.down { color: #f87171; background: rgba(248,113,113,.12); }
.rank-arrow.flat { color: rgba(255,255,255,.35); background: transparent; }

/* ---------------- Misc ---------------- */
h2 { font-size: 24px; margin: 0 0 4px; font-weight: 800; }
h3 { font-size: 18px; margin: 0 0 8px; font-weight: 700; }
.subtitle { color: rgba(255,255,255,.7); margin: 0 0 8px; font-size: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 13px; font-weight: 600; color: var(--muted); }
.row { display: flex; gap: 10px; align-items: center; }
.row > * { flex: 1; }
.center { text-align: center; }
.muted { color: rgba(255,255,255,.65); font-size: 14px; }
.tiny { font-size: 12px; }
.divider { height: 1px; background: rgba(255,255,255,.10); margin: 12px 0; }
.hidden { display: none !important; }

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15,23,42,.95);
  color: white;
  padding: 12px 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  z-index: 100;
  animation: toastIn .25s ease;
}
@keyframes toastIn {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}

.code-display {
  /* GAME SHOW: JetBrains Mono med per-letter wave-animasjon */
  font-size: clamp(40px, 14vw, 52px);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-align: center;
  font-family: var(--font-mono);
  color: var(--card-fg);
  padding: 4px 0;
  line-height: 1;
}
.code-display .code-letter {
  display: inline-block;
  animation: codeLetterWave 2.8s ease-in-out infinite;
}
@keyframes codeLetterWave {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  .code-display .code-letter { animation: none; }
}

.connection-status {
  font-size: 12px;
  color: rgba(255,255,255,.6);
  text-align: center;
  padding: 4px 0;
}
.connection-status.error { color: #fca5a5; }

/* ---------------- New: Settings widgets ---------------- */

/* Toggle switch */
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  gap: 10px;
}
.toggle-row .label-block {
  flex: 1;
  min-width: 0;
}
.toggle-row .label-block .lbl {
  font-weight: 700;
  font-size: 15px;
  color: #2a1424;
}
.toggle-row .label-block .desc {
  font-size: 13px;
  color: #4a3d34;
  margin-top: 3px;
  line-height: 1.4;
}
.switch {
  position: relative;
  width: 48px;
  height: 28px;
  background: #e7d9bd;
  border-radius: 14px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .2s;
}
.switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0,0,0,.2);
  transition: left .2s;
}
.switch.on { background: var(--primary); }
.switch.on::after { left: 23px; }
.switch.disabled { opacity: 0.4; cursor: not-allowed; }

/* Segmented control (for difficulty, timer etc.) */
.segmented {
  display: flex;
  background: #efe7d2;
  border-radius: 12px;
  padding: 4px;
  gap: 2px;
}
.segmented button {
  flex: 1;
  border: none;
  background: transparent;
  padding: 9px 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  border-radius: 9px;
  font-family: inherit;
  transition: all .15s;
}
.segmented button.active {
  background: var(--surface-card-bright);
  color: var(--text-on-card);
  box-shadow: 0 2px 6px rgba(0,0,0,.1);
}

/* Multi-select category checkboxes */
.cat-grid {
  display: grid;
  /* minmax(0, 1fr) tillater at celler kan skrumpe under sitt min-content, så
     lange kategorinavn ikke pusher griden bredere enn parent-kortet */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
}
.cat-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #f5ecd8;
  border: 2px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  /* Disable text-selection ved long-press (vi bruker long-press til sample preview).
     Uten dette markerer iOS Safari teksten under fingeren. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  font-size: 14px;
  font-weight: 600;
  color: #2a1424;
  text-align: left;
  transition: all .15s;
  user-select: none;
}
.cat-pill .cat-icon { font-size: 18px; }
.cat-pill .cat-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-pill .cat-count { font-size: 11px; color: var(--muted); font-weight: 600; }
/* Adult-kategori: bruker rose/pantsy-sonen (spicy/edgy = thematisk match) */
.cat-pill.adult { border-color: var(--pantsy-glow); background: rgba(225, 29, 72, .04); }
/* Valgt-tilstand: sterk kontrast så host umiddelbart ser hva som er aktivt.
   Solid amber-fyll + mørk aubergine-tekst gir høy lesbarhet uten å skrike. */
/* GAME SHOW: selected = primary orange (CTA-farge), kraftig signal */
.cat-pill.selected {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 4px 12px var(--primary-glow);
}
.cat-pill.selected .cat-name { color: #fff; }
.cat-pill.selected .cat-count { color: rgba(255, 255, 255, 0.75); }
.cat-pill.selected.adult {
  background: var(--pantsy);
  border-color: var(--pantsy-2);
  color: #fff;
  box-shadow: 0 4px 12px var(--pantsy-glow);
}
.cat-pill.selected.adult .cat-name { color: #fff; }
.cat-pill.custom {
  background: linear-gradient(135deg, #ecfeff, #cffafe);
  border-color: #06b6d4;
}

/* QR code — cream bg matcher resten av code-card (ikke ren hvit som stikker ut) */
.qr-container {
  display: flex;
  justify-content: center;
  padding: 16px;
  background: var(--surface-card);
  border-radius: 12px;
  margin-top: 12px;
}
.qr-container > div { display: block; }
.qr-container img, .qr-container canvas { display: block; }

/* Confidence vote stars */
.confidence-row {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 12px 0;
}
.confidence-star {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255,255,255,.10);
  border: 2px solid rgba(255,255,255,.2);
  color: white;
  font-size: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}
.confidence-star.selected {
  background: linear-gradient(135deg, var(--gold), var(--primary));
  border-color: transparent;
  color: #2a1424;
  transform: scale(1.1);
}

/* Onboarding modal */
.onboard-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,23,42,.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 20px;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  /* Mykt fade-in for backdrop + blur — føles mindre brått enn pop */
  animation: overlayFadeIn .2s ease-out both;
}
@keyframes overlayFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes modalFadeScale {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
.onboard-modal {
  background: white;
  color: #2a1424;
  border-radius: 24px;
  max-width: 380px;
  width: 100%;
  padding: 28px 22px;
  text-align: center;
  box-shadow: var(--shadow-lg);
  /* Mykere fade+scale i stedet for slideIn — føles mindre brå mellom intro-stegene */
  animation: modalFadeScale .25s cubic-bezier(.32, .72, .32, 1) both;
  /* Modal må scrolle internt på korte landscape-skjermer (iPhone SE landscape = 320px tall) */
  max-height: calc(100dvh - 32px);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.onboard-modal .step-icon { font-size: 56px; margin-bottom: 8px; }
img.step-icon {
  display: block;
  margin: 0 auto 8px;
  width: 72px;
  height: 72px;
  border-radius: 16px;
  font-size: 0;
}
.onboard-modal h2 { color: #2a1424; }
.onboard-modal .desc {
  font-size: 15px;
  color: #4a3d34;
  line-height: 1.5;
  margin: 12px 0 20px;
}
.onboard-dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 16px 0;
}
.onboard-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e7d9bd;
}
.onboard-dot.active { background: var(--primary); width: 24px; border-radius: 4px; }

/* Onboarding-stegene skal alle ha SAMME størrelse — ellers hopper modalen
   visuelt mellom stegene fordi tekstmengden varierer. Vi gir den en min-høyde
   som passer det LENGSTE steget, og lar step-body fylle plassen så dots og
   knapper alltid sitter nederst. */
.onboard-modal.onboarding-step {
  min-height: 460px;
  display: flex;
  flex-direction: column;
}
.onboard-step-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* Step-content-crossfade — ny step entrer fra høyre, gammel forlater til venstre.
     Tidligere fjernet vi hele overlay-elementet ved hvert step-skifte, som ga
     flicker (overlay-fadeIn + modal-bounce kjørte på nytt). Nå er overlay+modal
     persistent og kun innholdet i .onboard-step-body krysses inn/ut. */
  transition: opacity 200ms ease-out, transform 240ms cubic-bezier(.32, .72, .32, 1);
  will-change: opacity, transform;
}
/* JS setter inline-styles for direction-aware transitions
   (forward = -14px, back = +14px), så vi trenger ikke separate is-leaving-klasser.
   Når step-body er persistent, må btn-row + dots også reflektere ny step-state
   uten flicker — de fades sammen med body-en. */
.onboard-modal.onboarding-step .onboard-dots,
.onboard-modal.onboarding-step .btn-row {
  transition: opacity 180ms ease-out;
}
.onboard-modal.onboarding-step.swap-fade .onboard-dots,
.onboard-modal.onboarding-step.swap-fade .btn-row {
  opacity: 0.4;
}
/* På veldig lave skjermer (landscape iPhone SE) — drop min-height så modalen
   ikke tvinger scroll. Designet kompromisset: behaviour OK for mobile portrait
   som er 99% av use-casen. */
@media (max-height: 500px) {
  .onboard-modal.onboarding-step { min-height: 0; }
}
/* Reduced motion — slå av crossfade-transformer, behold opacity-fade */
@media (prefers-reduced-motion: reduce) {
  .onboard-step-body { transition: opacity 120ms ease-out; transform: none !important; }
  .onboard-step-body.is-leaving,
  .onboard-step-body.is-entering { transform: none !important; }
}

/* Auto-pick "Tonight's mix" overlay — kort discovery-moment når host velger
   tilfeldige kategorier. Kategori-emojiene rasler inn én etter én. */
.auto-pick-mix {
  position: fixed;
  inset: 0;
  z-index: 240;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: rgba(26, 14, 31, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  animation: apmFadeIn .2s ease-out both;
}
.auto-pick-mix.apm-leaving { animation: apmFadeOut .25s ease-in forwards; }
@keyframes apmFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes apmFadeOut { from { opacity: 1; } to { opacity: 0; } }
.apm-card {
  background: linear-gradient(135deg, var(--surface-card-bright), var(--surface-card));
  border: 2px solid var(--secondary);
  border-radius: 18px;
  padding: 20px 28px;
  box-shadow: 0 12px 40px rgba(0,0,0,.4), 0 0 0 4px rgba(245,158,11,.18);
  text-align: center;
  animation: apmCardIn .3s cubic-bezier(.34, 1.56, .64, 1) both;
}
@keyframes apmCardIn {
  0% { transform: scale(.7); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
.apm-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--secondary-2);
  margin-bottom: 10px;
}
.apm-emojis {
  display: flex;
  gap: 10px;
  justify-content: center;
}
.apm-emoji {
  font-size: 32px;
  line-height: 1;
  animation: apmEmojiIn .4s cubic-bezier(.34, 1.56, .64, 1) both;
  animation-delay: calc(var(--i, 0) * 90ms + 80ms);
}
@keyframes apmEmojiIn {
  0% { transform: translateY(-15px) rotate(-12deg); opacity: 0; }
  100% { transform: translateY(0) rotate(0); opacity: 1; }
}

/* Auto-pick stagger-animasjon — pillene fader inn én etter én når brukeren
   tapper "🎲 Auto-pick". --i er CSS-custom-property satt fra JS (idx 0..N).
   Subtil discovery-vibe uten å bli stort show. */
.cat-pills.auto-pick-anim .cat-pill-summary {
  animation: catPillFadeIn 0.32s cubic-bezier(.34, 1.56, .64, 1) both;
  animation-delay: calc(var(--i, 0) * 50ms);
}
@keyframes catPillFadeIn {
  0%   { opacity: 0; transform: translateY(-6px) scale(0.85); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Klubb-leaderboard rows (i klubb-modalen) */
.club-leaderboard {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.club-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #fbf6e7;
  border: 0.5px solid var(--border);
  border-radius: 10px;
}
.club-row.is-me {
  background: linear-gradient(135deg, #fff9e0, #fef3c7);
  border-color: var(--gold-deep);
  box-shadow: 0 0 0 2px var(--gold-glow);
}
.club-rank {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 900;
  color: #a89a86;
  width: 30px;
  flex-shrink: 0;
}
.club-row.is-me .club-rank { color: #d97706; }
.club-name {
  flex: 1;
  min-width: 0;
  font-weight: 700;
  font-size: 14px;
  color: #2a1424;
  overflow: hidden;
}
.club-name-sub {
  font-size: 10.5px;
  color: #a89a86;
  font-weight: 500;
}
.club-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.club-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 28px;
}
.club-stat-val {
  font-weight: 900;
  font-size: 13px;
  color: #2a1424;
  line-height: 1;
}
.club-stat-lbl {
  font-size: 11px;
  margin-top: 1px;
  opacity: .6;
}

/* Stats-grid — kompakt 2-kol layout for stat-celler i Stats-modalen.
   Halverer høyden vs vertikal liste. Hver celle: stort tall + label + sub. */
.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 4px;
}
.stat-cell {
  background: #FBEFD9;
  border: 1px solid rgba(255, 210, 74, .25);
  border-radius: var(--radius-btn);
  padding: 12px 14px;
  text-align: left;
}
.stat-cell-val {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--text-on-card);
  line-height: 1;
  letter-spacing: -0.025em;
}
.stat-cell-lbl {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-on-card);
  margin-top: 4px;
  line-height: 1.2;
}
.stat-cell-sub {
  font-size: 10.5px;
  color: var(--text-muted);
  margin-top: 2px;
  line-height: 1.2;
}

/* Achievements grid (i Stats-modal) */
.ach-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.ach-grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 4px;
  border-radius: 10px;
  text-align: center;
  background: #f5ecd8;
  border: 0.5px solid var(--border);
  transition: transform .12s;
}
.ach-grid-item.unlocked {
  background: linear-gradient(135deg, #fff9e0, #fef3c7);
  border-color: var(--gold-deep);
}
.ach-grid-item.unlocked.rare {
  background: linear-gradient(135deg, #fde047, #fbbf24);
  border-color: #ca8a04;
  box-shadow: 0 0 0 2px rgba(251,191,36,.18);
}
.ach-grid-item.locked {
  opacity: 0.4;
  filter: grayscale(0.6);
}
.ach-grid-icon {
  font-size: 22px;
  line-height: 1;
}
.ach-grid-label {
  font-size: 9.5px;
  font-weight: 700;
  color: #2a1424;
  line-height: 1.2;
}

/* Achievement overlay — vises kort når en ny milestone unlockes.
   Bruker full-screen backdrop med dempet bakgrunn så hierarkiet er åpenbart:
   "her er noe spesielt, alt annet er nedtonet". Tap på backdrop = lukk. */
.ach-overlay {
  position: fixed;
  inset: 0;
  z-index: 250;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: calc(env(safe-area-inset-top) + 60px);
  background: rgba(26, 14, 31, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  animation: achBackdropIn .25s ease-out both;
}
.ach-overlay > .ach-card {
  animation: achSlideIn .35s cubic-bezier(.34, 1.56, .64, 1) both;
}
@keyframes achBackdropIn {
  0%   { background: rgba(26, 14, 31, 0); backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); }
  100% { background: rgba(26, 14, 31, 0.55); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
}
.ach-overlay.ach-leaving {
  animation: achBackdropOut .3s ease-in forwards;
}
.ach-overlay.ach-leaving > .ach-card {
  animation: achSlideOut .3s ease-in forwards;
}
@keyframes achSlideIn {
  0%   { transform: translateY(-30px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
@keyframes achSlideOut {
  0%   { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-30px); opacity: 0; }
}
@keyframes achBackdropOut {
  0%   { background: rgba(26, 14, 31, 0.55); }
  100% { background: rgba(26, 14, 31, 0); }
}
.ach-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: linear-gradient(135deg, #1a0e1f, #2d1832);
  border: 2px solid var(--gold);
  border-radius: 18px;
  padding: 14px 22px 16px;
  min-width: 240px;
  max-width: 320px;
  text-align: center;
  box-shadow: 0 12px 32px rgba(0,0,0,.4), 0 0 0 4px rgba(251,191,36,.15);
  pointer-events: auto;
}
.ach-card.ach-rare {
  border-color: #fde047;
  box-shadow: 0 12px 32px rgba(0,0,0,.4), 0 0 0 4px rgba(253,224,71,.25), 0 0 24px rgba(253,224,71,.4);
}
.ach-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-weight: 800;
  color: var(--gold);
}
.ach-icon {
  font-size: 38px;
  line-height: 1;
  margin: 4px 0;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.3));
}
.ach-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 900;
  color: white;
  letter-spacing: -0.01em;
}
.ach-desc {
  font-size: 12px;
  color: rgba(255,255,255,.75);
  line-height: 1.35;
  margin-top: 2px;
}
.ach-tap-hint {
  font-size: 10px;
  color: rgba(255,255,255,.4);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-top: 8px;
}
/* First-game overlay — celebration for første fullførte spill */
.ach-card.ach-firstgame {
  border-color: var(--primary);
  box-shadow: 0 12px 32px rgba(0,0,0,.4), 0 0 0 4px var(--primary-glow), 0 0 32px rgba(249,115,22,.4);
  background: linear-gradient(135deg, #2d1832, #3d2548);
}
.ach-card.ach-firstgame .ach-label { color: var(--primary); }
.ach-card.ach-firstgame .ach-title { font-size: 22px; }

/* Combined achievement overlay — for 3+ unlocks samtidig */
.ach-card.ach-combined {
  min-width: 280px;
  max-width: 360px;
  padding: 16px 20px 14px;
}
.ach-combined-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 10px 0;
}
.ach-combined-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 4px;
  background: rgba(255,255,255,.06);
  border: 0.5px solid rgba(251,191,36,.28);
  border-radius: 10px;
}
.ach-combined-item.ach-rare-item {
  background: rgba(253,224,71,.10);
  border-color: rgba(253,224,71,.45);
}
.ach-combined-icon {
  font-size: 26px;
  line-height: 1;
}
.ach-combined-title {
  font-size: 10px;
  font-weight: 700;
  color: rgba(255,255,255,.85);
  text-align: center;
  line-height: 1.15;
}

/* Joiner-strips — ULTRA-kompakt visning av kategori + settings for non-host.
   Joinere kan ikke endre noe — tar minst mulig vertikal plass. */
.joiner-cat-strip,
.joiner-settings-strip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(0,0,0,.20);
  border: 0.5px solid rgba(255,255,255,.08);
  border-radius: 999px;
  color: rgba(255,255,255,.75);
  font-size: 12px;
  line-height: 1.2;
}
.joiner-cat-label,
.joiner-set-label {
  flex-shrink: 0;
  font-size: 14px;
  opacity: .7;
}
.joiner-cat-icons {
  flex: 1;
  font-size: 14px;
  letter-spacing: .12em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.joiner-cat-count,
.joiner-set-text {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,.55);
}
.joiner-set-text {
  flex: 1;
  text-align: left;
  font-size: 12px;
}

/* Player-join pulse — markerer en nylig joinet spiller i lobby (2s) */
.player.just-joined {
  animation: justJoinedPulse 1.8s ease-out;
  position: relative;
}
@keyframes justJoinedPulse {
  0%   { background: rgba(34,197,94,.20); transform: translateX(-4px); }
  20%  { background: rgba(34,197,94,.20); transform: translateX(0); }
  100% { background: transparent; }
}
.player.just-joined::after {
  content: "✨";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  animation: justJoinedFade 1.8s ease-out forwards;
}
@keyframes justJoinedFade {
  0%, 60% { opacity: 1; }
  100%    { opacity: 0; }
}

/* Pass-gate — pass-the-phone overgang. Subtil pulse + actor-avatar */
.pass-gate { position: relative; }
.pass-gate .pass-phone-icon {
  font-size: 56px;
  animation: passGatePulse 1.6s ease-in-out infinite;
  display: inline-block;
}
.pass-gate .pass-actor-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f97316, #ec4899);
  color: white;
  font-weight: 900;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 12px auto 0;
  box-shadow: 0 6px 18px rgba(249,115,22,.35);
}
@keyframes passGatePulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.08); opacity: 0.85; }
}

/* Vote-wait-progress — viser hvor mange som har stemt mens du venter */
.vote-wait-progress {
  width: 100%;
  height: 6px;
  background: rgba(0,0,0,.10);
  border-radius: 3px;
  margin-top: 10px;
  overflow: hidden;
}
.vote-wait-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--secondary), var(--secondary-2));
  border-radius: 3px;
  transition: width .4s ease;
}

/* Vote-knapp dimmed (etter du har stemt — alle andre blir lukket).
   NB: tidligere fantes en .vote-btn.selected override her som overstyrte med
   cream/orange tint og !important. Den er fjernet — selected-state er nå
   Claude Design's fire→pantsy gradient (definert ovenfor på linje ~648). */
.vote-btn.dimmed {
  opacity: 0.42;
  pointer-events: none;
}

/* Code-mini — krympet code-block som vises når 2+ spillere er inne.
   Frigjør plass for Players + Start-knappen. Beholder kode synlig for senere joiners. */
.code-mini {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(0,0,0,.28);
  border: 0.5px solid rgba(255,255,255,.10);
  border-radius: 14px;
  flex-wrap: wrap;
}
.code-mini-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 800;
  color: rgba(255,255,255,.55);
}
.code-mini-value {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 900;
  color: white;
  letter-spacing: .12em;
  flex: 1;
}
.code-mini-btn {
  background: rgba(255,255,255,.10);
  border: 0.5px solid rgba(255,255,255,.18);
  color: white;
  border-radius: 8px;
  width: 36px;
  height: 36px;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.code-mini-btn:hover { background: rgba(255,255,255,.18); }

/* Your clubs — kompakt liste-kort nederst på home med topp-3 klubber */
.clubs-card {
  background: linear-gradient(135deg, rgba(245,158,11,.10), rgba(225,29,72,.06));
  border: 0.5px solid rgba(245,158,11,.25);
  color: white;
  padding: 12px 14px;
}
.clubs-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
  gap: 8px;
}
.clubs-header-toggle {
  background: none;
  border: none;
  padding: 4px 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
}
.clubs-collapse-arrow {
  font-size: 14px;
  color: rgba(255,255,255,.5);
  font-weight: 700;
  margin-left: auto;
}
.clubs-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 800;
  color: var(--gold);
}
.clubs-count {
  font-size: 11px;
  color: rgba(255,255,255,.55);
  font-weight: 600;
}
.clubs-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.clubs-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  transition: opacity .12s;
}
.clubs-row:hover { opacity: 0.85; }
.clubs-row:active { opacity: 0.75; }
.clubs-arrow {
  font-size: 18px;
  color: rgba(255,255,255,.4);
  font-weight: 700;
  flex-shrink: 0;
  margin-left: -2px;
}
.clubs-card-empty {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.10);
}

/* Club end-game stats — vises på end-screen hvis vi spiller med kjent klubb */
.club-end-stats {
  background: linear-gradient(135deg, rgba(245,158,11,.18), rgba(225,29,72,.10));
  border: 1px solid rgba(245,158,11,.4);
  border-radius: 14px;
  padding: 14px;
  margin: 16px 0 8px;
  color: white;
}
.club-end-stats-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.club-end-stats-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 800;
  color: var(--gold);
}
.club-end-stats-name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 900;
  margin-top: 2px;
}
.club-end-stats-btn {
  background: rgba(255,255,255,.10);
  border: 0.5px solid rgba(255,255,255,.18);
  color: white;
  border-radius: 8px;
  width: 36px;
  height: 36px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}
.club-end-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.club-end-stat { text-align: center; }
.club-end-stat-val {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 900;
  color: white;
  line-height: 1;
}
.club-end-stat-lbl {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255,255,255,.65);
  margin-top: 4px;
  line-height: 1.1;
}
.clubs-empty-explanation {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 0.5px solid rgba(255,255,255,.08);
}
/* Klubb-tier badge — bronze/silver/gold/platinum basert på days played */
.club-tier-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 10px;
  background: rgba(0,0,0,.04);
  border: 0.5px solid rgba(0,0,0,.08);
  border-radius: 999px;
}
.club-tier-badge.club-tier-pre {
  background: rgba(0,0,0,.04);
  color: var(--text-muted);
}
.clubs-tier-icon {
  font-size: 14px;
  margin-left: 6px;
  opacity: .85;
  vertical-align: middle;
}
.reunite-tier {
  margin-left: 6px;
  font-size: 16px;
  vertical-align: middle;
}

/* Klubb-totaler grid (i klubb-modal) */
.club-totals {
  background: linear-gradient(135deg, #fff9e0, #faf3e0);
  border: 0.5px solid var(--gold-deep);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 14px;
}
.club-totals-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--gold-deep);
  margin-bottom: 8px;
}
.club-totals-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.club-total-item {
  text-align: center;
}
.club-total-val {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 900;
  color: var(--text-on-card);
  line-height: 1;
}
.club-total-lbl {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.1;
}
.clubs-row + .clubs-row {
  border-top: 0.5px solid rgba(255,255,255,.08);
  padding-top: 8px;
}
.clubs-icon { font-size: 22px; flex-shrink: 0; line-height: 1; }
.clubs-meta { flex: 1; min-width: 0; }
.clubs-name {
  font-size: 14px;
  font-weight: 800;
  line-height: 1.15;
  color: white;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.clubs-sub {
  font-size: 11px;
  color: rgba(255,255,255,.6);
  font-weight: 500;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.clubs-time {
  font-size: 10.5px;
  color: rgba(255,255,255,.45);
  font-weight: 600;
  flex-shrink: 0;
}
.clubs-hint {
  font-size: 11px;
  color: rgba(255,255,255,.5);
  margin-top: 10px;
  padding-top: 8px;
  border-top: 0.5px solid rgba(255,255,255,.08);
  line-height: 1.4;
}

/* Title-pille på home — subtil, kompakt, ligger som en mild aksent på toppen
   av home-skjermen. Ikke konkurrerer med Lag/Bli med-knappene. */
.title-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.28);
  border: 0.5px solid rgba(255, 255, 255, 0.10);
  border-radius: 999px;
  color: white;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  text-align: left;
  transition: background .15s, border-color .15s;
}
.title-pill:hover { background: rgba(0, 0, 0, 0.36); border-color: rgba(255,255,255,.18); }
.title-pill-icon {
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
}
.title-pill-label {
  font-weight: 800;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
.title-pill-ach {
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
  background: rgba(251, 191, 36, .12);
  padding: 2px 7px;
  border-radius: 999px;
  flex-shrink: 0;
}
.title-pill-next {
  font-size: 11px;
  color: rgba(255,255,255,.55);
  font-weight: 600;
  flex-shrink: 0;
  white-space: nowrap;
}
.title-pill-arrow {
  font-size: 16px;
  color: rgba(255,255,255,.4);
  font-weight: 700;
  flex-shrink: 0;
  margin-left: -2px;
}

/* Reunite-subseksjon i Players-kortet (gjengen er samlet igjen) */
.reunite-subsection {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  margin: 0 0 12px;
  background: linear-gradient(135deg, rgba(245,158,11,.18), rgba(236,72,153,.12));
  border: 1.5px solid rgba(245,158,11,.4);
  border-radius: 12px;
}
.reunite-icon {
  font-size: 28px;
  line-height: 1;
  flex-shrink: 0;
}
.reunite-meta {
  flex: 1;
  min-width: 0;
}
.reunite-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
  color: #b45309;
}
.reunite-title {
  font-size: 16px;
  font-weight: 900;
  line-height: 1.15;
  margin-top: 2px;
  color: #2a1424;
}
.reunite-sub {
  font-size: 12px;
  color: #78350f;
  opacity: .8;
  margin-top: 2px;
}
.reunite-tappable {
  cursor: pointer;
  transition: background .15s, transform .08s;
}
.reunite-tappable:active { transform: scale(.99); }
.reunite-arrow {
  font-size: 22px;
  color: #b45309;
  font-weight: 700;
  opacity: .55;
  flex-shrink: 0;
  margin-left: 4px;
}

.players-card {
  /* Litt mindre padding enn standard kort så reunite-banner og spillerliste føles tett */
}

/* Brand confirm modal — GAME SHOW redesign med SVG-glyphs (door/moon/flag/chili)
   White card, sentered glyph, big bricolage display title, side-by-side
   cancel/action buttons. */
.brand-confirm .brand-confirm-modal {
  max-width: 360px;
  padding: 26px 22px 18px;
  text-align: center;
  background: #FFFFFF;
  border-radius: 24px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
}
.brand-confirm-glyph {
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
  line-height: 0;
}
.brand-confirm-glyph svg { display: block; }
.brand-confirm-glyph.emoji-fallback {
  line-height: 1 !important;
}
.brand-confirm-icon {
  /* Legacy emoji support */
  font-size: 44px;
  line-height: 1;
  margin-bottom: 10px;
}
.brand-confirm-title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  color: #1A0820;
  margin: 0 0 10px;
  letter-spacing: -0.025em;
  line-height: 1.05;
}
.brand-confirm-msg {
  font-size: 15px;
  line-height: 1.45;
  color: #3F1A4A;
  margin: 0 0 22px;
  padding: 0 4px;
}
.brand-confirm-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.brand-confirm-actions .btn {
  min-height: 52px;
  font-weight: 700;
  font-size: 16px;
  font-family: var(--font-display);
  letter-spacing: -0.01em;
  border-radius: 14px;
}
.brand-confirm-cancel {
  background: var(--surface-card) !important;
  color: var(--text-on-card) !important;
  border: none !important;
  box-shadow: none !important;
  animation: none !important;
}
.brand-confirm-action {
  /* Default = primary orange. Danger override settes inline via JS. */
}

/* ═══════════════════════════════════════════════════════════════════════
   Input modal v2 — match til Claude Designs ScreenAddPlayerPrompt
   Glyph + title side-by-side, helper-tekst, cream input med fire-border,
   side-by-side Cancel/Add med dynamisk label.
   ═══════════════════════════════════════════════════════════════════════ */
.input-modal-v2 {
  text-align: left;
}
.input-modal-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.input-modal-glyph-wrap {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--surface-card);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.input-modal-glyph-wrap .brand-confirm-glyph {
  margin: 0;
}
.input-modal-glyph-wrap .brand-confirm-glyph svg {
  display: block;
}
.input-modal-header-text {
  flex: 1;
  min-width: 0;
}
.input-modal-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.015em;
  line-height: 1.1;
  color: var(--ink);
}
.input-modal-subtitle {
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 2px;
}
.input-modal-description {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.45;
  margin: 0 0 8px;
}
/* Cream input med fire-border (Claude Design pattern) */
.input-modal-v2 .input-modal-input-wrap {
  margin-bottom: 0;
}
.input-modal-v2 .input-modal-input {
  width: 100%;
  background: #F5F0E6;
  border: 1.5px solid var(--pantsy);
  border-radius: 12px;
  padding: 14px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  outline: none;
}
.input-modal-v2 .input-modal-input::placeholder {
  color: rgba(63, 26, 74, 0.32);
  font-weight: 500;
  font-style: italic;
}
.input-modal-v2 .brand-confirm-actions {
  margin-top: 18px;
}

/* ═══════════════════════════════════════════════════════════════════════
   GAME SHOW: 13 Profile sheet — match Claude Designs ScreenProfile
   Identity card (avatar + name + tier-pill), 4-col Lifetime stat-strip,
   Achievements earned + next-up rows.
   ═══════════════════════════════════════════════════════════════════════ */
.profile-sheet-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.profile-section {
  padding: 0 4px;
}
.profile-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-faint);
  padding-left: 4px;
  margin-bottom: 10px;
}
.profile-eyebrow.next-up {
  margin-top: 14px;
}
.profile-row-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}
.profile-row-header .profile-eyebrow {
  margin-bottom: 0;
}

/* Identity card */
.profile-identity-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: linear-gradient(160deg, var(--surface-mid) 0%, var(--surface-deep) 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-card);
}
.profile-avatar-big {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}
.profile-id-meta {
  flex: 1;
  min-width: 0;
}
.profile-id-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--text-on-deep);
  word-break: break-word;
}
.profile-tier-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 3px 8px;
  background: rgba(255, 210, 74, 0.10);
  border: 1px solid rgba(255, 210, 74, 0.27);
  border-radius: 999px;
}
.profile-tier-pill .ptp-dot {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--gold);
}
.profile-tier-pill .ptp-text {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--gold);
}

/* 4-col stat-strip */
.profile-stats-strip {
  display: flex;
  background: var(--surface-mid);
  border-radius: var(--radius-btn);
  border: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.profile-stat {
  flex: 1;
  padding: 12px 8px;
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
}
.profile-stat:last-child { border-right: none; }
.profile-stat-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--text-on-deep);
}
.profile-stat.hi .profile-stat-num { color: var(--gold); }
.profile-stat-lbl {
  font-size: 10px;
  color: var(--text-faint);
  margin-top: 6px;
  text-transform: lowercase;
  letter-spacing: 0.04em;
}

/* Achievement rows — earned (gold gradient) + pending (subtle) */
.profile-ach-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  margin-bottom: 8px;
  border-radius: var(--radius-btn);
}
.profile-ach-row.earned {
  background: linear-gradient(135deg, rgba(255, 210, 74, 0.13) 0%, rgba(255, 210, 74, 0.03) 100%);
  border: 1px solid rgba(255, 210, 74, 0.33);
}
.profile-ach-row.pending {
  background: var(--surface-mid);
  border: 1px solid rgba(255, 255, 255, 0.06);
  opacity: 0.85;
}
.profile-ach-row .pa-icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}
.profile-ach-row .pa-meta {
  flex: 1;
  min-width: 0;
}
.profile-ach-row .pa-title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--text-on-deep);
  line-height: 1.2;
}
.profile-ach-row .pa-sub {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 3px;
  line-height: 1.3;
}
.profile-ach-row .pa-pill {
  font-size: 14px;
  font-weight: 700;
  color: var(--gold);
  flex-shrink: 0;
}
.profile-ach-row .pa-pill.mono {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--text-faint);
}

/* Detailed stats accordion */
.profile-collapse-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-btn);
  color: var(--text-soft);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.profile-detailed-stats {
  margin-top: 8px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius-btn);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pds-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--text-soft);
}
.pds-row .pds-val {
  font-family: var(--font-mono);
  font-weight: 700;
  color: var(--text-on-deep);
}

/* ═══════════════════════════════════════════════════════════════════════
   GAME SHOW: 13b Club sheet — match Claude Designs ScreenClub
   Identity hero (gold tier), totals strip, leaderboard, members + invite.
   ═══════════════════════════════════════════════════════════════════════ */
.club-sheet-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.club-section {
  padding: 0 4px;
}
.club-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-faint);
  padding-left: 4px;
  margin-bottom: 8px;
}
.club-eyebrow-mono {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
  letter-spacing: 0.05em;
}
.club-row-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
  padding: 0 4px;
}

/* Identity hero — gold tinted card */
.club-identity-hero {
  position: relative;
  background: linear-gradient(160deg, rgba(255, 210, 74, 0.13) 0%, rgba(255, 87, 34, 0.06) 60%, var(--surface-deep) 100%);
  border: 1px solid rgba(255, 210, 74, 0.27);
  border-radius: var(--radius-card);
  padding: 20px 20px 18px;
  overflow: hidden;
}
.club-identity-hero .cih-watermark {
  position: absolute;
  right: -28px;
  bottom: -36px;
  font-size: 180px;
  opacity: 0.05;
  line-height: 1;
  pointer-events: none;
  color: var(--gold);
  font-family: var(--font-display);
  font-weight: 700;
}
.club-identity-hero .cih-content {
  position: relative;
}
.club-identity-hero .cih-tier-row {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--gold);
  text-transform: uppercase;
}
.club-identity-hero .cih-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.club-identity-hero .cih-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--text-on-deep);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.club-identity-hero .cih-edit {
  background: none;
  border: none;
  color: var(--text-faint);
  opacity: 0.7;
  font-size: 14px;
  cursor: pointer;
  flex-shrink: 0;
  padding: 4px 6px;
}
.club-identity-hero .cih-sub {
  font-size: 12px;
  color: var(--text-soft);
  margin-top: 4px;
}
.club-identity-hero .cih-tier-progress {
  margin-top: 16px;
}
.club-identity-hero .ctp-labels {
  display: flex;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 11px;
  color: var(--text-soft);
}
.club-identity-hero .ctp-next {
  color: var(--gold);
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
}
.club-identity-hero .ctp-bar {
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.club-identity-hero .ctp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold) 0%, var(--ember) 100%);
  border-radius: 999px;
  transition: width 0.4s ease;
}

/* Totals strip — 4 cells */
.club-totals-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--surface-mid);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-card);
  padding: 14px 12px;
}
.club-totals-strip .cts-cell {
  text-align: center;
  padding: 4px;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
}
.club-totals-strip .cts-cell:first-child { border-left: none; }
.club-totals-strip .cts-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.02em;
  color: var(--text-on-deep);
  line-height: 1;
}
.club-totals-strip .cts-lbl {
  font-size: 10px;
  color: var(--text-faint);
  margin-top: 4px;
  text-transform: lowercase;
  letter-spacing: 0.02em;
}

/* Leaderboard — top spotlight + rest */
.club-leader-top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 8px;
  background: linear-gradient(135deg, rgba(255, 210, 74, 0.13) 0%, rgba(255, 210, 74, 0.03) 100%);
  border: 1px solid rgba(255, 210, 74, 0.33);
  border-radius: var(--radius-card);
}
.club-leader-top .clt-rank {
  width: 22px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
  flex-shrink: 0;
}
.club-leader-top .clt-avatar {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.club-leader-top .clt-meta {
  flex: 1;
  min-width: 0;
}
.club-leader-top .clt-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.club-leader-top .clt-stats {
  font-size: 11px;
  color: var(--gold);
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
  margin-top: 3px;
}
.club-leader-top .clt-score {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  color: var(--gold);
  letter-spacing: -0.01em;
}

.club-leader-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  margin-bottom: 6px;
  background: var(--surface-mid);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-btn);
}
.club-leader-row.is-me {
  background: rgba(255, 87, 34, 0.08);
  border-color: rgba(255, 87, 34, 0.33);
}
.club-leader-row .clr-rank {
  width: 22px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-faint);
  flex-shrink: 0;
}
.club-leader-row .clr-avatar {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--surface-hi);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.club-leader-row .clr-avatar.me { background: var(--primary); }
.club-leader-row .clr-meta {
  flex: 1;
  min-width: 0;
}
.club-leader-row .clr-name {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  color: var(--text-on-deep);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.club-leader-row .clr-you {
  color: var(--text-faint);
  font-weight: 500;
}
.club-leader-row .clr-stats {
  font-size: 10.5px;
  color: var(--text-faint);
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
  margin-top: 2px;
}
.club-leader-row .clr-score {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--text-on-deep);
}

/* Invite card */
.club-invite-card {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: transparent;
  border: 1.5px dashed rgba(255, 87, 34, 0.4);
  border-radius: var(--radius-btn);
  padding: 12px 14px;
  margin-bottom: 8px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.club-invite-card .ci-icon {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: rgba(255, 87, 34, 0.13);
  color: var(--primary);
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.club-invite-card .ci-meta {
  flex: 1;
  min-width: 0;
}
.club-invite-card .ci-title {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 13.5px;
  color: var(--primary);
}
.club-invite-card .ci-link {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 1px;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.club-invite-card .ci-cta {
  color: var(--primary);
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
}

/* Member rows */
.club-member-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  margin-bottom: 6px;
  background: var(--surface-mid);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-btn);
}
.club-member-row .cmr-avatar {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--surface-hi);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.club-member-row .cmr-avatar.me { background: var(--primary); }
.club-member-row .cmr-meta {
  flex: 1;
  min-width: 0;
}
.club-member-row .cmr-name {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  color: var(--text-on-deep);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.club-member-row .cmr-you {
  color: var(--text-faint);
  font-weight: 500;
}
.club-member-row .cmr-sub {
  font-size: 11px;
  color: var(--text-faint);
  margin-top: 1px;
}
.club-member-row .cmr-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(255, 210, 74, 0.13);
  color: var(--gold);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  flex-shrink: 0;
}

/* Leave club button (footer) */
.club-leave-btn {
  width: 100%;
  padding: 12px 16px;
  background: transparent;
  color: var(--pantsy-hi);
  border: 1px solid rgba(255, 23, 68, 0.20);
  border-radius: var(--radius-btn);
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
}
.club-leave-btn:hover {
  background: rgba(255, 23, 68, 0.06);
}

/* ═══════════════════════════════════════════════════════════════════════
   01c Loading screen — pulserende brand-glyph + label + 3 animerte dots.
   Erstatter gammel 📡-card under WebSocket connect/reconnect.
   ═══════════════════════════════════════════════════════════════════════ */
.loading-screen {
  display: flex;
  flex-direction: column;
}
.loading-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 0 40px;
}
@keyframes pantsy-load-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(0.96); opacity: 0.85; }
}
@keyframes pantsy-load-dot {
  0%, 80%, 100% { opacity: 0.2; transform: translateY(0); }
  40%           { opacity: 1; transform: translateY(-3px); }
}
.loading-mascot {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  line-height: 0;
  animation: pantsy-load-pulse 1.6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .loading-mascot { animation: none; }
}
.loading-label-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 8px;
}
.loading-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-soft);
}
.loading-dots {
  display: inline-flex;
  gap: 3px;
  margin-left: 2px;
}
.loading-dot {
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--text-soft);
  animation: pantsy-load-dot 1.2s ease-in-out infinite;
}
.loading-dot:nth-child(2) { animation-delay: 0.18s; }
.loading-dot:nth-child(3) { animation-delay: 0.36s; }
@media (prefers-reduced-motion: reduce) {
  .loading-dot { animation: none; opacity: 1; }
}
.loading-warn-hint {
  font-size: 13px;
  color: var(--warning, #FFD24A);
  font-weight: 600;
  margin-top: 8px;
  text-align: center;
}
.loading-leave-btn {
  margin-bottom: max(20px, env(safe-area-inset-bottom));
}

/* ═══════════════════════════════════════════════════════════════════════
   11 Final-screen — Pantsy-3 redesign med Final standings → Awards → Club totals.
   Pinned bottom CTAs: "Play again" primary + "Exit" ghost (ingen emoji, ingen panel).
   ═══════════════════════════════════════════════════════════════════════ */
.final-screen {
  display: flex;
  flex-direction: column;
}
.final-scroll-body {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 8px;
}
.final-section {
  padding: 0 4px;
}
.final-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-faint);
  padding-left: 4px;
  margin-bottom: 8px;
}
/* Final standings row */
.final-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  margin-bottom: 4px;
  background: var(--surface-mid);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-btn);
  animation: pantsy-final-row-in 0.45s cubic-bezier(.2,.9,.3,1.2) both;
}
.final-row.final-row-winner {
  background: var(--surface-hi);
  border-color: rgba(255, 210, 74, 0.33);
  animation:
    pantsy-final-row-in 0.45s cubic-bezier(.2,.9,.3,1.2) both,
    pantsy-final-winner-halo 2.4s ease-in-out 0.45s infinite;
}
@keyframes pantsy-final-row-in {
  0%   { transform: translateY(8px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
@keyframes pantsy-final-winner-halo {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 210, 74, 0.33), 0 0 18px rgba(255, 210, 74, 0.13); }
  50%      { box-shadow: 0 0 0 4px rgba(255, 210, 74, 0), 0 0 28px rgba(255, 210, 74, 0.27); }
}
@media (prefers-reduced-motion: reduce) {
  .final-row, .final-row-winner { animation: none !important; }
}
.final-rank {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--text-faint);
  min-width: 18px;
  letter-spacing: -0.02em;
}
.final-row-winner .final-rank { color: var(--gold); }
.final-avatar {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11px;
  flex-shrink: 0;
}
.final-name {
  flex: 1;
  font-weight: 600;
  font-size: 14px;
  color: var(--text-on-deep);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.final-score {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--text-soft);
  letter-spacing: -0.02em;
}
.final-row-winner .final-score { color: var(--text-on-deep); }

/* Award card */
.final-award-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  background: var(--surface-mid);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-card);
}
.final-award-card .faw-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255, 210, 74, 0.13);
  border: 1px solid rgba(255, 210, 74, 0.33);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}
.final-award-card .faw-meta { flex: 1; min-width: 0; }
.final-award-card .faw-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gold);
}
.final-award-card .faw-name {
  font-weight: 600;
  font-size: 14px;
  margin-top: 2px;
  color: var(--text-on-deep);
}
.final-award-card .faw-sub {
  font-size: 12px;
  color: var(--text-faint);
  margin-top: 1px;
}

/* Club totals card (final-screen) */
.final-club-card {
  position: relative;
  background: linear-gradient(180deg, var(--surface-mid) 0%, var(--surface-deep) 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-card);
  padding: 16px 18px;
  overflow: hidden;
}
.final-club-card .fcc-watermark {
  position: absolute;
  right: -24px;
  bottom: -28px;
  font-size: 140px;
  opacity: 0.04;
  line-height: 1;
  pointer-events: none;
  color: var(--gold);
  font-family: var(--font-display);
  font-weight: 700;
}
.final-club-card .fcc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  gap: 8px;
}
.final-club-card .fcc-meta { flex: 1; min-width: 0; }
.final-club-card .fcc-tag {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gold);
}
.final-club-card .fcc-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
  margin-top: 2px;
  line-height: 1.1;
  color: var(--text-on-deep);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.final-club-card .fcc-btn {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-on-deep);
  cursor: pointer;
  font-size: 14px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.final-club-card .fcc-stats {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  position: relative;
}
.final-club-card .fcc-stat {
  text-align: center;
  padding: 8px 4px;
  border-left: 1px solid rgba(255, 255, 255, 0.06);
}
.final-club-card .fcc-stat:first-child { border-left: none; }
.final-club-card .fcc-stat-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text-on-deep);
}
.final-club-card .fcc-stat-lbl {
  font-size: 10px;
  color: var(--text-faint);
  letter-spacing: 0.05em;
  margin-top: 4px;
  text-transform: lowercase;
}

/* Bottom CTAs — pinned, ingen panel rundt Exit-knappen */
.final-bottom-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 0 max(20px, env(safe-area-inset-bottom));
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   13a Clubs overview sheet — liste over alle klubber som tappbare cards.
   Match Claude Designs ScreenClubs.
   ═══════════════════════════════════════════════════════════════════════ */
.clubs-overview-body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0 4px;
}
.clubs-overview-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 16px;
}
.club-card {
  width: 100%;
  border-radius: var(--radius-card);
  padding: 16px 18px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  color: var(--text-on-deep);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.club-card:hover { transform: translateY(-1px); }
.club-card:active { transform: scale(0.99); }
.club-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.club-card-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.club-card-chevron {
  font-size: 18px;
  color: var(--text-faint);
  line-height: 1;
}
.club-card-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 12px;
  color: var(--text-on-deep);
}
.club-card-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: rgba(0, 0, 0, 0.18);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.club-card-stats .ccs-cell {
  min-width: 0;
}
.club-card-stats .ccs-cell-right {
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  padding-left: 12px;
}
.club-card-stats .ccs-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 3px;
}
.club-card-stats .ccs-value {
  font-family: var(--font-sans);
  display: flex;
  align-items: baseline;
  gap: 6px;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.club-card-stats .ccs-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--text-on-deep);
  letter-spacing: -0.01em;
}
.club-card-stats .ccs-name {
  font-weight: 700;
  font-size: 14px;
  color: var(--text-on-deep);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.club-card-stats .ccs-sub {
  font-weight: 600;
  font-size: 12px;
  color: var(--text-faint);
}
.club-card-moment {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-soft);
}
.club-card-moment .ccm-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  flex-shrink: 0;
}
.club-card-moment .ccm-text {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.club-card-moment .ccm-when {
  color: var(--text-faint);
  font-size: 11px;
  flex-shrink: 0;
}

/* Empty state */
.clubs-overview-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 24px;
  gap: 8px;
}

/* Info-card "Clubs are made for you" */
.clubs-info-card {
  margin: 0 16px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-btn);
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.clubs-info-card .ci-icon-circle {
  flex-shrink: 0;
  margin-top: 1px;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(255, 87, 34, 0.10);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 12px;
}
.clubs-info-card .ci-content {
  flex: 1;
  min-width: 0;
}
.clubs-info-card .ci-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-on-deep);
  margin-bottom: 3px;
}
.clubs-info-card .ci-body {
  font-size: 12px;
  color: var(--text-soft);
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════════
   GAME SHOW: Game settings (12) — Section / Seg / ToggleRow primitives
   Match Claude Designs ScreenSettings: title + hint + (Seg | ToggleRow).
   Dark surface cards, segmented controls med cream-on-active, native-look-switch.
   ═══════════════════════════════════════════════════════════════════════ */
.gs-panel {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.gs-section {
  padding: 0 4px;
}
.gs-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-faint);
  padding-left: 2px;
  margin-bottom: 10px;
}
.gs-hint {
  font-size: 12px;
  color: var(--text-faint);
  line-height: 1.45;
  padding-left: 2px;
  margin-top: -6px;
  margin-bottom: 10px;
}
/* Segmented control */
.gs-seg {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--surface-deep);
  border-radius: var(--radius-btn);
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.gs-seg-cell {
  flex: 1;
  height: 36px;
  border-radius: calc(var(--radius-btn) - 4px);
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--text-soft);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  padding: 0 8px;
  transition: background 0.12s, color 0.12s;
}
.gs-seg-cell.active {
  background: var(--surface-card);
  color: var(--ink);
}
.gs-seg-cell:active { transform: scale(0.97); }

/* ToggleRow */
.gs-toggle-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  background: var(--surface-mid);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-btn);
  margin-bottom: 8px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background 0.12s;
}
.gs-toggle-row:hover { background: var(--surface-hi); }
.gs-toggle-row.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.gs-toggle-meta {
  flex: 1;
  min-width: 0;
}
.gs-toggle-label {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 14px;
  color: var(--text-on-deep);
  letter-spacing: -0.01em;
}
.gs-toggle-sub {
  font-size: 12px;
  color: var(--text-soft);
  margin-top: 2px;
  line-height: 1.4;
}
.gs-toggle-switch {
  width: 44px;
  height: 26px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
  position: relative;
  flex-shrink: 0;
  transition: background 0.15s;
}
.gs-toggle-switch.on { background: var(--primary); }
.gs-toggle-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: left 0.15s;
}
.gs-toggle-switch.on .gs-toggle-knob { left: 21px; }

/* Pass-and-play shared list */
.gs-shared-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}
.gs-shared-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--surface-mid);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius-btn);
}
.gs-shared-icon {
  font-size: 14px;
}
.gs-shared-name {
  flex: 1;
  font-weight: 600;
  font-size: 14px;
  color: var(--text-on-deep);
}
.gs-shared-remove {
  background: none;
  border: none;
  color: var(--pantsy-hi);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  padding: 4px 8px;
}
.gs-add-shared {
  width: 100%;
  padding: 12px 14px;
  background: transparent;
  border: 1.5px dashed rgba(255, 87, 34, 0.45);
  border-radius: var(--radius-btn);
  color: var(--primary);
  font-family: inherit;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
}
.gs-add-shared-icon {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(255, 87, 34, 0.22);
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
}

/* Recap */
.recap-card {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  color: #2a1424;
  border-radius: 18px;
  padding: 18px;
  text-align: center;
}
.recap-card .label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
  color: #92400e;
}
.recap-card .player-name {
  font-size: 22px;
  font-weight: 900;
  margin: 6px 0 2px;
}
.recap-card .stat {
  font-size: 13px;
  color: #78350f;
  font-weight: 600;
}
.recap-card .emoji {
  font-size: 36px;
  margin-bottom: 4px;
}
.recap-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.history-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: rgba(255,255,255,.08);
  border-radius: 10px;
  font-size: 13px;
}
.history-row .word { font-weight: 800; color: white; }
.history-row .pantsy { color: var(--gold); font-weight: 600; }
.history-row .badge-tiny {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 6px;
  font-weight: 700;
  text-transform: uppercase;
}
.history-row .badge-tiny.caught { background: rgba(22,163,74,.3); color: #86efac; }
.history-row .badge-tiny.escaped { background: rgba(225,29,72,.3); color: #fda4af; }

/* ---------------- Share card (end-of-night) ---------------- */
.share-card {
  background: linear-gradient(160deg, #0f172a 0%, #1e1b4b 50%, #2a0613 100%);
  color: white;
  border-radius: 24px;
  padding: 24px 20px 20px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.share-card::before {
  content: "";
  position: absolute;
  top: -40px; right: -40px;
  width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(249,115,22,.4), transparent 70%);
  pointer-events: none;
}
.share-card .share-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
  position: relative;
}
.share-card .share-brand {
  font-size: 20px; font-weight: 900;
  display: flex; align-items: center; gap: 6px;
}
.share-card .share-date {
  font-size: 11px; opacity: .65;
  text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
}
.share-card .share-winner {
  text-align: center;
  padding: 18px 0 10px;
  position: relative;
}
.share-card .share-winner .crown { font-size: 42px; }
.share-card .share-winner .name {
  font-size: 32px; font-weight: 900; line-height: 1.1;
  margin: 4px 0;
  background: linear-gradient(180deg, #fff, #fed7aa);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.share-card .share-winner .pts {
  font-size: 14px; opacity: .8;
  font-weight: 600;
}
.share-card .share-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
}
.share-card .share-stat {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px;
  padding: 10px 12px;
  text-align: center;
}
.share-card .share-stat .icon { font-size: 20px; line-height: 1; }
.share-card .share-stat .lbl {
  font-size: 9px; text-transform: uppercase; letter-spacing: .08em;
  font-weight: 800; opacity: .7; margin: 4px 0 2px;
}
.share-card .share-stat .val {
  font-size: 14px; font-weight: 800;
}
.share-card .share-stat .sub {
  font-size: 10px; opacity: .65; font-weight: 600;
}
.share-card .share-rounds {
  margin-top: 14px;
  background: rgba(0,0,0,.20);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 11px;
}
.share-card .share-rounds .lbl {
  text-transform: uppercase; letter-spacing: .08em;
  font-weight: 800; opacity: .65;
  margin-bottom: 6px;
  font-size: 10px;
}
.share-card .share-rounds .row {
  display: flex; justify-content: space-between;
  padding: 3px 0;
  border-top: 0.5px solid rgba(255,255,255,.08);
}
.share-card .share-rounds .row:first-of-type { border-top: none; }
.share-card .share-footer {
  text-align: center;
  margin-top: 14px;
  font-size: 10px;
  opacity: .55;
  text-transform: uppercase; letter-spacing: .08em;
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════════════
   GAME SHOW additions — utility classes for the redesign
   ═══════════════════════════════════════════════════════════════════════ */

/* Eyebrow — small uppercase label above big content */
.eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
  color: var(--text-faint);
  margin: 0 0 4px;
}
.eyebrow.on-card { color: var(--ink-soft); }

/* Stage label — used inside reveal cards to introduce big display copy */
.stage-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  opacity: 0.7;
  margin: 0;
}

/* Big display — Bricolage Grotesque, tight tracking, used on reveal/handover */
.big-display {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(40px, 12vw, 56px);
  line-height: 0.95;
  letter-spacing: -0.035em;
}

/* Cream code-card on lobby — soft warmth pulse */
.lobby-code-card {
  background: var(--surface-card);
  color: var(--text-on-card);
  border-radius: var(--radius-card);
  padding: 18px 18px 14px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.lobby-code-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(255, 87, 34, 0.08) 0%, transparent 55%);
  animation: lobbyCodeGlow 3.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes lobbyCodeGlow {
  0%, 100% { opacity: 0; transform: scale(0.95); }
  50%      { opacity: 0.5; transform: scale(1.02); }
}
.lobby-code-card .code-display {
  position: relative;
}
.lobby-code-card .share-row {
  display: flex;
  gap: 6px;
  position: relative;
  margin-top: 4px;
}
.lobby-code-card .share-row .share-btn {
  flex: 1;
  height: 34px;
  border-radius: var(--radius-btn);
  background: transparent;
  color: var(--text-on-card);
  border: 1px solid rgba(63, 26, 74, 0.20);
  font-family: inherit;
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
}
.lobby-code-card .share-row .share-btn:active { transform: scale(0.97); }
/* v4: eyebrow OVER koden (egen rad), kode sentrert, share-buttons under.
   Match Pantsy-3 design-screenshot: tre stacks i samme cream code-card. */
.lobby-code-card-v4 {
  padding: 16px 18px 14px;
  text-align: center;
}
.code-eyebrow-top {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-soft);
  line-height: 1.3;
  margin-bottom: 4px;
  position: relative;
}
.code-display-row {
  margin-bottom: 12px;
  position: relative;
}

/* Lobby code-card har ekstra top-margin så det får luft fra topbar/profile-bubble */
.screen.lobby-screen .lobby-code-card {
  margin-top: 12px;
}

/* DEPRECATED v3-style — fjernet i v4, men beholdt for evt. bakkompat */
.lobby-code-card-v3 { padding: 14px 16px 14px; }

/* v2: code-row med share-buttons inline til høyre — DEPRECATED, kept for bakkompat */
.lobby-code-card-v2 {
  padding: 14px 16px 14px;
}
.code-row-with-share {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}
.code-share-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}
.share-btn-icon {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: rgba(63, 26, 74, 0.06);
  border: 1px solid rgba(63, 26, 74, 0.12);
  color: var(--text-on-card);
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  padding: 0;
  transition: background 0.12s, transform 0.12s;
}
.share-btn-icon:hover { background: rgba(63, 26, 74, 0.12); }
.share-btn-icon:active { transform: scale(0.95); }

/* Pass-the-phone (handover) sliding card animation */
@keyframes passSlide {
  0%   { transform: translateX(-44px) rotate(-12deg); opacity: 0.4; }
  45%  { transform: translateX(0)     rotate(0deg);   opacity: 1; }
  55%  { transform: translateX(0)     rotate(0deg);   opacity: 1; }
  100% { transform: translateX(44px)  rotate(12deg);  opacity: 0.4; }
}
@keyframes passArrow {
  0%, 100% { opacity: 0.2; transform: translateX(-6px); }
  50%      { opacity: 0.85; transform: translateX(6px); }
}
@keyframes handoverPulse {
  0%, 100% { transform: scale(1); opacity: 0.4; }
  50%      { transform: scale(1.12); opacity: 0.8; }
}

.handover-diagram {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 240px;
  margin: 0 auto 22px;
}
.handover-diagram .ho-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
/* CRITICAL: handover-avatar er nå sirkel (var firkantet pga manglende border-radius
   på inline-style fra JS). Centrer initialer + tving font. */
.handover-diagram .ho-side .avatar {
  border-radius: 999px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: #fff;
  line-height: 1;
  letter-spacing: -0.01em;
  flex-shrink: 0;
}
.handover-diagram .ho-name {
  font-size: 12px;
  letter-spacing: 0;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
}
.handover-diagram .ho-from .ho-name { color: var(--text-faint); font-weight: 500; }
.handover-diagram .ho-from img,
.handover-diagram .ho-from .avatar { opacity: 0.55; }
.handover-diagram .ho-mid {
  position: relative;
  flex: 1;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.handover-diagram .ho-arrow {
  position: absolute;
  left: 50%;
  top: 70%;
  transform: translate(-50%, -50%);
  opacity: 0.5;
}
.handover-diagram .ho-arrow path {
  animation: passArrow 1.6s ease-in-out infinite;
}
.handover-diagram .ho-card {
  width: 26px;
  height: 46px;
  border-radius: 6px;
  background: linear-gradient(180deg, var(--surface-hi), var(--surface-lo));
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: 3px;
  animation: passSlide 2.4s ease-in-out infinite;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45);
}
.handover-diagram .ho-card .ho-card-inner {
  width: 100%;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(165deg, var(--pantsy), var(--primary));
  opacity: 0.85;
}
.handover-diagram .ho-to {
  position: relative;
}
.handover-diagram .ho-to .ho-pulse {
  position: absolute;
  inset: -10px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 210, 74, 0.55) 0%, transparent 65%);
  animation: handoverPulse 2.4s ease-in-out infinite;
  pointer-events: none;
}

/* Hint banner on home screen — gold-tinted, dismissible */
.home-hint-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: linear-gradient(135deg, rgba(255, 210, 74, 0.10) 0%, rgba(255, 210, 74, 0.03) 100%);
  border: 1px solid rgba(255, 210, 74, 0.33);
  border-radius: var(--radius-btn);
  margin: 0 0 12px;
}
.home-hint-banner .hb-icon {
  width: 32px; height: 32px;
  border-radius: 10px;
  background: rgba(255, 210, 74, 0.13);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--gold);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
}
.home-hint-banner .hb-body { flex: 1; min-width: 0; }
.home-hint-banner .hb-title {
  font-size: 13px; font-weight: 700; color: var(--text-on-deep);
  line-height: 1.2;
}
.home-hint-banner .hb-text {
  font-size: 11.5px; color: var(--text-muted); margin-top: 2px;
  line-height: 1.4;
}
.home-hint-banner .hb-close {
  font-size: 16px; color: var(--text-faint);
  cursor: pointer; padding: 0 2px; flex-shrink: 0;
  background: transparent; border: none;
}

/* Compact club strip on home — single line summary */
.club-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--surface-lo);
  border-radius: var(--radius-btn);
  border: 1px solid rgba(255, 255, 255, 0.08);
  cursor: pointer;
}
.club-strip .cs-tiles {
  display: flex; position: relative;
  width: 36px; height: 28px; flex-shrink: 0;
}
.club-strip .cs-tile {
  width: 26px; height: 26px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-on-card);
  font-family: var(--font-display);
  font-weight: 700; font-size: 12px;
  border: 2px solid var(--surface-lo);
  position: absolute;
}
.club-strip .cs-tile.t1 {
  left: 0; top: 0;
  background: linear-gradient(135deg, var(--gold), var(--ember));
}
.club-strip .cs-tile.t2 {
  left: 12px; top: 2px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-faint);
}
.club-strip .cs-body { flex: 1; min-width: 0; text-align: left; }
.club-strip .cs-title {
  font-size: 13px; font-weight: 600;
  line-height: 1.2; color: var(--text-on-deep);
  text-align: left;
}
.club-strip .cs-title .cs-count {
  color: var(--text-faint); font-weight: 500;
}
.club-strip .cs-sub {
  font-size: 11px; color: var(--text-faint); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  text-align: left;
}
.club-strip .cs-see-all {
  font-size: 12px;
  color: var(--text-faint);
  font-weight: 500;
  flex-shrink: 0;
}
.club-strip .cs-arrow {
  font-size: 12px; color: var(--text-faint);
}

/* Vote-row "waiting on" pill — transparent dark variant.
   Pantsy-3 design: sitter på dark vote-screen, ikke standalone overlay → cream
   pill stakk visuelt ut. Nå transparent + 1px hvit-rgba border + fgSoft text. */
.vote-waiting {
  width: 100%;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--radius-btn);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--text-soft);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  margin-top: 4px;
}
.vote-waiting .vw-dots {
  display: inline-flex; gap: 3px;
}
.vote-waiting .vw-dot {
  width: 4px; height: 4px; border-radius: 999px;
  background: var(--text-soft);
  animation: voteDots 1.4s ease-in-out infinite;
}
.vote-waiting .vw-dot:nth-child(2) { animation-delay: 0.18s; }
.vote-waiting .vw-dot:nth-child(3) { animation-delay: 0.36s; }
@keyframes voteDots {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 1; }
}
.vote-waiting strong {
  color: var(--text-on-deep);
  font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════════════
   GAME SHOW: End-game winner hero
   Gold-gradient kort med roterende solstråler, pulserende glow,
   konfetti-regn, og crown-på-jeans trofee i hjørnet.
   ═══════════════════════════════════════════════════════════════════════ */
.winner-hero {
  background: linear-gradient(160deg, var(--gold) 0%, var(--ember) 60%, var(--primary) 100%);
  border-radius: var(--radius-card);
  /* Slankere padding — match Claude Design (24x22). Tidligere 24x22x28 var litt høyt. */
  padding: 20px 22px 22px;
  color: var(--text-on-card);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.winner-hero .winner-rays {
  position: absolute;
  inset: -50%;
  opacity: 0.22;
  pointer-events: none;
  background: repeating-conic-gradient(from 0deg at 50% 50%, transparent 0deg, rgba(0, 0, 0, 0.10) 1deg, transparent 5deg, transparent 30deg);
  animation: winnerRays 40s linear infinite;
}
.winner-hero .winner-glow {
  position: absolute;
  top: 20%;
  left: 30%;
  width: 180px;
  height: 180px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.35) 0%, transparent 60%);
  animation: winnerGlow 3s ease-in-out infinite;
  pointer-events: none;
}
.winner-hero .winner-trophy {
  position: absolute;
  top: 12px;
  right: 14px;
  animation: winnerTrophyRock 2.6s ease-in-out infinite;
  transform-origin: 50% 100%;
  pointer-events: none;
}
.winner-hero .winner-trophy svg {
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
}
.winner-hero .winner-trophy .winner-crown {
  animation: winnerCrownShimmer 2s ease-in-out infinite;
  transform-origin: 50% 100%;
}
.winner-hero .winner-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(56px, 16vw, 76px);
  letter-spacing: -0.045em;
  line-height: 0.9;
  margin-top: 4px;
  color: var(--text-on-card);
}
@keyframes winnerRays {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes winnerGlow {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50%      { opacity: 0.85; transform: scale(1.08); }
}
@keyframes winnerTrophyRock {
  0%, 100% { transform: rotate(-4deg) translateY(0); }
  50%      { transform: rotate(4deg) translateY(-2px); }
}
@keyframes winnerCrownShimmer {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.5)); }
  50%      { filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.9)); }
}
@keyframes winnerConfetti {
  0%   { transform: translateY(-20px) rotate(0deg); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translateY(140px) rotate(540deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .winner-hero .winner-rays,
  .winner-hero .winner-glow,
  .winner-hero .winner-trophy,
  .winner-hero .winner-trophy .winner-crown,
  .winner-confetti { animation: none !important; }
}

/* GAME SHOW input modal — for "Add player on this phone" og lignende */
.input-modal-input-wrap {
  margin: 12px 0 18px;
  position: relative;
}
.input-modal-input {
  width: 100%;
  padding: 16px 18px;
  background: var(--surface-card-bright);
  border: 2px solid var(--border);
  border-radius: var(--radius-btn);
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 600;
  color: var(--text-on-card);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  caret-color: var(--primary);
}
.input-modal-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-glow);
}
.input-modal-input::placeholder {
  color: var(--text-muted);
  font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════════════
   GAME SHOW HOME v2 — pinned bottom CTAs, flex-spacers around hero
   ═══════════════════════════════════════════════════════════════════════ */
.screen.home-screen {
  /* Konsistent 12px gap mellom alle home-elementer (hint, club-strip, bottom-ctas).
     Tidligere 14px outer + 10px inner = visuelt ujevnt. */
  gap: 12px;
  /* Sørg for at home tar full vh så flex-spacers virker */
  min-height: calc(100vh - 80px);
  min-height: calc(100dvh - 80px);
}

/* Bottom CTA zone — pinned. Internal gap matcher outer gap for konsistens. */
.home-bottom-ctas {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
  /* Margin-top pusher denne sektionen til bunn av flex-screen */
  margin-top: auto;
}

/* Join-row: surfaceLo container med code-input + Join button */
.home-join-row {
  display: flex;
  gap: 8px;
  padding: 6px;
  background: var(--surface-lo);
  border-radius: var(--radius-btn);
  border: 1px solid rgba(255, 255, 255, 0.08);
  align-items: center;
}
.home-join-row input.code-input {
  /* Override default code-input styling for inline pill-format */
  flex: 1;
  height: 44px;
  padding: 0 14px;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 600;
  color: var(--text-on-deep);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-align: left;
  min-width: 0;
}
.home-join-row input.code-input:focus {
  /* Disable default input focus glow inside the join-row container —
     container already gives visual context, focus glow ville overflowed. */
  box-shadow: none;
}
.home-join-row input.code-input::placeholder {
  color: var(--text-faint);
  font-weight: 600;
  letter-spacing: 0.18em;
}

/* "New here? How it works →" — tiny text link */
.home-howitworks-link {
  text-align: center;
  margin-top: 4px;
  padding: 6px 0;
  font-size: 12px;
  background: transparent;
  border: none;
  font-family: inherit;
  cursor: pointer;
}
.home-howitworks-link .hwl-mute { color: var(--text-faint); }
.home-howitworks-link .hwl-strong {
  color: var(--text-on-deep);
  font-weight: 600;
}

/* "Playing as X · change ›" — tiny tekst-link på home for å endre navn uten bloat */
.playing-as-link {
  display: block;
  width: 100%;
  text-align: center;
  background: transparent;
  border: none;
  padding: 4px 0;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  color: var(--text-faint);
}
.playing-as-link .pal-mute { color: var(--text-faint); }
.playing-as-link .pal-name {
  color: var(--text-on-deep);
  font-weight: 600;
}
.playing-as-link .pal-cta {
  color: var(--text-faint);
  margin-left: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════
   GAME SHOW LOBBY v2 — compact players row + bottom actions
   ═══════════════════════════════════════════════════════════════════════ */

/* Lobby-screen tar full vertical space så bottom-actions kan pinnes */
.screen.lobby-screen {
  min-height: calc(100vh - 80px);
  min-height: calc(100dvh - 80px);
}

/* Compact avatar-row — 32px sirkler i flex-wrap */
.lobby-players-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.lobby-player-tile {
  position: relative;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.lobby-player-tile.disconnected {
  opacity: 0.4;
}
.lobby-player-tile .host-dot {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: var(--primary);
  border: 2px solid var(--surface-card);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}
@keyframes lobbyPlayerJoin {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 87, 34, 0.55); }
  50%      { box-shadow: 0 0 0 5px rgba(255, 87, 34, 0); }
}
.lobby-player-tile.just-joined-pulse {
  animation: lobbyPlayerJoin 2.4s ease-in-out infinite;
}

/* Add-shared-player inline-knapp inni players-card — dashed orange.
   På dark card: label = primary (orange), hint = text-faint (lys grå-cream). */
.add-shared-inline {
  margin-top: 12px;
  width: 100%;
  padding: 10px 14px;
  background: transparent;
  color: var(--primary);
  border: 1.5px dashed rgba(255, 87, 34, 0.45);
  border-radius: var(--radius-btn);
  font-family: inherit;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 10px;
}
.add-shared-inline:hover {
  background: rgba(255, 87, 34, 0.08);
}
.add-shared-inline .asi-icon {
  width: 22px; height: 22px;
  border-radius: 999px;
  background: rgba(255, 87, 34, 0.22);
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
}
.add-shared-inline .asi-label {
  font-weight: 700;
  color: var(--primary);
}
.add-shared-inline .asi-hint {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-faint);
  opacity: 0.85;
}

/* Bottom actions: Start primary + Settings/Leave row */
.lobby-bottom-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
}
.lobby-action-row {
  display: flex;
  gap: 10px;
}
.lobby-action-row .btn {
  flex: 1;
  /* Disable pulse on ghost buttons in this row */
  animation: none;
}
/* Inline tekst-action-rad (Game settings · Leave) — minimal, ingen panel */
.lobby-text-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 4px;
  padding: 8px 0 0;
}
.lobby-text-link {
  background: none;
  border: none;
  color: var(--text-faint);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 6px;
  transition: color 0.12s, background 0.12s;
}
.lobby-text-link:hover {
  color: var(--text-soft);
  background: rgba(255, 255, 255, 0.04);
}
.lobby-text-sep {
  color: var(--text-faint);
  opacity: 0.5;
  font-size: 13px;
}

/* Lobby bottom text-row — Game settings | Leave som tekst-links sentrert
   med passe gap (ikke spread til kantene). Match Pantsy-3 design: dempet
   tekst-soft farge, ingen border, ingen bg. */
.lobby-text-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 48px;
  padding: 8px 0 0;
}
.lobby-text-action {
  background: none;
  border: none;
  color: var(--text-soft);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.01em;
  cursor: pointer;
  padding: 8px 6px;
  border-radius: 6px;
  transition: color 0.12s;
}
.lobby-text-action:hover { color: var(--text-on-deep); }
.lobby-text-action:active { opacity: 0.6; }

/* ═══════════════════════════════════════════════════════════════════════
   Lobby Categories — round icon-circles + inline dice for auto-pick.
   Match Pantsy-3 design-screenshot: 5 valgte kategorier som 44px circles
   med fire-border, og 6. slot er en dotted grå dice-circle for auto-pick.
   ═══════════════════════════════════════════════════════════════════════ */
.cat-icon-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0;
}
.cat-icon-circle {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1.5px solid var(--primary);
  background: rgba(255, 87, 34, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  font-family: inherit;
  color: inherit;
  transition: transform 0.12s, background 0.12s;
}
.cat-icon-circle:hover { transform: translateY(-1px); }
.cat-icon-circle:active { transform: scale(0.95); }
.cat-icon-circle .cic-emoji {
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.2));
}
/* Dotted dice-circle (auto-pick) — grå, dotted border */
.cat-auto-dice {
  border: 1.5px dotted rgba(255, 255, 255, 0.36);
  background: transparent;
  color: var(--text-soft);
  filter: grayscale(0.4);
  font-size: 18px;
}
.cat-auto-dice:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.5);
}
/* Auto-pick stagger animasjon — pills fader inn én etter én */
.cat-icon-row.auto-pick-anim .cat-icon-circle:not(.cat-auto-dice) {
  animation: catIconFadeIn 0.4s ease-out both;
  animation-delay: calc(var(--i, 0) * 0.08s);
}
@keyframes catIconFadeIn {
  0%   { opacity: 0; transform: scale(0.6); }
  100% { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .cat-icon-row.auto-pick-anim .cat-icon-circle { animation: none !important; }
}

/* Install-prompt card — tappbar (trigger PWA install eller iOS-instruks-modal) */
.install-prompt-card {
  display: flex;
  align-items: stretch;
  width: 100%;
  background: linear-gradient(135deg, #FED7AA, #FEF3C7);
  color: #7C2D12;
  border: 1px solid rgba(124, 45, 18, 0.10);
  border-radius: var(--radius-card);
  padding: 14px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: transform 0.12s, box-shadow 0.12s;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}
.install-prompt-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}
.install-prompt-card:active {
  transform: scale(0.98);
}

/* ═══════════════════════════════════════════════════════════════════════
   GAME SHOW Sheet — full-screen overlay for Settings / Categories
   ═══════════════════════════════════════════════════════════════════════ */

.sheet-overlay {
  /* Full-screen takeover — bullet-proof: alltid full viewport, ingen sliver av
     underliggende screen som lekker ut i kantene. position/inset sikrer
     dekning av safe-area, background-color sikrer opacity, z-index over alt
     annet (inkludert install-prompt z:240, confirm-modal z:250). */
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  padding: 0 !important;
  background-color: var(--surface-deep) !important;
  background-image: none !important;
  /* Override default onboard-overlay backdrop blur (gir flyttig kant) */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  z-index: 260 !important;
}
/* Body lock når sheet er åpen — forhindrer scroll-bleed av underliggende skjerm */
body.sheet-open {
  overflow: hidden;
}
.sheet-modal {
  width: 100%;
  height: 100%;
  max-width: 480px;
  /* Bevisst INGEN max-height — la innholdet bestemme høyden, og la sheet-body
     scrolle hvis det blir for langt. Tidligere `max-height:100%` kunne kollapse
     på iOS Safari når 100dvh varierte med Safari-URL-baren. */
  margin: 0 auto;
  background: transparent;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  box-shadow: none;
  /* Padding-top respekterer iOS dynamic island. Padding-bottom satt til 0 —
     .sheet-body har egen safe-area-bottom-padding så scroll-content extender
     hele veien til bunnen av skjermen. */
  padding:
    calc(env(safe-area-inset-top, 0px) + 8px)
    max(12px, env(safe-area-inset-left))
    0
    max(12px, env(safe-area-inset-right));
}
.sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 8px 18px;
  flex-shrink: 0;
}
.sheet-header-text {
  min-width: 0;
}
.sheet-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 800;
  color: var(--text-faint);
  margin-bottom: 4px;
}
.sheet-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.025em;
  line-height: 1;
  color: var(--text-on-deep);
}
.sheet-done-btn {
  height: 36px;
  padding: 0 16px;
  background: transparent;
  color: var(--text-on-deep);
  border: 1px solid rgba(255, 244, 222, 0.18);
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  flex-shrink: 0;
}
.sheet-done-btn:hover {
  background: rgba(255, 244, 222, 0.06);
}
.sheet-body {
  flex: 1;
  overflow-y: auto;
  /* Padding-bottom inkluderer safe-area-inset-bottom så siste innholdet er
     ikke skjult bak iOS home-indicator. */
  padding-bottom: max(20px, env(safe-area-inset-bottom));
  -webkit-overflow-scrolling: touch;
}

/* Categories-sheet specific */
.cat-sheet-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cat-sheet-summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(255, 87, 34, 0.06);
  border: 1px solid rgba(255, 87, 34, 0.16);
  border-radius: var(--radius-btn);
}
.cat-sheet-summary .css-num {
  width: 32px; height: 32px; border-radius: 8px;
  background: rgba(255, 87, 34, 0.20);
  color: var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
}
.cat-sheet-summary .css-meta {
  flex: 1;
  min-width: 0;
}
.cat-sheet-summary .css-meta-line {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-on-deep);
  line-height: 1.2;
}
.cat-sheet-summary .css-meta-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 3px;
}
.cat-sheet-summary .css-clear-btn {
  height: 28px;
  padding: 0 12px;
  background: transparent;
  color: var(--text-muted);
  border: 1px solid rgba(255, 244, 222, 0.14);
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-weight: 500;
  font-size: 11px;
  cursor: pointer;
  flex-shrink: 0;
}

/* Smart auto-pick card */
.cat-sheet-autopick {
  width: 100%;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(255, 210, 74, 0.10) 0%, rgba(255, 87, 34, 0.06) 100%);
  border: 1.5px dashed rgba(255, 210, 74, 0.45);
  border-radius: var(--radius-btn);
  color: var(--text-on-deep);
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: inherit;
}
.cat-sheet-autopick .csa-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: rgba(255, 210, 74, 0.20);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}
.cat-sheet-autopick .csa-body {
  flex: 1;
  min-width: 0;
}
.cat-sheet-autopick .csa-title {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--text-on-deep);
}
.cat-sheet-autopick .csa-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
  line-height: 1.4;
}
.cat-sheet-autopick .csa-arrow {
  color: var(--gold);
  font-size: 18px;
  font-weight: 600;
  flex-shrink: 0;
}

.cat-sheet-section {
  /* Section divider/wrapper */
}

/* ═══════════════════════════════════════════════════════════════════════
   GAME SHOW screen 03/04/05/06 — separat outer-eyebrow + card + CTA
   ═══════════════════════════════════════════════════════════════════════ */

/* Reveal-screen layout: eyebrow over card, card fills middle, CTA pinned bottom.
   Matcher Claude Designs PhoneScreen-rytme: padding 8px 20px på eyebrow,
   14px 20px på card-wrap, 0 20px 24px på CTA. */
.screen.reveal-screen {
  gap: 14px;
  min-height: calc(100vh - 80px);
  min-height: calc(100dvh - 80px);
}
.reveal-outer-eyebrow {
  text-align: center;
  padding: 4px 4px 0;
}

/* Handover wrapper: outer-eyebrow + card + CTA. Card NOT tappable. */
.handover-wrap {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}
.handover-outer-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 4px 0;
}
.handover-card {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.handover-diagram-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}

/* Pantsy-name flicker — text-shadow pulse på "You're Pantsy"-displayet */
@keyframes pantsyNameFlicker {
  0%, 100% { text-shadow: 0 0 0px rgba(255, 255, 255, 0); }
  50%      { text-shadow: 0 0 18px rgba(255, 255, 255, 0.18); }
}
.reveal-card.pantsy .word.pantsy-name-flicker,
.reveal-card.pantsy .pantsy-name-flicker {
  animation: pantsyNameFlicker 3.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .pantsy-name-flicker { animation: none !important; }
}

/* Pantsy reveal-card: solid pantsy-rød, override default gradient + glow */
.reveal-card.pantsy {
  background: var(--pantsy);
  color: #fff;
  border-color: var(--pantsy-hi);
}
/* Override .reveal-card::before for pantsy variant — bottom-centered heat-glow */
.reveal-card.pantsy::before {
  top: auto;
  bottom: -80px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: 280px;
  height: 280px;
  background: radial-gradient(circle, rgba(255, 180, 80, 0.40) 0%, rgba(255, 80, 40, 0.18) 40%, transparent 70%);
  animation: pantsyHeatBreathe 3.4s ease-in-out infinite;
}

/* Smarty reveal-card glow position (top-right, gold) — already in earlier CSS */

/* ═══════════════════════════════════════════════════════════════════════
   GAME SHOW: Clue turn (07) — floor card med mic + turn-order strip
   Match til Claude Design ScreenClueTurn:
     • Round indicator pill: "ROUND 1 / 2 · 🌍 Places" (mono + cat)
     • Floor card: spotlight-glow, breathing mic, "Has the floor" eyebrow,
       big display name (56px Bricolage), coaching, NEXT-strip
     • Peek-card affordance: ghost-button med 👁 + HOLD-badge
     • Bottom CTA: "Done — pass on" (primary, full width)
   ═══════════════════════════════════════════════════════════════════════ */
.clue-screen {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: calc(100dvh - 80px);
}
.clue-round-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 4px 4px 0;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-soft);
  letter-spacing: 0.12em;
}
.clue-round-indicator .cri-bullet {
  width: 4px; height: 4px; border-radius: 999px;
  background: var(--text-faint);
}
.clue-round-indicator .cri-cat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: inherit;
  font-size: 12px;
  letter-spacing: 0;
  color: var(--text-soft);
}
.clue-floor-card {
  background: linear-gradient(160deg, var(--surface-hi) 0%, var(--surface-lo) 100%);
  color: var(--text-on-deep);
  border: 1px solid rgba(255, 87, 34, 0.20);
  border-radius: var(--radius-card);
  padding: 32px 24px 28px;
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  min-height: 280px;
}
.clue-floor-card::before {
  content: "";
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 320px;
  height: 320px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 87, 34, 0.27) 0%, rgba(255, 87, 34, 0.07) 35%, transparent 65%);
  pointer-events: none;
}
.clue-mic {
  position: relative;
  width: 56px; height: 56px;
  margin: 0 auto 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; line-height: 1;
  animation: pantsy-mic-breathe 2.4s ease-in-out infinite;
  z-index: 1;
}
.clue-mic .mic-glyph {
  display: inline-flex;
  animation: pantsy-mic-glyph-bob 2.4s ease-in-out infinite;
}
@keyframes pantsy-mic-breathe {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 87, 34, 0.20); }
  50%      { transform: scale(1.05); box-shadow: 0 0 0 8px rgba(255, 87, 34, 0); }
}
@keyframes pantsy-mic-glyph-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-1.5px); }
}
@media (prefers-reduced-motion: reduce) {
  .clue-mic, .clue-mic .mic-glyph { animation: none !important; }
}
.clue-floor-eyebrow {
  position: relative;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--text-faint);
  text-transform: uppercase;
}
.clue-floor-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 56px;
  line-height: 1;
  letter-spacing: -0.035em;
  margin-top: 10px;
  position: relative;
  color: var(--text-on-deep);
  word-break: break-word;
}
.clue-floor-coach {
  position: relative;
  margin: 14px auto 0;
  max-width: 280px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-soft);
}
.clue-floor-coach strong {
  color: var(--text-on-deep);
  font-weight: 600;
}
.clue-next-strip {
  position: relative;
  margin-top: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.clue-next-strip .cns-label {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
  letter-spacing: 0.1em;
  margin-right: 4px;
}
.clue-next-strip .cns-item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.clue-next-strip .cns-item.pos-0 { opacity: 1; }
.clue-next-strip .cns-item.pos-1 { opacity: 0.75; }
.clue-next-strip .cns-item.pos-2 { opacity: 0.5; }
.clue-next-strip .cns-item.pos-3 { opacity: 0.32; }
.clue-next-strip .cns-avatar {
  width: 24px; height: 24px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0;
}
.clue-next-strip .cns-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-on-deep);
}
.clue-floor-clockwise-help {
  position: relative;
  margin: 14px auto 0;
  max-width: 280px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-faint);
}
.clue-peek-affordance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
  padding: 0 18px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-btn);
  color: var(--text-on-deep);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  width: 100%;
  margin-top: 4px;
}
.clue-peek-affordance .cpa-left {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-soft);
}
.clue-peek-affordance .cpa-left svg {
  display: block;
}
.clue-peek-affordance .cpa-hold {
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-soft);
  letter-spacing: 0.05em;
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════
   GAME SHOW: Vote screens (07b / 07c) — sentral spørsmål med ikon
   ═══════════════════════════════════════════════════════════════════════ */
.vote-screen {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: calc(100dvh - 80px);
}
.vote-question-block {
  text-align: center;
  padding: 14px 4px 8px;
}
.vote-question-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  animation: pantsy-vote-qpop 0.45s cubic-bezier(.2,.9,.3,1.2) both;
}
@keyframes pantsy-vote-qpop {
  0%   { transform: scale(0.96); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .vote-question-row { animation: none !important; }
}
.vote-question-icon {
  display: inline-block;
  flex: 0 0 auto;
  line-height: 0;
}
.vote-question-icon.ballot {
  animation: pantsy-vote-icon-tilt 2.2s ease-in-out infinite;
  transform-origin: 50% 80%;
}
.vote-question-icon.star {
  animation: pantsy-vote-star-shine 2.2s ease-in-out infinite;
}
.vote-question-icon.star > span {
  display: inline-block;
  animation: pantsy-vote-star-spin 3.2s ease-in-out infinite;
  transform-origin: 50% 50%;
}
@keyframes pantsy-vote-icon-tilt {
  0%, 100% { transform: rotate(-4deg); }
  50%      { transform: rotate(4deg); }
}
@keyframes pantsy-vote-star-shine {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(255, 210, 74, 0.5)); }
  50%      { filter: drop-shadow(0 0 8px rgba(255, 210, 74, 1)); }
}
@keyframes pantsy-vote-star-spin {
  0%   { transform: rotate(-12deg) scale(0.9); }
  50%  { transform: rotate(12deg) scale(1.05); }
  100% { transform: rotate(-12deg) scale(0.9); }
}
@media (prefers-reduced-motion: reduce) {
  .vote-question-icon.ballot,
  .vote-question-icon.star,
  .vote-question-icon.star > span { animation: none !important; }
}
.vote-question-h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 30px;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--text-on-deep);
}
.vote-question-h1.smarty {
  font-size: 28px;
}
.vote-question-help {
  margin: 8px auto 0;
  max-width: 320px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-soft);
}
/* Stagger pop-in for vote rows */
.vote-list .vote-row-anim {
  animation: pantsy-vote-qpop 0.4s cubic-bezier(.2,.9,.3,1.2) both;
}
.vote-list .vote-row-anim:nth-child(1) { animation-delay: 0s; }
.vote-list .vote-row-anim:nth-child(2) { animation-delay: 0.05s; }
.vote-list .vote-row-anim:nth-child(3) { animation-delay: 0.10s; }
.vote-list .vote-row-anim:nth-child(4) { animation-delay: 0.15s; }
.vote-list .vote-row-anim:nth-child(5) { animation-delay: 0.20s; }
.vote-list .vote-row-anim:nth-child(6) { animation-delay: 0.25s; }
.vote-list .vote-row-anim:nth-child(7) { animation-delay: 0.30s; }
.vote-list .vote-row-anim:nth-child(8) { animation-delay: 0.35s; }
@media (prefers-reduced-motion: reduce) {
  .vote-list .vote-row-anim { animation: none !important; }
}
/* Push waiting-row til bunnen av skjermen */
.vote-screen-spacer {
  flex: 1;
  min-height: 8px;
}

/* ═══════════════════════════════════════════════════════════════════════
   GAME SHOW: Result screens (08 Pantsed / 09 Escaped) — theatrical card
   med blazing flame (caught) eller strutting jeans (escaped), stamp-overlay,
   "Real word was X" footer, best-clue gold pill, vote breakdown.
   ═══════════════════════════════════════════════════════════════════════ */
.result-screen {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: calc(100dvh - 80px);
}
.result-card {
  position: relative;
  background: linear-gradient(135deg, var(--surface-mid) 0%, var(--surface-deep) 100%);
  border: 1px solid rgba(255, 23, 68, 0.27);
  border-radius: var(--radius-card);
  padding: 28px 24px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  min-height: 160px;
}
/* Radial fire glow — top-right hjørne */
.result-card::before {
  content: "";
  position: absolute;
  top: -60px;
  right: -60px;
  width: 240px;
  height: 240px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 23, 68, 0.47) 0%, rgba(255, 87, 34, 0.20) 35%, transparent 70%);
  pointer-events: none;
}
.result-card.escaped::before {
  background: radial-gradient(circle, rgba(255, 23, 68, 0.33) 0%, rgba(255, 87, 34, 0.13) 35%, transparent 70%);
}
.result-card-eyebrow {
  position: relative;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pantsy-hi);
  font-weight: 700;
}
.result-card-headline {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.result-card-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 52px;
  letter-spacing: -0.04em;
  line-height: 0.95;
  color: var(--text-on-deep);
  word-break: break-word;
}
.result-stamp {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.18em;
  color: var(--pantsy-hi);
  border: 2.5px solid var(--pantsy-hi);
  border-radius: 4px;
  padding: 4px 10px;
  align-self: flex-start;
  margin-top: 6px;
  box-shadow: inset 0 0 0 1px rgba(255, 23, 68, 0.13);
  animation: pantsy-stamp-thump 0.45s cubic-bezier(.2,.9,.3,1.4) both;
}
.result-stamp.caught {
  transform: rotate(-8deg);
}
.result-stamp.escaped {
  transform: rotate(6deg);
  letter-spacing: 0.14em;
  font-size: 13px;
  background: rgba(255, 23, 68, 0.07);
  box-shadow: inset 0 0 0 1px rgba(255, 23, 68, 0.13), 0 0 14px rgba(255, 23, 68, 0.33);
}
@keyframes pantsy-stamp-thump {
  0%   { transform: rotate(-8deg) scale(1.3); opacity: 0; }
  55%  { transform: rotate(-12deg) scale(0.92); opacity: 1; }
  100% { transform: rotate(-8deg) scale(1); opacity: 1; }
}
.result-stamp.escaped {
  animation: pantsy-stamp-thump-2 0.45s cubic-bezier(.2,.9,.3,1.4) both;
}
@keyframes pantsy-stamp-thump-2 {
  0%   { transform: rotate(6deg) scale(1.3); opacity: 0; }
  55%  { transform: rotate(2deg) scale(0.92); opacity: 1; }
  100% { transform: rotate(6deg) scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .result-stamp { animation: none !important; }
}
.result-card-footer {
  margin-top: 14px;
  position: relative;
  font-size: 13px;
  color: var(--text-soft);
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.result-card-footer .rcf-word {
  color: var(--cream, #FFF4DE);
  font-weight: 700;
  font-size: 15px;
  font-family: var(--font-display);
  letter-spacing: -0.01em;
}
.result-card-footer .rcf-faint {
  color: var(--text-faint);
}
/* Caught: blazing flame som strutter på toppen-høyre */
.result-flame-strut {
  position: absolute;
  top: 14px;
  right: 18px;
  width: 70px;
  height: 96px;
  pointer-events: none;
  transform-origin: 50% 100%;
  animation: pantsy-flame-strut 1.6s ease-in-out infinite;
}
.result-flame-strut svg {
  filter: drop-shadow(0 0 14px rgba(255, 87, 34, 1));
  animation: pantsy-flame-blaze 0.6s ease-in-out infinite;
  transform-origin: 50% 100%;
}
@keyframes pantsy-flame-strut {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-6px) rotate(4deg); }
}
@keyframes pantsy-flame-blaze {
  0%, 100% { transform: scaleY(1) scaleX(1); opacity: 1; }
  33%      { transform: scaleY(1.08) scaleX(0.96); opacity: 0.92; }
  66%      { transform: scaleY(0.95) scaleX(1.04); opacity: 1; }
}
@keyframes pantsy-ember-rise {
  0%   { transform: translateY(20px) scale(0.6); opacity: 0; }
  20%  { opacity: 1; }
  100% { transform: translateY(-120px) scale(1); opacity: 0; }
}
.result-ember {
  position: absolute;
  width: 3px; height: 5px; border-radius: 2px;
  pointer-events: none;
  animation-name: pantsy-ember-rise;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
  opacity: 0;
}
/* Escaped: strutting jeans + dust puffs */
.result-jeans-strut {
  position: absolute;
  top: 14px;
  right: 18px;
  width: 70px;
  height: 96px;
  pointer-events: none;
  transform-origin: 50% 100%;
  animation: pantsy-jeans-walk 0.9s ease-in-out infinite;
}
.result-jeans-strut > div {
  width: 100%; height: 100%;
  transform-origin: 50% 100%;
  animation: pantsy-jeans-squash 0.9s ease-in-out infinite;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.5));
}
@keyframes pantsy-jeans-walk {
  0%   { transform: rotate(-3deg); }
  50%  { transform: rotate(3deg); }
  100% { transform: rotate(-3deg); }
}
@keyframes pantsy-jeans-squash {
  0%, 100% { transform: translateY(0) scaleY(1) scaleX(1); }
  25%      { transform: translateY(-3px) scaleY(1.03) scaleX(0.98); }
  50%      { transform: translateY(0) scaleY(0.97) scaleX(1.02); }
  75%      { transform: translateY(-3px) scaleY(1.03) scaleX(0.98); }
}
@keyframes pantsy-dust-puff {
  0%   { transform: translate(0, 0) scale(0.4); opacity: 0; }
  15%  { opacity: 0.7; }
  100% { transform: translate(-32px, -10px) scale(1.4); opacity: 0; }
}
.result-dust {
  position: absolute;
  width: 10px; height: 10px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 244, 222, 0.4) 0%, rgba(255, 244, 222, 0.13) 50%, transparent 75%);
  pointer-events: none;
  filter: blur(0.5px);
  opacity: 0;
  animation-name: pantsy-dust-puff;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
}
@media (prefers-reduced-motion: reduce) {
  .result-flame-strut, .result-flame-strut svg,
  .result-jeans-strut, .result-jeans-strut > div,
  .result-ember, .result-dust { animation: none !important; }
}

/* +30 Pantsy reward pill (escaped only) — gold gradient */
.result-pantsy-reward {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--gold) 100%);
  color: var(--ink);
  border-radius: var(--radius-card);
  position: relative;
  overflow: hidden;
}
.result-pantsy-reward .rpr-emoji {
  font-size: 30px;
  line-height: 1;
}
.result-pantsy-reward .rpr-meta {
  flex: 1;
  min-width: 0;
}
.result-pantsy-reward .rpr-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.7;
  font-weight: 700;
}
.result-pantsy-reward .rpr-text {
  font-weight: 700;
  font-size: 15px;
  margin-top: 3px;
  color: var(--ink);
}
.result-pantsy-reward .rpr-delta {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  color: var(--ink);
}

/* Best-clue gold pill (compact) — vises både for caught og escaped */
.result-best-clue-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(135deg, var(--gold) 0%, var(--ember) 100%);
  color: var(--ink);
  border-radius: var(--radius-card);
}
.result-best-clue-pill .rbc-star {
  font-size: 20px;
  line-height: 1;
}
.result-best-clue-pill .rbc-meta {
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}
.result-best-clue-pill .rbc-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.75;
  font-weight: 700;
}
.result-best-clue-pill .rbc-name {
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
}
.result-best-clue-pill .rbc-delta {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  color: var(--ink);
}

/* Vote breakdown rows — tight 6-rader fits comfortably */
.result-votes-block {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.result-votes-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 700;
  padding-left: 4px;
  margin-bottom: 8px;
}
.result-vote-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-radius: var(--radius-btn);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.result-vote-row:last-child { border-bottom: none; }
.result-vote-row.is-pantsy {
  background: rgba(255, 87, 34, 0.10);
}
.result-vote-row .rvr-avatar {
  width: 22px; height: 22px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800;
  font-family: var(--font-display);
}
.result-vote-row .rvr-name {
  flex: 1;
  font-weight: 600;
  font-size: 13px;
  color: var(--text-on-deep);
}
.result-vote-row .rvr-target {
  font-size: 12px;
  color: var(--text-soft);
}
.result-vote-row .rvr-target strong {
  color: var(--text-on-deep);
  font-weight: 600;
}
.result-vote-row .rvr-delta {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 12px;
  min-width: 48px;
  text-align: right;
  color: var(--pantsy-hi);
}
.result-vote-row .rvr-delta.correct { color: #7CD992; }
.result-vote-row .rvr-delta.escaped-correct { color: var(--gold); }
.result-vote-row .rvr-delta.is-pantsy { color: var(--primary); }

/* Bottom CTA-row — Next round + End game */
.result-bottom-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: max(20px, env(safe-area-inset-bottom));
}

/* ═══════════════════════════════════════════════════════════════════════
   GAME SHOW: Achievement toast (10) — gold-bordered medal toast
   Drops from top, sparkles, medal SVG pop-in, +XP/next-tier hint.
   ═══════════════════════════════════════════════════════════════════════ */
.ach-overlay-v2 {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: max(80px, env(safe-area-inset-top, 0px) + 60px) 20px 0;
  z-index: 270;
  pointer-events: auto;
  background: rgba(15, 4, 24, 0.55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  animation: pantsy-ach-overlay-fade 0.3s ease-out;
}
@keyframes pantsy-ach-overlay-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.ach-toast-v2 {
  position: relative;
  width: 100%;
  max-width: 380px;
  background: linear-gradient(160deg, #2A1F38 0%, #1A0F23 100%);
  border-radius: 22px;
  border: 1.5px solid var(--gold);
  padding: 20px 22px 18px;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.55),
    0 0 40px rgba(255, 210, 74, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  overflow: hidden;
  color: var(--text-on-deep);
  animation: pantsy-toast-drop 0.5s cubic-bezier(.2,.9,.3,1.4) both;
}
@keyframes pantsy-toast-drop {
  0%   { transform: translateY(-120%); opacity: 0; }
  70%  { transform: translateY(8px); opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}
@keyframes pantsy-medal-pop {
  0%   { transform: scale(0) rotate(-30deg); }
  55%  { transform: scale(1.15) rotate(8deg); }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes pantsy-spark {
  0%, 100% { opacity: 0; transform: scale(0.5); }
  50%      { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .ach-toast-v2,
  .ach-toast-v2 .ach-medal,
  .ach-toast-v2 .ach-spark { animation: none !important; }
}
.ach-toast-v2 .ach-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 12px;
  position: relative;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--gold);
}
.ach-toast-v2 .ach-medal-wrap {
  position: relative;
  display: flex;
  justify-content: center;
  margin: 6px 0 14px;
}
.ach-toast-v2 .ach-medal {
  animation: pantsy-medal-pop 0.6s cubic-bezier(.2,.9,.3,1.4) both;
  animation-delay: 0.15s;
  line-height: 0;
}
.ach-toast-v2 .ach-spark {
  position: absolute;
  border-radius: 999px;
  background: var(--gold);
  box-shadow: 0 0 8px var(--gold);
  animation: pantsy-spark 1.4s ease-in-out infinite;
}
.ach-toast-v2 .ach-title-v2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.025em;
  color: var(--text-on-deep);
  line-height: 1.1;
  text-align: center;
  position: relative;
}
.ach-toast-v2 .ach-desc-v2 {
  margin: 8px auto 0;
  max-width: 240px;
  font-size: 13px;
  color: var(--text-soft);
  line-height: 1.4;
  text-align: center;
  position: relative;
}
.ach-toast-v2 .ach-progress {
  margin-top: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  position: relative;
}
.ach-toast-v2 .ach-progress .ap-meta {
  flex: 1;
  font-size: 11px;
  color: var(--text-faint);
  letter-spacing: 0.04em;
}
.ach-toast-v2 .ach-progress .ap-meta .ap-xp {
  color: var(--gold);
  font-weight: 600;
}
.ach-toast-v2 .ach-progress .ap-tap {
  font-size: 10px;
  color: var(--text-faint);
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
}

/* ═══════════════════════════════════════════════════════════════════════
   GAME SHOW: Rules-modal (02a) — first-time onboarding + how-it-works
   Cream card med app-ikon, tittel, optional name-input, body, scoring,
   primær CTA. Match til Claude Design ScreenRules.
   ═══════════════════════════════════════════════════════════════════════ */
.rules-modal-card {
  background: #FFFFFF !important;
  color: var(--ink) !important;
  border-radius: 24px !important;
  padding: 24px 22px 16px !important;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45) !important;
  max-width: 380px !important;
  max-height: 88dvh;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
  overflow-y: auto;
}
.rules-modal-icon {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 4px;
  margin-bottom: 4px;
  line-height: 0;
  height: 60px;
}
.rules-modal-title {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: -0.025em;
  line-height: 1.05;
  color: var(--ink);
  text-align: center;
}
.rules-modal-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.45;
  padding: 0 2px;
}
.rules-modal-body p {
  margin: 0;
}
.rules-modal-scoring {
  margin-top: 4px;
  background: #FBEFD9;
  border: 1px solid rgba(255, 210, 74, 0.20);
  border-radius: 14px;
  padding: 12px 14px;
}
.rules-modal-scoring .rms-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  color: var(--pantsy);
  letter-spacing: -0.01em;
  margin-bottom: 4px;
  text-transform: none;
}
.rules-modal-scoring .rms-details {
  font-size: 13px;
  color: #5A2818;
  line-height: 1.45;
}
.rules-modal-cta {
  margin-top: 6px;
  min-height: 52px;
  width: 100%;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  border-radius: 14px;
}
/* Name-prompt seksjon på 02a Rules — Pantsy-3 redesign:
   "FIRST, WHO ARE YOU?"-eyebrow + "Pick a name"-h1 + cream input med caret +
   microcopy + horisontal divider. Vises kun first-time (needsName=true). */
.rules-name-eyebrow {
  text-align: center;
  margin-top: 4px;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--primary);
}
.rules-name-h1 {
  text-align: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1.1;
  margin-bottom: 12px;
}
.rules-name-input-wrap {
  position: relative;
  margin-bottom: 6px;
}
.rules-name-input {
  width: 100%;
  padding: 14px 16px;
  background: #FFF8E6;
  border: 1.5px solid rgba(255, 87, 34, 0.33);
  border-radius: 14px;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.rules-name-input::placeholder {
  color: rgba(15, 8, 20, 0.32);
  font-style: italic;
  font-weight: 500;
}
.rules-name-input:focus {
  border-color: var(--primary);
  background: #FFF1D8;
}
.rules-name-microcopy {
  text-align: center;
  font-size: 11.5px;
  font-style: italic;
  color: var(--ink-soft);
  margin-bottom: 16px;
}
.rules-name-divider {
  height: 1px;
  background: rgba(15, 8, 20, 0.08);
  margin: 0 -22px 16px;
}
/* Body title: smaller når name-prompt er over (Pantsy-3 design: 20px vs 26px) */
.rules-modal-title-with-name {
  font-size: 20px !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 12px !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   02b Categories picker — REDESIGN match Claude Design
   ═══════════════════════════════════════════════════════════════════════
   Full-screen sheet med stats banner, search, filter pills, auto-pick,
   2-kol cream cat-cards med icon-tile/check-badge/spicy-badge/new-badge,
   custom-section med shared-with-club-tag, og dotted "Build a new" card.
   Dark surface-deep bakgrunn (sheet-overlay leverer det). */

.cat-pick-body {
  /* Strammere gap enn standard cat-sheet-body siden vi har flere seksjoner */
  gap: 14px;
}

/* ── Stats banner (top: count + words + games estimate + Clear) ────── */
.cat-pick-stats {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(255, 87, 34, 0.08);
  border: 1px solid rgba(255, 87, 34, 0.20);
  border-radius: var(--radius-btn);
}
.cat-pick-stats .cps-chip {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 87, 34, 0.22);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  flex-shrink: 0;
}
.cat-pick-stats .cps-meta {
  flex: 1;
  min-width: 0;
}
.cat-pick-stats .cps-meta-line {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-on-deep);
  line-height: 1.2;
  letter-spacing: -0.005em;
}
.cat-pick-stats .cps-meta-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 3px;
  line-height: 1.35;
}
.cat-pick-stats .cps-clear-btn {
  height: 30px;
  padding: 0 14px;
  background: transparent;
  color: var(--text-soft);
  border: 1px solid rgba(255, 244, 222, 0.18);
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
  flex-shrink: 0;
}
.cat-pick-stats .cps-clear-btn:hover {
  background: rgba(255, 255, 255, 0.04);
}

/* (Search bar + filter pills CSS fjernet — features ble droppet fordi
    de ikke ga verdi med ~12 kategorier.) */

/* ── Section row (eyebrow left + tag right) ────────────────────────── */
.cat-pick-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cat-pick-section-eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  color: var(--text-faint);
  text-transform: uppercase;
}
.cat-pick-section-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.cat-pick-shared-tag {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.10em;
  color: var(--gold);
  background: rgba(255, 210, 74, 0.10);
  border: 1px solid rgba(255, 210, 74, 0.25);
  padding: 4px 8px;
  border-radius: 6px;
  text-transform: uppercase;
}

/* ── Cat-card grid (2-col cream cards) ────────────────────────────── */
.cat-pick-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

/* Single cat-card. To distinkte tilstander:
     - SELECTED  → cream-fill bakgrunn (FFF6E0), mørk tekst, vert-centered check
     - UNSELECTED → dark transparent bakgrunn, lys tekst, outlined check
   Emoji-en sitter DIREKTE på card-bakgrunnen (ingen container-tile bak).
   Layout er flatere/widere enn høy for å matche design 2.
   min-width:0 på grid-item så cards alltid blir like brede uansett tekst-lengde. */
.cat-pick-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  padding-right: 36px; /* plass til check-badge */
  background: rgba(255, 244, 222, 0.04);
  color: var(--text-on-deep, #FFF6E0);
  border: 1px solid rgba(255, 244, 222, 0.10);
  border-radius: 14px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  min-height: 56px;
  min-width: 0; /* tving 1fr-track-bredde uansett text-content */
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.12s ease, color 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.cat-pick-card:hover {
  background: rgba(255, 244, 222, 0.06);
  border-color: rgba(255, 244, 222, 0.16);
}
.cat-pick-card:active {
  transform: scale(0.985);
}

/* SELECTED: full cream-fill, dark tekst, lyst icon-tile-bakgrunn. */
.cat-pick-card.selected {
  background: var(--surface-card, #FFF6E0);
  color: var(--text-on-card, #2A1424);
  border-color: transparent;
}
.cat-pick-card.selected:hover {
  background: var(--surface-card, #FFF6E0);
}

.cat-pick-card.locked {
  opacity: 0.45;
  cursor: not-allowed;
}
.cat-pick-card.locked .cpc-icon-tile {
  filter: grayscale(0.35);
}

/* Icon "tile" — INGEN bakgrunn. Bare en flex-container med fast bredde slik
   at emojien sitter rolig venstrejustert uavhengig av om kategori-navn er
   1 eller 2 ord. Emojien er det visuelle ankret. */
.cpc-icon-tile {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
  background: transparent;
}
.cpc-icon-emoji {
  font-size: 22px;
  line-height: 1;
}

.cpc-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.cpc-name {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.005em;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cpc-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  font-size: 11px;
  color: inherit;
  opacity: 0.65;
  font-family: var(--font-mono);
  font-weight: 500;
  line-height: 1.2;
}
.cat-pick-card.selected .cpc-meta {
  opacity: 0.75;
  color: var(--ink-soft, #5C4033);
}
.cpc-words { white-space: nowrap; }
.cpc-author { white-space: nowrap; opacity: 0.75; }

/* Check badge: vertikalt sentrert på høyre side (matcher Claude Design 2).
     - UNSELECTED: subtle outlined sirkel
     - SELECTED  : filled orange med ✓ */
.cpc-check {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  background: transparent;
  border: 1.5px solid rgba(255, 244, 222, 0.22);
  color: transparent;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.cat-pick-card.selected .cpc-check {
  border-color: transparent;
}
.cat-pick-card.selected .cpc-check,
.cpc-check.filled {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}
.cat-pick-card.spicy.selected .cpc-check {
  background: var(--pantsy);
  border-color: var(--pantsy);
}

/* Spicy badge inline i meta-row */
.cpc-spicy-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: rgba(255, 23, 68, 0.14);
  color: var(--pantsy);
  border: 1px solid rgba(255, 23, 68, 0.25);
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.cpc-spicy-flame { font-family: inherit; font-size: 10px; }

/* NEW badge — vertikalt sentrert, like til venstre for check-sirkelen.
   Matcher Claude Design 2 hvor NEW-pill sitter mid-card på høyre side. */
.cpc-new-badge {
  position: absolute;
  top: 50%;
  right: 42px;
  transform: translateY(-50%);
  background: var(--pantsy);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 3px 7px;
  border-radius: 999px;
  text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(255, 23, 68, 0.30);
}

/* ── Build a new category card (full-width, dotted) ───────────────── */
.cat-pick-build {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 16px;
  background: transparent;
  border: 1.5px dashed rgba(255, 244, 222, 0.22);
  border-radius: 14px;
  color: var(--text-on-deep);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.cat-pick-build:hover {
  border-color: rgba(255, 87, 34, 0.45);
  background: rgba(255, 87, 34, 0.04);
}
.cat-pick-build .cpb-plus {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 244, 222, 0.06);
  border: 1px solid rgba(255, 244, 222, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  font-weight: 300;
  color: var(--text-soft);
  flex-shrink: 0;
}
.cat-pick-build .cpb-body {
  flex: 1;
  min-width: 0;
}
.cat-pick-build .cpb-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--text-on-deep);
  line-height: 1.2;
}
.cat-pick-build .cpb-hint {
  font-size: 11.5px;
  color: var(--text-muted);
  margin-top: 3px;
  line-height: 1.35;
}

/* ═══════════════════════════════════════════════════════════════════════
   Build category sheet — full-screen tabbed sheet (AI ↔ Manuell)
   ═══════════════════════════════════════════════════════════════════════ */

/* Sheet-modal med pinned footer-rad: body scroller, footer står stille. */
.sheet-modal-with-footer {
  display: flex;
  flex-direction: column;
}
.sheet-modal-with-footer .sheet-body {
  flex: 1;
  overflow-y: auto;
}
.sheet-footer {
  border-top: 1px solid rgba(255, 244, 222, 0.08);
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0));
  background: var(--surface-deep);
  flex-shrink: 0;
}

.build-sheet-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ── Segmented tab control (AI generate / Type my own) ─────────── */
.build-tab-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 5px;
  background: rgba(255, 244, 222, 0.04);
  border: 1px solid rgba(255, 244, 222, 0.10);
  border-radius: var(--radius-pill);
}
.build-tab {
  background: transparent;
  border: none;
  color: var(--text-soft);
  font-family: inherit;
  font-weight: 600;
  font-size: 13.5px;
  padding: 9px 12px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.build-tab:hover {
  color: var(--text-on-deep);
}
.build-tab.active {
  background: var(--surface-card, #FFF6E0);
  color: var(--text-on-card, #2A1424);
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.20);
}

/* ── Name field with emoji avatar ──────────────────────────────── */
.build-name-field {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(255, 244, 222, 0.04);
  border: 1px solid rgba(255, 244, 222, 0.10);
  border-radius: 14px;
}
.build-emoji-avatar {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(255, 244, 222, 0.06);
  border: 1px solid rgba(255, 244, 222, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  font-family: inherit;
}
.build-emoji-avatar:hover {
  background: rgba(255, 244, 222, 0.10);
}
.build-name-input-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.build-name-eyebrow {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text-faint);
  text-transform: uppercase;
}
.build-name-input {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-on-deep);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.005em;
  padding: 0;
  width: 100%;
}
.build-name-input::placeholder {
  color: var(--text-faint);
  font-weight: 600;
}

/* ── AI mode body ─────────────────────────────────────────────── */
.build-ai-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.build-ai-pending {
  text-align: center;
  padding: 16px 12px;
  background: rgba(255, 210, 74, 0.06);
  border: 1px dashed rgba(255, 210, 74, 0.32);
  border-radius: 12px;
}
.build-ai-pending-emoji {
  font-size: 28px;
  margin-bottom: 6px;
  animation: aiSparkle 1.2s ease-in-out infinite;
}
@keyframes aiSparkle {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.15); opacity: 0.7; }
}
.build-ai-pending-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--gold);
  margin-bottom: 3px;
}
.build-ai-pending-sub {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
}

.build-ai-desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-soft);
  padding: 0 2px;
}

/* Eksempler-blokk */
.build-examples {
  background: rgba(255, 244, 222, 0.03);
  border: 1px solid rgba(255, 244, 222, 0.08);
  border-radius: 12px;
  padding: 10px 4px 10px 4px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.build-examples-eyebrow {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text-faint);
  text-transform: uppercase;
  padding: 4px 12px 6px;
}
.build-example-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: transparent;
  border: none;
  color: var(--text-on-deep);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  border-radius: 8px;
  transition: background 0.10s;
}
.build-example-row:hover {
  background: rgba(255, 244, 222, 0.05);
}
.build-example-row .be-icon {
  font-size: 16px;
  width: 22px;
  text-align: center;
  flex-shrink: 0;
}
.build-example-row .be-text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Beskriv-input-blokk */
.build-describe-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.build-describe-eyebrow {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text-faint);
  text-transform: uppercase;
}
.build-describe-input {
  width: 100%;
  background: rgba(255, 244, 222, 0.04);
  border: 1px solid rgba(255, 244, 222, 0.12);
  border-radius: 12px;
  padding: 12px 14px;
  color: var(--text-on-deep);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  outline: none;
  transition: border-color 0.12s, background 0.12s;
}
.build-describe-input::placeholder {
  color: var(--text-faint);
  font-style: italic;
}
.build-describe-input:focus {
  border-color: rgba(255, 87, 34, 0.40);
  background: rgba(255, 87, 34, 0.04);
}

/* ── Manual mode body ──────────────────────────────────────────── */
.build-manual-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.build-words-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px;
}
.build-words-eyebrow {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text-faint);
  text-transform: uppercase;
}
.build-words-count {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--primary);
  text-transform: uppercase;
}
.build-words-list {
  display: flex;
  flex-direction: column;
  background: rgba(255, 244, 222, 0.03);
  border: 1px solid rgba(255, 244, 222, 0.08);
  border-radius: 12px;
  overflow: hidden;
}
.build-word-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  border-bottom: 1px solid rgba(255, 244, 222, 0.05);
}
.build-word-row:last-child { border-bottom: none; }
.bw-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text-faint);
  width: 22px;
  flex-shrink: 0;
  letter-spacing: 0.04em;
}
.bw-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--text-on-deep);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  padding: 4px 0;
}
.bw-input::placeholder {
  color: var(--text-faint);
  font-style: italic;
  font-weight: 400;
}

/* ── Footer (Cancel + primary CTA) ────────────────────────────── */
.build-cta-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.build-cancel-btn {
  flex-shrink: 0;
  padding: 14px 22px;
  background: transparent;
  color: var(--text-soft);
  border: 1px solid rgba(255, 244, 222, 0.18);
  border-radius: var(--radius-pill);
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}
.build-cancel-btn:hover {
  background: rgba(255, 255, 255, 0.04);
}
.build-primary-btn {
  flex: 1;
  min-height: 50px;
  border-radius: var(--radius-pill) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}
.build-primary-btn.is-pending {
  opacity: 0.7;
  pointer-events: none;
}