/* ============================================================
   garou-garou — design system
   Thème "nuit" : bleu-nuit profond, argent lunaire, or, sang.
   Mobile-first. Cibles tactiles >= 48px. Peu de frictions.
   ============================================================ */

:root {
  /* Dusk ground — soft twilight indigo, friendlier than pure black */
  --night-900: #14121f;
  --night-800: #1b1830;
  --night-700: #262138;
  --night-600: #322c4c;
  --night-500: #40385f;
  --night-400: #4f4675;

  /* Moonlight silvers + warm paper */
  --moon:      #f4f1e9;   /* warm off-white (primary text) */
  --moon-dim:  #cfd1e0;   /* soft silver */
  --silver:    #b6bad0;   /* moonlight silver — the star accent */
  --paper:     #f3ecdb;   /* cut-paper cream */
  --paper-2:   #e7ddc6;   /* deeper cream */
  --paper-ink: #2b2742;   /* ink on paper */

  /* "gold" kept as a NAME but holds a soft moon-silver so the whole app
     reads silver without touching every reference. */
  --gold:      #cfd2e3;
  --gold-lit:  #eef0f8;
  --gold-deep: #8f93b2;
  --candle:    #e9be92;   /* one gentle warm accent, used sparingly */

  /* Matisse cut-paper accents */
  --plum:      #9a7cc4;
  --sage:      #8bbd9f;
  --coral:     #ec8f70;
  --sky:       #83b3d8;

  --blood:     #c05a72;   /* softened berry, not harsh red */
  --blood-lit: #e58198;
  --moss:      #8bbd9f;

  /* Semantic */
  --bg:        var(--night-800);
  --surface:   var(--night-700);
  --surface-2: var(--night-600);
  --text:      var(--moon);
  --text-dim:  var(--moon-dim);
  --accent:    var(--silver);
  --danger:    var(--blood-lit);

  /* Metrics — a touch airier + organic */
  --tap: 52px;
  --r-sm: 14px;
  --r-md: 20px;
  --r-lg: 28px;
  --gap: clamp(16px, 4.5vw, 26px);
  --pad: clamp(20px, 5.5vw, 34px);

  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Soft silver sheen (replaces the gold foil) */
  --foil: linear-gradient(135deg, #9fa3bd 0%, #d7d9e6 30%, #f3f4fa 50%, #cbcedf 70%, #9498b6 100%);
  --foil-line: linear-gradient(90deg, transparent, rgba(182,186,208,.6) 25%, rgba(238,240,248,.9) 50%, rgba(182,186,208,.6) 75%, transparent);

  /* Paper-soft shadows (multi-layer, warm) */
  --shadow: 0 18px 40px -16px rgba(10, 8, 24, 0.75), 0 3px 10px -4px rgba(10,8,24,.5);
  --shadow-gold: 0 12px 26px -10px rgba(0,0,0,.5);
  --shadow-paper: 0 2px 0 rgba(0,0,0,.12), 0 10px 22px -12px rgba(10,8,24,.6);
  --ring: 0 0 0 3px rgba(154, 124, 196, 0.5);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

/* Paint the whole viewport (incl. iOS overscroll rubber-band) so no white
   ever shows when scrolling past the content. */
html {
  /* The whole ambient background lives on the root element so it ALWAYS covers
     the entire screen/canvas, independent of the app-shell or body height. This
     kills the "blue band at the bottom" that appeared whenever the shell came
     out shorter than the screen (iOS PWA dvh quirks, back-forward navigation). */
  background:
    radial-gradient(680px 520px at 12% 6%, rgba(154,124,196,.16), transparent 60%),
    radial-gradient(560px 460px at 92% 22%, rgba(139,189,159,.13), transparent 62%),
    radial-gradient(600px 400px at 50% -6%, rgba(243,236,219,.10), transparent 60%),
    linear-gradient(180deg, var(--night-700) 0%, var(--night-800) 50%, var(--night-900) 92%);
  background-color: var(--night-900);
  /* No rubber-band / overscroll bounce: the page never scrolls past its content
     (so a short page can't be dragged up to reveal the interface underneath). */
  overscroll-behavior: none;
  /* Clip horizontal overflow (no sideways scroll) WITHOUT turning the root into
     a scroll container — vertical scrolling stays on the viewport as normal. */
  overflow-x: clip;
  /* App feel: no visible scrollbars anywhere. */
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* old Edge */
}
*::-webkit-scrollbar { width: 0; height: 0; display: none; } /* WebKit/iOS */
* { min-width: 0; }           /* let flex/grid children shrink, never overflow */

body {
  /* Background lives on <html> now (see note above) so it always fills the
     screen; body stays transparent. */
  background: transparent;
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Decorative layers are FIXED to the viewport so they always cover the whole
   physical screen — even when the app-shell ends up shorter than the screen
   (iOS standalone PWA dvh quirks), which otherwise let the plain body gradient
   show through as a band at the bottom. */
.grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}
/* Matisse cut-paper collage — organic leaves, pebbles, stars. Fixed to the
   viewport so it always fills the screen (see .grain note above). */
.vignette {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  /* Soft atmospheric wash: the cut-paper shapes are kept faint and blurred so
     they read as ambient colour in the corners, never as loud blobs over the
     content. They also hug the screen edges so text sits on clean space. */
  opacity: 0.13;
  filter: blur(6px) saturate(0.85);
  background-repeat: no-repeat;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='190'%3E%3Cpath d='M75 5C30 40 8 95 30 150c30 40 78 30 96-10C150 95 120 30 75 5z' fill='%238bbd9f'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='130'%3E%3Cpath d='M20 60C10 20 60 2 100 12c46 12 52 62 24 92-30 32-86 22-104-14z' fill='%239a7cc4'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath d='M-4 60C4 20 44 6 78 18c34 12 40 58 18 84-26 30-72 20-88-14z' fill='%23d9b892'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46'%3E%3Cpath d='M23 0l6 17 17 6-17 6-6 17-6-17L0 23l17-6z' fill='%23ec8f70'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M20 0l5 15 15 5-15 5-5 15-5-15L0 20l15-5z' fill='%23e9be92'/%3E%3C/svg%3E");
  background-position:
    -70px -4%, calc(100% + 66px) 20%, -66px 70%, 92% 3%, 5% 96%;
  background-size: 150px 190px, 150px 130px, 120px 120px, 46px 46px, 40px 40px;
}
.app-shell { position: relative; z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  .grain { animation: grain-shift 6s steps(4) infinite; }
}
@keyframes grain-shift {
  /* Animate the texture via background-position, NOT transform: a transform on
     this full-bleed layer would push its box past the app-shell and add a few
     px of phantom vertical scroll. */
  0% { background-position: 0 0; } 25% { background-position: -4px 3px; }
  50% { background-position: 3px -4px; } 75% { background-position: -3px -3px; }
  100% { background-position: 0 0; }
}

.app-shell {
  max-width: 560px;
  margin-inline: auto;
  min-height: 100dvh;
  padding: max(env(safe-area-inset-top), 16px) var(--pad)
           max(env(safe-area-inset-bottom), 16px);
  display: flex;
  flex-direction: column;
}

/* ---- Typography ---------------------------------------------------------- */

.wordmark {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2.3rem, 13vw, 4.4rem);
  letter-spacing: 0.01em;
  line-height: 0.92;
  margin: 0;
  max-width: 100%;
  text-align: center;
  text-transform: lowercase;
  background: var(--foil);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 1px rgba(0,0,0,.5)) drop-shadow(0 0 26px rgba(240,212,133,.28));
  animation: foil-shine 9s linear infinite;
}
@keyframes foil-shine { to { background-position: 200% center; } }
.wordmark__dot {
  -webkit-text-fill-color: var(--candle);
  filter: drop-shadow(0 0 10px rgba(255,157,92,.6));
}

