/* ============================================================
   Football Imposter — design system
   Dark "stadium at night" palette, lime accent, mobile-first.
   ============================================================ */

:root {
  /* --- surfaces --- */
  --bg: #080B0A;
  --bg-2: #0D1211;
  --surface: #141B19;
  --surface-2: #1C2523;
  --surface-3: #263130;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.16);

  /* --- ink --- */
  --ink: #F1F5F3;
  --ink-2: #A6B4AE;
  --ink-3: #6B7975;

  /* --- accents --- */
  --lime: #C8FF4D;
  --lime-dim: #8FBF2E;
  --lime-glow: rgba(200, 255, 77, 0.28);
  --red: #FF4560;
  --red-glow: rgba(255, 69, 96, 0.3);
  --blue: #4DA6FF;
  --amber: #FFC145;
  --violet: #A98BFF;

  /* --- geometry --- */
  --r-sm: 12px;
  --r: 18px;
  --r-lg: 26px;
  --r-xl: 34px;
  --pad: 20px;

  /* --- motion --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* --- safe areas (iPhone notch / home bar) --- */
  --sa-t: env(safe-area-inset-top, 0px);
  --sa-b: env(safe-area-inset-bottom, 0px);
}

/* ============================================================
   Reset
   ============================================================ */

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

* { margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
  overscroll-behavior: none;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
  overflow: hidden;

  /* iOS needs the height pinned explicitly.
     `inset: 0` on a fixed element resolves against the LARGE viewport on
     Safari — the one with the toolbar hidden — so the bottom of the app can
     sit underneath the toolbar and be untappable. And when the keyboard
     opens, nothing resizes at all, so whatever you are typing into can end
     up behind it.

     --app-h is written from visualViewport in app.js, which tracks both. The
     fallbacks keep desktop and older browsers correct. */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  height: 100dvh;
  height: var(--app-h, 100dvh);
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  outline: none;
}

/* The viewport used to be locked with user-scalable=no, which blocks
   pinch-zoom for anyone who needs to magnify text — an accessibility
   failure. Zoom is allowed again; this stops the side effect, which is
   double-tap zooming the page when someone taps a button twice quickly. */
button,
.mode-card,
.player-row,
.vote-option,
.guess-option,
.seg,
.btn-icon {
  touch-action: manipulation;
}

/* A quiet aside under a control — the consent and lobby notes. */
.muted-note {
  color: var(--ink-3);
  margin-top: 8px;
  text-wrap: pretty;
}

button { cursor: pointer; }

input, textarea { user-select: text; -webkit-user-select: text; }

/* Ambient pitch-light glow, slowly drifting so the app never feels static */
body::before {
  content: "";
  position: fixed;
  inset: -25%;
  pointer-events: none;
  background:
    radial-gradient(38% 30% at 22% 12%, rgba(200, 255, 77, 0.16), transparent 62%),
    radial-gradient(34% 28% at 82% 26%, rgba(169, 139, 255, 0.13), transparent 62%),
    radial-gradient(40% 32% at 50% 96%, rgba(77, 166, 255, 0.11), transparent 62%);
  animation: drift 26s ease-in-out infinite alternate;
  z-index: 0;
}

@keyframes drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(2.5%, -2%, 0) scale(1.08); }
  100% { transform: translate3d(-2%, 2.5%, 0) scale(1.03); }
}

/* Faint pitch stripes — reads as grass without being literal */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.5;
  background: repeating-linear-gradient(
    100deg,
    transparent 0 62px,
    rgba(255, 255, 255, 0.014) 62px 124px
  );
}

/* ============================================================
   App shell + screen transitions
   ============================================================ */

#app {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.screen {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  padding: calc(var(--sa-t) + 16px) var(--pad) calc(var(--sa-b) + 16px);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.screen.is-active {
  display: flex;
  animation: screen-in 0.42s var(--ease-out) both;
}

.screen.is-active.from-back { animation-name: screen-in-back; }

