/* Mission secrète — direction artistique « Cherry blossom », identité « dossier riso »
   Un dossier d'espion imprimé en risographie : deux encres (rose et menthe) légèrement
   décalées — le « double » du double jeu —, grain papier, trames de points, tampons.
   Palette : #F2C7C7 pétale · #FFFFFF blanc · #D5F3D8 menthe · #FFB7C5 cerisier
   Les teintes d'encre sont dérivées pour garder un contraste AA (≥ 4,5:1),
   vérifié par tests/test_theme.py pour le thème jour comme pour le thème nuit.
   Thème : attribut data-theme posé par static/js/theme.js avant le premier affichage
   (choix enregistré sur l'appareil, sinon réglage du téléphone). */

:root {
  --blossom: #FFB7C5;
  --petal: #F2C7C7;
  --mint: #D5F3D8;
  --white: #FFFFFF;
  --bg: #FFF7F8;
  --bg-clear: rgba(255, 247, 248, 0);
  --surface: #FFFFFF;
  --petal-soft: #FBE6E8;
  --line: #F0D3D8;
  --ink: #3B1E2B;
  --ink-soft: #77505F;
  --ink-on-blossom: #5A3442;
  --on-accent: #3B1E2B;
  --berry: #B4375A;
  --berry-deep: #8E2443;
  --leaf: #2E6B45;
  --option-pressed: #FFF0F3;
  --challenge-bg: #D5F3D8;
  --inverse-bg: #3B1E2B;
  --inverse-ink: #FFFFFF;
  --good-bg: #2E6B45;
  --bad-bg: #B4375A;
  --done-bg: #D5F3D8;
  --done-ink: #2E6B45;
  --failed-bg: #FBE6E8;
  --failed-ink: #B4375A;
  --expired-bg: #F3EEF0;
  --expired-ink: #77505F;
  --switch-on: #2E6B45;
  /* Carte mission et cartes de révélation : rose vif le jour, discrètes la nuit. */
  --mission-bg: #FFB7C5;
  --mission-ink: #3B1E2B;
  --mission-meta: #5A3442;
  --mission-bar: rgba(255, 255, 255, .55);
  --mission-glass: rgba(255, 255, 255, .55);
  --mission-glass-strong: rgba(255, 255, 255, .7);
  --mission-ring: #FFFFFF;
  --mission-shadow: 0 14px 34px rgba(255, 140, 165, .35);
  --accent-shadow: 0 6px 18px rgba(255, 140, 165, .35);
  --overlay: rgba(59, 30, 43, .38);
  --shadow: 0 1px 2px rgba(59, 30, 43, .05), 0 10px 30px rgba(59, 30, 43, .07);
  --radius-sm: 14px;
  --radius: 20px;
  --radius-lg: 28px;
  --font-display: "Bricolage Grotesque", ui-rounded, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  /* Identité : trait d'encre, ombre portée décalée, couches riso, grain et trames. */
  --edge: #3B1E2B;
  --drop: #3B1E2B;
  --riso: #FFB7C5;
  --riso-2: #D5F3D8;
  --card-riso: #FFFFFF;
  --hl: #D5F3D8;
  --dot: rgba(59, 30, 43, .16);
  --grain: .06;
  --blob-a: rgba(255, 183, 197, .38);
  --blob-b: rgba(213, 243, 216, .7);
  --spring: cubic-bezier(.2, 1.4, .4, 1);
  --ease-out: cubic-bezier(.2, .9, .3, 1);
  /* Univers illustré : écriture manuscrite et couleurs des dessins (static/illustrations.svg). */
  --font-hand: "Caveat", "Bradley Hand", "Segoe Print", "Chalkboard SE", "Comic Sans MS", cursive;
  --hand: #C2335F;
  --i-foliage: #F4A9BE;
  --i-foliage-b: #E58FA8;
  --i-green: #A6DBAE;
  --i-green-b: #7FC48C;
  --i-sky-a: #CDB6E6;
  --i-sky-b: #F6BCD0;
  --i-sky-c: #E6D6F2;
  --i-sky-d: #FBD5E0;
  --i-window: #FFF1F5;
  --i-gold-a: #FFE08A;
  --i-gold-b: #F6C343;
  --i-gold-c: #E09B1E;
  --i-plinth: #6E3352;
  --i-line: #3B1E2B;
  --i-wire: #8A6A7E;
  --i-bulb-a: #FF9DB5;
  --i-bulb-b: #FFD66E;
  --i-bulb-c: #BDEBC4;
  --i-spark: #F27FA3;
  --i-ink-hand: #D43F70;
  --i-pink: #FFB7C5;
  --i-mint: #D5F3D8;
  --i-glass: #FFFFFF;
  --i-drink: #FF8FAE;
  --i-disco-a: #E3D4F2;
  --i-disco-b: #FFFFFF;
  --i-disco-c: #F7C4D4;
  --i-disco-line: #B9A2D2;
  --wash: rgba(255, 183, 197, .42);
  --wash-2: rgba(213, 243, 216, .6);
  --medal-1: #F6C343;
  --medal-2: #D6D7E0;
  --medal-3: #E3A276;
  color-scheme: light;
}

/* Thème nuit : fond prune très sombre, Cherry blossom en accents, luminosité réduite.
   Un écran rose vif attire les regards dans une pièce sombre : la nuit, la mission reste secrète. */
:root[data-theme="dark"] {
  --bg: #170B12;
  --bg-clear: rgba(23, 11, 18, 0);
  --surface: #241320;
  --petal-soft: #311A29;
  --line: #4A2B3D;
  --ink: #F3E4E9;
  --ink-soft: #CBA9B6;
  --berry: #FFB7C5;
  --berry-deep: #FFB7C5;
  --leaf: #D5F3D8;
  --option-pressed: #3A1F30;
  --challenge-bg: #15241B;
  --inverse-bg: #F3E4E9;
  --inverse-ink: #241320;
  --done-bg: #1B2E22;
  --done-ink: #D5F3D8;
  --failed-bg: #3A1A28;
  --failed-ink: #FFB7C5;
  --expired-bg: #2E2229;
  --expired-ink: #CBA9B6;
  --switch-on: #3A8A5A;
  --mission-bg: #2B1523;
  --mission-ink: #F3E4E9;
  --mission-meta: #F2C7C7;
  --mission-bar: rgba(255, 183, 197, .2);
  --mission-glass: rgba(255, 183, 197, .12);
  --mission-glass-strong: rgba(255, 183, 197, .16);
  --mission-ring: #FFB7C5;
  --mission-shadow: inset 0 0 0 1.5px #5B3049;
  --accent-shadow: none;
  --overlay: rgba(5, 2, 4, .66);
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px rgba(0, 0, 0, .35);
  --edge: #5B3049;
  --drop: #050204;
  --riso: #8E2443;
  --riso-2: #1F3A2A;
  --card-riso: #8E2443;
  --hl: #3A2032;
  --dot: rgba(255, 183, 197, .12);
  --grain: .09;
  --blob-a: rgba(142, 36, 67, .22);
  --blob-b: rgba(46, 107, 69, .16);
  --hand: #FFB7C5;
  --i-foliage: #5C2A45;
  --i-foliage-b: #7A3A5C;
  --i-green: #2D5A3D;
  --i-green-b: #3F7552;
  --i-sky-a: #45305F;
  --i-sky-b: #5C2D4E;
  --i-sky-c: #2F2345;
  --i-sky-d: #3A1F38;
  --i-window: #FFC9D6;
  --i-plinth: #8E2443;
  --i-line: #E9D3DC;
  --i-wire: #A88C9C;
  --i-spark: #FF9DB5;
  --i-ink-hand: #FF9DB5;
  --i-glass: #3A2635;
  --i-disco-a: #4A3A60;
  --i-disco-b: #7A6A93;
  --i-disco-c: #8E4A68;
  --i-disco-line: #2E2240;
  --wash: rgba(142, 36, 67, .28);
  --wash-2: rgba(46, 107, 69, .2);
  color-scheme: dark;
}

/* Écriture manuscrite des petits mots (Caveat, SIL Open Font License : static/fonts/OFL-Caveat.txt). */
@font-face {
  font-family: "Caveat";
  src: url("/static/fonts/caveat.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/static/fonts/bricolage-grotesque.woff2") format("woff2");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
}

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

/* Pas de zoom au double appui (deux appuis rapides sur un bouton) ; le zoom à deux doigts reste possible. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; touch-action: manipulation; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; }
img, svg { display: block; }
ol, ul { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }

[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--berry); outline-offset: 3px; border-radius: 10px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; padding: 0; border: 0;
}

/* ------------------------------------------------------------ écrans */

.screen {
  max-width: 480px;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  padding: calc(env(safe-area-inset-top) + 20px) 20px calc(env(safe-area-inset-bottom) + 20px);
  display: flex;
  flex-direction: column;
  gap: 22px;
  animation: enter .28s ease-out;
}
.screen-body { flex: 1; display: flex; flex-direction: column; gap: 22px; }
.screen-footer {
  position: sticky;
  bottom: 0;
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px 0 calc(env(safe-area-inset-bottom) + 4px);
  margin-bottom: calc(-1 * env(safe-area-inset-bottom) - 20px);
  padding-bottom: calc(env(safe-area-inset-bottom) + 20px);
  background: linear-gradient(to bottom, var(--bg-clear), var(--bg) 22%);
}
.screen-footer .hint { text-align: center; margin: 0; }

