/* =========================================================================
   SENS — feuille de style
   -------------------------------------------------------------------------
   Contraintes mobiles respectées : 320 / 375 / 390 / 430 px.
   Cible tactile : 48 px minimum (supérieur au standard 44 px, car le jeu se
   joue à plusieurs, debout, et le téléphone est souvent tenu à deux mains).
   Toutes les animations sont désactivées sous prefers-reduced-motion.
   ========================================================================= */

:root {
  /* Nuit bleue : le téléphone posé sur une table, pas un site web. */
  --night-0: #05080f;
  --night-1: #0a1020;
  --night-2: #121a30;

  /* Or : signature premium du jeu, utilisé avec parcimonie. */
  --gold: #d9b574;
  --gold-soft: #f0d9a8;
  --gold-dim: rgba(217, 181, 116, 0.22);

  /* La carte est claire : elle doit ressortir de l'écran comme un objet. */
  --ivory: #f7f2e6;
  --ivory-2: #ece4d2;
  --ink: #1a1408;
  --ink-soft: #5b5140;

  --ok: #2f8f5b;
  --ok-soft: #d8f0e2;
  --no: #b23b2e;
  --no-soft: #f7ddd8;
  /* La nuance de traduction : ni vert ni rouge. Volontairement. */
  --mid: #9a6b1f;
  --mid-soft: #f6e6c8;

  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;

  --tap: 48px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --fast: 0.22s;
  --slow: 0.55s;

  --safe-b: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }

/* `display:flex/grid` sur une classe bat la règle `[hidden]` du navigateur.
   Sans cette ligne, tout élément masqué par JS restait visible et — pire —
   interceptait les clics (le bandeau de tour bloquait « Carte suivante »). */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--night-0);
  color: #fff;
  font-family: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* Pas de rebond de page : la carte est l'élément qui bouge, pas le document. */
  overscroll-behavior-y: none;
}

body { min-height: 100dvh; }

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
button:disabled { cursor: default; opacity: 0.45; }

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

.screen { display: none; min-height: 100dvh; }
.screen.is-active { display: flex; flex-direction: column; }

/* ============================================================ ACCUEIL */

.screen--home { position: relative; justify-content: flex-end; overflow: hidden; }

.home__bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 70% at 50% 0%, #1b2647 0%, transparent 60%),
    radial-gradient(90% 50% at 50% 100%, #221a33 0%, transparent 70%),
    linear-gradient(180deg, var(--night-1), var(--night-0));
}
/* Motif géométrique discret : clin d'œil à l'art islamique, sans motif copié. */
.home__bg::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(30deg, rgba(217,181,116,.05) 12%, transparent 12.5%, transparent 87%, rgba(217,181,116,.05) 87.5%),
    linear-gradient(150deg, rgba(217,181,116,.05) 12%, transparent 12.5%, transparent 87%, rgba(217,181,116,.05) 87.5%);
  background-size: 44px 76px;
  mask-image: radial-gradient(80% 60% at 50% 20%, #000 0%, transparent 75%);
  opacity: 0.7;
}

.home__hero {
  position: relative;
  flex: 1 1 auto;
  min-height: 96px;
}
/* La scène déborde largement vers le bas et se dissout : plus de coupure. */
.screen--home .sky {
  position: absolute;
  top: 0; left: 0; right: 0;
  bottom: -34%;
  mask-image: linear-gradient(180deg, #000 0%, #000 34%, transparent 92%);
}
/* ---------------------------------------------------------------------------
   LA SCÈNE D'OUVERTURE
   Aucune image. Un ciel en dégradés, un motif géométrique SVG en trame, une
   lueur d'horizon et quelques étoiles. Coût réseau : zéro octet.
   Rendu identique sur n'importe quel écran, et modifiable en CSS.
   --------------------------------------------------------------------------- */
.sky { position: absolute; inset: 0; overflow: hidden; }

.sky__geometry {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  animation: rise 1.2s var(--ease) both;
}

/* Étoiles : deux couches de points répétés, l'une fixe, l'autre qui dérive
   très lentement. Assez pour donner de la profondeur, pas assez pour distraire. */
.sky__stars {
  position: absolute; inset: -20% 0 30% 0;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 22%, rgba(255,246,224,.85), transparent),
    radial-gradient(1.2px 1.2px at 28% 48%, rgba(255,246,224,.55), transparent),
    radial-gradient(1.8px 1.8px at 47% 14%, rgba(255,246,224,.75), transparent),
    radial-gradient(1.1px 1.1px at 63% 38%, rgba(255,246,224,.5), transparent),
    radial-gradient(1.5px 1.5px at 78% 20%, rgba(255,246,224,.7), transparent),
    radial-gradient(1.2px 1.2px at 88% 52%, rgba(255,246,224,.45), transparent),
    radial-gradient(1.7px 1.7px at 35% 66%, rgba(255,246,224,.6), transparent),
    radial-gradient(1.1px 1.1px at 70% 70%, rgba(255,246,224,.4), transparent);
  animation: drift 90s linear infinite alternate;
}

/* Lueur d'horizon : la « lumière » du thème, sans aucune image de fond. */
.sky__horizon {
  position: absolute; left: -20%; right: -20%; bottom: 8%; height: 54%;
  background:
    radial-gradient(60% 100% at 50% 100%, rgba(217,181,116,.30), transparent 72%),
    radial-gradient(40% 80% at 30% 96%, rgba(122,110,214,.20), transparent 74%),
    radial-gradient(40% 80% at 72% 96%, rgba(46,132,138,.16), transparent 74%);
  filter: blur(2px);
  animation: breathe 12s ease-in-out infinite alternate;
}

.home__panel {
  position: relative;
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 18px calc(18px + var(--safe-b));
  text-align: center;
}

/* Marqueur de bêta : présent, mais jamais un avertissement qui bloque le jeu.
   La personne doit voir « Bêta » et pouvoir Nonetheless jouer immédiatement. */
.home__beta {
  display: inline-block;
  margin: 0 auto 8px;
  padding: 3px 11px;
  border-radius: 99px;
  font-size: 10.5px; font-weight: 800;
  letter-spacing: .16em; text-transform: uppercase;
  color: #e0938c;
  background: rgba(224,147,140,.13);
  border: 1px solid rgba(224,147,140,.42);
}

.home__kicker {
  margin: 0 0 2px;
  font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold); opacity: 0.9;
}
.home__title {
  margin: 0;
  font-size: clamp(54px, 19vw, 96px);
  line-height: 0.92;
  font-weight: 800;
  letter-spacing: 0.06em;
  background: linear-gradient(180deg, #fff 20%, var(--gold-soft) 75%, var(--gold) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: rise 0.9s var(--ease) both;
}
.home__sub {
  margin: 4px 0 18px;
  font-size: 15px; color: rgba(255,255,255,.72);
  letter-spacing: 0.04em;
}

/* --- Les 4 modes : la seule décision demandée avant de jouer ------------- */
.modes { display: grid; gap: 10px; }

.mode {
  display: grid;
  grid-template-columns: 40px 1fr;
  grid-template-areas: "icon label" "icon hint";
  align-items: center;
  column-gap: 12px;
  min-height: var(--tap);
  padding: 12px 16px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.09);
  text-align: left;
  transition: transform var(--fast) var(--ease), background var(--fast), border-color var(--fast);
  animation: rise .6s var(--ease) both;
}
.mode:nth-child(1) { animation-delay: .05s; }
.mode:nth-child(2) { animation-delay: .12s; }
.mode:nth-child(3) { animation-delay: .19s; }
.mode:nth-child(4) { animation-delay: .26s; }

.mode:active { transform: scale(0.975); background: rgba(255,255,255,.1); }

.mode__icon {
  grid-area: icon;
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  font-size: 18px;
  color: var(--gold);
  background: var(--gold-dim);
}
.mode__label { grid-area: label; font-weight: 700; font-size: 17px; }
.mode__hint { grid-area: hint; font-size: 12.5px; color: rgba(255,255,255,.58); line-height: 1.25; }

/* La Famille est le différenciateur : elle est visuellement mise en avant. */
.mode--feature {
  background: linear-gradient(135deg, rgba(217,181,116,.20), rgba(217,181,116,.06));
  border-color: rgba(217,181,116,.45);
  box-shadow: 0 6px 26px rgba(217,181,116,.13);
}
.mode--feature .mode__label { color: var(--gold-soft); }

.home__links { display: flex; gap: 8px; margin-top: 14px; }
.linkbtn {
  flex: 1;
  min-height: var(--tap);
  border-radius: var(--r-sm);
  font-size: 13.5px;
  color: rgba(255,255,255,.78);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
}
.linkbtn:active { background: rgba(255,255,255,.11); }

.home__foot {
  margin: 14px 0 0;
  font-size: 11.5px;
  color: rgba(255,255,255,.4);
  letter-spacing: 0.02em;
}

