/* Police Inter servie par le site lui-même (aucune requête vers Google Fonts) — licence OFL, voir /fonts/LICENSE-Inter.txt */
@font-face {
  font-family: Inter;
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: Inter;
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --vv-top: 0px;
  --vv-height: 100%;
  --bg: #f9f8f6;
  --surface: #ffffff;
  --line: #e7e5e0;
  --line-strong: #d6d3cc;
  --ink: #1d1c19;
  --muted: #6f6d68; /* 4,5:1 au moins sur tous les fonds de la page (comme les pages légales) */
  --accent: #2d5bff;
  --danger: #e5484d;
  --danger-text: #cd2b31; /* --danger est trop pâle pour du texte de 12 à 14 px */
  --picked: #f76808;
  --picked-text: #b54700; /* idem pour --picked */
  --radius: 10px;
  --font: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: light;
}

* { box-sizing: border-box; }

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

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

.instant, .instant * { transition: none !important; }

button { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Tableau ---------- */

#board {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: grab;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.9s ease, visibility 0s linear 0.9s;
}

#board.grabbing { cursor: grabbing; }

.on-board #board {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.9s ease;
}

.board-ui {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease 0.4s, visibility 0s linear 0.9s;
}

.on-board .board-ui {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease 0.4s;
}

/* ---------- Saisie ---------- */

/* --vv-top, --vv-height : la partie visible de la page (app.js, visualViewport). Sur iPhone, le clavier la réduit
   sans redimensionner la page, et Safari peut la faire glisser : champs et boutons se placent par rapport à elle. */
.composer {
  position: fixed;
  left: 50%;
  top: calc(var(--vv-top) + var(--vv-height) / 2);
  z-index: 2;
  width: min(440px, calc(100vw - 32px));
  margin: 0;
  transform: translate(-50%, -50%);
  transition: top 0.8s var(--ease), opacity 0.35s ease, visibility 0s;
}

.on-board .composer-word { top: calc(var(--vv-top) + var(--vv-height) - 52px - env(safe-area-inset-bottom)); }

/* Saisie au doigt, clavier ouvert : le champ colle au clavier, les indications secondaires s'effacent. */
.typing.on-board .composer-word { top: calc(var(--vv-top) + var(--vv-height) - 36px); }
/* iPhone : Safari pose sa bande « lettrenuage.fr » sur le bas de la partie visible, juste au-dessus du clavier,
   sans la retirer de visualViewport. Le champ remonte d'autant pour ne pas passer dessous. */
.ios.typing.on-board .composer-word { top: calc(var(--vv-top) + var(--vv-height) - 64px); }
/* Clavier qui s'ouvre ou se ferme : le champ suit tout de suite, sans glisser lentement. */
.typing .composer { transition-property: opacity, visibility !important; }
.typing .hint,
.typing .credits { opacity: 0; visibility: hidden; }

/* Un seul formulaire visible à la fois : le pseudo d'abord, puis le mot. */
.booting .composer,
.composer-pseudo,
.naming .composer-word {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: top 0.8s var(--ease), opacity 0.35s ease, visibility 0s linear 0.35s;
}

.naming .composer-pseudo {
  z-index: 4;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.35s ease 0.15s, visibility 0s;
}

/* Compte (e-mail, mot de passe) : affiché seul, avant le pseudo et le mot. */
.composer-auth,
.authing .composer-word,
.authing .composer-pseudo {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}

.authing .composer-auth {
  z-index: 4;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.35s ease 0.15s, visibility 0s;
}

.booting .composer { transition: none; }