.tagline {
  text-align: center;
  color: var(--moon-dim);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(0.85rem, 3.6vw, 1.02rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  max-width: 30ch;
  margin: 16px auto 0;
  line-height: 1.5;
  position: relative;
}
.tagline::before, .tagline::after {
  content: "";
  display: block;
  width: 46px; height: 1px;
  margin: 12px auto;
  background: var(--foil-line);
}

/* ---- Landing ------------------------------------------------------------- */

.landing {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(16px, 4vw, 30px);
  justify-content: center;
  position: relative;
}
.landing__brand { margin-top: 0; }
.landing__actions { display: flex; flex-direction: column; gap: var(--gap); }
.landing__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-top: 8px;
  color: var(--text-dim);
}
.landing__card { display: flex; justify-content: center; }

.moon {
  position: absolute;
  top: -7vh;
  left: 50%;
  translate: -50% 0;
  width: min(260px, 62vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 66% 70%, rgba(140,134,170,.5) 0 4%, transparent 5%),
    radial-gradient(circle at 40% 58%, rgba(140,134,170,.45) 0 6%, transparent 7%),
    radial-gradient(circle at 58% 40%, rgba(140,134,170,.4) 0 5%, transparent 6%),
    radial-gradient(circle at 38% 32%, #fefdff, #d7d1f0 52%, #938db8 100%);
  box-shadow: 0 0 120px 36px rgba(200, 194, 235, 0.16), inset -18px -14px 40px rgba(60,54,90,.5);
  opacity: 0.32;
  pointer-events: none;
  z-index: 0;
}
.landing > * { position: relative; z-index: 1; }

/* ---- Buttons ------------------------------------------------------------- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--tap);
  padding: 0 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  overflow: hidden;
  transition: transform 0.09s ease, filter 0.15s ease, box-shadow 0.2s ease, border-color .2s ease;
  touch-action: manipulation;
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn--primary {
  color: #2a1d05;
  background: var(--foil);
  background-size: 200% auto;
  box-shadow: var(--shadow-gold), inset 0 1px 0 rgba(255,255,255,.5), inset 0 -2px 6px rgba(120,84,20,.4);
}
/* moving sheen sweep */
.btn--primary::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.55) 48%, transparent 62%);
  transform: translateX(-120%);
  transition: transform .6s ease;
}
.btn--primary:hover::after { transform: translateX(120%); }
.btn--primary:hover { filter: brightness(1.04); }
.btn--ghost {
  color: var(--moon);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
  border-color: rgba(240, 212, 133, 0.28);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.btn--ghost:hover { border-color: rgba(240,212,133,.5); color: var(--gold-lit); }
.btn--danger {
  color: #fff;
  background: linear-gradient(180deg, var(--blood-lit), var(--blood));
  box-shadow: 0 10px 26px -8px rgba(163,15,36,.5);
}
.btn--block { width: 100%; }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn[disabled] { opacity: .45; cursor: not-allowed; filter: grayscale(.3); }

/* ---- Pills & misc -------------------------------------------------------- */

.pill {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--silver);
  border: 1px solid rgba(157, 152, 192, 0.3);
  border-radius: 999px;
  padding: 4px 11px;
}
.version { margin-left: auto; font-size: 0.72rem; color: var(--silver); opacity: 0.7; }

.flash {
  padding: 12px 16px;
  border-radius: var(--r-sm);
  margin: 10px 0;
  font-size: 0.95rem;
}
.flash--error { background: rgba(179, 19, 42, 0.18); border: 1px solid var(--blood); }
.flash--ok { background: rgba(231, 198, 107, 0.12); border: 1px solid var(--gold-deep); }

/* ---- Role card 3D (foundation; enriched in the card feature) ------------- */

.role-card {
  --rx: 0deg;
  --ry: 0deg;
  /* One consistent card slot everywhere (home + in game): sized by height so
     it never crowds out the buttons, portrait, centred. */
  height: min(40vh, 356px);
  width: auto;
  aspect-ratio: 3 / 4.2;
  max-width: 92vw;
  border-radius: var(--r-lg);
  padding: 3px;
  box-shadow: var(--shadow), 0 0 40px -10px rgba(240,212,133,.3);
}
.role-card__inner {
  --gx: 50%;
  --gy: 50%;
  position: relative;
  height: 100%;
  border-radius: inherit;
  padding: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 50% 8%, rgba(240, 212, 133, 0.14), transparent 52%),
    radial-gradient(90% 70% at 50% 100%, rgba(122,90,150,.18), transparent 60%),
    linear-gradient(160deg, var(--night-500), var(--night-800));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 0 0 1px rgba(0,0,0,.4);
  transform-style: preserve-3d;
  will-change: transform;
}
/* Inner engraved frame + corner ticks */
.role-card__inner::before {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 14px;
  border: 1px solid rgba(240, 212, 133, 0.35);
  box-shadow: inset 0 0 24px rgba(0,0,0,.35);
  pointer-events: none;
  transform: translateZ(6px);
}
/* Holographic sheen that follows the tilt. */
.role-card__inner::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(60% 60% at var(--gx) var(--gy),
    rgba(255, 255, 255, 0.22), rgba(231, 198, 107, 0.10) 35%, transparent 65%);
  mix-blend-mode: screen;
  opacity: 0.9;
  transition: background 0.12s ease-out;
}
.role-card__glyph {
  font-size: clamp(3.2rem, 17vw, 5.2rem);
  line-height: 1;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.55));
  transform: translateZ(44px);
  position: relative;
}
.role-card__glyph::after {
  content: "";
  position: absolute;
  inset: -30% -30%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(240,212,133,.28), transparent 68%);
  filter: blur(6px);
}
.role-card__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.3rem, 6vw, 1.6rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--foil);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  transform: translateZ(28px);
}
.role-card__hint {
  color: var(--moon-dim);
  font-size: 0.86rem;
  font-style: italic;
  max-width: 24ch;
  line-height: 1.45;
  transform: translateZ(16px);
}

@media (prefers-reduced-motion: reduce) {
  .role-card__inner { transition: none; transform: none; }
}

/* ---- Forms & auth -------------------------------------------------------- */

.btn--sm { min-height: 42px; padding: 0 16px; font-size: 0.95rem; }

.back {
  position: sticky;
  top: max(env(safe-area-inset-top), 10px);
  z-index: 30;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--moon);
  text-decoration: none;
  font-size: 1.08rem;
  font-weight: 600;
  padding: 9px 17px;
  border-radius: 999px;
  background: rgba(18, 16, 30, 0.72);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  border: 1px solid rgba(182, 186, 208, 0.24);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.32);
  margin: 8px 0 20px;
}
.back:hover { color: var(--moon); background: rgba(30, 27, 48, 0.82); }

