/* ==========================================================================
   GettHappier : thème vert et blanc
   Boutons "chunky" en relief, bords épais, couleurs franches.
   ========================================================================== */

:root {
  color-scheme: light;

  --bg: #ffffff;
  --soft: #f4faee;
  --border: #e1e8da;
  --page: #e6f4d8; /* le fond autour de l'appli sur un grand écran */
  --glass: rgba(255, 255, 255, 0.92); /* panneaux posés sur le décor du jeu */
  --gold-soft: #fff8d6;
  --gold-text: #7a5b00;
  --text: #25361f;
  --muted: #5f705a;

  --green: #58cc02;
  --green-dark: #46a302;
  --green-text: #2c7a00;
  --green-soft: #e8f8d6;
  --on-green: #10300a;
  --header-top: #2f8a00;
  --header-bottom: #49a806;

  --gold: #ffc800;
  --gold-dark: #e5a900;
  --orange-soft: #fff0d5;
  --orange-text: #b45f00;
  --red: #ff4b4b;
  --red-text: #c4161c;
  --red-soft: #ffe5e5;
  --blue: #1cb0f6;
  --blue-soft: #ddf4ff;
  --purple-text: #7b3fc4;

  --font: ui-rounded, "SF Pro Rounded", "Nunito", "Segoe UI Variable Display", "Segoe UI",
    system-ui, -apple-system, sans-serif;
  --radius: 16px;

  /* Décor par défaut ; remplacé par [data-scene] */
  --sky-top: #8fd3ff;
  --sky-bottom: #e6f7ff;
  --ground: #a6e063;
  --ground-dark: #8fd14f;
}