@keyframes screen-in {
  from { opacity: 0; transform: translateX(28px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

@keyframes screen-in-back {
  from { opacity: 0; transform: translateX(-28px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .screen.is-active { animation: none; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   Typography
   ============================================================ */

.display {
  font-size: clamp(30px, 9vw, 44px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.02;
}

h1 { font-size: clamp(26px, 7.5vw, 36px); font-weight: 800; letter-spacing: -0.028em; line-height: 1.08; }
h2 { font-size: 21px; font-weight: 750; letter-spacing: -0.018em; }
h3 { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }

.eyebrow {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lime);
}
.eyebrow.muted { color: var(--ink-3); }
.eyebrow.danger { color: var(--red); }

.sub { color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.tiny { font-size: 12.5px; color: var(--ink-3); line-height: 1.45; }
.center { text-align: center; }
.mono-num { font-variant-numeric: tabular-nums; }

/* ============================================================
   Layout helpers
   ============================================================ */

.stack   { display: flex; flex-direction: column; gap: 12px; }
.stack-s { display: flex; flex-direction: column; gap: 8px; }
.stack-l { display: flex; flex-direction: column; gap: 20px; }
.row     { display: flex; align-items: center; gap: 10px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.grow    { flex: 1; }
.spacer  { flex: 1 1 auto; min-height: 12px; }
.wrap    { flex-wrap: wrap; }

.screen-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
  flex-shrink: 0;
}

/* Sharing the row with a back button AND a control leaves the title about a
   third of the screen on a phone. Scale it to what is left rather than
   letting it stack into three lines. */
.screen-head.has-right h1 { font-size: clamp(21px, 5.6vw, 30px); }
.screen-head.has-right { gap: 10px; }

.content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
  min-height: 0;
}

.footer-actions {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-top: 18px;
}

/* ============================================================
   Buttons
   ============================================================ */

.btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 58px;
  padding: 16px 22px;
  border-radius: var(--r);
  background: var(--surface-2);
  color: var(--ink);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.012em;
  border: 1px solid var(--line);
  transition: transform 0.16s var(--spring), background 0.2s, opacity 0.2s, border-color 0.2s;
}

.btn:active { transform: scale(0.965); }

.btn:disabled {
  opacity: 0.38;
  pointer-events: none;
}

.btn-primary {
  background: linear-gradient(168deg, var(--lime), var(--lime-dim));
  color: #0A1200;
  border-color: transparent;
  box-shadow: 0 8px 26px -10px var(--lime-glow), inset 0 1px 0 rgba(255, 255, 255, 0.4);
  font-weight: 800;
}

.btn-danger {
  background: linear-gradient(168deg, #FF5C74, #E12B47);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 26px -10px var(--red-glow), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  font-weight: 800;
}

.btn-ghost {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--ink-2);
}

.btn-sm {
  min-height: 44px;
  padding: 10px 16px;
  font-size: 14.5px;
  border-radius: var(--r-sm);
  width: auto;
}

.btn-icon {
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 50%;
  flex-shrink: 0;
  font-size: 20px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}

.btn-row { display: flex; gap: 10px; }
.btn-row .btn { flex: 1; }

/* ============================================================
   Cards & surfaces
   ============================================================ */

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 18px;
}

.card-tight { padding: 14px; border-radius: var(--r); }

.panel {
  background: var(--surface-2);
  border-radius: var(--r);
  padding: 14px 16px;
  border: 1px solid var(--line);
}

/* ============================================================
   Home screen
   ============================================================ */

/* The home screen lays itself out as a fixed-height column, which means that
   on a short phone there is no room to give and every child shrinks instead:
   the two mode cards were rendering at 42px against a natural 113px, with
   their titles spilling out over the top edge of the card.

   `flex: 1 0 auto` lets the column keep its natural height — it still grows
   to fill a tall screen, but it refuses to shrink below its contents, so a
   short screen scrolls instead of crushing. justify-content has to go with
   it: centring an item that is taller than its scroll container pushes the
   top of it above the scroll origin, where it cannot be reached. */
.home {
  justify-content: flex-start;
  gap: 28px;
}

.home .content {
  flex: 1 0 auto;
  min-height: 0;
}

.logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  animation: logo-in 0.7s var(--ease-out) both;
}

@keyframes logo-in {
  from { opacity: 0; transform: translateY(18px) scale(0.94); }
  to   { opacity: 1; transform: none; }
}

.logo-ball {
  font-size: 60px;
  line-height: 1;
  filter: drop-shadow(0 8px 24px rgba(200, 255, 77, 0.3));
  animation: ball-float 4.5s ease-in-out infinite;
}

@keyframes ball-float {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50%      { transform: translateY(-10px) rotate(6deg); }
}

.logo-title {
  font-size: clamp(34px, 11vw, 52px);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 0.94;
  text-align: center;
  background: linear-gradient(150deg, #FFFFFF 15%, var(--lime) 85%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.logo-sub {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.mode-card {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  flex-shrink: 0;          /* never let a tight column squash the card */
  padding: 20px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  text-align: left;
  transition: transform 0.18s var(--spring), border-color 0.25s, background 0.25s;
}

.mode-card:active { transform: scale(0.97); }
.mode-card:hover { border-color: var(--line-strong); }

.mode-emoji {
  font-size: 30px;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: var(--r);
  background: var(--surface-2);
  flex-shrink: 0;
}

.mode-card .mode-title { font-size: 18px; font-weight: 750; letter-spacing: -0.015em; }
.mode-card .mode-desc { font-size: 13.5px; color: var(--ink-3); line-height: 1.4; margin-top: 2px; }
.mode-arrow { color: var(--ink-3); font-size: 22px; flex-shrink: 0; }

/* ============================================================
   Player chips / name list
   ============================================================ */

.player-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: var(--r);
  background: var(--surface-2);
  border: 1px solid var(--line);
  transition: opacity 0.25s, transform 0.25s var(--spring);
  animation: row-in 0.3s var(--ease-out) both;
}

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

.avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 15px;
  color: #08120A;
  flex-shrink: 0;
  letter-spacing: -0.02em;
}

.avatar-lg { width: 60px; height: 60px; font-size: 23px; }
.avatar-sm { width: 30px; height: 30px; font-size: 12.5px; }

.player-row .name { font-weight: 650; font-size: 16px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.remove-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--ink-3);
  font-size: 17px;
  background: rgba(255, 255, 255, 0.05);
  flex-shrink: 0;
}
.remove-btn:active { background: var(--red); color: #fff; }

/* ============================================================
   Inputs
   ============================================================ */

.field {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface-2);
  border: 1.5px solid var(--line);
  border-radius: var(--r);
  padding: 4px 6px 4px 16px;
  transition: border-color 0.2s;
}

.field:focus-within { border-color: var(--lime); }

.field input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  padding: 14px 0;
  font-size: 16.5px;
  font-weight: 600;
}

/* Buttons inside a field must hug their label — a full-width .btn here
   collapses the input to zero and makes the field impossible to type in. */
.field .btn {
  flex: 0 0 auto;
  width: auto;
  min-width: 72px;
  min-height: 46px;
  padding: 12px 18px;
  font-size: 15px;
  border-radius: 13px;
}

.field input::placeholder { color: var(--ink-3); font-weight: 500; }

.code-input {
  width: 100%;
  text-align: center;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  padding: 20px 0;
  background: var(--surface-2);
  border: 1.5px solid var(--line);
  border-radius: var(--r);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}
.code-input:focus { border-color: var(--lime); }
.code-input::placeholder { color: var(--ink-3); letter-spacing: 0.28em; }

/* ============================================================
   Segmented control (settings)
   ============================================================ */

.seg {
  display: flex;
  flex-wrap: wrap;   /* long option sets wrap instead of squashing */
  gap: 4px;
  background: var(--surface-2);
  border-radius: 14px;
  padding: 4px;
  border: 1px solid var(--line);
}

.seg button {
  /* 1 0 auto meant a seven-button set could not shrink, so on a 375px phone
     the last option wrapped onto a row of its own and read as an empty box
     below the control. Allowing them to shrink keeps the set on one line;
     the min-width still guarantees a tappable target. */
  flex: 1 1 auto;
  min-width: 34px;
  padding: 10px 4px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-3);
  transition: background 0.22s var(--ease-out), color 0.22s;
  white-space: nowrap;
}