@keyframes enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand { font-family: var(--font-display); font-weight: 900; font-size: 21px; letter-spacing: -.02em; text-decoration: none; white-space: nowrap; }
.topbar-meta { color: var(--ink-soft); font-size: 15px; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.topbar-meta strong { color: var(--ink); }
a.topbar-meta { text-decoration: none; }
.link-quiet { background: none; border: 0; padding: 4px; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; font-size: 15px; }
.link-quiet:disabled { text-decoration: none; }

.icon-btn {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  border-radius: 14px; border: 1.5px solid var(--line);
  background: var(--surface); color: var(--ink);
}
.icon-btn:active { transform: scale(.96); }

.kicker {
  margin: 0;
  font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-soft);
}
.title {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 32px;
  line-height: 1.08;
  letter-spacing: -.02em;
  overflow-wrap: anywhere;
}
.title-xl { font-size: 40px; }
.title-md { font-size: 24px; display: block; }
.title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }

.section-title { margin: 0 0 12px; font-size: 17px; font-weight: 800; }
.muted { color: var(--ink-soft); }
.small { font-size: 14px; }
.center { text-align: center; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.stack-sm { display: flex; flex-direction: column; gap: 8px; }
.row { display: flex; align-items: center; gap: 12px; }
.grow { flex: 1; min-width: 0; }

/* ------------------------------------------------------------ cartes */

.card {
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
}
.card-tight { padding: 14px 18px; }
.card-mint { background: var(--challenge-bg); border-color: transparent; }
.card-petal { background: var(--petal-soft); border-color: transparent; }

.code-card { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 22px 22px 24px; box-shadow: var(--shadow); }
.code-label { color: var(--ink-soft); font-size: 15px; }
.code {
  font-family: var(--font-display); font-weight: 900;
  font-size: 46px; letter-spacing: .18em; line-height: 1.1; margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.qr-btn {
  width: 72px; height: 72px; flex: none;
  display: grid; place-items: center;
  border: 0; border-radius: 18px;
  background: var(--blossom); color: var(--on-accent);
}

.list { background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.list-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 20px; min-height: 56px;
  width: 100%; background: none; border: 0; text-align: left;
  border-top: 1.5px solid var(--line);
}
.list-row:first-child { border-top: 0; }
button.list-row:active { background: var(--petal-soft); }
.list-row .value { font-weight: 800; text-align: right; flex: none; }
.list-row .label { min-width: 0; overflow-wrap: anywhere; }

.price { color: var(--berry); font-weight: 800; white-space: nowrap; }
.stake { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.stake > :first-child { white-space: nowrap; }
.stake > :last-child { text-align: right; white-space: normal; }
.ok { color: var(--leaf); font-weight: 800; white-space: nowrap; }

/* ------------------------------------------------------------ puces & choix */

.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 18px; border-radius: 999px;
  background: var(--petal-soft); border: 1.5px solid transparent;
  font-size: 16px; font-weight: 600; max-width: 100%; overflow-wrap: anywhere;
}
.chip-me { background: var(--blossom); color: var(--on-accent); }
.chip small { font-weight: 600; color: var(--ink-soft); font-size: 12px; }
.chip-me small { color: var(--ink-on-blossom); }
button.chip:active { transform: scale(.97); }

.segmented { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.segmented button {
  min-height: 56px; border-radius: 16px;
  border: 1.5px solid var(--line); background: var(--surface);
  font-weight: 800; font-size: 16px;
}
.segmented button[aria-pressed="true"] { background: var(--blossom); border-color: var(--blossom); color: var(--on-accent); }
.segmented button:disabled:not([aria-pressed="true"]) { opacity: .55; }
.segmented button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px 4px; }
.segmented button small {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 11px; font-weight: 800; letter-spacing: .04em; color: var(--berry);
}
.segmented button[aria-pressed="true"] small { color: var(--ink-on-blossom); }
.segmented button.locked { border-style: dashed; }

.tag-adult {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  background: var(--berry); color: var(--surface);
  font-size: 12px; font-weight: 800; letter-spacing: .04em; vertical-align: 1px;
}
.adult-note { margin: 10px 0 0; font-size: 14px; color: var(--ink-soft); }

.check {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; border-radius: 16px;
  background: var(--surface); border: 1.5px solid var(--line);
  font-size: 15px; line-height: 1.4; cursor: pointer;
}
.check input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--berry); }

.premium-card { border: 2px solid var(--blossom); }
.premium-card .kicker { display: flex; align-items: center; gap: 6px; color: var(--berry); }
.premium-title { font-family: var(--font-display); font-weight: 900; font-size: 20px; }
.premium-mode { padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 1.5px solid var(--line); }
.premium-mode p { margin: 4px 0 0; }
.premium-teaser { font-style: italic; color: var(--ink); }

.choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.choice {
  min-height: 56px; padding: 10px 8px; border-radius: 16px;
  border: 1.5px solid var(--line); background: var(--surface);
  font-weight: 800; font-size: 16px; line-height: 1.2; overflow-wrap: anywhere;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.choice small { font-weight: 600; font-size: 12px; color: var(--ink-soft); }
.choice[aria-pressed="true"] { background: var(--blossom); border-color: var(--blossom); color: var(--on-accent); }
.choice[aria-pressed="true"] small { color: var(--ink-on-blossom); }
.choice:disabled { opacity: .5; }

.option {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: 60px; padding: 14px 20px;
  border-radius: 18px; border: 1.5px solid var(--line); background: var(--surface);
  text-align: left; font-size: 17px;
}
.option[aria-pressed="true"] { border: 2.5px solid var(--blossom); background: var(--option-pressed); font-weight: 800; padding: 13px 19px; }
.option .tag { color: var(--berry); font-weight: 800; font-size: 15px; }

/* ------------------------------------------------------------ boutons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 58px; padding: 14px 20px;
  border-radius: 20px; border: 2px solid transparent;
  font-family: var(--font-display); font-weight: 800; font-size: 18px; line-height: 1.2;
  text-decoration: none; text-align: center;
  transition: transform .08s ease, opacity .15s ease;
}
.btn:active:not(:disabled) { transform: scale(.98); }
.btn:disabled { opacity: .5; }
.btn-primary { background: var(--blossom); color: var(--on-accent); box-shadow: var(--accent-shadow); }
.btn-success { background: var(--mint); color: var(--on-accent); }
.btn-outline { background: var(--surface); border-color: var(--blossom); color: var(--berry-deep); }
.btn-ghost { background: var(--surface); border-color: var(--line); color: var(--ink); }
.btn-danger { background: var(--surface); border-color: var(--berry); color: var(--berry); }
.btn-small { min-height: 46px; font-size: 16px; border-radius: 16px; padding: 10px 16px; }
.btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.btn-row .btn { min-height: 54px; font-size: 15px; padding: 10px 12px; white-space: nowrap; }

/* ------------------------------------------------------------ stats */

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stat {
  background: var(--surface); border: 1.5px solid var(--line); border-radius: 18px;
  padding: 14px 6px; text-align: center; min-width: 0;
}
.stat-value { font-family: var(--font-display); font-weight: 900; font-size: 26px; line-height: 1.1; overflow-wrap: anywhere; }
.stat-label { color: var(--ink-soft); font-size: 14px; margin-top: 4px; }
.stat-value.berry { color: var(--berry); }
.stat-value.leaf { color: var(--leaf); }
.stat-value.cover { font-size: 22px; }

/* ------------------------------------------------------------ carte mission */

.mission-card {
  position: relative;
  background: var(--mission-bg);
  color: var(--mission-ink);
  border-radius: var(--radius-lg);
  padding: 22px 22px 20px;
  box-shadow: var(--mission-shadow);
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
  outline-offset: 4px;
}
.mission-meta {
  display: flex; justify-content: space-between; gap: 12px;
  font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--mission-meta);
}
.mission-text {
  margin: 14px 0 0;
  font-family: var(--font-display); font-weight: 900;
  font-size: 27px; line-height: 1.18; letter-spacing: -.01em;
  min-height: 4.7em;
  overflow-wrap: anywhere;
}
.mission-hidden {
  margin-top: 14px; min-height: 4.7em;
  display: flex; flex-direction: column; justify-content: center; gap: 10px;
}
.mission-hidden .bar { height: 18px; border-radius: 10px; background: var(--mission-bar); }
.mission-hidden .bar:nth-child(2) { width: 82%; }
.mission-hidden .bar:nth-child(3) { width: 64%; }
.mission-hold {
  margin-top: 6px; font-weight: 800; color: var(--mission-ink);
  display: flex; align-items: center; gap: 8px;
}
.mission-foot { margin: 16px 0 0; color: var(--mission-meta); font-size: 15px; }
.mission-card.revealed { box-shadow: 0 0 0 4px var(--mission-ring), var(--mission-shadow); }
.mission-card.is-new::after {
  content: "Nouvelle"; position: absolute; top: -10px; right: 18px;
  background: var(--inverse-bg); color: var(--inverse-ink);
  font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
}

.hint-card { display: flex; gap: 14px; align-items: flex-start; color: var(--ink-soft); font-size: 15px; }
.hint-card svg { flex: none; margin-top: 2px; color: var(--berry); }

.empty-card { text-align: center; padding: 28px 22px; }
.empty-card .title { font-size: 24px; }

/* ------------------------------------------------------------ classement & titres */

.ranking .list-row { padding: 14px 20px; }
.rank { width: 30px; flex: none; font-family: var(--font-display); font-weight: 900; font-size: 22px; color: var(--ink-soft); }
.rank-1 { color: var(--berry); }
.ranking .name { flex: 1; min-width: 0; font-size: 18px; overflow-wrap: anywhere; }
.ranking .first .name { font-weight: 800; }
.ranking .me .name::after { content: " (toi)"; color: var(--ink-soft); font-weight: 500; font-size: 15px; }

