/* ============================================================================
   firou — web join client (v1) — styled to match the iOS app 1:1.
   Tokens, fonts, components extracted from the app's SwiftUI source:
   bg #1B1B1B + bottom vignette, DM Serif Display + Inter Tight,
   #262626 pill buttons w/ white@0.3 stroke, gameRed #CB2E2E accent (NHIE),
   horned-oval avatars, decorative card border art, red question card.
   ============================================================================ */

:root {
  --bg1: #1B1B1B;   /* page background          */
  --bg2: #131313;   /* card / field fill        */
  --bg3: #222222;   /* code circles / surfaces  */
  --btn: #262626;   /* neutral button fill      */
  --stroke: rgba(255,255,255,0.30);
  --accent: #CB2E2E;      /* gameRed — NHIE accent */
  --txt: #FFFFFF;
  --txt2: rgba(255,255,255,0.70);
  --txt3: rgba(255,255,255,0.50);
  --never: #FF3B30;       /* system red  */
  --have:  #34C759;       /* system green */
  --ready: #2A9D8F;       /* teal-green "ready" word */
  --serif: 'DM Serif Display', Georgia, serif;
  --sans: 'Inter Tight', 'Inter', -apple-system, sans-serif;
  /* player palette — exact order from ColorSystem.playerColors */
  --p0:#CB2E2E; --p1:#F8D33A; --p2:#7F3DDB; --p3:#FE7E1B; --p4:#59A7F8;
  --p5:#65C366; --p6:#EF89C4; --p7:#D35583; --p8:#B58EE4;
}

/* App background: flat #1B1B1B with big soft brand-colored glow circles + bottom vignette */
body {
  background: var(--bg1) !important;
  background-image: none !important;
  font-family: var(--sans);
  font-weight: 400;
}
/* subtle ambient color (toned down, ~app welcome 5-15% opacity) */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(circle 720px at 10% 12%, rgba(203,46,46,0.10) 0%, transparent 60%),
    radial-gradient(circle 740px at 92% 10%, rgba(127,61,219,0.09) 0%, transparent 60%),
    radial-gradient(circle 780px at 90% 90%, rgba(81,86,224,0.09) 0%, transparent 60%),
    radial-gradient(circle 700px at 8% 92%, rgba(211,85,131,0.08) 0%, transparent 60%);
}
/* the app's BackgroundView — 3 stacked SOLID black ellipses (hard edges, so the
   ellipse shapes are visible) pooling dark at the bottom, lightest highest */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 80vw 45vh at 50% 100%, rgba(0,0,0,0.42) 99%, transparent 100%),
    radial-gradient(ellipse 80vw 45vh at 50% 92%,  rgba(0,0,0,0.30) 99%, transparent 100%),
    radial-gradient(ellipse 80vw 45vh at 50% 84%,  rgba(0,0,0,0.20) 99%, transparent 100%);
}

.join-main {
  position: relative; z-index: 1;
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 5.5rem 1.1rem 2rem;
}
.join-shell { width: 100%; max-width: 460px; }

.screen { display: none; animation: jf 0.35s ease both; }
.screen.active { display: block; }
@keyframes jf { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------- shared bits ---------- */
/* Back-to-home arrow in the join-page navbar (left-aligned) */
.nav-back {
  color: var(--txt2); text-decoration: none;
  font-size: 1.5rem; line-height: 1; padding: 0 0.25rem;
  transition: color 0.2s;
}
.nav-back:hover { color: var(--txt); }

.serif { font-family: var(--serif); font-weight: 400; }
.back-btn, .close-btn {
  position: absolute; top: 1rem; left: 1.1rem;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(38,38,38,0.6); border: none; color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  font-size: 20px; z-index: 5;
}
.field-error {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  min-height: 1.2rem; margin-top: 0.9rem; color: var(--never);
  font-size: 14px; opacity: 0; transition: opacity .2s;
}
.field-error::before { content: "⚠"; font-size: 14px; }
.field-error.visible { opacity: 1; }

/* Primary pill button (200x56, r28 continuous, InterTight-SemiBold 18) */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 56px; min-width: 200px; padding: 0 1.5rem;
  border: 1px solid var(--stroke); border-radius: 28px;
  font-family: var(--sans); font-weight: 600; font-size: 18px; color: #fff;
  background: var(--btn); cursor: pointer; text-transform: lowercase;
  transition: transform .18s ease, opacity .2s ease, background .2s ease;
}
.pill:hover { transform: scale(1.02); }
.pill:active { transform: scale(0.96); opacity: .85; }
.pill.accent { background: var(--accent); }
.pill[disabled], .pill.busy { opacity: .6; pointer-events: none; }
.btn-row { display: flex; justify-content: center; margin-top: 1.5rem; }