/* ============================================================== BOUTONS */

.btn {
  min-height: var(--tap);
  padding: 12px 20px;
  border-radius: var(--r-md);
  font-weight: 700;
  font-size: 16px;
  transition: transform var(--fast) var(--ease), opacity var(--fast);
}
.btn:active { transform: scale(.97); }

.btn--primary {
  background: linear-gradient(180deg, var(--gold-soft), var(--gold));
  color: #2a1f08;
  box-shadow: 0 8px 24px rgba(217,181,116,.28);
}
.btn--ghost {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
}
.btn--hint {
  background: transparent;
  border: 1px dashed rgba(255,255,255,.28);
  color: rgba(255,255,255,.7);
  font-size: 14px; font-weight: 600;
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 9px;
}
.btn--next {
  background: linear-gradient(180deg, #ffffff, #e8e2d4);
  color: var(--ink);
  width: 100%;
  animation: pop .4s var(--ease) both;
}

/* ============================================================== BARRE */

.bar {
  display: flex; align-items: center; gap: 10px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  flex: 0 0 auto;
}
.bar__back {
  width: var(--tap); height: var(--tap);
  display: grid; place-items: center;
  font-size: 30px; line-height: 0;
  color: rgba(255,255,255,.75);
  border-radius: var(--r-sm);
}
.bar__title { margin: 0; font-size: 17px; font-weight: 700; }

/* ============================================================ JOUEURS */

.players { flex: 1 1 auto; padding: 16px 16px calc(16px + var(--safe-b)); display: flex; flex-direction: column; }
.players__hint { margin: 0 0 14px; color: rgba(255,255,255,.6); font-size: 14px; }
.players__list { display: grid; gap: 10px; }

.player {
  display: flex; align-items: center; gap: 12px;
  min-height: 62px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.09);
  animation: rise .4s var(--ease) both;
}
.player__avatar {
  width: 42px; height: 42px; flex: 0 0 auto;
  border-radius: 13px;
  display: grid; place-items: center;
  font-weight: 800; font-size: 17px; color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.player__name {
  flex: 1;
  min-height: var(--tap);
  background: transparent;
  border: 0;
  border-bottom: 1.5px dashed rgba(255,255,255,.18);
  color: #fff;
  font-size: 16px; font-weight: 600;
  padding: 4px 2px;
  border-radius: 4px;
}
.player__name::placeholder { color: rgba(255,255,255,.3); font-weight: 500; }
.player__del {
  width: var(--tap); height: var(--tap);
  display: grid; place-items: center;
  font-size: 22px; color: rgba(255,255,255,.35);
}

.players__actions { margin-top: auto; padding-top: 20px; display: grid; gap: 10px; }
.players__note { margin: 12px 0 0; text-align: center; font-size: 11.5px; color: rgba(255,255,255,.35); }

/* ============================================================== JEU */

.screen--play { position: relative; padding-bottom: calc(12px + var(--safe-b)); }

/* --- Bandeau de tour : un RUBAN haut, jamais un écran plein -------------
   Constat mesuré : en plein écran il masquait la question pendant 1,74 s à
   CHAQUE question — 17 s d'attente pour une partie de 10, et la famille ne
   pouvait pas lire l'énoncé pendant l'annonce. Worse : pendant la fermeture
   en fondu, sa teinte transparaissait au travers de la carte crème et laissait
   un fantôme du nom du joueur par-dessus la réponse.
   Le ruban couvre la seule zone du rail (déjà redondante : le rail affiche en
   permanence le joueur actif), se retire vers le haut, et ne masque jamais la
   carte. L'information est la même, immédiatement lisible, sans gymnastique. */
.turn {
  position: absolute; top: 0; left: 0; right: 0;
  z-index: 45;
  display: flex; align-items: center; justify-content: center;
  gap: 10px; padding: 9px 14px 14px;
  pointer-events: none;
  background: linear-gradient(180deg, #17233f 0%, rgba(23,35,63,.94) 62%, rgba(23,35,63,0) 100%);
  animation: turnIn .34s var(--ease) both;
}
.turn.is-out { animation: turnOut .3s var(--ease) both; }
.turn__avatar {
  width: 40px; height: 40px;
  border-radius: 13px;
  display: grid; place-items: center;
  font-size: 19px; font-weight: 800; color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,.4);
  box-shadow: 0 6px 18px rgba(0,0,0,.45);
  animation: pop .4s var(--ease) .04s both;
}
.turn__body { min-width: 0; }
.turn__eyebrow {
  margin: 0; font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--gold);
}
.turn__name {
  margin: 1px 0 0; font-size: 21px; font-weight: 800; letter-spacing: .01em;
  line-height: 1.05;
  animation: rise .34s var(--ease) .06s both;
}
.turn__score {
  font-size: 14px; font-weight: 800; color: var(--gold-soft);
  padding: 4px 12px; border-radius: 99px;
  background: rgba(217,181,116,.14);
  border: 1px solid var(--gold-dim);
  animation: rise .34s var(--ease) .1s both;
}

/* --- Rail des scores : visible en permanence en mode partagé ----------- */
.rail {
  display: flex; gap: 6px; padding: 10px 12px 4px;
  overflow-x: auto; scrollbar-width: none;
  flex: 0 0 auto;
}
.rail::-webkit-scrollbar { display: none; }
.rail__p {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 10px 5px 5px;
  border-radius: 99px;
  background: rgba(255,255,255,.05);
  border: 1px solid transparent;
  font-size: 12.5px; font-weight: 600;
  white-space: nowrap;
  transition: all var(--fast) var(--ease);
  flex: 0 0 auto;
}
.rail__p.is-active { border-color: var(--gold); background: rgba(217,181,116,.16); }
.rail__a { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; font-size: 12px; font-weight: 800; }
.rail__s { color: var(--gold-soft); font-variant-numeric: tabular-nums; }

/* --- HUD ---------------------------------------------------------------- */
.hud {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px 6px; flex: 0 0 auto;
  min-width: 0;
}
.hud__link { white-space: nowrap; }
.hud__spacer { flex: 1; }
.hud__chip {
  font-size: 11.5px; font-weight: 700;
  padding: 5px 10px; border-radius: 99px;
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.72);
  font-variant-numeric: tabular-nums;
  /* « 1 à revoir » et « Crédits des images » passaient sur deux lignes et
     chevauchaient le score. Un bandeau ne se coupe pas : il rétrécit. */
  white-space: nowrap; flex: 0 0 auto;
}
.hud__chip--streak { background: rgba(217,181,116,.18); color: var(--gold-soft); }
.hud__chip--team { background: rgba(90,140,220,.22); color: #b9cdf5; }
.hud__chip--review { background: rgba(154,107,31,.28); color: #f0d9a8; }

.progress { display: flex; gap: 3px; padding: 0 12px 8px; flex: 0 0 auto; }
.progress__s {
  flex: 1; height: 4px; border-radius: 2px;
  background: rgba(255,255,255,.1);
  transition: background var(--fast);
}
.progress__s.is-done { background: var(--gold); }
.progress__s.is-now { background: #fff; }

/* =========================================================== LA CARTE */

/* La carte occupe l'écran : c'est un objet qu'on tient, pas un encart dans une
   page. C'est la zone des réponses qui s'adapte à l'espace restant, pas la
   carte qui se rétrécit — sinon il reste un vide béant sous deux boutons. */
.card {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0 12px;
  perspective: 1600px;
  display: flex;
  position: relative;
  isolation: isolate;
}

/* Fond d'ambiance. Décoratif : il ne dit rien de la question, il ne fait que
   donner un cadre. C'est le VOILE qui porte la lisibilité, pas la photo. */
.card__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: var(--radius-lg, 18px);
  background-color: #1b2430;
  background-size: cover;
  background-position: center 42%;
  opacity: 0;
  transition: opacity 320ms ease;
  pointer-events: none;
}
.card.is-ambience .card__bg { opacity: 1; }

/* Quand une photographie est là, la face de la carte ne la recouvre plus.
   C'est LA cause pour laquelle les paysages n'étaient jamais visibles : la
   face avait un fond crème OPAQUE posé au-dessus de la photo. On la rend
   transparente et c'est le voile clair qui assure le contraste du texte. */
.card.is-ambience .card__face--front {
  background: transparent;
  box-shadow:
    0 18px 44px rgba(0,0,0,.42),
    0 0 0 1px rgba(217,181,116,.55),
    0 0 0 7px rgba(255,255,255,.04);
}
/* L'énoncé reçoit son propre panneau. Un voile uniforme ne suffit pas : sur une
   photo claire et détaillée (dunes, entitled forestier, nuages), le texte reste
   à peine lisible. Les réponses ont déjà ce traitement ; la question doit
   l'avoir aussi, sinon c'est elle qu'on ne lit plus. */
.card.is-ambiance .card__face--front .card__body {
  background: rgba(255, 253, 248, .88);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  border-radius: 18px;
  padding: 14px 18px;
  margin: 0 2px;
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 6px 18px rgba(20,14,4,.10);
}

/* Voile : il ne porte plus l'opacité de la photo. La photo est le FOND de la
   carte, et le voile n'est qu'un voile de lisibilité — un voile CLAIR, parce
   que le texte est sombre. Une photo très claire comme une très sombre
   doivent rester lisibles avec le MÊME réglage, sans retouche image par image. */
.card__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--radius-lg, 18px);
  pointer-events: none;
  background:
    radial-gradient(130% 95% at 50% 6%, rgba(255,253,248,.42) 0%, rgba(255,253,248,.70) 38%, rgba(243,236,220,.80) 100%),
    linear-gradient(180deg, rgba(255,252,244,.18) 0%, rgba(255,252,244,.42) 45%, rgba(243,236,220,.72) 100%);
}
/* Sans ambiance, le voile ne sert plus à rien et la carte reste crème. */
.card:not(.is-ambiance) .card__veil { background: none; }