.seg button.on {
  background: var(--lime);
  color: #0A1200;
}

.setting-row {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.setting-row:last-child { border-bottom: none; }
.setting-label { font-size: 15.5px; font-weight: 650; }
.setting-hint { font-size: 12.5px; color: var(--ink-3); line-height: 1.4; }

/* ============================================================
   Year slider
   ============================================================
   A range input is the one control that shows fifty years at a glance and
   still lands on a single one. Styled by hand because the native thumb and
   track ignore the rest of the theme. */

.era-row {
  flex-wrap: wrap;
  row-gap: 12px;
}

.era-slider-wrap {
  flex: 1 0 100%;
  display: flex;
  align-items: center;
  gap: 10px;
}

.era-value {
  font-size: 17px;
  font-weight: 800;
  color: var(--lime);
  font-variant-numeric: tabular-nums;
  min-width: 4ch;
  text-align: center;
}
.era-value.off { color: var(--ink-3); }

.era-end {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.era-slider {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 34px;              /* a comfortable thumb target, not a thin line */
  background: none;
  cursor: pointer;

  /* The slider sits inside a sheet that scrolls vertically. Without this the
     browser has to guess whether a drag starting here is a scroll or a drag,
     and on a phone it guesses scroll — the thumb simply never moves. Taking
     the gesture outright is the whole reason the control works on touch. */
  touch-action: none;

  /* A tick every decade, so a year has somewhere to be rather than floating
     on a blank line. Drawn into the track via the var above. */
  --era-ticks: repeating-linear-gradient(
    to right,
    rgba(255, 255, 255, 0.26) 0 2px,
    transparent 2px calc(100% / 5.1)
  );
}
.era-slider:disabled { opacity: 0.4; cursor: default; }

.era-slider::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  /* The portion behind the thumb is filled, so the year reads as a position
     on a scale rather than a dot floating on a grey line. --era-pct is kept
     up to date by the input handler. */
  background:
    linear-gradient(to right, var(--lime) calc(var(--era-pct, 100%)), transparent 0),
    var(--era-ticks),
    var(--surface-3);
}
.era-slider::-moz-range-track {
  height: 8px;
  border-radius: 999px;
  background:
    linear-gradient(to right, var(--lime) calc(var(--era-pct, 100%)), transparent 0),
    var(--era-ticks),
    var(--surface-3);
}

.era-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 28px;
  height: 28px;
  margin-top: -10px;         /* centre it on the 8px track */
  border-radius: 50%;
  background: var(--lime);
  border: 3px solid var(--bg);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
.era-slider::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--lime);
  border: 3px solid var(--bg);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.era-slider:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--lime); outline-offset: 3px; }

/* Said when the chosen year has too few people for the filter to hold. */
.era-note.warn { color: var(--amber); }

/* ============================================================
   Reveal — the pass-the-phone card
   ============================================================ */

/* `flex: 1` used to mean `1 1 0%` here, so on a phone the stage shrank and
   took the role card down with it. The card clips to its own rounded corners,
   so nothing looked broken — the hints and the "get a hint" button were simply
   cut off below the edge of the card, which is why the hints were hard to
   read. It now grows to fill a tall screen but never shrinks below its
   contents; a short screen scrolls instead (the screen carries `flow`). */
.reveal-stage {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 22px;
  min-height: 0;
}

.handoff {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  animation: pop-in 0.45s var(--spring) both;
}

@keyframes pop-in {
  from { opacity: 0; transform: scale(0.86); }
  to   { opacity: 1; transform: none; }
}

.role-card {
  width: 100%;
  max-width: 420px;
  flex-shrink: 0;          /* it clips to its corners, so shrinking hides content */
  border-radius: var(--r-xl);
  overflow: hidden;
  position: relative;
  animation: card-flip-in 0.6s var(--ease-out) both;
  border: 1px solid var(--line-strong);
  background: var(--surface);
}

@keyframes card-flip-in {
  from { opacity: 0; transform: perspective(900px) rotateY(-32deg) scale(0.9); }
  to   { opacity: 1; transform: none; }
}

/* --- crew variant: the player photo --- */
.photo-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  max-height: 46vh;
  background: linear-gradient(160deg, var(--surface-3), var(--surface));
  overflow: hidden;
}

.photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  display: block;
  animation: photo-in 0.8s var(--ease-out) both;
}

@keyframes photo-in {
  from { opacity: 0; transform: scale(1.08); }
  to   { opacity: 1; transform: none; }
}

/* Darkened further than looks necessary on a dark photo, because the name
   and pills have to stay readable over a white kit or a bright background. */
.photo-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(8, 11, 10, 0.98) 2%,
    rgba(8, 11, 10, 0.88) 22%,
    rgba(8, 11, 10, 0.45) 45%,
    transparent 70%);
  pointer-events: none;
}

.photo-name {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 16px;
  z-index: 2;
}

.photo-name .pn-name {
  font-size: clamp(27px, 8.5vw, 40px);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.0;
  text-shadow: 0 3px 22px rgba(0, 0, 0, 0.85);
}

.photo-name .pn-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 9px;
}

