/* SORCIERS — une Académie de nuit, éclairée à la bougie.
   Monde volontairement sombre (un seul thème) : le texte à lire vit toujours sur parchemin clair. */
:root {
  color-scheme: dark;
  --night: #140F29;
  --night-2: #1E1740;
  --dusk: #2C2257;
  --stone: #3A3160;
  --stone-hi: #4D4380;
  --gold: #F5BC45;
  --gold-soft: #FFE3A1;
  --parch: #F6EACB;
  --parch-2: #E9D5A6;
  --parch-edge: #C9A868;
  --ink: #2A1B10;
  --ghost-ink: #B5A88E;
  --potion: #5CD6A0;
  --ember: #E3694B;
  --mist: #BDB3E6;
  --syl-a: #1F4FB5;
  --syl-b: #C23A2B;
  --display: 'Grenze Gotisch', 'UnifrakturCook', Georgia, serif;
  --read: 'Andika', 'Comic Sans MS', 'Trebuchet MS', system-ui, sans-serif;
  --emoji: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
  --u: min(1vw, 1vh * 1.35, 9px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; overflow: hidden; background: var(--night); color: var(--parch); font-family: var(--read); }
body { overscroll-behavior: none; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; touch-action: manipulation; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
svg { display: block; }
[hidden] { display: none !important; }

#app { position: fixed; inset: 0; }
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden;
  padding: env(safe-area-inset-top, 0px) max(16px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(16px, env(safe-area-inset-left, 0px)); }

/* ---------- Ciel ---------- */
.sky { position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(1.5px 1.5px at 12% 18%, #fff9 50%, transparent 51%),
    radial-gradient(1px 1px at 28% 8%, #fff8 50%, transparent 51%),
    radial-gradient(2px 2px at 44% 26%, #fffb 50%, transparent 51%),
    radial-gradient(1px 1px at 61% 12%, #fff7 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 77% 30%, #fffa 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 9%, #fff8 50%, transparent 51%),
    radial-gradient(1px 1px at 6% 40%, #fff6 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 94% 44%, #fff8 50%, transparent 51%),
    radial-gradient(ellipse at 50% 120%, #4B2E7A 0%, transparent 60%),
    linear-gradient(#0C0920, #1C1540 55%, #2B1E55);
}
.sky.dim { opacity: .7; }
.moon { position: absolute; top: 9%; right: 14%; width: calc(var(--u) * 11); height: calc(var(--u) * 11); border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #FFF6D8, #F1D98E 60%, #C9A64E);
  box-shadow: 0 0 60px 10px #F5BC4533; }
.moon::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset -12px -6px 0 #0000001a; }

/* ---------- Titre ---------- */
#title { justify-content: center; align-items: center; }
.castle { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 48%; }
.castle .windows rect { animation: flicker 3.4s infinite alternate; }
.castle .windows rect:nth-child(2n) { animation-delay: -1.3s; }
.title-block { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 2); margin-bottom: 18vh; }
h1 { font-family: var(--display); font-weight: 900; font-size: clamp(64px, calc(var(--u) * 18), 170px); line-height: .9; margin: 0;
  color: var(--gold); letter-spacing: .02em;
  text-shadow: 0 2px 0 #7A4B12, 0 0 40px #F5BC4566, 0 8px 30px #000a; }
/* Le nom du jeu : « lumilire » en Andika, une traînée dorée l'allume de gauche à droite (le geste du doigt) */
.wordmark { position: relative; font-family: var(--read); font-weight: 700; text-transform: none; letter-spacing: 0; color: #6E648F;
  font-size: clamp(60px, calc(var(--u) * 15), 150px); line-height: 1; padding-bottom: .28em; text-shadow: none; touch-action: none; user-select: none; -webkit-user-select: none; }
.wordmark .wm-word { display: inline-flex; }
.wordmark .wm-word i { font-style: normal; transition: color .3s, text-shadow .3s; }
.wordmark .wm-word i.lit { color: var(--gold-soft); text-shadow: 0 0 .25em #F5BC45AA, 0 4px 18px #000a; }
.wordmark .wm-trail { position: absolute; left: 0; bottom: .1em; height: .07em; min-height: 5px; width: 0; border-radius: 99px;
  background: linear-gradient(90deg, #F5BC4533, var(--gold)); box-shadow: 0 0 18px #F5BC45CC; }
.wordmark .wm-plume { position: absolute; bottom: -.12em; width: .62em; margin-left: -.31em; opacity: 0; pointer-events: none; }
.wordmark .wm-plume svg { width: 100%; height: auto; display: block; }
.tagline { margin: 0; font-size: clamp(16px, calc(var(--u) * 2.6), 26px); color: var(--mist); letter-spacing: .04em; }
.btn-play { width: clamp(96px, calc(var(--u) * 16), 150px); aspect-ratio: 1; border-radius: 50%; color: #3A2208;
  background: radial-gradient(circle at 40% 35%, #FFE9AE, var(--gold) 55%, #C98A1C);
  box-shadow: 0 0 0 6px #F5BC4533, 0 0 50px 8px #F5BC4566, inset 0 -6px 0 #0003;
  display: grid; place-items: center; animation: breathe 2.2s ease-in-out infinite; }
.btn-play svg { width: 48%; margin-left: 8%; }
.no-voice { max-width: 34em; background: #0009; border: 1px solid var(--ember); color: var(--parch); padding: 10px 14px; border-radius: 10px; font-size: 15px; }
.parents-link { position: absolute; right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(12px + env(safe-area-inset-bottom, 0px)); font-size: 14px; color: var(--mist);
  padding: 8px 14px; border-radius: 999px; background: #0006; border: 1px solid #ffffff22; opacity: .75; }
.parents-link small { opacity: .6; }
.privacy-link { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); font-size: 12px; color: var(--mist); opacity: .45; text-decoration: none; }
.parents-link.holding { background: linear-gradient(#F5BC4588, #F5BC4588) no-repeat, #0006; background-size: 0 100%; animation: holdfill 1.6s linear forwards; }

/* ---------- Choix du sorcier ---------- */
.screen-title { font-family: var(--display); color: var(--gold); font-size: clamp(40px, calc(var(--u) * 8), 72px); text-align: center; margin: 5vh 0 3vh; font-weight: 700; }
#pick-list { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; align-content: flex-start; overflow-y: auto; padding-block: 10px 80px; }
.pick-card { width: clamp(140px, 22vw, 200px); display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 10px;
  border-radius: 22px; background: linear-gradient(#ffffff10, #ffffff05); border: 2px solid #ffffff1a; }
.pick-card:active { transform: scale(.97); }
.pick-card .avatar-svg { width: 100%; height: auto; }
.pname { font-size: 20px; font-weight: 700; min-height: 1.3em; }
.pstars { display: flex; align-items: center; gap: 4px; color: var(--gold); font-weight: 700; }
.pstars svg { width: 20px; }
.pick-card.add { justify-content: center; min-height: 220px; border-style: dashed; }
.plus-ic svg { width: 64px; color: var(--gold); }

/* ---------- Création ---------- */
.create-layout { flex: 1; display: flex; gap: 3vw; align-items: center; justify-content: center; min-height: 0; padding-block: 16px; }
.create-left { display: flex; flex-direction: column; align-items: center; gap: 16px; flex: 0 0 auto; }
#create-preview { width: clamp(150px, 30vmin, 300px); }
#create-preview .avatar-svg { width: 100%; height: auto; filter: drop-shadow(0 0 24px #F5BC4533); animation: bob 3s ease-in-out infinite; }
.create-actions { display: flex; gap: 20px; }
.create-right { display: flex; flex-direction: column; gap: 10px; max-height: 100%; overflow-y: auto; padding: 6px; min-width: 0; }
/* Garde-robe : le sorcier est le menu (une bulle par partie) ; le tiroir garde toujours la même taille */
.ward-wiz { position: relative; }
#ward-spots { position: absolute; inset: 0; pointer-events: none; }
.ward-spot { position: absolute; pointer-events: auto; width: clamp(44px, 7.5vmin, 66px); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; display: grid; place-items: center; color: var(--parch); z-index: 3;
  background: #2C2257e6; border: 3px solid var(--gold); box-shadow: 0 0 0 3px #1D142699, 0 0 18px #F5BC4588; animation: spotPulse 2.4s ease-in-out infinite; transition: transform .2s, background .2s; }
.ward-spot svg { width: 58%; }
.ward-spot.on { background: var(--parch); color: #6B3A12; transform: translate(-50%, -50%) scale(1.18); animation: none; }
.new-star, .wslot.new::before { position: absolute; top: -10%; right: -10%; width: 42%; aspect-ratio: 1; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1 L14.6 9.4 L23 12 L14.6 14.6 L12 23 L9.4 14.6 L1 12 L9.4 9.4Z' fill='%23FFE08A' stroke='%231D1426' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat; animation: newStar 1.4s ease-in-out infinite; z-index: 2; }
.ward-drawer { --cell: clamp(48px, min(8vw, 10.5vh), 84px); --gap: 8px; flex: 0 0 auto; display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 24px;
  width: calc(5 * var(--cell) + 4 * var(--gap) + 34px); background: linear-gradient(#2E2560, #221A49); border: 3px solid #1D1426; box-shadow: inset 0 0 0 3px #ffffff14, 0 12px 30px #0007; }
.wd-head { display: flex; align-items: center; gap: 10px; height: 44px; }
.wd-ic { width: 44px; height: 44px; border-radius: 12px; background: var(--parch); color: #6B3A12; display: grid; place-items: center; }
.wd-ic svg { width: 70%; }
.wd-count { font-weight: 700; font-size: 20px; color: var(--gold-soft); font-variant-numeric: tabular-nums; }
.wd-chips { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); height: calc(var(--cell) * .85); }
.wd-chip { border-radius: 14px; background: #ffffff10; border: 3px solid transparent; display: grid; place-items: center; overflow: hidden; }
.wd-chip.on { background: var(--parch); border-color: var(--gold); }
.wd-chip.blank { visibility: hidden; }
.wd-chip .sw { width: 50%; height: auto; aspect-ratio: 1; }
.wd-chip .mini { width: 80%; height: 80%; }
.wd-chip .ex { width: 50%; height: auto; }
/* Dix cases fixes ; gagné, porté (on), mystère (silhouette ou cadeau), nouveau (étoile), vide */
.wslots { display: grid; grid-template-columns: repeat(5, var(--cell)); grid-template-rows: repeat(2, var(--cell)); gap: var(--gap); }
.wslot { position: relative; border-radius: 14px; background: #ffffff12; border: 3px solid #ffffff14; display: grid; place-items: center; }
.wslot > span { overflow: hidden; border-radius: 10px; }
.wslot.on { border-color: var(--gold); background: #F5BC452e; box-shadow: 0 0 12px #F5BC4555; }
.wslot.mystery { background: #00000040; border: 3px dashed #BDB3E640; }
.wslot.blank-slot { background: transparent; border-color: #ffffff08; }
.wslot.blank-slot::after { content: ''; width: 18%; aspect-ratio: 1; border-radius: 50%; background: #ffffff10; }
.wslot.new::before { content: ''; top: -8%; right: -8%; width: 34%; }
.wslot.arrive { animation: slotArrive .7s cubic-bezier(.3, 1.6, .5, 1); border-color: var(--gold); }
.wslot.kept { animation: slotKept 1.2s ease-in-out 2; }
.wslot.waiting { border: 3px solid var(--gold); animation: slotWait 1.2s ease-in-out infinite; }
.wslot.shake { animation: shake .4s; }
.wslot .sw { width: 62%; height: auto; aspect-ratio: 1; }
.wslot .ex { width: 50%; height: auto; }
.wslot .avatar-svg, .ct-hold .avatar-svg { overflow: hidden; }
.sil { width: 90%; height: 90%; display: grid; place-items: center; filter: brightness(0); opacity: .5; }
.sil .mini { width: 100%; height: 100%; }
.gift { width: 66%; display: block; }
.gift svg { width: 100%; }
@keyframes spotPulse { 50% { box-shadow: 0 0 0 3px #1D142699, 0 0 34px #F5BC45cc; } }
@keyframes newStar { 50% { transform: scale(.7) rotate(20deg); opacity: .7; } }
@keyframes slotArrive { 0% { transform: scale(1.5); box-shadow: 0 0 40px #FFE08A; } }
@keyframes slotKept { 50% { box-shadow: 0 0 0 4px #7CE0FF, 0 0 24px #7CE0FF; } }
@keyframes slotWait { 50% { box-shadow: 0 0 0 4px #F5BC4588, 0 0 24px #F5BC45; } }
.sw { width: 38px; height: 38px; border-radius: 50%; box-shadow: inset 0 -4px 0 #0003, 0 0 0 2px #fff3; }
.sw.starry { background-image: radial-gradient(circle, #F5C451 18%, transparent 20%) !important; background-size: 12px 12px !important; }
.mini { width: 88%; height: 88%; display: block; }
.mini svg { width: 100%; height: 100%; overflow: hidden; }
.mini.pet svg, .mini.wand svg { overflow: visible; }
.hud-avatar .avatar-svg, .par-av .avatar-svg, .treasure .avatar-svg { overflow: hidden; }
#create-preview .wiz { width: 100%; height: auto; overflow: visible; display: block; }
.sw.aura { background: radial-gradient(circle, #fff 0 18%, var(--c) 40%, transparent 72%); box-shadow: none; }
.sw.aura.rainbow { background: conic-gradient(#FF7BD5, #FFD66B, #9BE36A, #7CE0FF, #B58CE6, #FF7BD5); box-shadow: 0 0 12px #fff6; }
.ex { width: 38px; height: 38px; display: block; color: var(--mist); }
.cost { position: absolute; bottom: -6px; right: -6px; display: flex; align-items: center; gap: 1px; background: var(--night); color: var(--gold); border-radius: 999px; padding: 1px 6px 1px 4px; font-size: 12px; font-weight: 700; border: 1px solid #F5BC4566; }
.cost svg { width: 12px; }
.name-row { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--mist); }
.name-row input { font: inherit; font-size: 20px; padding: 10px 12px; border-radius: 12px; border: 2px solid #ffffff22; background: #0005; color: var(--parch); max-width: 320px; user-select: text; -webkit-user-select: text; }
.text-btn { color: var(--mist); text-decoration: underline; text-underline-offset: 4px; font-size: 15px; align-self: flex-start; padding: 6px 0; }
.round-btn { width: 78px; height: 78px; border-radius: 50%; display: grid; place-items: center; color: var(--parch);
  background: radial-gradient(circle at 40% 35%, var(--stone-hi), var(--stone)); box-shadow: inset 0 -5px 0 #0004, 0 4px 14px #0006; }
.round-btn svg { width: 55%; }
.round-btn.ok { color: #13351F; background: radial-gradient(circle at 40% 35%, #A6F2C9, var(--potion)); box-shadow: inset 0 -5px 0 #0003, 0 0 30px #5CD6A066; animation: breathe 2.4s ease-in-out infinite; }
.round-btn.small { width: 56px; height: 56px; }
.round-btn.gold { color: #3A2208; background: radial-gradient(circle at 40% 35%, #FFE9AE, var(--gold)); }
.round-btn:active, .btn-play:active { transform: scale(.94); }

@media (max-width: 700px), (max-aspect-ratio: 1/1) {
  .create-layout { flex-direction: column; justify-content: flex-start; }
  #create-preview { width: clamp(120px, 26vh, 220px); }
  .create-right { width: 100%; align-items: center; }
  .ward-drawer { --cell: clamp(44px, min(15vw, 9vh), 72px); }
}

/* ---------- Carte ---------- */
#map { padding-left: 0; padding-right: 0; }
.hud { position: absolute; top: env(safe-area-inset-top, 0px); left: 0; right: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px max(16px, env(safe-area-inset-right, 0px)) 18px max(16px, env(safe-area-inset-left, 0px)); background: linear-gradient(#140F29, #140F29cc 60%, transparent); pointer-events: none; }
.hud > * { pointer-events: auto; }
.hud-avatar { width: 66px; height: 66px; border-radius: 50%; overflow: hidden; background: var(--dusk); border: 3px solid var(--gold); }
.hud-avatar .avatar-svg { width: 100%; height: 100%; }
.hud-xp { flex: 1; max-width: 360px; }
.hud-book { width: 66px; height: 66px; border-radius: 18px; color: #7A2E3A; background: linear-gradient(#F6EACB, #D9BD83); display: grid; place-items: center; box-shadow: inset 0 -4px 0 #0003; }
.hud-book svg { width: 70%; color: #7A2E3A; }
#map-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
  background: radial-gradient(ellipse at 50% 0%, #2A1F55 0%, transparent 70%), linear-gradient(#0C0920, #140F29); }
#tower { display: flex; flex-direction: column-reverse; align-items: center; padding: 100px 0 240px; width: min(100%, 520px); margin: 0 auto; }
.floor { position: relative; width: 100%;
  background:
    repeating-linear-gradient(0deg, transparent 0 38px, #00000022 38px 40px),
    linear-gradient(90deg, hsl(var(--hue) 30% 10%) 0, hsl(var(--hue) 34% 18%) 12%, hsl(var(--hue) 34% 20%) 50%, hsl(var(--hue) 34% 18%) 88%, hsl(var(--hue) 30% 10%) 100%);
  border-top: 6px solid hsl(var(--hue) 25% 8%); }
.floor::before { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 55%, hsl(var(--hue) 70% 60% / .10), transparent 65%); }
.floor.restored::before { background: radial-gradient(ellipse at 50% 55%, #F5BC4526, transparent 70%); }
.floor.locked { filter: grayscale(.75) brightness(.55); }
.floor.locked::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(#0C092000, #0C0920aa 60%, #0C0920); }
.floor-windows { position: absolute; inset: 0; pointer-events: none; }
/* Une fenêtre par halte (S.floorWindows) : éteinte tant que la halte n'est pas finie, dorée ensuite (Lumilire, N4) */
.fw { position: absolute; width: 14px; height: 26px; border-radius: 7px 7px 3px 3px; transform: translate(-50%, -50%);
  background: #0C0920; box-shadow: inset 0 0 0 2px #00000055; }
.fw.lit { background: radial-gradient(circle at 50% 40%, #FFE9AE, #F5BC45 70%); box-shadow: 0 0 14px 3px #F5BC4577; }
.floor.restored .fw.lit { box-shadow: 0 0 20px 6px #F5BC45AA; }
.path { position: absolute; inset: 0; }
.path path { fill: none; stroke: #F5BC45; stroke-opacity: .35; stroke-width: 6; stroke-dasharray: 2 14; stroke-linecap: round; }
.floor.restored .path path { stroke-opacity: .6; }
.floor-title { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); text-align: center; white-space: nowrap; z-index: 1;
  padding: 6px 22px 8px; border-radius: 12px; background: linear-gradient(#2A1A40ee, #1A1030ee); border: 1px solid #F5BC4544; }
.floor-title small { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--mist); }
.floor-title small b { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; font-family: var(--read); font-size: 17px; letter-spacing: 0; color: #3A2208; background: radial-gradient(circle at 40% 35%, #FFE9AE, var(--gold)); }
.floor-title span { font-family: var(--display); font-size: 26px; color: var(--gold); font-weight: 700; }
.node { position: absolute; transform: translate(-50%, -50%); width: 74px; height: 74px; border-radius: 50%; z-index: 2;
  display: grid; place-items: center; color: var(--mist);
  background: radial-gradient(circle at 40% 30%, var(--stone-hi), var(--stone) 70%); box-shadow: inset 0 -6px 0 #0005, 0 6px 14px #0008; border: 3px solid #ffffff22; }
.node svg { width: 52%; }
.node .glyph { font-family: var(--read); font-weight: 700; font-size: 38px; line-height: 1; margin-top: -4px; }
.node.done { color: #4A2A06; background: radial-gradient(circle at 40% 30%, #FFE9AE, var(--gold) 65%, #B77C16); border-color: #FFE3A1; }
.node.locked { opacity: .55; }
.node.current { width: 96px; height: 96px; color: #3A2208; background: radial-gradient(circle at 40% 30%, #FFF4D2, var(--gold) 60%, #C98A1C); border-color: #fff;
  animation: glow 1.6s ease-in-out infinite; z-index: 3; }
.node.current .glyph { font-size: 50px; }
.node.popin { animation: popin .8s cubic-bezier(.3, 1.6, .5, 1) .3s both, glow 1.6s ease-in-out 1.1s infinite; }
.nstars { position: absolute; bottom: -16px; display: flex; gap: 1px; }
.nstars i { display: block; width: 22px; color: #0008; }
.nstars i.on { color: var(--gold); filter: drop-shadow(0 0 3px #000); }
.plume-perch { position: absolute; width: 60px; z-index: 3; animation: bob 2.4s ease-in-out infinite; pointer-events: none; }
.map-play { position: absolute; left: 0; right: 0; margin: 0 auto; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); z-index: 6; width: 112px; }
.map-play .play-label { display: grid; place-items: center; width: 100%; height: 100%; }
.map-play .play-label svg { width: 46%; margin: 0; }
.map-play .play-label .glyph { font-family: var(--read); font-weight: 700; font-size: 52px; color: #3A2208; margin-top: -6px; }
.map-play::after { content: ''; position: absolute; right: -2px; bottom: 4px; width: 38px; height: 38px; border-radius: 50%;
  background: var(--potion) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M18,12 L36,24 L18,36Z' fill='%2313351F'/%3E%3C/svg%3E") center/70% no-repeat;
  box-shadow: 0 0 0 3px var(--night); }

/* ---------- Quête ---------- */
.quest-bar { display: flex; align-items: center; gap: 12px; padding-block: 12px 4px; z-index: 3; }
/* Atelier : la lettre de la quête, en grand, qui se trace en or (voir js/pocket.js) */
.forge { flex: 1; display: flex; justify-content: center; min-width: 0; pointer-events: none; }
.intro-mode .forge { visibility: hidden; }
.stage { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3vh;
  animation: enter .4s ease-out; padding-bottom: 12px; }
.stage.leaving { opacity: 0; transform: translateY(-10px); transition: opacity .3s, transform .3s; }
.guide { position: absolute; right: max(10px, env(safe-area-inset-right, 0px)); bottom: calc(10px + env(safe-area-inset-bottom, 0px)); width: clamp(56px, 9vmin, 96px); z-index: 2; pointer-events: none; }
.speaking .guide .plume-svg { animation: talk .28s ease-in-out infinite alternate; }
.k-story ~ .guide { display: none; }
.overlay { position: absolute; inset: 0; z-index: 10; background: #0A0718cc; display: grid; place-items: center; }
.overlay-box { display: flex; gap: 40px; padding: 30px; border-radius: 28px; background: var(--night-2); border: 2px solid #ffffff22; }
.overlay-box .round-btn { width: 96px; height: 96px; }

/* Pierres runiques */
.stone { width: clamp(84px, calc(var(--u) * 14), 132px); aspect-ratio: 1; border-radius: 26%; display: grid; place-items: center;
  font-family: var(--read); font-weight: 700; font-size: clamp(46px, calc(var(--u) * 8.5), 80px); line-height: 1; color: #E9E1FF;
  background: radial-gradient(circle at 35% 25%, #5B5190, #332A5C 70%); box-shadow: inset 0 -7px 0 #0005, inset 0 2px 0 #ffffff22, 0 8px 18px #0007;
  border: 3px solid #ffffff18; transition: transform .15s, opacity .3s; padding-bottom: .12em; }
.stone:active { transform: scale(.94); }
.stone.big { width: clamp(100px, calc(var(--u) * 18), 170px); font-size: clamp(56px, calc(var(--u) * 11), 104px); }
.stone.lit, .stone.right { color: #3A2208; background: radial-gradient(circle at 35% 25%, #FFF4D2, var(--gold) 70%); border-color: #fff; box-shadow: 0 0 30px 6px #F5BC4588, inset 0 -6px 0 #0003; }
.choices { display: flex; gap: clamp(14px, 3vw, 36px); justify-content: center; flex-wrap: wrap; }
.dim { opacity: .3; pointer-events: none; }
.reveal { animation: reveal 1s ease-in-out infinite; }
.shake { animation: shake .45s; }
.hint { animation: reveal 1s ease-in-out infinite; }
.hear { display: flex; flex-direction: column; align-items: center; gap: 4vh; }
.ear { width: clamp(80px, calc(var(--u) * 13), 120px); aspect-ratio: 1; border-radius: 50%; color: #3A2208; display: grid; place-items: center;
  background: radial-gradient(circle at 40% 35%, #FFE9AE, var(--gold)); box-shadow: 0 0 30px #F5BC4555, inset 0 -5px 0 #0003; }
.ear svg { width: 56%; }
.ear:active { transform: scale(.94); }

/* Graphèmes, syllabes, mots */
.gr.duo { display: inline-block; border-bottom: .07em solid currentColor; border-radius: 0 0 .45em .45em; padding: 0 .02em .03em; line-height: 1; }
.muet { color: var(--ghost-ink); }
.stone .muet { color: #8C82B5; }
.card-syl, .pic-card, .tile, .parchment, .recipe, .order-banner {
  background: linear-gradient(170deg, var(--parch), var(--parch-2)); color: var(--ink); box-shadow: inset 0 -6px 0 #0000001f, 0 8px 20px #0008; }
.card-syl { min-width: clamp(120px, calc(var(--u) * 20), 200px); padding: .15em .35em .3em; border-radius: 22px; font-family: var(--read); font-weight: 700;
  font-size: clamp(48px, calc(var(--u) * 9), 88px); line-height: 1.1; border: 4px solid transparent; transition: transform .15s, opacity .3s; }
.card-syl:active, .pic-card:active, .tile:active, .jar:active { transform: scale(.95); }
.jar { background: none; box-shadow: none; }
.card-syl.right, .pic-card.right, .tile.right { border-color: var(--potion); box-shadow: 0 0 34px 6px #5CD6A088, inset 0 -6px 0 #0000001f; }
.parchment { position: relative; padding: .2em .7em .35em; border-radius: 18px; font-family: var(--read); font-weight: 700;
  font-size: clamp(56px, calc(var(--u) * 12), 124px); line-height: 1.15; text-align: center; max-width: 100%;
  border: 3px solid var(--parch-edge); }
.parchment.sentence { font-size: clamp(34px, calc(var(--u) * 7), 72px); line-height: 1.3; padding: .35em .9em .45em; }
.parchment .w { white-space: nowrap; }
.parchment .w.elide + .w { margin-left: -.02em; }
.parchment.glow { box-shadow: 0 0 40px 8px #5CD6A066, inset 0 -6px 0 #0000001f; }
/* Lumilire (N2) : une bonne réponse, et la baguette fait le même geste que le doigt : une traînée dorée de gauche à droite
   sous le texte lu (js/activities.js, choice → lumiSweep) */
.lumi-sweep { position: absolute; left: .55em; right: .55em; bottom: .14em; height: 5px; border-radius: 99px; pointer-events: none;
  background: linear-gradient(90deg, #F5BC4533, #FFD66B); box-shadow: 0 0 12px #FFD66B; transform-origin: left; animation: lumi-sweep .7s ease-out forwards; }
@keyframes lumi-sweep { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .lumi-sweep { animation: none; } }
.colored .syl:nth-child(odd) { color: var(--syl-a); }
.colored .syl:nth-child(even) { color: var(--syl-b); }
.colored .syl .muet, .colored .muet { color: var(--ghost-ink); }
.gold-word { color: #B8780A; text-shadow: 0 0 12px #F5BC4588; }
.stone.gold-word, .rune-big.gold-word { color: #3A2208; }
.help { position: absolute; top: -18px; right: -18px; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  color: var(--parch); background: radial-gradient(circle at 40% 35%, var(--stone-hi), var(--stone)); box-shadow: 0 4px 10px #0007; font-size: 16px; }
.help svg { width: 58%; }
.read { display: flex; flex-direction: column; align-items: center; gap: 5vh; width: 100%; }
.pic-card { width: clamp(110px, calc(var(--u) * 19), 190px); aspect-ratio: 1; border-radius: 26px; display: grid; place-items: center; border: 4px solid transparent; transition: transform .15s, opacity .3s; }
.pic-card > .il { width: 84%; height: 84%; overflow: visible; }
.pics.small .pic-card { width: clamp(90px, calc(var(--u) * 14), 140px); }

.pics.wide .pic-card { width: clamp(120px, calc(var(--u) * 22), 220px); }
.scene { display: flex; align-items: center; justify-content: center; width: 92%; height: 92%; }
.scene .il { width: 100%; height: 100%; overflow: visible; }
.scene.sur { flex-direction: column; }
.scene.sur .top { width: 52%; height: 44%; margin-bottom: -10%; position: relative; z-index: 1; }
.scene.sur .bot { width: 70%; height: 58%; }
.scene.et > span { width: 50%; height: 70%; }
.scene.one { width: 84%; height: 84%; }
/* Pluriel (sort de multiplication) : trois fois le même dessin, en petit tas */
.herd { position: relative; display: block; width: 100%; height: 100%; }
.scene .herd .il, .herd .il { position: absolute; width: 62%; height: 62%; }
.herd .il:nth-child(1) { left: 20%; top: 0; }
.herd .il:nth-child(2) { left: -2%; top: 36%; z-index: 1; }
.herd .il:nth-child(3) { left: 40%; top: 38%; z-index: 2; }
.herd .il.hidden-copy { opacity: 0; transform: scale(.3); }
.herd .il.pop-copy { animation: pop-copy .45s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes pop-copy { from { opacity: 0; transform: scale(.3) rotate(-12deg); } to { opacity: 1; transform: none; } }

/* Découverte */
.discover { display: flex; flex-direction: column; align-items: center; gap: 3vh; }
.magic-circle { position: relative; width: clamp(200px, 44vmin, 380px); aspect-ratio: 1; display: grid; place-items: center; }
.rune-ring { position: absolute; inset: -4%; width: 108%; height: 108%; overflow: visible; pointer-events: none; }
.rune-ring .seg { fill: none; stroke: #4D4380; stroke-width: 5; stroke-linecap: round; transition: stroke .3s; }
.rune-ring .seg.lit { stroke: #FFD66B; filter: drop-shadow(0 0 4px #f5bc45) drop-shadow(0 0 10px #f5bc45aa); }
.rune-ring .rtext { font-family: var(--display); font-size: 11px; fill: #F5BC45; opacity: .45; letter-spacing: 3px; transition: opacity .6s; }
.awake .rune-ring .rtext { opacity: 1; }
.rune-big { position: relative; z-index: 1; width: 64%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font-family: var(--read); font-weight: 700;
  font-size: clamp(90px, 22vmin, 190px); line-height: 1; padding-bottom: .1em; color: #EDE6FF;
  background: radial-gradient(circle at 40% 30%, #5B5190, #2A2150 75%); box-shadow: 0 0 40px #8C7BE555, inset 0 -8px 0 #0005; animation: breathe 2.2s ease-in-out infinite; }
.rune-big.duo-big { font-size: clamp(70px, 17vmin, 150px); }
.rune-big.gold-word { font-size: clamp(60px, 14vmin, 120px); background: radial-gradient(circle at 40% 30%, #FFF4D2, var(--gold)); }
.rune-big.pulse { animation: pulse .35s; }
.awake .rune-big { color: #3A2208; background: radial-gradient(circle at 40% 30%, #FFF4D2, var(--gold) 70%); box-shadow: 0 0 80px 20px #F5BC4588; }
.keyword { display: flex; align-items: center; gap: 12px; padding: 8px 20px 8px 12px; border-radius: 999px; background: #ffffff10; font-size: clamp(24px, 4vmin, 36px); }
.keyword .pic { width: 2.4em; height: 2.4em; display: block; }
.keyword .pic .il { width: 100%; height: 100%; overflow: visible; }
.keyword.shine { background: #F5BC4530; box-shadow: 0 0 0 3px #F5BC4588, 0 0 30px #F5BC4566; }
.keyword mark { background: none; color: var(--gold); font-weight: 700; }

/* Tracé */
.trace-box { width: min(92vw, 62vh, 520px); border-radius: 26px; padding: 12px; background: radial-gradient(circle at 50% 40%, #2E2560, #1A1438); box-shadow: inset 0 0 0 3px #ffffff14; }
.trace-svg { width: 100%; height: auto; touch-action: none; }
.baseline, .midline { stroke: #ffffff26; stroke-width: .8; stroke-dasharray: 3 3; }
.trace-svg .tguide { fill: none; stroke: #ffffff1e; stroke-width: 16; stroke-linecap: round; stroke-linejoin: round; }
.trace-svg .tguide.dot { fill: #ffffff1e; stroke: none; }
.trace-svg .inked { fill: none; stroke: var(--gold); stroke-width: 11; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 3px #F5BC45); }
.trace-svg .dots circle { fill: #F5BC4599; }
.trace-svg .start { fill: var(--potion); stroke: #fff; stroke-width: 2; animation: startpulse 1s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.trace.complete .trace-box { box-shadow: 0 0 60px 10px #F5BC4566, inset 0 0 0 3px var(--gold); }

/* Chasse */
.grid9 { display: grid; grid-template-columns: repeat(3, auto); gap: clamp(10px, 2.2vmin, 22px); }
.grid9 .stone { width: clamp(76px, 17vmin, 126px); font-size: clamp(40px, 10vmin, 76px); }

/* Fusion */
.fuse { display: flex; flex-direction: column; align-items: center; gap: 2vh; }
.fuse-row { display: flex; align-items: center; gap: 4vw; transition: gap .6s; }
.plus { font-size: 48px; color: var(--mist); transition: opacity .3s; }
.fused .fuse-row { gap: 0; }
.fused .plus { opacity: 0; width: 0; }
.fused .fuse-row .stone { animation: dive .7s ease-in forwards; }
.cauldron-wrap { position: relative; width: clamp(200px, 36vmin, 320px); }
.cauldron { width: 100%; height: auto; overflow: visible; }
.cauldron .brew { filter: drop-shadow(0 0 8px var(--brew)); }
.result { position: absolute; left: 50%; bottom: 60%; transform: translate(-50%, 30%) scale(.3); opacity: 0; transition: all .6s cubic-bezier(.3, 1.6, .5, 1) .5s; white-space: nowrap; }
.fused .result { opacity: 1; transform: translate(-50%, -10%) scale(1); }

/* Construire */
.build { display: flex; flex-direction: column; align-items: center; gap: 3vh; }
.build-pic { width: clamp(100px, 20vmin, 170px); aspect-ratio: 1; filter: drop-shadow(0 8px 16px #0008); }
.build-pic .il { width: 100%; height: 100%; overflow: visible; }
.slots { display: flex; gap: 10px; padding: 10px 14px; border-radius: 20px; background: #0004; }
.slot { min-width: clamp(76px, 13vmin, 120px); height: clamp(84px, 15vmin, 130px); border-radius: 16px; border: 3px dashed #ffffff44; display: grid; place-items: center;
  font-family: var(--read); font-weight: 700; font-size: clamp(44px, 9vmin, 82px); color: var(--ink); padding: 0 .15em .1em; }
.slot.filled { background: linear-gradient(170deg, var(--parch), var(--parch-2)); border: 3px solid var(--parch-edge); animation: pulse .35s; }
.slots.glow { box-shadow: 0 0 40px 8px #5CD6A066; }
.tile { min-width: clamp(76px, 13vmin, 120px); padding: .08em .3em .18em; border-radius: 18px; font-family: var(--read); font-weight: 700; font-size: clamp(44px, 9vmin, 82px); border: 4px solid transparent; transition: transform .15s, opacity .3s; }
.tile.used { opacity: 0; pointer-events: none; transform: scale(.6); }

/* Créature */
.command { display: flex; flex-direction: column; align-items: center; gap: 2.5vh; }
.order-banner { position: relative; padding: .1em .8em .25em; border-radius: 14px; font-family: var(--read); font-weight: 700; font-size: clamp(52px, 11vmin, 110px); line-height: 1.1; border: 3px solid var(--parch-edge); }
.beast { width: clamp(150px, 32vmin, 280px); aspect-ratio: 1; }
/* Gestes des créatures : la créature fait le geste en boucle (js/activities.js, gestHTML) */
.gest { position: relative; display: block; width: 100%; height: 100%; }
.gest-card { overflow: hidden; }
.gest-card .gest { width: 92%; height: 92%; }
.gest > span { position: absolute; display: block; }
.g-body { inset: 8% 8% 4%; transform-origin: 50% 90%; }
.g-body .creature-svg { width: 100%; height: 100%; overflow: visible; display: block; position: relative; }
.g-shadow { left: 25%; right: 25%; bottom: 4%; height: 6%; border-radius: 50%; background: #0003; }
.g-back, .g-front { inset: 0; pointer-events: none; }
.g-back svg, .g-front svg { position: absolute; overflow: visible; }
.gest .creature-svg > ellipse:first-child { display: none; }
/* rire : secoué de rire, larmes qui giclent */
.g-laugh .g-body { animation: gLaugh .32s ease-in-out infinite; }
.g-tears { inset: 20% 0 auto 0; width: 100%; }
.g-tears .tl { animation: gTearL .64s ease-in infinite; transform-box: fill-box; transform-origin: center; }
.g-tears .tr { animation: gTearR .64s ease-in infinite; transform-box: fill-box; transform-origin: center; }
/* rouler : la créature roule d'un côté à l'autre */
.g-roll .g-body { transform-origin: 50% 55%; animation: gRoll 1.6s ease-in-out infinite; }
.g-zoom .g-lines { left: 0; top: 30%; width: 30%; }
/* tourner : toupie sur place */
.g-spin .g-body { animation: gSpin .9s linear infinite; }
.g-swirl { inset: 30% 0 0 0; width: 100%; animation: gSwirl .9s linear infinite; transform-origin: 50% 70%; }
/* filer : la créature file à toute vitesse et revient de l'autre côté */
.g-zoom .g-body { animation: gZoom 1.3s cubic-bezier(.6, 0, .4, 1) infinite; }
.g-zoom .g-lines { animation: gZoomLines 1.3s cubic-bezier(.6, 0, .4, 1) infinite; }
/* voler : ailes qui battent, elle monte et descend, l'ombre rapetisse */
.g-fly .g-body { animation: gFly 1.2s ease-in-out infinite; }
.g-fly .g-shadow { animation: gShadow 1.2s ease-in-out infinite; }
.g-wings { position: absolute; inset: -12% -20% auto; width: 140%; overflow: visible; }
.g-wings .wl { transform-origin: 70px 80px; animation: gWingL .22s ease-in-out infinite alternate; }
.g-wings .wr { transform-origin: 90px 80px; animation: gWingR .22s ease-in-out infinite alternate; }
/* dodo : couchée, elle respire lentement, les z montent */
.g-sleep .g-body { animation: gBreathe 2.2s ease-in-out infinite; }
.g-sleep .g-body .creature-svg { transform: rotate(-14deg) translateY(6%); }
.g-zzz { right: 0; top: -2%; width: 42%; animation: zz 1.6s ease-in-out infinite; }
/* danser : balancement et petits sauts, notes de musique */
.g-dance .g-body { animation: gDance .7s ease-in-out infinite; }
.g-notes { inset: 0 0 auto 0; width: 100%; }
.g-notes .n1 { animation: gNote 1.4s ease-out infinite; }
.g-notes .n2 { animation: gNote 1.4s ease-out .7s infinite; }
/* accessoires dans le repère de la créature */
.g-prop { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
/* chanter : balancement, bouche en O, notes */
.g-sing .g-body { animation: gSing 1s ease-in-out infinite; }
/* courir : sur place à toute vitesse, penchée vers l'avant, poussière */
.g-run .g-body { animation: gRun .34s ease-in-out infinite; }
.g-run .g-lines { left: 0; top: 30%; width: 30%; animation: gRunLines .34s linear infinite; }
.g-dust { inset: 0; width: 100%; }
.g-dust circle { animation: gPuff .68s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.g-dust circle + circle { animation-delay: .34s; }
/* lire : un livre ouvert, la page tourne, petit hochement */
.g-read .g-body { animation: gRead 2.4s ease-in-out infinite; }
.g-read .g-prop .pg { animation: gPage 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: right center; }
/* boire : paille, verre de jus qui fait des bulles */
.g-drink .g-body { animation: gSip 1.1s ease-in-out infinite; }
.g-drink .g-prop .bub circle { animation: bubUp 1s ease-in infinite; transform-box: fill-box; transform-origin: center; }
.g-drink .g-prop .bub circle:nth-child(2) { animation-delay: .35s; } .g-drink .g-prop .bub circle:nth-child(3) { animation-delay: .7s; }
/* saluer : la main s'agite */
.g-wave .g-body { animation: gBreathe 1.4s ease-in-out infinite; }
.g-wave .g-prop .hand { transform-origin: 124px 98px; animation: gWave .32s ease-in-out infinite alternate; }
.g-wavelines { inset: 0; width: 100%; animation: twinkle .64s ease-in-out infinite; }
@keyframes gSing { 0%, 100% { transform: rotate(-5deg) scale(1, 1); } 50% { transform: rotate(5deg) scale(1.03, 1.06); } }
@keyframes gRun { 0%, 100% { transform: translateY(0) rotate(8deg) scale(1.03, .97); } 50% { transform: translateY(-10%) rotate(12deg) scale(.98, 1.03); } }
@keyframes gRunLines { from { transform: translateX(6%); } to { transform: translateX(-10%); } }
@keyframes gPuff { 0% { transform: translate(0, 0) scale(.4); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(-14px, -6px) scale(1.3); opacity: 0; } }
@keyframes gRead { 0%, 100% { transform: rotate(0) translateY(0); } 50% { transform: rotate(-3deg) translateY(2%); } }
@keyframes gPage { 0%, 40% { transform: scaleX(1); } 60% { transform: scaleX(-1); } 100% { transform: scaleX(-1); opacity: 0; } }
@keyframes gSip { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(.96, 1.03) translateY(-1%); } }
@keyframes gWave { from { transform: rotate(-22deg); } to { transform: rotate(18deg); } }
.beast .gest.big.g-zoom .g-body { animation-name: gZoomBig; }
.beast .gest.big.g-fly .g-body { animation-name: gFlyBig; }
.beast .gest.big.g-roll .g-body { animation-name: gRollBig; }
.gest.big:not([class*=" g-"]) .g-body { animation: bob 3s ease-in-out infinite; }
@keyframes gLaugh { 0%, 100% { transform: translateY(0) rotate(-5deg) scale(1, 1); } 50% { transform: translateY(-7%) rotate(5deg) scale(1.04, .96); } }
@keyframes gTearL { 0% { transform: translate(18px, 0) scale(.3); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(-14px, 30px) scale(1); opacity: 0; } }
@keyframes gTearR { 0% { transform: translate(-18px, 0) scale(.3); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(14px, 30px) scale(1); opacity: 0; } }
@keyframes gRoll { 0% { transform: translateX(-22%) rotate(-360deg); } 50% { transform: translateX(22%) rotate(0deg); } 100% { transform: translateX(-22%) rotate(-360deg); } }
@keyframes gRollBig { 0% { transform: translateX(-60%) rotate(-360deg); } 50% { transform: translateX(60%) rotate(0deg); } 100% { transform: translateX(-60%) rotate(-360deg); } }
@keyframes gSpin { 0% { transform: scaleX(1); } 25% { transform: scaleX(.05); } 50% { transform: scaleX(-1); } 75% { transform: scaleX(.05); } 100% { transform: scaleX(1); } }
@keyframes gSwirl { to { transform: rotate(360deg); } }
@keyframes gZoom { 0% { transform: translateX(0) skewX(0); } 40% { transform: translateX(130%) skewX(-18deg); } 40.1% { transform: translateX(-130%) skewX(-18deg); } 80%, 100% { transform: translateX(0) skewX(0); } }
@keyframes gZoomBig { 0% { transform: translateX(0) skewX(0); } 40% { transform: translateX(60vw) skewX(-20deg); } 40.1% { transform: translateX(-60vw) skewX(-20deg); } 80%, 100% { transform: translateX(0) skewX(0); } }
@keyframes gZoomLines { 0%, 100% { opacity: 0; } 15%, 35% { opacity: .9; transform: translateX(-10%); } 40% { opacity: 0; } 60%, 78% { opacity: .9; transform: translateX(0); } }
@keyframes gFly { 0%, 100% { transform: translateY(-4%); } 50% { transform: translateY(-22%) rotate(-4deg); } }
@keyframes gFlyBig { 0%, 100% { transform: translateY(-10%); } 50% { transform: translateY(-70%) rotate(-6deg); } }
@keyframes gShadow { 50% { transform: scale(.55); opacity: .5; } }
@keyframes gWingL { from { transform: rotate(18deg); } to { transform: rotate(-28deg); } }
@keyframes gWingR { from { transform: rotate(-18deg); } to { transform: rotate(28deg); } }
@keyframes gBreathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.05, .95); } }
@keyframes gDance { 0%, 100% { transform: rotate(-14deg) translateY(0); } 25% { transform: rotate(0) translateY(-12%); } 50% { transform: rotate(14deg) translateY(0); } 75% { transform: rotate(0) translateY(-12%); } }
@keyframes gNote { 0% { transform: translateY(20%) scale(.6); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-30%) scale(1.1); opacity: 0; } }
.beast.confused { animation: confused .8s ease-in-out; }
.creature-svg .c-pupil { animation: look 4s ease-in-out infinite; }

/* Potion */
.potion { width: 100%; height: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 1.5vh 3vw;
  grid-template-areas: "recipe shelf" "lab lab"; align-items: center; }
.recipe { grid-area: recipe; padding: 12px 22px 16px; border-radius: 10px 10px 22px 22px; border: 3px solid var(--parch-edge); display: flex; flex-direction: column; gap: 4px; transform: rotate(-2deg); align-self: start; }
.recipe > b { font-family: var(--display); font-size: 26px; color: #6B3A12; font-weight: 700; text-align: center; }
.ing { display: flex; align-items: center; gap: .3em; font-family: var(--read); font-weight: 700; font-size: 1em; line-height: 1.12; }
.recipe { font-size: clamp(32px, min(7vh, 4.6vw), 96px); }
.recipe > b { font-size: .45em; }
.tick { width: .55em; height: .55em; border-radius: 50%; border: 3px solid #8A6A3A; flex: 0 0 auto; transition: transform .3s; }
.ing.ok .tick { transform: scale(1.15); background: var(--potion) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M10,25 L20,35 L39,13' fill='none' stroke='%2313351F' stroke-width='7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/80% no-repeat; border-color: #2E8A5E; }
.shelf { grid-area: shelf; position: relative; display: flex; justify-content: center; align-items: flex-end; gap: clamp(4px, 1.4vw, 16px); padding: 0 1vw 2.6vh; align-self: start; }
.shelf::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2.6vh; min-height: 14px; background: linear-gradient(#8a5a30, #4a2a14); border-radius: 6px; box-shadow: 0 0 0 2px #1d1426, 0 10px 18px #0009; }
.jar { width: clamp(64px, min(15vh, 8.5vw), 200px); aspect-ratio: 120 / 150; position: relative; z-index: 1; transition: transform .3s cubic-bezier(.2, 1.5, .4, 1); }
.jar svg { width: 100%; height: 100%; overflow: visible; }
.jar:hover { transform: translateY(-6px) rotate(-2deg); }
.jar.ghosted { visibility: hidden; }
.jar.nope { animation: jarShake .6s; }
.jar.hint svg { animation: jarHint 1.2s ease-in-out infinite; }
.lab { grid-area: lab; display: flex; align-items: flex-end; justify-content: center; gap: 4vw; height: 100%; min-height: 0; }
.pot { width: clamp(170px, min(44vh, 30vw), 560px); }
.prof { width: clamp(110px, min(28vh, 19vw), 360px); }
.pot svg, .prof svg { width: 100%; height: auto; overflow: visible; display: block; }
@media (max-aspect-ratio: 1/1) {
  .potion { grid-template-columns: 1fr; grid-template-rows: auto auto minmax(0, 1fr); grid-template-areas: "recipe" "shelf" "lab"; justify-items: center; }
}
@keyframes jarShake { 0%, 100% { transform: rotate(0); } 15% { transform: rotate(-12deg); } 35% { transform: rotate(10deg); } 55% { transform: rotate(-7deg); } 75% { transform: rotate(4deg); } }
@keyframes jarHint { 0%, 100% { filter: drop-shadow(0 0 0 #f5bc45); transform: translateY(0); } 50% { filter: drop-shadow(0 0 12px #f5bc45); transform: translateY(-5px); } }
.cauldron .fl1 { transform-origin: 130px 214px; animation: flick .16s ease-in-out infinite alternate; }
.cauldron .fl2 { transform-origin: 130px 214px; animation: flick .22s ease-in-out infinite alternate-reverse; }
.cauldron .bub circle { transform-box: fill-box; transform-origin: center; animation: bubUp 1.6s ease-in infinite; }
.cauldron .bub circle:nth-child(2) { animation-delay: .5s; } .cauldron .bub circle:nth-child(3) { animation-delay: 1s; } .cauldron .bub circle:nth-child(4) { animation-delay: .8s; }
.cauldron .brewg { transform-origin: 130px 82px; }
.cauldron.splash .brewg { animation: brewBounce .6s; }
.toad .t-belly { transform-origin: 100px 170px; animation: throat 2.6s ease-in-out infinite; }
.toad.gulp .t-belly { animation: gulp .44s ease-in-out 3; }
.toad .t-lids { opacity: 0; animation: tblink 3.6s infinite; }
.toad .t-hat { transform-origin: 100px 70px; animation: hatWob 3s ease-in-out infinite; }
@keyframes flick { from { transform: scale(1, 1) skewX(-3deg); } to { transform: scale(.9, 1.12) skewX(4deg); } }
@keyframes bubUp { 0% { transform: translateY(4px) scale(.2); opacity: 0; } 30% { opacity: 1; } 85% { transform: translateY(-10px) scale(1); opacity: 1; } 100% { transform: translateY(-12px) scale(1.4); opacity: 0; } }
@keyframes brewBounce { 0%, 100% { transform: translateY(0) scaleY(1); } 30% { transform: translateY(-4px) scaleY(1.5); } 60% { transform: translateY(2px) scaleY(.8); } }
@keyframes throat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04, 1.07); } }
@keyframes gulp { 50% { transform: scale(1.14, 1.2); } }
@keyframes tblink { 0%, 93%, 100% { opacity: 0; } 95% { opacity: 1; } }
/* Gags de potion (js/potionfx.js) */
.big-bubble { position: fixed; z-index: 46; pointer-events: none; border-radius: 50%; transform-origin: 50% 50%;
  background: radial-gradient(circle at 32% 28%, #ffffffcc 0 6%, #ffffff00 14%), radial-gradient(circle, #7CE0FF00 55%, #7CE0FF33 78%, #FF7BD566 92%, #B7F27A88 100%);
  box-shadow: inset 0 0 30px #ffffff55, 0 0 30px #7CE0FF44; }
.ice-block { position: fixed; z-index: 46; pointer-events: none; border-radius: 18px; border: 4px solid #E8F6FF;
  background: linear-gradient(135deg, #CDEBFFaa, #7CB0FF66 45%, #CDEBFF99), repeating-linear-gradient(60deg, #ffffff00 0 38px, #ffffff55 38px 44px);
  box-shadow: inset 0 0 40px #ffffffaa, 0 0 40px #9CC8FF88; }
.ice-block.cracked { background-image: linear-gradient(135deg, #CDEBFFaa, #7CB0FF66 45%, #CDEBFF99),
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M50,0 L44,22 L58,36 L40,58 L54,74 L46,100 M44,22 L20,30 M58,36 L84,28 M40,58 L14,66 M54,74 L80,82' fill='none' stroke='white' stroke-width='1.6'/%3E%3C/svg%3E"); background-size: 100% 100%; }
@keyframes hatWob { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }

/* Histoire */
.story { position: relative; display: flex; align-items: center; gap: 4vw; max-width: 980px; width: 100%; justify-content: center; }
.story-art { width: clamp(150px, 34vmin, 320px); flex: 0 0 auto; animation: bob 3s ease-in-out infinite; }
.story-art svg { width: 100%; height: auto; }
.bubble { position: relative; background: linear-gradient(170deg, var(--parch), var(--parch-2)); color: var(--ink); border-radius: 26px; padding: 18px 24px 22px; max-width: 30em;
  font-size: clamp(20px, 3.2vmin, 30px); line-height: 1.35; box-shadow: 0 10px 30px #0008; }
.bubble::before { content: ''; position: absolute; left: -16px; top: 40%; border: 16px solid transparent; border-right-color: var(--parch); border-left: 0; }
.bubble b { font-family: var(--display); font-size: 1.1em; color: #6B3A12; display: block; }
.bubble p { margin: 4px 0 0; }
.story.effaceur .bubble { background: linear-gradient(170deg, #F4D6E0, #E6B7C8); }
.story.effaceur .bubble::before { border-right-color: #F4D6E0; }
.story.effaceur .story-art { animation: menace 1.2s ease-in-out infinite alternate; }
.btn-next { width: 100px; height: 100px; border-radius: 50%; color: #13351F; display: grid; place-items: center;
  background: radial-gradient(circle at 40% 35%, #A6F2C9, var(--potion)); box-shadow: 0 0 30px #5CD6A077, inset 0 -6px 0 #0003; animation: breathe 2s ease-in-out infinite; }
.btn-next svg { width: 56%; }
.story-talk { display: flex; flex-direction: column; align-items: flex-end; gap: 16px; }
.speaking .story .btn-next { animation: none; opacity: .75; }
@media (max-aspect-ratio: 1/1), (max-width: 700px) {
  .story { flex-direction: column; gap: 20px; }
  .bubble::before { left: 50%; top: -16px; border: 16px solid transparent; border-bottom-color: var(--parch); border-top: 0; transform: translateX(-50%); }
  .story.effaceur .bubble::before { border-bottom-color: #F4D6E0; border-right-color: transparent; }
  .story-talk { align-items: center; }
}
/* Choisis ton sort (F7) : la nouvelle lettre au-dessus, deux ou trois jeux qui flottent */
.pick { display: flex; flex-direction: column; align-items: center; gap: 5vh; }
.pick-rune { font-family: var(--read); font-weight: 700; font-size: clamp(60px, calc(var(--u) * 13), 120px); color: var(--gold-soft);
  text-shadow: 0 0 24px #F5BC45aa; animation: bob 3s ease-in-out infinite; }
.pick-rune.gone { visibility: hidden; }
.pick-opts { display: flex; gap: clamp(18px, 5vw, 56px); justify-content: center; flex-wrap: wrap; }
.pick-opt { width: clamp(110px, calc(var(--u) * 22), 190px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; color: var(--gold-soft);
  background: radial-gradient(circle at 45% 35%, var(--stone-hi), var(--dusk) 70%); border: 4px solid var(--gold);
  box-shadow: 0 0 28px #F5BC4566, inset 0 -8px 0 #0004;
  animation: enter .5s calc(var(--i) * .15s) both, bob 3s ease-in-out calc(.5s + var(--i) * .4s) infinite;
  transition: opacity .3s, filter .3s, transform .3s; }
.pick-opt .pick-ic { width: 58%; display: block; }
.pick-opt .pick-ic svg { width: 100%; height: auto; }
.pick-opt.dim { opacity: .3; filter: grayscale(.8); }
.pick-opt.chosen { animation: none; transform: scale(1.12); box-shadow: 0 0 50px 10px #F5BC45aa, inset 0 -8px 0 #0004; }
.flyer.pick-fly { display: grid; place-items: center; font-family: var(--read); font-weight: 700; font-size: clamp(60px, calc(var(--u) * 13), 120px); color: var(--gold-soft); text-shadow: 0 0 24px #F5BC45; }
.ghost-intro { display: flex; flex-direction: column; align-items: center; gap: 3vh; position: relative; }
.ghost-intro .muet { cursor: pointer; display: inline-block; animation: haunt 2s ease-in-out infinite; }
.ghost-intro .muet.boo { animation: boo .6s; }
.ghost-float { pointer-events: none; position: absolute; top: -70px; right: -60px; width: 80px; color: #E9E4FF; opacity: .8; animation: floaty 2.5s ease-in-out infinite; }

/* Récompense */
#reward { align-items: center; justify-content: center; }
.reward-box { display: flex; flex-direction: column; align-items: center; gap: 2.5vh; text-align: center; }
.reward-box h2 { font-family: var(--display); font-size: clamp(44px, 9vmin, 90px); margin: 0; color: var(--gold); text-shadow: 0 0 30px #F5BC4566, 0 4px 0 #6B3A12; font-weight: 700; }
.rw-visual { position: relative; display: grid; place-items: center; min-height: clamp(150px, 30vmin, 260px); }
.rw-rune { font-family: var(--read); font-weight: 700; font-size: clamp(110px, 26vmin, 230px); line-height: 1; color: #3A2208; width: 1.5em; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 40% 30%, #FFF4D2, var(--gold) 70%); box-shadow: 0 0 90px 20px #F5BC4577; animation: pop .9s cubic-bezier(.3, 1.6, .5, 1) both; padding-bottom: .1em; }
.rw-icon { width: clamp(130px, 26vmin, 220px); color: var(--gold); animation: pop .9s cubic-bezier(.3, 1.6, .5, 1) both; filter: drop-shadow(0 0 30px #F5BC4588); }
.rw-icon.ghosty { color: #E9E4FF; }
.rw-egg { width: clamp(110px, 22vmin, 180px); color: #F2E2C0; animation: eggcrack 1.4s ease-in forwards; grid-area: 1/1; }
.rw-creature { grid-area: 1/1; display: flex; flex-direction: column; align-items: center; width: clamp(160px, 32vmin, 260px); animation: hatch .9s cubic-bezier(.3, 1.6, .5, 1) 1.3s both; }
.rw-creature svg { width: 100%; height: auto; }
.rw-creature b { font-family: var(--read); font-size: 44px; color: var(--gold); }
.rw-stars { display: flex; gap: 10px; }
.rw-stars i { width: clamp(56px, 11vmin, 90px); color: #ffffff22; }
.rw-stars i.on { color: var(--gold); filter: drop-shadow(0 0 12px #F5BC45); animation: starpop .6s cubic-bezier(.3, 1.8, .5, 1) var(--d) both; }
.rw-gain { display: flex; align-items: center; gap: 6px; font-size: 32px; font-weight: 700; color: var(--gold); animation: enter .5s 1.4s both; }
.rw-gain svg { width: 32px; }
.btn-next.big { width: 120px; height: 120px; animation: enter .5s 1.2s both, breathe 2s ease-in-out 1.7s infinite; }

/* Grimoire */
.grim-head { display: flex; align-items: center; gap: 16px; padding-block: 12px; flex-wrap: wrap; }
.grim-head h2 { font-family: var(--display); color: var(--gold); font-size: 44px; margin: 0; flex: 1; font-weight: 700; }
#grim-tabs { display: flex; gap: 10px; }
#grim-tabs button { width: 70px; height: 62px; border-radius: 16px 16px 6px 6px; background: #ffffff12; display: grid; place-items: center; color: var(--mist); border-bottom: 4px solid transparent; }
#grim-tabs button.on { background: var(--parch); color: #6B3A12; border-color: var(--gold); }
#grim-tabs .glyph { font-weight: 700; font-size: 34px; line-height: 1; }
#grim-tabs .glyph.small { font-size: 26px; }
#grim-tabs svg { width: 34px; }
.book { flex: 1; min-height: 0; overflow-y: auto; border-radius: 20px; margin-bottom: 16px; padding: 20px;
  background: linear-gradient(90deg, var(--parch-2), var(--parch) 8%, var(--parch) 92%, var(--parch-2)); color: var(--ink); box-shadow: 0 0 0 6px #5A2A34, 0 0 0 9px #3A1A22, 0 20px 40px #0009; }
#grim-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 14px; }
.grim-rune { aspect-ratio: 1; border-radius: 20px; background: #fff8; border: 3px solid var(--parch-edge); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.grim-rune .glyph { font-weight: 700; font-size: 46px; line-height: 1; color: #3A2208; }
.grim-rune .gpic { width: 40%; aspect-ratio: 1; display: block; }
.gpic .il { width: 100%; height: 100%; overflow: visible; }
.grim-rune.unknown { background: #0000000d; border-style: dashed; }
.grim-rune.unknown .glyph { color: #0003; }
.grim-rune.pulse { animation: pulse .4s; }
.grim-group { grid-column: 1 / -1; }
.grim-group.v { --fam: var(--fam-v); --fam-soft: var(--fam-v-soft); } .grim-group.c { --fam: var(--fam-c); --fam-soft: var(--fam-c-soft); }
.grim-group h3 { margin: 4px 0 10px; font-family: var(--display); font-size: 30px; color: var(--fam); border-bottom: 3px solid var(--fam); padding-bottom: 2px; }
.grim-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); grid-auto-flow: row dense; gap: 14px; margin-bottom: 18px; }
.grim-group .grim-rune:not(.unknown) { background: color-mix(in srgb, var(--fam-soft) 55%, #fff8); border-color: var(--fam); }
.grim-group .grim-rune.unknown { border-color: color-mix(in srgb, var(--fam) 40%, transparent); }
.grim-rune.duo { grid-column: span 2; aspect-ratio: auto; }
.grim-word { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px; border-radius: 16px; background: #fff8; border: 2px solid var(--parch-edge); font-weight: 700; font-size: 30px; }
.grim-word .gpic { width: 64px; height: 64px; display: block; }
.grim-creature { display: flex; flex-direction: column; align-items: center; padding: 6px; border-radius: 16px; background: #2A2150; color: var(--gold); }
.grim-creature svg { width: 100%; height: auto; }
.grim-creature b { font-family: var(--read); font-size: 26px; }
.grim-creature.wiggle { animation: dance .5s ease-in-out 2; }
.empty { grid-column: 1 / -1; font-size: 22px; text-align: center; color: #6B5A40; }

/* Coin des parents (js/parents.js) : une page calme, trois parties repliables. Polices du jeu (Andika, Grenze Gotisch), pas d'animation
   sauf à l'ouverture d'une partie ; clair ou sombre selon l'appareil. */
.pbtn { align-self: flex-start; padding: 8px 16px; border-radius: 10px; background: #4B2A83; color: #fff; font-size: 15px; }
.pbtn.danger { background: #B3362B; }
.pbtn.ghost { background: #EEE6D6; color: #2A2233; }
#parents {
  --bg: #F3F1F8; --surface: #FFFFFF; --sunk: #F0EDF7; --ink: #221A3D; --muted: #6B6488; --line: #E4DFEF;
  --accent: #5B45C9; --accent-ink: #FFFFFF; --accent-soft: #ECE8FF; --gold-c: #E0A22A;
  --st-stable: #2E9E6A; --st-prov: #B9820B; --st-prac: #4A7BD0; --st-rev: #D5553B; --st-new: #CBC5DB;
  --st-stable-bg: #E3F4EB; --st-prov-bg: #FBF1D6; --st-prac-bg: #E4ECFA; --st-rev-bg: #FBE6E0; --st-new-bg: #F4F2F8;
  --hear: #8A6BE0; --readc: #4A7BD0; --write: #2E9E6A;
  --sh: 0 1px 2px rgba(34,26,61,.05), 0 6px 20px rgba(34,26,61,.05);
  --ui: var(--read);
  color-scheme: light; background: var(--bg); color: var(--ink); overflow-y: auto; display: block; font: 15px/1.5 var(--ui);
  user-select: text; -webkit-user-select: text; padding-inline: 16px;
}
@media (prefers-color-scheme: dark) {
  #parents {
    color-scheme: dark;
    --bg: #15112A; --surface: #1E1937; --sunk: #272047; --ink: #EEEAF8; --muted: #A59DC4; --line: #332C54;
    --accent: #A393FF; --accent-ink: #15112A; --accent-soft: #2D2661; --gold-c: #F5BC45;
    --st-stable: #4CC98D; --st-prov: #F0C04A; --st-prac: #7EA4F0; --st-rev: #F07E62; --st-new: #4A4368;
    --st-stable-bg: #1C3830; --st-prov-bg: #3A3120; --st-prac-bg: #222F58; --st-rev-bg: #42242A; --st-new-bg: #241F3D;
    --hear: #B39BFF; --readc: #7EA4F0; --write: #4CC98D; --sh: 0 1px 2px rgba(0,0,0,.3);
  }
}
#parents button { font: inherit; color: inherit; cursor: pointer; }
#parents button:focus-visible, #parents select:focus-visible, #parents input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#parents h3, #parents h4 { margin: 0; text-wrap: balance; }
.pc-wrap { max-width: 1000px; margin: 0 auto; display: grid; gap: 16px; padding-block: 0 56px; }
.pc-empty { max-width: 1000px; margin: 40px auto; color: var(--muted); }
.pc-top { display: flex; align-items: center; gap: 14px; padding-top: 18px; flex-wrap: wrap; max-width: 1000px; margin: 0 auto; }
.pc-brand { display: flex; align-items: baseline; gap: 10px; }
.pc-brand b { font: 600 28px/1 var(--display); color: var(--accent); }
.pc-brand span { font-weight: 600; }
.pc-brand .pc-wm { font: 700 30px/1 var(--read); color: var(--accent); text-decoration: underline; text-decoration-color: #F5BC45; text-decoration-thickness: 4px; text-underline-offset: 7px; }
.pc-about { max-width: 1000px; margin: 8px auto 0; font-size: 15px; opacity: .8; }
.pc-back { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: 6px 14px; font-size: 14px; }
.pc-acct { margin-left: auto; display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 5px 6px 5px 12px; font-size: 13px; }
.pc-acct .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--st-stable); box-shadow: 0 0 0 3px var(--st-stable-bg); flex: none; }
.pc-acct .dot.bad { background: var(--st-prov); box-shadow: 0 0 0 3px var(--st-prov-bg); }
.pc-acct .who { color: var(--muted); }
@media (max-width: 600px) { .pc-acct .who { display: none; } }
.pc-acct button { border: 0; background: var(--accent-soft); color: var(--accent) !important; border-radius: 999px; padding: 5px 12px; font-weight: 600; }
.pc-acct button.spin::before { content: ''; display: inline-block; width: 10px; height: 10px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; margin-right: 6px; animation: pcspin .7s linear infinite; vertical-align: -1px; }
@keyframes pcspin { to { transform: rotate(360deg); } }
.pc-kids { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.pc-kid { display: flex; align-items: center; gap: 10px; padding: 6px 18px 6px 6px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); text-align: left; }
.pc-kid[aria-selected="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.pc-kid b { display: block; } .pc-kid small { color: var(--muted); font-size: 12px; }
.pc-av { width: 44px; height: 44px; border-radius: 12px; overflow: hidden; background: #2C2257; flex: none; }
.pc-av .avatar-svg { width: 100%; height: 100%; display: block; }

/* Parties repliables */
.pc-sec { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--sh); overflow: hidden; }
.pc-sec-h { width: 100%; border: 0; background: none; display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; padding: 18px 20px; text-align: left; transition: background .2s; }
.pc-sec-h:hover { background: var(--sunk); }
.pc-ic { width: 52px; height: 52px; border-radius: 15px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; transition: transform .35s cubic-bezier(.3,1.5,.5,1); }
.pc-sec-h:active .pc-ic { transform: scale(.92); }
.pc-t { display: block; font: 700 25px/1.1 var(--display); letter-spacing: .01em; color: var(--accent); }
.pc-sum { margin-top: 2px; color: var(--muted); font-size: 13.5px; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.pc-sum b { color: var(--ink); font-weight: 600; }
.pc-chev { width: 34px; height: 34px; border-radius: 50%; background: var(--sunk); display: grid; place-items: center; transition: transform .35s ease, background .2s; }
.pc-sec-h[aria-expanded="true"] .pc-chev { transform: rotate(180deg); background: var(--accent-soft); color: var(--accent); }
.pc-sec-b { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.2,.8,.2,1); }
.pc-sec-h[aria-expanded="true"] + .pc-sec-b { grid-template-rows: 1fr; }
.pc-sec-b > div { overflow: hidden; min-height: 0; }
.pc-in { padding: 4px 20px 22px; display: grid; gap: 22px; opacity: 0; transform: translateY(-6px); transition: opacity .3s ease .05s, transform .35s ease .05s; visibility: hidden; }
.pc-sec-h[aria-expanded="true"] + .pc-sec-b .pc-in { opacity: 1; transform: none; visibility: visible; }
/* Symboles : le grimoire tourne ses pages, le sablier se retourne, la baguette scintille */
.ic-book .page, .pc-ic .spark { transform-box: fill-box; }
.ic-book .page { transform-origin: left center; }
.pc-ic .spark { transform-origin: center; opacity: 0; }
.pc-sec-h[aria-expanded="true"] .ic-book .p1 { animation: pcflip .7s cubic-bezier(.4,0,.2,1) .05s; }
.pc-sec-h[aria-expanded="true"] .ic-book .p2 { animation: pcflip .7s cubic-bezier(.4,0,.2,1) .2s; }
.pc-sec-h[aria-expanded="true"] .ic-book .spark { animation: pctwinkle .8s ease .55s both; }
@keyframes pcflip { 50% { transform: scaleX(-1); opacity: .7; } }
@keyframes pctwinkle { 0% { opacity: 0; transform: scale(.2); } 50% { opacity: 1; transform: scale(1.2); } 100% { opacity: 0; transform: scale(.8); } }
.ic-glass { transition: transform .8s cubic-bezier(.5,-0.3,.3,1.3); }
.pc-sec-h[aria-expanded="true"] .ic-glass { transform: rotate(180deg); }
.ic-glass .grain { opacity: 0; }
.pc-sec-h[aria-expanded="true"] .ic-glass .grain { animation: pcfall 1s linear .7s 2; }
@keyframes pcfall { 0% { opacity: 1; transform: translateY(-3px); } 100% { opacity: 0; transform: translateY(5px); } }
.ic-wand { transform-origin: 30% 80%; }
.pc-sec-h[aria-expanded="true"] .ic-wand { animation: pcwave .7s cubic-bezier(.3,1.4,.5,1); }
.pc-sec-h[aria-expanded="true"] .ic-wand .spark { animation: pctwinkle .9s ease .35s both; }
.pc-sec-h[aria-expanded="true"] .ic-wand .s2 { animation-delay: .5s; }
.pc-sec-h[aria-expanded="true"] .ic-wand .s3 { animation-delay: .65s; }
@keyframes pcwave { 35% { transform: rotate(-18deg); } 70% { transform: rotate(8deg); } }

.pc-part h3 { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-bottom: 10px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.pc-part h3 span { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 12.5px; }
.pc-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 3px 10px; background: var(--sunk); color: var(--muted); font-variant-numeric: tabular-nums; }
.pc-pill i { width: 8px; height: 8px; border-radius: 50%; }
.pc-split { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 22px; }
@media (max-width: 760px) { .pc-split { grid-template-columns: 1fr; } }
.pc-hint { font-size: 12.5px; color: var(--muted); margin: 0; }

/* États */
#parents .st-stable { background: var(--st-stable-bg); } #parents .st-stable small, #parents .t-stable { color: var(--st-stable); }
#parents .st-prov { background: var(--st-prov-bg); } #parents .st-prov small, #parents .t-prov { color: var(--st-prov); }
#parents .st-prac { background: var(--st-prac-bg); } #parents .st-prac small, #parents .t-prac { color: var(--st-prac); }
#parents .st-rev { background: var(--st-rev-bg); } #parents .st-rev small, #parents .t-rev { color: var(--st-rev); }
#parents .st-new { background: var(--st-new-bg); color: var(--muted); } #parents .st-new small { color: var(--muted); font-weight: 500; }
#parents .m-stable { background: var(--st-stable); } #parents .m-prov { background: var(--st-prov); } #parents .m-prac { background: var(--st-prac); } #parents .m-rev { background: var(--st-rev); } #parents .m-new { background: var(--st-new); }

/* Parcours */
.pc-track-scroll { overflow-x: auto; overflow-y: hidden; margin-inline: -4px; padding-inline: 4px; }
.pc-track { min-width: 580px; display: grid; grid-template-columns: repeat(8, 1fr); position: relative; padding-top: 42px; }
.pc-track::before, .pc-track .fill { content: ''; position: absolute; left: 6%; top: 59px; height: 4px; border-radius: 2px; }
.pc-track::before { right: 6%; background: var(--line); }
.pc-track .fill { background: var(--accent); }
.pc-stop { border: 0; background: none; padding: 0 2px; display: grid; justify-items: center; gap: 5px; position: relative; }
.pc-stop .pc-wz { position: absolute; top: -36px; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; background: #2C2257; border: 2px solid var(--accent); }
.pc-stop .pc-wz .avatar-svg { width: 100%; height: 100%; display: block; }
.pc-stop .n { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 14px; background: var(--surface); border: 2px solid var(--line); color: var(--muted); position: relative; transition: transform .2s; }
.pc-stop:hover .n { transform: scale(1.08); }
.pc-stop.done .n { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.pc-stop.here .n { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); background: conic-gradient(var(--accent-soft) calc(var(--p) * 1%), var(--surface) 0); }
.pc-stop[aria-pressed="true"] .n { outline: 2px solid var(--ink); outline-offset: 3px; }
.pc-stop .snds { font: 700 14px/1.2 var(--read); text-align: center; }
.pc-stop.future .snds { color: var(--muted); font-weight: 400; }
.pc-stop small { font-size: 11px; color: var(--muted); text-align: center; line-height: 1.2; }
.pc-fl { margin-top: 14px; background: var(--sunk); border-radius: 14px; padding: 14px 16px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 18px; }
@media (max-width: 640px) { .pc-fl { grid-template-columns: 1fr; } }
.pc-fl h4 { font-size: 15px; } .pc-fl .meta { font-size: 13px; color: var(--muted); }
.pc-sounds { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pc-snd { border: 1px solid transparent; border-radius: 10px; min-width: 46px; padding: 4px 8px 3px; text-align: center; }
.pc-snd b { font: 700 19px/1.1 var(--read); display: block; }
.pc-snd small { font-size: 10.5px; font-weight: 600; display: block; }
button.pc-snd[aria-pressed="true"] { border-color: var(--ink); }
.pc-miles { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; align-content: start; }
.pc-miles li { display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: center; font-size: 14px; }
.pc-miles .ic { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--st-new); }
.pc-miles .done .ic { background: var(--st-stable); border-color: var(--st-stable); }
.pc-miles .done .ic::after { content: ''; width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); }
.pc-miles .now .ic { border-color: var(--st-prac); background: radial-gradient(var(--st-prac) 36%, transparent 40%); }
.pc-miles .next { color: var(--muted); }
.pc-miles em { font-style: normal; font-size: 12px; color: var(--muted); }
.pc-miles .w { font-family: var(--read); font-weight: 700; }

/* Lettres et sons */
.pc-groups { display: grid; gap: 14px; }
.pc-groups h4 { font-size: 13px; font-weight: 600; margin-bottom: 7px; display: flex; gap: 8px; align-items: baseline; }
.pc-groups h4 span { font-weight: 400; font-size: 12px; color: var(--muted); }
.pc-letters { display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 7px; }
.pc-lt { border: 1px solid transparent; border-radius: 12px; padding: 6px 3px 5px; text-align: center; transition: transform .15s; }
.pc-lt:hover { transform: translateY(-1px); }
.pc-lt[aria-pressed="true"] { border-color: var(--ink); }
.pc-lt .g { font: 700 22px/1.1 var(--read); display: block; }
.pc-lt small { font-size: 10px; display: block; font-weight: 600; white-space: nowrap; }
.pc-lt .mods { display: flex; justify-content: center; gap: 3px; margin-top: 4px; }
.pc-lt .mods i { width: 11px; height: 4px; border-radius: 2px; }
.pc-lt.st-new .g { opacity: .45; }
.pc-side { display: grid; gap: 12px; align-content: start; }
.pc-detail { background: var(--sunk); border-radius: 14px; padding: 14px 16px; display: grid; gap: 10px; }
.pc-detail .top-l { display: flex; gap: 14px; align-items: center; }
.pc-detail .g { font: 700 44px/1 var(--read); min-width: 60px; text-align: center; }
.pc-detail h4 { font-size: 15px; }
.pc-mrow { display: grid; grid-template-columns: 64px 1fr; gap: 2px 10px; align-items: center; font-size: 13px; }
.pc-mbar { height: 6px; border-radius: 3px; background: var(--st-new-bg); overflow: hidden; }
.pc-mbar i { display: block; height: 100%; border-radius: 3px; }
.pc-mrow small { grid-column: 2; color: var(--muted); font-size: 12px; }
.pc-key { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.pc-key span { display: inline-flex; gap: 6px; align-items: center; }
.pc-key i { width: 10px; height: 10px; border-radius: 3px; }

/* Livres lus */
.pc-books { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.pc-books li { border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; display: grid; gap: 8px; align-content: start; }
.pc-books b { font-size: 14px; } .pc-books small { color: var(--muted); font-size: 12px; }
.pc-books li.locked { border-style: dashed; color: var(--muted); }
.pc-pages { display: flex; gap: 4px; }
.pc-pages i { width: 18px; height: 24px; border-radius: 3px 5px 5px 3px; }
.pc-pages i.ok { background: var(--st-stable); } .pc-pages i.help { background: var(--st-prov); }

/* Temps de jeu */
.pc-big { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pc-big b { font-size: 34px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pc-big span { color: var(--muted); }
.pc-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; align-items: end; height: 130px; padding-bottom: 22px; position: relative; margin-top: 12px; }
.pc-week::before { content: ''; position: absolute; left: 0; right: 0; bottom: 22px; border-top: 1px solid var(--line); }
.pc-bar { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.pc-bar i { width: 100%; max-width: 28px; background: var(--accent); border-radius: 6px 6px 2px 2px; opacity: .8; transform-origin: bottom; }
.pc-sec-h[aria-expanded="true"] + .pc-sec-b .pc-bar i { animation: pcgrow .6s cubic-bezier(.2,.8,.2,1) both; }
.pc-bar:nth-child(2) i { animation-delay: .04s !important; } .pc-bar:nth-child(3) i { animation-delay: .08s !important; } .pc-bar:nth-child(4) i { animation-delay: .12s !important; }
.pc-bar:nth-child(5) i { animation-delay: .16s !important; } .pc-bar:nth-child(6) i { animation-delay: .2s !important; } .pc-bar:nth-child(7) i { animation-delay: .24s !important; }
@keyframes pcgrow { from { transform: scaleY(0); } }
.pc-bar.today i { opacity: 1; }
.pc-bar.zero i { background: var(--st-new); height: 3px !important; }
.pc-bar em { position: absolute; bottom: -22px; font-style: normal; font-size: 12px; color: var(--muted); }
.pc-bar.today em { color: var(--accent); font-weight: 700; }
.pc-bar s { text-decoration: none; font-size: 11px; color: var(--muted); margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.pc-tiles { display: grid; gap: 12px; align-content: start; }
.pc-tile { background: var(--sunk); border-radius: 14px; padding: 14px 16px; }
.pc-tile .lbl { font-size: 12px; color: var(--muted); font-weight: 600; }
.pc-tile .v { display: block; font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; margin-top: 2px; }
.pc-tile p { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); }
.pc-stack { display: flex; height: 12px; border-radius: 6px; overflow: hidden; margin-top: 10px; gap: 2px; }
.pc-stack i { display: block; height: 100%; }
.pc-stack-key { display: grid; gap: 4px; margin-top: 10px; font-size: 13px; }
.pc-stack-key span { display: grid; grid-template-columns: 10px 1fr auto; gap: 8px; align-items: center; }
.pc-stack-key i { width: 10px; height: 10px; border-radius: 3px; }
.pc-stack-key em { font-style: normal; color: var(--muted); font-variant-numeric: tabular-nums; }
.c-hear { background: var(--hear); } .c-read { background: var(--readc); } .c-spell { background: var(--write); }
.pc-sessions { list-style: none; padding: 0; margin: 0; font-size: 14px; }
.pc-sessions li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); }
.pc-sessions li span:last-child { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Paramètres */
.pc-settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.pc-settings.pc-solo { grid-template-columns: minmax(0, 560px); justify-content: center; }
@media (max-width: 700px) { .pc-settings { grid-template-columns: 1fr; } }
.pc-set { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); }
.pc-set b { font-size: 14px; } .pc-set p { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.pc-start { grid-column: 1 / -1; grid-template-columns: 1fr; }
.pc-tag { font-size: 11px; font-weight: 700; color: var(--accent); background: var(--accent-soft); border-radius: 6px; padding: 1px 6px; margin-left: 6px; vertical-align: 1px; }
.pc-pick { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; font-size: 13px; color: var(--muted); }
.pc-pick .pc-sounds { margin-top: 0; }
#parents select, #parents input[type=email] { font: inherit; font-size: 14px; padding: 7px 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); max-width: 100%; }
#parents input[type=range] { accent-color: var(--accent); }
.pc-sw { width: 44px; height: 26px; border-radius: 999px; background: var(--st-new); border: 0; position: relative; transition: background .2s; flex: none; }
.pc-sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .25s cubic-bezier(.3,1.4,.5,1); box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.pc-sw[aria-checked="true"] { background: var(--accent); } .pc-sw[aria-checked="true"]::after { transform: translateX(18px); }
.pc-seg { display: inline-flex; background: var(--sunk); border-radius: 10px; padding: 3px; }
.pc-seg button { border: 0; background: none; padding: 6px 12px; border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--muted) !important; }
.pc-seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink) !important; box-shadow: var(--sh); }
.pc-seg button:disabled { opacity: .4; cursor: default; }
.pc-mail { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; font-size: 13px; color: var(--muted); }
.pc-confirm { margin-top: 10px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 14px; background: var(--accent-soft); border-radius: 12px; padding: 10px 12px 10px 14px; }
.pc-confirm p { margin: 0; flex: 1 1 240px; color: var(--ink) !important; }
.pc-btn { border: 0; border-radius: 10px; padding: 8px 16px; font-weight: 600; background: var(--accent); color: var(--accent-ink) !important; white-space: nowrap; }
.pc-btn.ghost { background: transparent; color: var(--ink) !important; border: 1px solid var(--line); }
.pc-btn.quiet { background: var(--sunk); color: var(--ink) !important; }
.pc-btn.danger { background: var(--st-rev); color: #fff !important; }
.pc-inline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; font-size: 13px; }
@media (prefers-reduced-motion: reduce) { #parents *, #parents *::before, #parents *::after { transition: none !important; animation: none !important; } }

/* ---------- Effets ---------- */
#fxc { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 50; }
#flash { position: fixed; inset: 0; background: #fff6e0; opacity: 0; pointer-events: none; z-index: 49; }
#hand { position: fixed; z-index: 60; width: 72px; pointer-events: none; animation: tapme 1s ease-in-out infinite; filter: drop-shadow(0 4px 8px #000a); }

@keyframes breathe { 50% { transform: scale(1.05); box-shadow: 0 0 0 10px #F5BC451a, 0 0 70px 14px #F5BC4577; } }
@keyframes glow { 0%, 100% { box-shadow: 0 0 0 0 #F5BC4588, 0 0 30px 4px #F5BC4566; } 50% { box-shadow: 0 0 0 14px #F5BC4500, 0 0 50px 12px #F5BC4599; } }
@keyframes popin { from { transform: translate(-50%, -50%) scale(0); } }
@keyframes pop { from { transform: scale(0); } }
@keyframes flicker { 0% { opacity: .95; } 40% { opacity: .7; } 70% { opacity: 1; } 100% { opacity: .8; } }
@keyframes bob { 50% { transform: translateY(-8px); } }
@keyframes talk { from { transform: translateY(0) rotate(-2deg); } to { transform: translateY(-4px) rotate(2deg); } }
@keyframes flame { from { transform: translateX(-50%) scale(1, 1); } to { transform: translateX(-50%) scale(.9, 1.12); } }
@keyframes enter { from { opacity: 0; transform: translateY(14px); } }
@keyframes shake { 20%, 60% { transform: translateX(-10px); } 40%, 80% { transform: translateX(10px); } }
@keyframes reveal { 50% { box-shadow: 0 0 0 8px #F5BC45aa, 0 0 40px 10px #F5BC4588; transform: scale(1.06); } }
@keyframes pulse { 50% { transform: scale(1.12); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes startpulse { 50% { transform: scale(1.5); } }
@keyframes dive { to { transform: translateY(24vmin) scale(.3); opacity: 0; } }
@keyframes bubble { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(-30px); opacity: 0; } }
@keyframes splash { 40% { transform: scale(1.06, .94); } }
@keyframes laugh { 50% { transform: translateY(-6px) rotate(3deg); } }
@keyframes roll { 50% { transform: translateX(80px) rotate(360deg); } 100% { transform: translateX(0) rotate(720deg); } }
@keyframes spinY { to { transform: rotateY(720deg); } }
@keyframes zoom { 40% { transform: translateX(120vw); } 41% { transform: translateX(-120vw); } 100% { transform: translateX(0); } }
@keyframes fly { 50% { transform: translateY(-30vh) rotate(-8deg); } }
@keyframes dance { 25% { transform: rotate(-12deg) translateY(-8px); } 75% { transform: rotate(12deg) translateY(-8px); } }
@keyframes confused { 30% { transform: rotate(-10deg); } 70% { transform: rotate(8deg); } }
@keyframes zz { 50% { transform: translateY(-12px); opacity: .6; } }
@keyframes look { 0%, 40% { transform: translateX(0); } 50%, 70% { transform: translateX(-3px); } 80%, 100% { transform: translateX(2px); } }
@keyframes floaty { 50% { transform: translateY(-24px); } }
@keyframes menace { to { transform: scale(1.04) rotate(-2deg); } }
@keyframes haunt { 50% { transform: translateY(-.12em); opacity: .55; } }
@keyframes boo { 50% { transform: translateY(-.5em) scale(1.3); opacity: .2; } }
@keyframes eggcrack { 0%, 60% { transform: rotate(0); } 20% { transform: rotate(-10deg); } 40% { transform: rotate(10deg); } 90% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(1.4); opacity: 0; } }
@keyframes hatch { from { transform: scale(0); opacity: 0; } }
@keyframes starpop { from { transform: scale(0) rotate(-90deg); } }
@keyframes spark { to { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }
@keyframes tapme { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-6px, -12px); } }
@keyframes holdfill { from { background-size: 0 100%; } to { background-size: 100% 100%; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- Direction « Livre vivant » : salle, sorcier, effets ---------- */
.room { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
#quest > *:not(.room), #reward > *:not(.room) { position: relative; z-index: 1; }
#quest > .wiz-slot, #quest > .guide, #quest > .overlay, #reward > .wiz-slot, #title > .wiz-slot { position: absolute; }
#quest > .overlay { z-index: 10; }
.bgR { position: absolute; inset: -3%; }
.pl { position: absolute; inset: 0; will-change: transform; transform: translate3d(calc(var(--px, 0) * var(--d)), calc(var(--py, 0) * var(--d)), 0); }
.pl svg { width: 100%; height: 100%; display: block; }
.pl-room { --d: -9px; }
.pl-candles { --d: -20px; }
.pl-fog { --d: -30px; }
.pl-fog i { position: absolute; width: 70%; height: 38%; border-radius: 50%; background: radial-gradient(closest-side, #bdb3e61c, transparent); filter: blur(8px); animation: drift 38s ease-in-out infinite alternate; }
.pl-fog i:nth-child(1) { left: -10%; top: 58%; }
.pl-fog i:nth-child(2) { left: 45%; top: 66%; animation-duration: 29s; animation-direction: alternate-reverse; }
.pl-fog i:nth-child(3) { left: 20%; top: 20%; width: 50%; opacity: .6; animation-duration: 45s; }
.rcandle { position: absolute; width: clamp(14px, 2.2vw, 30px); transform: scale(var(--s)); }
.rcandle svg { width: 100%; height: auto; overflow: visible; animation: bob 5s ease-in-out infinite; animation-delay: inherit; }
.rcandle .flame { transform-origin: 20px 18px; animation: flick .18s ease-in-out infinite alternate; }
.rcandle .halo { animation: haloPulse 2.4s ease-in-out infinite; }
.shaft { animation: shaft 7s ease-in-out infinite; }
.rspot { position: absolute; inset: 0; mix-blend-mode: screen; }
.rvignette { position: absolute; inset: 0; background: radial-gradient(ellipse 75% 70% at 55% 45%, transparent 50%, #05030ccc 100%); }
@keyframes drift { from { transform: translateX(-8%); } to { transform: translateX(12%); } }
@keyframes haloPulse { 0%, 100% { opacity: .5; } 50% { opacity: .85; } }
@keyframes shaft { 0%, 100% { opacity: .05; } 50% { opacity: .1; } }

.wiz-slot { pointer-events: none; z-index: 2; }
.wiz-slot .wiz { width: 100%; height: 100%; overflow: visible; display: block; }
#quest-wiz { left: max(2px, env(safe-area-inset-left, 0px)); bottom: calc(1vh + env(safe-area-inset-bottom, 0px)); width: min(21vw, 36vh); height: min(60vh, 56vw); }
#quest .stage { padding-left: min(19vw, 33vh); }
#reward-wiz { left: 4vw; bottom: 2vh; width: min(24vw, 40vh); height: min(62vh, 60vw); }
#title-wiz { left: 3vw; bottom: 2vh; width: min(22vw, 34vh); height: min(52vh, 50vw); z-index: 1; }
#create-preview { width: clamp(170px, 34vmin, 320px); aspect-ratio: 240 / 330; }
@media (max-aspect-ratio: 1/1) {
  #quest-wiz { width: min(28vw, 22vh); height: 26vh; }
  #quest .stage { padding-left: 0; padding-bottom: 20vh; }
  #reward-wiz { width: 26vw; height: 28vh; }
  #title-wiz { width: 30vw; height: 30vh; }
}
.flyer, .drop { position: fixed; z-index: 45; pointer-events: none; transform-origin: 50% 50%; will-change: transform; margin: 0; }
.flyer svg, .drop svg { width: 100%; height: 100%; overflow: visible; }
.flyer > .stone, .flyer > .tile { width: 100%; height: 100%; }
.pillar { position: fixed; top: 0; z-index: 44; pointer-events: none; transform-origin: 50% 100%; transform: scaleX(0); filter: blur(6px); border-radius: 50% 50% 0 0; mix-blend-mode: screen; background: linear-gradient(to top, #fff8e0, #ffd66b99 30%, #f5bc4500); }
.pressed { animation: pressed .3s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes pressed { 0% { transform: scale(.9); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }
.pic-card.right .il, .jar:hover .il { filter: drop-shadow(0 0 10px #F5BC4588); }
.charge-1 .rune-big { box-shadow: 0 0 50px #F5BC4555, inset 0 -8px 0 #0005; }
.charge-2 .rune-big { box-shadow: 0 0 70px 6px #F5BC4577, inset 0 -8px 0 #0005; }

/* ---------- Illustrations vivantes ---------- */
.il { overflow: visible; }
.il .p-eyes, .il .p-eye { animation: ilBlink 4.2s infinite; transform-box: fill-box; transform-origin: center; }
@keyframes ilBlink { 0%, 90%, 96%, 100% { transform: scaleY(1); } 93% { transform: scaleY(.1); } }
.il.alive { animation: ilHop .75s ease-in-out infinite; transform-origin: 50% 95%; }
@keyframes ilHop { 0%, 100% { transform: translateY(0) scale(1, 1); } 15% { transform: translateY(0) scale(1.06, .92); } 45% { transform: translateY(-9%) scale(.96, 1.06); } 75% { transform: translateY(0) scale(1.04, .96); } }
.il .p-leaves, .il .p-leaf, .il .p-thread, .il .p-vine, .il .p-flower { animation: sway 3s ease-in-out infinite; }
.il.alive .p-leaves, .il.alive .p-leaf, .il.alive .p-thread, .il.alive .p-flower { animation-duration: .8s; }
.il.alive .p-tail { animation: tail .9s ease-in-out infinite; }
.il.alive .p-head, .il.alive .p-moon, .il.alive .p-cloud, .il.alive .p-star, .il.alive .p-comet, .il.alive .p-banana { animation: tilt 1.5s ease-in-out infinite; }
.il.alive .p-whisk, .il.alive .p-tongue { animation: twitch .35s ease-in-out infinite alternate; }
.il.alive .p-wheel, .il.alive .p-swirl { animation: spin 1s linear infinite; transform-box: fill-box; transform-origin: center; }
.il .p-wings { animation: flutter 1.2s ease-in-out infinite; }
.il.alive .p-wings, .il.alive .p-wing { animation: flutter .25s ease-in-out infinite; }
.il .p-smoke, .il .p-steam, .il .p-zzz, .il .p-notes { animation: floatUp 2.4s ease-in-out infinite; }
.il .p-halo, .il .p-crown, .il .p-antenna, .il .p-glint, .il .p-sun, .il .p-wand { animation: bob 2.4s ease-in-out infinite; }
.il .p-stars, .il .p-glow { animation: twinkle 1.8s ease-in-out infinite; }
.il.alive .p-trunk, .il.alive .p-mane, .il.alive .p-body { animation: sway .7s ease-in-out infinite; }
.il.alive .p-eggs, .il.alive .p-shoe, .il.alive .p-shoe2 { animation: dance .5s ease-in-out infinite; }
.il.alive .p-plane { animation: planeFly 1.4s ease-in-out infinite; }
@keyframes planeFly { 50% { transform: translate(6px, -8px) rotate(-4deg); } }
.il.alive .p-tears, .il.alive .p-drops { animation: floatUp .8s ease-in-out infinite; }
.il.alive .p-lines, .il.alive .p-clouds { animation: slideL .5s linear infinite; }
.il.alive .p-left { animation: sway .4s ease-in-out infinite; } .il.alive .p-right { animation: sway .4s ease-in-out infinite reverse; }
.il .p-bub circle { animation: bubUp 1.4s ease-in infinite; transform-box: fill-box; transform-origin: center; }
.il .p-bub circle:nth-child(2) { animation-delay: .45s; } .il .p-bub circle:nth-child(3) { animation-delay: .9s; }
@keyframes sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes tail { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-16deg); } }
@keyframes tilt { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(5deg); } }
@keyframes twitch { to { transform: rotate(6deg); } }
@keyframes flutter { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.86); } }
@keyframes floatUp { 0%, 100% { transform: translateY(0); opacity: .9; } 50% { transform: translateY(-6px); opacity: .6; } }
@keyframes twinkle { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
@keyframes slideL { from { transform: translateX(6px); } to { transform: translateX(-6px); } }
/* parties animées de la deuxième série (illus2.js) */
.il .p-flame { animation: flicker 1.1s ease-in-out infinite; }
.il.alive .p-flame { animation-duration: .35s; }
@keyframes flicker { 0%, 100% { transform: scale(1, 1) skewX(0); } 30% { transform: scale(1.04, .96) skewX(-3deg); } 65% { transform: scale(.97, 1.05) skewX(3deg); } }
.il .p-bee { animation: buzz 1.8s ease-in-out infinite; } .il .p-bee2 { animation: buzz 1.5s ease-in-out -.6s infinite reverse; }
.il.alive .p-bee, .il.alive .p-bee2 { animation-duration: .45s; }
@keyframes buzz { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-6px, -5px); } 50% { transform: translate(-2px, 4px); } 75% { transform: translate(5px, -2px); } }
.il .p-flag { animation: sway 1.4s ease-in-out infinite; }
.il .p-bell { animation: sway 3s ease-in-out infinite; }
.il.alive .p-bell { animation: ring .45s ease-in-out infinite; }
@keyframes ring { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(14deg); } }
.il.alive .p-ball { animation: spin 1.4s linear infinite; }
.il.alive .p-bow { animation: bowSaw .4s ease-in-out infinite alternate; }
@keyframes bowSaw { from { transform: translate(-9px, 8px); } to { transform: translate(9px, -8px); } }
.il .p-wave { animation: handWave 1.4s ease-in-out infinite alternate; }
.il.alive .p-wave { animation-duration: .3s; }
@keyframes handWave { from { transform: rotate(-12deg); } to { transform: rotate(12deg); } }
.il .p-swirl2 { animation: twinkle .8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .il *, .il, .pl-fog i, .rcandle svg { animation: none !important; } }

/* ---------- Grimoire de poche (au-dessus du sorcier) ---------- */
/* Familles de lettres : voyelles (rose ambré) à gauche, consonnes (bleu nuit) à droite */
:root { --fam-v: #D9644A; --fam-v-soft: #F3C9B3; --fam-c: #4A63C9; --fam-c-soft: #C3CCF0; }
#quest > .pocket { position: absolute; z-index: 2; }
.pocket { left: max(6px, env(safe-area-inset-left, 0px)); width: min(22vw, 36vh);
  bottom: calc(1vh + min(60vh, 56vw) * .6 + 6px); pointer-events: none;
  transform-origin: 20% 100%; transform: scale(.86); opacity: .8; filter: saturate(.85);
  transition: transform .42s cubic-bezier(.3, 1.5, .5, 1), opacity .3s, filter .3s; }
.pocket.focus { transform: scale(1.25); opacity: 1; filter: none; z-index: 6; }
.intro-mode .pocket { display: none; }
.pk-book { position: relative; padding: 5px 6px calc(6px + var(--thick, 2px));
  border-radius: 8px 8px 10px 10px; background: linear-gradient(#8C3645, #6A2432);
  box-shadow: 0 6px 14px #0007, inset 0 1px 0 #ffffff30; animation: bob 5s ease-in-out infinite; }
.pocket.focus .pk-book { box-shadow: 0 0 34px 6px #F5BC4566, 0 6px 14px #0007; animation: none; }
/* Tranche des pages : s'épaissit à chaque lettre acquise */
.pk-stack { position: absolute; left: 7px; right: 7px; bottom: 5px; height: var(--thick, 2px);
  background: repeating-linear-gradient(#F6EACB 0 1px, #CDB483 1px 2px); border-radius: 0 0 4px 4px; transition: height .4s; }
.pk-pages { display: flex; gap: 0; border-radius: 3px; overflow: hidden;
  background: linear-gradient(90deg, #EAD8AE, #F6EACB 10%, #F6EACB 46%, #C9AE78 50%, #F6EACB 54%, #F6EACB 90%, #EAD8AE); }
.pk-page { flex: 1; padding: 6px 7px 5px; border-top: 3px solid var(--fam); }
.pk-page.v { --fam: var(--fam-v); --fam-soft: var(--fam-v-soft); padding-right: 9px; }
.pk-page.c { --fam: var(--fam-c); --fam-soft: var(--fam-c-soft); padding-left: 9px; }
.pk-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-flow: row dense; gap: 3px; }
.pk-chip { position: relative; display: grid; place-items: center; height: calc(min(22vw, 36vh) / 10); min-width: 0; border-radius: 5px; }
.pk-chip.duo { grid-column: span 2; }
.pk-chip .gl { height: 88%; width: auto; max-width: 100%; overflow: visible; }
.pk-chip > i, .fg-tile > i { font-style: normal; font-family: var(--read); font-weight: 700; line-height: 1; }
.gl polyline { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.gl .guide polyline { stroke-width: 12; }
.gl .ink polyline { stroke-width: 12; transition: stroke-dashoffset .6s ease-out; }
.pk-chip .gl .guide polyline { stroke-width: 9; stroke-dasharray: 0 20; }
.pk-chip .gl .ink polyline { stroke-width: 11; }
.gl .ink circle { transition: opacity .3s; }
/* Mystère : case vide teintée de sa famille */
.pk-chip.mys { background: color-mix(in srgb, var(--fam-soft) 35%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fam) 25%, transparent); }
.pk-chip.mys > i { font-size: calc(min(22vw, 36vh) / 16); color: color-mix(in srgb, var(--fam) 35%, transparent); }
/* Acquise : tracée à l'encre, fond de sa famille */
.pk-chip.got { background: var(--fam-soft); box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--fam) 35%, transparent); }
.pk-g { font-family: var(--read); font-weight: 700; font-size: calc(min(22vw, 36vh) / 12.5); line-height: 1; color: var(--ink); margin-top: -.08em; }
.pk-chip.duo .pk-g { letter-spacing: -.02em; }
.pk-chip.sealed { animation: pkSeal .6s cubic-bezier(.3, 1.6, .5, 1); }
/* En cours : contour doré qui pulse, tracé pointillé qui se remplit d'or */
.pk-chip.cur { background: #FFF6DA; box-shadow: 0 0 0 2px var(--gold), 0 0 10px 2px #F5BC4599; animation: pkCur 1.6s ease-in-out infinite; z-index: 1; }
.pk-chip.cur.got { background: var(--fam-soft); }
.gl .guide polyline, .gl .guide circle { stroke: #C9A868; fill: none; stroke-dasharray: 0 22; }
.gl .guide circle { fill: #C9A868; stroke: none; r: 5; }
.gl .ink polyline { stroke: #E7A928; } .gl .ink circle { fill: #E7A928; opacity: 0; }
.pk-chip.cur.veiled .gl, .fg-tile.veiled .gl { display: none; }
.pk-chip.cur:not(.veiled) > i, .fg-tile:not(.veiled) > i { display: none; }
.pk-chip.cur > i { font-size: calc(min(22vw, 36vh) / 14); color: #C08A1E; }
.pk-chip.pop, .fg-tile.pop { animation: pkLand .5s cubic-bezier(.3, 1.6, .5, 1); }
.pk-chip.tw { animation: pkTwinkle .9s ease-out; }
.pk-fly { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 26%;
  font-family: var(--read); font-weight: 700; font-size: clamp(56px, calc(var(--u) * 11), 104px); line-height: 1; color: #3A2208;
  background: radial-gradient(circle at 35% 25%, #FFF4D2, var(--gold) 70%); box-shadow: 0 0 40px 10px #F5BC4588; }
.pk-fly.duo { font-size: clamp(40px, calc(var(--u) * 8), 76px); }
@keyframes pkLand { 0% { transform: scale(1.5); } 100% { transform: scale(1); } }
@keyframes pkSeal { 0% { transform: scale(1.6); background: var(--gold); } 100% { transform: scale(1); } }
@keyframes pkCur { 50% { box-shadow: 0 0 0 2px var(--gold), 0 0 16px 5px #F5BC45cc; } }
@keyframes pkTwinkle { 25% { transform: scale(1.3); box-shadow: 0 0 12px 3px var(--gold); } 100% { transform: scale(1); } }

/* Atelier : même tuile que dans le livre, en grand, avec le liseré de la famille */
.fg-tile { position: relative; display: grid; place-items: center; height: clamp(64px, 11vh, 108px); aspect-ratio: 1;
  border-radius: 14px; background: #FFF6DA; border-top: 5px solid var(--fam, var(--gold));
  box-shadow: 0 0 0 3px var(--gold), 0 0 22px 4px #F5BC4577, 0 6px 14px #0006; }
.fg-tile.duo { aspect-ratio: 1.6; }
.forge.v { --fam: var(--fam-v); } .forge.c { --fam: var(--fam-c); }
.fg-tile .gl { height: 86%; width: auto; max-width: 92%; overflow: visible; }
.fg-tile > i { font-size: clamp(34px, 5.5vh, 54px); color: #C08A1E; animation: twinkle 1.6s ease-in-out infinite; }
.fg-tile.flying { width: 100%; height: 100%; }
.forge.emblem .fg-tile { border-top-color: var(--gold); }
.fg-base, .fg-fill { position: absolute; inset: 16%; display: grid; place-items: center; }
.fg-base svg, .fg-fill svg { width: 100%; height: 100%; }
.fg-base { color: #D8C9A2; }
.fg-fill { color: #E7A928; transition: clip-path .6s ease-out; filter: drop-shadow(0 0 4px #F5BC4588); }
@media (max-aspect-ratio: 1/1) {
  .pocket { left: calc(min(28vw, 22vh) + 10px); bottom: calc(2vh + env(safe-area-inset-bottom, 0px)); width: min(52vw, 34vh); transform-origin: 30% 100%; }
  .pk-chip { height: calc(min(52vw, 34vh) / 10); }
  .pk-chip.mys > i { font-size: calc(min(52vw, 34vh) / 16); }
  .pk-chip.cur > i { font-size: calc(min(52vw, 34vh) / 14); }
  .pk-g { font-size: calc(min(52vw, 34vh) / 12.5); }
}

/* ---------- Chasse aux lucioles (js/activities.js, A.catch) ---------- */
.stage.k-catch { justify-content: stretch; gap: 0; }
.catch { flex: 1; align-self: stretch; min-height: 0; position: relative; display: flex; flex-direction: column; align-items: center; gap: 1vh; }
.catch-top { display: flex; justify-content: center; align-items: center; min-height: 0; }
.catch-top .ear.small { width: clamp(64px, 10vmin, 90px); }
.catch-pic { width: clamp(96px, 17vmin, 160px); cursor: default; }
.catch-field { position: relative; flex: 1; width: min(100%, 1100px); min-height: 0; }
.catch-field .luciole { position: absolute; left: 0; top: 0; will-change: transform; }
.luciole { --lsz: clamp(88px, 15vmin, 130px); width: var(--lsz); height: calc(var(--lsz) * 1.22); touch-action: none; }
.luciole > * { position: absolute; display: block; }
.lu-wings { width: 150%; left: -25%; top: 2%; overflow: visible; }
.lu-wings .wl { transform-origin: 78px 46px; animation: luFlapL .11s ease-in-out infinite alternate; }
.lu-wings .wr { transform-origin: 82px 46px; animation: luFlapR .11s ease-in-out infinite alternate; }
.lu-body { left: 0; right: 0; bottom: 0; height: var(--lsz); border-radius: 50%; display: grid; place-items: center; border: 4px solid #1D1426;
  background: radial-gradient(circle at 50% 46%, #FFFDF2 0 42%, color-mix(in srgb, var(--lu) 55%, #FFFDF2) 62%, var(--lu) 86%);
  box-shadow: 0 0 22px 5px color-mix(in srgb, var(--lu) 70%, transparent), inset 0 -6px 0 #0000001a; }
.lu-t { font-family: var(--read); font-weight: 700; font-size: calc(var(--lsz) * .52); line-height: 1; color: var(--ink); margin-top: -.08em; white-space: nowrap; }
.lu-head { width: 64%; left: 18%; top: 0; overflow: visible; }
.luciole.left .lu-pup { transform: translateX(-2.5px); }
.luciole:not(.left) .lu-pup { transform: translateX(1px); }
.luciole.duo .lu-t { font-size: calc(var(--lsz) * .42); }
.mode-syl .luciole .lu-t { font-size: calc(var(--lsz) * .4); }
.luciole.wide { width: calc(var(--lsz) * 2.15); }
.luciole.wide .lu-body { border-radius: 999px; }
.luciole.wide .lu-t { font-size: calc(var(--lsz) * .36); }
.luciole.wide .lu-head { width: 34%; left: 33%; }
.luciole.wide .lu-wings { width: 90%; left: 5%; }
.luciole.caught .lu-body { background: radial-gradient(circle at 40% 35%, #FFF4D2, var(--gold) 70%); box-shadow: 0 0 40px 12px #F5BC45aa; }
.luciole.hint .lu-body { animation: reveal 1s ease-in-out infinite; }
.luciole.nope .lu-body, .luciole.nope .lu-head { animation: luNope .6s ease-in-out; }
.luciole.nope .lu-mouth { d: path("M44,46 Q50,56 56,46"); stroke: #F07BB8; stroke-width: 5; }
.catch-jar { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: clamp(76px, 12vmin, 116px); aspect-ratio: 1; pointer-events: none; z-index: 0; }
.catch-jar .cj-glass { width: 100%; height: 100%; overflow: visible; }
.catch-jar.gulp { animation: pulse .4s; }
.cj-in { position: absolute; left: 20%; right: 20%; top: 36%; bottom: 12%; display: flex; flex-wrap: wrap-reverse; align-content: flex-start; justify-content: center; gap: 3px; }
.cj-dot { width: 26%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #fff 0 20%, var(--lu) 60%); box-shadow: 0 0 10px 3px var(--lu); animation: twinkle 1.2s ease-in-out infinite, pop .4s; }
@keyframes luFlapL { from { transform: rotate(10deg); } to { transform: rotate(-22deg) scaleY(.8); } }
@keyframes luFlapR { from { transform: rotate(-10deg); } to { transform: rotate(22deg) scaleY(.8); } }
@keyframes luNope { 20% { transform: rotate(-16deg); } 40% { transform: rotate(14deg) scale(1.08); } 60% { transform: rotate(-10deg); } 80% { transform: rotate(6deg); } }

/* ---------- Magie (XP), niveaux, coffres, garde-robe ---------- */
.xp-panel { display: flex; align-items: center; gap: 8px; background: #0008; padding: 6px 8px 6px 6px; border-radius: 999px; border: 2px solid #F5BC4544; }
.lvl-badge { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #3A2208; font-family: var(--read); font-size: 24px;
  background: radial-gradient(circle at 40% 30%, #FFF4D2, var(--gold) 65%, #C98A1C); box-shadow: 0 0 14px #F5BC4566, inset 0 -3px 0 #0003; }
.lvl-badge.small { width: 34px; height: 34px; font-size: 18px; }
.lvl-badge.pop { animation: pulse .5s; }
.xp-bar { flex: 1; min-width: 60px; height: 18px; border-radius: 999px; background: #ffffff18; box-shadow: inset 0 2px 4px #0008; overflow: hidden; }
.xp-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #F5BC45, #FFE9AE); box-shadow: 0 0 12px #FFD66B; transition: width .25s ease-out; }
.xp-chest { position: relative; flex: 0 0 auto; width: 46px; height: 42px; display: block; }
.xp-chest .chest-svg { width: 100%; height: 100%; overflow: visible; }
.xp-chest.ready { animation: chestReady 1.2s ease-in-out infinite; filter: drop-shadow(0 0 10px #FFD66B); }
.xp-chest.pulse { animation: pulse .4s; }
.xp-pips { position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); display: flex; gap: 3px; }
.xp-pips i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid #1D1426; box-shadow: 0 0 0 1.5px #BDB3E688, 0 0 calc(var(--f, 0) * 10px) #FFD66B;
  background: linear-gradient(to top, #FFD66B calc(var(--f, 0) * 100%), #4D4380 calc(var(--f, 0) * 100%)); }
.xp-chest em { position: absolute; right: -6px; top: -8px; min-width: 22px; height: 22px; border-radius: 11px; background: #E0443A; color: #fff; font-style: normal; font-weight: 700; font-size: 14px; display: grid; place-items: center; border: 2px solid #fff; }
#create-xp { cursor: pointer; }
.rw-xp { position: relative; width: min(440px, 80vw); }
.rw-plus { position: absolute; right: 4px; top: -30px; font-family: var(--read); font-weight: 700; font-size: 28px; color: var(--gold); text-shadow: 0 2px 0 #0008; opacity: 0; }
.rw-plus.show { animation: enter .5s both; opacity: 1; }
.w-pet { animation: petBob 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.w-pet-fly { animation: floaty 2.2s ease-in-out infinite; }
.avatar-svg .w-pet, .avatar-svg .w-pet-fly { animation: none; }
.pet-svg, .wand-svg { width: 100%; height: 100%; overflow: visible; }
@keyframes petBob { 0%, 100% { transform: translateY(0) scale(1, 1); } 45% { transform: translateY(0) scale(1.04, .96); } 60% { transform: translateY(-6px) scale(.98, 1.03); } }
@keyframes chestReady { 0%, 100% { transform: rotate(0) scale(1); } 20% { transform: rotate(-10deg) scale(1.1); } 40% { transform: rotate(8deg) scale(1.1); } 60% { transform: rotate(0) scale(1); } }
/* Ouverture du coffre */
.chest-overlay { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4vh; background: radial-gradient(circle, #2C225766, #0A0718e6 70%); animation: enter .3s; }
.chest-big { width: clamp(160px, 34vmin, 300px); cursor: pointer; animation: chestReady 1.1s ease-in-out infinite; filter: drop-shadow(0 0 40px #FFD66B88); }
.chest-big .chest-svg { width: 100%; height: auto; overflow: visible; }
.chest-big .ch-lid { transform-origin: 12px 52px; transition: transform .45s cubic-bezier(.3, 1.6, .5, 1); }
.chest-big.open { animation: none; transform: scale(.8); transition: transform .4s; }
.chest-big.open .ch-lid { transform: rotate(-28deg) translate(-4px, -6px); }
.chest-cards { display: flex; gap: clamp(12px, 3vw, 36px); flex-wrap: wrap; justify-content: center; min-height: 10px; }
.treasure { width: clamp(110px, 21vmin, 190px); aspect-ratio: 1; border-radius: 24px; display: grid; place-items: center; padding: 8px;
  background: radial-gradient(circle at 50% 40%, #4D4380, #2C2257); border: 4px solid var(--gold); box-shadow: 0 0 30px #F5BC4588, inset 0 -6px 0 #0004;
  animation: treasureIn .6s cubic-bezier(.3, 1.6, .5, 1) var(--d) both, breathe 2s ease-in-out calc(var(--d) + .6s) infinite; }
.treasure .tr-art { width: 100%; height: 100%; display: block; }
.treasure .tr-art svg { width: 100%; height: 100%; overflow: visible; }
.treasure.gone { opacity: 0; transform: scale(.5); transition: opacity .35s, transform .35s; animation: none; }
.treasure.chosen { animation: pulse .45s; }
.flyer.treasure-fly { border-radius: 24px; padding: 8px; background: radial-gradient(circle at 50% 40%, #4D4380, #2C2257); border: 4px solid var(--gold); box-shadow: 0 0 30px #F5BC4588; }
.flyer.treasure-fly .tr-art { display: block; width: 100%; height: 100%; }
/* Placer le trésor : sur le sorcier (le porter) ou dans la malle (le garder) */
.chest-overlay.placing { gap: 0; background: radial-gradient(circle, #241C4Af2, #0A0718fa 70%); }
.ct-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "wiz hold trunk"; align-items: center; gap: clamp(16px, 4vw, 56px); width: min(1100px, 94vw); }
.ct-wiz { grid-area: wiz; justify-self: center; width: clamp(140px, 26vmin, 270px); padding: 10px; border-radius: 30px; transition: box-shadow .2s, transform .2s, background .2s; }
.ct-wiz .wiz { width: 100%; height: auto; overflow: visible; display: block; }
.ct-mid { grid-area: hold; display: grid; place-items: center; min-width: clamp(110px, 20vmin, 180px); }
.ct-hold { position: relative; z-index: 2; width: clamp(110px, 20vmin, 180px); aspect-ratio: 1; border-radius: 24px; padding: 8px; touch-action: none; cursor: grab;
  background: radial-gradient(circle at 50% 40%, #4D4380, #2C2257); border: 4px solid var(--gold); box-shadow: 0 0 30px #F5BC4588; animation: breathe 1.8s ease-in-out infinite, pop .4s; }
.ct-hold.dragging { animation: none; cursor: grabbing; }
.ct-hold .tr-art, .flyer.treasure-ghost .tr-art { display: block; width: 100%; height: 100%; pointer-events: none; }
.ct-hold .tr-art svg, .flyer.treasure-ghost .tr-art svg { width: 100%; height: 100%; overflow: visible; }
.ct-trunk { grid-area: trunk; justify-self: center; --cell: clamp(40px, min(5.4vw, 8vh), 64px); --gap: 6px; width: calc(5 * var(--cell) + 4 * var(--gap) + 36px); display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 22px;
  background: linear-gradient(#B06A32, #8A4E24 30%, #5E3315); border: 4px solid #1D1426; box-shadow: inset 0 0 0 4px #F5BC4555, 0 10px 0 #0005; transition: box-shadow .2s, transform .2s; }
.ct-head svg { width: 52px; margin: 0 auto; }
.ct-parts { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.ct-part { border-radius: 10px; background: #0003; color: var(--parch-2); display: flex; flex-direction: column; align-items: center; padding: 4px 0 2px; font-size: 11px; font-variant-numeric: tabular-nums; }
.ct-part svg { width: 60%; height: auto; max-width: 28px; }
.ct-part.on { background: var(--parch); color: #6B3A12; }
.ct-part.bump { animation: pulse .5s; }
.ct-slots { pointer-events: none; }
.ct-slots .wslot { background: #0003; }
.ct-wiz.droppable { box-shadow: 0 0 0 4px var(--gold), 0 0 40px #F5BC4588; }
.ct-trunk.droppable { box-shadow: inset 0 0 0 4px #F5BC4555, 0 0 0 4px var(--gold), 0 0 40px #F5BC4588; }
.ct-wiz.hot, .ct-trunk.hot { transform: scale(1.05); box-shadow: 0 0 0 6px #FFE08A, 0 0 70px #F5BC45cc; }
.ct-wiz.hot { background: #F5BC4522; }
/* Aperçu d'un trésor : la partie nouvelle brille (wizard.js, option hi) */
.w-hi-glow { animation: hiGlow 1.3s ease-in-out infinite; }
@keyframes hiGlow { 50% { opacity: .35; } }
.flyer.treasure-ghost { opacity: .45; border-radius: 24px; border: 4px dashed var(--gold); padding: 8px; }
@media (max-aspect-ratio: 1/1) { .ct-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "wiz trunk" "hold hold"; } }
@keyframes treasureIn { from { transform: translateY(-30vh) scale(.2) rotate(-20deg); opacity: 0; } }
@media (max-width: 700px), (max-aspect-ratio: 1/1) {
  .hud-xp { max-width: none; }
  .lvl-badge { width: 38px; height: 38px; font-size: 20px; }
}
.pics .pic-card.gest-card { width: clamp(120px, calc(var(--u) * 20), 200px); }

/* ---------- Acte II : Duel de baguettes ---------- */
.duel { display: flex; flex-direction: column; align-items: center; gap: 2.2vh; width: 100%; }
.duel-arena { position: relative; width: min(100%, 760px); height: clamp(110px, 22vh, 210px); }
.duel-foe { position: absolute; right: 0; bottom: 0; height: 100%; aspect-ratio: 1; }
.duel-foe .foe-body { width: 100%; height: 100%; transform-origin: 50% 95%; animation: foeSway 2.4s ease-in-out infinite; }
.duel-foe svg { width: 100%; height: 100%; overflow: visible; display: block; }
.duel-foe.laugh .foe-body { animation: foeLaugh .7s ease-in-out; }
.duel-foe.ko .foe-body { animation: foeKO 1.6s cubic-bezier(.3, 1.4, .5, 1) forwards; }
.duel-orb { position: absolute; top: 52%; width: clamp(38px, 7vmin, 64px); aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(circle at 45% 40%, #fff, #FFE9A8 35%, #F5BC45 60%, #B58CE6); box-shadow: 0 0 30px 10px #F5BC4588, 0 0 60px 20px #B58CE655; pointer-events: none; }
.duel-scroll { display: flex; gap: .06em; padding: .1em .35em .2em; }
.dsyl { font: inherit; color: inherit; background: none; border-radius: 14px; padding: 0 .06em .04em; transition: background .25s, box-shadow .25s, color .25s; }
.dsyl.next { animation: nextGlow 1.2s ease-in-out infinite; }
@keyframes nextGlow { 50% { background: #F5BC4533; box-shadow: 0 0 16px 2px #F5BC4566; } }
.dsyl.lit { color: #3A2208; background: radial-gradient(circle at 50% 40%, #FFF4D2, #FFD66B); box-shadow: 0 0 22px 4px #F5BC4588; }
.duel-scroll.charged { box-shadow: 0 0 44px 10px #F5BC4577, inset 0 -6px 0 #0000001f; }
.duel-scroll.colored .dsyl.lit { background: none; box-shadow: none; }
.duel-pics { animation: enter .35s ease-out; }
.flyer.duel-fly .il { width: 100%; height: 100%; overflow: visible; }
@keyframes foeSway { 50% { transform: rotate(-3deg) translateY(-3%); } }
@keyframes foeLaugh { 25% { transform: rotate(5deg) translateY(-6%); } 50% { transform: rotate(-4deg); } 75% { transform: rotate(4deg) translateY(-4%); } }
@keyframes foeKO { 0% { transform: none; } 18% { transform: translate(14%, -30%) rotate(25deg); } 55% { transform: translate(22%, 6%) rotate(95deg) scale(.95); } 70% { transform: translate(22%, 2%) rotate(88deg) scale(.95); } 100% { transform: translate(20%, 6%) rotate(92deg) scale(.95); } }

/* ---------- Acte II : Métamorphose ---------- */
.morph { display: flex; flex-direction: column; align-items: center; gap: 3vh; width: 100%; }
.morph-lab { display: flex; align-items: flex-end; justify-content: center; gap: clamp(8px, 3vw, 40px); }
.morph-prof { position: relative; width: clamp(130px, 26vmin, 240px); aspect-ratio: 200 / 210; }
.morph-prof .toad { width: 100%; height: 100%; overflow: visible; transition: opacity .2s, transform .2s; }
.morph-prof.changed .toad { opacity: 0; transform: scale(.4); }
.morph-prof .toad.happy { animation: toadHop .5s ease-out 2; }
.morph-into { position: absolute; left: 50%; top: 52%; width: 118%; aspect-ratio: 1; transform: translate(-50%, -50%) scale(0); pointer-events: none; }
.morph-into .il { width: 100%; height: 100%; overflow: visible; }
.morph-into .morph-hat { position: absolute; left: 30%; top: -6%; width: 40%; transform: rotate(-12deg); overflow: visible; }
.morph-bubble { position: relative; align-self: flex-start; }
.morph-bubble .pic-card { width: clamp(100px, 19vmin, 170px); border-radius: 50%; animation: breathe 2.6s ease-in-out infinite; }
.morph-bubble i { position: absolute; border-radius: 50%; background: linear-gradient(170deg, var(--parch), var(--parch-2)); box-shadow: 0 4px 10px #0006; }
.morph-bubble .b1 { width: 22px; height: 22px; left: -26px; bottom: 6px; }
.morph-bubble .b2 { width: 13px; height: 13px; left: -46px; bottom: -12px; }
.morph-scrolls { gap: clamp(10px, 2.4vw, 28px); }
.morph-scroll { position: relative; padding: .12em .5em .24em; border-radius: 10px; font-family: var(--read); font-weight: 700; line-height: 1.1;
  font-size: clamp(34px, calc(var(--u) * 7), 64px); color: var(--ink); background: linear-gradient(170deg, var(--parch), var(--parch-2));
  border: 3px solid var(--parch-edge); box-shadow: inset 0 -6px 0 #0000001f, 0 8px 20px #0008; transition: transform .15s, opacity .3s; white-space: nowrap; }
.morph-scroll::before, .morph-scroll::after { content: ''; position: absolute; top: -8px; bottom: -8px; width: 14px; border-radius: 8px;
  background: linear-gradient(90deg, #C9A868, #F4E3B8, #C9A868); border: 3px solid var(--parch-edge); }
.morph-scroll::before { left: -10px; } .morph-scroll::after { right: -10px; }
.morph-scroll:active { transform: scale(.95); }
.morph-scroll.right { box-shadow: 0 0 34px 6px #5CD6A088, inset 0 -6px 0 #0000001f; border-color: var(--potion); }
@keyframes toadHop { 40% { transform: translateY(-14%) scaleY(1.05); } }
@media (prefers-reduced-motion: reduce) { .duel-foe .foe-body, .morph-bubble .pic-card { animation: none; } }
@media (max-aspect-ratio: 1/1) {
  .morph-scrolls { flex-direction: column; align-items: center; }
  .duel-arena { height: clamp(90px, 16vh, 160px); }
}
.floor-title .act-tag { display: block; margin-bottom: 4px; font-style: normal; font-family: var(--display); font-size: 15px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); text-shadow: 0 0 12px #F5BC4588; }

/* ---------- Acte II : Cadenas enchanté ---------- */
.lock { display: flex; flex-direction: column; align-items: center; gap: 2vh; }
.lock-top { display: flex; align-items: center; gap: clamp(12px, 3vw, 40px); }
.garg-btn { width: clamp(110px, 21vmin, 190px); aspect-ratio: 200 / 170; background: none; }
.garg-btn .garg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 8px 14px #0008); }
.garg-btn .garg-wl, .garg-btn .garg-wr { transform-box: fill-box; animation: gargWing 3s ease-in-out infinite; }
.garg-btn .garg-wl { transform-origin: 100% 100%; } .garg-btn .garg-wr { transform-origin: 0 100%; animation-direction: reverse; }
.garg-btn.talk .garg-mouth { transform-box: fill-box; transform-origin: 50% 0; animation: gargTalk .18s ease-in-out 6 alternate; }
.garg-btn.grr { animation: shake .45s; }
.garg-btn.happy .garg-eyes { transform-box: fill-box; transform-origin: center; transform: scaleY(.45); transition: transform .2s; }
.lock-pic { width: clamp(90px, 17vmin, 150px); }
.lock-plate { position: relative; padding: 18px 20px 20px; border-radius: 30px; background: linear-gradient(170deg, #C9CFDD, #8E96A6); border: 5px solid #1D1426;
  box-shadow: inset 0 -8px 0 #0003, 0 10px 24px #0009; margin-top: 44px; }
.lock-shackle { position: absolute; left: 50%; bottom: 100%; width: 42%; transform: translate(-50%, 12px); overflow: visible; transition: transform .5s cubic-bezier(.3, 1.6, .5, 1); z-index: -1; }
.lock.open .lock-shackle { transform: translate(-50%, -18px) rotate(-14deg); transform-origin: 10% 100%; }
.dials { display: flex; gap: clamp(6px, 1.4vw, 14px); }
.dial { position: relative; min-width: clamp(64px, 11vmin, 104px); height: clamp(84px, 15vmin, 136px); border-radius: 18px; display: grid; place-items: center; overflow: hidden;
  font-family: var(--read); font-weight: 700; font-size: clamp(44px, 9vmin, 84px); line-height: 1; padding: 0 .12em .1em; color: var(--ink);
  background: linear-gradient(180deg, #CDBF9E, var(--parch) 22%, var(--parch-2) 78%, #CDBF9E); border: 4px solid #1D1426; box-shadow: inset 0 0 0 3px #ffffff55; }
.dial:not(.fixed)::before, .dial:not(.fixed)::after { content: ''; position: absolute; left: 50%; width: 0; height: 0; border: 8px solid transparent; transform: translateX(-50%); opacity: .55; }
.dial:not(.fixed)::before { top: 3px; border-bottom-color: #6a5a3a; } .dial:not(.fixed)::after { bottom: 3px; border-top-color: #6a5a3a; }
.dial.fixed { background: linear-gradient(180deg, #d9c88a, #FFE9AE 30%, #F5C451 80%, #d9a52e); pointer-events: none; }
.dial.fixed.muet { color: var(--ghost-ink); background: linear-gradient(180deg, #b8b0cc, #E9E4FF 40%, #cfc6e6); }
.dial.roll .dial-g { animation: dialRoll .22s ease-out; }
.dial .dial-g { display: block; }
.dial.wrong { animation: shake .45s; box-shadow: inset 0 0 0 4px #E0443A; }
.dial.lit { box-shadow: 0 0 26px 6px #F5BC4599, inset 0 0 0 3px #fff; }
.dial.reveal { animation: reveal 1s ease-in-out 2; }
.lock-key { width: clamp(64px, 11vmin, 96px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; color: #3A2208;
  background: radial-gradient(circle at 40% 35%, #FFE9AE, var(--gold)); box-shadow: 0 0 30px #F5BC4566, inset 0 -5px 0 #0003; }
.lock-key svg { width: 62%; transform: rotate(-30deg); }
.lock-key:active { transform: scale(.94); }
.lock.open .lock-key { opacity: 0; transition: opacity .3s; }
@keyframes dialRoll { 0% { transform: translateY(0); } 45% { transform: translateY(-120%); opacity: 0; } 55% { transform: translateY(120%); opacity: 0; } 100% { transform: translateY(0); } }
@keyframes gargWing { 50% { transform: rotate(-8deg); } }
@keyframes gargTalk { to { transform: scaleY(1.5); } }

/* ---------- Acte II : Hibou messager ---------- */
.owl-scene { display: flex; flex-direction: column; align-items: center; gap: 3.5vh; width: 100%; }
.owl-row { display: flex; align-items: center; gap: clamp(8px, 2vw, 24px); animation: owlIn .9s cubic-bezier(.3, 1.3, .5, 1); }
.owl-bird { width: clamp(90px, 17vmin, 150px); aspect-ratio: 160 / 150; }
.owl-bird svg, .flyer.owl-fly svg { width: 100%; height: 100%; overflow: visible; }
.owl-svg .ow-wl, .owl-svg .ow-wr { transform-box: fill-box; animation: owlFlap .5s ease-in-out infinite alternate; }
.owl-svg .ow-wl { transform-origin: 100% 0; } .owl-svg .ow-wr { transform-origin: 0 0; animation-direction: alternate-reverse; }
.owl-letter { position: relative; }
.owl-letter .seal { position: absolute; left: -16px; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #F07A8A, #B8302A); border: 3px solid #1D1426; }
.owl-letter.sent { opacity: .45; transform: scale(.94); transition: opacity .4s, transform .4s; }
.owl-portraits { gap: clamp(12px, 3vw, 36px); }
.portrait { position: relative; width: clamp(104px, calc(var(--u) * 18), 180px); aspect-ratio: 5 / 6; padding: 10px; border-radius: 14px;
  background: linear-gradient(160deg, #F5C451, #B07A2A); border: 4px solid #1D1426; box-shadow: inset 0 0 0 4px #FFE9AE88, 0 10px 22px #0009; transition: transform .15s, opacity .3s; }
.portrait .pframe { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 8px; background: radial-gradient(circle at 50% 40%, var(--parch), var(--parch-2)); border: 3px solid #1D1426; }
.portrait .pframe .il { width: 92%; height: 92%; overflow: visible; }
.portrait:active { transform: scale(.95); }
.portrait.right { box-shadow: 0 0 34px 8px #5CD6A088, inset 0 0 0 4px #FFE9AE88; }
.portrait.nope { animation: shake .45s; }
.portrait.got-mail::after { content: ''; position: absolute; right: -12px; top: -12px; width: 36px; height: 26px; border-radius: 4px; background: linear-gradient(170deg, var(--parch), var(--parch-2)); border: 3px solid #1D1426; animation: pulse .4s; }
.owl-gift { position: absolute; left: -18%; bottom: -10%; width: 58%; aspect-ratio: 1; animation: treasureIn .6s cubic-bezier(.3, 1.6, .5, 1); filter: drop-shadow(0 6px 10px #0009); }
.owl-gift .il { width: 100%; height: 100%; overflow: visible; }
@keyframes owlIn { from { transform: translate(60vw, -30vh) rotate(12deg); opacity: 0; } }
@keyframes owlFlap { to { transform: rotate(-16deg); } }

/* « dans » : la chose au milieu du contenant */
.scene.dans { position: relative; }
.scene.dans .box { width: 100%; height: 100%; }
.scene.dans .inside { position: absolute; left: 25%; top: 30%; width: 50%; height: 50%; }
@media (prefers-reduced-motion: reduce) { .owl-svg .ow-wl, .owl-svg .ow-wr, .garg-btn .garg-wl, .garg-btn .garg-wr, .owl-row { animation: none; } }
@media (max-aspect-ratio: 1/1) { .lock-top { gap: 10px; } .dial { min-width: 56px; } }

/* Écoute magique : perles de son (aucune lettre avant la réponse) */
.pa { display: flex; flex-direction: column; align-items: center; gap: 3.2vh; width: 100%; }
.pa-ball { width: clamp(96px, calc(var(--u) * 15), 150px); aspect-ratio: 1; filter: drop-shadow(0 8px 14px #0008); transition: transform .15s; }
.pa-ball.small { width: clamp(72px, calc(var(--u) * 11), 110px); }
.pa-ball:active { transform: scale(.94); }
.pa-ball .ball-core { transition: opacity .3s; }
.pa-ball.glow { filter: drop-shadow(0 0 22px #7CE0FF) drop-shadow(0 8px 14px #0008); }
.pa-ball.glow .ball-core { opacity: 1; animation: ballPulse .9s ease-in-out infinite; }
@keyframes ballPulse { 50% { opacity: .5; } }
.pa-pearls { display: flex; gap: clamp(10px, 2vw, 22px); justify-content: center; align-items: center; min-height: clamp(62px, calc(var(--u) * 10), 96px); flex-wrap: wrap; }
.pa-pearls.tray { min-width: min(80vw, 560px); padding: 10px 18px; border-radius: 999px; background: #0000002e; box-shadow: inset 0 3px 10px #0006; }
.pearl { width: clamp(52px, calc(var(--u) * 8.5), 84px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #FFFFFF, #9BE9FF 38%, #3C8FD0 100%); box-shadow: 0 0 18px 2px #7CE0FF88, inset 0 -5px 0 #0003;
  border: 3px solid #1D1426; color: var(--ink); font-weight: 700; font-size: clamp(30px, calc(var(--u) * 5.5), 54px); line-height: 1; padding-bottom: .1em; transition: transform .2s, background .4s; }
.pearl.sing { transform: scale(1.28); box-shadow: 0 0 36px 10px #7CE0FFcc, inset 0 -5px 0 #0003; }
.pearl.letter { background: linear-gradient(170deg, var(--parch), var(--parch-2)); box-shadow: 0 0 22px 4px #F5BC4577, inset 0 -5px 0 #0002; border-radius: 30%; }
.pa-pop { animation: paPop .42s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes paPop { 0% { transform: scale(.2); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.pa-word { font-size: clamp(44px, calc(var(--u) * 9), 90px); }
.pa-hit { color: #E3694B !important; text-shadow: 0 0 14px #F5BC45; }
.pic-card.big { width: clamp(130px, calc(var(--u) * 24), 230px); }
.pa-tools { display: flex; gap: clamp(22px, 5vw, 60px); align-items: center; }
.pa-pot { width: clamp(110px, calc(var(--u) * 17), 170px); aspect-ratio: 1; display: grid; place-items: center; transition: transform .15s; filter: drop-shadow(0 8px 12px #0008); }
.pa-pot > .il { width: 100%; height: 100%; overflow: visible; }
.pa-pot:active { transform: scale(.92) rotate(-4deg); }
.pa-cast { width: clamp(78px, calc(var(--u) * 12), 116px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; color: #3A2208;
  background: radial-gradient(circle at 40% 35%, #FFE9AE, var(--gold)); box-shadow: inset 0 -5px 0 #0003; opacity: .35; transition: opacity .3s, transform .15s; }
.pa-cast svg { width: 58%; }
.pa-cast.ready { opacity: 1; box-shadow: 0 0 30px #F5BC4599, inset 0 -5px 0 #0003; animation: reveal 1.4s ease-in-out infinite; }
.pa-cast:active { transform: scale(.92); }

/* Miroir magique (grandes lettres) */
.mirror-scene { display: flex; flex-direction: column; align-items: center; gap: clamp(14px, 3vh, 30px); }
.mirror { position: relative; width: clamp(150px, 26vmin, 230px); aspect-ratio: 200 / 260; display: grid; place-items: center; filter: drop-shadow(0 10px 24px #0008); }
.mirror .mir-frame { position: absolute; inset: 0; width: 100%; height: 100%; }
.mir-cap, .mir-twins { position: relative; margin-top: -8%; font-family: var(--read); font-weight: 700; line-height: 1; color: #3A2E6B; text-shadow: 0 0 18px #FFFFFFCC; }
.mir-cap { font-size: clamp(72px, 14vmin, 128px); animation: mirFloat 2.6s ease-in-out infinite; }
.mir-twins { display: flex; gap: .12em; font-size: clamp(56px, 10vmin, 96px); }
.mir-twins[hidden], .mir-cap[hidden] { display: none; }
.mir-twins b:last-child { color: #7A4FC4; }
.mirror.merged { animation: mirGlow 1.2s ease-out; }
.mirror.nope { animation: mirShiver .45s; }
.mir-fly { font-family: var(--read); font-weight: 700; font-size: clamp(52px, 9vmin, 84px); color: var(--parch); text-shadow: 0 0 20px #FFD66B; }
@keyframes mirFloat { 50% { transform: translateY(-6px) scale(1.03); } }
@keyframes mirGlow { 0% { filter: drop-shadow(0 0 0 #FFD66B); } 30% { filter: drop-shadow(0 0 40px #FFD66B) brightness(1.3); } 100% { filter: drop-shadow(0 10px 24px #0008); } }
@keyframes mirShiver { 25% { transform: rotate(-3deg); } 75% { transform: rotate(3deg); } }
.portrait .plaque { display: block; margin-top: 4px; padding: 0 .3em .08em; border-radius: 8px; background: #F3E3BD; border: 2px solid #A8701E; color: var(--ink); font-family: var(--read); font-weight: 700; font-size: clamp(22px, 4vmin, 34px); line-height: 1.15; }
.portrait:has(.plaque) { aspect-ratio: auto; }
.portrait:has(.plaque) .pframe { height: auto; aspect-ratio: 1; }

/* Cadenas : syllabe sans image, cases vides, plateau de toutes les lettres (écriture dès l'étage 2) */
.lock-rune { font-family: var(--display); font-size: clamp(56px, 10vmin, 96px); color: #BDB3E6; }
.dial.slot.empty { background: #2A2250; box-shadow: inset 0 4px 10px #0008; }
.dial.slot.empty .dial-g::after { content: ''; display: inline-block; width: .5em; border-bottom: 4px dashed #BDB3E688; }
.lock-tray { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: min(92vw, 760px); }
.tray-g { min-width: clamp(44px, 7vmin, 60px); padding: .05em .25em .12em; border-radius: 12px; font-family: var(--read); font-weight: 700; font-size: clamp(26px, 4.6vmin, 40px);
  color: var(--ink); background: linear-gradient(#FFF6DC, #F3E3BD); border: 3px solid #A8701E; box-shadow: 0 3px 0 #6B3A12; }
.tray-g:active { transform: translateY(2px); box-shadow: 0 1px 0 #6B3A12; }
.lock.has-tray .lock-top { transform: scale(.8); transform-origin: top center; }

/* Sceau du gardien (L6) : le boss scellé sur la carte */
.node.sealed { filter: saturate(.6); }
.node .nseal { position: absolute; right: -10px; bottom: -8px; width: 38px; height: 38px; filter: drop-shadow(0 2px 4px #0008); animation: sealPulse 2.2s ease-in-out infinite; }
.node .nseal svg { width: 100%; height: 100%; }
@keyframes sealPulse { 50% { transform: scale(1.12) rotate(-6deg); } }
.rw-seal svg { width: clamp(90px, 18vmin, 150px); height: auto; }
.reward-box.t-guard.broken .rw-seal { animation: sealBreak 1.2s ease-out forwards; }
@keyframes sealBreak { 40% { transform: scale(1.3) rotate(10deg); } 100% { transform: scale(.2) rotate(40deg); opacity: 0; } }
/* Test magique : le parent choisit après la création du sorcier */
.place-choice { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: #0B0716CC; padding: 16px; }
.pc-card { max-width: 420px; background: var(--parch); color: var(--ink); border-radius: 18px; padding: 22px 22px 16px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 20px 60px #000A; font-family: var(--read); }
.pc-q { font-size: 22px; font-weight: 700; margin: 0; }
.pc-help { font-size: 14px; opacity: .8; margin: 4px 0 0; }
.pc-card .pbtn { align-self: stretch; font-size: 18px; padding: 12px 16px; }

/* Chaudron des mots (L5) */
.fab { display: flex; flex-direction: column; align-items: center; gap: clamp(10px, 2.4vh, 22px); }
.fab-recipe { display: flex; align-items: center; gap: .4em; font-family: var(--read); font-weight: 700; font-size: clamp(40px, 8vmin, 72px); }
.fab-base { padding: .05em .45em .15em; }
.fab-plus { color: var(--gold); }
.fab-potion { position: relative; display: grid; place-items: center; width: 1.6em; }
.fab-potion svg { width: 100%; height: auto; }
.fab-potion b { position: absolute; top: 44%; font-size: .5em; color: #fff; text-shadow: 0 2px 0 #1D1426; }
.fab-pot { width: clamp(110px, 18vmin, 170px); }
.fab-pot.boil { animation: fabBoil .6s ease-in-out 2; }
@keyframes fabBoil { 50% { transform: scale(1.1, .92); } }
.pic-card.fab-jump { animation: fabJump 1s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes fabJump { 0% { transform: translateY(80px) scale(.3); opacity: 0; } 60% { transform: translateY(-30px) scale(1.15); opacity: 1; } 100% { transform: none; } }
.fab-scene { display: flex; align-items: center; gap: clamp(14px, 4vw, 40px); }
.fab-obj { width: clamp(120px, 22vmin, 200px); transition: transform 1s cubic-bezier(.4, 1.4, .5, 1), filter 1s; transform-origin: 50% 90%; }
.fab-obj.o-ballon.s-down { transform: scale(.6, .32) translateY(40%); filter: saturate(.6); }
.fab-obj.o-tour.s-down { transform: scaleY(.28) rotate(-6deg); filter: brightness(.8); }
.fab-obj.nope { animation: mirShiver .45s; }
.fab-goal { display: flex; align-items: center; gap: 10px; }
.fab-arrow { font-size: 40px; color: var(--gold); }
.fab-bubble { padding: 12px; border-radius: 50%; background: #FFFFFF22; border: 3px dashed #FFFFFF66; }
.fab-bubble .fab-obj { width: clamp(80px, 14vmin, 130px); transition: none; }
.fab-spells { gap: clamp(18px, 3vw, 34px); }

/* Livres vivants (L4) */
.book-wrap { display: flex; flex-direction: column; align-items: center; gap: clamp(10px, 2.2vh, 20px); width: 100%; }
.lbook { display: flex; flex: none; width: min(92vw, 760px); min-height: clamp(150px, 28vh, 240px); filter: drop-shadow(0 12px 24px #0009); }
.book-page { position: relative; flex: 1; background: linear-gradient(90deg, #F3E3BD, #FFF6DC 30%, #FFF6DC); border: 4px solid #6B3A12; display: grid; place-items: center; padding: 14px 18px; }
.book-l { border-radius: 16px 4px 4px 16px; border-right-width: 2px; background: linear-gradient(270deg, #E8D3A4, #FFF6DC 30%); }
.book-r { border-radius: 4px 16px 16px 4px; border-left-width: 2px; }
.book-n { position: absolute; bottom: 4px; left: 12px; font-family: var(--display); color: #A8701E; font-size: 16px; }
.book-pic { width: 100%; display: grid; place-items: center; }
.book-pic .scene { transform: scale(.9); }
.book-sleep { font-size: 54px; color: #D8C08A; animation: mirFloat 2.4s ease-in-out infinite; }
.book-pic.awake { animation: mirGlow 1.2s ease-out; }
.book-text { position: relative; font-family: var(--read); font-weight: 700; color: var(--ink); font-size: clamp(34px, 6.4vmin, 60px); line-height: 1.25; text-align: center; }
.book-line + .book-line { margin-top: .2em; }
.book-text .w { display: inline-block; white-space: nowrap; } /* un mot ne se coupe jamais en deux */
.book-q { font-family: var(--display); font-size: 80px; color: #A8701E; }
.book-opts .scene-card { min-width: clamp(120px, 20vmin, 180px); }
.scene.act { display: inline-grid; place-items: center; width: clamp(90px, 16vmin, 150px); }
.scene.act .il { width: 100%; height: auto; }
.act-roll .il { animation: actRoll 1.6s linear infinite; }
.act-spin .il { animation: actSpin 1.2s ease-in-out infinite; }
.act-zoom .il { animation: actZoom 1.1s ease-in-out infinite; }
.act-wave .il { animation: actWave 1s ease-in-out infinite; transform-origin: 50% 90%; }
.act-sing .il { animation: actSing .8s ease-in-out infinite; }
.act-dance .il { animation: actDance .9s ease-in-out infinite; transform-origin: 50% 100%; }
.act-fly .il { animation: actFly 1.8s ease-in-out infinite; }
.scene.act::after { position: absolute; font-size: 28px; }
.scene.act { position: relative; }
.act-sing::after { content: '♪'; top: -6px; right: -6px; color: #7A4FC4; animation: mirFloat 1s ease-in-out infinite; }
.act-fly::after { content: '✦'; bottom: -4px; left: 40%; color: #F5BC45; }
.act-zoom::after { content: '≡'; left: -14px; top: 40%; color: #A8701E; }
@keyframes actRoll { to { transform: rotate(360deg); } }
@keyframes actSpin { 50% { transform: scaleX(-1); } }
@keyframes actZoom { 0% { transform: translateX(-18%); } 50% { transform: translateX(18%) skewX(-10deg); } 100% { transform: translateX(-18%); } }
@keyframes actWave { 25% { transform: rotate(-10deg); } 75% { transform: rotate(10deg); } }
@keyframes actSing { 50% { transform: scale(1.06, .94) translateY(4%); } }
@keyframes actDance { 25% { transform: rotate(-12deg) translateY(-6%); } 75% { transform: rotate(12deg) translateY(-6%); } }
@keyframes actFly { 50% { transform: translateY(-22%) rotate(-4deg); } }

/* ---------- Acte II, étage 9 : Garde-robe des sons ---------- */
.costume { display: flex; flex-direction: column; align-items: center; gap: 3vh; width: 100%; }
.wardrobe { position: relative; width: min(92vw, 640px); padding: 26px 28px 18px; border-radius: 28px 28px 10px 10px;
  background: linear-gradient(180deg, #5a3a22, #3a2414); border: 5px solid #1D1426; box-shadow: inset 0 0 0 4px #8a5a3055, inset 0 20px 40px #0008, 0 12px 28px #0009; }
.wr-door { position: absolute; top: 6px; bottom: 6px; width: 12%; background: linear-gradient(90deg, #6e4424, #4a2c16); border: 4px solid #1D1426; border-radius: 14px; }
.wr-l { left: -9%; transform: perspective(300px) rotateY(28deg); transform-origin: 100% 50%; }
.wr-r { right: -9%; transform: perspective(300px) rotateY(-28deg); transform-origin: 0 50%; }
.wr-rail { position: absolute; left: 20px; right: 20px; top: 22px; height: 8px; border-radius: 4px; background: #C9CFDD; border: 3px solid #1D1426; }
.wr-hangers { position: relative; display: flex; justify-content: center; gap: clamp(8px, 3vw, 30px); padding-top: 4px; }
.hanger { position: relative; width: clamp(84px, calc(var(--u) * 15), 132px); aspect-ratio: 120 / 130; background: none; transform-origin: 50% 4%;
  animation: hangerSway 2.8s ease-in-out infinite; animation-delay: var(--d, 0s); transition: opacity .3s; }
.hanger .hg-svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 6px 8px #0007); }
.hanger .hg-g { position: absolute; left: 50%; top: 58%; transform: translate(-50%, -50%); padding: 0 .16em .08em; border-radius: 10px; background: var(--parch);
  border: 3px solid #1D1426; font-family: var(--read); font-weight: 700; font-size: clamp(26px, calc(var(--u) * 5.4), 46px); line-height: 1.05; color: var(--ink); white-space: nowrap; }
.hanger:active { transform: scale(.95); }
.hanger.dim { opacity: .3; animation: none; }
.hanger.right .hg-svg { filter: drop-shadow(0 0 18px #5CD6A0); }
.hanger.reveal { animation: reveal 1s ease-in-out 2; }
.cos-row { display: flex; align-items: center; gap: clamp(10px, 2.4vw, 28px); }
.cos-row .ear { width: clamp(56px, 9vmin, 80px); }
.cos-pic { width: clamp(90px, 17vmin, 150px); }
.cos-word { font-size: clamp(44px, calc(var(--u) * 9), 88px); padding: .1em .45em .2em; }
.cos-slot { display: inline-block; min-width: 1.2em; text-align: center; border-radius: 12px; transition: background .3s; }
.cos-slot > i { display: inline-block; width: 1.1em; height: .9em; margin: 0 .05em; vertical-align: -.1em; border: 4px dashed #8a6a3a; border-radius: 10px; animation: slotBlink 1.4s ease-in-out infinite; }
.cos-slot.filled { color: #2E9C6E; background: #5CD6A022; animation: pulse .5s; }
.cos-slot.misfit { color: #B8302A; background: #E0443A22; }
.cos-word.strut { animation: strut .5s ease-in-out 3; transform-origin: 50% 100%; }
.cos-fly { display: grid; place-items: center; width: 100%; height: 100%; font-family: var(--read); font-weight: 700; font-size: clamp(34px, calc(var(--u) * 7), 64px); color: var(--ink); }
.flyer.cos-away { display: flex; align-items: center; justify-content: center; font-family: var(--read); font-weight: 700; font-size: clamp(44px, calc(var(--u) * 9), 88px); color: #2E9C6E; }
@keyframes hangerSway { 50% { transform: rotate(4deg); } }
@keyframes slotBlink { 50% { border-color: #F5BC45; } }
@keyframes strut { 25% { transform: translateX(-6%) rotate(-5deg); } 75% { transform: translateX(6%) rotate(5deg); } }

/* ---------- Acte II, étage 9 : Salle des sortilèges ---------- */
.enchant { display: flex; flex-direction: column; align-items: center; gap: 2.4vh; width: 100%; }
.ench-room { position: relative; width: min(92vw, 760px); height: clamp(190px, 38vh, 330px); border-radius: 24px;
  background: radial-gradient(ellipse at 50% 110%, #5a3a2288, transparent 60%), linear-gradient(180deg, #2a1e3e55, #1a1230aa); border: 4px solid #1D1426; box-shadow: inset 0 0 40px #000a; }
.ench-obj { position: absolute; width: clamp(88px, calc(var(--u) * 16), 140px); aspect-ratio: 1; transform: translate(-50%, -50%); background: none; transition: transform .6s cubic-bezier(.3, 1.4, .5, 1), left .6s, top .6s, opacity .3s; }
.ench-obj .il { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 6px 8px #0008); }
.ench-obj.sleep .il { filter: saturate(.55) brightness(.8) drop-shadow(0 6px 8px #0008); animation: snooze 3.2s ease-in-out infinite; animation-delay: var(--d, 0s); }
.ench-obj .zz { position: absolute; right: -6%; top: -14%; font-family: var(--display); font-weight: 700; font-size: 22px; color: #BDB3E6; animation: floatUp 2.4s ease-in-out infinite; pointer-events: none; }
.ench-obj .zz b { font-size: 16px; margin-left: 2px; }
.ench-obj:not(.sleep) .zz { display: none; }
.ench-obj.wobble { animation: wobble .6s; }
.ench-obj.awake { filter: drop-shadow(0 0 18px #FFD66B); z-index: 2; }
.ench-obj.dim { opacity: .35; }
.ench-obj.reveal { filter: drop-shadow(0 0 22px #F5BC45); }
.ench-obj.reveal .il { animation: pulse .6s ease-in-out 3; }
.ench-obj.huge { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) scale(2); z-index: 3; }
.ench-obj .scene.act { width: 100%; }
.ench-acts { gap: clamp(12px, 3vw, 34px); }
.ench-act { width: clamp(100px, calc(var(--u) * 18), 160px); }
.ench-acts.gone { opacity: 0; pointer-events: none; transition: opacity .3s; }
@keyframes snooze { 50% { transform: scale(1.03, .97) translateY(2%); } }
@keyframes wobble { 20% { transform: translate(-50%, -50%) rotate(-10deg); } 40% { transform: translate(-50%, -50%) rotate(8deg); } 60% { transform: translate(-50%, -50%) rotate(-5deg); } 80% { transform: translate(-50%, -50%) rotate(3deg); } }
@media (prefers-reduced-motion: reduce) { .hanger, .ench-obj.sleep .il, .cos-slot > i { animation: none; } }
@media (max-aspect-ratio: 1/1) { .wardrobe { padding: 22px 12px 14px; } .cos-row { gap: 8px; } }

/* ---------- Grimoire : Sons et costumes ---------- */
.cos-page { grid-column: 1 / -1; }
.cos-fam { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin: 8px 0; border-radius: 16px; background: #0000001a; }
.cos-fam h4 { min-width: 4.2em; white-space: nowrap; margin: 0; font-family: var(--display); font-size: 20px; color: var(--ink); }
.cos-fam h4 b { font-family: var(--read); font-size: 30px; }
.cos-slots { display: flex; flex-wrap: wrap; gap: 10px; }
.cos-cell { display: flex; flex-direction: column; align-items: center; min-width: 92px; padding: 6px 10px 8px; border-radius: 14px; background: linear-gradient(170deg, var(--parch), var(--parch-2)); border: 3px solid var(--parch-edge); }
.cos-cell .glyph { font-family: var(--read); font-weight: 700; font-size: 34px; line-height: 1.1; color: var(--ink); }
.cos-cell .gpic { width: 54px; height: 54px; }
.cos-cell .gpic .il { width: 100%; height: 100%; }
.cos-cell small { font-family: var(--read); font-size: 15px; color: #6a5a3a; max-width: 110px; text-align: center; line-height: 1.2; }
.cos-cell.mys { background: #00000022; border-style: dashed; border-color: #8a7a5a88; }
.cos-cell.mys .glyph { color: #8a7a5a; }
.cos-cell.pulse { animation: pulse .4s; }

/* ---------- Étage 10 : lettres caméléons, œuf de dragon, étoiles filantes (js/activities3.js) ---------- */
/* La lettre caméléon dans un mot : un petit pointillé dessous, pour la reconnaître (c de citron, g de girafe…) */
.gr.cam { text-decoration: underline dotted currentColor .06em; text-underline-offset: .12em; }
.cameleon { display: flex; flex-direction: column; align-items: center; gap: 3vh; width: 100%; }
.cam-stage { position: relative; display: flex; align-items: center; justify-content: center; gap: 3vw; }
.cam-word { font-family: var(--read); font-weight: 700; font-size: clamp(56px, 12vmin, 120px); line-height: 1.1; padding: .1em .6em .25em; border-radius: 16px; border: 3px solid var(--parch-edge); }
.cam-slot { position: relative; animation: camGlow 1.4s ease-in-out infinite; border-radius: .2em; }
.cam-slot.tinted { animation: none; color: var(--cc); text-shadow: 0 0 .2em var(--cc); }
@keyframes camGlow { 0%, 100% { text-shadow: 0 0 .05em #FFD66B; } 50% { text-shadow: 0 0 .35em #FFD66B, 0 0 .1em #fff; } }
.cam-lizard { position: absolute; top: -12vmin; left: 50%; width: clamp(90px, 16vmin, 150px); transform: translateX(-50%); pointer-events: none; }
.cam-lizard.hop { animation: camHop .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes camHop { 0% { transform: translate(-50%, 0) scale(1); } 40% { transform: translate(-50%, -30%) scale(1.15, .9); } 100% { transform: translate(-50%, 0) scale(1); } }
.cham-svg { width: 100%; overflow: visible; }
.cham-fill { transition: fill .35s, stroke .35s; }
.cam-pic { width: clamp(100px, 18vmin, 170px); }
.cam-opts { gap: clamp(16px, 5vw, 60px); }
.cam-card { display: flex; flex-direction: column; align-items: center; gap: .6vh; padding: 1.4vh 2.4vw; border-radius: 22px; border: 5px solid var(--cc); background: #FFF8EA; box-shadow: 0 6px 0 #1D142655, 0 0 24px color-mix(in srgb, var(--cc) 45%, transparent); }
.cam-g { font-family: var(--read); font-weight: 700; font-size: clamp(54px, 11vmin, 100px); line-height: 1; color: var(--cc); -webkit-text-stroke: 2px #1D1426; }
.cam-kp { width: clamp(80px, 14vmin, 130px); aspect-ratio: 1; display: block; }
.cam-kp .il { width: 100%; height: 100%; }
.cam-card.dim { opacity: .35; }

.hatch { display: flex; align-items: center; justify-content: center; width: 100%; flex: 1; }
.egg { width: clamp(180px, 38vmin, 320px); aspect-ratio: 1; background: none; border: 0; animation: eggRock 1.6s ease-in-out infinite; transform-origin: 50% 88%; }
.egg svg { width: 100%; height: 100%; overflow: visible; }
.egg.wobble { animation: eggWobble .45s ease-in-out; }
@keyframes eggRock { 0%, 70%, 100% { transform: rotate(0); } 78% { transform: rotate(-6deg); } 86% { transform: rotate(6deg); } 94% { transform: rotate(-3deg); } }
@keyframes eggWobble { 0%, 100% { transform: rotate(0) scale(1); } 25% { transform: rotate(-12deg) scale(1.05); } 60% { transform: rotate(10deg) scale(.97); } }
.baby-dragon { width: clamp(200px, 42vmin, 360px); aspect-ratio: 1; animation: popIn .7s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes popIn { from { transform: scale(.1) translateY(30%); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Le dragon grandit (S.dragonGrowth) ; il crache du feu, il rugit */
.dragon-cmd .beast { transform: scale(var(--grow, 1)); transform-origin: 50% 90%; transition: transform .6s; }
.g-fire, .g-roar { inset: 0; width: 100%; }
.g-fire { transform-origin: 60% 55%; animation: gFire .35s ease-in-out infinite alternate; }
.g-roar { animation: twinkle .4s ease-in-out infinite; }
.g-fire .g-body, .gest.g-fire .g-body { animation: gRoarBody .7s ease-in-out infinite; }
.gest.g-roar .g-body { animation: gRoarBody .35s ease-in-out infinite; }
@keyframes gFire { from { transform: scale(.85, .8); opacity: .8; } to { transform: scale(1.1, 1.05); opacity: 1; } }
@keyframes gRoarBody { 0%, 100% { transform: rotate(-2deg) scale(1); } 50% { transform: rotate(2deg) scale(1.05, .97); } }
.rw-creature .dragon-svg { width: 100%; }

.stage.k-stars { justify-content: stretch; gap: 0; }
.stars { flex: 1; align-self: stretch; min-height: 0; position: relative; display: flex; flex-direction: column; align-items: center; }
.st-sky { position: relative; flex: 1; width: min(100%, 1100px); min-height: 0; border-radius: 24px; overflow: hidden;
  background: radial-gradient(ellipse at 50% 120%, #3a2a6a55, transparent 60%), linear-gradient(180deg, #0b0a24aa, #1a1440aa); }
.st-word { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: .2em; padding: .15em .5em .2em .2em; border-radius: 999px; border: 3px solid #1D1426;
  background: #FFF8EA; color: var(--ink); font-family: var(--read); font-weight: 700; font-size: clamp(28px, 5.4vmin, 48px); line-height: 1.1; will-change: transform; touch-action: none;
  box-shadow: 0 0 18px #FFE27A99; }
.st-word .st-star { width: 1.3em; height: 1.3em; flex: none; animation: spin 3s linear infinite; }
.st-word.nope { animation: stNope .45s ease-out; }
.st-word.hint { box-shadow: 0 0 0 5px #FFD66B, 0 0 30px #FFD66B; }
.st-word.flying { position: fixed; }
@keyframes stNope { 0% { filter: none; } 40% { filter: grayscale(1) brightness(.6); transform: scale(.9); } 100% { filter: none; } }
.st-scope { position: absolute; right: 2%; bottom: 0; width: clamp(90px, 15vmin, 140px); aspect-ratio: 1; pointer-events: none; }
.st-scope svg { width: 100%; height: 100%; }
.st-scope.gulp { animation: pulse .4s; }
.st-count { position: absolute; left: -10%; bottom: 8%; font-family: var(--display); font-style: normal; font-size: clamp(20px, 3.4vmin, 30px); color: #FFE27A; text-shadow: 0 2px 0 #1D1426; }

/* Bouton doré « réécouter » : toujours là pendant une quête ; il appelle (sans parler) quand l'enfant hésite */
#replay { width: 68px; height: 68px; box-shadow: inset 0 -5px 0 #0003, 0 0 22px #FFD66B55; }
#replay.beckon { animation: beckon 1.1s ease-in-out 3; }
@keyframes beckon { 0%, 100% { transform: scale(1) rotate(0); } 25% { transform: scale(1.18) rotate(-8deg); box-shadow: inset 0 -5px 0 #0003, 0 0 0 10px #FFD66B33, 0 0 50px 12px #FFD66B99; } 50% { transform: scale(1.1) rotate(6deg); } 75% { transform: scale(1.16) rotate(-4deg); } }

/* Lire avec le doigt (js/finger.js) : le morceau sous le doigt s'allume, avec un trait doré dessous */
.finger-lock { touch-action: none; user-select: none; -webkit-user-select: none; }
.finger-scroll { touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.finger .lit { text-shadow: 0 0 14px #FFD66B, 0 0 4px #FFF3C4; box-shadow: 0 7px 0 -3px #FFD66B; border-radius: 2px; transition: text-shadow .15s, box-shadow .15s; }
.finger .muet.lit { text-shadow: 0 0 14px #C9B8FF; box-shadow: 0 7px 0 -3px #C9B8FF; }
.finger .w.lit .gr { text-shadow: inherit; }
/* « Lumilire » : le doigt est passé sous tout le mot, il s'allume en entier (js/finger.js cast) */
.finger.lumi { animation: lumi-glow 1.1s ease-out; }
.finger.lumi .lit { text-shadow: 0 0 18px #FFD66B, 0 0 6px #FFF3C4; box-shadow: 0 8px 0 -3px #FFD66B, 0 10px 14px -6px #FFD66BAA; }
@keyframes lumi-glow { 0% { box-shadow: 0 0 0 0 #FFD66B00; } 25% { box-shadow: 0 0 34px 6px #FFD66B66; } 100% { box-shadow: 0 0 0 0 #FFD66B00; } }
@media (prefers-reduced-motion: reduce) { .finger.lumi { animation: none; } }

/* ---------- Étages 11 et 12 (C3) ---------- */
/* Qui fait quoi? : deux phrases, le pronom et son nom reliés par un fil d'or */
.pro-parch { display: flex; flex-direction: column; align-items: center; gap: .05em; }
.pro-line.l1 { font-size: 1.1em; }
.pro-parch .w.pro-lit { color: #7A4FC4; text-shadow: 0 0 12px #FFD66B; transition: color .3s; }
.pic-card .scene.act { display: block; width: 84%; aspect-ratio: 1; }
.pic-card .scene.act .herd { width: 100%; height: 100%; }
.scene.act .herd .il { width: 62%; height: 62%; } /* un groupe qui bouge garde sa mise en tas (pas la taille d'un seul dessin) */

/* Sort d'invisibilité : la mèche brûle, la cape passe, les lettres s'envolent */
.invis { display: flex; flex-direction: column; align-items: center; gap: 2.4vh; width: 100%; }
.invis-stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.invis-parch { transition: background .4s, box-shadow .4s, border-color .4s; }
.invis-parch.gone { background: #ffffff10; border-color: #B58CE655; box-shadow: inset 0 0 30px #B58CE633; }
.invis-parch .poof { animation: invisPoof .5s ease-in var(--d, 0ms) forwards; }
.invis-parch.gone .gr, .invis-parch.gone .gold-word, .invis-parch.gone .dot { opacity: 0; }
@keyframes invisPoof { to { opacity: 0; transform: translateY(-.6em) scale(.4) rotate(20deg); filter: blur(3px); } }
.invis-fuse { width: min(70%, 420px); height: 10px; border-radius: 5px; background: #0006; overflow: hidden; }
.invis-fuse i { display: block; height: 100%; background: linear-gradient(90deg, #FFB347, #FFD66B); transform-origin: left; box-shadow: 0 0 12px #FFD66B; }
.invis-cloak { position: absolute; left: 0; top: -10%; width: 60%; height: 120%; opacity: 0; pointer-events: none; }
.invis-cloak svg { width: 100%; height: 100%; }
.invis-cloak.sweep { animation: cloakSweep .8s cubic-bezier(.5, 0, .5, 1); }
@keyframes cloakSweep { 0% { opacity: 0; transform: translateX(-60%) rotate(-8deg); } 20% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateX(130%) rotate(8deg); } }
.invis-row { display: flex; align-items: center; gap: clamp(12px, 3vw, 30px); }
.invis-eye { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: #2A1F45; border: 3px solid #B58CE6; box-shadow: 0 0 20px #B58CE666; }
.invis-eye svg { width: 70%; }
.invis-eye.beckon { animation: beckon 1.1s ease-in-out 2; }

/* Ordres en deux temps : chaque carte montre deux petits dragons et une flèche */
.o2-row .pic-card.o2-card { width: auto; aspect-ratio: auto; padding: 6px 10px; display: flex; align-items: center; gap: 2px; }
.o2-step { display: block; width: clamp(88px, calc(var(--u) * 15), 150px); aspect-ratio: 1; }
.order2 .beast { width: clamp(130px, 26vmin, 240px); }
.o2-arrow { width: clamp(22px, 3.5vmin, 34px); flex: none; }
.order2 .order-banner { font-size: clamp(40px, 8vmin, 84px); }

/* Course de balais : la piste en haut, le ciel qui défile, le dragon et ses portes */
.stage.k-race { justify-content: stretch; gap: 0; }
#quest:has(.stage.k-race) #quest-wiz, #quest:has(.stage.k-ending) #quest-wiz { opacity: 0; pointer-events: none; }
#quest:has(.stage.k-race) .stage, #quest:has(.stage.k-ending) .stage { padding-left: 0; }
.race { flex: 1; align-self: stretch; min-height: 0; display: flex; flex-direction: column; gap: 10px; position: relative; }
.race-track { position: relative; height: 44px; margin: 0 auto; width: min(94%, 900px); flex: none; }
.rt-line, .rt-done { position: absolute; left: 4%; top: 50%; height: 8px; margin-top: -4px; border-radius: 4px; }
.rt-line { right: 6%; background: #ffffff22; }
.rt-done { width: 0; background: linear-gradient(90deg, #FFB347, #FFD66B); transition: width .5s; }
.rt-me, .rt-ghost, .rt-flag { position: absolute; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
.rt-me { transition: left .5s; z-index: 2; }
.rt-me svg, .rt-flag svg { width: 100%; height: 100%; }
.rt-ghost { color: #E9E4FF; opacity: .55; }
.rt-ghost svg { width: 80%; height: 80%; }
.rt-flag { left: 94%; }
.race-sky { position: relative; flex: 1; min-height: 0; width: min(100%, 1400px); margin: 0 auto; border-radius: 24px; overflow: hidden;
  background: linear-gradient(180deg, #2a4a8a, #6a8ad0 60%, #F2B38A); }
.race-clouds i { position: absolute; width: 160px; height: 50px; border-radius: 30px; background: #ffffffaa; box-shadow: 40px -18px 0 6px #ffffffaa, 90px 0 0 -4px #ffffffaa; animation: cloudRun 6s linear infinite; }
.race-clouds i:nth-child(1) { top: 12%; animation-delay: 0s; }
.race-clouds i:nth-child(2) { top: 44%; animation-delay: -1.6s; animation-duration: 4.5s; opacity: .7; }
.race-clouds i:nth-child(3) { top: 70%; animation-delay: -3.1s; animation-duration: 7s; }
.race-clouds i:nth-child(4) { top: 28%; animation-delay: -4.4s; animation-duration: 5.2s; opacity: .5; }
@keyframes cloudRun { from { left: 110%; } to { left: -30%; } }
.race-rider { position: absolute; left: 4%; top: 58%; width: clamp(120px, 22vmin, 210px); aspect-ratio: 1.1; margin-top: calc(clamp(120px, 22vmin, 210px) * -.55); animation: riderBob 1.6s ease-in-out infinite; }
.race-rider.dash { animation: none; }
@keyframes riderBob { 50% { translate: 0 -10px; } }
.rider-dragon, .rider-wiz { position: absolute; display: block; }
.rider-dragon { inset: 12% 0 0 0; }
.rider-dragon svg { width: 100%; height: 100%; }
.rider-wiz { left: 18%; top: -18%; width: 58%; height: 70%; }
.rider-wiz svg { width: 100%; height: 100%; overflow: visible; }
.rider-dragon .d-wing { animation: wingFlap .35s ease-in-out infinite alternate; transform-origin: 80px 100px; }
@keyframes wingFlap { to { transform: scaleY(.6); } }
.race-want { position: absolute; left: 5%; top: 5%; }
.race-want .pic-card { width: clamp(90px, calc(var(--u) * 15), 150px); box-shadow: 0 0 0 5px #FFD66B, 0 8px 20px #0008; }
.race-gates { position: absolute; right: 3%; top: 4%; bottom: 4%; width: min(46%, 440px); display: flex; flex-direction: column; justify-content: space-around; }
.race-gate { position: relative; display: flex; align-items: center; gap: 8px; animation: gateIn .6s cubic-bezier(.2, 1.2, .4, 1) var(--d) both; background: none; }
.race-gate .gate-arch { width: clamp(44px, 8vmin, 70px); flex: none; }
.race-gate .gate-word { padding: .05em .4em .12em; border-radius: 14px; font-family: var(--read); font-weight: 700; font-size: clamp(28px, 5.6vmin, 50px); line-height: 1.1;
  background: linear-gradient(170deg, var(--parch), var(--parch-2)); color: var(--ink); border: 3px solid var(--parch-edge); box-shadow: 0 6px 16px #0006; }
.race-gate.dim { opacity: .35; filter: grayscale(1); }
.race-gate.reveal .gate-word, .race-gate.right .gate-word { box-shadow: 0 0 0 5px #5CD6A0, 0 0 30px #5CD6A0; }
.race-gate.passed { animation: gatePass .5s ease-out forwards; }
@keyframes gateIn { from { transform: translateX(120%); opacity: 0; } }
@keyframes gatePass { to { transform: scale(1.4); opacity: 0; } }
.race-finish { position: absolute; inset: 20% 20% auto; display: flex; align-items: center; justify-content: center; gap: 24px; padding: 18px 24px; border-radius: 28px;
  background: #1D1426dd; border: 4px solid #FFD66B; animation: enter .4s ease-out; }
.rf-trophy { width: clamp(90px, 18vmin, 160px); animation: pop-copy .6s cubic-bezier(.3, 1.6, .5, 1); }
.rf-trophy.dim { filter: grayscale(.8) brightness(.7); }
.rf-time { font-family: var(--display); font-size: clamp(36px, 7vmin, 64px); color: #FFE27A; }
.rf-count { display: flex; align-items: center; gap: 6px; font-family: var(--display); font-size: clamp(24px, 4vmin, 38px); color: #FFE27A; }
.rf-count svg { width: 40px; }
.trophy-svg { width: 100%; height: auto; display: block; }
.rw-trophy { position: relative; }
.rw-trophy b { position: absolute; right: -6%; bottom: 4%; font-family: var(--display); font-size: 34px; color: #FFE27A; text-shadow: 0 2px 0 #1D1426; }

/* Vol de nuit : le sorcier sur son balai, les portes d'étoiles, le chemin vers la lune */
.stage.k-hear:has(.vol) { justify-content: stretch; gap: 0; }
#quest:has(.vol) #quest-wiz { opacity: 0; pointer-events: none; }
#quest:has(.vol) .stage { padding-left: 0; }
.vol { flex: 1; align-self: stretch; min-height: 0; display: flex; flex-direction: column; gap: 10px; position: relative; }
.vol-track { position: relative; height: 52px; margin: 0 auto; width: min(94%, 900px); flex: none; border-radius: 26px; background: #120C2Ecc; box-shadow: inset 0 0 0 2px #F5C45155; }
.vt-me, .vt-moon { position: absolute; top: 50%; transform: translate(-50%, -50%); }
.vt-me { width: 40px; height: 40px; color: #FFD66B; transition: left .6s cubic-bezier(.3, 1.3, .5, 1); z-index: 2; }
.vt-me svg, .vt-moon svg, .vt-star svg { width: 100%; height: 100%; display: block; }
.vt-moon { left: 94%; width: 48px; height: 48px; filter: brightness(.6) saturate(.5); transition: filter .5s; }
.vt-moon.lit { filter: drop-shadow(0 0 14px #FFF1C2) drop-shadow(0 0 30px #FFD66B); animation: volMoon .7s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes volMoon { from { scale: .5; } }
.vt-stars { position: absolute; left: 10%; right: 12%; top: 50%; transform: translateY(-50%); display: flex; justify-content: space-evenly; }
.vt-star { width: 28px; height: 28px; color: #ffffff22; transition: color .3s; }
.vt-star.lit { color: #FFD66B; filter: drop-shadow(0 0 6px #FFD66B); animation: pop-copy .5s cubic-bezier(.3, 1.6, .5, 1); }
.vol-sky { position: relative; flex: 1; min-height: 0; width: min(100%, 1400px); margin: 0 auto; border-radius: 24px; overflow: hidden; container-type: size;
  background: radial-gradient(circle at 85% 20%, #4B3C8C 0, transparent 45%), linear-gradient(180deg, #120C2E, #2A1E5A 60%, #46307A); }
.vol-twinkle i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #FFF6D6; animation: volTwinkle 2.6s ease-in-out infinite; }
.vol-twinkle i:nth-child(3n) { width: 6px; height: 6px; }
@keyframes volTwinkle { 50% { opacity: .2; transform: scale(.6); } }
.vol-clouds i { position: absolute; width: 170px; height: 46px; border-radius: 30px; background: #6A5AA855; box-shadow: 40px -16px 0 6px #6A5AA855, 92px 0 0 -4px #6A5AA855; animation: cloudRun 9s linear infinite; }
.vol-clouds i:nth-child(1) { top: 18%; }
.vol-clouds i:nth-child(2) { top: 52%; animation-delay: -3s; animation-duration: 7s; }
.vol-clouds i:nth-child(3) { top: 80%; animation-delay: -6s; animation-duration: 11s; }
.vol-ear { position: absolute; left: max(4%, min(22vw, 36vh) + 24px); top: 6%; width: clamp(64px, calc(var(--u) * 10), 96px); z-index: 2; }
.vol-rider { --rw: min(320px, 40cqw, 70cqh); position: absolute; left: max(22%, min(22vw, 36vh) + 24px); top: 56%; width: var(--rw); aspect-ratio: 2; margin-top: calc(var(--rw) * -.25); animation: riderBob 1.8s ease-in-out infinite; z-index: 1; }
.vol-rider.dash { animation: none; }
.vr-broom { position: absolute; left: 0; right: 0; bottom: 0; height: 64%; }
.vr-broom svg { width: 100%; height: 100%; display: block; }
.vr-wiz { position: absolute; left: 24%; bottom: 20%; width: 58%; height: 200%; }
.vr-wiz svg { width: 100%; height: 100%; overflow: visible; }
.vol-gates { position: absolute; right: 6%; top: 4%; bottom: 4%; display: flex; flex-direction: column; justify-content: space-around; align-items: center; }
.vol-gates.n2 { top: 14%; bottom: 14%; }
@media (max-aspect-ratio: 1/1) { .vol-ear { left: 5%; } .vol-rider { left: 4%; top: 46%; } .vol-gates, .vol-gates.n2 { right: 5%; top: 3%; bottom: 17%; } }
.vol-gate { position: relative; width: min(150px, 28cqh, 30cqw); aspect-ratio: 1; background: none; display: grid; place-items: center; animation: gateIn .6s cubic-bezier(.2, 1.2, .4, 1) var(--d) both; }
.vol-gate .vol-ring { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(0 0 10px #F5C45188); }
.vol-gate .vol-spin { transform-origin: 60px 60px; animation: volSpin 8s linear infinite; }
@keyframes volSpin { to { transform: rotate(360deg); } }
.vg-letter { position: relative; font-family: var(--read); font-weight: 700; font-size: min(80px, 15cqh, 16cqw); line-height: 1; color: #FFF6D6; text-shadow: 0 3px 0 #1D1426, 0 0 18px #FFD66B88; }
.vol-gate.dim { opacity: .35; filter: grayscale(1); }
.vol-gate.right .vol-ring, .vol-gate.reveal .vol-ring { filter: drop-shadow(0 0 8px #5CD6A0) drop-shadow(0 0 24px #5CD6A0); }
.vol-gate.passed { animation: gatePass .5s ease-out forwards; }
.flyer.vol-fly { color: #FFD66B; filter: drop-shadow(0 0 8px #FFD66B); }
.flyer.vol-fly svg { width: 100%; height: 100%; }

/* Duel final : une phrase par manche, le bouclier de l'Effaceur, et le grand envol à la dernière manche */
.duel-line .duel-scroll { flex-wrap: wrap; justify-content: center; font-size: clamp(34px, calc(var(--u) * 7), 68px); gap: .15em; }
.duel-line .dword { padding: 0 .12em; }
.duel-shield { position: absolute; left: 10%; top: -12%; display: flex; gap: 5px; z-index: 2; }
.duel-shield i { width: 16px; height: 20px; border-radius: 4px 4px 8px 8px; background: #B58CE6; border: 3px solid #1D1426; box-shadow: 0 0 10px #B58CE6; transition: all .3s; }
.duel-shield i.broken { background: #3a2f4f; box-shadow: none; opacity: .5; transform: rotate(18deg) translateY(4px); }
.duel-foe.ko.final .foe-body { animation: foeFly 1.8s cubic-bezier(.4, 0, .6, 1) forwards; }
@keyframes foeFly { 0% { transform: none; } 25% { transform: translate(10%, -20%) rotate(60deg) scale(1.1); } 100% { transform: translate(260%, -320%) rotate(900deg) scale(.1); opacity: 0; } }

/* La grande fin : le dragon fait le tour du ciel avec le sorcier sur le dos */
.stage.k-ending { justify-content: stretch; }
.ending { flex: 1; align-self: stretch; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 2vh; }
.end-sky { position: absolute; inset: 0; overflow: hidden; }
.end-tower { position: absolute; left: 50%; bottom: 0; height: 78%; transform: translateX(-50%); }
.end-tower .ew { fill: #241B3E; transition: fill .4s, filter .4s; }
.end-tower .ew.lit { fill: #FFD66B; filter: drop-shadow(0 0 6px #F5BC45); }
.end-ride { position: absolute; width: clamp(200px, 40vmin, 380px); aspect-ratio: 1.1; animation: endFly 7s ease-in-out infinite; }
@keyframes endFly { 0% { left: -40%; top: 40%; transform: rotate(-6deg) scale(.8); } 50% { left: 40%; top: 5%; transform: rotate(4deg) scale(1.15); } 100% { left: 110%; top: 30%; transform: rotate(-4deg) scale(.9); } }
.ending .btn-next { position: relative; z-index: 2; }
@media (prefers-reduced-motion: reduce) { .race-clouds i, .race-rider, .end-ride, .invis-cloak.sweep, .rider-dragon .d-wing { animation: none; } .end-ride { left: 30%; top: 10%; } }

/* ---------- Boss cambrioleur (js/heist.js) ---------- */
/* Grimoire : la place vide d'une lettre volée, avec la trace de la gomme */
.pk-chip.stolen { background: transparent; box-shadow: inset 0 0 0 2px #7A5BB0aa; outline: 1px dashed #B58CE6; outline-offset: -4px; }
.pk-chip.stolen .pk-off { position: relative; font-family: var(--read); font-weight: 700; color: #6E648F; opacity: .45; filter: grayscale(1); }
.pk-chip.relit { animation: pk-relit 1s ease-out; }
@keyframes pk-relit { 0% { box-shadow: 0 0 0 0 #FFD66B00; filter: brightness(1.8); } 30% { box-shadow: 0 0 22px 6px #FFD66BCC; } 100% { box-shadow: 0 0 0 0 #FFD66B00; filter: none; } }
@media (prefers-reduced-motion: reduce) { .pk-chip.relit { animation: none; } }
.pk-chip.stolen .smudge { position: absolute; inset: 22% 14%; border-radius: 40%; background: #F08BA855; transform: rotate(-12deg); filter: blur(1px); }
.pk-fly.hx-loot { background: radial-gradient(circle at 35% 25%, #E6D6FF, #8E6CC8 70%); color: #2A1840; box-shadow: 0 0 34px 8px #7A5BB088; }
/* Le repaire, à la place de l'atelier : l'Effaceur et son bouclier de lettres prisonnières */
.forge.heist { pointer-events: none; }
.hx-lair { display: flex; align-items: center; gap: clamp(4px, 1vw, 10px); height: clamp(64px, 11vh, 108px); padding: 4px 12px 4px 4px;
  border-radius: 16px; background: linear-gradient(170deg, #3A2650e6, #1D1426e6); box-shadow: 0 0 0 2px #7A5BB0, 0 0 22px 4px #3a205099, 0 6px 14px #0006; }
.hx-mini { height: 100%; aspect-ratio: 1; flex: none; transform-origin: 50% 90%; animation: menace 1.2s ease-in-out infinite alternate; }
.hx-mini svg { width: 100%; height: 100%; display: block; }
.hx-mini.ouch { animation: hxOuch .5s ease-out; }
.hx-stones { display: flex; gap: clamp(3px, .8vw, 8px); align-items: center; }
.hx-stone { position: relative; display: grid; place-items: center; width: clamp(26px, 5.5vw, 48px); height: clamp(34px, 7vh, 62px); border-radius: 8px 8px 14px 14px;
  background: linear-gradient(170deg, #CDB0F2, #8E6CC8); border: 3px solid #1D1426; box-shadow: 0 0 12px #B58CE6; animation: hxStoneIn .45s cubic-bezier(.3, 1.6, .5, 1) both; }
.hx-stone.duo { width: clamp(38px, 8vw, 68px); }
.hx-stone b { font-family: var(--read); font-weight: 700; font-size: clamp(16px, 3.4vh, 30px); line-height: 1; color: #2A1840; opacity: .55; }
.hx-crack { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.hx-crack path { fill: none; stroke: #1D1426; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity .25s; }
.hx-stone.d1 .c1, .hx-stone.d2 .c2, .hx-stone.d3 .c3 { opacity: 1; }
.hx-stone.d2 { box-shadow: 0 0 6px #B58CE6; }
.hx-stone.hurt { animation: hxHurt .4s ease-out; }
.hx-stone.broken { animation: hxBreak .5s ease-in forwards; }
@keyframes hxStoneIn { from { transform: scale(0) translateY(40%); opacity: 0; } }
@keyframes hxHurt { 30% { transform: translateX(-4px) rotate(-5deg); } 60% { transform: translateX(3px) rotate(4deg); } }
@keyframes hxBreak { to { transform: translateY(30%) rotate(24deg) scale(.6); opacity: 0; } }
@keyframes hxOuch { 30% { transform: rotate(-10deg) scale(.92); } 60% { transform: rotate(6deg); } }
/* Les scènes : le vol et la sortie */
.hx-scene .story-art { position: relative; }
.hx-foe { transform-origin: 50% 90%; }
.hx-foe svg { width: 100%; height: auto; display: block; overflow: visible; }
.hx-foe.laugh { animation: foeLaugh .7s ease-in-out 2; }
.hx-foe.zapped { animation: hxZap .6s ease-out; filter: brightness(1.6) saturate(.4); }
.hx-sack { position: absolute; right: -14%; bottom: -4%; width: 42%; transform-origin: 50% 100%; }
.hx-sack svg { width: 100%; height: auto; display: block; }
.hx-sack.gulp { animation: hxGulp .35s cubic-bezier(.3, 1.6, .5, 1); }
.hx-prop { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.hx-prop.back { z-index: 0; }
.hx-prop.back + .hx-foe { position: relative; z-index: 1; }
.hx-prop.front { z-index: 2; }
.hx-prop > svg, .hx-prop > div { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform-origin: 50% 50%; }
.hx-prop svg { overflow: visible; }
.hx-half > svg, .hx-plant-wrap > svg, .hx-jaw-wrap > svg { width: 100%; height: 100%; overflow: visible; display: block; }
.hx-plant-wrap { transform-origin: 50% 100%; }
@keyframes hxZap { 20% { transform: translateX(-6%) rotate(-6deg); } 50% { transform: translateX(5%) rotate(5deg); } 80% { transform: translateX(-3%); } }
@keyframes hxGulp { 50% { transform: scale(1.25, .85); } }
@media (prefers-reduced-motion: reduce) { .hx-mini, .hx-stone { animation: none; } }

/* ---------- Salle des jeux (F8) ---------- */
.salle-btn { position: absolute; left: max(18px, env(safe-area-inset-left, 0px)); bottom: calc(26px + env(safe-area-inset-bottom, 0px)); z-index: 6; width: 84px; height: 84px; border-radius: 24px;
  display: grid; place-items: center; background: radial-gradient(circle at 40% 30%, #4A3A7A, #2C2257); border: 3px solid #F5BC4599; box-shadow: inset 0 -5px 0 #0004, 0 4px 14px #0008; }
.salle-btn > svg { width: 74%; }
.salle-btn:active { transform: scale(.94); }
.salle-btn.lit { border-color: var(--gold); animation: breathe 2.4s ease-in-out infinite; }
.salle-new { position: absolute; top: -12px; right: -12px; min-width: 36px; height: 36px; padding: 0 6px; border-radius: 18px; display: grid; place-items: center;
  font-family: var(--read); font-weight: 700; font-size: 22px; color: #3A2208; background: radial-gradient(circle at 40% 35%, #FFF4D2, var(--gold)); box-shadow: 0 0 0 3px var(--night), 0 0 16px #F5BC45; }
.zzz { display: none; position: absolute; top: -6px; right: -4px; pointer-events: none; font-family: var(--display); font-weight: 700; color: #C9B8FF; }
.zzz i { position: absolute; font-style: normal; animation: zzz 2.4s ease-in infinite; opacity: 0; }
.zzz i:nth-child(1) { font-size: 16px; } .zzz i:nth-child(2) { font-size: 20px; animation-delay: .8s; } .zzz i:nth-child(3) { font-size: 26px; animation-delay: 1.6s; }
@keyframes zzz { 0% { opacity: 0; transform: translate(0, 10px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(14px, -26px); } }
.salle-btn.asleep, #salle.asleep .salle-game { filter: saturate(.35) brightness(.75); }
.salle-btn.asleep .zzz, #salle.asleep .salle-game .zzz { display: block; }
.salle-btn.asleep .salle-new, #salle.asleep .salle-new { display: none; }
.salle-btn.asleep.lit, #salle.asleep .salle-game.lit { animation: none; }

#salle { padding-top: env(safe-area-inset-top, 0px); }
.salle-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0 6px; }
.salle-moons { display: flex; gap: 12px; }
.salle-moons i { width: 30px; height: 40px; border-radius: 12px 12px 8px 8px; background: #2C2257; border: 3px solid #5B4F99; position: relative; }
.salle-moons i::before { content: ''; position: absolute; inset: 7px 6px; border-radius: 50%; background: #1D1426; }
.salle-moons i.on { border-color: var(--gold); box-shadow: 0 0 18px #F5BC4577; }
.salle-moons i.on::before { background: radial-gradient(circle, #FFF4D2, var(--gold) 70%); }
.salle-shelves { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: clamp(10px, 2.4vh, 22px); padding: 6px 0 24px; width: min(100%, 760px); margin: 0 auto; }
.salle-shelf { display: flex; align-items: center; gap: 12px; padding: 10px 12px 18px; border-radius: 18px; position: relative;
  background: linear-gradient(#ffffff0a, #ffffff04); animation: pop .6s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(var(--i) * 90ms); }
.salle-shelf::after { content: ''; position: absolute; left: 8px; right: 8px; bottom: 4px; height: 12px; border-radius: 4px; background: linear-gradient(#9A5A2A, #5B3A1E); box-shadow: 0 4px 8px #0008; }
.shelf-head { flex: none; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; color: var(--gold-soft); background: #2C2257; border: 2px solid #F5BC4566; }
.shelf-head svg { width: 60%; }
.shelf-slots { display: flex; flex-wrap: wrap; gap: 10px; min-width: 0; }
.salle-game { position: relative; width: clamp(62px, 11vmin, 88px); aspect-ratio: 1; border-radius: 20px; display: grid; place-items: center; color: var(--gold);
  background: radial-gradient(circle at 40% 30%, #4A3A7A, #2C2257); border: 3px solid #F5BC4566; box-shadow: inset 0 -4px 0 #0004, 0 3px 10px #0007; }
.salle-game svg { width: 66%; }
.salle-game:active { transform: scale(.94); }
.salle-game.lit { border-color: var(--gold); animation: breathe 2.4s ease-in-out infinite; }
.salle-game.chosen { border-color: #fff; transform: scale(1.12); transition: transform .2s; }
.salle-game.unseen { color: #0000004d; background: #00000026; border: 3px dashed #ffffff1f; box-shadow: none; }
.salle-game .salle-new { top: -10px; right: -10px; min-width: 30px; height: 30px; font-size: 18px; }

/* ---------- Rangs des jeux (F9) ---------- */
.rank-badge { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 22px); right: max(110px, calc(env(safe-area-inset-right, 0px) + 110px)); z-index: 4; display: flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 999px; background: #1D1426b3; border: 2px solid #F5BC4566; pointer-events: none; }
.rb-stars { display: flex; gap: 2px; color: var(--gold); }
.rb-stars svg { width: 18px; height: 18px; }
.rank-badge.r3 .rb-stars { filter: drop-shadow(0 0 6px #FFD66B); }
.rb-best { display: flex; align-items: center; gap: 3px; color: var(--gold-soft); font-weight: 700; font-size: 18px; }
.rb-best svg { width: 20px; color: var(--gold); }
.potion, .catch, .duel { position: relative; }
/* Potion : le chaudron grandit et se dore */
.potion.rank-1 .pot { transform: scale(1.08); }
.potion.rank-2 .pot { transform: scale(1.14); filter: drop-shadow(0 0 14px #F5BC4566); }
.potion.rank-3 .pot { transform: scale(1.2); filter: drop-shadow(0 0 24px #FFD66B99); }
.pot { transform-origin: 50% 100%; }
.jar.rare { filter: sepia(1) saturate(4) hue-rotate(5deg) brightness(1.15) drop-shadow(0 0 14px #FFD66B); animation: rareGlow 1.6s ease-in-out infinite; }
@keyframes rareGlow { 50% { filter: sepia(1) saturate(4) hue-rotate(5deg) brightness(1.35) drop-shadow(0 0 26px #FFD66B); } }
.potion.client { grid-template-areas: "client recipes" "lab lab"; }
.client-box { grid-area: client; display: flex; align-items: center; gap: 12px; }
.client-cr { width: clamp(90px, 16vh, 160px); }
.client-cr svg { width: 100%; height: auto; }
.client-cr.arrive { animation: pop .8s cubic-bezier(.3, 1.6, .5, 1) both; }
.client-cr.happy { animation: bob .6s ease-in-out 3; }
.client-want { display: flex; gap: 6px; padding: 10px; border-radius: 22px; background: #FFF8E6; border: 3px solid #1D1426; position: relative; }
.client-want::before { content: ''; position: absolute; left: -14px; top: 40%; border: 8px solid transparent; border-right: 12px solid #1D1426; }
.client-want .pic-card { width: clamp(54px, 9vh, 90px); }
.client-recipes { grid-area: recipes; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.client-card { padding: 10px 18px; font-size: clamp(24px, min(5vh, 3.4vw), 52px); display: flex; flex-direction: column; gap: 2px; }
.client-card.dim { opacity: .4; }
/* Lucioles : bocal plus beau à chaque rang, espèces, dorée, papillons de nuit, nuit */
.catch.rank-1 .catch-jar .cj-glass path:first-child { stroke: #8A6A3A; }
.catch.rank-2 .catch-jar { filter: drop-shadow(0 0 10px #7CE0FF88); }
.catch.rank-3 .catch-jar { filter: drop-shadow(0 0 18px #FFD66B); transform: translateX(-50%) scale(1.15); }
.catch.rank-2 .catch-jar::after, .catch.rank-3 .catch-jar::after { content: ''; position: absolute; left: 22%; right: 22%; top: 12%; height: 9%; border-radius: 4px; background: linear-gradient(90deg, #F5BC45, #FFE9AE, #F5BC45); border: 2px solid #1D1426; }
.luciole.gold .lu-body { background: radial-gradient(circle at 40% 35%, #FFF8DA 0 40%, #FFD66B 70%, #E0A82A 92%); box-shadow: 0 0 30px 10px #FFD66Bcc; }
.luciole.gold::after { content: ''; position: absolute; top: -6%; right: 4%; width: 26%; aspect-ratio: 1; background: #FFE08A; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); animation: twinkle 1s ease-in-out infinite; }
.luciole.moth .lu-wings path { fill: #8A7356; fill-opacity: .95; }
.luciole.moth .lu-body { background: radial-gradient(circle at 50% 46%, #F3E9D8 0 44%, #B8A07A 70%, #7A6448 92%); box-shadow: none; }
.luciole.gem .lu-body { box-shadow: 0 0 26px 8px color-mix(in srgb, var(--lu) 80%, transparent), inset 0 0 0 4px #ffffff88; }
.catch-dark { position: absolute; inset: -40px; z-index: 3; pointer-events: none; --lx: 50%; --ly: 50%;
  background: radial-gradient(circle 150px at calc(var(--lx) + 40px) calc(var(--ly) + 40px), transparent 0 55%, #0B0818e6 100%); transition: opacity 1.2s;
  border-radius: 60px; box-shadow: 0 0 60px 30px #0B0818e6; }
.catch-dark.lit { opacity: 0; }
.catch.night .catch-jar { z-index: 4; }
/* Duel : rivaux, compteur de combo, super sort */
.duel-foe.rival .foe-body { filter: hue-rotate(var(--rh)) saturate(1.3); }
.duel-combo { position: absolute; left: 50%; top: -6px; transform: translateX(-50%); display: flex; gap: 8px; z-index: 3; }
.duel-combo i { width: 22px; height: 22px; border-radius: 50%; background: #2C2257; border: 3px solid #5B4F99; }
.duel-combo i.on { background: radial-gradient(circle at 40% 35%, #FFF4D2, var(--gold)); border-color: #fff; box-shadow: 0 0 12px #FFD66B; }
.duel-foe.super .foe-body { animation: foeFly 1.6s cubic-bezier(.4, 0, .6, 1) forwards; }
.duel.rank-3 .duel-orb i { filter: hue-rotate(40deg) saturate(1.4); }
/* Grimoire : collections */
.coll-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
.coll-slot { aspect-ratio: 1; border-radius: 16px; background: #2A2150; display: grid; place-items: center; padding: 8px; position: relative; overflow: hidden; }
.coll-slot > svg, .coll-slot .gag svg { width: 100%; height: 100%; }
.coll-slot.unseen { background: #00000026; border: 3px dashed #ffffff22; }
.coll-slot.unseen > * { filter: brightness(0) opacity(.35); }
.coll-slot.wiggle { animation: dance .5s ease-in-out 2; }
.coll-slot .luciole { --lsz: 54px; position: relative; }
.gag { display: block; width: 86%; height: 86%; }
.gag svg { overflow: visible; }
.gag-blue .toad { --toad: #5B8DEF !important; --toad-d: #3F6FD0 !important; --toad-b: #C4D8FF !important; }
.gag-tiny svg { transform: scale(.5); }
.gag-huge svg { transform: scale(1.25); }
.gag-float svg { transform: scale(1.3, 1.15) translateY(-6%); }
.gag-spin svg { transform: rotate(-35deg); }
.gag-bubbles { filter: drop-shadow(0 0 8px #9CC8FF); }
.gag-rocket svg { transform: rotate(180deg); }
.gag-hiccup svg { transform: translateY(-12%) scaleY(1.1); }
.gag-stretch svg { transform: scale(.65, 1.4); }
.gag-dragon .toad { --toad: #E3694B !important; --toad-d: #B8402A !important; --toad-b: #FFC9A6 !important; }
.gag-ghost .toad { --toad: #F4F1FF !important; --toad-d: #C9C2E8 !important; --toad-b: #FFFFFF !important; opacity: .7; }
.gag-frog .toad { --toad: #3FCB4F !important; --toad-d: #2A9A3A !important; --toad-b: #B7F27A !important; }
.gag-frog svg { transform: scale(1.2); }