[data-scene="meadow"] { --sky-top: #8fd3ff; --sky-bottom: #e6f7ff; --ground: #a6e063; --ground-dark: #8fd14f; }
[data-scene="sky"]    { --sky-top: #4f9cf0; --sky-bottom: #cfe8ff; --ground: #f4f9ff; --ground-dark: #dbeaff; }
[data-scene="sunset"] { --sky-top: #ff8f7a; --sky-bottom: #ffe2b8; --ground: #9ccc65; --ground-dark: #7fb247; }
[data-scene="night"]  { --sky-top: #1b2766; --sky-bottom: #5b6fb8; --ground: #2f7d32; --ground-dark: #25652a; }
[data-scene="space"]  { --sky-top: #0b0630; --sky-bottom: #4a2a8f; --ground: #2a1b5e; --ground-dark: #1e1348; }
[data-scene="moon"]   { --sky-top: #05060f; --sky-bottom: #20263f; --ground: #a3a9b4; --ground-dark: #838996; }
[data-scene="aurora"] { --sky-top: #04141f; --sky-bottom: #12806b; --ground: #eaf5ff; --ground-dark: #c9e1f3; }
[data-scene="forest"] { --sky-top: #6fcf9f; --sky-bottom: #d8f5e4; --ground: #3f9d4d; --ground-dark: #338240; }

* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  touch-action: pan-y; /* défilement vertical seulement : ni zoom au double toucher, ni glissement sur le côté */
  background: var(--bg);
}

body {
  overflow: hidden;
  touch-action: pan-y;
  overscroll-behavior: none;
  background: var(--page);
  color: var(--text);
  font: 600 16px/1.45 var(--font);
}
body.no-scroll { overflow: hidden; }

h1, h2, h3, p { margin: 0; }
h1 { font-size: 1.5rem; font-weight: 800; }
h2 { font-size: 1.15rem; font-weight: 800; }
h3 { font-size: 1rem; font-weight: 800; }

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

/* --------------------------------------------------------------------------
   Coque de l'app : en-tête, écran qui défile, barre du bas
   -------------------------------------------------------------------------- */
#app {
  /* Collé aux quatre bords de l'écran (y compris sous la barre du bas de l'iPhone) : pas de bande blanche. */
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  overflow: hidden;
  background: var(--bg);
  box-shadow: 0 0 0 1px var(--border);
}

#view { position: relative; flex: 1; min-height: 0; overflow: hidden; }

.view {
  position: absolute;
  inset: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 16px 56px;
}

/* Écrans sans coque (accueil, connexion) */
.screen { height: 100%; overflow-x: hidden; overflow-y: auto; padding: env(safe-area-inset-top, 0px) 16px 24px; }

/* --------------------------------------------------------------------------
   Boutons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 50px;
  padding: 12px 20px;
  border: 0;
  border-radius: var(--radius);
  background: var(--green);
  color: var(--on-green);
  font: 800 0.95rem/1.2 var(--font);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--green-dark);
  transition: transform 0.06s, box-shadow 0.06s;
}
.btn:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 0 0 var(--green-dark); }
.btn:disabled { opacity: 0.6; cursor: progress; }
.btn.block { display: flex; width: 100%; }
.btn.mt { margin-top: 16px; }

.btn.outline, .btn.danger {
  background: var(--bg);
  color: var(--text);
  border: 2px solid var(--border);
  box-shadow: 0 4px 0 var(--border);
}
.btn.outline:active:not(:disabled), .btn.danger:active:not(:disabled) { box-shadow: 0 0 0 var(--border); }
.btn.danger { color: var(--red-text); }

.btn.ghost {
  background: none;
  color: var(--green-text);
  box-shadow: none;
  min-height: 0;
  padding: 8px 10px;
}
.btn.ghost:active:not(:disabled) { transform: none; opacity: 0.7; }

.btn.small {
  min-height: 40px;
  padding: 8px 14px;
  font-size: 0.8rem;
  box-shadow: 0 3px 0 var(--green-dark);
}
.btn.small.outline { box-shadow: 0 3px 0 var(--border); }
.btn.small:active:not(:disabled) { transform: translateY(3px); }

/* --------------------------------------------------------------------------
   Formulaires
   -------------------------------------------------------------------------- */
.field { display: block; margin-top: 14px; }
.field > span {
  display: block;
  margin-bottom: 6px;
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.field input, .text-input {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 2px solid var(--border);
  border-radius: 14px;
  background: var(--soft);
  color: var(--text);
  font: 600 1rem var(--font);
}
.field input[type="date"] { display: block; min-width: 0; max-width: 100%; -webkit-appearance: none; appearance: none; }
.field input:focus, .text-input:focus { outline: none; border-color: var(--green); background: var(--bg); }
.field input::placeholder, .text-input::placeholder { color: var(--muted); opacity: 0.8; }
.input-wrap { position: relative; }
.input-wrap input { padding-right: 56px; }
.reveal {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hint { margin-top: 6px; font-size: 0.85rem; font-weight: 600; color: var(--muted); }
.alert {
  margin-top: 16px;
  padding: 12px 14px;
  border: 2px solid var(--red);
  border-radius: 14px;
  background: var(--red-soft);
  color: var(--red-text);
  font-weight: 700;
}
.inline-form { display: flex; gap: 8px; margin-top: 12px; }

.icon-svg { display: inline-flex; width: 22px; height: 22px; flex: none; }
.icon-svg svg { width: 100%; height: 100%; }

/* --------------------------------------------------------------------------
   Personnage
   -------------------------------------------------------------------------- */
.char { display: block; line-height: 0; }
.char svg { display: block; width: 100%; height: 100%; }

/* Pastille ronde : tête du personnage sur son décor */
.face {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(to bottom, var(--sky-top), var(--sky-bottom));
}
.face .char { width: 100%; height: 100%; padding-top: 4px; }

/* --------------------------------------------------------------------------
   Accueil et connexion
   -------------------------------------------------------------------------- */
.welcome {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  padding: 32px 0;
  text-align: center;
}
.mascot {
  width: 190px;
  height: 190px;
  margin: 0 auto 8px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(to bottom, var(--sky-top), var(--sky-bottom));
  box-shadow: 0 8px 0 var(--green-dark);
  animation: bob 2.4s ease-in-out infinite;
}
.mascot .char { width: 100%; height: 100%; padding-top: 14px; }
.brand { font-size: 2.4rem; font-weight: 900; color: var(--green-text); letter-spacing: -0.01em; }
.tagline { color: var(--muted); font-size: 1.05rem; max-width: 22rem; margin: 0 auto; }
.welcome-actions { display: grid; gap: 14px; margin-top: 28px; }

.auth-top { display: flex; align-items: center; gap: 8px; padding-top: 12px; min-height: 64px; }
.back {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.auth-title { margin-top: 8px; }
.auth-sub { margin-top: 4px; color: var(--muted); }

.providers { display: grid; gap: 12px; margin-top: 24px; }
.btn.provider {
  justify-content: flex-start;
  gap: 12px;
  padding: 10px 14px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 1rem;
}
.btn.provider[aria-disabled="true"] { cursor: default; }
.provider-label { flex: 1; text-align: center; }
.soon {
  flex: none;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--soft);
  border: 2px solid var(--border);
  color: var(--muted);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0 4px;
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.divider::before, .divider::after { content: ''; flex: 1; height: 2px; background: var(--border); }
.switch { margin-top: 22px; text-align: center; color: var(--muted); }

/* --------------------------------------------------------------------------
   En-tête vert : personnage, niveau, flamme, points
   -------------------------------------------------------------------------- */
.topbar {
  position: relative;
  z-index: 5;
  flex: none;
  padding: calc(12px + env(safe-area-inset-top, 0px)) 16px 14px;
  border-radius: 0 0 26px 26px;
  background: linear-gradient(to bottom, var(--header-top), var(--header-bottom));
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.12);
  color: #fff;
}
.top-row { display: flex; align-items: center; gap: 10px; }
.avatar-btn {
  flex: none;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 3px solid #fff;
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  background: linear-gradient(to bottom, var(--sky-top), var(--sky-bottom));
}
.avatar-btn .char { width: 100%; height: 100%; padding-top: 4px; }
.top-name { font-weight: 800; line-height: 1.15; overflow-wrap: anywhere; }
.top-sub { font-size: 0.8rem; font-weight: 700; opacity: 0.92; }
.top-chips { display: flex; gap: 6px; margin-left: auto; }
.chip-h {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  font-size: 0.9rem;
  font-weight: 800;
  white-space: nowrap;
}
.level-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; font-size: 0.8rem; font-weight: 800; }
.level-bar { flex: 1; height: 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.3); overflow: hidden; }
.level-bar > div { height: 100%; border-radius: 999px; background: #ffdd57; transition: width 0.4s; }

/* --------------------------------------------------------------------------
   Barre du bas, avec le bouton rond central
   -------------------------------------------------------------------------- */
.tabs {
  position: relative;
  z-index: 6;
  flex: none;
  background: var(--bg);
  border-top: 2px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabs-inner {
  display: grid;
  grid-template-columns: 1fr 1fr 92px 1fr 1fr;
  align-items: end;
  padding: 6px 6px 8px;
}
.tab {
  position: relative;
  min-height: 56px;
  padding: 6px 2px 4px;
  border: 0;
  border-radius: 14px;
  background: none;
  color: var(--muted);
  font: 800 0.66rem/1.1 var(--font);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.tab .icon-svg { width: 26px; height: 26px; }
.tab[aria-current="page"] { color: var(--green-text); }
.tab[aria-current="page"]::after {
  content: '';
  position: absolute;
  bottom: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
}

.tab-center { display: flex; justify-content: center; }
.tab-round {
  position: relative;
  width: 78px;
  height: 78px;
  margin-top: -40px;
  padding: 0;
  border: 5px solid var(--bg);
  border-radius: 50%;
  overflow: hidden;
  cursor: pointer;
  background: linear-gradient(to bottom, var(--sky-top), var(--sky-bottom));
  box-shadow: 0 0 0 3px var(--green), 0 6px 0 rgba(0, 0, 0, 0.14);
  transition: transform 0.08s;
}
.tab-round:active { transform: translateY(3px); }
.tab-round[aria-current="page"] { box-shadow: 0 0 0 4px var(--green-dark), 0 6px 0 rgba(0, 0, 0, 0.14); }
.tab-round .char { width: 100%; height: 100%; padding-top: 6px; }

.dot {
  position: absolute;
  top: 0;
  left: calc(50% + 6px);
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: var(--red);
  color: #fff;
  border: 2px solid var(--bg);
  font-size: 0.7rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dot[hidden] { display: none; }

/* --------------------------------------------------------------------------
   Quêtes : décor plein écran animé, hibou, rang et machine à sous
   -------------------------------------------------------------------------- */
.view.immersive { padding: 0; overflow: hidden; }

.world {
  --cloud: rgba(255, 255, 255, 0.92);
  --sun: #ffd23f;
  --sun-glow: rgba(255, 214, 90, 0.55);
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(to bottom, var(--sky-top) 0, var(--sky-bottom) 70%);
}
.world[data-scene="sunset"] { --sun: #ff6b3d; --sun-glow: rgba(255, 110, 60, 0.55); --cloud: rgba(255, 226, 200, 0.9); }
.world[data-scene="night"] { --cloud: rgba(170, 182, 255, 0.28); }
.world[data-scene="sky"] { --cloud: rgba(255, 255, 255, 0.97); }
.world[data-scene="forest"] { --cloud: rgba(240, 255, 245, 0.8); }

/* Le décor réagit à l'humeur du hibou : ciel couvert quand il s'ennuie */
.world[data-mood="sad"] .backdrop { filter: saturate(0.8) brightness(0.95); }
.world[data-mood="sad"]::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(40, 50, 80, 0.07);
  pointer-events: none;
}

.backdrop { position: absolute; inset: 0; }

.sun {
  position: absolute;
  top: 104px;
  right: 26px;
  width: 78px;
  height: 78px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fffbd0, var(--sun));
  box-shadow: 0 0 0 12px var(--sun-glow), 0 0 70px 24px var(--sun-glow);
  animation: sun-pulse 4.5s ease-in-out infinite;
}
.world[data-scene="sunset"] .sun { top: 38%; }

.moon {
  position: absolute;
  top: 108px;
  right: 30px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fffef0, #f1e7b5);
  box-shadow: 0 0 50px 14px rgba(255, 248, 200, 0.4);
  animation: sun-pulse 6s ease-in-out infinite;
}
.star {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px 1px rgba(255, 255, 255, 0.8);
  animation: twinkle 2.4s ease-in-out infinite;
}

.cloud {
  position: absolute;
  left: 0;
  width: 120px;
  height: 34px;
  border-radius: 999px;
  background: var(--cloud);
  animation: drift 78s linear infinite;
}
.cloud::before, .cloud::after { content: ''; position: absolute; border-radius: 50%; background: inherit; }
.cloud::before { left: 18px; top: -26px; width: 54px; height: 54px; }
.cloud::after { left: 64px; top: -16px; width: 40px; height: 40px; }
.cloud.c1 { top: 150px; animation-delay: -30s; }
.cloud.c2 { top: 230px; width: 90px; height: 26px; animation-duration: 56s; animation-delay: -10s; opacity: 0.85; }
.cloud.c3 { top: 320px; animation-duration: 95s; animation-delay: -60s; }
.cloud.c4 { top: 110px; width: 100px; animation-duration: 66s; animation-delay: -45s; opacity: 0.8; }

/* Étincelles qui montent (lucioles dans la forêt) */
.mote {
  position: absolute;
  bottom: 20%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--glass);
  box-shadow: 0 0 10px 3px rgba(255, 255, 255, 0.6);
  opacity: 0;
  animation: float-up 11s linear infinite;
}
.world[data-scene="forest"] .mote { background: #e8ff7a; box-shadow: 0 0 12px 4px rgba(210, 255, 90, 0.7); }
.world[data-scene="night"] .mote { background: #cfe0ff; box-shadow: 0 0 10px 3px rgba(160, 190, 255, 0.6); }

.hill { position: absolute; left: -12%; right: -12%; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.hill-back { bottom: 0; height: 34%; background: var(--ground-dark); animation: sway 9s ease-in-out infinite alternate; }
.hill-front { bottom: 0; height: 24%; background: var(--ground); animation: sway 13s ease-in-out infinite alternate-reverse; }

.drop {
  position: absolute;
  top: -6%;
  width: 2px;
  height: 20px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.7);
  animation: fall 1s linear infinite;
}
.confetti {
  position: absolute;
  top: -8%;
  width: 9px;
  height: 15px;
  border-radius: 2px;
  animation: confetti-fall 4.5s linear infinite;
}
.confetti.k0 { background: #ff5c5c; }
.confetti.k1 { background: #ffd23f; }
.confetti.k2 { background: #58cc02; }
.confetti.k3 { background: #4aa3ff; }
.confetti.k4 { background: #c77dff; }

/* L'interface par-dessus le décor */
.world-ui {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: calc(var(--header-h) + 4px) 14px 16px;
  overflow-y: auto;
  scrollbar-width: none;
}
.world-ui::-webkit-scrollbar { display: none; }

.rank-card {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px 8px 12px;
  border-radius: 20px;
  background: var(--glass);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(6px);
}
.rank-name { font-weight: 900; }
.rank-bar { height: 10px; margin-top: 4px; border-radius: 999px; background: var(--border); overflow: hidden; }
.rank-bar > div { height: 100%; border-radius: 999px; background: var(--green); transition: width 0.4s; }
.rank-meta { margin-top: 4px; font-size: 0.78rem; font-weight: 700; color: var(--muted); }
.help-btn {
  flex: none;
  width: 40px;
  height: 40px;
  border: 2px solid var(--border);
  border-radius: 50%;
  background: var(--bg);
  color: var(--text);
  font: 900 1.1rem var(--font);
  cursor: pointer;
}

.owl-zone {
  flex: 1;
  min-height: 104px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.owl {
  height: 100%;
  max-height: 340px;
  aspect-ratio: 200 / 220;
  margin-bottom: 4px;
  animation: bob 2.6s ease-in-out infinite;
}
.owl .char { width: 100%; height: 100%; }
.owl.cheer { animation: hop 0.8s ease-out; }
.world.compact .owl { max-height: 150px; }

.world-panel { flex: none; }
.center { text-align: center; }
.chips.center { justify-content: center; }
.goal-row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 14px; }
.goal-row .chip {
  border-color: transparent;
  background: var(--glass);
  color: var(--text);
  font-size: 0.82rem;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
}
.hint.on-world {
  margin-top: 12px;
  padding: 6px 12px;
  border-radius: 12px;
  background: var(--glass);
}

/* Le bouton Roll Quest : doré-vert, reflet qui passe, halo qui pulse */
.btn.roll-btn {
  position: relative;
  overflow: hidden;
  min-height: 88px;
  border-radius: 30px;
  background: linear-gradient(180deg, #a6f04a 0%, #58cc02 52%, #3fa800 100%);
  color: #0d2a06;
  font-size: 1.6rem;
  letter-spacing: 0.16em;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
  box-shadow: 0 8px 0 #2f7d00, 0 16px 28px rgba(0, 0, 0, 0.28), inset 0 3px 0 rgba(255, 255, 255, 0.5);
  animation: glow 2.2s ease-in-out infinite;
}
.btn.roll-btn:active:not(:disabled) {
  transform: translateY(8px);
  box-shadow: 0 0 0 #2f7d00, 0 6px 12px rgba(0, 0, 0, 0.25), inset 0 3px 0 rgba(255, 255, 255, 0.5);
}
.btn.roll-btn::after {
  content: '';
  position: absolute;
  top: -30%;
  bottom: -30%;
  left: -60%;
  width: 38%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.65), transparent);
  transform: skewX(-20deg);
  animation: shine 3.4s ease-in-out infinite;
}
.roll-icon { display: inline-block; font-size: 2rem; letter-spacing: 0; animation: wiggle 2.6s ease-in-out infinite; }
.btn.roll-btn:disabled {
  animation: none;
  background: #e1e8da;
  color: var(--muted);
  text-shadow: none;
  box-shadow: 0 8px 0 #c3ccbb;
}
.btn.roll-btn:disabled::after { display: none; }

/* La machine à sous : cadre doré, ampoules qui clignotent, rouleaux */
.slot-machine {
  padding: 12px 16px 18px;
  border: 4px solid #ffc800;
  border-radius: 30px;
  background: linear-gradient(180deg, #1f8a2b, #0d4f16);
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.28), 0 0 44px rgba(255, 200, 0, 0.4);
  animation: pop 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.3);
}
.slot-lights { display: flex; justify-content: space-between; padding: 0 4px 10px; }
.slot-lights i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #6b5600;
  animation: blink 0.8s steps(1) infinite;
}
.slot-lights i.on { animation-delay: 0.4s; }
.rolling-title {
  margin-bottom: 14px;
  text-align: center;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffd23f;
}
.reels { display: flex; justify-content: center; gap: 10px; }
.reel {
  width: 96px;
  height: 96px; /* = REEL_HEIGHT dans machine.js */
  overflow: hidden;
  border: 3px solid #ffe27a;
  border-radius: 20px;
  background: #fff;
  box-shadow: inset 0 8px 12px rgba(0, 0, 0, 0.12), 0 4px 0 rgba(0, 0, 0, 0.25);
}
.reel-cell { height: 96px; display: flex; align-items: center; justify-content: center; font-size: 2.9rem; font-weight: 900; }

/* La quête tirée */
.quest-card {
  --rarity: var(--green);
  overflow: hidden;
  border: 3px solid var(--rarity);
  border-radius: 24px;
  background: var(--bg);
  text-align: center;
  box-shadow: 0 8px 0 rgba(0, 0, 0, 0.18);
  animation: pop 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.3);
}
.diff-easy { --rarity: #58cc02; }
.diff-medium { --rarity: #ffaa1d; }
.diff-hard { --rarity: #ff5c5c; }
.quest-rarity {
  padding: 8px;
  background: var(--rarity);
  color: #1d1b2b;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.quest-body { padding: 14px 16px 16px; }
.quest-top { display: flex; align-items: center; gap: 14px; text-align: left; }
.quest-emoji {
  flex: none;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--rarity);
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.15);
  font-size: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.quest-title { font-size: 1.3rem; line-height: 1.2; }
.quest-label { margin-top: 2px; font-size: 1.05rem; font-weight: 900; color: var(--green-text); }
.quest-desc { margin-top: 10px; color: var(--muted); }
.quest-body .mood-label { margin: 12px 0 6px; }
.quest-body .face-btn { min-height: 44px; font-size: 1.3rem; }
.quest-body .sheet-actions { margin-top: 14px; gap: 8px; }
.timer-box { margin-top: 16px; }
.timer { font-size: 3.4rem; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1.1; }
.timer-bar { height: 14px; margin-top: 10px; border-radius: 999px; background: var(--border); overflow: hidden; }
.timer-bar > div { height: 100%; border-radius: 999px; background: var(--rarity); transition: width 0.5s linear; }
.timer-done[hidden] { display: none; }
.timer-over { margin-top: 14px; font-size: 1.2rem; font-weight: 900; color: var(--green-text); }
.mood-block { text-align: left; }
.btn[aria-disabled="true"]:not(.outline) {
  background: var(--border);
  color: var(--muted);
  box-shadow: 0 4px 0 #cfd6c8;
  cursor: not-allowed;
}
.btn.outline[aria-disabled="true"] { opacity: 0.75; }


/* Badges de rang */
.rank-badge { display: inline-block; flex: none; line-height: 0; }
.rank-badge svg { width: 100%; height: 100%; }
.rank-badge.xs { width: 22px; height: 25px; }
.top-rank { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 800; opacity: 0.95; }
.rank-badge.sm { width: 34px; height: 38px; }
.rank-badge.md { width: 46px; height: 52px; }
.rank-badge.lg { width: 86px; height: 97px; }
.rank-up { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 12px; animation: pop 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.4); }

/* Échelle des rangs (profil) */
.profile-rank { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 6px; }
.profile-rank-name { font-size: 1.2rem; font-weight: 900; }
.ladder { margin-top: 8px; }
.ladder-row { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-top: 2px solid var(--border); }
.ladder-row.current { border-top-color: transparent; border-radius: 16px; background: var(--green-soft); }
.ladder-row.locked { opacity: 0.55; }
.ladder-state { font-weight: 900; }

/* --------------------------------------------------------------------------
   Feuille modale (quête, aide)
   -------------------------------------------------------------------------- */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(16, 32, 8, 0.55);
  animation: fade 0.15s ease-out;
}
.sheet {
  width: 100%;
  max-width: 480px;
  max-height: 92vh;
  max-height: 92dvh;
  overflow-y: auto;
  padding: 22px 20px calc(24px + env(safe-area-inset-bottom));
  border-radius: 26px 26px 0 0;
  background: var(--bg);
  animation: rise 0.22s ease-out;
}
.sheet-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.sheet-emoji {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 6px 0 var(--green-dark);
  font-size: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sheet-emoji.done { background: var(--gold); box-shadow: 0 6px 0 var(--gold-dark); }
.sheet .desc { color: var(--muted); }
.sheet-owl { width: 130px; height: 120px; margin: 0 auto 4px; animation: bob 1.8s ease-in-out infinite; }
.sheet-owl .char { width: 100%; height: 100%; }
.sheet-title { text-align: center; }
.sheet-title + .reward, .sheet-owl ~ .reward { text-align: center; }
.reward-sub { margin-top: 4px; text-align: center; font-weight: 800; color: var(--green-text); }
.sheet-owl ~ .desc, .sheet-owl ~ .chips { text-align: center; justify-content: center; }
.mood-label { margin: 18px 0 8px; font-size: 0.85rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.mood { display: flex; gap: 8px; }
.face-btn {
  flex: 1;
  min-height: 52px;
  border: 2px solid var(--border);
  border-radius: 14px;
  background: var(--bg);
  font-size: 1.5rem;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--border);
}
.face-btn[aria-pressed="true"] { border-color: var(--green); background: var(--green-soft); box-shadow: 0 3px 0 var(--green-dark); }
.sheet-actions { display: grid; gap: 10px; margin-top: 22px; }
.reward { font-size: 1.4rem; font-weight: 900; color: var(--green-text); }
.rules { display: grid; gap: 14px; margin-top: 18px; }
.rule { display: flex; gap: 14px; align-items: flex-start; }
.rule .emoji { font-size: 1.8rem; line-height: 1.1; }
.rule p { color: var(--muted); }
.rule strong { color: var(--text); }

/* --------------------------------------------------------------------------
   Cartes, pastilles, listes
   -------------------------------------------------------------------------- */
.card {
  margin-top: 14px;
  padding: 16px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
}
.page-title { margin-top: 18px; }
.empty { color: var(--muted); text-align: center; padding: 22px 12px; }
.grow { flex: 1; min-width: 0; }
.who { font-weight: 800; overflow-wrap: anywhere; }
.mt-s { margin-top: 10px; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.chip {
  padding: 3px 10px;
  border: 2px solid var(--border);
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
}
.chip.gold { border-color: var(--gold); background: var(--gold-soft); color: var(--gold-text); }
.insight { margin-top: 16px; text-align: center; color: var(--muted); font-weight: 700; }

/* Fil */
.post header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.post .caption { margin-top: 12px; font-weight: 600; overflow-wrap: anywhere; }
.reactions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.reactions > button, .reactions > span {
  min-height: 44px;
  padding: 6px 14px;
  border: 2px solid var(--border);
  border-radius: 14px;
  background: var(--bg);
  color: var(--text);
  font: 800 0.95rem var(--font);
  display: inline-flex;
  align-items: center;
}
.reactions > button { cursor: pointer; box-shadow: 0 3px 0 var(--border); }
.reactions > button[aria-pressed="true"] { border-color: var(--green); background: var(--green-soft); box-shadow: 0 3px 0 var(--green-dark); }

/* Amis */
.person { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 2px solid var(--border); }
.card h2 + .person { border-top: 0; }
.friend-actions { padding: 0 0 12px 60px; }
.flame-pill {
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--orange-soft);
  color: var(--orange-text);
  font-weight: 900;
  white-space: nowrap;
}

/* Profil */
.profile-hero { margin-top: 18px; text-align: center; }
.profile-avatar {
  width: 150px;
  height: 150px;
  margin: 0 auto 12px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(to bottom, var(--sky-top), var(--sky-bottom));
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.14);
}
.profile-avatar .char { width: 100%; height: 100%; padding-top: 10px; }
.profile-name { font-size: 1.5rem; font-weight: 900; }
.profile-sub { color: var(--muted); }
.progress { height: 16px; margin-top: 14px; border-radius: 999px; background: var(--border); overflow: hidden; }
.progress > div { height: 100%; border-radius: 999px; background: var(--green); transition: width 0.4s; }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.stat-box { padding: 12px 14px; border: 2px solid var(--border); border-radius: var(--radius); }
.stat-box .value { font-size: 1.5rem; font-weight: 900; }
.stat-box .label { font-size: 0.78rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }

/* --------------------------------------------------------------------------
   Garde-robe (onglet Style)
   -------------------------------------------------------------------------- */
.wardrobe-stage {
  position: relative;
  height: 240px;
  margin-top: 16px;
  border-radius: 22px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background-image: linear-gradient(
    to top,
    var(--ground) 0,
    var(--ground) 56px,
    var(--sky-bottom) 56px,
    var(--sky-top) 100%
  );
}
.wardrobe-stage .char { width: 190px; height: 209px; margin-bottom: 14px; }
.slot-tabs { display: flex; gap: 8px; margin: 14px -16px 0; padding: 4px 16px 10px; overflow-x: auto; }
.slot-tab {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 6px 14px;
  border: 2px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text);
  font: 800 0.9rem var(--font);
  cursor: pointer;
}
.slot-tab[aria-selected="true"] { border-color: var(--green); background: var(--green-soft); }
.items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.item {
  position: relative;
  padding: 8px 6px 10px;
  border: 2px solid var(--border);
  border-radius: 16px;
  background: var(--bg);
  color: var(--text);
  font: inherit;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--border);
}
.item[aria-pressed="true"] { border-color: var(--green); box-shadow: 0 3px 0 var(--green-dark); }
.item.trying { border-color: var(--gold); background: var(--gold-soft); box-shadow: 0 3px 0 var(--gold-dark); }
.item.locked { opacity: 0.65; }
.coin-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
  padding: 8px 14px;
  border: 2px solid var(--border);
  border-radius: 14px;
  font-weight: 800;
}
.coin-line strong { font-size: 1.1rem; }
.try-bar {
  margin-top: 12px;
  padding: 14px;
  border: 2px solid var(--gold);
  border-radius: var(--radius);
  background: var(--gold-soft);
  animation: rise 0.2s ease-out;
}
.try-title { font-weight: 900; }
.btn:disabled:not(.small) { cursor: not-allowed; }
.item-preview { display: flex; align-items: center; justify-content: center; height: 78px; }
.item-preview .char { width: 78px; height: 72px; }
.item-preview .full { width: 70px; height: 77px; }
.scene-swatch {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  background-image: linear-gradient(to top, var(--ground) 0, var(--ground) 30%, var(--sky-bottom) 30%, var(--sky-top) 100%);
}
.item-name { margin-top: 4px; font-size: 0.8rem; font-weight: 800; line-height: 1.2; }
.item-state { margin-top: 2px; font-size: 0.72rem; font-weight: 800; color: var(--muted); display: flex; align-items: center; justify-content: center; gap: 4px; }
.item-state .icon-svg { width: 14px; height: 14px; }
.item[aria-pressed="true"] .item-state { color: var(--green-text); }

/* --------------------------------------------------------------------------
   Toast et animations
   -------------------------------------------------------------------------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(110px + env(safe-area-inset-bottom));
  z-index: 60;
  max-width: calc(100vw - 32px);
  padding: 12px 18px;
  border-radius: var(--radius);
  background: var(--text);
  color: #fff;
  font-weight: 800;
  text-align: center;
  transform: translateX(-50%);
  animation: fade 0.2s ease-out;
}

/* --------------------------------------------------------------------------
   Transitions entre onglets : l'écran glisse dans le sens de l'onglet visé
   -------------------------------------------------------------------------- */
.view.enter-right { animation: slide-in-right 0.38s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.view.enter-left { animation: slide-in-left 0.38s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.view.leave-left { animation: slide-out-left 0.38s cubic-bezier(0.4, 0, 0.6, 1) both; pointer-events: none; }
.view.leave-right { animation: slide-out-right 0.38s cubic-bezier(0.4, 0, 0.6, 1) both; pointer-events: none; }

@keyframes slide-in-right { from { transform: translateX(100%); opacity: 0.4; } to { transform: none; opacity: 1; } }
@keyframes slide-in-left { from { transform: translateX(-100%); opacity: 0.4; } to { transform: none; opacity: 1; } }
@keyframes slide-out-left { from { transform: none; opacity: 1; } to { transform: translateX(-35%); opacity: 0; } }
@keyframes slide-out-right { from { transform: none; opacity: 1; } to { transform: translateX(35%); opacity: 0; } }

/* Le contenu apparaît en cascade au premier affichage d'un onglet (classe .fresh, retirée après) */
.view.fresh > * { animation: rise-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.view.fresh > :nth-child(2) { animation-delay: 0.06s; }
.view.fresh > :nth-child(3) { animation-delay: 0.12s; }
.view.fresh > :nth-child(4) { animation-delay: 0.18s; }
.view.fresh > :nth-child(5) { animation-delay: 0.24s; }
.view.fresh > :nth-child(n + 6) { animation-delay: 0.3s; }

/* Onglet actif : petit rebond de l'icône ; bouton rond : pop */
.tab[aria-current="page"] .icon-svg { animation: tab-pop 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.4); }
.tab-round[aria-current="page"] { animation: round-pop 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.4); }


@keyframes rise-in { from { transform: translateY(18px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes tab-pop { 0% { transform: scale(0.7); } 60% { transform: scale(1.2); } 100% { transform: scale(1); } }
@keyframes round-pop { 0% { transform: scale(0.88); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes hop {
  0% { transform: translateY(0) scale(1, 1); }
  20% { transform: translateY(0) scale(1.1, 0.88); }
  45% { transform: translateY(-46px) scale(0.94, 1.08); }
  70% { transform: translateY(0) scale(1.08, 0.92); }
  100% { transform: translateY(0) scale(1, 1); }
}

@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { transform: translateY(24px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes glow {
  0%, 100% { box-shadow: 0 7px 0 var(--green-dark), 0 0 0 0 rgba(88, 204, 2, 0.5); }
  50% { box-shadow: 0 7px 0 var(--green-dark), 0 0 0 14px rgba(88, 204, 2, 0); }
}
@keyframes pop { from { transform: scale(0.85); opacity: 0; } to { transform: none; opacity: 1; } }

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

/* ---------- Dessins à la place des emojis (gfx.js) ---------- */
.gx { display: inline-block; flex: none; width: 1.25em; height: 1.25em; vertical-align: -0.24em; }
.gx svg { display: block; width: 100%; height: 100%; overflow: visible; }
.gx + .gx { margin-left: 0.1em; }
.roll-icon .gx { width: 1.15em; height: 1.15em; vertical-align: middle; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.25)); }
.reel-cell .gx { width: 1.1em; height: 1.1em; vertical-align: middle; }
.chip .gx, .chip-h .gx { width: 1.3em; height: 1.3em; }
.chip-h .gx { width: 1.45em; height: 1.45em; }
.face-btn .gx { width: 1.7em; height: 1.7em; vertical-align: middle; }
.quest-emoji .gx { width: 1em; height: 1em; vertical-align: middle; }
.rank-badge svg svg { overflow: visible; }


/* Roll Quest : étincelles qui montent, anneau qui pulse, machine qui secoue */
.btn.roll-btn { gap: 14px; }
.btn.roll-btn:not(:disabled)::before {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 25px;
  border: 2px solid rgba(255, 255, 255, 0.55);
  animation: ringPulse 2.2s ease-out infinite;
  pointer-events: none;
}
.roll-label { position: relative; z-index: 1; }
.roll-icon { position: relative; z-index: 1; }
.roll-icon .gx { width: 1.3em; height: 1.3em; }
.roll-sparks { position: absolute; inset: 0; pointer-events: none; }
.roll-sparks i { position: absolute; bottom: 8px; width: 18px; height: 18px; opacity: 0; animation: sparkUp 2.8s ease-out infinite; font-style: normal; }
.roll-sparks i:nth-child(1) { left: 12%; animation-delay: 0s; }
.roll-sparks i:nth-child(2) { left: 52%; animation-delay: 0.9s; }
.roll-sparks i:nth-child(3) { left: 86%; animation-delay: 1.7s; }
.roll-sparks .gx { width: 100%; height: 100%; }
@keyframes ringPulse { 0% { opacity: 0.9; transform: scale(0.97); } 100% { opacity: 0; transform: scale(1.04); } }
@keyframes sparkUp { 0% { opacity: 0; transform: translateY(0) scale(0.6); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-46px) scale(1.1) rotate(40deg); } }
@media (prefers-reduced-motion: reduce) { .roll-sparks i, .btn.roll-btn::before { animation: none; } }

/* ---------- Missions ---------- */
.missions-btn { margin-top: 10px; display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--glass); }
.missions-badge { padding: 2px 9px; border-radius: 999px; background: #e63946; color: #fff; font-size: 0.75rem; font-weight: 900; animation: wiggle 2.2s ease-in-out infinite; }
.missions { display: grid; gap: 10px; margin: 8px 0; max-height: 58vh; overflow-y: auto; }
.missions-heading { margin: 8px 0 0; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.mission { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; border: 2px solid var(--border); background: var(--bg); }
.mission.ready { border-color: var(--gold); background: var(--gold-soft); }
.mission.claimed { opacity: 0.6; }
.mission-icon .gx { width: 2rem; height: 2rem; }
.mission-title { font-weight: 800; line-height: 1.2; }
.mission-bar { height: 8px; margin-top: 6px; border-radius: 99px; background: var(--border); overflow: hidden; }
.mission-bar div { height: 100%; border-radius: 99px; background: linear-gradient(90deg, #8be04e, #58cc02); }
.mission-meta { margin: 3px 0 0; font-size: 0.75rem; font-weight: 700; color: var(--muted); }
.mission-reward, .mission-done { font-weight: 900; white-space: nowrap; }
.mission-done { color: #3fa800; }
.btn.small { padding: 8px 12px; min-height: 0; font-size: 0.9rem; }
@keyframes wiggle { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-8deg); } 92% { transform: rotate(8deg); } }
.missions-btn { min-height: 0; padding: 9px 12px; margin-top: 10px; margin-bottom: 4px; font-size: 0.95rem; }
.goal-row { margin-bottom: 10px; }
.btn.roll-btn { min-height: 76px; }

/* ---------- Décor fantasy : plaine, montagnes enneigées, château, rivière ---------- */
.world {
  --m-far: #b7c8ee; --m-far-s: #9fb3df; --m-mid: #7488c0; --m-mid-s: #5f73ab;
  --snow: #ffffff; --snow-s: #d3e2ff; --castle: #8f7fc4; --river: #6ec6ff;
  --plain: #8fd45a; --plain-d: #6dbb3d; --plain-l: #b9ea7e;
  background: linear-gradient(to bottom, #5aa9ff 0, #a6d8ff 38%, #fbe6c4 62%);
}
.world[data-scene="night"] {
  --m-far: #4b5a9c; --m-far-s: #3b4883; --m-mid: #2f3a73; --m-mid-s: #242d5e; --snow: #dfe8ff; --snow-s: #aab8ee;
  --castle: #20285a; --river: #3b6fd0; --plain: #2f8a45; --plain-d: #256b37; --plain-l: #3fa05a;
  background: linear-gradient(to bottom, #0f1850 0, #2c3a8a 45%, #6a62b0 66%);
}
.world[data-scene="sunset"] {
  --m-far: #e0a6c0; --m-far-s: #c98aa9; --m-mid: #a56a9a; --m-mid-s: #8a5585; --snow: #fff4e6; --snow-s: #ffc9b0;
  --castle: #7a4f8c; --river: #ffae8a; --plain: #a7cf55; --plain-d: #86b23f; --plain-l: #cde77a;
  background: linear-gradient(to bottom, #ff8f7a 0, #ffc59a 45%, #ffe9c2 66%);
}
.world[data-scene="forest"] {
  --m-far: #a9d0c4; --m-far-s: #8fbdb0; --m-mid: #5f9a8c; --m-mid-s: #4c8478; --castle: #4f7d86;
  --plain: #4fb060; --plain-d: #3a9150; --plain-l: #7fd18a;
  background: linear-gradient(to bottom, #6fcf9f 0, #bdebd2 45%, #effbe9 66%);
}
.world[data-scene="sky"] {
  --m-far: #cfdcf6; --m-far-s: #b7c9ee; --m-mid: #8fa6d8; --m-mid-s: #7a92c8;
  --plain: #e8f6ff; --plain-d: #c5e2f7; --plain-l: #ffffff; --river: #8fd0ff;
  background: linear-gradient(to bottom, #4f9cf0 0, #b9dcff 50%, #f2f9ff 70%);
}
.vista { position: absolute; left: 0; right: 0; bottom: 0; height: 74%; pointer-events: none; }
.vista svg { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; overflow: visible; }
.vista-far { animation: vistaFar 40s ease-in-out infinite alternate; }
.vista-mid { animation: vistaMid 30s ease-in-out infinite alternate; }
.vista-plain { animation: vistaNear 22s ease-in-out infinite alternate; }
.river-shine { animation: riverFlow 4s linear infinite; }
.bird {
  position: absolute;
  left: -8%;
  width: 22px;
  height: 8px;
  background:
    linear-gradient(35deg, transparent 45%, rgba(40, 50, 90, 0.7) 46% 58%, transparent 59%) left / 50% 100% no-repeat,
    linear-gradient(-35deg, transparent 45%, rgba(40, 50, 90, 0.7) 46% 58%, transparent 59%) right / 50% 100% no-repeat;
  animation: birdFly 40s linear infinite, flap 0.6s ease-in-out infinite alternate;
}
.world[data-scene="night"] .bird { display: none; }
@keyframes vistaFar { from { transform: translateX(-5px) scale(1.04); } to { transform: translateX(5px) scale(1.04); } }
@keyframes vistaMid { from { transform: translateX(8px) scale(1.05); } to { transform: translateX(-8px) scale(1.05); } }
@keyframes vistaNear { from { transform: translateX(-10px) scale(1.06); } to { transform: translateX(10px) scale(1.06); } }
@keyframes riverFlow { to { stroke-dashoffset: -56; } }
@keyframes birdFly { from { transform: translateX(0); } to { transform: translateX(560px); } }
@keyframes flap { from { scale: 1 1; } to { scale: 1 0.55; } }
@media (prefers-reduced-motion: reduce) { .vista svg, .river-shine, .bird { animation: none; } }

/* ---------- Roll Quest : bouton de jeu, lettres épaisses ---------- */
.btn.roll-btn {
  min-height: 84px;
  border-radius: 22px;
  border: 4px solid #6b3a00;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0, rgba(255, 255, 255, 0) 46%),
    linear-gradient(180deg, #ffd84a 0%, #ffae1a 55%, #ff8a00 100%);
  color: #fff;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", "Franklin Gothic Heavy", "Arial Black", "Segoe UI Black", sans-serif;
  font-size: 2.35rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-shadow:
    -2px -2px 0 #6b3a00, 2px -2px 0 #6b3a00, -2px 2px 0 #6b3a00, 2px 2px 0 #6b3a00,
    0 -3px 0 #6b3a00, 0 3px 0 #6b3a00, -3px 0 0 #6b3a00, 3px 0 0 #6b3a00,
    0 6px 0 #6b3a00, 0 8px 10px rgba(0, 0, 0, 0.35);
  box-shadow: 0 8px 0 #8a4a00, 0 14px 22px rgba(60, 30, 0, 0.45), inset 0 0 0 3px rgba(255, 246, 190, 0.7), inset 0 -8px 0 rgba(160, 70, 0, 0.35);
  animation: rollGlow 2s ease-in-out infinite;
}
.btn.roll-btn:active:not(:disabled) { transform: translateY(8px); box-shadow: 0 0 0 #8a4a00, 0 6px 12px rgba(60, 30, 0, 0.4), inset 0 0 0 3px rgba(255, 246, 190, 0.7); }
.btn.roll-btn:not(:disabled)::before { border-color: rgba(255, 255, 255, 0.7); border-radius: 16px; }
.btn.roll-btn:disabled { background: linear-gradient(#e6e9e2, #c8cdc2); border-color: #8d9588; color: #fff; text-shadow: 0 2px 0 #7b8374; font-size: 1.6rem; box-shadow: 0 8px 0 #8d9588; animation: none; }
@keyframes rollGlow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(255, 190, 40, 0)); transform: scale(1); }
  50% { filter: drop-shadow(0 0 14px rgba(255, 190, 40, 0.85)); transform: scale(1.025); }
}
/* Couleurs du décor (le CSP interdit les attributs style en ligne : on passe par des classes) */
.f-m-far { fill: var(--m-far); } .f-m-far-s { fill: var(--m-far-s); }
.f-m-mid { fill: var(--m-mid); } .f-m-mid-s { fill: var(--m-mid-s); }
.f-snow { fill: var(--snow); } .f-snow-s { fill: var(--snow-s); }
.f-castle { fill: var(--castle); } .f-river { fill: var(--river); }
.f-plain { fill: var(--plain); } .f-plain-d { fill: var(--plain-d); } .f-plain-l { fill: var(--plain-l); }

/* ---------- Photos des partages ---------- */
.photo-input { display: none; }
.photo-preview { display: grid; gap: 8px; justify-items: center; margin-top: 8px; }
.photo-preview img, .post-photo { display: block; width: 100%; max-height: 320px; object-fit: cover; border-radius: 14px; border: 2px solid var(--border); background: var(--soft); }
.photo-preview img { max-height: 180px; }
.post-photo { margin: 8px 0; }
[hidden] { display: none !important; }

/* ---------- Exercice de respiration : la boule qui grandit et rétrécit ---------- */
.breath { margin: 14px 0 6px; text-align: center; }
.breath-stage { position: relative; width: 210px; height: 210px; margin: 0 auto; display: grid; place-items: center; }
.breath-ring { position: absolute; inset: 0; border-radius: 50%; border: 3px dashed rgba(47, 155, 255, 0.45); }
.breath-orb {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transform: scale(0.5);
  background: radial-gradient(circle at 35% 30%, #eafcff 0, #8fe3ff 38%, #3aa8ff 75%, #2a6fe0 100%);
  box-shadow: 0 0 40px 10px rgba(80, 190, 255, 0.55), inset 0 -12px 24px rgba(20, 80, 200, 0.35);
}
.breath.on .breath-orb { animation: breathe 12s infinite; }
.breath-label { margin: 12px 0 0; font-size: 1.5rem; font-weight: 900; color: #1a6fd0; min-height: 1.9rem; }
.breath-hint { margin: 2px 0 0; font-size: 0.85rem; font-weight: 700; color: var(--muted); min-height: 1.2rem; }
/* 12 s : inspire 4 s (0 → 33 %), retient 2 s (→ 50 %), souffle 6 s (→ 100 %) */
@keyframes breathe {
  0% { transform: scale(0.5); animation-timing-function: ease-in-out; }
  33.33% { transform: scale(1); animation-timing-function: linear; }
  50% { transform: scale(1); animation-timing-function: ease-in-out; }
  100% { transform: scale(0.5); }
}
@media (prefers-reduced-motion: reduce) { .breath.on .breath-orb { animation-duration: 12s; } }

/* ---------- Quêtes par étapes, mise de côté, minuteur strict ---------- */
.quest-intro { margin: 8px 0 0; text-align: center; font-weight: 700; color: var(--muted); }
.steps-box { margin-top: 14px; display: grid; gap: 12px; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.step { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border-radius: 14px; border: 2px solid var(--border); background: var(--bg); }
.step-num { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--border); font-weight: 900; color: var(--muted); }
.step-num .gx { width: 18px; height: 18px; }
.step-text { font-weight: 700; line-height: 1.3; padding-top: 3px; }
.line-field { flex: 1; min-width: 0; display: grid; gap: 8px; }
.line-input { min-height: 48px; }
.line-count { font-size: 0.85rem; font-weight: 700; color: var(--muted); }
.line-count.ok { color: var(--green-dark, #2f8a00); }
.step.now { border-color: var(--green); background: var(--green-soft); }
.step.now .step-num { background: var(--green); color: #fff; }
.step.done { opacity: 0.6; }
.step.done .step-num { background: var(--green-soft); }
.step.todo { opacity: 0.55; }
.strict-note { margin: 10px 0 0; padding: 8px 12px; border-radius: 12px; background: var(--orange-soft); color: var(--orange-text); font-size: 0.85rem; font-weight: 800; text-align: center; }
.aside-card { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; padding: 10px 14px; border-radius: 16px; background: var(--glass); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.12); }
.aside-title { margin: 0; font-weight: 800; line-height: 1.2; }
.aside-card .hint { margin: 2px 0 0; }
.step-text { text-align: left; }

/* ---------- Écran de lancement : le hibou court, la caméra approche, flash ---------- */
.intro {
  position: fixed;
  inset: 0;
  z-index: 10000;
  overflow: hidden;
  background: radial-gradient(circle at 50% 50%, #1d3b25, #08140c);
  animation: introOut 5.9s linear forwards;
}
.intro-stage { position: absolute; inset: 0; transform-origin: 50% 66%; animation: introZoom 5.9s cubic-bezier(0.45, 0, 0.85, 0.65) forwards; }
.intro-backdrop { position: absolute; inset: 0; }
.intro-backdrop .cloud { animation-duration: 7s; }
.intro-backdrop .mote { animation-duration: 3s; }
.intro-ground {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 26%;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.22) 0 28px, transparent 28px 96px),
    linear-gradient(180deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.16));
  animation: groundRun 0.45s linear infinite;
}
.intro-owl { position: absolute; left: 50%; bottom: 22%; width: min(44vw, 210px); aspect-ratio: 200 / 220; transform: translateX(-50%); }
.runner { width: 100%; height: 100%; transform-origin: 50% 90%; animation: runBob 0.3s ease-in-out infinite alternate; }
.runner .char { width: 100%; height: 100%; }
.dust { position: absolute; bottom: 4%; left: 8%; width: 26px; height: 26px; border-radius: 50%; background: rgba(255, 255, 255, 0.85); opacity: 0; animation: dustPuff 0.9s ease-out infinite; }
.dust.d1 { animation-delay: 0.18s; width: 20px; height: 20px; }
.dust.d2 { animation-delay: 0.36s; width: 30px; height: 30px; }
.dust.d3 { animation-delay: 0.54s; width: 18px; height: 18px; }
.dust.d4 { animation-delay: 0.72s; width: 24px; height: 24px; }
.speed { position: absolute; left: 100%; height: 3px; width: 90px; border-radius: 3px; background: rgba(255, 255, 255, 0.75); animation: speedLine 0.55s linear infinite; }
.speed.s0 { top: 58%; animation-delay: 0s; }
.speed.s1 { top: 64%; animation-delay: 0.1s; width: 60px; }
.speed.s2 { top: 70%; animation-delay: 0.2s; }
.speed.s3 { top: 76%; animation-delay: 0.3s; width: 70px; }
.speed.s4 { top: 82%; animation-delay: 0.4s; }
.speed.s5 { top: 88%; animation-delay: 0.05s; width: 50px; }
.intro-flash {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(circle at 50% 62%, #ffffff 0, #fffbe3 38%, #ffffff 100%);
  animation: introFlash 5.9s ease-in forwards;
}
.intro.calm { animation: introCalm 1.2s ease forwards; }
.intro.calm .intro-stage, .intro.calm .intro-flash { animation: none; }
@keyframes introZoom { 0%, 34% { transform: scale(1); } 78%, 100% { transform: scale(3.4); } }
@keyframes introFlash { 0%, 62% { opacity: 0; } 78% { opacity: 1; } 100% { opacity: 1; } }
@keyframes introOut { 0%, 82% { opacity: 1; } 100% { opacity: 0; } }
@keyframes introCalm { 0%, 40% { opacity: 1; } 100% { opacity: 0; } }
@keyframes runBob { from { transform: translateY(0) rotate(-4deg); } to { transform: translateY(-14px) rotate(4deg); } }
@keyframes groundRun { to { background-position: -96px 0, 0 0; } }
@keyframes dustPuff { 0% { opacity: 0.9; transform: translate(0, 0) scale(0.5); } 100% { opacity: 0; transform: translate(-70px, -14px) scale(1.6); } }
@keyframes speedLine { from { transform: translateX(0); opacity: 0.9; } to { transform: translateX(-130vw); opacity: 0; } }

/* Cadre 9:16 : plein écran sur téléphone, centré avec des bords sombres sur un écran large */
.intro-frame { position: absolute; inset: 0; overflow: hidden; background: #8fd3ff; }
@media (orientation: landscape) {
  .intro-frame { inset: auto; left: 50%; top: 50%; width: calc(100vh * 9 / 16); height: 100vh; transform: translate(-50%, -50%); }
}
.intro-ground { display: none; }
/* Le chemin en terre : il part de l'horizon et s'élargit vers nous */
.intro-path {
  position: absolute;
  left: 0;
  right: 0;
  top: 64%;
  bottom: 0;
  clip-path: polygon(46.5% 0, 53.5% 0, 112% 100%, -12% 100%);
  background: linear-gradient(180deg, #d2a872 0%, #b98550 45%, #8f5e30 100%);
}
.intro-path::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(180deg, rgba(255, 235, 200, 0.2) 0 14px, transparent 14px 46px);
  animation: pathRun 0.4s linear infinite;
}
.rut { position: absolute; inset: 0; background: rgba(70, 40, 15, 0.22); }
.rut.r1 { clip-path: polygon(47.8% 0, 49% 0, 40% 100%, 28% 100%); }
.rut.r2 { clip-path: polygon(51% 0, 52.2% 0, 72% 100%, 60% 100%); }
.pebble { position: absolute; width: 9px; height: 6px; border-radius: 50%; background: #7d5129; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.2); animation: pebbleRun 0.9s linear infinite; }
.pebble.p0 { left: 44%; animation-delay: 0s; }
.pebble.p1 { left: 56%; animation-delay: 0.25s; }
.pebble.p2 { left: 36%; animation-delay: 0.5s; width: 12px; height: 8px; }
.pebble.p3 { left: 64%; animation-delay: 0.7s; width: 11px; height: 7px; }
.pebble.p4 { left: 50%; animation-delay: 0.15s; }
.pebble.p5 { left: 28%; animation-delay: 0.4s; width: 14px; height: 9px; }
.pebble.p6 { left: 72%; animation-delay: 0.6s; width: 13px; height: 8px; }
.intro-owl { bottom: 12%; }
@keyframes pathRun { to { background-position: 0 46px; } }
@keyframes pebbleRun { from { top: 0; transform: scale(0.3); opacity: 0.4; } to { top: 100%; transform: scale(2.2); opacity: 1; } }
/* Terre plutôt que planches : bandes douces et petits cailloux */
.intro-path::after {
  background:
    radial-gradient(rgba(80, 48, 20, 0.4) 1.3px, transparent 1.9px) 0 0 / 23px 17px,
    radial-gradient(rgba(255, 230, 190, 0.28) 1.1px, transparent 1.7px) 9px 7px / 31px 21px,
    repeating-linear-gradient(180deg, rgba(255, 235, 200, 0.07) 0 22px, transparent 22px 64px);
  animation: dirtRun 0.4s linear infinite;
}
@keyframes dirtRun { to { background-position: 0 17px, 9px 28px, 0 64px; } }

/* ---------- Caméra : aperçu plein écran et rond blanc ---------- */
.photo-pick { display: grid; gap: 8px; justify-items: center; }
.camera { position: fixed; inset: 0; z-index: 9500; background: #000; display: grid; place-items: center; overflow: hidden; }
.cam-video, .cam-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cam-video.front { transform: scaleX(-1); }
.cam-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.cam-flash.go { animation: camFlash 0.35s ease-out; }
.cam-close {
  position: absolute; top: calc(env(safe-area-inset-top, 0px) + 14px); left: 14px;
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, 0.45); color: #fff; font: 700 1.2rem var(--font); cursor: pointer;
}
.cam-bar {
  position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 28px);
  display: flex; align-items: center; justify-content: space-around; padding: 0 24px;
}
.cam-spacer { width: 52px; }
.cam-shutter {
  width: 82px; height: 82px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 5px solid #fff; background: transparent; display: grid; place-items: center;
  transition: transform 0.12s;
}
.cam-shutter-dot { width: 62px; height: 62px; border-radius: 50%; background: #fff; transition: transform 0.12s; }
.cam-shutter:active .cam-shutter-dot { transform: scale(0.84); }
.cam-flip {
  width: 52px; height: 52px; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(0, 0, 0, 0.45); color: #fff; font-size: 1.6rem;
}
.cam-flip-icon { display: inline-block; line-height: 1; }
.cam-bar.review { gap: 16px; }
.cam-action {
  flex: 1; min-height: 54px; border: 0; border-radius: 27px; cursor: pointer;
  background: var(--glass); color: #25361f; font: 900 1.05rem var(--font);
}
.cam-action.primary { background: var(--green); color: #fff; }
@keyframes camFlash { from { opacity: 0.85; } to { opacity: 0; } }

/* ---------- Thème sombre ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #161b1e;
  --soft: #1d2428;
  --border: #2e393f;
  --text: #e8efe5;
  --muted: #9bad98;
  --page: #0b0e0f;
  --glass: rgba(22, 28, 31, 0.9);
  --gold-soft: #3a3210;
  --gold-text: #ffd96b;
  --green-soft: #1d3515;
  --green-text: #8be04e;
  --orange-soft: #3a2a10;
  --orange-text: #ffb85c;
  --red-soft: #3a1618;
  --red-text: #ff8d8d;
  --blue-soft: #123140;
  --purple-text: #c9a4ff;
}
/* La caméra reste identique dans les deux thèmes */
.cam-action { background: rgba(255, 255, 255, 0.92); }
:root[data-theme="dark"] .toast { background: #e8efe5; color: #161b1e; }
:root[data-theme="dark"] .btn.outline, :root[data-theme="dark"] .btn.danger { background: var(--bg); }
:root[data-theme="dark"] .quest-card, :root[data-theme="dark"] .sheet { color: var(--text); }
:root[data-theme="dark"] .photo-preview img, :root[data-theme="dark"] .post-photo { background: var(--soft); }
.theme-switch { display: flex; gap: 8px; margin-top: 12px; }
.theme-switch button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; }
.theme-switch button[aria-pressed="true"] { border-color: var(--green); background: var(--green-soft); color: var(--green-text); }
.theme-switch .icon-svg { width: 20px; height: 20px; }

/* ---------- Missions en onglets, cadeaux ---------- */
.mission-tabs { display: flex; gap: 6px; margin: 4px 0 8px; overflow-x: auto; scrollbar-width: none; }
.mission-tab { flex: 1 0 auto; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 12px; border: 2px solid var(--border); border-radius: 999px; background: var(--bg); color: var(--muted); font: 800 0.85rem var(--font); cursor: pointer; white-space: nowrap; }
.mission-tab[aria-selected="true"] { border-color: var(--green); background: var(--green-soft); color: var(--green-text); }
.mission-dot { min-width: 18px; padding: 1px 5px; border-radius: 999px; background: #e63946; color: #fff; font-size: 0.7rem; font-weight: 900; }
.mission-countdown { margin: 0 0 6px; text-align: center; font-weight: 800; color: var(--orange-text); font-variant-numeric: tabular-nums; }
.gift-amounts { display: flex; gap: 8px; justify-content: center; margin: 12px 0 4px; }
.gift-amount { flex: 1; padding: 12px 6px; }
.gift-amount[aria-pressed="true"] { border-color: var(--gold); background: var(--gold-soft); color: var(--gold-text); }
.gift-amount[aria-disabled="true"] { opacity: 0.45; }

.feed-scope { display: flex; gap: 8px; margin: 0 0 12px; }
.feed-scope .mission-tab { flex: 1; }

.reactions .gx { width: 1.4em; height: 1.4em; margin-right: 4px; }
.comment-toggle { margin-left: auto; }
.comments { margin-top: 10px; padding-top: 10px; border-top: 2px solid var(--border); display: grid; gap: 8px; }
.comment { display: flex; align-items: flex-start; gap: 8px; padding: 8px 10px; border-radius: 12px; background: var(--soft); }
.comment-who { margin: 0; font-weight: 800; font-size: 0.85rem; }
.comment-who .hint { font-weight: 600; }
.comment-body { margin: 2px 0 0; overflow-wrap: anywhere; }
.comment-del { border: 0; background: transparent; color: var(--muted); font-size: 1rem; cursor: pointer; padding: 2px 6px; }
.comment-form { display: flex; gap: 8px; }
.comment-form .text-input { flex: 1; min-width: 0; }
.gift-custom { display: block; margin-top: 14px; }
.gift-custom > span { display: block; margin-bottom: 6px; font-weight: 800; font-size: 0.85rem; color: var(--muted); }
.gift-input { flex: 1; min-width: 0; font-size: 1.1rem; font-weight: 800; }
.gift-amounts + .gift-custom { margin-top: 10px; }
.sheet .btn[aria-disabled="true"] { opacity: 0.6; }

/* Pseudo + logo de rang */
.who-line { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
.who-rank .rank-badge.xs { width: 20px; height: 23px; }
.comment-who .who-line { gap: 4px; }

/* ---------- Éditions limitées : décors et badge ---------- */
.world[data-scene="space"] {
  --m-far: #5a46aa; --m-far-s: #46358f; --m-mid: #382a78; --m-mid-s: #2a1f5e; --snow: #e6dcff; --snow-s: #b9a8f0;
  --castle: #1c1250; --river: #7b5cff; --plain: #3a2a80; --plain-d: #2a1c64; --plain-l: #5b44b8; --cloud: rgba(190, 160, 255, 0.22);
  background: linear-gradient(to bottom, #07041f 0, #2a1670 50%, #7a3fc0 68%);
}
.world[data-scene="moon"] {
  --m-far: #5b6174; --m-far-s: #484e60; --m-mid: #3b4052; --m-mid-s: #2d3242; --snow: #cfd5e2; --snow-s: #a7aec0;
  --castle: #20243a; --river: #4a5a8c; --plain: #a3a9b4; --plain-d: #838996; --plain-l: #c3c8d2; --cloud: rgba(180, 190, 220, 0.2);
  background: linear-gradient(to bottom, #02030a 0, #121730 55%, #3b4260 70%);
}
.world[data-scene="aurora"] {
  --m-far: #5aa0b8; --m-far-s: #468aa3; --m-mid: #2f6e88; --m-mid-s: #235a72; --snow: #ffffff; --snow-s: #cfe9f8;
  --castle: #1d4b60; --river: #4de3b8; --plain: #eaf5ff; --plain-d: #c9e1f3; --plain-l: #ffffff; --cloud: rgba(120, 255, 210, 0.22);
  background: linear-gradient(to bottom, #02101a 0, #0c5f55 42%, #2fc7a0 58%, #bfeedd 70%);
}
.world[data-scene="space"] .bird, .world[data-scene="moon"] .bird, .world[data-scene="aurora"] .bird { display: none; }
.world[data-scene="space"] .mote, .world[data-scene="moon"] .mote { background: #cfe0ff; box-shadow: 0 0 10px 3px rgba(160, 190, 255, 0.6); }
.world[data-scene="aurora"] .mote { background: #a8ffe0; box-shadow: 0 0 12px 4px rgba(120, 255, 210, 0.7); }
.item { position: relative; }
.limited-badge {
  position: absolute; right: 6px; bottom: 6px; padding: 2px 7px; border-radius: 999px;
  background: linear-gradient(135deg, #ffd23f, #ff8a00); color: #3a2000;
  font: 900 0.58rem var(--font); letter-spacing: 0.06em; text-transform: uppercase;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}
.item.limited { padding-bottom: 30px; }

/* ---------- Panneau admin ---------- */
.admin-hero { border-color: var(--gold); }
.admin-on { margin: 4px 0; font-weight: 900; color: var(--green-text); }
.admin-amount { max-width: 110px; }
.admin-chip { margin-left: 6px; font-size: 0.65rem; padding: 1px 7px; }
.btn.small.danger { color: var(--red-text); }

.link-btn { border: 0; background: transparent; padding: 0; color: inherit; font: inherit; font-weight: 900; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.mv-plus { color: var(--green-text); white-space: nowrap; }
.mv-minus { color: var(--red-text); white-space: nowrap; }

/* ---------- Admin : modération, stats, programmation ---------- */
.ban-durations { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 12px 0; }
.ban-durations .btn[aria-pressed="true"], .limited-chips .btn[aria-pressed="true"], .report-reasons .btn[aria-pressed="true"] {
  border-color: var(--green); background: var(--green-soft); color: var(--green-text);
}
.ban-durations + .text-input { margin-bottom: 4px; }
.limited-group { margin-top: 10px; }
.limited-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.report { padding: 12px 0; border-top: 2px solid var(--border); }
.card h2 + .report { border-top: 0; }
.report-reasons { display: grid; gap: 8px; margin: 12px 0; }
.bars { display: flex; align-items: flex-end; gap: 4px; height: 130px; margin-top: 10px; }
.bar-col { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 2px; }
.bar { display: block; width: 100%; border-radius: 6px 6px 0 0; }
.bar-n { font-size: 0.65rem; font-weight: 800; color: var(--muted); }
.bar-day { font-size: 0.6rem; font-weight: 700; color: var(--muted); }
.schedule-form { flex-wrap: wrap; }
.schedule-form input[type="datetime-local"] { flex: 1 1 100%; }
.schedule-form select { flex: 1; }

/* ---------- Piano relaxant ---------- */
.piano { position: relative; margin: 14px 0 6px; padding: 14px 10px 10px; border-radius: 20px; text-align: center;
  background: linear-gradient(180deg, #1d1b4b, #2d2468 60%, #3b2a78); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.08); overflow: hidden; }
.piano-glow { position: absolute; inset: -30% -10% auto; height: 70%; background: radial-gradient(ellipse at 50% 0, rgba(140, 120, 255, 0.45), transparent 70%); pointer-events: none; animation: pianoGlow 7s ease-in-out infinite alternate; }
.piano-board { position: relative; display: flex; height: 168px; touch-action: none; user-select: none; -webkit-user-select: none; }
.piano-key { border: 0; padding: 0; cursor: pointer; font: inherit; touch-action: none; transition: background 0.12s, transform 0.12s, box-shadow 0.25s; }
.piano-key.white {
  flex: 1; min-width: 0; height: 100%; margin: 0 1px; border-radius: 0 0 9px 9px;
  background: linear-gradient(180deg, #f6f3ff, #ffffff 40%, #e9e4fa); box-shadow: 0 4px 0 #b9b0e0;
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px;
}
.piano-key.black {
  position: absolute; top: 0; width: 8.4%; height: 62%; transform: translateX(-50%); z-index: 2; border-radius: 0 0 7px 7px;
  background: linear-gradient(180deg, #2a2347, #0f0c24); box-shadow: 0 3px 0 #05030f;
}
.piano-label { font-size: 0.62rem; font-weight: 800; color: #8d82c4; pointer-events: none; }
.piano-key.black .piano-label { display: none; }
.piano-key.white.down { background: linear-gradient(180deg, #cfc4ff, #b9a8ff); transform: translateY(3px); box-shadow: 0 1px 0 #8f7de6, 0 0 22px 4px rgba(160, 140, 255, 0.75); }
.piano-key.black.down { background: linear-gradient(180deg, #6a52d9, #3b2a9c); transform: translateX(-50%) translateY(2px); box-shadow: 0 1px 0 #1d1470, 0 0 18px 4px rgba(150, 130, 255, 0.8); }
.piano-count { margin: 12px 0 0; color: #d9d2ff; font-size: 0.85rem; font-weight: 700; min-height: 1.3rem; }
.piano-actions { justify-content: center; }
.piano .btn.outline { background: rgba(255, 255, 255, 0.1); color: #fff; border-color: rgba(255, 255, 255, 0.3); box-shadow: none; }
.piano .btn.outline[aria-pressed="true"] { background: rgba(160, 140, 255, 0.4); border-color: #b9a8ff; }
@keyframes pianoGlow { from { opacity: 0.55; transform: translateX(-4%); } to { opacity: 1; transform: translateX(4%); } }

/* ---------- Tirage : le texte des rouleaux reste foncé (les rouleaux sont toujours blancs) ---------- */
.reel-cell { color: #25361f; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); }

/* ---------- Écran de chargement : décor, hibou qui court vers nous, barre jusqu'à 100 % ---------- */
.loader { position: fixed; inset: 0; z-index: 10000; overflow: hidden; background: radial-gradient(circle at 50% 50%, #1d3b25, #08140c); }
.ld-frame { position: absolute; inset: 0; overflow: hidden; background: #ff9a6b; }
@media (orientation: landscape) {
  .ld-frame { inset: auto; left: 50%; top: 50%; width: calc(100vh * 9 / 16); height: 100vh; transform: translate(-50%, -50%); }
}
.ld-scene { position: absolute; inset: 0; transform-origin: 62% 56%; animation: ldPush 6s ease-in-out forwards; }
.ld-svg { display: block; width: 100%; height: 100%; }
.ld-cloud { animation: ldDrift 16s ease-in-out infinite alternate; }
.ld-cloud.b { animation-duration: 20s; animation-direction: alternate-reverse; }
.ld-cloud.c { animation-duration: 24s; }
.ld-sway { transform-box: fill-box; transform-origin: 50% 100%; animation: ldSway 5s ease-in-out infinite alternate; }
.ld-sway.slow { animation-duration: 8s; }

.ld-owl { position: absolute; left: 50%; bottom: 21%; width: 46%; max-width: 230px; aspect-ratio: 200 / 220; transform: translateX(-50%); transform-origin: 50% 100%; animation: ldForward 6s ease-out forwards; }
.ld-runner { width: 100%; height: 100%; transform-origin: 50% 90%; animation: runBob 0.3s ease-in-out infinite alternate; }
.ld-runner .char { width: 100%; height: 100%; }
.ld-owl .dust { left: 2%; bottom: 8%; }

.ld-stone { position: absolute; left: 50%; top: 66%; width: 10px; height: 6px; border-radius: 50%; background: #b27a3a; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.18); opacity: 0; animation: ldStone 1.2s linear infinite; }
.ld-stone.s0 { --dx: -34px; animation-delay: 0s; } .ld-stone.s1 { --dx: 26px; animation-delay: 0.2s; } .ld-stone.s2 { --dx: -90px; animation-delay: 0.4s; }
.ld-stone.s3 { --dx: 80px; animation-delay: 0.6s; } .ld-stone.s4 { --dx: -12px; animation-delay: 0.8s; } .ld-stone.s5 { --dx: 56px; animation-delay: 1s; }

.ld-ui { position: absolute; left: 0; right: 0; bottom: 5%; display: grid; justify-items: center; gap: 4px; padding: 0 10%; }
.ld-bar { width: 100%; }
.ld-track { height: 30px; padding: 4px; border: 3px solid #fff; border-radius: 999px; background: linear-gradient(#3a2780, #4b3699); box-shadow: 0 4px 0 rgba(30, 10, 70, 0.35), inset 0 3px 6px rgba(0, 0, 0, 0.4); overflow: hidden; }
.ld-fill {
  height: 100%; width: 0; border-radius: 999px;
  background:
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.42) 0 9px, rgba(255, 255, 255, 0) 9px 18px),
    linear-gradient(#ffe970, #ffc400 60%, #f0a800);
  background-size: 26px 26px, 100% 100%;
  box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.55);
  animation: ldStripes 0.7s linear infinite;
}
.ld-percent-row { display: flex; align-items: center; gap: 14px; }
.ld-percent {
  margin: 0; min-width: 4.4ch; text-align: center; color: #fff;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", "Arial Black", sans-serif; font-size: 2.6rem; letter-spacing: 0.04em; font-variant-numeric: tabular-nums;
  text-shadow: -2px -2px 0 #2a1360, 2px -2px 0 #2a1360, -2px 2px 0 #2a1360, 2px 2px 0 #2a1360, 0 3px 0 #2a1360, 0 6px 8px rgba(0, 0, 0, 0.4);
}
.tick { position: relative; width: 22px; height: 30px; }
.tick::before, .tick::after { content: ''; position: absolute; left: 4px; width: 16px; height: 5px; border-radius: 3px; background: #ffd23f; box-shadow: 0 0 0 1px rgba(42, 19, 96, 0.35); }
.tick.l::before { top: 6px; transform: rotate(35deg); } .tick.l::after { top: 20px; transform: rotate(-35deg); }
.tick.r::before { top: 6px; transform: rotate(-35deg); } .tick.r::after { top: 20px; transform: rotate(35deg); }

.ld-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.loader.done { animation: ldFade 0.7s linear forwards; }
.loader.done .ld-flash { animation: ldFlash 0.7s ease-out forwards; }
.loader.calm .ld-scene, .loader.calm .ld-owl { animation: none; }
.loader.calm .ld-runner, .loader.calm .ld-stone, .loader.calm .ld-sway, .loader.calm .ld-cloud { animation: none; }

@keyframes ldPush { from { transform: scale(1); } to { transform: scale(1.12); } }
@keyframes ldForward { from { transform: translateX(-50%) translateY(-26px) scale(0.78); } to { transform: translateX(-50%) translateY(0) scale(1); } }
@keyframes ldDrift { from { transform: translateX(-12px); } to { transform: translateX(14px); } }
@keyframes ldSway { from { transform: rotate(-0.8deg); } to { transform: rotate(0.8deg); } }
@keyframes ldStripes { to { background-position: 26px 0, 0 0; } }
@keyframes ldStone { 0% { opacity: 0; transform: translate(0, 0) scale(0.3); } 15% { opacity: 1; } 100% { opacity: 1; transform: translate(var(--dx), 190px) scale(2.6); } }
@keyframes ldFlash { 0% { opacity: 0; } 30%, 100% { opacity: 1; } }
@keyframes ldFade { 0%, 40% { opacity: 1; } 100% { opacity: 0; } }

/* --------------------------------------------------------------------------
   Portrait uniquement : sur un téléphone tenu à l'horizontale, on demande de tourner l'écran
   -------------------------------------------------------------------------- */
.rotate-note { display: none; }
@media (orientation: landscape) and (max-height: 520px) and (pointer: coarse) {
  .rotate-note {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    padding: 24px; text-align: center;
    background: var(--header-top); color: #fff;
    font: 800 1.25rem var(--font);
  }
  .rotate-note p::before { content: "↻"; display: block; margin-bottom: 8px; font-size: 2.6rem; }
}

/* La barre d'état de l'iPhone est transparente : l'appli passe dessous. Un léger voile sombre garde l'heure lisible. */
body::before {
  content: "";
  position: fixed; top: 0; left: 0; right: 0; z-index: 9990;
  height: env(safe-area-inset-top, 0px);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
  pointer-events: none;
}

/* Sur téléphone, derrière l'appli il n'y a que l'appli : jamais une autre couleur qui dépasse en bas. */
@media (max-width: 480px) {
  body { background: var(--bg); }
}