/* These sit on top of an unpredictable photo — a white kit or a bright sky
   made the old translucent-white pills disappear entirely. Dark and opaque
   reads on anything, and the light border keeps them from muddying into a
   dark photo. */
.meta-pill {
  font-size: 11.5px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 999px;
  color: #FFFFFF;
  background: rgba(8, 11, 10, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
  white-space: nowrap;
}

/* Fallback "kit card" when no photo is available */
.kit-card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.kit-shirt {
  width: 54%;
  max-width: 190px;
  aspect-ratio: 1;
  border-radius: 24px;
  display: grid;
  place-items: center;
  font-size: clamp(40px, 15vw, 66px);
  font-weight: 900;
  letter-spacing: -0.05em;
  color: rgba(255, 255, 255, 0.95);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.25), 0 20px 50px -22px rgba(0, 0, 0, 0.9);
}

.kit-flag { font-size: 38px; }

.photo-loading {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--ink-3);
  font-size: 13px;
}

.shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, 0.05) 50%, transparent 80%);
  background-size: 220% 100%;
  animation: shimmer 1.6s linear infinite;
}

@keyframes shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -100% 0; }
}

/* --- imposter variant --- */
.imposter-face {
  width: 100%;
  aspect-ratio: 3 / 4;
  max-height: 46vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background:
    radial-gradient(90% 70% at 50% 30%, rgba(255, 69, 96, 0.28), transparent 70%),
    linear-gradient(170deg, #2A1015, #12080A);
  position: relative;
}

.imposter-mask {
  font-size: 78px;
  line-height: 1;
  filter: drop-shadow(0 10px 30px rgba(255, 69, 96, 0.5));
  animation: mask-in 0.7s var(--spring) both 0.1s;
}

@keyframes mask-in {
  from { opacity: 0; transform: scale(0.4) rotate(-25deg); }
  to   { opacity: 1; transform: none; }
}

.imposter-title {
  font-size: clamp(34px, 11vw, 48px);
  font-weight: 900;
  letter-spacing: -0.04em;
  color: var(--red);
  text-shadow: 0 0 40px var(--red-glow);
}

/* Photo attribution. Required by the CC licences nearly every Wikimedia
   photo carries, so it has to be present and legible — but it is a credit,
   not a headline, so it sits quietly under the picture. */
.photo-credit {
  padding: 8px 14px 10px;
  font-size: 10.5px;
  line-height: 1.4;
  color: var(--ink-3);
  text-align: center;
  background: var(--surface);
  word-break: break-word;
}
.photo-credit:empty { display: none; }

/* Inside the result strip the credit is a footnote to the name beside it,
   not a caption under a picture, so it drops the panel styling and lines up
   left with the rest of the column. */
.reveal-strip .photo-credit {
  padding: 5px 0 0;
  text-align: left;
  background: none;
  font-size: 10px;
}
.photo-credit a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 2px; }

.role-body { padding: 18px; }

/* With hints on the card the face stops being a 3:4 portrait block and
   becomes a banner, so the hints sit near the top of the screen where they
   can be read rather than below a 300px picture. */
.role-card.has-hints .imposter-face {
  aspect-ratio: auto;
  max-height: none;
  padding: 20px 16px;
  gap: 8px;
}
.role-card.has-hints .imposter-mask { font-size: 44px; }
.role-card.has-hints .imposter-title { font-size: clamp(26px, 8vw, 36px); }

/* Hints */
.hint-list { display: flex; flex-direction: column; gap: 8px; }

.hint-item {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid var(--line);
  animation: hint-in 0.4s var(--spring) both;
}

@keyframes hint-in {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: none; }
}

.hint-label {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 2px;
}
.hint-value { font-size: 15px; font-weight: 620; line-height: 1.35; }
.hint-icon { font-size: 17px; flex-shrink: 0; margin-top: 1px; }

/* ============================================================
   Clue round — turn indicator + timer
   ============================================================ */

.turn-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  text-align: center;
  min-height: 0;
}

.turn-name {
  font-size: clamp(36px, 12vw, 56px);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  animation: pop-in 0.4s var(--spring) both;
}

.timer-ring {
  position: relative;
  width: 168px;
  height: 168px;
  flex-shrink: 0;
}

.timer-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }

.timer-ring .track { fill: none; stroke: var(--surface-3); stroke-width: 9; }

.timer-ring .prog {
  fill: none;
  stroke: var(--lime);
  stroke-width: 9;
  stroke-linecap: round;
  transition: stroke-dashoffset 1s linear, stroke 0.4s;
}

.timer-ring.warn .prog { stroke: var(--amber); }
.timer-ring.crit .prog { stroke: var(--red); }
.timer-ring.crit { animation: pulse 0.9s ease-in-out infinite; }

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.045); }
}

.timer-num {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 50px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
}

.turn-dots { display: flex; gap: 7px; justify-content: center; flex-wrap: wrap; }

.turn-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--surface-3);
  transition: background 0.3s, transform 0.3s var(--spring);
}
.turn-dot.done { background: var(--lime-dim); }
.turn-dot.now  { background: var(--lime); transform: scale(1.5); box-shadow: 0 0 14px var(--lime-glow); }

/* ============================================================
   Voting
   ============================================================ */

.vote-option {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--r);
  background: var(--surface-2);
  border: 2px solid transparent;
  text-align: left;
  transition: transform 0.16s var(--spring), border-color 0.2s, background 0.2s;
}

.vote-option:active { transform: scale(0.975); }

.vote-option.selected {
  border-color: var(--lime);
  background: rgba(200, 255, 77, 0.1);
}

.vote-option .name { flex: 1; font-weight: 680; font-size: 16.5px; }

.vote-check {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
  display: grid;
  place-items: center;
  font-size: 13px;
  color: transparent;
  flex-shrink: 0;
  transition: all 0.2s var(--spring);
}

.vote-option.selected .vote-check {
  background: var(--lime);
  border-color: var(--lime);
  color: #0A1200;
}