/* ======================================================================
   CODE INPUT — Round-2 "join the party" (left header + 3 digit-pair circles)
   ====================================================================== */
#screen-code.active { display: flex; flex-direction: column; min-height: 64vh; }
.cheader { text-align: left; }
.ctitle { display: flex; align-items: center; gap: 10px; }
.ctitle h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(28px, 9vw, 34px); white-space: nowrap; }
.ctitle .ticket { font-size: clamp(24px, 8vw, 30px); line-height: 1; }
.csub {
  font-family: var(--sans); font-weight: 600; font-size: 13px;
  letter-spacing: 0.5px; text-transform: uppercase; color: var(--txt3); margin-top: 10px;
}
.code-circles {
  position: relative; display: flex; gap: 16px; justify-content: center;
  margin: auto 0; padding: 8px 0;
}
.ccircle {
  width: clamp(64px, 22vw, 88px); height: clamp(64px, 22vw, 88px);
  border-radius: 50%; background: var(--bg3);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 8vw, 34px);
  color: rgba(255,255,255,0.225); user-select: none; transition: color 0.18s ease-in-out;
}
.ccircle.filled { color: #fff; }
.code-circles.error .ccircle { color: var(--never); }
.code-circles input {
  position: absolute; inset: 0; opacity: 0; border: none; background: none;
  width: 100%; height: 100%; cursor: text; font-size: 16px; /* avoid iOS zoom */
}
.code-bottom { margin-top: auto; }
.code-join { background: var(--btn); opacity: 0.6; }
.code-join.ready { background: #454545; opacity: 1; }

/* ======================================================================
   NAME INPUT
   ====================================================================== */
.nav-bar {
  position: relative; height: 44px; display: flex; align-items: center;
  justify-content: center; margin-bottom: 1.5rem;
}
.nav-bar h1 { font-family: var(--serif); font-weight: 400; font-size: 32px; }
.field-label { font-family: var(--serif); font-weight: 400; font-size: 24px; margin-bottom: 12px; }
.text-field {
  width: 100%; padding: 16px 20px; border-radius: 25px; border: none;
  background: var(--bg2); color: #fff;
  font-family: var(--sans); font-weight: 400; font-size: 20px;
}
.text-field::placeholder { color: rgba(255,255,255,0.4); }
.text-field:focus { outline: none; box-shadow: 0 0 0 2px rgba(203,46,46,0.4); }

/* ======================================================================
   LOBBY
   ====================================================================== */
.lobby-top { padding-top: 0.5rem; }
.game-name-row {
  display: flex; align-items: center; gap: 14px; margin: 0 0 12px;
}
.game-name-row .rule { flex: 1; height: 1px; background: rgba(203,46,46,0.5); }
.game-name-row .gname {
  font-family: var(--serif); font-weight: 400; font-size: 24px; color: var(--accent);
  text-transform: lowercase; white-space: nowrap;
}
.theme-line {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  color: var(--txt2); font-size: 18px; margin-bottom: 18px;
}
.theme-line .dot { color: var(--txt3); }

/* players card with decorative border art — fixed app card aspect ratio
   (832x1101 ≈ 0.7557) so the border-frame PNG (and its corner horns) is never stretched */
/* Fixed 3:4 playing-card ratio (832:1101 ≈ 0.756), like the app, with the
   decorative frame inset INSIDE the card so the card edge sits beyond it. */
/* EXACT port of the app's BaseCard (Core/Components/BaseCard.swift), as used by
   the lobby's "Players card" (Features/Lobby/Views/LobbyView.swift):
     content.padding(35) → background( RoundedRectangle(radius 20).fill(bg2·0.95)
       .overlay( Image(border).resizable().fill.clipShape(radius 12).padding(12) ) )
   So: card radius 20, border image inset 12pt (clipped to radius 12), content
   padded 35pt all round → content sits 35−12 = 23pt INSIDE the border art. The
   card is locked to the canonical 832/1101 game-card ratio. */
.players-card {
  position: relative;
  /* app card = screen − 2·20pt margin; capped for desktop, and height-capped so
     the tall 3:4 card + the ready button still fit on a phone screen. */
  width: min(88vw, 380px, calc((100dvh - 300px) * 0.756));
  aspect-ratio: 832 / 1101;
  margin: 0 auto;
  display: flex; flex-direction: column;
  background: rgba(19,19,19,0.95);          /* bg2 @ 0.95 opacity */
  border-radius: 20px;                       /* BaseCard fill radius */
  padding: clamp(24px, 9.3%, 35px);          /* BaseCard content padding (35pt) */
  box-shadow: 0 10px 26px rgba(0,0,0,0.5);
}
/* Border art: inset a fixed 12px from the card edge (imageInset), filled to the
   box. object-fit:fill keeps BOTH red 'f' hooks fully visible (no crop). The
   small radius matches the app's clipShape(radius 12) without eating the hooks. */
.players-card .frame {
  position: absolute; inset: 12px;
  width: calc(100% - 24px); height: calc(100% - 24px);
  object-fit: fill; border-radius: 10px; pointer-events: none;
}
.players-head {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px;
}
.players-head .label {
  font-family: var(--sans); font-weight: 600; font-size: 15px;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--txt3);
}
.players-head .count {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--sans); font-weight: 600; font-size: 15px; color: var(--txt2);
  padding: 5px 12px; border: 1px solid rgba(255,255,255,0.125); border-radius: 999px;
}
.players-card .hair { height: 1px; background: rgba(255,255,255,0.09); margin-bottom: 6px; }
.player-list { flex: 1; display: flex; flex-direction: column; gap: 14px; padding: 12px 0; overflow-y: auto; }
.player-row { display: flex; align-items: center; gap: 10px; }
.player-row .pname {
  font-family: var(--serif); font-weight: 400; font-size: 20px; color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 0 1 auto; min-width: 0;     /* shrink the NAME first if a row is tight */
}
.player-row .host-tag { font-family: var(--sans); font-size: 15px; color: var(--accent); flex: 0 0 auto; }
.player-row .spacer { flex: 1 1 auto; }
.player-row .ready-word {
  font-family: var(--sans); font-weight: 600; font-size: 13px;
  letter-spacing: 0.05em; text-transform: lowercase; flex: 0 0 auto;
}
.ready-word.is-ready { color: var(--ready); }
.ready-word.is-waiting { color: var(--txt3); }