.auth {
  max-width: 420px; margin-inline: auto; width: 100%;
  flex: 1; display: flex; flex-direction: column; justify-content: center;
}
.auth__title {
  font-family: var(--font-display);
  font-size: 2rem;
  margin: 0;
  letter-spacing: 0.03em;
}
.auth__sub { color: var(--text-dim); margin: 6px 0 22px; }
.auth__alt { margin-top: 20px; color: var(--text-dim); text-align: center; }
.auth__alt a, .auth__sub a { color: var(--gold); }

.form { display: flex; flex-direction: column; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field > span { font-size: 0.9rem; color: var(--text-dim); }
.field small { color: var(--silver); font-size: 0.78rem; }
.field input, .field select, .field textarea {
  min-height: var(--tap);
  padding: 0 14px;
  border-radius: var(--r-sm);
  border: 1px solid rgba(157, 152, 192, 0.35);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);
  font: inherit;
  font-size: 1.05rem;
}
.field textarea { padding: 12px 14px; min-height: 96px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--gold-deep);
  box-shadow: var(--ring);
}

/* ---- MJ dashboard -------------------------------------------------------- */

.mj { width: 100%; padding-top: 2vh; }
.mj__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.mj__hello { color: var(--gold); font-size: 0.85rem; }
.mj__title { font-family: var(--font-display); font-size: 1.5rem; margin: 2px 0 0; }
.mj__section-head { display: flex; align-items: center; justify-content: space-between; margin: 26px 0 12px; }
.mj__section-head h2 { font-size: 1.1rem; margin: 0; color: var(--text-dim); font-weight: 600; }
.empty {
  color: var(--silver);
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed rgba(157, 152, 192, 0.3);
  border-radius: var(--r-md);
  padding: 24px;
  text-align: center;
}
.hint { color: var(--silver); text-align: center; font-size: 0.9rem; margin-top: 12px; }

/* ---- Game list / rows ---------------------------------------------------- */