.card__inner { z-index: 2; }

.hud__link {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted, #b9c2cc);
  font: inherit;
  font-size: 0.78rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 4px 6px;
  cursor: pointer;
  border-radius: 8px;
}
.hud__link:hover, .hud__link:focus-visible { color: var(--gold, #d9b574); }

.card__inner {
  position: relative;
  flex: 1;
  min-height: 0;
  transform-style: preserve-3d;
  transition: transform var(--slow) var(--ease);
}
.card.is-flipped .card__inner { transform: rotateY(180deg); }

.card__face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex; flex-direction: column;
  border-radius: var(--r-lg);
  background:
    linear-gradient(180deg, #fffdf8, var(--ivory) 22%, var(--ivory-2));
  color: var(--ink);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 18px 44px rgba(0,0,0,.42),
    0 0 0 1px rgba(217,181,116,.55),
    0 0 0 7px rgba(255,255,255,.04);
  overflow: hidden;
}
.card__face--back { transform: rotateY(180deg); justify-content: center; }
.card__face--back .card__head { position: absolute; top: 0; left: 0; right: 0; }
.card__face--back .card__body { padding-top: 46px; }



/* Filigrane géométrique du dos de carte : texture, pas image lourde. */
.card__face::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(45deg, rgba(217,181,116,.07) 25%, transparent 25%, transparent 75%, rgba(217,181,116,.07) 75%);
  background-size: 26px 26px;
  opacity: .5;
}
/* Halo lumineux discret sur la carte : donne la profondeur d'un objet posé sur
   une table, sans jamais nuire à la lisibilité du texte. */
.card__face--front::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(80% 45% at 50% 0%, rgba(217,181,116,.18), transparent 70%);
}

.card__head {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 16px 0;
  flex: 0 0 auto;
}
.card__cat {
  font-size: 11px; font-weight: 800;
  letter-spacing: .13em; text-transform: uppercase;
  color: #8a6d2f;
  padding: 5px 10px; border-radius: 99px;
  background: rgba(217,181,116,.2);
}
/* Marqueur visible tant qu'un savant n'a pas validé la question. */
.card__flag--review {
  margin-left: auto;
  font-size: 10px; font-weight: 800;
  letter-spacing: .05em;
  color: #7a4a12;
  background: var(--mid-soft);
  border: 1px solid #d9b574;
  padding: 4px 8px; border-radius: 8px;
}

.card__body {
  padding: 12px 16px 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.card__question {
  /* La taille est CALCULÉE par `fitQuestion()` : elle dépend de la longueur
     réelle de l'énoncé et de la place disponible. Le clamp ci-dessous n'est
     que le filet de sécurité quand le calcul n'a pas encore eu lieu. */
  font-size: var(--q-size, clamp(21px, 6.4vw, 30px));
  line-height: 1.22;
  font-weight: 680;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0;
}
/* Le verset arabe vient des données contrôlées du projet, jamais d'une image. */
.card__ar {
  display: block;
  font-size: clamp(20px, 6.4vw, 28px);
  line-height: 1.85;
  text-align: center;
  direction: rtl;
  margin: 12px 0 4px;
  color: #2c2415;
  font-family: "Geeza Pro", "Al Bayan", "Traditional Arabic", serif;
}
.card__ask { font-size: 14px; color: var(--ink-soft); margin: 10px 0 0; }

.card__zone {
  /* La zone occupe l'espace libre et CENTRE les réponses à l'intérieur : le vide
     se répartit au-dessus et en dessous des boutons, au lieu d'être entassé en
     bas. `overflow-y:auto` garde les questions longues utilisables. */
  flex: 1 1 auto;
  justify-content: center;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 16px 16px;
  display: flex; flex-direction: column; gap: 9px;
}

/* --- Options de réponse ------------------------------------------------- */
.opts { display: grid; gap: 9px; }
/* Sur téléphone, les choix s'empilent : une cible pleine largeur se lit et se
   touche sans viser. La grille à deux colonnes gardait des propositions de
   155 px de large — illisibles et faciles à rater. */
.opts--grid2 { grid-template-columns: 1fr; }
@media (min-width: 560px) { .opts--grid2 { grid-template-columns: 1fr 1fr; } }

.opt {
  position: relative;
  min-height: var(--tap);
  padding: 12px 13px 12px 34px;
  border-radius: 15px;
  background: #fffdf7;
  border: 1.5px solid #ddd3bd;
  color: var(--ink);
  font-size: 15.5px; font-weight: 600; line-height: 1.3;
  text-align: left;
  display: flex; align-items: center; justify-content: flex-start;
  transition: all var(--fast) var(--ease);
  animation: rise .34s var(--ease) both;
}
/* Sur téléphone, les propositions gagnent en taille : elles sont lues et
   pointées avec le pouce, pas survolées. */
@media (max-width: 559px) {
  .opt { font-size: 17px; font-weight: 620; min-height: 58px; padding: 12px 14px 12px 36px; }
  .opt__k { left: 13px; font-size: 13px; }
}
.opt:active { transform: scale(.97); }
.opt__k {
  position: absolute; top: 50%; left: 11px;
  transform: translateY(-50%);
  font-size: 12px; font-weight: 800; color: #b3a684;
}
.opt.is-ok { background: var(--ok-soft); border-color: var(--ok); color: #1c5e3b; animation: bump .4s var(--ease); }
.opt.is-ko { background: var(--no-soft); border-color: var(--no); color: #7d2419; animation: shake .4s var(--ease); }
.opt.is-mid { background: var(--mid-soft); border-color: var(--mid); color: #6d4a10; animation: bump .4s var(--ease); }
.opt.is-dim { opacity: .4; }

/* Vrai / Faux : deux cibles énormes, décision en un coup d'œil. */
.opts--tf { grid-template-columns: 1fr 1fr; align-content: center; flex: 0 1 auto; }
.opts--tf .opt { min-height: 104px; font-size: 21px; font-weight: 800; }
.opt--tf-yes { background: #eef7f1; border-color: #a9d3ba; }
.opt--tf-no { background: #fdf1ee; border-color: #e0b0a6; }

/* Traductions longues : la lecture doit rester confortable. */
.opt--long { text-align: left; font-weight: 550; font-size: 14.5px; line-height: 1.4; min-height: 64px; }

/* --- Mécanique « remettre dans l'ordre » -------------------------------- */
.order__slot {
  min-height: 54px;
  border-radius: 14px;
  border: 1.5px dashed #c9bda3;
  background: rgba(255,255,255,.6);
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px;
  font-size: 14.5px; font-weight: 650;
  color: var(--ink);
  animation: rise .3s var(--ease) both;
}
.order__slot:empty::after {
  content: "Choisis l’ordre des sourates";
  color: #b3a684; font-weight: 500; font-size: 13.5px;
}
.order__n {
  width: 24px; height: 24px; flex: 0 0 auto;
  border-radius: 7px; display: grid; place-items: center;
  font-size: 12px; font-weight: 800;
  background: var(--gold); color: #2a1f08;
}
.order__items { display: flex; flex-wrap: wrap; gap: 8px; }
.order__item {
  min-height: var(--tap); padding: 10px 14px;
  border-radius: 13px; background: #fffdf7;
  border: 1.5px solid #ddd3bd; color: var(--ink);
  font-size: 14.5px; font-weight: 650;
  transition: all var(--fast) var(--ease);
}
.order__item.is-used { opacity: .3; pointer-events: none; }
.order__item:active { transform: scale(.96); }

/* ======================================================== VERSO / PREUVE */

.proof__answer { margin: 0 0 10px; font-size: 18px; font-weight: 800; line-height: 1.3; }
.proof__answer.is-ok { color: var(--ok); }
.proof__answer.is-ko { color: var(--no); }
.proof__answer.is-mid { color: var(--mid); }

.proof__explain { margin: 0 0 12px; font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); }

.proof__block {
  border-top: 1px dashed #d5c9ae;
  padding-top: 12px;
  font-size: 12.5px; line-height: 1.55; color: #6d6350;
  white-space: pre-wrap;
  word-break: break-word;
}
.proof__block:empty { display: none; }
.proof__lbl {
  display: block;
  font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: #8a6d2f; margin-bottom: 5px;
}

/* ============================================================== ACTIONS */

.actions {
  flex: 0 0 auto;
  display: flex; gap: 9px;
  padding: 12px 12px 0;
}

/* Autocollant de verdict : un seul mot, très rapide à lire. */
.sticker {
  position: fixed; left: 50%; top: 46%;
  transform: translate(-50%,-50%);
  z-index: 60; pointer-events: none;
  font-size: clamp(46px, 17vw, 88px); font-weight: 900;
  letter-spacing: -0.03em;
  animation: stamp .85s var(--ease) both;
}
.sticker--ok { color: var(--ok); }
.sticker--ko { color: var(--no); }
.sticker--mid { color: var(--mid); }

/* ============================================================== FIN */

.screen--end { padding: 0 16px calc(20px + var(--safe-b)); overflow-y: auto; }
.end__hero { height: 204px; display: grid; place-items: center; flex: 0 0 auto; margin-top: 14px; overflow: hidden; }

/* Médaille du vainqueur : anneau or, rayons, avatar du joueur. */
.medal { position: relative; width: 148px; height: 148px; display: grid; place-items: center; }
.medal__rays {
  position: absolute; inset: -48px; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(217,181,116,.34) 0 4deg, transparent 4deg 15deg);
  mask-image: radial-gradient(circle, transparent 36%, #000 44%, #000 72%, transparent 76%);
  animation: spin 44s linear infinite;
}
.medal__ring {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 200deg, #f6e3b8, #d9b574 22%, #7d6229 50%, #d9b574 78%, #f6e3b8);
  filter: drop-shadow(0 10px 30px rgba(217,181,116,.34));
  animation: spin 26s linear infinite reverse;
}
.medal__a {
  position: relative; width: 124px; height: 124px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 52px; font-weight: 800; color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.4);
  animation: pop .6s var(--ease) .12s both;
}
/* `height:100%` ne se résolvait pas ici et l'image débordait sur les boutons
   du bas. `max-*` + `pointer-events:none` : une image décorative ne peut plus
   jamais capter un clic, quelle que soit sa taille intrinsèque. */
.end__img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; pointer-events: none; animation: rise .7s var(--ease) both; }
.end__title { margin: 4px 0 2px; text-align: center; font-size: 27px; font-weight: 800; animation: rise .6s var(--ease) .08s both; }
.end__sub { margin: 0 0 16px; text-align: center; font-size: 14px; color: rgba(255,255,255,.6); animation: rise .6s var(--ease) .14s both; }

.podium { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 8px; }
.podium__i {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 13px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.08);
  animation: rise .5s var(--ease) both;
}
.podium__i.is-1 { background: linear-gradient(135deg, rgba(217,181,116,.24), rgba(217,181,116,.06)); border-color: rgba(217,181,116,.5); }
.podium__r {
  width: 30px; flex: 0 0 auto; text-align: center;
  font-size: 15px; font-weight: 800; color: rgba(255,255,255,.5);
}
.podium__i.is-1 .podium__r { color: var(--gold); font-size: 19px; }
.podium__a { width: 38px; height: 38px; flex: 0 0 auto; border-radius: 12px; display: grid; place-items: center; font-weight: 800; font-size: 16px; }
.podium__n { flex: 1; font-weight: 700; font-size: 16px; }
.podium__s { font-weight: 800; color: var(--gold-soft); font-variant-numeric: tabular-nums; }

.end__h3 { margin: 0 0 9px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.end__badges { margin-bottom: 20px; }
.badges { display: flex; flex-wrap: wrap; gap: 7px; }
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: 99px;
  font-size: 12.5px; font-weight: 700;
  background: rgba(217,181,116,.15);
  border: 1px solid var(--gold-dim);
  color: var(--gold-soft);
}
.badge--new { animation: pop .5s var(--ease) both; background: rgba(217,181,116,.3); }
.badges--all { padding: 16px; display: grid; gap: 8px; }
.badge--off { background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.08); color: rgba(255,255,255,.4); }

.end__actions { display: grid; gap: 9px; }
.end__note { margin: 14px 0 0; text-align: center; font-size: 11.5px; color: rgba(255,255,255,.35); line-height: 1.5; }

/* ================================================ CARTE DES CONNAISSANCES */

.know { position: relative; flex: 1; overflow-y: auto; padding: 16px 16px calc(24px + var(--safe-b)); display: grid; gap: 10px; }
.know__c {
  padding: 14px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
}
.know__top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.know__n { font-weight: 700; font-size: 15px; }
.know__v { font-size: 12.5px; color: var(--gold-soft); font-weight: 800; font-variant-numeric: tabular-nums; }
.know__bar { height: 8px; border-radius: 99px; background: rgba(255,255,255,.09); overflow: hidden; }
.know__f { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--gold), var(--gold-soft)); transition: width .6s var(--ease); }
.know__m { margin: 9px 0 0; font-size: 12px; color: rgba(255,255,255,.5); line-height: 1.45; }
.know__empty { text-align: center; color: rgba(255,255,255,.5); padding: 40px 20px; font-size: 14px; }