/* ready toggle (joiner) — green (not ready) / red (ready), black text */
.ready-pill {
  height: 56px; min-width: 200px; padding: 0 1.5rem; border: 1px solid var(--stroke);
  border-radius: 28px; font-family: var(--sans); font-weight: 600; font-size: 18px;
  color: #000; background: var(--have); cursor: pointer; text-transform: lowercase;
  transition: transform .18s;
}
.ready-pill.is-ready { background: var(--never); animation: none; }
.ready-pill:not(.is-ready) { animation: pulse 0.8s ease-in-out infinite alternate; }
@keyframes pulse { from { transform: scale(1); } to { transform: scale(1.04); } }
.lobby-status { text-align: center; color: var(--txt2); margin-top: 1.25rem; font-size: 15px; }
.leave-room-btn {
  display: block; margin: 0.9rem auto 0;
  background: none; border: none; cursor: pointer;
  color: var(--txt3); font-family: var(--sans); font-size: 0.95rem;
  text-transform: lowercase; text-decoration: underline; text-underline-offset: 3px;
}
.leave-room-btn:hover { color: var(--txt); }

/* ---------- horned-oval avatar (the signature element) ---------- */
.pfp { position: relative; flex: 0 0 auto; width: var(--s, 32px); height: calc(var(--s, 32px) * 1.2); }
.pfp .oval {
  position: relative; z-index: 1; width: 100%; height: 100%;
  border-radius: 50%; background: var(--btn); border: 3px solid var(--c, #888);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  font-family: var(--serif); color: #fff; font-size: calc(var(--s, 32px) * 0.4);
}
.pfp .oval img { width: 100%; height: 100%; object-fit: cover; }
/* horns: 'f' glyph at fontSize 0.55·s, centered on the oval then offset (±0.44, -0.28)·s
   and rotated ∓50° — matches PlayerPhotoWithHorns in the app */
.pfp .horn {
  position: absolute; z-index: 0; left: 50%; top: 50%;
  font-family: var(--serif); color: var(--c, #888);
  font-size: calc(0.55 * var(--s, 32px)); line-height: 1; pointer-events: none;
}
.pfp .horn.l { transform: translate(calc(-50% - 0.44 * var(--s, 32px)), calc(-50% - 0.28 * var(--s, 32px))) rotate(-50deg) scaleX(-1); }
.pfp .horn.r { transform: translate(calc(-50% + 0.44 * var(--s, 32px)), calc(-50% - 0.28 * var(--s, 32px))) rotate(50deg); }

/* ======================================================================
   GAMEPLAY (NHIE voting)
   ====================================================================== */
.game-topbar {
  display: flex; align-items: flex-start; justify-content: center;
  position: relative; margin-bottom: 0.5rem;
}
.q-counter { text-align: center; }
.q-counter .num { font-family: var(--sans); font-weight: 600; font-size: 32px; }
.q-counter .num .sep, .q-counter .num .total { color: rgba(255,255,255,0.4); }
.q-counter .eyebrow { font-family: var(--sans); font-weight: 500; font-size: 9px; color: rgba(255,255,255,0.8); }
.game-leave {
  position: absolute; left: 0; top: 0; display: flex; flex-direction: column;
  align-items: center; gap: 2px; background: none; border: none; cursor: pointer;
}
.game-leave .ring {
  width: 44px; height: 44px; border-radius: 50%;
  border: 4px solid rgba(255,59,48,0.12); color: var(--never);
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.game-leave .cap { font-family: var(--sans); font-weight: 500; font-size: 10px; color: var(--txt2); }
.theme-indicator {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  color: var(--txt2); font-size: 16px; margin: 0.5rem 0 1.25rem;
}
.theme-indicator .rule { width: 40px; height: 1px; background: rgba(255,255,255,0.3); }

/* red NHIE question card */
.qcard-ring {
  width: 100%; max-width: 290px; margin: 0 auto;
  padding: 8px; border-radius: 26px;
  background: linear-gradient(135deg, rgba(203,46,46,0.10), rgba(203,46,46,0.40));
}
.qcard {
  position: relative; aspect-ratio: 832 / 1101; border-radius: 20px;
  background: var(--accent); overflow: hidden;
}
.qcard .frame { position: absolute; inset: 12px; width: calc(100% - 24px); height: calc(100% - 24px); object-fit: fill; pointer-events: none; }
.qcard .qtext {
  position: absolute; inset: 13% 11%; display: flex; align-items: center; color: #000;
}
.qline { width: 100%; line-height: 1.2; }
.qcard .qtext .qline { text-align: left; }
.qcard .qtext .q-prefix { font-family: var(--serif); font-weight: 400; }
.qcard .qtext .q-body { font-family: var(--sans); font-weight: 400; }
.qcard .qtext span { font-size: clamp(18px, 5.2vw, 25px); }

/* answer card — shown to non-readers (who is reading, not the statement) */
.acard {
  position: relative; width: 100%; max-width: 290px; margin: 0 auto;
  aspect-ratio: 832 / 1101; border-radius: 20px; background: var(--bg2); overflow: hidden;
}
.acard[hidden], .qcard-ring[hidden] { display: none; }
.acard .frame { position: absolute; inset: 12px; width: calc(100% - 24px); height: calc(100% - 24px); object-fit: fill; pointer-events: none; }
.acard-inner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 12% 9%; }
.acard-name { font-family: var(--serif); font-weight: 400; font-size: clamp(22px, 7vw, 30px); color: #fff; text-align: center; }
.acard-sub { font-family: var(--sans); font-weight: 400; font-size: 16px; color: var(--txt2); text-align: center; }

/* voting row: NEVER ring — counter — HAVE ring */
.vote-row {
  display: none; align-items: center; justify-content: space-between;
  padding: 1.25rem 1rem 0; gap: 0.5rem;
}
.vote-row.active { display: flex; }
.vbtn {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: none; border: none; cursor: pointer;
}
.vbtn .ring {
  width: 56px; height: 56px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: transform .15s;
}
.vbtn .ring svg { width: 34px; height: 34px; }
.vbtn.never .ring { border: 4px solid rgba(255,59,48,0.12); color: var(--never); }
.vbtn.have .ring  { border: 4px solid rgba(52,199,89,0.14);  color: var(--have); }
.vbtn:active .ring { transform: scale(0.95); }
.vbtn .vlabel { font-family: var(--sans); font-weight: 600; font-size: 14px; color: #fff; text-transform: lowercase; }
.vote-counter { width: 100px; text-align: center; flex: 0 0 auto; }
.vote-counter .vc-num { font-family: var(--sans); font-weight: 600; font-size: 18px; color: var(--txt2); }
.vote-counter .vc-lbl { font-family: var(--sans); font-weight: 400; font-size: 12px; color: var(--txt3); text-transform: lowercase; }

/* voted / waiting state */
.voted-box {
  display: none; align-items: center; gap: 12px; margin-top: 1.25rem;
  background: var(--bg2); border-radius: 18px; padding: 1rem 1.1rem;
}
.voted-box.active { display: flex; }
.voted-box .chip {
  width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: center; color: #fff; flex: 0 0 auto;
}
.voted-box .vtitle { font-family: var(--serif); font-weight: 400; font-size: 18px; }
.voted-box .vsub { font-size: 13px; color: var(--txt2); }
.voted-box .vsub b { font-weight: 600; }
.voted-box .vsub b.have { color: var(--have); }
.voted-box .vsub b.never { color: var(--never); }

/* ======================================================================
   ROUND RESULTS
   ====================================================================== */
.results-title { font-family: var(--serif); font-weight: 400; font-size: 28px; text-align: center; margin-bottom: 1.25rem; }
.r-qcard {
  border-radius: 20px; padding: 22px 20px; margin-bottom: 1.5rem;
  background: linear-gradient(135deg, rgba(203,46,46,0.10), rgba(203,46,46,0.05));
  border: 1px solid rgba(203,46,46,0.2);
}
.r-qcard .r-eyebrow {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--sans); font-weight: 600; font-size: 16px; color: var(--accent);
  opacity: 0.85; margin-bottom: 10px;
}
.r-qcard .r-statement { text-align: center; line-height: 1.25; color: #fff; }
.r-qcard .r-statement .q-prefix { font-family: var(--serif); }
.r-qcard .r-statement .q-body { font-family: var(--sans); }
.r-qcard .r-statement span { font-size: 20px; }
.tally {
  display: flex; align-items: stretch; justify-content: center; margin-bottom: 1.25rem;
}
.tally .side { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.tally .side .big { font-family: var(--sans); font-weight: 700; font-size: 40px; }
.tally .side.never .big { color: var(--never); }
.tally .side.have .big { color: var(--have); }
.tally .side .lbl { font-size: 14px; color: var(--txt2); text-transform: lowercase; }
.tally .divider { width: 1px; background: rgba(255,255,255,0.2); margin: 0 4px; }
.faces-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 6px; min-height: 1px; }

/* ======================================================================
   WINNER / SCOREBOARD
   ====================================================================== */
.win-themetag {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  color: var(--txt2); font-size: 14px; margin-bottom: 1.25rem;
}
.win-themetag .rule { width: 40px; height: 1px; background: rgba(255,255,255,0.25); }
.win-label { font-family: var(--serif); font-weight: 400; font-size: 30px; text-align: center; color: rgba(255,255,255,0.85); }
.win-name { font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 12vw, 46px); text-align: center; color: #fff; margin-bottom: 1.75rem; line-height: 1.05; }
.win-name.tie { font-size: clamp(26px, 8vw, 30px); }

.podium { display: flex; align-items: flex-end; justify-content: center; gap: 12px; margin-bottom: 1.5rem; }
.podium .col { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 92px; }
.podium .crown { font-size: 22px; height: 26px; }
.podium .crown.hidden { visibility: hidden; }
.podium .pname { font-family: var(--sans); font-weight: 600; font-size: 13px; color: #fff; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.podium .bar {
  width: 88px; border-radius: 14px; border: 1px solid rgba(150,150,158,0.30);
  background: rgba(150,150,158,0.13); display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start; padding-top: 10px; gap: 0;
  height: 0; overflow: hidden; transition: height 0.6s cubic-bezier(.2,.8,.2,1);
}
.podium .col.first .bar { background: rgba(150,150,158,0.20); }
.podium .col.bar-in .bar { height: var(--h, 84px); }
/* podium pieces start hidden; revealed by staggered .bar-in / .content-in classes */
.podium .bar .score, .podium .bar .pts { opacity: 0; transition: opacity 0.4s ease; }
.podium .col.bar-in .bar .score, .podium .col.bar-in .bar .pts { opacity: 1; }
.podium .crown, .podium .pfp, .podium .pname {
  opacity: 0; transition: opacity 0.4s ease, transform 0.5s cubic-bezier(.2,.9,.3,1.25);
}
.podium .pfp { transform: scale(0.5); }
.podium .crown { transform: translateY(8px); }
.podium .col.content-in .crown, .podium .col.content-in .pfp, .podium .col.content-in .pname {
  opacity: 1; transform: none;
}
.podium .col.content-in .crown.hidden { opacity: 0; }
.podium .bar .score { font-family: var(--serif); font-weight: 400; font-size: 28px; color: #fff; }
.podium .bar .pts { font-family: var(--sans); font-weight: 500; font-size: 9px; color: rgba(255,255,255,0.6); }

.rank-list { display: flex; flex-direction: column; gap: 8px; max-height: 210px; overflow-y: auto; margin-bottom: 1.5rem; }
.rank-row {
  display: flex; align-items: center; gap: 12px; padding: 8px 16px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.10); border-radius: 999px;
}
.rank-row .rk { width: 22px; font-family: var(--sans); font-weight: 600; font-size: 15px; color: rgba(255,255,255,0.45); }
.rank-row .rname { flex: 1; font-family: var(--sans); font-weight: 500; font-size: 15px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-row .rscore { font-family: var(--sans); font-weight: 600; font-size: 15px; }

.win-actions { display: flex; gap: 10px; justify-content: center; }
.ghost-btn {
  width: 56px; height: 56px; border-radius: 999px; flex: 0 0 auto;
  background: var(--bg2); border: 1px solid rgba(255,255,255,0.1); color: #fff;
  display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 20px;
}

/* ---- winner reveal animation (phase 1 card + flip + confetti, phase 2 scoreboard) ---- */
#screen-end { position: relative; min-height: 70vh; }
.confetti-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 25; }

.winner-stage {
  position: absolute; inset: 0; z-index: 20; pointer-events: none;
  display: flex; align-items: center; justify-content: center; perspective: 900px;
}
.winner-stage.gone { display: none; }
.winner-card {
  position: relative; width: min(74%, 290px); aspect-ratio: 0.78;
  transform-style: preserve-3d; will-change: transform, opacity;
  transform: scale(0.1); opacity: 0;
  transition: transform 0.6s cubic-bezier(.34,1.56,.64,1), opacity 0.5s ease;
}
.winner-card.in   { transform: scale(1); opacity: 1; }
.winner-card.flip { transform: rotateY(180deg) scale(1); transition: transform 0.8s cubic-bezier(.42,0,.58,1); }
.winner-card.exit { transform: rotateY(180deg) scale(1.5); opacity: 0; transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; }
.wc-face {
  position: absolute; inset: 0;
  border-radius: 16px; background: #101014; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 22px;
}
.wc-back { transform: rotateY(180deg); visibility: hidden; }
/* explicit face swap at the flip midpoint (robust vs. backface-visibility quirks) */
.winner-card.flipped .wc-front { visibility: hidden; }
.winner-card.flipped .wc-back { visibility: visible; }
.wc-frame { position: absolute; inset: 9px; width: calc(100% - 18px); height: calc(100% - 18px); object-fit: fill; pointer-events: none; }
.wc-emoji { font-size: 26px; line-height: 1; }
.wc-cardlabel { font-family: var(--sans); font-weight: 500; font-size: 16px; color: var(--txt2); text-transform: lowercase; }
.wc-cardname { font-family: var(--serif); font-weight: 400; font-size: 22px; color: #fff; text-align: center; }
.wc-avatars { display: flex; gap: 8px; justify-content: center; }
.wc-taunt { font-family: var(--serif); font-weight: 400; font-size: 23px; line-height: 1.35; color: #fff; text-align: center; padding: 0 10px; }
.wc-taunt .word {
  display: inline-block; margin: 0 0.16em;
  opacity: 0; transform: translateY(12px); filter: blur(4px);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out, filter 0.4s ease-out;
}
.wc-taunt .word.show { opacity: 1; transform: none; filter: none; }
.wc-taunt .word.dim { color: rgba(255,255,255,0.85); }

/* phase-1 contents fade/pop in on schedule */
.wc-emoji, .wc-cardlabel { opacity: 0; transition: opacity 0.5s ease-out; }
.wc-front.label-in .wc-emoji, .wc-front.label-in .wc-cardlabel { opacity: 1; }
.wc-avatars { opacity: 0; transform: scale(0.3); transition: opacity 0.5s, transform 0.5s cubic-bezier(.2,.9,.3,1.3); }
.wc-front.photo-in .wc-avatars { opacity: 1; transform: none; }
.wc-cardname { opacity: 0; transition: opacity 0.4s ease-out; }
.wc-front.name-in .wc-cardname { opacity: 1; }

/* phase 2 */
.scoreboard { opacity: 0; transition: opacity 0.5s ease; pointer-events: none; }
.scoreboard.show { opacity: 1; pointer-events: auto; }
.scoreboard .win-themetag, .scoreboard .win-label, .scoreboard .win-name {
  opacity: 0; transform: translateY(12px); transition: opacity 0.5s ease, transform 0.5s ease;
}
.scoreboard.reveal .win-themetag, .scoreboard.reveal .win-label, .scoreboard.reveal .win-name {
  opacity: 1; transform: none;
}
.rank-row { opacity: 0; transition: opacity 0.4s ease; }
.rank-row.in { opacity: 1; }
.win-actions { opacity: 0; transition: opacity 0.4s ease; }
.win-actions.in { opacity: 1; }

@media (max-width: 380px) {
  /* keep the percentage padding from the base rule — a fixed px override here
     used to crush the content right up against the frame on phones. */
  .podium .col { width: 80px; }
  .podium .bar { width: 78px; }
}