.game-list, .player-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.game-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: var(--tap);
  padding: 12px 16px;
  border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid rgba(157, 152, 192, 0.14);
  text-decoration: none; color: var(--text);
}
.game-row:active { transform: scale(0.995); }
.game-row__name { font-weight: 600; }
.game-row__meta { display: flex; align-items: center; gap: 10px; }
.code, .invite__code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 0.15em;
  color: var(--gold);
}
.status {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.12em;
  padding: 3px 9px; border-radius: 999px; border: 1px solid transparent;
}
.status--lobby  { color: var(--silver); border-color: rgba(157,152,192,0.4); }
.status--active { color: #6be7a0; border-color: rgba(107,231,160,0.4); }
.status--ended  { color: var(--blood-lit); border-color: rgba(226,59,82,0.4); }

/* ---- Invite (QR) --------------------------------------------------------- */

.invite {
  margin-top: 22px; padding: 18px;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid rgba(231, 198, 107, 0.18);
}
.invite__h { margin: 0 0 14px; font-size: 1rem; color: var(--text-dim); }
.invite__grid { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.invite__qr { border-radius: var(--r-md); background: #fff; padding: 8px; }
.invite__side { flex: 1; min-width: 160px; }
.invite__label { font-size: 0.75rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.12em; }
.invite__code { font-size: 2rem; margin: 2px 0 8px; }
.invite__url { font-size: 0.8rem; color: var(--silver); word-break: break-all; }

/* ---- Players ------------------------------------------------------------- */

.player-row {
  display: flex; align-items: center; justify-content: space-between;
  min-height: var(--tap);
  padding: 8px 16px; border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid rgba(157, 152, 192, 0.12);
}
.player-row__pseudo { font-weight: 550; }

/* ---- Choices / switch ---------------------------------------------------- */

.choices { display: flex; flex-direction: column; gap: 10px; }
.choice { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px;
  border-radius: var(--r-md); background: rgba(255,255,255,0.03);
  border: 1px solid rgba(157,152,192,0.2); cursor: pointer; }
.choice input { margin-top: 3px; width: 20px; height: 20px; accent-color: var(--gold); }
.choice__body { display: flex; flex-direction: column; gap: 2px; }
.choice__body small { color: var(--silver); }
.choice:has(input:checked) { border-color: var(--gold-deep); background: rgba(231,198,107,0.08); }

.switch { display: flex; align-items: center; gap: 12px; padding: 12px 2px; cursor: pointer; }
.switch input { width: 22px; height: 22px; accent-color: var(--gold); }
.switch small { color: var(--silver); }

/* ---- Player view --------------------------------------------------------- */

.play { width: 100%; display: flex; flex-direction: column; min-height: 100dvh; }
.play__top { display: flex; align-items: center; justify-content: space-between; padding: 6px 0 18px; }
.play__game { color: var(--text-dim); font-size: 0.9rem; }
.play__me { color: var(--gold); font-weight: 600; }
.play__wait, .play__role { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; position: relative; }
.play__wait-inner h1 { font-family: var(--font-display); font-size: 1.6rem; margin: 0 0 8px; }
.play__wait-inner p { color: var(--text-dim); max-width: 30ch; margin: 0 auto; }
.spinner {
  width: 46px; height: 46px; border-radius: 50%;
  border: 3px solid rgba(157,152,192,0.25); border-top-color: var(--gold);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }

/* ---- Engine controls (MJ) ------------------------------------------------ */

.controls { margin-top: 22px; display: flex; flex-direction: column; gap: 12px; }
.role-tag {
  font-size: 0.75rem; padding: 3px 9px; border-radius: 999px; white-space: nowrap;
  border: 1px solid rgba(157,152,192,0.3); color: var(--text-dim);
}
.role-tag--loups   { color: var(--blood-lit); border-color: rgba(226,59,82,0.4); }
.role-tag--village { color: #7fd6a3; border-color: rgba(127,214,163,0.35); }
.role-tag--solo    { color: var(--gold); border-color: rgba(231,198,107,0.4); }
.inline { display: inline; }
.player-row select {
  min-height: 40px; background: rgba(255,255,255,0.04); color: var(--text);
  border: 1px solid rgba(157,152,192,0.3); border-radius: var(--r-sm); padding: 0 8px; font: inherit;
}
.action-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 12px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid rgba(157,152,192,0.14);
}
.action-row__who { flex: 1; min-width: 120px; display: flex; align-items: center; gap: 6px; }
.action-row select {
  min-height: 42px; background: rgba(255,255,255,0.04); color: var(--text);
  border: 1px solid rgba(157,152,192,0.3); border-radius: var(--r-sm); padding: 0 10px; font: inherit;
}
.deaths { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-direction: column; gap: 6px; }
.deaths .cause { color: var(--silver); font-size: 0.85rem; }
.note { color: var(--silver); font-size: 0.9rem; margin: 4px 0; }
.banner {
  margin-top: 18px; padding: 16px; border-radius: var(--r-md); text-align: center;
  background: rgba(231,198,107,0.12); border: 1px solid var(--gold-deep);
}
.role-rules {
  margin-top: 18px; max-width: 340px; text-align: left;
  background: rgba(14,12,26,0.82); border: 1px solid rgba(157,152,192,0.22);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  border-radius: var(--r-md); padding: 12px 16px;
}
.role-rules summary { cursor: pointer; color: var(--gold); font-weight: 600; }
.role-rules p { color: var(--text-dim); margin: 10px 0 0; line-height: 1.5; }
.role-card--loups .role-card__inner { border-color: rgba(226,59,82,0.4); }
.role-card--solo .role-card__inner { border-color: rgba(231,198,107,0.5); }
.motion-hint { color: var(--silver); font-size: 0.82rem; margin: 4px 0 0; opacity: 0.85; }

/* ---- Replay timeline ----------------------------------------------------- */

.timeline { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-direction: column; gap: 14px; }
.tl-item { display: flex; gap: 14px; align-items: flex-start; }
.tl-icon {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.1rem;
  background: var(--surface); border: 1px solid rgba(157,152,192,0.3);
}
.tl-body {
  flex: 1; padding: 12px 16px; border-radius: var(--r-md);
  background: var(--surface); border: 1px solid rgba(157,152,192,0.14);
}
.tl-title { font-weight: 650; margin-bottom: 4px; }
.tl-line { color: var(--text-dim); font-size: 0.95rem; }

/* ============================================================
   Micro-animations
   ============================================================ */

@keyframes fade-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes msg-in {
  from { opacity: 0; transform: translateY(6px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes moon-breathe {
  0%, 100% { opacity: 0.22; filter: saturate(0.9); }
  50%      { opacity: 0.32; filter: saturate(1.05); }
}
@keyframes card-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes pop-in {
  0%   { opacity: 0; transform: scale(0.9); }
  60%  { transform: scale(1.03); }
  100% { opacity: 1; transform: scale(1); }
}

/* Section entrances */
.landing, .auth, .mj, .play { animation: fade-up 0.5s ease both; }
.landing__brand { animation: fade-up 0.6s ease 0.05s both; }
.landing__card  { animation: pop-in 0.6s cubic-bezier(.2,.7,.3,1) 0.15s both; }
.landing__actions { animation: fade-up 0.6s ease 0.25s both; }
.landing__foot  { animation: fade-up 0.6s ease 0.35s both; }

/* Staggered lists */
.game-list li, .player-list li, .timeline .tl-item {
  animation: fade-up 0.4s ease both;
}
.game-list li:nth-child(2), .player-list li:nth-child(2), .tl-item:nth-child(2) { animation-delay: .04s; }
.game-list li:nth-child(3), .player-list li:nth-child(3), .tl-item:nth-child(3) { animation-delay: .08s; }
.game-list li:nth-child(4), .player-list li:nth-child(4), .tl-item:nth-child(4) { animation-delay: .12s; }
.game-list li:nth-child(n+5), .player-list li:nth-child(n+5), .tl-item:nth-child(n+5) { animation-delay: .16s; }

/* New chat messages slide in as they arrive over SSE */
.msg { animation: msg-in 0.28s ease both; }

/* Ambient life (the role card's own 3D sway is defined near the wooden card) */
.moon { animation: moon-breathe 7s ease-in-out infinite; }

/* Button feedback */
.btn { transition: transform .08s ease, filter .15s ease, background .15s ease, box-shadow .2s ease; }
.btn--primary:hover { transform: translateY(-1px); }
.btn--primary:active { transform: translateY(1px) scale(.99); }
.game-row, .player-row, .action-row { transition: transform .1s ease, border-color .2s ease, background .2s ease; }
.game-row:hover { border-color: rgba(231,198,107,.3); }

@media (prefers-reduced-motion: reduce) {
  .landing, .auth, .mj, .play, .landing__brand, .landing__card, .landing__actions,
  .landing__foot, .game-list li, .player-list li, .tl-item, .msg,
  .moon, .role-card__inner {
    animation: none !important;
  }
  .btn--primary:hover { transform: none; }
}

/* ============================================================
   Update-available banner
   ============================================================ */

.update-bar {
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: max(16px, env(safe-area-inset-bottom));
  max-width: 520px;
  margin: 0 auto;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 8px 8px 18px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--night-500), var(--night-700));
  border: 1px solid rgba(231, 198, 107, 0.4);
  box-shadow: var(--shadow);
  color: var(--text);
  font-size: 0.95rem;
  animation: fade-up 0.4s ease both;
}
.update-bar[hidden] { display: none; }
.update-bar__btn {
  flex: none;
  min-height: 40px;
  padding: 0 16px;
  border: none;
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  font-size: .82rem;
  white-space: nowrap;
  color: #2a1d05;
  background: var(--foil);
  cursor: pointer;
}
.update-bar span {
  font-style: italic;
  color: var(--moon-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================
   Brand refinements — gilt surfaces, display headings, chat
   ============================================================ */

.auth__title, .mj__title {
  background: linear-gradient(180deg, var(--moon), var(--silver));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  letter-spacing: 0.03em;
}
.auth__sub { font-style: italic; }

.mj__section-head h2, .invite__h, .channel__h,
.night-action h2, .outre h2, .ghost-panel > h2 {
  font-family: var(--font-display);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.92rem;
  color: var(--gold);
  font-weight: 600;
}

/* Unified gilt surface treatment */
.game-row, .player-row, .invite, .channel, .night-action,
.empty, .ghost-panel, .role-rules, .controls > form .btn--ghost {
  border-color: rgba(240, 212, 133, 0.14);
}
.invite, .night-action, .ghost-panel {
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.04);
}

/* QR gets a gilded frame */
.invite__qr {
  border: 2px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    var(--foil) border-box;
}
.invite__code { background: var(--foil); background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent; letter-spacing: .12em; }

/* Chat bubbles — candlelit vellum */
.msg {
  background: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
  border: 1px solid rgba(240, 212, 133, 0.10);
}
.msg__who { font-family: var(--font-display); font-weight: 600; letter-spacing: .02em; }

/* Pills & status → engraved small-caps */
.pill, .status, .role-tag {
  font-family: var(--font-display);
  font-weight: 600;
}
.pill { border-color: rgba(240,212,133,.25); color: var(--gold); }

/* Status/phase chip in the MJ header */
.status--active { background: rgba(127,214,163,.08); }
.status--lobby  { background: rgba(156,150,194,.06); }
.status--ended  { background: rgba(232,69,92,.08); }

/* Section headings across auth/mj use display already; tighten hint */
.hint { font-style: italic; }

/* Landing action buttons — a touch grander */
.landing__actions .btn { font-size: 1rem; min-height: 56px; }

/* Waiting spinner → moon ring */
.spinner { border-top-color: var(--gold); }

/* ============================================================
   Grimoire (role compendium)
   ============================================================ */

.grimoire-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--gold);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  text-align: center;
  margin: 4px auto 0;
  padding: 6px 4px;
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, color .2s ease;
}
.grimoire-link:hover { color: var(--gold-lit); border-color: rgba(240,212,133,.4); }

.grimoire { width: 100%; animation: fade-up 0.5s ease both; }
.grimoire__head { text-align: center; margin: 4px 0 22px; }
.grimoire__title {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(2rem, 9vw, 2.8rem);
  letter-spacing: 0.04em;
  margin: 0;
  background: var(--foil); background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 20px rgba(240,212,133,.2));
}
.grimoire__sub { color: var(--moon-dim); font-style: italic; margin: 6px 0 0; }
.grimoire__section { margin-bottom: 26px; }
.grimoire__label {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.82rem;
  color: var(--silver);
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid;
  border-image: var(--foil-line) 1;
}
.grimoire__list { display: flex; flex-direction: column; gap: 12px; }

.grim-entry {
  display: flex;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--surface), color-mix(in oklab, var(--surface) 88%, black));
  border: 1px solid rgba(157, 152, 192, 0.14);
  border-left: 3px solid rgba(157,152,192,.3);
  animation: fade-up 0.4s ease both;
}
.grim-entry--village { border-left-color: rgba(127,214,163,.6); }
.grim-entry--loups   { border-left-color: rgba(232,69,92,.7); }
.grim-entry--solo    { border-left-color: rgba(240,212,133,.7); }
.grim-entry--mine {
  background: linear-gradient(180deg, rgba(240,212,133,.08), rgba(240,212,133,.02));
  border-color: rgba(240,212,133,.35);
}
.grim-entry__glyph {
  flex: none;
  font-size: 2rem;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, rgba(240,212,133,.14), transparent 70%),
              var(--night-700);
  border: 1px solid rgba(240,212,133,.2);
}
.grim-entry__body { flex: 1; min-width: 0; }
.grim-entry__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.grim-entry__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.06rem;
  margin: 0;
  letter-spacing: 0.02em;
}
.grim-entry__mine {
  font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: #2a1d05; background: var(--foil); padding: 2px 8px; border-radius: 999px; font-weight: 700;
}
.grim-entry__summary { color: var(--text-dim); margin: 6px 0 0; line-height: 1.45; font-size: 0.95rem; }
.grim-entry__rules { margin-top: 8px; }
.grim-entry__rules summary { cursor: pointer; color: var(--gold); font-size: 0.85rem; font-weight: 600; font-family: var(--font-display); letter-spacing: .03em; }
.grim-entry__rules p { color: var(--moon-dim); margin: 8px 0 0; line-height: 1.55; font-size: 0.92rem; }