.vote-option.disabled { opacity: 0.34; pointer-events: none; }

/* Tally bars */
.tally-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; }

.tally-bar-wrap {
  flex: 1;
  height: 10px;
  border-radius: 999px;
  background: var(--surface-3);
  overflow: hidden;
}

.tally-bar {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--lime-dim), var(--lime));
  width: 0;
  transition: width 0.85s var(--ease-out);
}
.tally-bar.top { background: linear-gradient(90deg, #E12B47, var(--red)); }

.tally-count { font-size: 15px; font-weight: 800; min-width: 22px; text-align: right; font-variant-numeric: tabular-nums; }

/* Big binary choice: keep playing vs accuse */
.choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.choice-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 26px 14px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 2px solid var(--line);
  transition: transform 0.18s var(--spring), border-color 0.22s, background 0.22s;
  text-align: center;
}

.choice-card:active { transform: scale(0.96); }
.choice-card.selected { border-color: var(--lime); background: rgba(200, 255, 77, 0.09); }
.choice-card.selected.danger { border-color: var(--red); background: rgba(255, 69, 96, 0.09); }
.choice-emoji { font-size: 38px; line-height: 1; }
.choice-label { font-size: 15.5px; font-weight: 750; letter-spacing: -0.015em; }
.choice-note { font-size: 11.5px; color: var(--ink-3); line-height: 1.35; }

/* ============================================================
   Guess grid (imposter picks the footballer)
   ============================================================ */

.guess-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.guess-card {
  padding: 15px 12px;
  border-radius: var(--r);
  background: var(--surface-2);
  border: 2px solid transparent;
  text-align: center;
  font-weight: 700;
  font-size: 14.5px;
  line-height: 1.25;
  letter-spacing: -0.012em;
  min-height: 72px;
  display: grid;
  place-items: center;
  transition: transform 0.16s var(--spring), border-color 0.2s, background 0.2s;
}

.guess-card:active { transform: scale(0.96); }
.guess-card.selected { border-color: var(--lime); background: rgba(200, 255, 77, 0.1); }
.guess-card.correct { border-color: var(--lime); background: rgba(200, 255, 77, 0.2); }
.guess-card.wrong { border-color: var(--red); background: rgba(255, 69, 96, 0.16); }

/* ============================================================
   Result screen
   ============================================================ */

.result-stage {
  flex: 1 0 auto;          /* same reason as .reveal-stage: never crush it */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: center;
  min-height: 0;
}

.result-badge {
  font-size: 74px;
  line-height: 1;
  animation: badge-in 0.65s var(--spring) both;
}

@keyframes badge-in {
  from { opacity: 0; transform: scale(0.3) rotate(-20deg); }
  to   { opacity: 1; transform: none; }
}

/* The winner line carries a player-typed name, which can be longer than
   anything in the translations — at 10vw a single long name ran past both
   edges, and the screen clips horizontally, so the ends were simply gone.
   It now breaks rather than overflowing, and gives up some size when there
   is a lot to fit. */
.result-title {
  font-size: clamp(28px, 9vw, 46px);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.06;
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
  text-wrap: balance;
}
.result-title.crew { color: var(--lime); }
.result-title.imposter { color: var(--red); }

.result-detail {
  color: var(--ink-2);
  font-size: 15.5px;
  line-height: 1.55;
  max-width: 340px;
}

.reveal-strip {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  max-width: 420px;
  padding: 14px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  text-align: left;
}

.reveal-strip > div { min-width: 0; overflow-wrap: break-word; }

.reveal-strip img {
  width: 62px;
  height: 62px;
  border-radius: var(--r-sm);
  object-fit: cover;
  object-position: center 18%;
  flex-shrink: 0;
  background: var(--surface-3);
}

/* Scoreboard */
.score-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--r);
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.score-row.leader { border-color: var(--lime); background: rgba(200, 255, 77, 0.07); }
.score-row .name { flex: 1; font-weight: 650; font-size: 15.5px; }
.score-row .pts { font-weight: 800; font-size: 19px; font-variant-numeric: tabular-nums; color: var(--lime); }
.score-row .rank { width: 22px; font-weight: 800; color: var(--ink-3); font-size: 14px; }
.score-delta { font-size: 12px; font-weight: 700; color: var(--lime); }

/* ============================================================
   Lobby (online)
   ============================================================ */

.code-display {
  text-align: center;
  padding: 22px 18px;
  border-radius: var(--r-lg);
  background: linear-gradient(165deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line-strong);
}

.code-value {
  font-size: clamp(44px, 15vw, 64px);
  font-weight: 900;
  letter-spacing: 0.14em;
  text-indent: 0.14em;
  line-height: 1;
  background: linear-gradient(150deg, #fff, var(--lime));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.conn-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-3);
  flex-shrink: 0;
}
.conn-dot.on { background: var(--lime); box-shadow: 0 0 10px var(--lime-glow); animation: breathe 2.2s ease-in-out infinite; }
.conn-dot.off { background: var(--red); }

@keyframes breathe {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

.badge {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--surface-3);
  color: var(--ink-2);
  flex-shrink: 0;
}
.badge.host { background: rgba(200, 255, 77, 0.18); color: var(--lime); }
.badge.you  { background: rgba(77, 166, 255, 0.18); color: var(--blue); }
.badge.wait { background: rgba(255, 193, 69, 0.16); color: var(--amber); }
.badge.done { background: rgba(200, 255, 77, 0.18); color: var(--lime); }

/* ============================================================
   Waiting / spinner
   ============================================================ */

.wait-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  text-align: center;
}