.composer-auth {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.composer-auth input { padding-right: 104px; }
.composer-auth input[hidden] { display: none; }
.composer-auth input[readonly] { padding-right: 14px; background: #fbfaf8; color: var(--muted); } /* verrouillé : le bouton n'est pas dedans */

/* Bouton « Entrer » dans chaque champ : la touche Entrée, pour qui ne la trouve pas (au doigt notamment). */
.send {
  position: absolute;
  top: 6px;
  right: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 11px 0 13px;
  border: 0;
  border-radius: 8px;
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: opacity 0.15s, background 0.15s;
}

.send:hover { background: #000; }
.send svg { flex: none; }
.composer.busy .send { opacity: 0.4; }
.composer-auth .send { top: auto; bottom: 6px; }
.composer-auth[data-mode="sent"] .send,
.composer-auth[data-mode="sso"] .send,
.composer.over .send { display: none; }
.composer-auth[data-mode="link"] .send,
.composer-auth[data-mode="signup"] .send,
.composer-auth[data-mode="linkonly"] .send { position: static; align-self: center; }

/* Sous le formulaire : le texte (ou le message, au même endroit), puis les liens, quelle que soit sa hauteur. */
.auth-below {
  position: absolute;
  top: calc(100% + 14px);
  left: 0;
  right: 0;
}

.auth-notes { display: grid; }
.auth-notes > .lede,
.auth-notes > .msg { position: static; grid-area: 1 / 1; }

.auth-links {
  margin: 12px 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 18px;
}

.auth-links button {
  position: relative;
  padding: 2px 0;
  border: 0;
  background: none;
  color: var(--ink);
  font-size: 13px;
  text-decoration: underline;
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
  cursor: pointer;
}

.auth-links button:hover { text-decoration-color: currentColor; }
/* Zone de toucher d'au moins 24 px de haut, jusqu'à la moitié des écarts entre liens. */
.auth-links button::after { content: ""; position: absolute; inset: -3px -9px; }

/* Deux champs (connexion) : le thème du jour remonte d'autant. */
.authing.auth-tall .theme { bottom: calc(100% - var(--vv-top) - var(--vv-height) / 2 + 72px); }

/* Le thème du jour reste lisible au-dessus du voile qui couvre le tableau. */
.authing .theme,
.naming .theme { z-index: 4; }

/* Changement de pseudo depuis le tableau : le tableau s'efface derrière le champ. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 3;
  background: rgba(249, 248, 246, 0.82);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0s linear 0.3s;
}

.on-board.naming::before,
.on-board.authing::before {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s;
}

.auth-consent {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}

.auth-consent[hidden] { display: none; }
.auth-consent a { color: inherit; }

/* Accord pour la newsletter : facultatif, décoché par défaut. */
.auth-newsletter {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 14px 0 0;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.5;
  cursor: pointer;
}

.auth-newsletter[hidden] { display: none; }

.composer .auth-newsletter input {
  flex: none;
  width: 16px;
  height: 16px;
  margin: 1px 0 0;
  padding: 0;
  border: 0;
  box-shadow: none;
  accent-color: var(--ink);
  cursor: pointer;
}

.composer .auth-newsletter input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Connexion avec Google, GitHub, Discord, Twitch : une rangée de logos sous le formulaire. */
.sso { margin-top: 16px; }
.sso[hidden] { display: none; }

.sso-or {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 12px;
}

.sso-or::before,
.sso-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.sso-buttons { display: flex; justify-content: center; gap: 10px; }

.sso-btn {
  display: grid;
  place-items: center;
  width: 52px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 1px 2px rgba(29, 28, 25, 0.04);
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s var(--ease);
}

.sso-btn:hover { border-color: var(--line-strong); transform: translateY(-1px); }
.sso-btn svg { width: 20px; height: 20px; }
.sso-github { color: #000; }
.sso-discord { color: #5865f2; }
.sso-twitch { color: #9146ff; }

.cancel {
  position: absolute;
  top: calc(100% + 44px);
  left: 50%;
  transform: translateX(-50%);
  display: none;
  padding: 4px 8px;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
}

.cancel:hover { color: var(--ink); }
.cancel::after { content: ""; position: absolute; inset: -10px -4px; } /* zone de toucher de 44 px */
.renaming .cancel { display: block; }

.composer input {
  width: 100%;
  height: 48px;
  padding: 0 150px 0 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: 400 15px/1 var(--font);
  outline: none;
  box-shadow: 0 1px 2px rgba(29, 28, 25, 0.04);
  transition: border-color 0.15s, box-shadow 0.3s;
}

.composer input::placeholder { color: var(--muted); opacity: 1; }

/* Bordure bleue au focus : la seule bordure claire et le halo ne se voyaient pas (moins de 3:1). */
.composer input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(45, 91, 255, 0.08), 0 1px 2px rgba(29, 28, 25, 0.04);
}

.on-board .composer-word input { box-shadow: 0 10px 30px rgba(29, 28, 25, 0.08), 0 1px 2px rgba(29, 28, 25, 0.06); }

.on-board .composer-word input:focus {
  box-shadow: 0 0 0 4px rgba(45, 91, 255, 0.08), 0 10px 30px rgba(29, 28, 25, 0.08);
}

.composer.busy input { color: var(--muted); }

/* Fin du jeu, de 9 h à 10 h : plus de réponses. */
.composer input:disabled { background: #fbfaf8; opacity: 1; cursor: default; }

.composer input.shake { animation: shake 0.4s var(--ease); }

@keyframes shake {
  20% { transform: translateX(-6px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}

.counter {
  position: absolute;
  top: 24px;
  right: 104px;
  transform: translateY(-50%);
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
}

.composer.has-text .counter { opacity: 1; }
.counter.full { color: var(--danger-text); }

.lede,
.msg {
  position: absolute;
  top: calc(100% + 14px);
  left: 0;
  right: 0;
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
  pointer-events: none;
  transition: opacity 0.25s, transform 0.25s var(--ease);
}

.lede { color: var(--muted); }

.composer:has(.msg.show) .lede,
.on-board .composer-word .lede { opacity: 0; }

.msg {
  opacity: 0;
  transform: translateY(-4px);
}

.msg.show { opacity: 1; transform: none; }
.msg.ok { color: var(--accent); }
.msg.error { color: var(--danger-text); }

.on-board .composer-word .msg {
  top: auto;
  bottom: calc(100% + 12px);
  transform: translateY(4px);
}

.on-board .composer-word .msg.show { transform: none; }

.on-board .composer-word .msg span {
  display: inline-block;
  max-width: 100%;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 0 4px 16px rgba(29, 28, 25, 0.06);
}

/* ---------- Interface du tableau ---------- */

.hud {
  position: fixed;
  top: calc(16px + env(safe-area-inset-top) + var(--vv-top));
  left: 16px;
  right: 16px;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

.chip {
  position: relative;
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.15s, opacity 0.5s ease 0.4s, visibility 0s linear 0.9s;
}

.on-board .chip { transition: border-color 0.15s, opacity 0.5s ease 0.4s; }

.chip:hover { border-color: var(--line-strong); }
/* Zone de toucher de 44 px pour une pastille de 36 : 4 px de plus de chaque côté, soit la moitié de l'écart entre deux. */
.chip::after { content: ""; position: absolute; inset: -4px; }
.chip strong { font-weight: 600; }
.chip span { color: var(--muted); }
.score strong { color: var(--accent); }

.score.bump { animation: bump 0.6s cubic-bezier(0.3, 1.8, 0.5, 1); }

@keyframes bump {
  40% { transform: scale(1.12); }
}

.hud-group { display: flex; gap: 8px; }

/* ---------- Thème du jour ---------- */

/* À l'accueil : au-dessus du champ. Sur le tableau : une pastille en haut au centre. */
.theme {
  position: fixed;
  left: 50%;
  bottom: calc(100% - var(--vv-top) - var(--vv-height) / 2 + 44px);
  z-index: 2;
  width: min(440px, calc(100vw - 32px));
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

body:not(.themed) .theme { opacity: 0; }

.theme p { margin: 0; }

.theme-kicker {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.theme-title {
  margin: 6px 0 4px;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.theme-time {
  color: var(--muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

/* Réponses à trouver : une ligne sous l'heure ; sur le tableau, une petite pastille sous celle du thème,
   qui garde ainsi sa largeur (elle tient tout juste entre les boutons, ou sur toute la largeur d'un téléphone). */
.theme .theme-remaining {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.theme-remaining[hidden] { display: none; }

.on-board:not(.authing, .naming) .theme-remaining {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  margin: 0;
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  font-size: 12px;
  line-height: 16px;
  transform: translateX(-50%);
}

/* Mots floutés jusqu'à 9 h : une ligne sous l'heure ; sur le tableau, l'icône seule dans la pastille. */
.theme-veil {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px !important;
  color: var(--muted);
  font-size: 12px;
  pointer-events: auto;
  cursor: help;
}

.theme-veil[hidden] { display: none; }
.theme-veil svg { flex: none; }
.on-board:not(.authing, .naming) .theme-veil { margin: 0 0 0 2px !important; }
.on-board:not(.authing, .naming) .veil-text { display: none; }

.on-board:not(.authing, .naming) .theme {
  top: calc(16px + env(safe-area-inset-top) + var(--vv-top));
  bottom: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  max-width: calc(100vw - 32px);
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  white-space: nowrap;
}

.on-board:not(.authing, .naming) .theme-kicker { display: none; }
.on-board:not(.authing, .naming) .theme-title { margin: 0; overflow: hidden; font-size: 13px; letter-spacing: 0; text-overflow: ellipsis; }
.on-board:not(.authing, .naming) .theme-time::before { content: "· "; }
.on-board:not(.authing, .naming) .theme-time { font-size: 13px; }

.credits {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(16px + env(safe-area-inset-bottom));
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  text-align: center;
  opacity: 0.8;
  transition: opacity 0.3s;
}

.credits a { color: inherit; }

.lang-switch {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.credits .lang-switch { color: var(--ink); }
.on-board .credits { opacity: 0; visibility: hidden; }

.chip .rank-label { color: var(--ink); }
#rank-btn[aria-expanded="true"] { border-color: var(--line-strong); background: var(--surface); }

/* Votre place, dans le bouton du classement : seulement quand le podium ne tient pas à l'écran. */
.my-rank { display: none; align-items: center; gap: 3px; color: var(--accent); }
.my-rank[hidden] { display: none !important; }

/* ---------- Règles du jeu ---------- */

.help-btn {
  justify-content: center;
  width: 36px;
  padding: 0;
  font-size: 15px;
  font-weight: 600;
}

.help-btn[aria-expanded="true"] { border-color: var(--line-strong); background: var(--surface); }

.beta-btn {
  padding: 0 9px;
  color: #2d5bff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* Invitation au serveur Discord : une pastille ronde comme le « ? », le logo passe aux couleurs de Discord au survol. */
.discord-btn {
  justify-content: center;
  width: 36px;
  padding: 0;
  color: var(--ink);
}

.discord-btn:hover, .discord-btn:focus-visible { color: #5865f2; }

.help {
  position: fixed;
  top: calc(60px + env(safe-area-inset-top) + var(--vv-top));
  left: 16px;
  z-index: 5;
  display: none;
  width: min(340px, calc(100vw - 32px));
  padding: 18px 20px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 16px 48px rgba(29, 28, 25, 0.12), 0 2px 6px rgba(29, 28, 25, 0.05);
  transform-origin: top left;
  animation: drop 0.2s var(--ease);
}

.help.open { display: block; }
.help h2 { margin: 0 0 10px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; }

.help-beta {
  margin: 0 0 12px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #eef2ff;
  color: #2a3f8f;
  font-size: 12px;
  line-height: 1.45;
}

.help ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: rule;
  font-size: 13px;
  line-height: 1.5;
}

.help li { position: relative; padding-left: 26px; counter-increment: rule; }
.help li + li { margin-top: 7px; }

.help li::before {
  content: counter(rule);
  position: absolute;
  left: 0;
  top: 1px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #f1f0ec;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
}

.help-start {
  display: none;
  width: 100%;
  height: 44px;
  margin-top: 18px;
  border: 0;
  border-radius: var(--radius);
  background: var(--ink);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.help-start:hover { background: #000; }

/* Première visite : les règles au centre, devant tout le reste. */
.intro .help {
  top: 50%;
  left: 50%;
  z-index: 11;
  width: min(400px, calc(100vw - 32px));
  padding: 24px 24px 20px;
  transform: translate(-50%, -50%);
  animation: none;
}

.intro .help h2 { font-size: 20px; }
.intro .help ol { font-size: 14px; }
.intro .help-start { display: block; }

.intro::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 10;
  background: rgba(249, 248, 246, 0.86);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

/* ---------- Podium toujours affiché ---------- */

.podium {
  position: fixed;
  top: calc(60px + env(safe-area-inset-top) + var(--vv-top));
  right: 16px;
  z-index: 2;
  width: 230px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(29, 28, 25, 0.06);
}

.podium[hidden],
.ranking-open .podium,
.profiling .podium { display: none; }

.podium ol { margin: 0; padding: 4px; list-style: none; }

/* ---------- Classement et profil ---------- */

.panel {
  position: fixed;
  top: calc(60px + env(safe-area-inset-top) + var(--vv-top));
  right: 16px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  width: 300px;
  max-height: min(520px, calc(100% - 224px));
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 16px 48px rgba(29, 28, 25, 0.12), 0 2px 6px rgba(29, 28, 25, 0.05);
  overflow: hidden;
  transform-origin: top right;
  animation: drop 0.2s var(--ease);
}

.panel[hidden] { display: none; }

@keyframes drop {
  from { opacity: 0; transform: translateY(-6px) scale(0.98); }
}

.ranking header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 10px 10px;
  border-bottom: 1px solid var(--line);
}

.ranking header span { color: var(--muted); font-size: 12px; white-space: nowrap; }

.tabs {
  display: flex;
  padding: 3px;
  border-radius: 9px;
  background: #f1f0ec;
}

.tabs button {
  position: relative;
  padding: 5px 10px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

.tabs button::after { content: ""; position: absolute; inset: -10px 0; } /* zone de toucher de 44 px de haut */

.tabs button[aria-selected="true"] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(29, 28, 25, 0.08);
}

.ranking ol {
  margin: 0;
  padding: 6px;
  list-style: none;
  overflow-y: auto;
}

:is(.ranking, .podium) li button {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.podium li button { grid-template-columns: 22px 1fr auto; padding: 6px 8px; }

:is(.ranking, .podium) li button:hover { background: #f4f3f0; }
:is(.ranking, .podium) .rank { color: var(--muted); font-variant-numeric: tabular-nums; }
:is(.ranking, .podium) .rank.top { color: var(--ink); font-weight: 600; }
:is(.ranking, .podium) .name { display: flex; align-items: center; gap: 4px; min-width: 0; font-weight: 500; }
:is(.ranking, .podium) .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
:is(.ranking, .podium) .pts { font-weight: 600; font-variant-numeric: tabular-nums; }
:is(.ranking, .podium) .pts small { color: var(--muted); font-size: 11px; font-weight: 400; }
:is(.ranking, .podium) li.me button { background: rgba(45, 91, 255, 0.07); }
:is(.ranking, .podium) li.me .name,
:is(.ranking, .podium) li.me .pts { color: var(--accent); }
:is(.ranking, .podium) li.picked button { background: rgba(247, 104, 8, 0.1); }
:is(.ranking, .podium) li.picked .name,
:is(.ranking, .podium) li.picked .pts { color: var(--picked-text); }
:is(.ranking, .podium) li.gap { padding: 0 0 2px; color: var(--muted); font-size: 12px; text-align: center; }
.ranking li.empty { padding: 18px 12px; color: var(--muted); font-size: 13px; text-align: center; }

/* Tout le classement / retour aux premiers : sous la liste, qui défile seule quand elle est longue. */
.ranking-more { flex: none; margin: 0; padding: 0 6px 6px; }
.ranking-more[hidden] { display: none; }

.ranking-more button {
  width: 100%;
  min-height: 36px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: none;
  color: var(--accent);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

.ranking-more button:hover { background: #f4f3f0; }

/* Flamme : au moins 50 réponses dans la dernière minute. */
.flame { display: inline-grid; flex: none; place-items: center; width: 15px; height: 15px; }

.flame svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 3px rgba(255, 106, 0, 0.55));
  transform-origin: 50% 90%;
  animation: flicker 0.9s ease-in-out infinite alternate;
}

@keyframes flicker {
  0% { transform: scale(0.94, 1.04) rotate(-3deg); }
  50% { transform: scale(1.06, 0.95) rotate(2deg); }
  100% { transform: scale(0.98, 1.08) rotate(-1deg); }
}

/* Flèche quand votre place change : elle apparaît, reste, puis s'efface. */
.move { display: inline-grid; flex: none; place-items: center; width: 14px; height: 14px; opacity: 0; animation: move 6s var(--ease) forwards; }
.move svg { width: 10px; height: 10px; }
.move.up { color: #1f9d55; }
.move.down { color: var(--danger); }

@keyframes move {
  0% { opacity: 0; transform: translateY(var(--from, 4px)); }
  6%, 80% { opacity: 1; transform: none; }
  100% { opacity: 0; }
}

.move.down { --from: -4px; }

.ranking footer {
  padding: 10px 16px 12px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}

.ranking footer strong { color: var(--ink); font-weight: 600; }
.ranking footer p { margin: 0; }
.ranking footer p + p { margin-top: 6px; }
.ranking footer p[hidden] { display: none; }
.ranking footer .legal-links a { color: var(--muted); }
.ranking footer .legal-links button { color: var(--muted); text-decoration: underline; }

.ranking footer button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font-size: 12px;
  cursor: pointer;
}

.ranking footer button:hover { text-decoration: underline; }

.ranking footer .discord-link a { display: inline-flex; align-items: center; gap: 5px; color: var(--accent); text-decoration: none; }
.ranking footer .discord-link a:hover span { text-decoration: underline; }

/* ---------- Profil ---------- */

.profile header {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px;
  border-bottom: 1px solid var(--line);
}

.profile h2 {
  flex: 1;
  min-width: 0;
  margin: 0 4px;
  overflow: hidden;
  font-size: 15px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.icon-btn {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--muted);
  cursor: pointer;
}

.icon-btn:hover { background: #f4f3f0; color: var(--ink); }
.icon-btn::after { content: ""; position: absolute; inset: -7px; } /* zone de toucher de 44 px */
.icon-btn[hidden] { display: none; }

.profile-body { padding: 12px 14px 14px; overflow-y: auto; }
.profile-body h3 { margin: 0 0 8px; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }
.profile-body .muted { margin: 10px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
.titles .muted { margin: 0; }

.titles { margin-bottom: 14px; }
.titles ul { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }

.title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 4px 10px 4px 4px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}

.title-theme { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.title.t1 { background: #fdf3d3; color: #7a5a00; }
.title.t2 { background: #eef0f3; color: #4b5563; }
.title.t3 { background: #f8e9dd; color: #8a4b1c; }
.title.beta { background: #eef2ff; color: #2a3f8f; }

.medal {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.medal.m1 { background: linear-gradient(140deg, #f7cf4d, #d39b0a); }
.medal.m2 { background: linear-gradient(140deg, #c9ced6, #8e96a3); }
.medal.m3 { background: linear-gradient(140deg, #e3a875, #b06a33); }
.medal.beta { background: linear-gradient(140deg, #7b93ff, #2d5bff); }

.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

.stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 9px 10px;
  border-radius: 10px;
  background: #f6f5f2;
}

.stat.wide { grid-column: 1 / -1; }
.stat .label { color: var(--muted); font-size: 11px; }
.stat strong { display: flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat small { display: flex; align-items: center; gap: 4px; overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.stat small .flame { width: 12px; height: 12px; }
.stat.medals strong { gap: 4px; }
.stat.medals .medal { width: 17px; height: 17px; font-size: 10px; }
.stat.medals .count { margin-right: 6px; }
.stat.hot { background: linear-gradient(135deg, #fff1e3, #ffe2c6); }
.stat.hot strong,
.stat.hot .label,
.stat.hot small { color: #b23a0a; } /* le gris passe sous 4,5:1 sur la fin du dégradé */
.stat.hot .flame { width: 18px; height: 18px; }

.profile-note { display: flex; align-items: center; gap: 7px; margin: 12px 0 0; font-size: 12px; line-height: 1.4; }
.profile-note .dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--picked); box-shadow: 0 0 0 3px rgba(247, 104, 8, 0.18); }

.zoom {
  position: fixed;
  right: 16px;
  bottom: calc(28px + env(safe-area-inset-bottom));
  z-index: 2;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 4px 16px rgba(29, 28, 25, 0.06);
  overflow: hidden;
}

.zoom button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.zoom button + button { border-top: 1px solid var(--line); }
.zoom button:hover { background: #f4f3f0; }
.zoom button:focus-visible { outline-offset: -2px; }

.hint {
  position: fixed;
  top: calc(92px + env(safe-area-inset-top) + var(--vv-top));
  left: 50%;
  z-index: 1;
  height: 36px;
  margin: 0;
  padding: 0 14px;
  display: flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -4px);
  transition: opacity 0.4s, transform 0.4s var(--ease);
}

.hint.show { opacity: 1; transform: translate(-50%, 0); transition-delay: 1s; }

.tip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3;
  padding: 5px 9px;
  border-radius: 6px;
  background: var(--ink);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s;
}

.tip.show { opacity: 1; }
.tip p { margin: 0; line-height: 1.5; }
.tip strong { font-weight: 600; }
.tip span { color: rgba(255, 255, 255, 0.7); font-variant-numeric: tabular-nums; }
.tip .tip-more { color: rgba(255, 255, 255, 0.7); }

/* Écran étroit : la pastille du thème passe sous les boutons du haut, et le podium laisse la place :
   votre place s'affiche dans le bouton du classement. */
@media (max-width: 900px) {
  .on-board:not(.authing, .naming) .theme { top: calc(62px + env(safe-area-inset-top) + var(--vv-top)); }
  .hint { top: calc(138px + env(safe-area-inset-top) + var(--vv-top)); }
  .podium { display: none; }
  .my-rank { display: inline-flex; }
}

/* Petit écran : le formulaire de compte remonte pour que les textes sous lui restent visibles (rien ne défile). */
@media (max-height: 700px) {
  .authing .composer-auth { top: calc(var(--vv-top) + var(--vv-height) / 2 - 64px); }
  .authing .theme { bottom: calc(100% - var(--vv-top) - var(--vv-height) / 2 + 108px); }
  .authing.auth-tall .theme { bottom: calc(100% - var(--vv-top) - var(--vv-height) / 2 + 136px); }
  .authing .theme-kicker, .authing .theme-veil, .authing .theme-remaining { display: none; }
}

@media (max-height: 520px) {
  .theme-kicker, .credits { display: none; }
  .theme-title { font-size: 22px; }
}

@media (max-width: 640px) {
  .composer input { font-size: 16px; }
  .zoom { display: none; }
  .rank-label { display: none; }
  /* « 156 fruits et légumes » ne tient pas à côté des autres boutons : le nombre seul (le thème est juste dessous). */
  #count-unit { display: none; }
  .panel { left: 16px; width: auto; }
  /* Le profil laisse voir le tableau dessous, où ses mots sont en orange. */
  .profile { max-height: 56vh; }
  .hint {
    width: max-content;
    max-width: calc(100vw - 32px);
    height: auto;
    min-height: 36px;
    padding: 8px 14px;
    white-space: normal;
    text-align: center;
  }
}

/* La pastille Discord seulement au-dessus de 1 000 px : plus étroite, la barre du haut ne tient plus avec les scores et
   les longs noms des super thèmes, ou elle touche le thème du jour, au centre. Le lien du classement reste. */
@media (max-width: 1000px) {
  .discord-btn { display: none; }
}

/* Très petit écran : le bouton « Entrer » garde seulement son icône. */
@media (max-width: 380px) {
  #points-unit { display: none; } /* la barre du haut tient avec le badge BETA */
  .send { padding: 0 11px; }
  .send span { display: none; }
  .composer-auth[data-mode="link"] .send span,
  .composer-auth[data-mode="signup"] .send span,
  .composer-auth[data-mode="linkonly"] .send span { display: inline; } /* le texte de ces écrans nomme le bouton */
  .composer input { padding-right: 96px; }
  .composer-auth input { padding-right: 56px; }
  .counter { right: 54px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
  .move { opacity: 1; } /* sans animation, la flèche reste simplement affichée */
}

/* ---------- Changement exceptionnel et administration ---------- */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(29, 28, 25, 0.45);
}

.overlay[hidden] { display: none; }

.overlay-box {
  width: min(380px, 100%);
  max-height: 100%;
  overflow-y: auto;
  padding: 22px 22px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 16px 48px rgba(29, 28, 25, 0.2);
  animation: drop 0.2s var(--ease);
}

.overlay-box h2 { margin: 0 0 10px; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
#notice-title { color: var(--danger-text); }
/* Ancien domaine : au-dessus de tout (intro, entrée, classement), on ne joue plus ici. */
#moved { z-index: 50; }
.overlay-box .moved-wait { margin-top: 10px; color: var(--muted); font-size: 12px; text-align: center; }
.overlay-box .moved-social { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; color: var(--muted); font-size: 13px; }
.moved-social a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
}
.moved-social .moved-discord svg { color: #5865f2; }
.moved-social .moved-discord:hover, .moved-social .moved-discord:focus-visible { border-color: #5865f2; }
.moved-social .moved-reddit:hover, .moved-social .moved-reddit:focus-visible { border-color: #ff4500; }
.overlay-box p { margin: 0; font-size: 14px; line-height: 1.5; }

.overlay-ok {
  display: block;
  width: 100%;
  height: 44px;
  margin-top: 18px;
  border: 0;
  border-radius: var(--radius);
  background: var(--ink);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.overlay-ok:hover { background: #000; }

.admin-box label,
.admin-box .admin-label { display: block; margin: 16px 0 6px; font-size: 12px; font-weight: 600; color: var(--muted); }
.admin-box > label:first-of-type { margin-top: 4px; }
.admin-box .admin-hint { margin: -2px 0 8px; color: var(--muted); font-size: 12px; line-height: 1.4; } /* plus fort que .overlay-box p */

/* Voir tous les mots sans flou : une case à cocher, pas un intitulé de champ. */
.admin-box .admin-check { display: flex; align-items: flex-start; gap: 10px; color: var(--ink); font-size: 14px; font-weight: 500; line-height: 1.4; cursor: pointer; }
.admin-check input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--accent); cursor: pointer; }
.admin-check input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.admin-check small { display: block; color: var(--muted); font-size: 12px; font-weight: 400; }
.admin-box [hidden] { display: none; } /* après .admin-check : la case est masquée pour un manager */
.admin-row { display: flex; gap: 8px; margin: 0; }

.admin-row select,
.admin-row input {
  flex: 1;
  min-width: 0;
  height: 40px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 14px;
}

.admin-row button {
  padding: 0 14px;
  border: 0;
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

#admin-ban-form button { background: var(--danger-text); }
#admin-upcoming { margin: 0; padding: 0; list-style: none; font-size: 14px; }
#admin-upcoming li { display: flex; gap: 10px; padding: 3px 0; }
#admin-upcoming .day { flex: none; min-width: 84px; color: var(--muted); font-variant-numeric: tabular-nums; }
#admin-upcoming small { color: var(--muted); font-size: 12px; }

/* Changer le thème actuel ou le prochain : deux boutons radio présentés en onglets, comme ceux du classement. */
.admin-when { display: flex; margin: 0 0 8px; padding: 3px; border-radius: 9px; background: #f1f0ec; }
.admin-box .admin-when label {
  position: relative;
  flex: 1;
  margin: 0;
  padding: 7px 8px;
  border-radius: 7px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
}
.admin-when input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.admin-when label:has(input:checked) { background: var(--surface); color: var(--ink); box-shadow: 0 1px 2px rgba(29, 28, 25, 0.08); }
.admin-when label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }
.admin-box .admin-hint-after { margin: 6px 0 0; }
.admin-box [hidden] + .admin-label { margin-top: 4px; } /* manager : pas de case au-dessus */
.admin-row :is(select, button):disabled { opacity: 0.5; cursor: default; }
:is(#admin-banned, #admin-managers) { margin: 0; padding: 0; list-style: none; font-size: 14px; }
:is(#admin-banned, #admin-managers) li { display: flex; align-items: center; justify-content: space-between; padding: 4px 0; }
:is(#admin-banned, #admin-managers) li.none { color: var(--muted); }
:is(#admin-banned, #admin-managers) button { border: 0; background: none; color: var(--accent); font: inherit; font-size: 12px; cursor: pointer; }
.admin-box .msg { position: static; min-height: 20px; margin-top: 10px; text-align: left; }