/* ============================================================== ANIMATIONS */

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes drift { from { transform: translate3d(0,0,0); } to { transform: translate3d(-3%, 2%, 0); } }
@keyframes breathe { from { opacity: .78; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes pop { 0% { opacity: 0; transform: scale(.7); } 60% { opacity: 1; transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes stamp {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(1.9) rotate(-7deg); }
  22% { opacity: 1; transform: translate(-50%,-50%) scale(1) rotate(-2deg); }
  72% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.04) rotate(0deg); }
}
@keyframes bump { 0%,100% { transform: scale(1); } 45% { transform: scale(1.045); } }
@keyframes shake {
  0%,100% { transform: translateX(0); }
  22% { transform: translateX(-7px); } 44% { transform: translateX(6px); }
  66% { transform: translateX(-4px); } 88% { transform: translateX(2px); }
}
@keyframes turnIn { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: none; } }
@keyframes turnOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-100%); } }

/* Respect strict des préférences système : moins d'animation, plus de lisibilité. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .card__inner { transition: none; }
}

/* ================================================ ADAPTATIONS CIBLÉES */

/* 320 px : l'écran le plus étroit encore courant. On resserre, on ne rogne rien. */
@media (max-width: 359px) {
  .mode { padding: 10px 12px; grid-template-columns: 36px 1fr; }
  .mode__icon { width: 36px; height: 36px; }
  .mode__label { font-size: 16px; }
  .mode__hint { font-size: 11.5px; }
  .card { margin: 0 8px; }
  .card__zone { padding: 12px 12px 12px; }
  /* Écrans très étroits : les choix sont désormais empilés sur toute la
     largeur, ils ont donc la place d'être lus. On ne descend plus à 14,5 px
     — c'était la compensation d'une grille à deux colonnes qui a disparu. */
  .opt { font-size: 16px; padding: 11px 12px 11px 34px; }
  .turn__avatar { width: 34px; height: 34px; font-size: 16px; border-radius: 11px; }
  .turn__name { font-size: 19px; }
  .turn__score { font-size: 13px; padding: 3px 10px; }
  .home__sub { margin-bottom: 12px; }
  .home__links { margin-top: 10px; }
  .home__foot { margin-top: 10px; }
  .home__panel { padding: 2px 12px calc(14px + var(--safe-b)); }
  .card__face--front .card__body { padding-top: 42px; }
  .hud { padding: 6px 8px 4px; }
  .hud__chip { font-size: 10.5px; padding: 4px 8px; }
  .progress { padding: 0 8px 6px; }
}

/* Très petits téléphones en paysage : on passe la carte en colonne étroite. */
@media (max-height: 480px) and (orientation: landscape) {
  .home__hero { padding: 8px 12px 0; }
  .home__title { font-size: 44px; }
  .home__sub { margin-bottom: 10px; }
  .modes { grid-template-columns: 1fr 1fr; }
  .end__hero { height: 100px; }
  .card__zone { padding: 10px 12px; }
}

/* Tablette : la carte grandit mais reste lisible en portrait. */
@media (min-width: 620px) {
  .screen--home, .screen--players, .screen--end, .screen--knowledge, .screen--badges { max-width: 520px; margin: 0 auto; width: 100%; }
  .modes { grid-template-columns: 1fr 1fr; }
  .card__face { max-width: 460px; width: 100%; margin: 0 auto; }
  .hud, .progress { max-width: 520px; margin: 0 auto; width: 100%; }
}