/* ---- Custom composition builder (MJ) ------------------------------------- */

.compo #compo-form { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.compo-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 48px; padding: 6px 14px;
  border-radius: var(--r-sm);
  background: var(--surface);
  border: 1px solid rgba(157, 152, 192, 0.12);
  border-left: 3px solid rgba(157,152,192,.3);
}
.compo-row--village { border-left-color: rgba(127,214,163,.6); }
.compo-row--loups   { border-left-color: rgba(232,69,92,.7); }
.compo-row--solo    { border-left-color: rgba(240,212,133,.7); }
.compo-row__label { font-size: 0.95rem; }
.compo-count {
  width: 66px; min-height: 40px; text-align: center;
  border-radius: var(--r-sm);
  border: 1px solid rgba(240,212,133,.3);
  background: rgba(255,255,255,.04); color: var(--text); font: inherit; font-size: 1.05rem;
}
.compo-count:focus { outline: none; border-color: var(--gold-deep); box-shadow: var(--ring); }
.compo #compo-form .btn { margin-top: 6px; }
.compo__summary { cursor: pointer; font-family: var(--font-display); font-size: 1rem; color: var(--silver); }
.compo__opt { color: var(--moon-dim); font-style: italic; font-size: .85rem; }

/* ============================================================
   PAPIERS DE LUNE — friendly moonlit paper-collage skin
   (final overrides: less formal, silver, cut-paper)
   ============================================================ */

/* No shouty caps / heavy tracking anywhere */
.wordmark, .tagline, .btn, .pill, .status, .role-tag, .auth__title, .mj__title,
.mj__section-head h2, .invite__h, .channel__h, .night-action h2, .outre h2,
.ghost-panel > h2, .grimoire__title, .grimoire__label, .role-card__name,
.update-bar__btn, .grim-entry__name, .grim-entry__rules summary, .grimoire-link,
.grim-entry__mine, .btn--sm {
  text-transform: none;
  letter-spacing: normal;
}

/* Wordmark — soft moonlit silver, lowercase, friendly */
.wordmark {
  font-weight: 600;
  font-optical-sizing: auto;
  background: linear-gradient(180deg, #f6f2ea, var(--silver));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.35));
  animation: none;
}
.wordmark__dot { -webkit-text-fill-color: var(--coral); filter: drop-shadow(0 0 8px rgba(236,143,112,.5)); }
.tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  color: var(--moon-dim);
  font-size: clamp(1rem, 4.4vw, 1.18rem);
}
.tagline::before, .tagline::after { display: none; }

/* Buttons → soft paper chips */
.btn { font-family: var(--font-body); font-weight: 700; font-size: 1rem; border-radius: 16px; }
.btn--primary {
  color: var(--paper-ink);
  background: linear-gradient(180deg, #f7f1e4, #e7ddc6);
  box-shadow: var(--shadow-paper), inset 0 1px 0 rgba(255,255,255,.65);
}
.btn--primary::after { display: none; }
.btn--primary:hover { transform: translateY(-2px); filter: brightness(1.02); }
.btn--ghost {
  color: var(--moon);
  background: rgba(255,255,255,.055);
  border-color: rgba(182,186,208,.35);
  box-shadow: var(--shadow-paper);
}
.btn--ghost:hover { color: var(--moon); border-color: var(--silver); transform: translateY(-2px); }

/* Surfaces → layered cut-paper */
.game-row, .player-row, .invite, .channel, .night-action, .empty, .ghost-panel,
.role-rules, .grim-entry, .tl-body, .banner, .outre, .haunts, .compo-row, .action-row {
  box-shadow: var(--shadow-paper);
  border-radius: 18px;
}
.game-row, .grim-entry, .invite { border-radius: 22px; }
.grim-entry:nth-child(odd)  { transform: rotate(-0.5deg); }
.grim-entry:nth-child(even) { transform: rotate(0.5deg); }
.grim-entry:hover { transform: rotate(0deg) translateY(-3px); }

/* Headings — friendly silver Fraunces (sentence case) */
.auth__title, .mj__title, .grimoire__title {
  font-family: var(--font-display);
  font-weight: 600;
  background: linear-gradient(180deg, var(--moon), var(--silver));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: none;
}
.mj__section-head h2, .invite__h, .channel__h, .night-action h2, .outre h2,
.ghost-panel > h2, .grimoire__label {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--silver);
  font-size: 1rem;
  border-image: none;
  border-bottom: none;
}

/* Pills / tags → pastel paper chips */
.pill, .status, .role-tag { font-family: var(--font-body); font-weight: 600; }
.pill { color: var(--silver); border-color: rgba(182,186,208,.3); background: rgba(255,255,255,.05); }
.role-tag--village { color: var(--sage); }
.role-tag--loups   { color: var(--blood-lit); }
.role-tag--solo    { color: var(--candle); }
.grimoire-link { color: var(--silver); font-family: var(--font-body); }
.grimoire-link:hover { color: var(--moon); border-color: var(--silver); }