.titles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.title-card { background: var(--surface); border: 1.5px solid var(--line); border-radius: 18px; padding: 14px 16px; min-width: 0; }
.title-label { color: var(--berry); font-weight: 800; font-size: 14px; }
.title-name { font-weight: 900; font-size: 19px; margin-top: 4px; overflow-wrap: anywhere; font-family: var(--font-display); }
.title-detail { color: var(--ink-soft); font-size: 14px; margin-top: 2px; }

.reveal-card {
  background: var(--mission-bg); color: var(--mission-ink); border-radius: var(--radius-lg); padding: 22px;
  border: 0; width: 100%; text-align: left; display: block; box-shadow: var(--mission-shadow);
}
.reveal-card .kicker { color: var(--mission-meta); }
.reveal-card .sentence { margin: 10px 0 0; font-size: 19px; font-weight: 800; line-height: 1.35; }
.reveal-card .aside { margin: 8px 0 0; color: var(--mission-meta); font-size: 15px; }
.reveal-card .proof { margin: 10px 0 0; font-size: 15px; background: var(--mission-glass); border-radius: 12px; padding: 8px 12px; }
.reveal-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; }
.reveal-nav .count { color: var(--mission-meta); font-weight: 700; font-size: 14px; }
.reveal-nav .icon-btn { background: var(--mission-glass-strong); border-color: transparent; color: var(--mission-ink); }

.status { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }
.status-done { background: var(--done-bg); color: var(--done-ink); }
.status-failed { background: var(--failed-bg); color: var(--failed-ink); }
.status-expired { background: var(--expired-bg); color: var(--expired-ink); }
.status-rejected { background: var(--inverse-bg); color: var(--inverse-ink); }
.status-vote { background: var(--blossom); color: var(--on-accent); }
.list-row .status { flex: none; }
.mission-item { padding: 16px 18px; border-top: 1.5px solid var(--line); }
.mission-item:first-child { border-top: 0; }
.mission-item p { margin: 8px 0 0; }

/* ------------------------------------------------------------ groupe */


.season-row { display: flex; align-items: baseline; gap: 12px; padding: 6px 0; }
.season-row .name { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 17px; }
.season-row .pts { font-weight: 800; white-space: nowrap; }

/* ------------------------------------------------------------ accueil */

.hero { text-align: center; padding: 24px 0 8px; }
.hero img { width: 112px; height: 112px; margin: 0 auto 18px; border-radius: 28px; box-shadow: var(--accent-shadow); }
.hero .title { font-size: 44px; }
.hero p { margin: 8px auto 0; max-width: 30ch; color: var(--ink-soft); }

/* ------------------------------------------------------------ formulaires */

.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-weight: 800; font-size: 16px; }
.input {
  width: 100%; min-height: 56px; padding: 14px 18px;
  border-radius: 16px; border: 1.5px solid var(--line); background: var(--surface);
  font-size: 18px;
}
.input:focus { outline: none; border-color: var(--blossom); box-shadow: 0 0 0 4px rgba(255, 183, 197, .45); }
.input-code {
  text-align: center; text-transform: uppercase;
  font-family: var(--font-display); font-weight: 900;
  font-size: 40px; letter-spacing: .4em; padding-left: calc(18px + .4em);
}
.field-help { color: var(--ink-soft); font-size: 14px; margin: 0; }
.form-error { color: var(--berry); font-weight: 700; font-size: 15px; margin: 0; }

.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.switch {
  position: relative; width: 54px; height: 32px; flex: none;
  border-radius: 999px; border: 0; background: var(--line);
  transition: background .15s ease;
}
.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 26px; height: 26px; border-radius: 50%; background: var(--white);
  box-shadow: 0 1px 3px rgba(59, 30, 43, .25); transition: transform .15s ease;
}
.switch[aria-checked="true"] { background: var(--switch-on); }
.switch[aria-checked="true"]::after { transform: translateX(22px); }

/* ------------------------------------------------------------ feuilles (modales) */