/* Très grand écran : on ne déborde pas, on cadre. */
@media (min-width: 900px) {
  .screen--play { max-width: 640px; margin: 0 auto; width: 100%; }
  .card__face { min-height: 520px; }
}


/* =========================================================================
   PHASE 2 — ajouts
   ========================================================================= */

/* --- Rejoueurs connus : un tap, et toute la progression revient ----------- */
.players__lbl {
  margin: 18px 0 8px;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.4); font-weight: 700;
}
.chips { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; padding: 6px 14px 6px 6px;
  border-radius: 99px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  font-size: 14px; font-weight: 600; color: rgba(255,255,255,.9);
  transition: transform var(--fast) var(--ease), background var(--fast);
  animation: rise .3s var(--ease) both;
}
.chip:active { transform: scale(.95); background: rgba(217,181,116,.18); }
.chip:disabled { opacity: .35; }
.chip__a {
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 800; font-size: 14px; color: #fff;
  background: linear-gradient(140deg, hsl(38 62% 50%), hsl(18 62% 38%));
  text-shadow: 0 1px 3px rgba(0,0,0,.3);
}

/* --- Sens de rotation : la mécanique physique, optionnelle ---------------- */
#btn-rotate { font-size: 14px; font-weight: 600; }

/* Flèche de sens dans le rail : le joueur voit où la manche va. */
.rail__ord {
  display: grid; place-items: center;
  width: 16px; font-size: 13px; font-weight: 800;
  color: rgba(255,255,255,.28);
  transition: color var(--fast);
}
.rail__p.is-next .rail__ord { color: var(--gold); }
.rail__p.is-next { box-shadow: 0 0 0 1px var(--gold-dim); }
.rail__n { max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Réserve de décompte : honnêteté sur les nombres de versets ----------- */
.card__caveat {
  margin: 8px 16px 0; padding: 8px 10px;
  border-left: 3px solid #d9b574;
  background: rgba(217,181,116,.12);
  border-radius: 0 8px 8px 0;
  font-size: 11.5px; line-height: 1.45; color: #6d5a2e;
}
.proof__caveat {
  margin: 0 0 12px; padding: 9px 11px;
  border-left: 3px solid #d9b574;
  background: rgba(217,181,116,.1);
  border-radius: 0 8px 8px 0;
  font-size: 11.5px; line-height: 1.5; color: #6d5a2e;
}

/* =========================================================================
   MODE QA — validation religieuse, strictement hors du jeu
   ========================================================================= */
.is-qa .home__hero, .is-qa .home__bg { display: none; }
.is-qa .screen--home { justify-content: flex-start; }
.is-qa .home__panel { text-align: left; max-width: 760px; margin: 0 auto; width: 100%; }

.qa__kicker {
  margin: 16px 0 2px; font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: #e0938c; font-weight: 800;
}
.qa__title { margin: 0 0 4px; font-size: 27px; font-weight: 800; }
.qa__sub { margin: 0 0 14px; color: rgba(255,255,255,.6); font-size: 13px; }
.qa__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.qa__actions .btn { flex: 1; min-width: 150px; font-size: 14px; }

.qa { padding: 0 16px 40px; display: grid; gap: 12px; max-width: 760px; margin: 0 auto; width: 100%; }
.qa__c {
  border-radius: var(--r-md);
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.09);
  border-left: 4px solid rgba(255,255,255,.25);
  padding: 14px;
}
.qa__c--validated { border-left-color: #3fae7a; }
.qa__c--review_required { border-left-color: #d9a441; }
.qa__c--draft { border-left-color: #b23b2e; }
.qa__c--validee { border-left-color: #3fae7a; background: rgba(63,174,122,.08); }
.qa__c--rejetee { border-left-color: #b23b2e; background: rgba(178,59,46,.08); }
.qa__c--a_corriger { border-left-color: #d9a441; background: rgba(217,164,65,.08); }

.qa__chead { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.qa__chead code { font-size: 12px; color: var(--gold); font-weight: 700; }
.qa__st {
  font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 99px;
  background: rgba(255,255,255,.1); color: rgba(255,255,255,.8);
}
.qa__ty { font-size: 10.5px; color: rgba(255,255,255,.4); margin-left: auto; }

.qa__r { display: grid; grid-template-columns: 132px 1fr; gap: 10px; padding: 5px 0; }
.qa__r b { font-size: 11.5px; color: rgba(255,255,255,.45); font-weight: 700; }
.qa__r span { font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.88); white-space: pre-wrap; word-break: break-word; }

.qa__done { margin: 10px 0 0; font-size: 12px; color: var(--gold-soft); }
.qa__btns { display: flex; gap: 7px; margin-top: 12px; flex-wrap: wrap; }
.qa__b { flex: 1; min-width: 96px; min-height: 44px; font-size: 13.5px; padding: 10px 12px; border-radius: 12px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); }
.qa__b.is-on { background: rgba(217,181,116,.28); border-color: var(--gold); color: var(--gold-soft); }

@media (max-width: 479px) {
  .qa__r { grid-template-columns: 1fr; gap: 2px; }
  .qa__r b { margin-top: 6px; }
}

/* =========================================================================
   HÉBERGEMENT DANS LE SITE
   ========================================================================= */

/* Corps de page : la page hôte (Le Sens du Coran) applique son propre style
   global. On isole SENS pour qu'aucune règle du site ne déforme la carte. */
.sens-body {
  margin: 0;
  background: #05080f;
  overscroll-behavior-y: none;
}
.sens-body #sens-root { display: contents; }

.sens-skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  padding: 10px 16px; border-radius: 0 0 10px 0;
  background: #d9b574; color: #2a1f08; font-weight: 700; font-size: 14px;
}
.sens-skip:focus { left: 0; }

/* ==================================================================
   SENS v2 — niveaux, illustration, réponse pédagogique, mobile
   ================================================================== */

/* ---------------------------------------------------- NIVEAUX (accueil) */
.levels { display: grid; gap: 8px; }
.levels__lbl, .modes__lbl {
  margin: 14px 0 2px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(240, 217, 168, .72);
}
.modes__lbl { margin-top: 16px; }

.level {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: 'name dots' 'hint dots';
  align-items: center;
  gap: 0 10px;
  min-height: var(--tap);
  padding: .7rem 1rem;
  border: 2px solid rgba(240, 217, 168, .26);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .06);
  color: var(--ivory);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .18s var(--ease), background .18s var(--ease), transform .12s var(--ease);
}
.level:active { transform: scale(.985); }
.level[aria-pressed="true"] { border-color: var(--gold); background: rgba(217, 181, 116, .18); }
.level__name {
  grid-area: name;
  display: block;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: .02em;
}
.level__hint {
  grid-area: hint;
  display: block;
  font-size: .82rem;
  line-height: 1.3;
  color: rgba(247, 242, 230, .72);
}
.level__dots { grid-area: dots; display: flex; gap: 4px; }
.level__dots i {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(240, 217, 168, .24);
}
.level--1 .level__dots i:nth-child(-n+1),
.level--2 .level__dots i:nth-child(-n+2),
.level--3 .level__dots i:nth-child(-n+3) { background: var(--gold); }

/* --------------------------------------------------- NIVEAU (rappel) */
.levelpill {
  display: flex;
  align-items: center;
  gap: 8px;
  align-self: center;
  min-height: 40px;
  margin: 2px 0 6px;
  padding: .35rem .9rem;
  border: 1.5px solid rgba(240, 217, 168, .34);
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  color: var(--ivory);
  font: inherit;
  font-size: .84rem;
  cursor: pointer;
}
.levelpill__lbl { opacity: .7; }
.levelpill__name { font-weight: 800; }
.levelpill__edit { margin-left: 4px; color: var(--gold); font-weight: 700; }

/* ------------------------------------------------- ILLUSTRATION (SVG) */
.card__art {
  flex: 0 0 auto;
  height: 112px;
  margin: 0;
  overflow: hidden;
  border-bottom: 1px solid rgba(217, 181, 116, .3);
  background: linear-gradient(180deg, #16213c, #0d1424);
}
.card__art svg { display: block; width: 100%; height: 100%; }

/* ------------------------------------------ RÉPONSE : garder et source */
.proof__take, .proof__src {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: rgba(217, 181, 116, .12);
  border-left: 3px solid var(--gold);
}
.proof__src { background: rgba(255, 255, 255, .5); border-left-color: var(--gold-dim); }
.proof__kicker {
  margin: 0 0 3px;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8a6412;
}
.proof__keep, .proof__srctext {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--ink);
}
.proof__srctext { color: var(--ink-soft); font-size: 13.5px; }

/* ---------------------------------------------------- HUD Enrichi */
.hud__chip--level { background: rgba(217, 181, 116, .2); border-color: rgba(217, 181, 116, .5); font-weight: 800; }
.hud__chip--review { background: rgba(178, 59, 46, .14); border-color: rgba(178, 59, 46, .4); }
.hud__chip--streak { background: rgba(47, 143, 91, .16); border-color: rgba(47, 143, 91, .45); font-weight: 800; }

/* ------------------------------------------ MOBILE : plus de vide mort */
.screen--play { justify-content: flex-start; }

.card {
  /* La carte absorbe la hauteur disponible. Avant, la page centrait un bloc
     court et laissait un grand vide au-dessus : l'écran paraissait inachevé.
     Le vide doit être DANS la carte, réparti entre la question et les réponses,
     pas entre deux zones de l'écran. */
  flex: 1 1 auto;
  min-height: 0;
}
/* La face avant repasse en flux (le dos reste en absolu et ne doit pas peser
   dans la hauteur). Elle DOIT alors s'étirer elle aussi, ce qui suppose que
   .card__inner soit un conteneur flex : sinon `flex: 1 1 auto` sur la face
   est ignoré et le vide revient DANS la carte (359 px mesurés avant correctif). */
.card__inner { display: flex; }
.card__face { position: relative; inset: auto; flex: 1 1 auto; min-height: 0; }
.card__face--back { position: absolute; inset: 0; }
.card__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  min-height: 0;
}
/* Les réponses ne prennent que la place dont elles ont besoin : tout le reste
   revient à la question, qui est le héros de l'écran. */
.card__zone { flex: 0 0 auto; margin-top: auto; }
.card__head { flex: 0 0 auto; }
.card__art { flex: 0 0 auto; }

@media (max-height: 680px) {
  .card__art { height: 76px; }
  .screen--play { justify-content: flex-start; }
}

/* ------------------------------------------- ANIMATIONS de validation */
@keyframes sens-pop-ok {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.035); }
  100% { transform: scale(1); }
}
@keyframes sens-shake-ko {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(2px); }
}
.opt.is-ok { animation: sens-pop-ok .38s var(--ease); border-color: var(--ok) !important; background: var(--ok-soft) !important; }
.opt.is-ko { animation: sens-shake-ko .34s ease-out; border-color: var(--no) !important; background: var(--no-soft) !important; }