/* Role card → cut-paper collage (cream sheet, ink text, organic halo) */
.role-card { background: none; padding: 0; box-shadow: none; }
.role-card__inner {
  background: linear-gradient(168deg, #f7f1e4 0%, #ece1ca 100%);
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(255,255,255,.45);
  border-radius: 26px;
}
.role-card__inner::before { border-color: rgba(43,39,66,.16); box-shadow: none; }
.role-card__inner::after {
  background: radial-gradient(58% 58% at var(--gx) var(--gy), rgba(255,255,255,.55), transparent 62%);
  mix-blend-mode: soft-light; opacity: .7;
}
.role-card__glyph::after { background: radial-gradient(circle, rgba(154,124,196,.4), transparent 66%); }
.role-card--loups .role-card__glyph::after { background: radial-gradient(circle, rgba(229,129,152,.45), transparent 66%); }
.role-card--solo  .role-card__glyph::after { background: radial-gradient(circle, rgba(233,190,146,.5), transparent 66%); }
.role-card__name { background: none; -webkit-text-fill-color: currentColor; color: var(--paper-ink); font-weight: 600; }
.role-card__hint { color: rgba(43,39,66,.72); font-style: normal; }

/* Role rules / details on the play page */
.role-rules summary, .grim-entry__rules summary { color: var(--silver); font-family: var(--font-body); }

/* Update bar + copy feedback */
.update-bar { border-color: rgba(182,186,208,.4); }
.update-bar span { font-style: normal; color: var(--moon-dim); }
.update-bar__btn { color: var(--paper-ink); background: linear-gradient(180deg,#f7f1e4,#e7ddc6); font-family: var(--font-body); }
.copy-btn { margin: 4px 0; }
.copy-btn.is-copied { color: var(--sage); border-color: rgba(139,189,159,.6); }

/* Airier landing + softer moon */
.landing { gap: clamp(22px, 7vw, 46px); }
.moon { opacity: 0.42; }

/* ============================================================
   Admin panel + 6-pane debug view
   ============================================================ */

.mj__top-actions { display: flex; gap: 8px; align-items: center; }

.admin-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.admin-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 16px; border-radius: 16px;
  background: var(--surface); box-shadow: var(--shadow-paper);
}
.admin-row__main { font-weight: 600; }
.admin-row__meta { display: flex; align-items: center; gap: 10px; }
.admin-email { color: var(--silver); font-size: 0.82rem; }

.admin-game {
  padding: 14px 16px; border-radius: 18px;
  background: var(--surface); box-shadow: var(--shadow-paper);
  display: flex; flex-direction: column; gap: 8px;
}
.admin-game__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.admin-game__name { font-weight: 650; font-size: 1.05rem; }
.admin-game__meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--text-dim); font-size: 0.9rem; }
.admin-game__actions { display: flex; gap: 8px; margin-top: 4px; }

/* Debug split — breaks out of the centered shell, full viewport */
.debug {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  background: var(--night-900);
}
.debug__bar {
  display: flex; align-items: center; gap: 12px;
  padding: 8px max(12px, env(safe-area-inset-left)) 8px 12px;
  min-height: 52px;
  background: var(--night-800);
  border-bottom: 1px solid rgba(182,186,208,.15);
}
.debug__back { color: var(--moon); text-decoration: none; font-size: 1.3rem; padding: 0 6px; }
.debug__title { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; }
.debug__meta { display: flex; align-items: center; gap: 8px; margin-left: auto; margin-right: 8px; }
.debug__grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(var(--cols, 3), 1fr);
  /* Comfortable minimum height per pane; the grid scrolls vertically when the
     rows don't all fit (short content still stretches to fill the screen). */
  grid-auto-rows: minmax(300px, 1fr);
  gap: 8px;
  padding: 8px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.debug__pane {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: var(--night-800);
  border: 1px solid rgba(182,186,208,.2);
  box-shadow: var(--shadow-paper);
  min-height: 0;
}
.debug__pane--mj { border-color: rgba(154,124,196,.55); }
.debug__pane iframe { width: 100%; height: 100%; border: 0; display: block; background: var(--night-900); }
.debug__label {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  max-width: calc(100% - 16px);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 0.72rem; font-weight: 700;
  padding: 3px 10px; border-radius: 999px;
  /* Per-player colour from the pseudo hash (see the `hue` template func). */
  background: hsl(var(--h, 258) 46% 40%);
  color: #fff;
  border: 1px solid hsl(var(--h, 258) 55% 64%);
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
  pointer-events: none;
}
.debug__label--mj { background: linear-gradient(180deg, #5a4a86, #40356b); border-color: rgba(196,178,236,.7); }
.debug__label--dead { filter: grayscale(.75); opacity: .68; }
.debug__pane--empty { display: grid; place-items: center; color: var(--silver); opacity: .4; font-style: italic; }

@media (max-width: 720px) {
  .debug__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: minmax(280px, 1fr); }
}

/* ============================================================
   Role collage art (per-role artwork) + caption
   ============================================================ */

.role-card__inner { padding: 0; }
.role-card__inner .art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  display: block;
}

.role-caption { text-align: center; margin-top: 16px; }
.role-caption__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.25rem, 6vw, 1.5rem);
  color: var(--moon);
}
.role-caption__summary {
  color: var(--moon-dim);
  margin: 5px auto 0;
  font-size: 0.95rem;
  max-width: 30ch;
  line-height: 1.45;
}

/* Grimoire thumbnails become mini collages */
.grim-entry__art {
  flex: none;
  width: 58px; height: 58px;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: var(--shadow-paper);
  border: 1px solid rgba(43,39,66,.12);
}
.grim-entry__art .art { width: 100%; height: 100%; display: block; }

/* Grimoire entries are links to the role's card page */
a.grim-entry { text-decoration: none; color: inherit; cursor: pointer; }
a.grim-entry:hover { transform: rotate(0deg) translateY(-3px); border-color: rgba(240,236,219,.25); }
.grim-entry__more {
  display: inline-block;
  margin-top: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--silver);
}
a.grim-entry:hover .grim-entry__more { color: var(--moon); }

/* Dedicated role page */
.rolepage { width: 100%; animation: fade-up 0.5s ease both; }
.rolepage .play__role { justify-content: flex-start; padding-top: 2vh; }
.rolepage__tag { margin-top: 4px; }

/* Motion activation button (iOS needs a tap to enable the tilt) */
.motion-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 14px auto 0;
  padding: 8px 18px;
  min-height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(182, 186, 208, 0.4);
  background: rgba(255, 255, 255, 0.06);
  color: var(--silver);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform .1s ease, border-color .2s ease, color .2s ease;
}
.motion-btn:hover { color: var(--moon); border-color: var(--silver); }
.motion-btn:active { transform: scale(0.97); }
.motion-btn[disabled] { opacity: 0.75; cursor: default; }

/* ============================================================
   Wooden 3D card object — the role card feels like a carved
   wooden tile with real thickness (rotates with the tilt).
   ============================================================ */

.role-card { perspective: 560px; }

/* Autonomous 3D sway so the card always visibly moves as an object, even
   without the accelerometer. JS overrides this (animation:none) once pointer
   or motion input takes over. */
@keyframes card-sway {
  0%   { transform: rotateY(-12deg) rotateX(6deg); }
  50%  { transform: rotateY(12deg) rotateX(-5deg); }
  100% { transform: rotateY(-12deg) rotateX(6deg); }
}