.spinner {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px solid var(--surface-3);
  border-top-color: var(--lime);
  animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   Toast
   ============================================================ */

#toast {
  position: fixed;
  left: 50%;
  /* Clear of the action bar. At 26px the toast landed on top of the
     primary button — "that name is taken" covering "Start the game" is
     exactly the moment you need to read both. A screen's action bar is the
     56px button plus its 18px of padding, so 92px sits just above it, and
     on screens with no bar the toast simply floats a little higher. */
  bottom: calc(var(--sa-b) + 92px);
  transform: translate(-50%, 20px);
  z-index: 200;
  background: var(--surface-3);
  color: var(--ink);
  padding: 13px 20px;
  border-radius: 999px;
  font-size: 14.5px;
  font-weight: 650;
  border: 1px solid var(--line-strong);
  box-shadow: 0 14px 40px -12px rgba(0, 0, 0, 0.8);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s, transform 0.28s var(--spring);
  max-width: calc(100vw - 40px);
  text-align: center;
}

#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ============================================================
   Sheet (modal)
   ============================================================ */

#sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 150;
  background: rgba(0, 0, 0, 0.68);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s;
  display: flex;
  align-items: flex-end;
}

#sheet-backdrop.show { opacity: 1; pointer-events: auto; }

.sheet {
  width: 100%;
  max-height: 86vh;
  overflow-y: auto;
  background: var(--bg-2);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  border-top: 1px solid var(--line-strong);
  padding: 10px var(--pad) calc(var(--sa-b) + 24px);
  transform: translateY(100%);
  transition: transform 0.36s var(--ease-out);
}

#sheet-backdrop.show .sheet { transform: none; }

/* The grip is the affordance for the swipe-down that dismisses the sheet,
   so it gets a target worth grabbing rather than a 4px line. */
.sheet-grip {
  width: 44px;
  height: 5px;
  border-radius: 999px;
  background: var(--surface-3);
  margin: 8px auto 16px;
  cursor: grab;
  transition: background 0.2s, width 0.2s;
}
.sheet:active .sheet-grip { background: var(--ink-3); }

/* A sheet that must be answered does not pretend otherwise. */
#sheet-backdrop.locked { cursor: default; }
#sheet-backdrop.locked .sheet-grip { opacity: 0.25; cursor: default; }

/* Dragging is driven from JS, so the transition has to be off mid-drag and
   back on for the release; the inline style handles that. The sheet itself
   never scrolls horizontally. */
.sheet { overscroll-behavior: contain; }

/* ============================================================
   Confetti
   ============================================================ */

#confetti {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 180;
}

/* ============================================================
   Misc
   ============================================================ */

.divider { height: 1px; background: var(--line); margin: 4px 0; }

.pill-note {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 12.5px;
  font-weight: 620;
  color: var(--ink-2);
}

.empty {
  text-align: center;
  padding: 30px 20px;
  color: var(--ink-3);
  font-size: 14px;
}

.list-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 4px;
}

/* ============================================================
   Language toggle — top corner
   ============================================================ */

.lang-toggle {
  display: flex;
  gap: 3px;
  padding: 3px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  flex-shrink: 0;
}

.lang-toggle button {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  transition: background 0.24s var(--ease-out), color 0.24s, transform 0.18s var(--spring);
}

.lang-toggle button:active { transform: scale(0.92); }

.lang-toggle button.on {
  background: var(--lime);
  color: #0A1200;
}

.lang-flag { font-size: 14px; line-height: 1; }

/* Floating variant used on the home screen */
.home-top {
  position: absolute;
  top: calc(var(--sa-t) + 14px);
  right: var(--pad);
  z-index: 5;
}

/* ============================================================
   Category picker — men / women / managers
   ============================================================ */

.cat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.cat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 15px 6px 12px;
  border-radius: var(--r);
  background: var(--surface-2);
  border: 2px solid transparent;
  transition: transform 0.18s var(--spring), border-color 0.22s, background 0.22s;
}

.cat-card:active { transform: scale(0.94); }

.cat-card.on {
  border-color: var(--lime);
  background: rgba(200, 255, 77, 0.11);
}

.cat-emoji { font-size: 26px; line-height: 1; }

.cat-name {
  font-size: 12.5px;
  font-weight: 780;
  letter-spacing: -0.01em;
  text-align: center;
}

.cat-count {
  font-size: 10px;
  font-weight: 700;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.cat-card.on .cat-count { color: var(--lime-dim); }

/* ============================================================
   League / pack picker
   ============================================================ */

.league-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 8px;
}

.league-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 13px 6px 10px;
  border-radius: var(--r);
  background: var(--surface-2);
  border: 2px solid transparent;
  transition: transform 0.18s var(--spring), border-color 0.22s, background 0.22s;
  min-height: 88px;
}

.league-card:active { transform: scale(0.94); }

.league-card.on {
  border-color: var(--lime);
  background: rgba(200, 255, 77, 0.11);
}

.league-emoji { font-size: 24px; line-height: 1; }

.league-name {
  font-size: 11.5px;
  font-weight: 750;
  text-align: center;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.league-count {
  font-size: 10px;
  font-weight: 700;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.league-card.on .league-count { color: var(--lime-dim); }

/* ============================================================
   Two-imposter flag on the imposter card
   ============================================================ */

.partner-flag {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  max-width: 90%;
  text-align: center;
  animation: pop-in 0.5s var(--spring) both 0.35s;
}

/* Badge shown in the lobby / setup when two imposters are in play */
.imposter-count-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: center;
  padding: 9px 15px;
  border-radius: 999px;
  background: rgba(255, 69, 96, 0.12);
  border: 1px solid rgba(255, 69, 96, 0.3);
  color: #FF8A9C;
  font-size: 12.5px;
  font-weight: 750;
}

/* ============================================================
   Extra energy: pressable cards, gradient headings
   ============================================================ */

.mode-card {
  position: relative;
  overflow: hidden;
}

/* Light sweep across the mode cards on press */
.mode-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.09) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.6s var(--ease-out);
  pointer-events: none;
}