.sheet-layer { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
.sheet-backdrop { position: absolute; inset: 0; background: var(--overlay); animation: fade .2s ease-out; }
.sheet {
  position: relative;
  width: 100%; max-width: 480px; max-height: 92vh; max-height: 92dvh; overflow-y: auto;
  background: var(--bg);
  border-radius: 28px 28px 0 0;
  padding: 12px 20px calc(env(safe-area-inset-bottom) + 22px);
  animation: rise .26s cubic-bezier(.2, .8, .2, 1);
  display: flex; flex-direction: column; gap: 16px;
}
.sheet-grip { width: 44px; height: 5px; border-radius: 3px; background: var(--line); margin: 0 auto 4px; }
.sheet-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.sheet-title { margin: 0; font-family: var(--font-display); font-weight: 900; font-size: 24px; line-height: 1.15; }
/* Contenu plus haut que l'écran : la feuille défile, ses blocs ne s'écrasent pas. */
.sheet > * { flex-shrink: 0; }
.sheet p { margin: 0; }
.sheet .actions { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.sheet .qr-img { width: min(72vw, 300px); height: auto; margin: 0 auto; border-radius: 16px; background: var(--white); padding: 8px; }
.result-badge {
  width: 84px; height: 84px; border-radius: 50%; margin: 6px auto 0;
  display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 900; font-size: 28px;
}
.result-good { background: var(--done-bg); color: var(--done-ink); }
.result-bad { background: var(--failed-bg); color: var(--failed-ink); }

@keyframes rise { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

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

.toasts {
  position: fixed; left: 0; right: 0; top: calc(env(safe-area-inset-top) + 12px); z-index: 60;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  pointer-events: none; padding: 0 16px;
}
.toast {
  max-width: 440px; width: 100%;
  background: var(--inverse-bg); color: var(--inverse-ink);
  border-radius: 16px; padding: 14px 18px;
  font-weight: 700; font-size: 15px;
  box-shadow: 0 10px 30px rgba(59, 30, 43, .25);
  animation: drop .25s ease-out;
}
.toast-good { background: var(--good-bg); color: var(--white); }
.toast-bad { background: var(--bad-bg); color: var(--white); }
@keyframes drop { from { transform: translateY(-12px); opacity: 0; } to { transform: none; opacity: 1; } }

.offline {
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 96px); transform: translateX(-50%);
  z-index: 40; background: var(--inverse-bg); color: var(--inverse-ink);
  padding: 10px 16px; border-radius: 999px; font-size: 14px; font-weight: 700;
  box-shadow: var(--shadow);
}

.loading { display: grid; place-items: center; min-height: 60vh; color: var(--ink-soft); }
.spinner { width: 36px; height: 36px; border-radius: 50%; border: 4px solid var(--petal); border-top-color: var(--berry); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.recap-preview { width: 100%; max-width: 360px; margin: 0 auto; aspect-ratio: 9 / 16; border-radius: 20px; box-shadow: var(--shadow); background: var(--blossom); transition: opacity .15s ease; }
.recap-preview.is-loading { opacity: .4; }
.segmented-2 { grid-template-columns: repeat(2, 1fr); }
.segmented-3 { grid-template-columns: repeat(3, 1fr); }

/* ------------------------------------------------------------ révélations : le défilement */

.show-progress { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.show-progress span { display: block; height: 100%; width: 0; background: var(--berry); border-radius: 3px; transition: width .25s ease; }
.show-card {
  flex: 1; min-height: 52vh;
  display: flex; flex-direction: column; justify-content: center; gap: 12px;
  background: var(--mission-bg); color: var(--mission-ink); box-shadow: var(--mission-shadow);
  border-radius: var(--radius-lg); padding: 28px 24px;
  touch-action: pan-y;
}
.show-card p { margin: 0; }
.show-card .kicker { color: var(--mission-meta); }
.show-card .sentence { font-size: 22px; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.show-card .aside { color: var(--mission-meta); font-size: 16px; }
.show-card .proof { font-size: 16px; background: var(--mission-glass); border-radius: 12px; padding: 8px 12px; }
.show-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.show-head .kicker { white-space: nowrap; }
.show-label { margin: 0; font-family: var(--font-display); font-weight: 900; font-size: 22px; color: var(--mission-meta); }
.show-big { margin: 0; font-family: var(--font-display); font-weight: 900; font-size: 40px; line-height: 1.08; letter-spacing: -.02em; overflow-wrap: anywhere; }
.show-champion { font-size: 52px; animation: winner .5s cubic-bezier(.2, .9, .3, 1.4); }
.show-points { font-weight: 800; font-size: 16px; padding-top: 12px; border-top: 1.5px solid var(--mission-glass-strong); }
.show-intro, .show-drumroll, .show-winner { text-align: center; }
.show-drumroll .show-big { font-size: 32px; }
.show-enter { animation: pop .28s ease-out; }
.show-nav { display: flex; gap: 12px; align-items: stretch; }
.show-nav .icon-btn { width: 58px; height: auto; min-height: 58px; border-radius: 20px; }
.show-nav .icon-btn:disabled { opacity: .45; }
.show-nav .btn { flex: 1; }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes winner { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------ révélations : la vérification */

.verify-count { margin: 0; font-size: 16px; }
.screen-still { animation: none; }
.verify-card {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--mission-bg); color: var(--mission-ink); box-shadow: var(--mission-shadow);
  border-radius: var(--radius-lg); padding: 22px 22px 20px;
}
.verify-enter { animation: pop .28s ease-out; }
.verify-card p { margin: 0; }
.verify-card .kicker { color: var(--mission-meta); }
.verify-card .sentence {
  font-size: 19px; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere;
  background: var(--mission-glass); border-radius: 14px; padding: 12px 14px;
}
.verify-card .aside { color: var(--mission-meta); font-size: 15px; }
.verify-card .proof { font-size: 16px; background: var(--mission-glass); border-radius: 12px; padding: 8px 12px; overflow-wrap: anywhere; }
.verify-card .btn-row .btn { min-height: 58px; font-size: 18px; }
.verify-claim {
  margin: 0; font-family: var(--font-display); font-weight: 900;
  font-size: 26px; line-height: 1.15; letter-spacing: -.01em; overflow-wrap: anywhere;
}
.verify-question { font-family: var(--font-display); font-weight: 900; font-size: 22px; line-height: 1.2; overflow-wrap: anywhere; }
.verify-proof {
  display: flex; flex-direction: column; gap: 6px;
  border: 2px dashed var(--mission-meta); border-radius: 16px; padding: 14px 16px;
}
.verify-proof-text { font-family: var(--font-display); font-weight: 900; font-size: 24px; line-height: 1.2; overflow-wrap: anywhere; }
.home-guides { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; margin: 18px 0 4px; font-size: 14px; }
.home-guides a { color: var(--ink-soft); text-underline-offset: 3px; }
.pulse p { margin: 0; }
.pulse-facts { font-weight: 700; }
.verify-moment {
  margin: 0;
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 15px; color: var(--mission-meta); overflow-wrap: anywhere;
}
.verify-moment svg { flex: none; margin-top: 2px; }
.verify-photo {
  display: block; width: 100%; max-height: 320px; object-fit: contain;
  border: 2px solid var(--ink); border-radius: 16px; background: var(--surface);
}
.verify-timer {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 800; font-size: 15px; color: var(--mission-meta);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.card .verify-timer { color: var(--ink); }

/* ------------------------------------------------------------ tutoriel */

.tuto-dots { display: flex; gap: 8px; }
.tuto-dots span { flex: 1; height: 6px; border-radius: 3px; background: var(--line); }
.tuto-dots span.on { background: var(--berry); }
.tuto-feedback { margin: 0; min-height: 3em; font-weight: 700; color: var(--ink); }
.tuto-point { display: flex; gap: 12px; align-items: flex-start; }
.tuto-point svg { flex: none; margin-top: 2px; color: var(--leaf); }

/* ------------------------------------------------------------ parrainage */

.ref-link {
  margin: 4px 0; padding: 12px 14px; border-radius: 14px;
  background: var(--petal-soft); font-weight: 800; font-size: 17px;
  overflow-wrap: anywhere; font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ missions perso */

.custom-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.custom-head .section-title { margin: 0; }
.custom-card > p { margin: 0; }
.custom-count { color: var(--ink-soft); font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.custom-lock {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  color: var(--berry); font-size: 13px; font-weight: 800; letter-spacing: .04em;
}
.custom-locked { border: 2px solid var(--blossom); }
.custom-list { display: flex; flex-direction: column; gap: 10px; }
.custom-item { display: flex; align-items: center; gap: 4px; border-radius: 16px; background: var(--petal-soft); }
.custom-body { flex: 1; min-width: 0; padding: 12px 6px 12px 16px; background: none; border: 0; text-align: left; border-radius: 16px; }
button.custom-body:active { background: var(--option-pressed); }
.custom-item .icon-btn { margin-right: 6px; background: transparent; border-color: transparent; color: var(--ink-soft); }
.custom-text { margin: 0; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; }
.custom-meta { margin: 4px 0 0; color: var(--ink-soft); font-size: 13px; }
.custom-empty { padding: 14px 16px; border-radius: 16px; background: var(--petal-soft); color: var(--ink-soft); font-size: 15px; }
.cible-tag {
  display: inline-block; padding: 0 8px; border-radius: 999px;
  background: var(--blossom); color: var(--on-accent);
  font-size: .86em; font-weight: 800; line-height: 1.55; white-space: nowrap;
}
.custom-preview { cursor: pointer; }
.custom-preview .custom-list { position: relative; }
.custom-preview .custom-item { filter: saturate(.7); }
.custom-preview .custom-item:nth-child(n + 2) { opacity: .62; }
.custom-preview .custom-item:nth-child(3) { opacity: .34; }
.field-label { font-weight: 800; font-size: 16px; }
.choice-grid-2 { grid-template-columns: repeat(2, 1fr); }
.textarea { min-height: 104px; resize: vertical; line-height: 1.4; }
.custom-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.custom-tools .btn { width: auto; }
.counter { color: var(--ink-soft); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.counter.over { color: var(--berry); }
.custom-preview-text {
  margin: 0; padding: 12px 14px; border-radius: 14px;
  background: var(--petal-soft); color: var(--ink); font-size: 15px; line-height: 1.4; overflow-wrap: anywhere;
}
.custom-preview-label { color: var(--ink-soft); font-weight: 700; }
.custom-switch { margin-top: 14px; }
.inline-link { color: var(--berry); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.mission-tag {
  display: inline-block; margin: 14px 0 -4px; padding: 3px 10px; border-radius: 999px;
  background: var(--mission-glass-strong); color: var(--mission-ink);
  font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.tag-new {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  background: var(--mint); color: var(--on-accent);
  font-size: 12px; font-weight: 800; letter-spacing: .04em;
}

/* ============================================================ identité « dossier riso »
   Couche posée par-dessus les composants : elle ne change aucune règle de jeu ni aucun texte.
   Trois signatures : le décalage riso (deux encres légèrement hors registre), le trait d'encre
   avec ombre portée (comme un autocollant imprimé), et les tampons de dossier secret. */

/* ---------- papier : grain, formes et trames */
body { font-optical-sizing: auto; }
body::before {
  content: ""; position: fixed; inset: -10vmax; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle at 92% 6%, var(--blob-a) 0 22vmax, transparent 22.1vmax),
    radial-gradient(circle at 4% 96%, var(--blob-b) 0 26vmax, transparent 26.1vmax);
  animation: drift 18s ease-in-out infinite alternate;
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: var(--grain);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .23 0 0 0 0 .12 0 0 0 0 .17 0 0 0 1.1 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes drift { to { transform: translate(-3vmax, 2vmax) rotate(4deg); } }

.dots {
  background-image: radial-gradient(var(--dot) 1.3px, transparent 1.7px);
  background-size: 9px 9px;
}

/* ---------- typographie : titres hors registre */
.title, .hero .title, .sheet-title, .show-big, .verify-claim {
  font-weight: 800; font-stretch: 88%; letter-spacing: -.03em;
  text-shadow: .05em .05em 0 var(--riso);
}
.screen:not(.screen-still) .title { animation: register .7s var(--ease-out) both; }
@keyframes register {
  from { text-shadow: .28em .14em 0 var(--riso); }
  to { text-shadow: .05em .05em 0 var(--riso); }
}
.brand {
  font-weight: 800; font-stretch: 85%; letter-spacing: -.035em;
  text-shadow: .07em .06em 0 var(--riso), -.05em -.03em 0 var(--riso-2);
}
.kicker { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em; font-weight: 700; }
.kicker::before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  margin-right: 8px; vertical-align: 1px; background: var(--berry);
}
.section-title {
  display: inline-block; font-family: var(--font-display); font-size: 19px; font-weight: 800;
  font-stretch: 92%; letter-spacing: -.01em; padding: 0 .2em; margin-left: -.2em;
  background: linear-gradient(transparent 56%, var(--hl) 56% 92%, transparent 92%);
}
.code, .input-code, .ref-link { font-family: var(--font-mono); font-weight: 800; }
.code { letter-spacing: .14em; text-shadow: .06em .06em 0 var(--riso); }
.stat-value, .rank, .title-name, .verify-proof-text { font-stretch: 90%; }
.stat-value, .rank { text-shadow: .06em .06em 0 var(--riso); }
.mission-meta, .verify-timer, .custom-count, .counter, .status { font-family: var(--font-mono); }

/* ---------- surfaces : trait d'encre et ombre décalée */
.card, .list, .code-card, .premium-mode, .title-card, .stat, .check, .ref-link,
.show-card, .verify-card, .reveal-card, .mission-card, .recap-preview {
  border: 2px solid var(--edge);
  box-shadow: 4px 4px 0 var(--drop);
}
.card-petal, .card-mint { border-color: var(--edge); }
.stat { box-shadow: 3px 3px 0 var(--drop); }
.list-row { border-top: 2px dashed var(--line); }
.list-row:first-child { border-top: 0; }
button.list-row, a.list-row { transition: background .15s ease, padding .15s var(--ease-out); }
button.list-row:active, a.list-row:active { background: var(--petal-soft); padding-left: 26px; }
.code-card { position: relative; overflow: hidden; }
.code-card::after {
  content: ""; position: absolute; inset: 0 0 0 55%; pointer-events: none;
  background-image: radial-gradient(var(--dot) 1.3px, transparent 1.7px); background-size: 9px 9px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 70%); mask-image: linear-gradient(to right, transparent, #000 70%);
}
.code-card > * { position: relative; z-index: 1; }

/* ---------- boutons : appuyer, c'est imprimer */
.btn {
  border: 2px solid var(--edge); box-shadow: 0 4px 0 var(--drop);
  font-stretch: 92%; letter-spacing: -.01em;
  transition: transform .14s var(--spring), box-shadow .14s var(--spring), opacity .15s ease;
}
.btn:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 0 0 var(--drop); }
.btn:disabled { box-shadow: none; }
.btn-outline { border-color: var(--edge); }
.btn-ghost { box-shadow: 0 3px 0 var(--drop); }
.btn-row .btn { box-shadow: 0 3px 0 var(--drop); }
@media (hover: hover) {
  .btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 0 var(--drop); }
  .btn:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 0 0 var(--drop); }
}
.icon-btn {
  border: 2px solid var(--edge); box-shadow: 2px 2px 0 var(--drop);
  transition: transform .14s var(--spring), box-shadow .14s var(--spring);
}
.icon-btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--drop); }
.qr-btn {
  border: 2px solid var(--edge); box-shadow: 3px 3px 0 var(--drop);
  transition: transform .14s var(--spring), box-shadow .14s var(--spring);
}
.qr-btn:active { transform: translate(3px, 3px) rotate(-3deg); box-shadow: 0 0 0 var(--drop); }

/* ---------- choix : posés comme des étiquettes */
.segmented button, .choice, .option, .input {
  border: 2px solid var(--edge);
  transition: transform .16s var(--spring), box-shadow .16s var(--spring), background .15s ease;
}
.segmented button[aria-pressed="true"], .choice[aria-pressed="true"] {
  transform: translate(-2px, -2px) rotate(-1.5deg); box-shadow: 3px 3px 0 var(--drop);
}
.option[aria-pressed="true"] { border: 2.5px solid var(--edge); box-shadow: 3px 3px 0 var(--drop); transform: translate(-2px, -2px); }
.segmented button.locked { border-style: dashed; }
.segmented + .field-help { margin: 12px 0; }
.chip { border: 2px solid transparent; transition: transform .16s var(--spring); }
.chip-me { border-color: var(--edge); box-shadow: 2px 2px 0 var(--drop); }
button.chip:active { transform: scale(.94) rotate(-2deg); }
.chip-new { animation: chip-pop .5s var(--spring) both; }
@keyframes chip-pop { from { opacity: 0; transform: scale(.2) rotate(-18deg); } }
.input:focus { border-color: var(--edge); box-shadow: 4px 4px 0 var(--blossom); }
.switch { border: 2px solid var(--edge); }
.switch::after { top: 1px; left: 1px; transition: transform .22s var(--spring); }
.tag-adult, .tag-new, .cible-tag { border: 1.5px solid var(--edge); transform: rotate(-3deg); }

/* ---------- tampons */
.stamp {
  display: inline-block; font-family: var(--font-mono); font-weight: 800; font-size: 13px;
  text-transform: uppercase; letter-spacing: .16em; line-height: 1.2; color: var(--berry);
  border: 3px solid currentColor; border-radius: 8px; padding: 5px 10px 4px;
  transform: rotate(-8deg); opacity: .9;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.4 2.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.4 2.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
  animation: stamp .5s var(--spring) both;
}
.stamp-good { color: var(--leaf); }
.stamp-ink { color: var(--mission-ink); }
.stamp-big { font-size: 22px; padding: 8px 16px 6px; border-width: 4px; }
.stamp-row { display: flex; justify-content: center; margin: 4px 0 2px; }
@keyframes stamp {
  0% { opacity: 0; transform: scale(2.6) rotate(-16deg); }
  55% { opacity: .95; transform: scale(.92) rotate(-6deg); }
  100% { opacity: .9; transform: scale(1) rotate(-8deg); }
}

/* ---------- carte mission : un dossier censuré */
.mission-card::before {
  content: ""; position: absolute; top: 0; right: 0; width: 46%; height: 70%; pointer-events: none;
  border-top-right-radius: inherit;
  background-image: radial-gradient(var(--mission-bar) 1.4px, transparent 1.8px); background-size: 10px 10px;
  -webkit-mask-image: radial-gradient(circle at 100% 0, #000, transparent 72%); mask-image: radial-gradient(circle at 100% 0, #000, transparent 72%);
}
.mission-card > * { position: relative; }
.mission-hidden { position: relative; }
.mission-hidden .bar {
  height: 20px; border-radius: 3px; background: var(--mission-ink); opacity: .88;
  transform: skewX(-8deg); transform-origin: left;
  animation: redact .5s var(--ease-out) both;
}
.mission-hidden .bar:nth-child(2) { animation-delay: .06s; }
.mission-hidden .bar:nth-child(3) { animation-delay: .12s; }
@keyframes redact { from { transform: skewX(-8deg) scaleX(0); } }
.mission-hidden .stamp { position: absolute; right: 0; bottom: 4px; color: var(--mission-ink); background: var(--mission-bg); }
.mission-card.revealed { transform: scale(1.015) rotate(-.4deg); transition: transform .2s var(--spring); }
.mission-text { font-weight: 800; font-stretch: 90%; animation: declassify .32s var(--ease-out) both; }
@keyframes declassify {
  from { clip-path: inset(0 100% 0 0); opacity: .3; }
  to { clip-path: inset(0 0 0 0); opacity: 1; }
}
.mission-card.is-new::after { border: 2px solid var(--edge); transform: rotate(4deg); animation: chip-pop .5s var(--spring) both; }

/* ---------- arrivées : écran, puis éléments un à un */
.screen { animation: enter .35s var(--ease-out); overflow-x: clip; } /* un tampon qui s'abat ne fait jamais défiler la page */
.screen:not(.screen-still) .screen-body > *, .screen:not(.screen-still) > .screen-footer {
  animation: rise-in .5s var(--ease-out) both;
}
.screen:not(.screen-still) .screen-body > :nth-child(2) { animation-delay: .05s; }
.screen:not(.screen-still) .screen-body > :nth-child(3) { animation-delay: .1s; }
.screen:not(.screen-still) .screen-body > :nth-child(4) { animation-delay: .15s; }
.screen:not(.screen-still) .screen-body > :nth-child(5) { animation-delay: .2s; }
.screen:not(.screen-still) .screen-body > :nth-child(6) { animation-delay: .25s; }
.screen:not(.screen-still) .screen-body > :nth-child(n + 7) { animation-delay: .3s; }
.screen:not(.screen-still) > .screen-footer { animation-delay: .2s; }
.screen-still, .screen-still .screen-body > *, .screen-still > .screen-footer { animation: none; }
@keyframes rise-in { from { opacity: 0; transform: translateY(18px); } }
.screen:not(.screen-still) .ranking .list-row { animation: rank-in .5s var(--spring) both; }
.ranking .list-row:nth-child(2) { animation-delay: .08s; }
.ranking .list-row:nth-child(3) { animation-delay: .16s; }
.ranking .list-row:nth-child(4) { animation-delay: .24s; }
.ranking .list-row:nth-child(n + 5) { animation-delay: .32s; }
@keyframes rank-in { from { opacity: 0; transform: translateX(-30px) rotate(-2deg); } }
.ranking .first { background: linear-gradient(transparent 0, transparent); }
.ranking .first .name { text-shadow: .06em .06em 0 var(--riso); }

/* ---------- accueil */
.hero { position: relative; }
.hero img { border: 2.5px solid var(--edge); box-shadow: 5px 5px 0 var(--drop); animation: bob 4s ease-in-out infinite; }
.hero::before {
  content: ""; position: absolute; left: 50%; top: 4px; width: 170px; height: 170px; margin-left: -85px;
  border-radius: 50%; z-index: -1;
  background-image: radial-gradient(var(--dot) 1.6px, transparent 2px); background-size: 10px 10px;
  -webkit-mask-image: radial-gradient(circle, #000 40%, transparent 70%); mask-image: radial-gradient(circle, #000 40%, transparent 70%);
}
.hero .title { font-size: 52px; line-height: .95; text-shadow: .06em .06em 0 var(--riso), -.04em -.03em 0 var(--riso-2); }
@keyframes bob { 50% { transform: translateY(-6px) rotate(-3deg); } }
.hero .stamp { position: absolute; top: 96px; left: calc(50% + 22px); animation-delay: .55s; background: var(--bg); }
.tape-wrap { margin: -6px -20px 0; padding: 14px 0; overflow: hidden; }
.tape {
  margin: 0 -12px; padding: 8px 0 7px; transform: rotate(-2.5deg);
  background: var(--inverse-bg); color: var(--inverse-ink);
  border-block: 2px solid var(--edge); box-shadow: 0 4px 0 var(--riso);
  font-family: var(--font-mono); font-size: 12px; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; white-space: nowrap;
}
.tape-track { display: flex; width: max-content; animation: tape 26s linear infinite; }
.tape-run { display: flex; gap: 16px; padding-right: 16px; }
.tape-star { color: var(--riso); }
@keyframes tape { to { transform: translateX(-50%); } }

/* ---------- feuilles et notifications */
.sheet { border: 2px solid var(--edge); border-bottom: 0; animation: rise .42s cubic-bezier(.2, 1.15, .3, 1); }
.sheet-backdrop { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.toast { border: 2px solid var(--edge); box-shadow: 4px 4px 0 var(--drop); animation: toast-in .45s var(--spring); }
@keyframes toast-in { from { opacity: 0; transform: translateY(-24px) rotate(-3deg) scale(.9); } }
.result-badge { border: 3px solid var(--edge); box-shadow: 4px 4px 0 var(--drop); animation: chip-pop .55s var(--spring) both; }
.result-bad { animation: chip-pop .55s var(--spring) both, shake .4s .45s ease-in-out; }
@keyframes shake { 25% { transform: translateX(-6px) rotate(-4deg); } 75% { transform: translateX(6px) rotate(4deg); } }

/* ---------- chargement : deux encres qui se croisent */
.spinner { position: relative; width: 52px; height: 30px; border: 0; border-radius: 0; animation: none; }
.spinner::before, .spinner::after {
  content: ""; position: absolute; top: 0; width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid var(--edge); animation: cross .7s ease-in-out infinite alternate;
}
.spinner::before { left: 0; background: var(--blossom); }
.spinner::after { right: 0; background: var(--mint); animation-direction: alternate-reverse; }
@keyframes cross { to { transform: translateX(22px); } }

/* ---------- pétales de cerisier */
.petals { position: fixed; inset: 0; pointer-events: none; z-index: 80; overflow: hidden; }
.petal {
  position: absolute; top: -24px; left: var(--x); width: var(--s); height: calc(var(--s) * .7);
  background: var(--c); border: 1.5px solid var(--edge); border-radius: 80% 0 80% 0;
  animation: fall var(--d) cubic-bezier(.25, .6, .45, 1) var(--w) forwards;
}
@keyframes fall {
  30% { transform: translate(calc(var(--dx) * -.4), 30vh) rotate(calc(var(--r) * .3)); }
  to { transform: translate(var(--dx), 112vh) rotate(var(--r)); }
}

/* ---------- révélations */
.show-card, .verify-card { position: relative; overflow: hidden; }
.show-card::after {
  content: ""; position: absolute; right: -40px; bottom: -40px; width: 200px; height: 200px; pointer-events: none;
  background-image: radial-gradient(var(--mission-bar) 1.6px, transparent 2px); background-size: 11px 11px;
  -webkit-mask-image: radial-gradient(circle, #000 30%, transparent 70%); mask-image: radial-gradient(circle, #000 30%, transparent 70%);
}
.show-card > *, .verify-card > * { position: relative; z-index: 1; }
.show-enter { animation: show-in .5s var(--spring); }
@keyframes show-in { from { opacity: 0; transform: translateX(40px) rotate(3deg) scale(.96); } }
.show-title .show-label {
  align-self: flex-start; display: inline-block; padding: 3px 12px; border-radius: 8px;
  background: var(--surface); color: var(--ink); border: 2px solid var(--edge); box-shadow: 3px 3px 0 var(--drop);
  transform: rotate(-3deg); animation: chip-pop .5s .15s var(--spring) both;
}
.show-drumroll .show-big { animation: tremble .09s linear infinite alternate; }
@keyframes tremble { from { transform: translate(-1px, .5px) rotate(-.4deg); } to { transform: translate(1px, -.5px) rotate(.4deg); } }
.show-winner .stamp { animation-delay: .35s; }
.show-card .show-big, .verify-card .verify-claim, .mission-text { text-shadow: .05em .05em 0 var(--card-riso); }
.show-champion, .show-card .show-champion { text-shadow: .06em .06em 0 var(--card-riso), -.04em -.03em 0 var(--riso-2); }
.show-progress { border: 2px solid var(--edge); height: 10px; border-radius: 6px; }
.show-progress span { border-radius: 0; }
.status { border: 1.5px solid currentColor; }
.title-card { transition: transform .2s var(--spring); }
.title-card:nth-child(odd) { transform: rotate(-1deg); }
.title-card:nth-child(even) { transform: rotate(1deg); }

/* ---------- mouvement réduit : rien ne bouge, tout reste lisible */
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; }
  .petals { display: none; }
}

/* ---------- accueil : liens discrets, transfert de profil */
.home-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 18px; }
.steps { list-style: decimal; padding-left: 22px; display: grid; gap: 6px; color: var(--ink-soft); }
.transfer-code { font-size: 36px; letter-spacing: .08em; white-space: nowrap; }
.input-transfer { font-size: 26px; letter-spacing: .12em; text-align: center; }


/* ============================================================ univers illustré
   Deuxième couche, issue de la maquette « immersive » : feuillages, ville en silhouette,
   boule à facettes, portraits d'agents, notes manuscrites. Tout est décoratif et passe
   sous le contenu ; les dessins suivent le thème jour / nuit. */

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.illo { display: block; overflow: visible; }

/* ---------- décor d'écran */
.screen { position: relative; isolation: isolate; }
.scene { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.scene::before {
  content: ""; position: absolute; left: -10%; right: -10%; top: -40px; height: 380px;
  background: radial-gradient(60% 70% at 50% 25%, var(--wash), transparent 75%);
}
.scene .illo { position: absolute; }
.scene .at-left { left: -40px; top: 40px; width: 118px; --r0: 22deg; transform-origin: 50% 100%; animation: sway 7s ease-in-out infinite alternate; }
.scene .at-right { right: -54px; top: 4px; width: 150px; --r0: -24deg; transform-origin: 50% 100%; animation: sway 9s ease-in-out infinite alternate-reverse; }
.scene .at-top { left: 50%; top: -8px; width: 74px; margin-left: -37px; transform-origin: 50% 0; animation: swing 4.5s ease-in-out infinite alternate; }
.scene .at-top-left { left: 4px; top: 4px; width: 120px; opacity: .8; }
.scene .at-top-right { right: 4px; top: 10px; width: 130px; opacity: .85; }
.scene .at-bottom-left { left: -24px; bottom: 140px; width: 140px; opacity: .9; }
.scene .soft { opacity: .5; }
.scene .spark-1 { left: 16%; top: 118px; width: 16px; animation: twinkle 3.2s ease-in-out infinite; }
.scene .spark-2 { right: 21%; top: 64px; width: 13px; animation: twinkle 2.6s ease-in-out .8s infinite; }
.scene .spark-3 { right: 9%; top: 250px; width: 19px; animation: twinkle 3.8s ease-in-out 1.4s infinite; }
.scene-lobby .at-right { top: 505px; right: -18px; width: 84px; --r0: 6deg; animation-duration: 5s; opacity: .9; }
.scene-lobby .at-top { left: 66%; width: 62px; margin-left: -31px; }
.scene-lobby .at-left { top: 210px; }
@keyframes sway { from { transform: rotate(var(--r0)); } to { transform: rotate(calc(var(--r0) + 5deg)); } }
@keyframes swing { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
@keyframes twinkle { 0%, 100% { opacity: .3; transform: scale(.65) rotate(0); } 50% { opacity: 1; transform: scale(1) rotate(25deg); } }
@keyframes float { 50% { transform: translateY(-7px); } }

/* ---------- la ville, sous les boutons du bas */
.screen-footer { isolation: isolate; }
.screen-footer.with-city { padding-bottom: calc(env(safe-area-inset-bottom) + 64px); }
.city { position: absolute; left: -20px; right: -20px; bottom: 0; height: 96px; z-index: -1; pointer-events: none; }
.city .illo { position: absolute; }
.city-skyline { left: 0; bottom: 0; width: 100%; height: 78px; opacity: .9; }
.city-garland { left: 0; bottom: 40px; width: 100%; height: 30px; animation: glow 2.8s ease-in-out infinite alternate; }
.city-greens { left: -14px; bottom: -4px; width: 104px; }
.city-greens-right { left: auto; right: -14px; transform: scaleX(-1); }
@keyframes glow { from { opacity: .7; } to { opacity: 1; } }

/* ---------- notes manuscrites */
.hand-note {
  margin: 0; display: inline-flex; align-items: center; gap: 8px; max-width: 17em;
  font-family: var(--font-hand); font-size: 25px; font-weight: 600; line-height: 1.05; color: var(--hand);
  transform: rotate(-5deg); transform-origin: 0 50%;
}
.hand-doodle { width: 26px; flex: none; }
.hand-center { align-self: center; transform-origin: 50% 50%; }
.hand-end { align-self: flex-end; transform: rotate(-6deg); }

/* ---------- portraits */
.avatar { position: relative; display: inline-grid; flex: none; width: 44px; height: 44px; }
.avatar > .avatar-face {
  width: 100%; height: 100%; border-radius: 50%; border: 2px solid var(--edge); background: var(--surface);
}
/* Photo de profil de la soirée, à la place du portrait dessiné. */
img.avatar-face { display: block; object-fit: cover; -webkit-user-drag: none; user-select: none; }
.avatar-xs { width: 26px; height: 26px; }
.avatar-xs > .avatar-face { border-width: 1.5px; }
.avatar-sm { width: 32px; height: 32px; }
.avatar-lg { width: 58px; height: 58px; }
.avatar-xl { width: 84px; height: 84px; }
.avatar-xl > .avatar-face { border-width: 3px; }
.avatar-crown { position: absolute; width: 64%; left: 18%; top: -36%; }
.avatar-stack { display: inline-flex; align-items: center; }
.avatar-stack > .avatar + .avatar { margin-left: -8px; }
.avatar-more {
  place-items: center; border-radius: 50%; border: 1.5px solid var(--edge);
  background: var(--petal-soft); font-size: 10px; font-weight: 800; color: var(--ink);
}
.screen:not(.screen-still) .avatar-stack > .avatar,
.screen:not(.screen-still) .agent .avatar { animation: chip-pop .45s var(--spring) both; }
.agents .agent:nth-child(2) .avatar, .avatar-stack > .avatar:nth-child(2) { animation-delay: .05s; }
.agents .agent:nth-child(3) .avatar, .avatar-stack > .avatar:nth-child(3) { animation-delay: .1s; }
.agents .agent:nth-child(4) .avatar, .avatar-stack > .avatar:nth-child(4) { animation-delay: .15s; }
.agents .agent:nth-child(n + 5) .avatar, .avatar-stack > .avatar:nth-child(n + 5) { animation-delay: .2s; }

/* ---------- titres de section : une pastille devant */
.section-title .mark { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; vertical-align: 2px; background: var(--leaf); }
.section-title .mark-heart { width: auto; height: auto; border-radius: 0; background: none; color: var(--berry); vertical-align: -3px; }

/* ---------- cartes avec vignette (accueil) */
.list-row.with-thumb { justify-content: flex-start; gap: 14px; padding: 14px 16px; }
.thumb { width: 60px; height: 60px; flex: none; border-radius: 16px; overflow: hidden; border: 2px solid var(--edge); box-shadow: 2px 2px 0 var(--blossom); }
.thumb .illo { width: 100%; height: 100%; }
.thumb-2 .illo { filter: hue-rotate(-38deg) saturate(1.1); }
.thumb-3 .illo { filter: hue-rotate(48deg); }
.thumb-4 .illo { filter: hue-rotate(160deg) saturate(.8); }
.row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.row-main strong { font-size: 17px; overflow-wrap: anywhere; }
.row-meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.row-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 12px; align-self: stretch; color: var(--ink-soft); }
.pill { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--blossom); color: var(--on-accent); font-weight: 800; font-size: 12px; white-space: nowrap; }
.pill-mint { background: var(--mint); }

/* ---------- étiquettes inclinées (« Nouvelle soirée », « Fin de partie »…) */
.tag-pill {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 4px;
  border-radius: 999px; background: var(--surface); border: 1.5px solid var(--edge); color: var(--ink);
  font-family: var(--font-mono); font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  transform: rotate(-4deg); box-shadow: 2px 2px 0 var(--blossom);
}
.tag-pill svg { color: var(--berry); }
.tag-pill + .kicker { margin-top: 6px; }
.chip .avatar-xs { margin-left: -10px; }
.screen:not(.screen-still) .tag-pill { animation: chip-pop .5s .1s var(--spring) both; }

/* ---------- champs avec icône et compteur */
.input-wrap { position: relative; }
.input-wrap > svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--ink-soft); pointer-events: none; }
.input-wrap .input { padding-left: 50px; }
.input-wrap .counter-in { position: absolute; right: 14px; bottom: 7px; font-size: 11px; color: var(--ink-soft); pointer-events: none; }
.input-wrap .input-action { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 12px; }
.input-wrap .input-code { padding-left: calc(18px + .4em); padding-right: 54px; }

/* ---------- petits encarts */
.perks { background: var(--petal-soft); border-radius: var(--radius); padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.perks-title { margin: 0 0 6px; font-weight: 700; color: var(--ink-soft); font-size: 14px; }
.perk { display: flex; align-items: center; gap: 12px; padding: 6px 0; font-size: 15px; }
.perk svg { color: var(--berry); flex: none; }
.tip {
  display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 18px;
  background: var(--surface); border: 1.5px solid var(--line); box-shadow: 3px 3px 0 var(--petal-soft);
  font-size: 15px; color: var(--ink-soft);
}
.tip .illo { width: 34px; flex: none; animation: float 3s ease-in-out infinite; }
.dots-nav { display: flex; justify-content: center; gap: 8px; }
.dots-nav span { width: 8px; height: 8px; border-radius: 4px; background: var(--line); transition: width .3s var(--spring), background .2s ease; }
.dots-nav span.on { width: 24px; background: var(--berry); }

/* ---------- mascotte et décors dans le flux */
.decor-row { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; min-height: 120px; pointer-events: none; }
.decor-row .illo-mascot { width: 118px; margin-right: -8px; animation: float 3.4s ease-in-out infinite; }
.decor-row .hand-note { margin-bottom: 28px; }

/* ---------- agents du salon */
.agents { display: flex; flex-wrap: wrap; gap: 14px 6px; }
.agent {
  display: flex; flex-direction: column; align-items: center; gap: 5px; width: 52px; padding: 0;
  background: none; border: 0; color: inherit; font-size: 13px; font-weight: 700;
}
.agent .avatar { width: 48px; height: 48px; }
.agent-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.agent small { font-size: 11px; color: var(--berry); font-weight: 800; margin-top: -3px; }
.agent.is-me .avatar > .avatar-face { box-shadow: 0 0 0 3px var(--blossom); }
.agent-add .add-ring {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  border: 2px dashed var(--edge); color: var(--berry); background: var(--surface);
}
button.agent:active .avatar, button.agent:active .add-ring { transform: scale(.93); }

/* ---------- médailles du classement */
.medal {
  position: relative; width: 34px; height: 34px; flex: none; display: grid; place-items: center;
  border-radius: 50%; border: 2px solid var(--edge); background: var(--surface); color: #3B1E2B;
  font-family: var(--font-display); font-weight: 900; font-size: 16px;
}
.medal-1 { background: var(--medal-1); }
.medal-2 { background: var(--medal-2); }
.medal-3 { background: var(--medal-3); }
.medal-1 .illo { position: absolute; width: 22px; top: -15px; left: 4px; }
.medal-plain { border-color: transparent; background: none; color: var(--ink-soft); }

/* ---------- carte des points gagnés */
.points-card { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 18px; background: var(--challenge-bg); border: 2px solid var(--leaf); }
.points-card .points-star { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--leaf); color: var(--challenge-bg); }
.points-card strong { display: block; font-family: var(--font-display); font-size: 27px; line-height: 1; color: var(--leaf); }
.points-card span { font-size: 14px; color: var(--ink-soft); }
.points-card.is-bad { background: var(--failed-bg); border-color: var(--berry); }
.points-card.is-bad .points-star { background: var(--berry); color: var(--failed-bg); }
.points-card.is-bad strong { color: var(--berry); }

/* ---------- titres et kickers avec icône */
.kicker-icon { display: flex; align-items: center; gap: 8px; }
.kicker-icon::before { display: none; }
.kicker-icon svg { color: var(--berry); }
.title-icon { display: inline-block; color: var(--berry); vertical-align: -2px; }
.title-doodle { display: inline-flex; align-items: flex-start; gap: 4px; }
.title-doodle-art { width: 26px; margin-top: -4px; }
.join-preview .title-md { line-height: 1.2; }
.join-preview p { margin: 0; }
.scene-page .at-bottom-left { bottom: 6px; width: 120px; }
.busy-dots { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid currentColor; border-right-color: transparent; animation: spin .8s linear infinite; }

/* ---------- tutoriel : la main qui appuie */
.tuto-card { position: relative; }
.tuto-hand { position: absolute; right: -6px; bottom: -34px; width: 76px; pointer-events: none; animation: tap 1.6s ease-in-out infinite; }
.tuto-hand .illo-hand { width: 76px; }
.tuto-hand-lines { position: absolute; width: 30px; left: -18px; top: -6px; }
@keyframes tap { 0%, 100% { transform: translate(0, 0) rotate(-12deg); } 45% { transform: translate(-8px, -10px) rotate(-12deg); } 55% { transform: translate(-8px, -8px) rotate(-12deg) scale(.96); } }
.screen-footer .dots-nav { margin-bottom: 2px; }

/* ---------- listes avec icône (salon, réglages) */
.list-row.with-icon { justify-content: flex-start; }
.row-icon { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--petal-soft); color: var(--berry); }
.row-icon-round { border-radius: 50%; border: 1.5px solid var(--edge); background: var(--blossom); color: var(--ink); width: 42px; height: 42px; }
.settings-links .label { gap: 10px; }
.settings-links svg { color: var(--berry); }
.lobby-tags { justify-content: space-between; }
.lobby-tags .topbar-meta { text-align: right; }

/* ---------- feuille d'invitation : la mascotte salue */
.sheet { position: relative; }
.sheet-mascot { position: absolute; width: 82px; right: 10px; bottom: 74px; z-index: 1; pointer-events: none; animation: float 3.2s ease-in-out infinite; }

/* ---------- règles numérotées */
.rules { gap: 16px; }
.rule { display: flex; gap: 14px; align-items: flex-start; }
.rule p { margin: 0; font-size: 15px; }
.rule-num {
  width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%;
  background: var(--berry); color: var(--surface); font-family: var(--font-display); font-weight: 900; font-size: 15px;
  box-shadow: 2px 2px 0 var(--blossom);
}
.rule-icon { flex: none; color: var(--berry); margin-top: 2px; }

/* ---------- jeu complet : un médaillon par mode */
.premium-mode.with-art { display: flex; gap: 14px; align-items: flex-start; }
.premium-mode .row-icon-round { margin-top: 2px; }

/* ---------- écran de mission */
.mission-art { position: absolute; right: 12px; bottom: -16px; width: 52px; transform: rotate(12deg); pointer-events: none; animation: float 3.6s ease-in-out infinite; }
.mission-card .mission-foot { padding-right: 52px; }
.link-quiet svg { display: inline-block; vertical-align: -2px; margin-right: 5px; color: var(--berry); }
.btn-row .btn svg { flex: none; }

/* ---------- accusation */
.choice-who { display: inline-flex; align-items: center; gap: 7px; }
.choice .avatar-xs { width: 24px; height: 24px; }
.option-label { display: inline-flex; align-items: center; gap: 10px; }
.option-label svg { color: var(--berry); flex: none; }
.option .tag.pill { color: var(--on-accent); font-size: 12px; }
.result-hero { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 10px; min-height: 120px; padding: 6px 0 4px; isolation: isolate; }
.result-art { width: 96px; animation: winner .6s cubic-bezier(.2, .9, .3, 1.4) both; }
.illo-polaroid.result-art { width: 74px; transform: rotate(-8deg); filter: grayscale(.4); }
.result-confetti { position: absolute; left: 8%; top: -6px; width: 84%; height: 100%; opacity: .85; z-index: -1; }
.result-hero .stamp { margin-bottom: 14px; }
.sheet .actions .hand-note { margin: 0 auto 4px; }

/* ---------- vérification : le polaroïd de l'agent */
.verify-card { padding-right: 22px; }
.verify-polaroid { position: absolute; top: 12px; right: 12px; width: 62px; transform: rotate(8deg); pointer-events: none; }
.verify-polaroid .illo { width: 62px; }
.verify-polaroid .avatar { position: absolute; left: 9px; top: 8px; width: 44px; height: 44px; }
.verify-polaroid .avatar > .avatar-face { border-radius: 2px; border: 0; }
.verify-card .show-head { padding-right: 64px; }
.verify-card .verify-claim { padding-right: 56px; }

/* ---------- défilement des révélations */
.show-agent { display: flex; align-items: center; gap: 10px; min-width: 0; }
.show-type { margin: 3px 0 0; display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--mission-meta); }
.show-points { display: flex; align-items: center; gap: 8px; }
.show-points svg { color: var(--berry); flex: none; }
.show-card .show-mascot { width: 92px; align-self: center; animation: float 3.4s ease-in-out infinite; }
.show-title-hero { align-self: flex-start; position: relative; margin: 26px 0 4px; }
.show-card .show-spark { position: absolute; width: 18px; right: -16px; top: -4px; animation: twinkle 2.4s ease-in-out infinite; }
.show-card .show-trophy { width: 104px; align-self: center; animation: winner .6s cubic-bezier(.2, .9, .3, 1.4) both; }
.show-card .show-trophy-hidden { filter: grayscale(1) brightness(.75); opacity: .45; animation: tremble .09s linear infinite alternate; }
.show-card .show-confetti { position: absolute; left: 0; top: 0; width: 100%; height: 46%; z-index: 0; opacity: .9; pointer-events: none; }
.show-winners { display: flex; justify-content: center; flex-wrap: wrap; gap: 18px 14px; margin-top: 10px; }
.show-winner { display: flex; flex-direction: column; align-items: center; gap: 6px; font-weight: 800; font-size: 14px; }
.show-praise { display: flex; gap: 8px; align-items: flex-start; text-align: left; font-size: 14px; padding: 10px 14px; border-radius: 14px; background: var(--mission-glass-strong); }
.show-praise svg { color: var(--berry); flex: none; margin-top: 2px; }
.show-note { min-height: 30px; display: flex; justify-content: center; }
.show-nav .btn svg { flex: none; }

/* ---------- classement final : médailles et portraits */
.ranking .list-row { justify-content: flex-start; gap: 12px; padding: 12px 16px; }
.ranking .name { display: flex; flex-direction: column; gap: 3px; }
.ranking .me .name::after { content: none; }
.rank-tag { align-self: flex-start; font-size: 11.5px; font-weight: 700; color: var(--berry); background: var(--petal-soft); padding: 2px 9px; border-radius: 999px; }
.ranking .podium-1 { background: linear-gradient(90deg, var(--option-pressed), transparent 75%); }
.screen:not(.screen-still) .ranking .medal-1 { animation: chip-pop .6s .3s var(--spring) both; }

/* ---------- page du groupe : la bande au complet */
.season-row { align-items: center; }
.team { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 8px 22px; border-radius: var(--radius-lg); background: radial-gradient(80% 90% at 50% 100%, var(--wash), transparent 75%); overflow: hidden; }
.team .hand-note { align-self: flex-start; margin-left: 6px; }
.team-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px; margin-top: 12px; }
.team-member { margin: 0 -4px; }
.team-member:nth-child(odd) { transform: translateY(-6px); }
.screen:not(.screen-still) .team-member .avatar { animation: chip-pop .5s var(--spring) both; }
.team-member:nth-child(2) .avatar { animation-delay: .06s; } .team-member:nth-child(3) .avatar { animation-delay: .12s; }
.team-member:nth-child(4) .avatar { animation-delay: .18s; } .team-member:nth-child(n + 5) .avatar { animation-delay: .24s; }
.team-badge {
  padding: 6px 16px 5px; border-radius: 999px; background: var(--surface); border: 2px solid var(--edge);
  box-shadow: 3px 3px 0 var(--blossom); font-family: var(--font-mono); font-weight: 800; font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase; transform: rotate(-3deg);
}
.team-greens { position: absolute; left: -16px; bottom: -8px; width: 92px; opacity: .9; }
.team-greens-right { left: auto; right: -16px; transform: scaleX(-1); }

/* ---------- récap : l'encart de partage et la ville au pied */
.share-box { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: var(--radius-lg); background: var(--surface); border: 2px solid var(--edge); box-shadow: 4px 4px 0 var(--drop); }
.share-head { display: flex; align-items: center; gap: 12px; }
.share-head p { margin: 4px 0 0; }
.share-mascot { width: 64px; flex: none; animation: float 3.2s ease-in-out infinite; }
.recap-end { position: relative; min-height: 150px; display: flex; justify-content: center; align-items: flex-start; padding: 6px 28px 0; margin: 0 -20px -20px; }
.recap-end .city { z-index: 0; }
.recap-end .hand-note { position: relative; z-index: 1; }

/* ---------- mouvement réduit : réglage du téléphone ou de l'appli */
@media (prefers-reduced-motion: reduce) {
  .scene .illo, .city .illo, .tip .illo, .decor-row .illo { animation: none; }
}
:root.dj-calm *, :root.dj-calm *::before, :root.dj-calm *::after { animation: none !important; transition: none !important; }
:root.dj-calm .petals { display: none; }

@media (max-width: 360px) {
  .title { font-size: 28px; }
  .code { font-size: 38px; }
  .mission-text { font-size: 23px; }
  .stat-value { font-size: 22px; }
  .stat-value.cover { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- photo de profil de la soirée */
.photo-cta {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 8px 14px; min-height: 44px;
  border-radius: 999px; border: 2px dashed var(--edge); background: var(--surface); color: var(--ink);
  font: inherit; font-size: 15px; font-weight: 800;
}
.photo-cta svg { color: var(--berry); }
.photo-cta:active { transform: scale(.97); }
.photo-preview { display: flex; justify-content: center; padding: 6px 0 4px; }
.photo-preview .avatar-xl { width: 120px; height: 120px; }
.photo-row { display: flex; align-items: center; gap: 14px; }
.photo-face .avatar { width: 64px; height: 64px; }
.photo-buttons { gap: 8px; flex-wrap: wrap; }
.photo-buttons .btn { flex: 1 1 0; min-width: 0; }
.photo-field .row { gap: 8px; flex-wrap: wrap; }

/* ---------- publicité (groupes sans jeu complet, hors du jeu : voir js/ads.js) */
.ad-banner { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 8px; }
.ad-banner[hidden], .ad-consent[hidden] { display: none; }
.ad-label {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft);
}
.ad-frame { display: block; border: 0; background: transparent; }
.ad-frame-banner { width: 300px; height: 250px; max-width: 100%; }
.ad-demo {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center;
  border: 2px dashed var(--line); border-radius: 12px; background: var(--surface); color: var(--ink-soft);
}
.ad-demo strong { color: var(--ink); font-size: 15px; }
.ad-demo span { font-size: 12px; }
.ad-demo-banner { width: 300px; max-width: 100%; height: 250px; }
.ad-demo-full { width: 100%; min-height: 250px; padding: 20px; }
.ad-demo-full strong { font-size: 22px; }
.ad-demo-full span { font-size: 14px; max-width: 26ch; }
.ad-interstitial, .ad-consent {
  position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background: var(--overlay); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
}
.ad-card {
  width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 12px; padding: 18px;
  border-radius: var(--radius-lg); border: 2px solid var(--edge); background: var(--bg); box-shadow: 4px 4px 0 var(--drop);
}
.ad-card .ad-label { align-self: center; }
.ad-interstitial-google, .ad-consent { padding: 0; background: rgba(0, 0, 0, .6); }
.ad-interstitial-google .ad-frame, .ad-consent .ad-frame { width: 100%; height: 100%; }
.ad-consent-close { position: absolute; left: 16px; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); width: auto; }

/* ---------- sauvegarde par clé d'accès (Face ID / empreinte) */
.backup-card { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px 14px; background: var(--petal-soft); border-color: var(--edge); }
.backup-card strong { display: block; }
.backup-card p { margin: 2px 0 0; }
.backup-card .btn { grid-column: 1 / -1; }
.backup-hero { display: grid; place-items: center; width: 84px; height: 84px; margin: 0 auto 4px; border-radius: 50%;
  background: var(--blossom); color: var(--on-accent); border: 2px solid var(--edge); box-shadow: 4px 4px 0 var(--edge); }
.backup-card .row-icon-round { color: var(--on-accent); }
.backup-points { list-style: none; margin: 0; padding: 14px 16px; }
.backup-points li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.35; }
.backup-points li svg { flex: none; margin-top: 2px; color: var(--leaf); }
.settings-links .label svg { flex: none; }
.settings-links .list-row > .muted { flex: none; white-space: nowrap; }