.role-card__inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;      /* override the old center → art fills the width */
  justify-content: flex-start;
  gap: 0;
  padding: 0;
  overflow: visible; /* keep preserve-3d so the wood thickness shows when tilted */
  animation: card-sway 5.5s ease-in-out infinite;
  /* Warm wood with fine grain striations */
  background:
    repeating-linear-gradient(94deg, rgba(60,38,18,.20) 0 1px, transparent 1px 6px),
    repeating-linear-gradient(91deg, rgba(255,226,176,.06) 0 2px, transparent 2px 10px),
    linear-gradient(152deg, #8c6239 0%, #6c4324 52%, #7d5230 100%);
  box-shadow:
    0 26px 46px -14px rgba(0,0,0,.75),
    inset 0 2px 0 rgba(255,231,193,.32),
    inset 0 -5px 12px rgba(38,22,9,.6),
    inset 0 0 0 1px rgba(38,22,9,.45);
}

/* Wooden slab behind the face → visible thickness when the card tilts */
.role-card__inner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(152deg, #4a3016, #331f0d);
  transform: translateZ(-20px);
  box-shadow: 0 20px 28px -8px rgba(0,0,0,.6);
  border: none;
}
.role-card__inner::after { z-index: 4; }  /* glossy highlight on top */

/* The illustration sits framed by wood at the top */
.role-card__art {
  position: relative;
  flex: 1;
  min-height: 0;
  margin: 14px 14px 0;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(38,22,9,.55), 0 3px 10px rgba(0,0,0,.4);
  z-index: 2;
}
.role-card__art .art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Carved nameplate on the wood at the bottom */
.role-card__plate {
  flex: none;
  z-index: 2;
  padding: 13px 14px 15px;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.1rem, 5.4vw, 1.45rem);
  line-height: 1.15;
  color: #f1e3c6;
  text-shadow: 0 1px 0 rgba(0,0,0,.6), 0 -1px 0 rgba(255,222,176,.14);
}
.plate-dot { color: var(--coral); }

/* The landing wolf card uses the same consistent card slot as in-game */
.landing__card { display: flex; justify-content: center; }

.role-sub {
  color: var(--moon-dim);
  text-align: center;
  margin: 14px auto 0;
  max-width: 32ch;
  font-size: 0.98rem;
  line-height: 1.45;
}

/* ---- Night action + channels (player) ------------------------------------ */

.night-action {
  margin-top: 20px; padding: 18px;
  border-radius: var(--r-lg);
  background: radial-gradient(120% 100% at 50% 0, rgba(39,34,67,0.9), var(--surface));
  border: 1px solid rgba(231,198,107,0.28);
}
.night-action h2 { margin: 0 0 14px; font-size: 1.15rem; font-family: var(--font-display); }
.night-action .field select { min-height: var(--tap); }

.channel {
  margin-top: 18px; padding: 14px;
  border-radius: var(--r-md);
  background: var(--surface); border: 1px solid rgba(157,152,192,0.16);
}
.channel__h { margin: 0 0 10px; font-size: 1rem; }
.messages { display: flex; flex-direction: column; gap: 6px; max-height: 260px; overflow-y: auto; padding-right: 4px; }
.msg { padding: 8px 12px; border-radius: 12px; background: rgba(255,255,255,0.04); font-size: 0.95rem; }
.msg__who { color: var(--gold); font-weight: 600; margin-right: 6px; }
.msg__body { color: var(--text); overflow-wrap: anywhere; }
.chat-form { display: flex; gap: 8px; margin-top: 10px; }
.chat-form input {
  flex: 1; min-height: var(--tap); padding: 0 14px;
  border-radius: var(--r-sm); border: 1px solid rgba(157,152,192,0.3);
  background: rgba(255,255,255,0.03); color: var(--text); font: inherit;
}
.chat-form input:focus { outline: none; border-color: var(--gold-deep); box-shadow: var(--ring); }

/* ---- Push / notifications ------------------------------------------------ */