.mode-card:active::after { transform: translateX(100%); }

.mode-emoji {
  background: linear-gradient(150deg, var(--surface-3), var(--surface-2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* Big numbers feel better with a bit of glow */
.turn-name, .result-title, .code-value {
  text-wrap: balance;
}

.score-row .rank { font-size: 17px; }

/* Shorter phones: tighten vertical rhythm */
@media (max-height: 700px) {
  .logo-ball { font-size: 46px; }
  .timer-ring { width: 132px; height: 132px; }
  .timer-num { font-size: 40px; }
  .imposter-mask { font-size: 60px; }
  .result-badge { font-size: 58px; }
  .btn { min-height: 52px; padding: 13px 20px; }
  .photo-wrap, .imposter-face { max-height: 38vh; }

  /* Home: buy back enough vertical space that the two mode cards still fit
     at full size on a short phone, rather than pushing the screen into a
     scroll the moment the browser toolbar or the ad bar takes its cut. */
  .home { gap: 18px; }
  .home .content { gap: 10px; }
  .home .spacer { min-height: 2px; }
  .logo { gap: 2px; }
  .logo-title { font-size: clamp(30px, 9vw, 40px); }
  .mode-card { padding: 14px 16px; gap: 12px; }
  .mode-emoji { width: 46px; height: 46px; font-size: 24px; }
  .home-intro { font-size: 12.5px; line-height: 1.45; }
  .home-links { margin-top: 4px; }
}

/* ============================================================
   Avatars: emoji + gallery photos
   ============================================================ */

.avatar-photo { overflow: hidden; padding: 0; }

.avatar-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.avatar-emoji { font-size: 20px; }
.avatar-lg.avatar-emoji { font-size: 32px; }
.avatar-sm.avatar-emoji { font-size: 15px; }

.avatar-tappable {
  cursor: pointer;
  position: relative;
  transition: transform 0.18s var(--spring);
}
.avatar-tappable:active { transform: scale(0.88); }

.avatar-tappable::after {
  content: "✎";
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--surface-3);
  border: 1.5px solid var(--surface);
  color: var(--ink-2);
  font-size: 8px;
  display: grid;
  place-items: center;
}

.avatar-preview { display: flex; justify-content: center; }

.emoji-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
  gap: 7px;
}

.emoji-cell {
  aspect-ratio: 1;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 2px solid transparent;
  font-size: 24px;
  display: grid;
  place-items: center;
  transition: transform 0.16s var(--spring), border-color 0.2s, background 0.2s;
}

.emoji-cell:active { transform: scale(0.88); }
.emoji-cell.on { border-color: var(--lime); background: rgba(200, 255, 77, 0.12); }

/* ============================================================
   QR code in the lobby
   ============================================================ */

.qr-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.qr-box {
  width: 172px;
  max-width: 58vw;
  padding: 10px;
  background: #fff;
  border-radius: var(--r);
  box-shadow: 0 10px 30px -14px rgba(0, 0, 0, 0.7);
  animation: pop-in 0.45s var(--spring) both;
}

.qr-box svg { width: 100%; height: auto; display: block; }

/* ============================================================
   Winner screen
   ============================================================ */

.trophy {
  font-size: 84px;
  line-height: 1;
  animation: trophy-in 0.8s var(--spring) both;
  filter: drop-shadow(0 12px 34px rgba(255, 216, 77, 0.45));
}

@keyframes trophy-in {
  0%   { opacity: 0; transform: scale(0.2) rotate(-30deg); }
  60%  { transform: scale(1.18) rotate(8deg); }
  100% { opacity: 1; transform: none; }
}

.winner-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================================
   Stats
   ============================================================ */

.award-grid { display: flex; flex-direction: column; gap: 8px; }

.award {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--r);
  background: var(--surface-2);
  border: 1px solid var(--line);
}