@media (prefers-reduced-motion: reduce) {
  .opt.is-ok, .opt.is-ko { animation: none; }
  .card, .level, .opt { transition: none; }
}

/* ------------------------------------------------ MÉCANIQUE ASSOCIATION */
.match { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.match__col { display: grid; gap: 8px; align-content: start; }
.match__lbl { font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); text-align: center; }
.match__item {
  min-height: var(--tap);
  padding: .55rem .7rem;
  border: 2px solid rgba(26, 20, 8, .14);
  border-radius: var(--r-sm);
  background: #fffdf6;
  color: var(--ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .16s var(--ease), background .16s var(--ease), transform .12s var(--ease);
}
.match__item:active { transform: scale(.97); }
.match__item.is-sel { border-color: var(--gold); background: #fdf6e2; box-shadow: 0 0 0 3px rgba(217, 181, 116, .28); }
.match__item.is-done { border-color: var(--ok); background: var(--ok-soft); opacity: .78; pointer-events: none; }
.match__item.is-bad { border-color: var(--no); background: var(--no-soft); animation: sens-shake-ko .3s ease-out; }

/* ---------------------------------------- PROGRESSION (écran connaissances) */
.know__sum {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 4px 0 18px;
}
.know__stat {
  padding: 10px 6px;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .07);
  text-align: center;
  color: var(--ivory);
}
.know__stat b { display: block; font-size: 1.3rem; font-weight: 800; color: var(--gold-soft); }
.know__stat span { font-size: .68rem; line-height: 1.2; opacity: .78; }
.know__stat--due b { color: #ffb4a8; }
.know__h3 {
  margin: 18px 0 8px;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(240, 217, 168, .75);
}
.know__lvl {
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1.5px solid rgba(240, 217, 168, .2);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .04);
  color: var(--ivory);
}
.know__lvl.is-current { border-color: var(--gold); background: rgba(217, 181, 116, .14); }

/* --- Crédits des images ---------------------------------------------- */
.credits {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  padding: 16px;
  background: rgba(6, 10, 16, 0.72);
}
.credits[hidden] { display: none; }
.credits__panel {
  width: min(680px, 100%);
  max-height: min(78vh, 720px);
  overflow: auto;
  background: #131b25;
  border: 1px solid rgba(217, 181, 116, 0.28);
  border-radius: 16px;
  padding: 20px 22px 24px;
  color: #e8edf3;
}
.credits__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 10px;
}
.credits__head h2 { margin: 0; font-size: 1.05rem; }
.credits__close {
  appearance: none; border: 1px solid rgba(255,255,255,.22);
  background: transparent; color: inherit; font: inherit;
  padding: 6px 12px; border-radius: 9px; cursor: pointer;
}
.credits__close:hover { border-color: #d9b574; color: #d9b574; }
.credits__note { font-size: 0.82rem; color: #aab6c4; line-height: 1.5; margin: 0 0 12px; }
.credits__list { margin: 0; padding: 0; list-style: none; }
.credits__list li { padding: 7px 0; border-top: 1px solid rgba(255,255,255,.08); font-size: 0.86rem; line-height: 1.45; }
.credits__list a { color: #d9b574; }
.credits__meta { color: #9aa7b5; }

/* Illustration de preuve : elle vit au verso, entre l'explication et le
   « à retenir ». Elle n'est pas décorative — c'est le verset relu. */
.card__art--proof {
  height: auto;
  margin: 0 0 12px;
  border-radius: 12px;
  border: 1px solid rgba(217,181,116,.28);
  border-bottom: 1px solid rgba(217,181,116,.28);
  padding: 2px;
}
.card__art--proof svg { height: auto; }

/* Bandeau haut : sur un écran étroit, la pastille de score passe en premier
   priorité et le reste rétrécit plutôt que de se retourner à la ligne. */
@media (max-width: 400px) {
  .hud { gap: 4px; padding: 6px 8px 4px; }
  .hud__chip { font-size: 11px; padding: 4px 8px; }
  .hud__link { font-size: 12px; }
}

/* Panneau de l'énoncé, redéfini en priorité haute.
   Cette règle est en fin de fichier et emploie des ID : elle ne peut pas être
   écrasée par une règle de classe déclarée avant, quelle qu'en soit la
   spécificité. Elle existe parce que la cascade masquait le panneau : la règle
   en classe était bien présente et l'élément bien ciblé, mais un fond opaque
   plus fort gardait la priorité. */
#card.is-ambiance #card-question {
  background: rgba(255, 253, 248, .90) !important;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  border-radius: 18px;
  padding: 16px 18px;
  /* Le panneau english son texte au lieu de s'étirer : sans cela il occupait
     toute la zone et l'on ne voyait plus la photographie. */
  flex: 0 1 auto;
  margin: auto 2px;
  box-shadow: 0 1px 0 rgba(255,255,255,.75) inset, 0 6px 18px rgba(20,14,4,.12);
}

/* Accueil compact: quatre étapes natives, aucun asset téléchargé. */
.screen--home {justify-content:flex-start;overflow:visible}
.home__hero {height:100px;min-height:0;position:absolute;inset:0 0 auto;opacity:.5;pointer-events:none}
.home__panel {position:relative;max-width:920px;width:100%;margin:0 auto;padding:24px 20px 36px}
.home__beta {position:absolute;right:20px;top:22px}
.home__kicker {margin:0 0 5px;font-size:11px;letter-spacing:.18em}
.home__title {font-size:clamp(42px,9vw,64px);line-height:1;margin:6px 0}
.home__sub {font-size:14px;margin:6px 0;color:var(--gold)}
.home__promise {font-size:17px;line-height:1.5;margin:14px 0 18px;color:#f5eedf}
.welcome {border:1px solid #695636;border-radius:20px;background:linear-gradient(145deg,#172034e6,#0b111eee);text-align:left;overflow:hidden}
.welcome summary,.recovery summary {min-height:48px;padding:14px 18px;font-size:14px;color:var(--gold-soft);cursor:pointer}
.welcome summary span {float:right}
.welcome__steps {list-style:none;padding:0 18px 16px;margin:0;display:grid;gap:16px}
.welcome__steps li {display:flex;gap:14px;align-items:center;animation:welcome-in .4s ease both}
.welcome__steps li:nth-child(2){animation-delay:.05s}.welcome__steps li:nth-child(3){animation-delay:.1s}.welcome__steps li:nth-child(4){animation-delay:.15s}
.welcome__steps svg {width:55px;min-width:55px;height:50px;fill:#d9b57412;stroke:var(--gold);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.welcome__steps .glint {stroke:var(--gold-soft);stroke-width:2.5}
.welcome__steps span {color:#d9b574;font-size:10px;letter-spacing:.07em;text-transform:uppercase}
.welcome__steps h2 {font-size:15px;line-height:1.35;margin:4px 0;color:#fff7e8;font-weight:650}
.welcome__steps p {font-size:12px;line-height:1.45;margin:0;color:#bfcbdb}
.home__start {width:100%;margin:16px 0 0;justify-content:space-between;display:flex;font-size:16px}
.home__resume {font-size:12px;color:#cfb787;margin:10px 0 0}
.levels {margin-top:20px}.levels__lbl {color:#d9b574}
.home__links {margin:20px 0 12px}
.recovery {text-align:left;border-top:1px solid #d9b57440;margin-top:16px}
.recovery form {display:grid;gap:10px;padding:4px 12px 16px}
.recovery label,.sync-panel label,.journey label {font-size:14px;color:#efe4ce}
.recovery p,.sync-panel p,.storage-note {font-size:12px;line-height:1.6;color:#bfc9d9}
.recovery input,.sync-panel input,.journey select,.progression-picker select {width:100%;min-height:48px;border:1px solid #8b754e;border-radius:10px;background:#101a2c;color:#fff;padding:12px;font:inherit;font-size:14px}
.sync-panel {text-align:left;border:1px solid #88704b;border-radius:16px;margin-top:16px;padding:16px}
.sync-panel button {margin-top:12px}
.storage-note {margin:20px auto 10px;text-align:left;max-width:640px}
.end__sub {font-size:clamp(24px,6vw,38px);font-weight:700;color:#f3dbac}
.end__points {font-size:20px;margin:0 0 10px;text-align:center;color:#fff}
.end__total {font-size:13px;margin:0 20px 20px;text-align:center;color:#bbc7d9}
.progression-picker {padding:16px 20px;max-width:680px;width:100%;margin:0 auto;display:grid;gap:8px}
.journey {padding:0 20px 32px;max-width:680px;width:100%;margin:0 auto;line-height:1.6;color:#c5cfdf}
.journey h3 {color:var(--gold-soft);font-size:18px;margin:24px 0 12px}
.journey ul {padding-left:20px}.journey li {margin:10px 0;font-size:14px}
.journey a {color:#f0d9a8;text-decoration:underline;text-underline-offset:3px}
.journey .btn {width:100%;margin:8px 0}
.journey .memo-fields {display:grid;gap:10px}
@keyframes welcome-in {from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@media(min-width:700px){
 .home__panel {padding:36px 32px;max-width:880px}
 .welcome__steps {grid-template-columns:1fr 1fr;gap:24px;padding:8px 24px 24px}
 .welcome__steps svg {width:66px;min-width:66px;height:60px}
 .welcome__steps h2 {font-size:17px}.welcome__steps p {font-size:13px}
 .home__start {max-width:400px;margin:20px auto 0}
 .levels {margin-top:28px}.home__promise br {display:none}
}
@media(prefers-reduced-motion:reduce){.welcome__steps li{animation:none}}
.screen--home {max-width:none}
.welcome__steps {gap:12px}
.welcome__steps svg {height:44px}
.home__promise {margin:10px 0 14px;font-size:16px}
.level {min-height:58px}
.know details {border-top:1px solid #d9b57435;margin:14px 0}
.know summary {cursor:pointer;min-height:48px;padding:12px 0;color:var(--gold-soft)}
.know summary h3 {display:inline;font-size:15px;margin:0}
.welcome__steps {gap:10px;padding-bottom:14px}
.welcome__steps h2 {margin:2px 0}
.home__panel {overflow:visible}
.play-save-status {font-size:11px;line-height:1.4;color:#c7d3e3;padding:0 16px;margin:0;text-align:center}
.play-save-status:empty {display:none}
@media(max-width:699px){
 .home__panel {padding-top:18px}
 .welcome__steps {gap:8px}
 .home__promise {margin:8px 0 12px}
 .home__start {margin-top:12px}
 .levels__lbl {margin-top:4px}
 .level {padding:.6rem 1rem}
}

.end__privacy {max-width:480px;margin:12px auto;color:#c5cfdf;font-size:13px;line-height:1.6;text-align:left;padding:0 16px}

/* Mobile SENS: one selection flow, an illustrated ivory welcome, and a
   persistent route back to the site. Existing game cards keep their layout. */
:root { --night-0:#082f36; --night-1:#0d3b44; --night-2:#164951; --gold:#d4b277; }
html, body, .sens-body {background:var(--night-0)}
.sens-nav {position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;gap:4px;min-height:56px;padding:4px max(12px, env(safe-area-inset-left));background:var(--ivory);border-bottom:1px solid #d7d2c4;color:#16434b}
.sens-nav__site,.sens-nav__previous {display:inline-flex;align-items:center;min-height:48px;padding:10px 8px;border-radius:10px;color:inherit;text-decoration:none;font-size:14px;font-weight:650;line-height:1.25}
.sens-nav__previous {font-size:12px}
.sens-nav__site:hover,.sens-nav__previous:hover {background:#e9e4d8}
.screen {min-height:calc(100dvh - 56px)}
.screen--home {color:#163b42;background:var(--ivory)}
.screen--home .home__bg {background:radial-gradient(ellipse at 50% 0,#fffaf0,transparent 65%),var(--ivory)}
.home__bg::after,.home__hero {display:none}
.home__panel {max-width:650px;padding:18px 16px 24px;overflow:visible}
.home__beta {top:18px;right:16px;color:#6d5430;background:#eadfc9;border-color:#d1bd92;font-size:9px;letter-spacing:.1em}
.home__kicker {display:none}
.home__title {font-family:Georgia,'Times New Roman',serif;font-size:48px;font-weight:400;letter-spacing:.12em;color:#153f47;background:none;animation:none;margin:4px 0}
.home__sub {color:#6a562e;font-size:15px;margin:5px 0 0;letter-spacing:.02em}
.home__promise {font-size:12px;line-height:1.5;color:#657174;margin:8px 0 17px}
.levels {grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0}
.levels__lbl,.modes__lbl {grid-column:1/-1;margin:0 0 6px;text-align:left;font-size:11px;font-weight:650;letter-spacing:.04em;color:#647477;text-transform:none}
.level {position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;gap:0;min-height:156px;padding:0 9px 11px;overflow:hidden;border:2px solid transparent;border-radius:15px;background:#16434b;color:#fff;text-align:left;box-shadow:0 3px 9px #123a4214;isolation:isolate}
.level::before {content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,transparent 15%,#09363d40 46%,#062c34ef 100%)}
.level__image {position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.level[aria-pressed="true"] {border-color:#a77931;background:#16434b;box-shadow:0 0 0 2px #cfb37c40}
.level[aria-pressed="true"]::after {content:"✓";position:absolute;right:7px;top:7px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#f8edd4;color:#23484a;font-size:13px;font-weight:800}
.level__name {font-size:13px;line-height:1.3;font-weight:750;letter-spacing:0}
.level__hint {font-size:10px;line-height:1.35;color:#f6eddb;margin-top:4px}
.level__dots {display:none}
.modes__lbl {margin:18px 0 8px}
.modes {grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.mode,.mode--feature {grid-template-columns:28px minmax(0,1fr);grid-template-areas:"icon label" "icon hint";column-gap:8px;min-height:74px;padding:11px 12px;border:1px solid #d6d4c9;border-radius:13px;background:#fffdf8;color:#20434b;animation:none;box-shadow:none}
.mode__icon {width:28px;height:32px;background:transparent;border-radius:0;color:#927044;font-size:21px}
.mode__label {font-size:14px;font-weight:700}
.mode--feature .mode__label {color:#20434b}
.mode__hint {font-size:11px;color:#667477;line-height:1.4}
.mode[aria-pressed="true"] {border-color:#325c60;background:#e7eee9;box-shadow:inset 0 0 0 1px #325c60}
.mode:active {background:#e2e8df}
.home__start {max-width:none;display:flex;justify-content:center;gap:20px;min-height:52px;margin:18px 0 0;border-radius:13px;background:#164650;color:#fffaf0;font-size:16px;font-weight:700;box-shadow:0 5px 14px #0c39451c}
.home__start:active {background:#0d353e}
.home__resume {font-size:12px;color:#596b6e;margin:8px 0 0}
.welcome {margin-top:14px;border:0;border-radius:0;background:none}
.welcome summary,.recovery summary,.storage-details summary,.image-credits summary {min-height:48px;padding:14px 4px;font-size:12px;color:#34545a;text-align:left;cursor:pointer}
.welcome__steps {padding:2px 4px 16px;gap:12px}
.welcome__steps li {animation:none}
.welcome__steps svg {width:40px;min-width:40px;height:40px;stroke:#916d34;fill:#d9b57412}
.welcome__steps span {color:#917041;font-size:9px}
.welcome__steps h2 {font-size:13px;color:#23474e}
.welcome__steps p {font-size:12px;color:#607376}
.home__links {display:flex;justify-content:center;gap:16px;margin:0}
.screen--home .linkbtn {min-height:48px;color:#34545a;font-size:13px}
.recovery,.storage-details,.image-credits {text-align:left;border-top:1px solid #dad8cc;margin:0}
.recovery label,.sync-panel label {color:#34545a}
.recovery p,.sync-panel p,.storage-note,.image-credits p {font-size:12px;line-height:1.5;color:#607376}
.recovery input,.sync-panel input {background:#fffdf8;color:#163b42;border-color:#b6b5a5}
.screen--home .btn--ghost {color:#34545a;border-color:#acb7b1;background:#fffdf8}
.sync-panel {border-color:#b9c0b0;background:#fffdf8}
.storage-note {margin:0 4px 16px}
.image-credits p {margin:0 4px 12px}
.image-credits a {color:#34545a;text-underline-offset:3px}
.home__foot {margin:10px 0 0;font-size:10px;color:#78817a;line-height:1.5}
@media(max-width:350px) {
 .home__panel {padding-inline:12px}
 .sens-nav {padding-inline:6px}
 .sens-nav__site {font-size:13px}
 .sens-nav__previous {font-size:11px;padding-inline:5px}
 .level {padding-inline:6px;min-height:147px}
 .level__name {font-size:12px}
 .level__hint {font-size:9px}
 .mode {padding:10px 8px;column-gap:5px}
}
@media(min-width:700px) {
 .home__panel {padding:32px 24px 40px}
 .home__title {font-size:60px}
 .home__promise {margin-bottom:22px}
 .level {min-height:210px;padding:0 14px 17px}
 .level__name {font-size:17px}
 .level__hint {font-size:12px}
 .mode {min-height:84px}
 .home__start {margin-top:22px}
 .sens-nav {padding-inline:max(16px,calc((100vw - 900px)/2))}
}

/* Card edition, October 2026: content sets the height; no tiny type or nested scroll. */
.screen--play {gap:0; justify-content:flex-start;}
.card {flex:0 0 auto; margin:0 12px;}
.card__inner {display:grid; grid-template-areas:'face'; width:100%;}
.card__face {grid-area:face; position:relative; inset:auto; min-height:0; width:100%;}
.card__face--back {position:relative; justify-content:flex-start;}
.card__face--back .card__head {position:relative; inset:auto;}
.card__face--back .card__body {padding-top:12px; padding-bottom:14px;}
.card__face--front .card__body {flex:0 0 auto; display:block; overflow:visible; padding:12px 16px;}
.card__face--back .card__body {flex:0 0 auto; display:block; overflow:visible;}
.card__art {height:clamp(116px,34vw,146px); background:#d9c9aa; border-bottom:1px solid #c8ae77;}
.card__art img {display:block; width:100%; height:100%; object-fit:cover;}
.card__question {font-size:32px; line-height:1.25; text-wrap:pretty;}
.card__head {padding:10px 16px 0;}
.card__zone {flex:0 0 auto; margin-top:0; padding:0 16px 16px;}
.opts {gap:8px;}
.opt {min-height:48px; font-size:16px; line-height:1.35; padding-top:11px; padding-bottom:11px;}
.proof__explain {font-size:17px; line-height:1.5; margin:0 0 14px;}
.proof__answer {font-size:18px; line-height:1.4;}
.proof__srctext {font-size:15px; overflow-wrap:anywhere;}
.proof__srctext a {color:#765117; text-underline-offset:3px;}
.proof__citation {margin-top:8px;}
.proof__citation summary {padding:12px 0; min-height:44px; cursor:pointer; font-size:15px;}
.proof__citation p {font-size:16px; line-height:1.65; margin:10px 0;}
.proof__citation [lang='ar'] {font-size:23px; line-height:1.9;}
.proof__citation .proof__edition {font-size:13px; color:var(--ink-soft);}
#card:not(.is-flipped) .card__face--back {visibility:hidden; pointer-events:none;}
#card.is-flipped .card__face--front {visibility:hidden; pointer-events:none;}
.actions .btn {min-height:48px;}
.btn--next {animation:none;}
@media(min-width:900px){.card__face{min-height:0;}}
@media(prefers-reduced-motion:reduce){.card__inner,.opt{transition:none;animation:none;}}
/* Each side keeps its natural height: the answer never inherits blank image space. */
.card__inner,.card.is-flipped .card__inner {transform:none;transition:none;}
.card__face--back {transform:none;}
#card:not(.is-flipped) .card__face--back,#card.is-flipped .card__face--front {display:none;}
.card__face {animation:card-reveal .18s ease-out;}
@keyframes card-reveal {from{opacity:.6;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}
.btn--hint {color:#d5e5e4;border:1px solid #8faeac;background:transparent;}
@media(prefers-reduced-motion:reduce){.card__face{animation:none;}}
.level:disabled{opacity:.48;cursor:default;filter:saturate(.35)}
.card__context{margin:12px 16px 0;padding:12px 14px;border-left:3px solid #a88141;border-radius:0 8px 8px 0;background:#eee6d5;color:#344d4c;font-size:17px;line-height:1.45}
.card__context p,.card__context blockquote{margin:0}
.card__context blockquote{margin-top:6px;font-family:Georgia,serif;color:#153f43;font-size:19px}
.card__context .card__context-label{margin-bottom:6px;font-size:12px;font-weight:700;letter-spacing:.02em;color:#6e5328}
.rating{width:min(100%,420px);margin:24px auto 0;padding:20px 12px;border:1px solid #8da8a04d;border-radius:18px;background:#ffffff08;text-align:center}
.rating fieldset{border:0;padding:0;margin:0}
.rating legend{font-size:20px;font-weight:700;margin:auto}
.rating__hint{font-size:14px;line-height:1.5;color:#d1ded9;margin:8px 0 12px}
.rating__stars{display:flex;justify-content:center;gap:6px;margin-bottom:14px}
.rating__stars label{position:relative;display:grid;place-items:center;min-width:48px;min-height:48px;border-radius:10px;border:1px solid #aac1b16e;cursor:pointer;color:#adc1b6;background:#ffffff05}
.rating__stars input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;margin:0}
.rating__stars span{font-size:32px;line-height:1;pointer-events:none}
.rating__stars .is-lit{color:#f0cc7e;border-color:#c5a45c;background:#bc903c1a}
.rating__stars label:focus-within{outline:3px solid #f0cc7e;outline-offset:3px}
.rating fieldset:disabled label{cursor:default}
.rating .btn{min-height:48px;width:auto;padding-inline:20px}
#rating-status{font-size:15px;line-height:1.5;color:#e1eadf;margin:12px 0 0}

/* Personal setup follows the existing dark/gold game, with native accessible controls. */
.screen--players .player {display:grid;grid-template-columns:42px minmax(0,1fr) 44px;gap:6px 10px;align-items:center}
.player__details {grid-column:1 / -1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.player__details label {min-width:0;font-size:14px;line-height:1.5;color:#cbd2de}
.player__details select {display:block;width:100%;min-width:0;min-height:48px;margin-top:4px;padding:10px 8px;border:1px solid #59616c;border-radius:8px;background:#19232f;color:#fff;font:inherit;font-size:16px}
.player__details option {background:#19232f;color:#fff}
.player__adaptation {grid-column:1 / -1;font-size:13px;line-height:1.5;color:#d8be84;margin:0}
.player__name {min-width:0;scroll-margin:20px}
.screen--players .players {padding-top:10px}
.screen--players .players__actions {position:sticky;bottom:0;z-index:5;background:linear-gradient(0deg,#111b28 88%,transparent);padding-bottom:calc(12px + var(--safe-b));padding-top:20px;margin-top:0}
.screen--players.is-active {height:calc(var(--sens-visible-height,100dvh) - var(--sens-nav-size,56px));min-height:0;overflow-y:auto;scroll-padding-block:16px 190px;overscroll-behavior:contain}
.players__hint {line-height:1.55}
.adaptive-note {margin:2px 12px 7px;color:#e5ce98;font-size:11px;line-height:1.5;text-align:center}
.end__encouragement {font-size:14px;line-height:1.6;color:#d8e0eb;text-align:center;padding:0 16px}
.balance-details {margin:10px 16px;padding:12px;border:1px solid #53606d;border-radius:12px;font-size:12px;line-height:1.6;color:#cbd2de}
.balance-details summary {min-height:32px;cursor:pointer;color:#e5ce98}
.podium__s small {display:block;font-size:11px;white-space:nowrap;color:#d8be84}
@media(max-width:350px){.player__details {grid-template-columns:minmax(0,1fr)}.screen--players .player {gap:6px}.screen--players .player__name {font-size:16px}}
@media(prefers-reduced-motion:reduce){.player,.turn,.turn.is-out,.sticker {animation:none!important}}

.play-scoreboard {position:sticky;top:var(--sens-nav-size,56px);z-index:40;flex:none;background:var(--night-0);padding-top:2px}