/* ---------- Tête-à-tête : bluffs */
.mission-tag-bluff { background: var(--ink); color: var(--blossom); }
.mission-bluff-rule { margin: 10px 0 0; font-size: 14px; font-weight: 700; color: var(--mission-ink); opacity: .85; }

/* ---------- salon : nombre de missions et bluffs */
.segmented-5 { grid-template-columns: repeat(5, 1fr); gap: 6px; }
.segmented-6 { grid-template-columns: repeat(6, 1fr); gap: 6px; }
.segmented-5 button, .segmented-6 button { padding-left: 0; padding-right: 0; min-width: 0; }
.missions-settings { margin-top: 18px; }
.missions-help { margin-top: 12px; }

.danger-row, .danger-row svg { color: var(--berry); }

/* Applis : place réservée sous la bannière AdMob native (bannière adaptative, 50 à 90 px de haut). */
.ad-native-spacer { height: 64px; }

/* ---------- salon : durée de la partie */
.segmented-4 { grid-template-columns: repeat(4, 1fr); gap: 6px; }
.segmented-4 button { padding-left: 2px; padding-right: 2px; min-width: 0; font-size: 14px; }

/* ---------- longue durée : en attendant la mission de demain */
.next-mission { margin: 4px 0 0; font-size: 17px; }
.next-mission strong { color: var(--berry); }