.push { margin: 6px 0 10px; }
.ios-tut {
  margin-top: 10px; padding: 12px 14px; font-size: 0.9rem; line-height: 1.5;
  color: var(--text-dim); background: rgba(231,198,107,0.08);
  border: 1px solid rgba(231,198,107,0.28); border-radius: var(--r-md);
}
.ios-share { color: var(--gold); white-space: nowrap; }
.notify-grid { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---- Ghost mode ---------------------------------------------------------- */

.outre {
  margin-top: 18px; padding: 16px 18px; border-radius: var(--r-md);
  background: radial-gradient(120% 100% at 50% 0, rgba(39,34,67,0.9), var(--night-800));
  border: 1px solid rgba(157,152,192,0.3);
}
.outre h2 { margin: 0 0 8px; font-size: 1rem; font-family: var(--font-display); }
.outre__msg { margin: 0; font-style: italic; color: var(--moon-dim); line-height: 1.6; }
.haunts { margin-top: 14px; padding: 14px 16px; border-radius: var(--r-md);
  background: rgba(179,19,42,0.10); border: 1px solid rgba(226,59,82,0.3); }
.haunts h2 { margin: 0 0 8px; font-size: 0.95rem; }
.haunt { margin: 4px 0; color: var(--moon); font-style: italic; }

.ghost-panel {
  margin-top: 18px; padding: 16px; border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid rgba(157,152,192,0.25);
}
.ghost-panel > h2 { margin: 0 0 14px; font-size: 1.05rem; font-family: var(--font-display); }
.ghost-board { margin-bottom: 12px; }
.ghost-board h3 { margin: 0 0 6px; font-size: 0.85rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.1em; }
.ghost-board ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.ghost-board li { color: var(--gold); font-size: 0.95rem; }
.ghost-block { margin-top: 10px; border-top: 1px solid rgba(157,152,192,0.15); padding-top: 10px; }
.ghost-block summary { cursor: pointer; font-weight: 600; color: var(--silver); }
.ghost-block .form, .ghost-block .chat-form { margin-top: 12px; }
.haunt-input {
  min-height: var(--tap); padding: 0 14px; border-radius: var(--r-sm);
  border: 1px solid rgba(157,152,192,0.3); background: rgba(255,255,255,0.03);
  color: var(--text); font: inherit;
}

/* ============================================================
   Role card — two-sided fidget-flip object (authoritative)
   ============================================================ */
.role-card { perspective: 620px; padding: 0; background: none; box-shadow: none; }
.role-card__inner {
  position: relative;
  height: 100%;
  transform-style: preserve-3d;
  transform: none;   /* JS drives the transform every frame */
  animation: none;   /* JS handles idle sway */
  will-change: transform;
  overflow: visible;
  display: block;
}
.role-card__inner::before, .role-card__inner::after { content: none; display: none; }

.role-card__front, .role-card__back {
  position: absolute;
  inset: 0;
  border-radius: 26px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  background:
    repeating-linear-gradient(94deg, rgba(60,38,18,.20) 0 1px, transparent 1px 6px),
    linear-gradient(152deg, #8c6239 0%, #6c4324 52%, #7d5230 100%);
  box-shadow:
    0 26px 46px -14px rgba(0,0,0,.75),
    inset 0 2px 0 rgba(255,231,193,.30),
    inset 0 -5px 12px rgba(38,22,9,.6),
    inset 0 0 0 1px rgba(38,22,9,.5);
}
.role-card__front::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  z-index: 2;
  background:
    radial-gradient(46% 40% at var(--gx,50%) var(--gy,50%), rgba(255,255,255,.5), transparent 70%),
    radial-gradient(92% 86% at var(--gx,50%) var(--gy,50%), rgba(255,248,224,.24), transparent 80%);
  mix-blend-mode: screen; opacity: .5;
}
.role-card__front { transform: rotateY(0deg) translateZ(4px); }
.role-card__back {
  transform: rotateY(180deg) translateZ(4px);
  align-items: center;
  justify-content: center;
  gap: 18px;
}
/* A tiny real thickness that follows the card's rounded outline: a stack of
   rounded-rect slices between the two faces (±4px). Head-on they hide behind
   the front face; when the card tilts or flips their edges form the wood rim,
   and since every slice is itself rounded, the rim respects the border-radius.
   The slices are injected BEFORE the faces in the DOM so that, when a slice and
   a face end up near-coplanar, WebKit paints the face on top (no brown block). */
.role-card__slice {
  position: absolute; inset: 0;
  border-radius: 26px;
  background: linear-gradient(150deg, #7d5230, #5a3820 55%, #46290f);
  pointer-events: none;
}
.role-card__back::before {
  content: "";
  position: absolute;
  inset: 16px;
  border-radius: 16px;
  border: 1px solid rgba(241,227,198,.22);
  box-shadow: inset 0 0 0 5px rgba(38,22,9,.22);
  pointer-events: none;
}
.role-card__crest { position: relative; z-index: 1; width: 104px; height: 104px; }

.role-card__art {
  position: relative; flex: 1; min-height: 0;
  margin: 14px 14px 0; border-radius: 15px; overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(38,22,9,.55), 0 3px 10px rgba(0,0,0,.4);
}
.role-card__art .art { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.role-card__plate {
  flex: none; padding: 13px 14px 15px; text-align: center;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.1rem, 5.4vw, 1.45rem); line-height: 1.15;
  color: #f1e3c6; text-shadow: 0 1px 0 rgba(0,0,0,.6), 0 -1px 0 rgba(255,222,176,.14);
}
/* Card back: a carved crescent moon + wordmark */
.role-card__crest {
  width: 96px; height: 96px; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #fefdf7, #e7d7ad 70%, #c9b078);
  box-shadow: inset -26px -8px 0 -4px #5c3d22, 0 2px 6px rgba(0,0,0,.4);
}
.role-card__backname {
  font-family: var(--font-display); font-weight: 600; font-size: 1.35rem;
  color: #f1e3c6; text-shadow: 0 1px 0 rgba(0,0,0,.6), 0 -1px 0 rgba(255,222,176,.14);
}
.plate-dot { color: var(--coral); }
.role-flip-hint { opacity: .65; font-size: .88em; }

/* ---- Grimoire filters ---------------------------------------------------- */
.grim-filters {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 4px 0 18px;
  justify-content: center;
}
.grim-filter {
  min-height: 38px; padding: 0 15px;
  border-radius: 999px;
  border: 1px solid rgba(182,186,208,.28);
  background: rgba(255,255,255,.05);
  color: var(--moon-dim);
  font-family: var(--font-body); font-weight: 600; font-size: .9rem;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.grim-filter:hover { color: var(--moon); border-color: var(--silver); }
.grim-filter.is-on {
  color: var(--paper-ink);
  background: linear-gradient(180deg, #f7f1e4, #e7ddc6);
  border-color: transparent;
}

/* ---- MJ / form controls: consistent non-native look ---------------------- */
.mj select, .mj input[type="number"], .mj input[type="text"],
.field select {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
}
.mj select, .field select {
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23b6bad0' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 13px center;
  background-size: 11px 8px;
}
.mj input[type="number"]::-webkit-inner-spin-button,
.mj input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.mj input[type="number"] { -moz-appearance: textfield; }
/* Player row: wrap nicely with the new "voir comme" (admin) control. */
.player-row { flex-wrap: wrap; gap: 8px 10px; justify-content: flex-start; }
.player-row__pseudo { flex: 0 0 auto; }
/* All row controls stay welded together and wrap to the next line AS ONE block,
   so the ✕ never drops onto its own line for longer pseudos. */
.player-row__controls {
  display: flex; align-items: center; gap: 8px;
  flex: 1 1 220px; min-width: 0; margin-left: auto; justify-content: flex-end;
}
.player-row__controls form.inline { display: inline-flex; margin: 0; }
.player-row__role { flex: 1 1 90px; min-width: 0; }
.player-row__role select { width: 100%; min-width: 0; flex: 1 1 auto; }
.player-row__as, .player-row__x { flex: 0 0 auto; white-space: nowrap; }
.player-row__as {
  text-decoration: none;
  border-color: rgba(154,124,196,.5); color: var(--moon);
}

/* ---- Wolves: live meute votes -------------------------------------------- */
.meute-votes {
  margin-top: 16px; padding: 14px 16px;
  border-radius: var(--r-md);
  background: rgba(46,16,26,.55);
  border: 1px solid rgba(232,69,92,.32);
}
.meute-votes__h { margin: 0 0 10px; font-size: 1rem; font-family: var(--font-display); color: #f0b8c2; }
.meute-list { list-style: none; padding: 0; margin: 0 0 10px; display: flex; flex-direction: column; gap: 6px; }
.meute-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px; border-radius: 10px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(157,152,192,.14);
}
.meute-row--me { border-color: rgba(232,69,92,.5); background: rgba(232,69,92,.12); }
.meute-row__wolf { font-weight: 650; }
.meute-row__target { color: var(--moon); }
.meute-row__target em { color: var(--silver); font-style: italic; }

/* ---- Admin impersonation bar (shown on /play?as=) ------------------------ */
.imp-bar {
  position: sticky; top: max(env(safe-area-inset-top), 6px); z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: 0 0 14px; padding: 7px 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, #4a2d6e, #382257);
  border: 1px solid rgba(196,178,236,.45);
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
}
.imp-bar__who { font-weight: 700; font-size: .86rem; color: #efe7ff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.imp-bar__link {
  flex: none; text-decoration: none; white-space: nowrap;
  font-weight: 700; font-size: .82rem; color: #fff;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.28);
}
.imp-bar__link:hover { background: rgba(255,255,255,.22); }

.debug__reset { display: inline; margin: 0; }

/* ---- Lovers reveal (play view) ------------------------------------------- */
.lover-reveal {
  margin: 14px 0; padding: 12px 16px; text-align: center;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(232,69,120,.18), rgba(232,69,120,.08));
  border: 1px solid rgba(240,120,160,.4);
  color: #f6c9d8; font-weight: 600;
}
.lover-reveal strong { color: #fff; }
.lover-reveal__sub { display: block; margin-top: 4px; font-weight: 400; font-size: .85rem; color: var(--silver); }

/* ---- Discreet mode: face-down card, info revealed on flip ----------------- */
.play__card { display: flex; flex-direction: column; align-items: center; }
.play:not(.revealed) .play__card { flex: 1; justify-content: center; }
.play__hint {
  margin-top: 16px; text-align: center; color: var(--silver);
  font-size: 0.92rem; font-style: italic; transition: opacity .3s ease;
}
.play.revealed .play__hint { opacity: 0; height: 0; margin: 0; pointer-events: none; }
.play__reveal { display: none; }
.play.revealed .play__reveal { display: block; animation: fade-up 0.5s ease both; }