.award-icon { font-size: 22px; flex-shrink: 0; }
.award-label { font-size: 11.5px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.award-name { font-size: 15.5px; font-weight: 750; letter-spacing: -0.015em; }
.award-value { font-size: 17px; font-weight: 800; color: var(--lime); font-variant-numeric: tabular-nums; }

.win-pct {
  font-size: 19px;
  font-weight: 800;
  color: var(--lime);
  font-variant-numeric: tabular-nums;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

.stat-cell {
  background: rgba(255, 255, 255, 0.04);
  border-radius: var(--r-sm);
  padding: 9px 4px;
  text-align: center;
}

.stat-value { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.stat-value.danger { color: var(--red); }
.stat-label { font-size: 9.5px; font-weight: 700; color: var(--ink-3); margin-top: 2px; line-height: 1.2; }

/* ============================================================
   Custom packs
   ============================================================ */

.pack-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  border-radius: var(--r);
  background: var(--surface-2);
  border: 1px solid var(--line);
  transition: transform 0.18s var(--spring), border-color 0.22s;
}

.pack-row:active { transform: scale(0.975); }

.pack-emoji {
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  background: var(--surface-3);
  display: grid;
  place-items: center;
  font-size: 22px;
  flex-shrink: 0;
}

.pack-name { font-size: 16.5px; font-weight: 750; letter-spacing: -0.015em; }

.entry-photo {
  width: 38px;
  height: 38px;
  border-radius: var(--r-sm);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--surface-3);
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 13px;
  color: var(--ink-3);
}

.entry-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.entry-photo.big { width: 78px; height: 78px; border-radius: var(--r); font-size: 30px; }

/* The "type a number" chip in the imposters row. Distinguished from the
   preset numbers so it does not read as just another value. */
.seg-more {
  flex: 0 0 auto;
  min-width: 44px;
  font-size: 13px;
  border: 1px dashed var(--line-strong);
}

.seg-more.on {
  border-style: solid;
  border-color: var(--lime);
}

/* ============================================================
   Tap targets
   ============================================================
   Two controls are visually small by design but were genuinely hard to hit:
   the language chips, and the remove button — which deletes a player, so a
   mis-tap actually costs something.

   The pseudo-element extends the touch area without changing the look or
   the layout, which is preferable to inflating the visuals. */

.remove-btn { position: relative; }
.remove-btn::after {
  content: "";
  position: absolute;
  inset: -9px;              /* 30px visual -> 48px target */
}

.lang-toggle button { position: relative; }
.lang-toggle button::after {
  content: "";
  position: absolute;
  inset: -7px 0;            /* 31px visual -> 45px target, no sideways overlap */
}

/* ============================================================
   Flowing list
   ============================================================
   `.list-scroll` claims the leftover height and scrolls inside itself, which
   is right when the list is the whole screen. On a screen with a lot above it
   — the lobby, with its QR code and room code — that leftover can shrink to
   a couple of rows, and players further down become unreachable.

   `.list-flow` takes its natural height and lets the screen scroll instead. */

.list-flow {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
}

/* ============================================================
   Vote clock + who has voted
   ============================================================ */

.vote-clock {
  display: flex;
  justify-content: center;
  margin: 4px 0 10px;
}

.voter-panel {
  margin-top: 6px;
}

.voter-panel .row-between {
  margin-bottom: 8px;
}

/* ============================================================
   Flowing screens
   ============================================================
   The default screen is a fixed-height flex column: `.content` takes the
   leftover space and any long list inside it scrolls on its own, which keeps
   the action button pinned. That works when the list is the whole screen.

   It fails on the lobby. With the QR block above it, `.content` gets clamped
   to a couple of rows, and because it has no overflow of its own the list
   spills out of its box and paints underneath the action button — names hidden
   behind "Start spillet".

   On a `.flow` screen `.content` refuses to shrink below its contents, so the
   list is laid out in full and the screen itself scrolls. The action bar then
   sticks to the bottom of the viewport: always reachable, never overlapping,
   with the list scrolling behind a solid backdrop. */

.screen.flow .content {
  flex: 1 0 auto;          /* grow to fill, but never shrink below content */
  min-height: 0;
}

.screen.flow .footer-actions {
  position: sticky;
  /* Cancel the screen's own bottom padding so the bar reaches the edge. */
  bottom: calc(var(--sa-b) * -1 - 16px);
  z-index: 4;
  padding-bottom: calc(var(--sa-b) + 16px);
  margin-bottom: calc(var(--sa-b) * -1 - 16px);
  background: linear-gradient(
    to bottom,
    transparent 0,
    var(--bg) 18px,
    var(--bg) 100%
  );
}

/* ============================================================
   Leave button + rejoin card
   ============================================================
   In-game screens have no header chevron, so the way out floats in the top
   corner instead. It sits above the screen content but stays visually quiet —
   it should be findable when someone wants it, not competing with the game. */

.leave-corner {
  position: absolute;
  top: calc(var(--sa-t) + 12px);
  left: var(--pad);
  z-index: 6;
}

.leave-btn {
  position: relative;
  flex: 0 0 auto;          /* sits in the header row beside the title */
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 7px 12px 7px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(12, 16, 15, 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  min-height: 34px;
}

.leave-btn span:first-child {
  font-size: 17px;
  line-height: 1;
  margin-top: -2px;
}

/* Small target by design, so widen the hit area without changing the look. */
.leave-btn::after {
  content: "";
  position: absolute;
  inset: -8px;
}

.leave-btn:active { transform: scale(0.94); }

/* The way back into a lobby you stepped out of — lead with it. */
.rejoin-card {
  border-color: rgba(200, 255, 77, 0.34);
}

/* A settings row that opens another page rather than holding a control. */
.setting-nav {
  flex-direction: row;     /* the base row stacks; this one sits on one line */
  align-items: center;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-bottom: 1px solid var(--line);
  color: inherit;
  font: inherit;
  gap: 10px;
}

.setting-nav:last-child { border-bottom: none; }
.setting-nav:active { opacity: 0.65; }

.setting-value {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-2);
  white-space: nowrap;
}

/* Home-screen intro. Quiet by design: it should read as a helpful line for
   someone who has never played, not as a block of marketing copy above the
   two buttons people actually came to press. */
.home-intro {
  max-width: 33ch;
  margin: 2px auto 0;
  text-align: center;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-3);
  text-wrap: pretty;
}

/* Links out to the static pages, under the home screen's footer line. */
.home-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 16px;
  margin-top: 10px;
}

.home-links a {
  position: relative;
  font-size: 12.5px;
  font-weight: 650;
  color: var(--ink-3);
  text-decoration: none;
}

.home-links a:hover { color: var(--ink-2); }

/* Small text, so widen the tap area without changing the look. */
.home-links a::after { content: ""; position: absolute; inset: -9px -6px; }

/* ============================================================
   Pre-rendered homepage
   ============================================================
   Real HTML shipped in index.html so a crawler — or a reader without
   JavaScript — gets the page's content without executing anything. app.js
   removes it as the game boots, so it is on screen for an instant at most. */

#prerender {
  max-width: 640px;
  margin: 0 auto;
  padding: 40px 22px 56px;
  color: var(--ink);
}

#prerender h1 {
  color: var(--lime);
  font-size: clamp(30px, 8vw, 42px);
  font-weight: 900;
  letter-spacing: -0.035em;
  margin-bottom: 14px;
}

#prerender p { margin-bottom: 14px; line-height: 1.6; color: var(--ink-2); }
#prerender .pr-lead { color: var(--ink); font-size: 17px; }
#prerender ul { margin: 0 0 16px 20px; color: var(--ink-2); line-height: 1.6; }
#prerender li { margin-bottom: 6px; }
#prerender a { color: var(--lime); }
#prerender .pr-fine { font-size: 13px; color: var(--ink-3); }