/* Le mode HISTOIRE (src/story/, src/ui/story.js) : l'interface du niveau et des cinématiques, sur la grille 640×360.
   27 oct. 2026 (le créateur : « trop d'info », « ça fait AI slop », « plus sobre et plus premium ») : l'écran est vide par
   défaut, chaque info n'apparaît que quand elle sert puis s'efface (storyMode.js : updateHud) ; une seule police
   (Barlow Condensed), du blanc cassé, un seul accent (or pâle), des filets fins, des fondus courts, rien qui clignote. */

/* ---- la liste des niveaux, en boîtiers de CD (28 oct. 2026 ; src/ui/story.js : storyMenu) ---- */
.px.st-shelf { --hue: #ffd26b; }
.px.st-shelf, .px.st-shelf * { font-family: 'Barlow Condensed', 'Nunito', 'Segoe UI', sans-serif; -webkit-text-stroke: 0; }
.px.st-shelf::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 62% 58% at 50% 46%, rgba(18, 8, 28, .25), rgba(6, 3, 12, .9) 78%); pointer-events: none; }
.st-shelf .st-rays { position: absolute; left: 20px; top: -140px; width: 600px; height: 600px; pointer-events: none; opacity: .55;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--hue) 20%, transparent) 0deg 5deg, transparent 5deg 18deg);
  -webkit-mask-image: radial-gradient(circle, #000 8%, transparent 62%); mask-image: radial-gradient(circle, #000 8%, transparent 62%);
  animation: st-spin 70s linear infinite; transition: background .5s; }
.st-shelf .st-glow { position: absolute; left: 170px; top: 18px; width: 300px; height: 300px; border-radius: 50%; pointer-events: none; opacity: .42;
  background: radial-gradient(circle, var(--hue) 0, color-mix(in srgb, var(--hue) 30%, transparent) 30%, transparent 64%); transition: background .5s; }
.st-shelf .st-shelf-top { position: absolute; left: 0; right: 0; top: 12px; text-align: center; pointer-events: none; }
.st-shelf .st-shelf-top b { display: block; font-family: 'Bangers', sans-serif; font-weight: 400; font-size: 30px; letter-spacing: 2px; color: #ffe6a6;
  text-shadow: 0 2px 0 #2a1306, 0 3px 0 #120610, 0 0 18px color-mix(in srgb, var(--hue) 60%, transparent); }
.st-shelf .st-shelf-top span { display: block; margin-top: -2px; font-weight: 700; font-size: 8px; letter-spacing: .42em; text-transform: uppercase; color: rgba(255, 238, 214, .62); }

.st-shelf .st-cds { position: absolute; left: 320px; top: 160px; width: 0; height: 0; perspective: 560px; transform-style: preserve-3d; }
.st-shelf .st-cd { position: absolute; left: 0; top: 0; width: 124px; height: 116px; cursor: pointer; transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.2, 1.3, .35, 1), opacity .3s, filter .35s; filter: brightness(.5) saturate(.7); }
.st-shelf .st-cd.far { filter: brightness(.32) saturate(.5) blur(.4px); }
.st-shelf .st-cd.on { filter: none; animation: st-bob 3.2s ease-in-out infinite; }
.st-shelf .st-case { position: absolute; inset: 0; border-radius: 3px; background: linear-gradient(#2c2536, #120e18);
  box-shadow: 0 12px 20px rgba(0, 0, 0, .65), inset 0 0 0 1px rgba(255, 255, 255, .2);
  -webkit-box-reflect: below 4px linear-gradient(transparent 58%, rgba(255, 255, 255, .2)); }
.st-shelf .st-spine { position: absolute; left: 0; top: 0; bottom: 0; width: 10px; border-radius: 3px 0 0 3px;
  background: linear-gradient(90deg, #0b0910, #2f2839 55%, #0b0910); border-right: 1px solid rgba(255, 255, 255, .14);
  display: flex; align-items: center; justify-content: center; }
.st-shelf .st-spine::before, .st-shelf .st-spine::after { content: ''; position: absolute; left: 2px; right: 2px; height: 6px; border-radius: 1px; background: rgba(255, 255, 255, .16); }
.st-shelf .st-spine::before { top: 5px; } .st-shelf .st-spine::after { bottom: 5px; }
.st-shelf .st-spine em { writing-mode: vertical-rl; font-style: normal; font-weight: 800; font-size: 5.5px; letter-spacing: .25em; text-transform: uppercase; color: var(--hue); white-space: nowrap; }
.st-shelf .st-art { position: absolute; left: 11px; top: 2px; right: 2px; bottom: 2px; border-radius: 1px;
  background: var(--cover) center / cover no-repeat, linear-gradient(135deg, #3b2a55, #1a1224); }
.st-shelf .st-gloss { position: absolute; inset: 0; border-radius: 3px; pointer-events: none; overflow: hidden;
  background: linear-gradient(118deg, rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, .07) 26%, transparent 38%, transparent 72%, rgba(255, 255, 255, .1) 88%, transparent 100%); }
.st-shelf .st-cd.on .st-gloss::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .5) 50%, transparent 58%);
  background-size: 260% 100%; animation: st-sweep 3.4s ease-in-out infinite; }
.st-shelf .st-disc { position: absolute; left: 13px; top: 6px; width: 104px; height: 104px; border-radius: 50%;
  transform: translateZ(-3px); transition: transform .6s cubic-bezier(.2, 1.45, .35, 1); }
.st-shelf .st-cd.on:not(.lock) .st-disc { transform: translateX(60px) translateZ(-3px); }
.st-shelf .st-disc i { position: absolute; inset: 0; border-radius: 50%;
  background: repeating-radial-gradient(circle, rgba(0, 0, 0, .05) 0 1px, transparent 1px 3px),
    conic-gradient(from 20deg, #cfd0dc, #eaf7ff, #f8d6ff, #fff1c2, #c8f2e0, #d5d8ff, #f2c8e8, #cfd0dc);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .55), inset 0 0 0 3px rgba(120, 120, 140, .25);
  animation: st-spin 2.4s linear infinite; animation-play-state: paused; }
.st-shelf .st-cd.on .st-disc i { animation-play-state: running; }
.st-shelf .st-disc i::before { content: ''; position: absolute; inset: 24%; border-radius: 50%; background: var(--cover) center / cover, #3b2a55;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--hue) 80%, #fff), 0 0 6px rgba(0, 0, 0, .4); }
.st-shelf .st-disc i::after { content: ''; position: absolute; inset: 44%; border-radius: 50%; background: #0c0912; box-shadow: 0 0 0 3px rgba(225, 228, 240, .9); }
.st-shelf .st-sticker { position: absolute; right: -8px; top: -8px; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: 'Bangers', sans-serif; font-style: normal; font-size: 8px; letter-spacing: .5px; color: #2a1404; background: radial-gradient(circle at 35% 30%, #fff3a8, #ffcc2e 60%, #e79a10);
  transform: rotate(14deg); box-shadow: 0 2px 4px rgba(0, 0, 0, .5); }
.st-shelf .st-sticker.ok { width: 20px; height: 20px; font-size: 11px; color: #062a12; background: radial-gradient(circle at 35% 30%, #c8ffd6, #45d47a 65%, #1f9a4a); }
.st-shelf .st-cd.lock .st-art { filter: grayscale(.85) brightness(.6) blur(1.5px); }
.st-shelf .st-cd.lock .st-gloss { background: linear-gradient(118deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, .08) 30%, rgba(255, 255, 255, .02) 50%, rgba(255, 255, 255, .14) 70%, rgba(255, 255, 255, .03)); }
.st-shelf .st-cd.blank .st-art { filter: grayscale(.85) brightness(.6) blur(1.5px); }
.st-shelf .st-cd.blank .st-disc { filter: grayscale(.8) brightness(.7); }
.st-shelf .st-cd.eject .st-disc { transform: translateX(0) translateZ(300px) scale(1.5) !important; opacity: 0; transition: transform .5s cubic-bezier(.6, 0, .9, .5), opacity .35s .2s; }
.st-shelf .st-cd.eject .st-disc i { animation-duration: .35s; }
.px.st-shelf.leaving .st-cd:not(.eject), .px.st-shelf.leaving .st-cd-info, .px.st-shelf.leaving .st-cd-arrow { opacity: 0 !important; transition: opacity .25s; }
.px.st-shelf.leaving::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 44%, #fff, color-mix(in srgb, var(--hue) 60%, transparent) 40%, transparent 75%);
  opacity: 0; animation: st-flash .55s ease-in forwards; pointer-events: none; }

.st-shelf .st-cd-info { position: absolute; left: 60px; right: 60px; top: 250px; text-align: center; pointer-events: none; }
.st-shelf .st-cd-info.pop { animation: st-up .35s cubic-bezier(.2, 1.4, .4, 1); }
.st-shelf .st-cd-tag { display: block; font-style: normal; font-weight: 800; font-size: 8px; letter-spacing: .4em; text-transform: uppercase; color: var(--hue); }
.st-shelf .st-cd-name { display: block; margin-top: 1px; font-family: 'Bangers', sans-serif; font-weight: 400; font-size: 25px; letter-spacing: 1px; color: #fff4dc;
  text-shadow: 0 2px 0 #1b0f22, 0 3px 0 #0a0510, 0 0 16px color-mix(in srgb, var(--hue) 55%, transparent); }
.st-shelf .st-cd-line { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 4px; font-weight: 700; font-size: 9px; letter-spacing: .08em; color: rgba(255, 240, 220, .72); }
.st-shelf .st-cd-line .ok { color: #7fe3a0; }
.st-shelf .st-cd-line .soon { font-family: 'Bangers', sans-serif; font-weight: 400; font-size: 12px; letter-spacing: 1px; color: #ffd23b; }
.st-shelf .st-cd-line .go { color: #fff4dc; }
.st-shelf .st-cd-line b, .st-shelf .st-shelf-keys b { display: inline-flex; align-items: center; justify-content: center; min-width: 13px; height: 13px; padding: 0 3px; margin-right: 3px; border-radius: 7px;
  font-weight: 800; font-size: 8px; color: #072a12; background: radial-gradient(circle at 35% 30%, #b8ffc9, #3fcf72 70%); box-shadow: 0 1px 0 #0a3a1a; }
.st-shelf .st-cd-arrow { position: absolute; top: 151px; font-size: 16px; color: var(--hue); cursor: pointer; text-shadow: 0 0 8px color-mix(in srgb, var(--hue) 70%, transparent);
  transition: opacity .2s; animation: st-nudge 1.2s ease-in-out infinite; }
.st-shelf .st-cd-arrow.l { left: 14px; } .st-shelf .st-cd-arrow.r { right: 14px; animation-direction: reverse; }
.st-shelf .st-cd-arrow.off { opacity: .12; }
.st-shelf .st-shelf-keys { position: absolute; left: 16px; right: 16px; bottom: 9px; display: flex; gap: 14px; justify-content: flex-end; align-items: center;
  font-weight: 700; font-size: 8px; letter-spacing: .1em; color: rgba(255, 240, 220, .55); }
.st-shelf .st-shelf-keys .st-shelf-back { margin-right: auto; cursor: pointer; color: rgba(255, 240, 220, .75); }
.st-shelf .st-shelf-keys .st-shelf-back:hover { color: var(--hue); }
.st-shelf .st-shelf-keys .st-shelf-dbg, .st-shelf .st-shelf-keys .st-dbg-stage { cursor: pointer; color: rgba(255, 240, 220, .55); }
@keyframes st-spin { to { transform: rotate(360deg); } }
@keyframes st-bob { 50% { translate: 0 -3px; } }
@keyframes st-sweep { 0%, 35% { background-position: 130% 0; } 75%, 100% { background-position: -30% 0; } }
@keyframes st-up { from { opacity: 0; transform: translateY(6px) scale(.96); } }
@keyframes st-nudge { 50% { translate: -3px 0; } }
@keyframes st-flash { 40% { opacity: .9; } 100% { opacity: 1; } }

/* ---- les réglages communs : couleurs, police, ombre douce ---- */
/* (jamais la graisse 500 : son fichier, assets/fonts/barlow-condensed-n-latin-9.woff2, ne se charge pas, 27 oct. 2026 ; 600 à 800) */
.px.st-hud, .px.st-cine {
  --st-ink: #ece8f2; --st-mute: rgba(236, 232, 242, .62); --st-dim: rgba(236, 232, 242, .3); --st-acc: #e6d3a3; --st-moon: #b4c8ff; --st-red: #e88078;
  --st-bg: rgba(9, 7, 16, .62); --st-rule: rgba(236, 232, 242, .22);
  --st-sh: 0 1px 2px rgba(0, 0, 0, .7), 0 0 9px rgba(0, 0, 0, .4);
  color: var(--st-ink);
}
.px.st-hud, .px.st-hud *, .px.st-cine, .px.st-cine * { font-family: 'Barlow Condensed', 'Nunito', 'Segoe UI', sans-serif; -webkit-text-stroke: 0; }
.st-hud { pointer-events: none; z-index: 6; }
.px.st-hud > div, .px.st-cine > div { text-shadow: var(--st-sh); }

/* une touche : son picto (src/ui/glyphs.js, à la manette du joueur), à la taille du texte autour */
.px .st-k { display: inline-flex; align-items: center; margin-right: 3px; vertical-align: middle; line-height: 1; letter-spacing: 0; text-shadow: none; font-style: normal; text-transform: none; }
.px .st-k .pg { vertical-align: 0; }
.px .st-kt { font-weight: 800; }

/* ---- le HUD (30 oct. 2026, le créateur : « et le hud aussi ») : la même famille que la pause. Toujours aussi peu de choses à l'écran et
   qui s'effacent, mais lisibles sur n'importe quel décor : un cartouche bleu nuit penché (.st-chip : le ::before peint, le texte reste droit),
   l'or et le trait d'encre de la BD, le Bangers pour les chiffres, le jaune seulement pour ce qu'on peut faire tout de suite (A). ---- */
.px .st-go, .px .st-cnt, .px .st-hint > span, .px .st-talk, .px .st-tuto { isolation: isolate; text-shadow: none; }
.px .st-go::before, .px .st-cnt::before, .px .st-hint > span::before, .px .st-talk::before, .px .st-tuto::before { content: ''; position: absolute; z-index: -1; inset: 0; transform: skewX(-7deg); background: linear-gradient(90deg, #100a1e, #1b1335); box-shadow: 2px 2px 0 rgba(4, 2, 9, .75); }

/* les cœurs (en haut à gauche) : après un coup, un soin, ou pendant un danger */
.px .st-hp { position: absolute; left: 16px; top: 13px; display: flex; gap: 1.5px; opacity: 0; transform: translateX(-8px); transition: opacity .3s, transform .3s cubic-bezier(.2, 1.4, .4, 1); }
.px .st-hp.on { opacity: 1; transform: none; }
.px .st-hp i { width: 12.5px; height: 11.5px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -2 22 20'%3E%3Cpath d='M9 15.5 1.6 8.3A4.6 4.6 0 0 1 9 2.6a4.6 4.6 0 0 1 7.4 5.7z' fill='%231b1335' stroke='%2305030a' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.px .st-hp i.on { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -2 22 20'%3E%3Cpath d='M9 15.5 1.6 8.3A4.6 4.6 0 0 1 9 2.6a4.6 4.6 0 0 1 7.4 5.7z' fill='%23ff5a40' stroke='%2305030a' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.px .st-hp i.lost { animation: st-heartout .45s cubic-bezier(.3, 1.3, .5, 1); }
.px .st-hp i.gain { animation: st-heartin .35s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes st-heartout { 0% { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -2 22 20'%3E%3Cpath d='M9 15.5 1.6 8.3A4.6 4.6 0 0 1 9 2.6a4.6 4.6 0 0 1 7.4 5.7z' fill='%23fff3e0' stroke='%2305030a' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E"); scale: 1.7; rotate: -14deg; } }
@keyframes st-heartin { 0% { scale: .3; } }
.px .st-hp.low i.on { animation: st-beat .9s ease-in-out infinite; }
@keyframes st-beat { 0%, 45%, 100% { scale: 1; } 18% { scale: 1.12; } }

/* le guide (en haut à droite) : l'objectif dans un cartouche accroché au bord de l'écran, où aller, la mini-carte ; toujours là pendant le
   jeu mais calme, il s'éclaire quand l'objectif change ou qu'on reste immobile */
.px .st-right { position: absolute; right: 0; top: 13px; width: 190px; display: flex; flex-direction: column; align-items: flex-end; }
.px .st-guide { display: flex; flex-direction: column; align-items: flex-end; opacity: 0; transition: opacity .8s ease; }
.px .st-guide.on { opacity: .7; }
.px .st-guide.on.lit { opacity: 1; transition: opacity .3s ease; }
/* (30 oct. 2026, le créateur : « pas trop intrusif ») en jouant, du texte seul ; le cartouche seulement quand il sert : objectif neuf, ou immobile (.lit) */
.px .st-go { position: relative; max-width: 168px; padding: 3px 16px 3px 12px; text-align: right; text-wrap: balance; text-shadow: var(--st-sh); }
.px .st-guide.lit .st-go { text-shadow: none; }
.px .st-go::before { right: -400px; opacity: 0; transition: opacity .7s; box-shadow: -1.5px 0 0 var(--st-acc), 2px 2.5px 0 rgba(4, 2, 9, .75); }
.px .st-guide.lit .st-go::before { opacity: 1; transition: opacity .25s; }
.px .st-go:empty { display: none; }
.px .st-go.new { animation: st-gonew .4s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes st-gonew { from { translate: 24px 0; } }
.px .st-go b { display: block; font-size: 9px; font-weight: 700; line-height: 10.5px; color: var(--st-ink); }
.px .st-go span { display: block; margin-top: 2px; font-size: 6.5px; font-weight: 700; line-height: 8px; letter-spacing: .4px; font-variant-numeric: tabular-nums; color: var(--st-mute); }
.px .st-go span:empty { display: none; }
.px .st-go span em { font-style: normal; letter-spacing: 1.3px; text-transform: uppercase; color: #ffd26b; }
.px .st-go span i { font-style: normal; color: var(--st-dim); }
/* la mini-carte : ronde, nord en haut ; le fond (une vue de dessus peinte une fois) glisse sous le joueur */
.px .st-map { position: relative; width: 44px; height: 44px; margin: 7px 16px 2px 0; }
.px .st-guide.nomap .st-map { display: none; }
.px .st-map-in { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; background: #171230; }
.px .st-map-in canvas { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; image-rendering: auto; opacity: .95; }
.px .st-map-cone { position: absolute; left: 50%; top: 50%; width: 24px; height: 21px; margin: -21px 0 0 -12px; transform-origin: 50% 100%;
  background: linear-gradient(to top, rgba(255, 226, 150, .34), rgba(255, 226, 150, 0)); clip-path: polygon(50% 100%, 6% 0, 94% 0); }
.px .st-map-ring { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 1px #05030a, 0 0 0 1.75px rgba(230, 211, 163, .75); }
.px .st-map-me { position: absolute; left: 50%; top: 50%; width: 6px; height: 7px; margin: -3.5px 0 0 -3px; background: #fff3e0;
  clip-path: polygon(50% 0, 100% 100%, 50% 76%, 0 100%); filter: drop-shadow(0 0 1px #05030a) drop-shadow(0 0 1px #05030a); }
.px .st-map-tgt { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; background: #ff5a40; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); filter: drop-shadow(0 0 1px #05030a); }
.px .st-map-tgt.edge { width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; }
.px .st-map-tgt.off { display: none; }
.px .st-map s { display: none; }
.px .st-map s.n { display: block; position: absolute; left: 50%; top: -3.5px; width: 7px; margin-left: -3.5px; text-align: center; text-decoration: none; font-size: 5px; font-weight: 800; line-height: 6.5px; color: #1a1020; background: #ffd26b; }

/* son repère dans le monde : un petit losange, seulement quand l'objectif est devant soi et à moins de 35 m */
.px .st-mark { position: absolute; transform: translate(-50%, -100%); text-align: center; opacity: 0; transition: opacity .4s; pointer-events: none; }
.px .st-mark.on { opacity: .7; }
.px .st-mark i { display: block; margin: 0 auto; width: 5px; height: 5px; border: 1px solid #05030a; background: #ff5a40; transform: rotate(45deg); box-shadow: 1.5px 1.5px 0 rgba(4, 2, 9, .6); }

/* l'horloge de la nuit et la jauge (sous le guide) : quand elle avance, puis elle s'efface */
.px .st-clk { margin: 9px 16px 0 0; text-align: right; opacity: 0; transform: translateY(-3px); transition: opacity .5s, transform .5s; }
.px .st-clk.on { opacity: 1; transform: none; }
.px .st-clk b { display: block; font-family: 'Bangers', sans-serif; font-size: 19px; font-weight: 400; line-height: 19px; letter-spacing: 1px; color: #ffe6a6; text-shadow: 0 1.5px 0 #05030a, 0 3px 4px rgba(0, 0, 0, .5); }
.px .st-clk span { display: block; margin-top: 1px; font-size: 5.5px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--st-ink); }
.px .st-clk i { display: block; margin: 3px 0 0 auto; width: 70px; height: 3px; background: #100a1e; box-shadow: 0 0 0 .5px #05030a; overflow: hidden; }
.px .st-clk u { display: block; height: 100%; width: 0; background: #ffc44d; transition: width .3s; }
.px .st-clk.late b { color: #ff9a80; } .px .st-clk.late u { background: #ff5a40; }
.px .st-clk.tick b { animation: st-clkglow .4s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes st-clkglow { 0% { scale: 1.3; } }

/* les compteurs (en bas à droite) : seulement quand on ramasse quelque chose ; accrochés au bord comme le guide */
.px .st-cnt { position: absolute; right: 0; bottom: 16px; padding: 1.5px 16px 1.5px 10px; display: flex; align-items: baseline; gap: 4px; opacity: 0; transform: translateX(30px); transition: opacity .3s, transform .3s cubic-bezier(.2, 1.4, .4, 1); }
.px .st-cnt::before { right: -400px; box-shadow: -1.5px 0 0 var(--st-acc), 2px 2.5px 0 rgba(4, 2, 9, .75); }
.px .st-cnt.on { opacity: 1; transform: none; }
.px .st-cnt b { display: inline-block; font-family: 'Bangers', sans-serif; font-size: 14px; font-weight: 400; line-height: 14px; color: #ffe6a6; }
.px .st-cnt.on b { animation: st-bump .34s cubic-bezier(.3, 1.6, .5, 1) .12s backwards; }
@keyframes st-bump { from { scale: 1.5; } }
.px .st-cnt em { font-style: normal; font-size: 8px; font-weight: 600; color: var(--st-mute); }
.px .st-cnt span { margin-left: 3px; font-size: 6px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--st-acc); }
.px .st-ic { display: inline-block; align-self: center; width: 6px; height: 6px; border: 1px solid #ffd26b; transform: rotate(45deg); margin: 0 3px; }
.px .st-ic.fist { width: 14px; height: 14px; border: 0; transform: none; background: url('../assets/story/fragment/fist_ic.png') center / contain no-repeat; } /* (le poing des fragments de Bagarre) */
.px .st-ic.star { width: 9px; height: 9px; border: 0; transform: none; background: #ffd26b; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }

/* une petite aide à la fois (en bas au milieu) */
.px .st-hint { position: absolute; left: 0; right: 0; bottom: 16px; display: flex; justify-content: center; gap: 8px; font-size: 8px; font-weight: 600; letter-spacing: .3px; color: var(--st-ink);
  opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .3s; }
.px .st-hint.on { opacity: 1; transform: none; }
.px .st-hint > span { position: relative; padding: 1.5px 7px; }

/* au-dessus de ce qu'on peut prendre ou de qui on peut parler : jaune quand A marche, comme la barre des menus ; bleu nuit pour un repère de loin */
.px .st-talk { position: absolute; transform: translate(-50%, -100%); padding: 1.5px 6px; white-space: nowrap; font-size: 8px; font-weight: 700; letter-spacing: .3px; color: var(--st-ink); opacity: 0; transition: opacity .18s; pointer-events: none; }
.px.st-hud .st-talk { text-shadow: none; }
.px .st-talk.on { opacity: 1; }
.px .st-talk small { margin-left: 4px; font-size: 6px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--st-mute); }
.px .st-talk:has(.st-k) { color: #1a1020; }
.px .st-talk:has(.st-k)::before { background: linear-gradient(#ffe39a, #ffc44d); }
.px .st-talk:has(.st-k) small { color: rgba(26, 16, 32, .72); }
.px .st-talk .st-k { border-color: #1a1020; color: #1a1020; background: none; }

/* le chargement : le rêve se prépare (les shaders) */
.px .st-load { position: absolute; inset: -2000px; background: #08060e; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; transition: opacity .8s; }
.px .st-load b { font-size: 7px; font-weight: 600; letter-spacing: 3.5px; text-transform: uppercase; color: var(--st-mute); }
.px .st-load i { order: -1; width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(236, 232, 242, .14); border-top-color: var(--st-acc); animation: st-spin 1.2s linear infinite; }
.px .st-load.off { opacity: 0; }
@keyframes st-spin { to { transform: rotate(360deg); } }

/* un message (point de passage, objet caché, ce que dit le niveau) : en haut, au milieu, puis il s'efface */
.px .st-msg { position: absolute; left: 110px; right: 110px; top: 66px; text-align: center; font-size: 10.5px; font-weight: 600; line-height: 13px; color: var(--st-ink);
  opacity: 0; transform: translateY(-4px); transition: opacity .4s, transform .4s; }
.px .st-msg.on { opacity: 1; transform: none; }
.px .st-msg b { font-family: 'Bangers', sans-serif; font-size: 18px; font-weight: 400; line-height: 20px; letter-spacing: 1px; color: #ffe6a6; text-shadow: 0 1.5px 0 #2a1306, 0 3px 0 #05030a; }
.px .st-msg small { display: block; margin-top: 3px; font-size: 9px; font-weight: 600; line-height: 11px; color: var(--st-ink); }
.px .st-msg small .st-k { margin-left: 6px; }

/* (la pause : css/pause.css) */
@keyframes st-fadein { from { opacity: 0; } }

/* ---- la fin du niveau ---- */
.px .st-end { position: absolute; inset: -2000px; display: flex; align-items: center; justify-content: center; background: rgba(6, 5, 12, .7); animation: st-fadein .8s ease-out; }
.px .st-end-box { min-width: 250px; text-align: center; color: var(--st-ink); text-shadow: var(--st-sh); }
.px .st-end-box > small { display: block; font-size: 6.5px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--st-acc); }
.px .st-end-box > b { display: block; margin: 5px 0 12px; font-size: 22px; font-weight: 700; letter-spacing: 5px; text-transform: uppercase; }
.px .st-end-row { display: flex; justify-content: space-between; font-size: 9.5px; font-weight: 600; color: var(--st-ink); border-bottom: 1px solid var(--st-rule); padding: 4px 0; }
.px .st-end-row em { font-style: normal; font-weight: 600; color: var(--st-acc); font-variant-numeric: tabular-nums; }
.px .st-end-next { margin-top: 10px; font-size: 8.5px; font-weight: 600; font-style: italic; color: var(--st-mute); }
.px .st-end-k { margin-top: 10px; font-size: 8.5px; font-weight: 600; color: var(--st-ink); }

/* ---- un niveau ouvert : le fondu d'une porte ---- */
.px .st-fade { position: absolute; inset: -2000px; background: #05030a; opacity: 0; transition: opacity .35s; pointer-events: none; }
.px .st-fade.on { opacity: 1; }

/* ---- les bulles des sbires (au-dessus de leur tête, elles les suivent) ---- */
.px .st-sb { position: absolute; transform: translate(-50%, -100%); white-space: nowrap; background: rgba(9, 7, 16, .66); border-radius: 3px; padding: 2px 6px 2px;
  font-size: 7.5px; font-weight: 600; font-style: italic; letter-spacing: .2px; color: var(--st-ink); text-shadow: none; transition: opacity .25s; pointer-events: none; }
.px .st-sb::after { content: ''; position: absolute; left: 50%; bottom: -4px; margin-left: -3px; border: 3px solid transparent; border-top: 4px solid rgba(9, 7, 16, .66); border-bottom: 0; }
/* (les bulles de DR FEELBAD, le guide de la Forêt de la Discorde : son direct ; src/story/foret/guide.js) */
.px .st-sb.fb { white-space: normal; width: max-content; max-width: 150px; text-align: center; line-height: 1.25; background: rgba(30, 12, 58, .84); box-shadow: 0 0 0 .6px #a37cff; font-style: normal; padding: 2px 6px 3px; }
.px .st-sb.fb::after { border-top-color: rgba(30, 12, 58, .84); }
.px .st-sb.fb i { display: block; font-size: 5.5px; font-style: normal; font-weight: 700; letter-spacing: .6px; color: #ff5a78; margin-bottom: 1px; }

/* ---- un mot qui s'envole d'un point du niveau (un coup, un nom de spécial) : petit, net, il monte et s'efface ---- */
.px .st-pop { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--st-ink);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .75), 0 0 7px var(--pc, transparent); pointer-events: none; animation: st-pop .85s ease-out forwards; }
@keyframes st-pop { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.92); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -110%); } }

/* ---- la carte VS d'avant un combat : deux noms face à face ---- */
.px .st-vs { position: absolute; inset: 0; pointer-events: none; }
.px .st-vs-l, .px .st-vs-r { position: absolute; top: 132px; width: 290px; height: 66px; display: flex; align-items: center; gap: 10px; padding: 0 22px; box-sizing: border-box;
  transition: transform .55s cubic-bezier(.2, .8, .2, 1), opacity .45s; opacity: 0; }
.px .st-vs-l { left: -220px; width: 510px; padding-left: 242px; background: linear-gradient(90deg, rgba(9, 7, 16, .85) 45%, rgba(9, 7, 16, 0)); transform: translateX(-30px); }
.px .st-vs-r { right: -220px; width: 510px; padding-right: 242px; flex-direction: row-reverse; text-align: right; background: linear-gradient(270deg, rgba(9, 7, 16, .85) 45%, rgba(9, 7, 16, 0)); transform: translateX(30px); }
.px .st-vs.on .st-vs-l, .px .st-vs.on .st-vs-r { opacity: 1; transform: none; }
.px .st-vs.out .st-vs-l, .px .st-vs.out .st-vs-r { opacity: 0; }
.px .st-vs img { width: 46px; height: 46px; object-fit: cover; border: 1px solid rgba(236, 232, 242, .35); background: rgba(236, 232, 242, .05); flex: none; }
.px .st-vs b { display: block; font-weight: 700; font-size: 19px; line-height: 20px; letter-spacing: 3px; text-transform: uppercase; color: var(--st-ink); }
.px .st-vs small { display: block; margin-top: 3px; font-size: 6.5px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--st-acc); }
.px .st-vs-x { position: absolute; left: 0; right: 0; top: 158px; text-align: center; font-size: 11px; font-weight: 600; letter-spacing: 5px; padding-left: 5px; color: var(--st-mute); opacity: 0; transition: opacity .5s .3s; }
.px .st-vs.on .st-vs-x { opacity: 1; } .px .st-vs.out .st-vs-x { opacity: 0; transition-delay: 0s; }
.px .st-vs-boss { position: absolute; left: 0; right: 0; top: 112px; text-align: center; font-size: 7px; font-weight: 700; letter-spacing: 6px; padding-left: 6px; color: var(--st-red); }
.px .st-vs.boss .st-vs-r { background: linear-gradient(270deg, rgba(42, 8, 12, .88) 45%, rgba(42, 8, 12, 0)); }

/* ---- les vignettes de réaction pendant un combat (un KO, la colère du boss) ---- */
.px .st-ko { position: absolute; top: 72px; display: flex; align-items: center; gap: 7px; max-width: 230px; background: rgba(9, 7, 16, .72); border-left: 2px solid var(--kc); padding: 5px 10px 5px 5px;
  transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .4s; opacity: 0; }
.px .st-ko.r { right: 16px; transform: translateX(14px); } .px .st-ko.l { left: 16px; transform: translateX(-14px); }
.px .st-ko.on { opacity: 1; transform: none; }
.px .st-ko.out { opacity: 0; }
.px .st-ko img { width: 30px; height: 30px; object-fit: cover; border: 1px solid rgba(236, 232, 242, .3); flex: none; }
.px .st-ko span { font-size: 9px; font-weight: 600; line-height: 11px; color: var(--st-ink); text-shadow: none; }

/* ---- le flash présidentiel : un bandeau d'info, sobre, en haut au milieu ---- */
.px .st-flash { position: absolute; left: 180px; right: 180px; top: 14px; display: flex; align-items: center; gap: 7px; background: linear-gradient(90deg, rgba(9, 7, 16, .8), rgba(9, 7, 16, .5));
  border-left: 2px solid var(--st-red); padding: 4px 9px 4px 4px; opacity: 0; transform: translateY(-6px); transition: opacity .45s, transform .45s; }
.px .st-flash.on { opacity: 1; transform: none; } .px .st-flash.out { opacity: 0; transform: translateY(-6px); }
.px .st-flash i { position: absolute; left: 2px; top: -9px; font-style: normal; font-size: 5.5px; font-weight: 700; letter-spacing: 2px; color: var(--st-red); }
.px .st-flash img { width: 22px; height: 22px; object-fit: cover; border: 1px solid rgba(236, 232, 242, .25); flex: none; }
.px .st-flash span { font-size: 8.5px; font-weight: 600; line-height: 10px; color: var(--st-ink); text-shadow: none; }

/* ---- un grand titre au centre (TOMBÉ, FRAGMENT DE BAGARRE, K.O., PHASE 2…) : des lettres espacées, un filet, une ligne ---- */
.px .st-cap { position: absolute; left: 0; right: 0; top: 112px; text-align: center; pointer-events: none; opacity: 0; transform: scale(1.04); transition: opacity .45s, transform .7s cubic-bezier(.2, .8, .2, 1); }
.px .st-cap.on { opacity: 1; transform: none; } .px .st-cap.out { opacity: 0; transform: none; transition: opacity .6s; }
.px .st-cap b { display: block; font-weight: 700; font-size: 24px; line-height: 26px; letter-spacing: 7px; padding-left: 7px; text-transform: uppercase; color: var(--st-ink); }
.px .st-cap small { display: block; width: fit-content; max-width: 380px; margin: 6px auto 0; padding-top: 5px; border-top: 1px solid var(--st-rule); font-size: 8.5px; font-weight: 600; letter-spacing: .4px; color: var(--st-mute); }
.px .st-cap.win b { color: var(--st-acc); } .px .st-cap.lose b { color: #dcbcc2; } .px .st-cap.hall b { color: var(--st-moon); } .px .st-cap.rage b { color: var(--st-red); letter-spacing: 9px; }

/* ---- un défi chronométré (en haut au milieu) ---- */
.px .st-race { position: absolute; left: 230px; right: 230px; top: 14px; text-align: center; opacity: 0; transition: opacity .35s; }
.px .st-race.on { opacity: 1; }
.px .st-race b { display: block; font-size: 6px; font-weight: 700; letter-spacing: 2.2px; text-transform: uppercase; color: var(--st-acc); }
.px .st-race i { display: block; font-style: normal; font-size: 18px; line-height: 20px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--st-ink); }
.px .st-race span { font-size: 7.5px; font-weight: 600; color: var(--st-mute); }
.px .st-race.low i { color: var(--st-red); }

/* ---- le viseur du grappin (sur l'anneau visé) ---- */
.px .st-hk { position: absolute; width: 20px; height: 20px; margin: -10px 0 0 -10px; border: 1px solid rgba(196, 238, 206, .85); border-radius: 50%; box-shadow: 0 0 4px rgba(0, 0, 0, .5); opacity: 0; transition: opacity .15s; pointer-events: none; }
.px .st-hk.on { opacity: 1; }
.px .st-hk::before { content: ''; position: absolute; left: 50%; top: 50%; width: 2px; height: 2px; margin: -1px 0 0 -1px; border-radius: 50%; background: rgba(196, 238, 206, .9); }
.px .st-hk > em { position: absolute; left: 50%; top: 21px; transform: translateX(-50%); white-space: nowrap; font-size: 7px; font-style: normal; font-weight: 700; letter-spacing: 0; color: rgba(196, 238, 206, .95); text-shadow: var(--st-sh); }

/* ---- la carte d'un pouvoir neuf (au milieu, en bas) et la rangée des pouvoirs, puis elles s'effacent ---- */
.px .st-tuto { position: absolute; left: 196px; right: 196px; top: 268px; text-align: center; padding: 4px 10px 5px; opacity: 0; transform: translateY(8px); transition: opacity .3s, transform .3s cubic-bezier(.2, 1.4, .4, 1); }
.px .st-tuto::before { background: linear-gradient(90deg, rgba(16, 10, 30, .9), rgba(27, 19, 53, .9)); box-shadow: 0 0 0 1px #05030a, 0 0 0 1.75px rgba(230, 211, 163, .7); }
.px .st-tuto.on { opacity: 1; transform: none; }
.px .st-tuto small { display: block; font-size: 6px; font-weight: 700; letter-spacing: 2.6px; text-transform: uppercase; color: var(--st-acc); }
.px .st-tuto b { display: block; margin-top: 2px; font-family: 'Bangers', sans-serif; font-size: 15px; font-weight: 400; line-height: 16px; letter-spacing: 1px; text-transform: uppercase; color: #ffe6a6; text-shadow: 0 1.5px 0 #2a1306; }
.px .st-tuto p { margin: 1px auto 0; max-width: 236px; font-size: 7.5px; font-weight: 600; line-height: 9px; color: var(--st-ink); }
.px .st-tuto .k { margin-top: 3px; font-size: 8px; font-weight: 600; color: var(--st-mute); }
.px .st-ab { position: absolute; left: 0; right: 0; top: 300px; display: flex; justify-content: center; gap: 5px; opacity: 0; transition: opacity .5s; }
.px .st-ab.on { opacity: 1; }
.px .st-ab i { font-style: normal; font-size: 6px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--st-dim); border: 1px solid rgba(236, 232, 242, .14); padding: 2px 6px; text-shadow: none; background: rgba(9, 7, 16, .4); }
.px .st-ab i.on { color: var(--st-ink); border-color: rgba(236, 232, 242, .35); }
.px .st-ab i.new { color: var(--st-acc); border-color: rgba(230, 211, 163, .7); }

/* ---- pendant une cinématique, un combat ou la pause, l'interface du niveau s'efface ---- */
.px.st-hud.cine .st-hp, .px.st-hud.cine .st-right, .px.st-hud.cine .st-clk, .px.st-hud.cine .st-cnt, .px.st-hud.cine .st-hint, .px.st-hud.cine .st-talk, .px.st-hud.cine .st-mark,
.px.st-hud.cine .st-hk, .px.st-hud.cine .st-race, .px.st-hud.cine .st-tuto, .px.st-hud.cine .st-ab,
.px.st-hud.paused .st-hp, .px.st-hud.paused .st-right, .px.st-hud.paused .st-clk, .px.st-hud.paused .st-cnt, .px.st-hud.paused .st-hint, .px.st-hud.paused .st-talk, .px.st-hud.paused .st-mark,
.px.st-hud.paused .st-hk, .px.st-hud.paused .st-tuto, .px.st-hud.paused .st-ab, .px.st-hud.paused .st-msg, .px.st-hud.paused .st-cap { opacity: 0; transition: opacity .3s; }

/* ---- les cinématiques : bandes noires, titres, sous-titres ---- */
.st-cine { pointer-events: none; z-index: 7; }
/* (elles débordent largement de la grille 640 × 360 : sur un écran plus large ou plus haut que du 16:9, elles vont quand
   même jusqu'aux bords ; l'écran coupe le reste) */
.px .st-bar { position: absolute; left: -4000px; right: -4000px; height: 4034px; background: #000; opacity: 0; transition: transform .7s cubic-bezier(.3, 0, .2, 1), opacity .7s; }
.px.st-cine.on .st-bar { opacity: 1; }
.px .st-bar.t { top: -4000px; transform: translateY(-100%); } .px .st-bar.b { bottom: -4000px; transform: translateY(100%); }
.px.st-cine.on .st-bar { transform: none; }
/* le titre d'un lieu : de grandes lettres espacées, un sous-titre entre deux filets */
.px .st-title { position: absolute; left: 0; right: 0; top: 130px; text-align: center; opacity: 0; transform: translateY(5px); transition: opacity 1.1s, transform 1.6s cubic-bezier(.2, .8, .2, 1); }
.px .st-title.on { opacity: 1; transform: none; }
.px .st-title b { display: block; font-weight: 700; font-size: 26px; line-height: 28px; letter-spacing: 9px; padding-left: 9px; text-transform: uppercase; color: var(--st-ink); }
.px .st-title small { display: flex; justify-content: center; align-items: center; gap: 9px; margin-top: 7px; font-size: 7.5px; font-weight: 600; letter-spacing: 3.4px; text-transform: uppercase; color: var(--st-acc); }
.px .st-title small::before, .px .st-title small::after { content: ''; width: 28px; height: 1px; background: currentColor; opacity: .5; }
.px .st-skip { position: absolute; right: 12px; bottom: 6px; z-index: 3; display: flex; align-items: center; gap: 4px; font-size: 5.5px; font-weight: 600; line-height: 6.5px; letter-spacing: 1px; text-transform: uppercase; text-align: right; color: rgba(236, 232, 242, .5); opacity: 0; transition: opacity .6s; }
.px.st-cine.on .st-skip { opacity: 1; }
.px.st-cine.on .st-skip.off { opacity: 0; }
/* passer une scène : le bouton tenu, un cercle se remplit autour de lui (director.js, holdSkip) */
.px .st-skip small { order: -1; font-size: inherit; }
.px .st-hold { position: relative; display: block; width: 19px; height: 19px; flex: none; }
.px .st-hold > svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); fill: none; stroke-width: 2.4; }
.px .st-hold .bg { stroke: rgba(236, 232, 242, .24); }
.px .st-hold .fg { stroke: #ffd400; stroke-dasharray: 1; stroke-dashoffset: 1; }
.px .st-hold b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--st-ink); }
.px .st-hold b .pg { margin: 0; vertical-align: 0; }
.px .st-hold b .pg-key { font-size: 4.6px; }
.px .st-skip.hold { color: rgba(255, 235, 170, .95); transition: opacity .1s; }

/* une réplique : un sous-titre en bas (sur la bande noire), le nom en petites capitales, le texte écrit lettre à lettre */
.px .st-say { position: absolute; left: 96px; right: 96px; bottom: 7px; text-align: center; opacity: 0; transform: translateY(3px); transition: opacity .22s, transform .25s; }
.px .st-say.on { opacity: 1; transform: none; }
.px .st-bub { position: relative; }
.px .st-bub b { display: block; margin-bottom: 2px; font-size: 6.5px; font-weight: 700; letter-spacing: 2.4px; padding-left: 2.4px; text-transform: uppercase; color: var(--st-acc); }
.px .st-bub > span { display: block; font-size: 10.5px; font-weight: 600; line-height: 13px; color: var(--st-ink); }
.px .st-bub > span i { font-style: normal; }
.px .st-bub > span i.em { color: var(--st-acc); font-style: italic; }
.px .st-bub > span i.hid { opacity: 0; }
/* (la suite : un petit triangle quand la phrase est finie) */
.px .st-bub > span em.nx { display: inline-block; margin-left: 5px; width: 0; height: 0; vertical-align: 1px; border-left: 4px solid rgba(236, 232, 242, .55); border-top: 2.5px solid transparent; border-bottom: 2.5px solid transparent; animation: st-fadein .4s ease-out; }
/* le narrateur : sans nom, en italique */
.px .st-say.narr .st-bub b { display: none; }
.px .st-say.narr .st-bub > span { font-style: italic; color: rgba(236, 232, 242, .86); }
.px .st-say.narr .st-bub > span i { font-style: italic; }

/* un mot qui frappe dans une cinématique (BAM, COURS…) : grandes lettres nettes, un court éclat, puis il s'efface */
.px .st-slam { position: absolute; left: 0; right: 0; text-align: center; font-weight: 800; letter-spacing: 6px; padding-left: 6px; text-transform: uppercase; color: var(--st-ink);
  text-shadow: 0 2px 3px rgba(0, 0, 0, .7), 0 0 16px var(--pc, transparent); pointer-events: none; animation: st-slam 1s ease-out forwards; }
@keyframes st-slam { 0% { opacity: 0; transform: scale(1.18); } 14% { opacity: 1; transform: scale(1); } 72% { opacity: 1; } 100% { opacity: 0; transform: scale(.985); } }

/* ---- le prologue (28 oct. 2026) : le narrateur pendant le jeu, le noir, les cartes des persos, la jauge à marteler ---- */
/* la voix du narrateur pendant qu'on joue : un sous-titre en italique en bas, sans bande noire */
.px .st-vo { position: absolute; left: 100px; right: 100px; bottom: 22px; text-align: center; font-size: 10px; font-weight: 600; font-style: italic; line-height: 13px;
  color: rgba(236, 232, 242, .9); opacity: 0; transform: translateY(3px); transition: opacity .6s, transform .6s; }
.px .st-vo.on { opacity: 1; transform: none; }
.px.st-hud.cine .st-vo, .px.st-hud.paused .st-vo { opacity: 0; transition: opacity .3s; }
/* le noir : sous les titres et les répliques */
.px .st-black { position: absolute; left: -4000px; right: -4000px; top: -4000px; bottom: -4000px; background: #000; opacity: 0; transition: opacity 1.2s; }
.px .st-black.on { opacity: 1; }
/* la carte d'un perso qui entre dans l'histoire : un filet d'or, ce qu'il est en petit, son nom en grand */
/* une question au joueur (D.choose) : au-dessus des sous-titres, les réponses en colonne, celle choisie soulignée d'or */
.px .st-choice { position: absolute; left: 0; right: 0; bottom: 46px; display: flex; flex-direction: column; align-items: center; gap: 3px; opacity: 0; pointer-events: none; transition: opacity .25s; }
.px .st-choice.on { opacity: 1; }
.px .st-choice b { margin-bottom: 3px; font-size: 9px; font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; color: var(--st-acc); }
.px .st-choice span { min-width: 120px; padding: 3px 12px; text-align: center; font-size: 10px; font-weight: 600; color: var(--st-ink); background: rgba(8, 6, 16, .62); border: 1px solid transparent; opacity: .55; transition: opacity .15s, border-color .15s; }
.px .st-choice span.on { opacity: 1; border-color: var(--st-acc); }
.px .st-card { position: absolute; left: 34px; bottom: 74px; padding-left: 9px; opacity: 0; transform: translateX(-8px); transition: opacity .7s, transform .9s cubic-bezier(.2, .8, .2, 1); }
.px .st-card.on { opacity: 1; transform: none; }
.px .st-card i { position: absolute; left: 0; top: 1px; bottom: 1px; width: 1.5px; background: var(--st-acc); transform: scaleY(0); transform-origin: top; transition: transform .8s .1s cubic-bezier(.2, .8, .2, 1); }
.px .st-card.on i { transform: scaleY(1); }
.px .st-card small { display: block; font-size: 6.5px; font-weight: 700; letter-spacing: 2.6px; text-transform: uppercase; color: var(--st-acc); }
.px .st-card b { display: block; margin-top: 1px; font-size: 21px; line-height: 22px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; color: var(--st-ink); }
/* marteler A : au milieu, la consigne et la jauge */
.px .st-mash { position: absolute; left: 0; right: 0; top: 214px; text-align: center; opacity: 0; transition: opacity .3s; }
.px .st-mash.on { opacity: 1; }
.px .st-mash b { display: block; font-size: 11px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; color: var(--st-ink); }
.px .st-mash b .st-k { font-size: 12px; }
.px .st-mash.hit b { animation: st-mashhit .16s ease-out; }
@keyframes st-mashhit { 0% { transform: scale(1.12); color: var(--st-acc); } }
.px .st-mash span { display: block; width: 150px; height: 3px; margin: 6px auto 0; background: rgba(236, 232, 242, .2); }
.px .st-mash span i { display: block; height: 100%; background: var(--st-acc); transform: scaleX(0); transform-origin: left; transition: transform .08s; box-shadow: 0 0 6px rgba(230, 211, 163, .7); }

/* ---- les combats-leçons (src/story/lesson.js) : l'adversaire parle en haut, les buts en dessous, cochés au fur et à mesure ---- */
.px.st-hud .st-coach { position: absolute; left: 140px; right: 140px; top: 22px; text-align: center; pointer-events: none; opacity: 0; transform: translateY(-6px); transition: opacity .35s, transform .35s; }
.px.st-hud .st-coach.on { opacity: 1; transform: none; }
.px.st-hud .st-coach-n { display: block; font-weight: 800; font-size: 7px; letter-spacing: .32em; color: var(--st-acc); }
.px.st-hud .st-coach-l { display: block; margin-top: 2px; font-weight: 700; font-size: 11.5px; line-height: 1.25; color: var(--st-ink); text-shadow: 0 1px 2px rgba(0, 0, 0, .9), 0 0 10px rgba(0, 0, 0, .6); }
.px.st-hud .st-coach-l.in { animation: st-coach-in .3s ease-out; }
.px.st-hud .st-coach-g { display: flex; justify-content: center; flex-wrap: wrap; gap: 5px 12px; margin-top: 7px; opacity: 0; transition: opacity .3s; }
.px.st-hud .st-coach-g.on { opacity: 1; }
.px.st-hud .st-coach-g > span { display: inline-flex; align-items: center; gap: 4px; padding: 2px 7px 2px 4px; border-radius: 9px; background: rgba(9, 7, 16, .55);
  border: 1px solid rgba(236, 232, 242, .18); font-weight: 700; font-size: 8px; letter-spacing: .04em; color: var(--st-ink); transition: background .3s, border-color .3s; }
.px.st-hud .st-coach-g > span u { display: inline-flex; align-items: center; justify-content: center; width: 9px; height: 9px; border-radius: 50%; border: 1px solid rgba(236, 232, 242, .5);
  text-decoration: none; font-size: 7px; color: #10220f; }
.px.st-hud .st-coach-g > span.ok { border-color: rgba(230, 211, 163, .7); background: rgba(60, 46, 16, .55); }
.px.st-hud .st-coach-g > span.ok u { background: var(--st-acc); border-color: var(--st-acc); animation: st-coach-tick .4s cubic-bezier(.2, 1.8, .4, 1); }
.px.st-hud .st-coach-g > span i { font-style: normal; color: var(--st-mute); }
.px.st-hud .st-coach-g small { display: inline-flex; align-items: center; margin-left: 3px; opacity: .85; }
.px.st-hud .st-coach-g small .st-k { margin-right: 2px; font-size: 8px; }
.px.st-hud .st-coach-g small em { font-style: normal; font-size: 7px; color: var(--st-mute); margin-right: 3px; }
@keyframes st-coach-in { from { opacity: 0; transform: translateY(3px); } }
@keyframes st-coach-tick { from { transform: scale(.3); } }

/* la Mer de Pastis : la jauge du turbo anisé (en bas à droite ; seulement quand elle se recharge, puis « TURBO PRÊT » un instant) */
.px .st-turbo { position: absolute; right: 22px; bottom: 26px; width: 86px; text-align: right; opacity: 0; transition: opacity .4s; }
.px .st-turbo.on { opacity: 1; }
.px .st-turbo b { display: block; font-size: 5.5px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--st-acc); margin-bottom: 2px; }
.px .st-turbo i { display: block; height: 2px; background: rgba(255, 255, 255, .18); }
.px .st-turbo u { display: block; height: 100%; width: 0; background: var(--st-ink); text-decoration: none; }
.px .st-turbo.full u { background: var(--st-acc); }

/* le passage voilé d'un lieu du monde à un autre (29 oct. 2026 : du hub à un niveau, sans menu) : une brume pâle qui monte,
   le nom du lieu en petites capitales, puis elle se dissipe sur le nouveau lieu (src/ui/story.js storyVeil) */
.st-veil { position: fixed; inset: 0; z-index: 61; pointer-events: none; opacity: 0; transition: opacity .7s ease; overflow: hidden;
  background: radial-gradient(ellipse at 50% 55%, #f4f0fa 0%, #cfc8e0 46%, #77718f 100%); display: flex; align-items: center; justify-content: center; }
.st-veil.on { opacity: 1; }
.st-veil i { position: absolute; inset: -30%; mix-blend-mode: screen; animation: st-veil-drift 7s linear infinite alternate;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .55), transparent) 10% 20% / 45% 40% no-repeat,
    radial-gradient(closest-side, rgba(255, 255, 255, .4), transparent) 60% 55% / 55% 45% no-repeat,
    radial-gradient(closest-side, rgba(255, 255, 255, .3), transparent) 30% 80% / 50% 35% no-repeat; }
.st-veil i + i { animation-duration: 11s; animation-direction: alternate-reverse; opacity: .75; }
.st-veil b { position: relative; font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-weight: 600; letter-spacing: .5em; text-transform: uppercase;
  font-size: clamp(14px, 2.2vw, 26px); color: rgba(40, 34, 60, .72); opacity: 0; transition: opacity .6s .35s; text-align: center; padding: 0 16px; }
.st-veil.on b { opacity: 1; }
@keyframes st-veil-drift { from { transform: translate(-6%, 2%); } to { transform: translate(6%, -4%); } }
@media (prefers-reduced-motion: reduce) { .st-veil i { animation: none; } }

/* le viseur du Scratch (29 oct. 2026, le Village de Tung) : un cercle doré en pointillés qui tourne à l'envers sur la chose
   qui remonterait le temps, un point au milieu, la touche et le nom de la chose dessous (StoryMode.updateScratch) */
.px .st-sc { position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px; opacity: 0; transition: opacity .15s; pointer-events: none; }
.px .st-sc.on { opacity: 1; }
.px .st-sc::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 1px dashed rgba(255, 216, 128, .9);
  background: radial-gradient(circle, rgba(255, 220, 140, .95) 0 2px, transparent 2.5px);
  box-shadow: 0 0 5px rgba(255, 200, 90, .45), inset 0 0 4px rgba(255, 200, 90, .35); animation: st-sc-turn 2.4s linear infinite; }
.px .st-sc > em { position: absolute; left: 50%; top: 23px; transform: translateX(-50%); white-space: nowrap; font-size: 7px; font-style: normal; font-weight: 700; letter-spacing: 0.6px; color: rgba(255, 224, 160, .95); text-shadow: var(--st-sh); }
@keyframes st-sc-turn { to { transform: rotate(-360deg); } }
.px.st-hud.cine .st-sc, .px.st-hud.paused .st-sc { opacity: 0; transition: opacity .3s; }

/* le choix en entrant dans le mode Histoire : mode joli ou mode grille-pain (Screens.storyGfx, src/story/toaster.js) */
.st-gfx { background: radial-gradient(ellipse at 50% 42%, rgba(30, 22, 58, .55), rgba(6, 5, 14, .86)); }
.st-gfx .st-gfx-top { position: absolute; left: 0; right: 0; top: 22px; text-align: center; pointer-events: none; }
.st-gfx .st-gfx-top b { display: block; font-family: 'Bangers', sans-serif; font-weight: 400; font-size: 30px; letter-spacing: 2px; color: #ffe6a6; }
.st-gfx .st-gfx-top span { display: block; margin-top: -2px; font-weight: 700; font-size: 9px; letter-spacing: .3em; text-transform: uppercase; color: rgba(255, 255, 255, .72); }
.st-gfx .st-gfx-row { position: absolute; left: 0; right: 0; top: 84px; display: flex; justify-content: center; gap: 22px; }
.st-gfx .st-gfx-c { position: relative; width: 208px; height: 196px; box-sizing: border-box; padding: 10px 14px; text-align: center; cursor: pointer;
  background: rgba(13, 10, 26, .84); border: 2px solid rgba(255, 255, 255, .16); border-radius: 6px; opacity: .62; transform: scale(.95);
  transition: transform .18s, opacity .18s, border-color .18s, box-shadow .18s; }
.st-gfx .st-gfx-c.on { opacity: 1; transform: scale(1.03); border-color: #ffd26b; box-shadow: 0 0 22px rgba(255, 196, 80, .4); }
.st-gfx .st-gfx-c.go { transform: scale(1.1); }
.st-gfx .st-gfx-c b { display: block; margin-top: 8px; font-family: 'Bangers', sans-serif; font-weight: 400; font-size: 23px; letter-spacing: 1.2px; color: #fff; }
.st-gfx .st-gfx-c span { display: block; margin-top: 4px; font-weight: 600; font-size: 10.5px; line-height: 12.5px; color: rgba(255, 255, 255, .78); }
.st-gfx .st-gfx-c em { position: absolute; left: 50%; top: -8px; transform: translateX(-50%); white-space: nowrap; padding: 2px 7px; font-style: normal; font-weight: 700; font-size: 7.5px;
  letter-spacing: .1em; color: #1a1020; background: #ffd26b; border-radius: 2px; }
.st-gfx .st-gfx-art { position: relative; height: 84px; margin-top: 4px; }
.st-gfx .st-gem { position: absolute; left: 50%; top: 14px; width: 44px; height: 44px; margin-left: -22px; transform: rotate(45deg);
  background: linear-gradient(135deg, #fff, #7fdcff 35%, #c98bff 70%, #ff8bd0); box-shadow: 0 0 22px rgba(170, 200, 255, .7); }
.st-gfx .on .st-gem { animation: st-gem 3s ease-in-out infinite; }
@keyframes st-gem { 50% { transform: rotate(45deg) scale(1.1); } }
.st-gfx .st-spark { position: absolute; width: 5px; height: 5px; background: #fff; transform: rotate(45deg); opacity: .85; }
.st-gfx .st-spark:nth-child(2) { left: 36px; top: 16px; } .st-gfx .st-spark:nth-child(3) { right: 34px; top: 8px; } .st-gfx .st-spark:nth-child(4) { right: 48px; top: 62px; }
.st-gfx .st-toaster { position: absolute; left: 50%; top: 34px; width: 92px; height: 48px; margin-left: -46px; background: linear-gradient(#d8dce4, #8f96a6); border-radius: 12px 12px 5px 5px; border: 2px solid #1a1a24; box-sizing: border-box; }
.st-gfx .st-toaster i { position: absolute; left: 10px; right: 10px; top: 5px; height: 4px; background: #1a1a24; border-radius: 2px; }
.st-gfx .st-bread { position: absolute; left: 50%; top: 18px; width: 30px; height: 30px; background: #e8b56a; border: 2px solid #5c3a18; border-radius: 8px 8px 2px 2px; box-sizing: border-box; }
.st-gfx .st-bread.a { margin-left: -33px; } .st-gfx .st-bread.b { margin-left: 3px; }
.st-gfx .on .st-bread { animation: st-toast 1.5s ease-in-out infinite; }
.st-gfx .on .st-bread.b { animation-delay: .18s; }
@keyframes st-toast { 0%, 55%, 100% { transform: none; } 30% { transform: translateY(-13px) rotate(-5deg); } }
.st-gfx .st-gfx-back { cursor: pointer; pointer-events: auto; }
/* le Bois Sans Aube, loin des chemins : la carte et la boussole deviennent folles */
.st-guide.lost .st-map{filter:blur(1.6px) saturate(.35) hue-rotate(160deg);animation:st-lost 2.3s ease-in-out infinite}
.st-guide.lost em{font-style:italic;opacity:.75}
@keyframes st-lost{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(9deg)}}

/* l'écran debug : tous les niveaux sur deux colonnes */
.st-dbg { background: radial-gradient(ellipse at 50% 42%, rgba(30, 22, 58, .6), rgba(6, 5, 14, .9)); }
.st-dbg .st-dbg-list { position: absolute; left: 22px; right: 22px; top: 58px; height: 248px; display: grid; grid-auto-flow: column; grid-template-rows: repeat(11, 1fr); grid-template-columns: repeat(4, 1fr); column-gap: 8px; }
.st-dbg .st-dbg-i.mo { color: #ffe9b0; }
.st-dbg .st-dbg-what { position: absolute; left: 22px; right: 22px; top: 312px; text-align: center; font-size: 10px; color: rgba(255, 240, 220, .78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-dbg .st-dbg-i { display: flex; align-items: center; gap: 6px; padding: 0 6px; cursor: pointer; font-size: 10px; color: rgba(255, 240, 220, .72); white-space: nowrap; overflow: hidden; }
.st-dbg .st-dbg-i i { flex: none; width: 15px; text-align: right; font-style: normal; font-weight: 800; font-size: 9px; color: #ffd26b; }
.st-dbg .st-dbg-i b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.st-dbg .st-dbg-i em { margin-left: auto; font-style: normal; font-weight: 800; font-size: 7px; letter-spacing: .08em; color: #7fe3a0; }
.st-dbg .st-dbg-i.on { background: #ffd23b; color: #161018; }
.st-dbg .st-dbg-i.on i, .st-dbg .st-dbg-i.on em { color: #161018; }

/* le Bus de nuit, le combat contre la Folle : le faux générique, la barre arrachée, les compteurs */
.st-fz {  opacity: 0; transition: opacity .7s; z-index: 40; font-family: var(--title, Bangers), sans-serif; color: #fff; text-align: center; overflow: visible; }
.st-fz::before { content: ''; position: absolute; inset: -4000px; background: #000; }
.st-fz.on { opacity: 1; }
.st-fz.stop .st-fz-roll { opacity: .2; transition: opacity .3s; }
.st-fz-ko { position: absolute; left: 0; right: 0; top: 60px; font-size: 40px; color: #ffd84a; letter-spacing: 2px; animation: stFzKo 2.4s forwards; }
@keyframes stFzKo { 60% { opacity: 1; } 100% { opacity: 0; } }
.st-fz-roll { position: absolute; left: 0; right: 0; top: 380px; animation: stFzRoll 9s linear 1.4s forwards; }
.st-fz-roll h2 { font-size: 26px; margin: 0 0 6px; color: #ffd84a; font-weight: 400; }
.st-fz-roll h3 { font-size: 15px; margin: 26px 0 2px; font-weight: 400; color: #ffd84a; }
.st-fz-roll p { margin: 0; font-size: 12px; font-family: 'Barlow Condensed', sans-serif; }
@keyframes stFzRoll { to { transform: translateY(-560px); } }
.st-fz.stop .st-fz-roll { animation-play-state: paused; }
.st-fz.rip .st-fz-roll { animation: stFzRip .7s cubic-bezier(.5,0,1,.6) forwards; }
@keyframes stFzRip { to { transform: translateY(300px) rotate(14deg) scale(.6); opacity: 0; } }
.st-fz-face { position: absolute; left: 50%; bottom: -170px; width: 160px; margin-left: -80px; transition: bottom .35s cubic-bezier(.3,1.6,.5,1); }
.st-fz.face .st-fz-face { bottom: 0; }
.st-fz.rip .st-fz-face { bottom: 20px; width: 230px; margin-left: -115px; transition: all .2s; }
.st-fz-say { position: absolute; left: 0; right: 0; top: 96px; font-size: 24px; color: #ff4aa8; }
.st-fz-yank { animation: stFzYank .9s cubic-bezier(.5,-.4,.8,.3) forwards; }
@keyframes stFzYank { 25% { transform: rotate(-16deg) translateY(-10px); } 100% { transform: translate(180px, -280px) rotate(420deg) scale(.4); opacity: 0; } }
.st-fz-count { text-align: center; padding-top: 34px; box-sizing: border-box; color: #fff; pointer-events: none; font-family: var(--title, Bangers), sans-serif; text-shadow: 0 2px 0 #000; z-index: 30; }
.st-fz-count small { display: block; font-size: 10px; letter-spacing: 2px; color: #ffd84a; }
.st-fz-count b { display: inline-block; font-size: 26px; font-weight: 400; }
.st-fz-count b.hit { animation: stFzHit .3s; }
@keyframes stFzHit { 40% { transform: scale(1.5); color: #7dff9a; } }
.st-fz-plate { pointer-events: none; z-index: 35; }
.st-fz-sign { position: absolute; left: 50%; top: 74px; width: 250px; margin-left: -125px; padding: 7px 10px 8px; background: #ffd84a; color: #14182b; border: 3px solid #14182b; box-shadow: 0 0 0 2px #ffd84a, 4px 5px 0 #14182b; text-align: center; font-family: var(--title, Bangers), sans-serif; transform: rotate(-3deg); animation: stFzSign 2.6s both; z-index: 35; pointer-events: none; }
.st-fz-sign small { display: block; font-size: 9px; letter-spacing: 3px; } .st-fz-sign b { display: block; font-size: 25px; font-weight: 400; line-height: 1.05; } .st-fz-sign i { display: block; font: 700 11px 'Barlow Condensed', sans-serif; }
@keyframes stFzSign { 0% { transform: translateY(-110px) rotate(9deg); } 9% { transform: translateY(5px) rotate(-5deg); } 14%, 88% { transform: rotate(-3deg); opacity: 1; } 100% { transform: translateY(-110px) rotate(4deg); opacity: 0; } }

/* (le marchand : perkPowers.js) le Flair à fragments sur la mini-carte ; la jauge du caisson volant */
.px .st-map-flair { position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px; background: #ffd23a; clip-path: polygon(50% 0, 62% 36%, 100% 38%, 70% 60%, 80% 100%, 50% 76%, 20% 100%, 30% 60%, 0 38%, 38% 36%); filter: drop-shadow(0 0 1px #1c1226); animation: st-flair 1s ease-in-out infinite alternate; }
.px .st-map-flair.off { display: none; }
@keyframes st-flair { to { scale: 1.35; } }
.px .st-fuel { position: absolute; left: 50%; bottom: 44px; width: 90px; height: 7px; margin-left: -45px; background: #1c1226; border: 1.5px solid #1c1226; opacity: 0; transition: opacity .2s; }
.px .st-fuel.on { opacity: 1; }
.px .st-fuel i { display: block; height: 100%; background: #ff9a3a; transform-origin: left; }

/* LE BUS DE NUIT : la finale contre La Folle Du Bus (busCosmos.js), en anime épique : cartes de phase, cercles de timing,
   jauge du duel de rayons, mots géants, années qui défilent */
.st-cz { pointer-events: none; z-index: 36; font-family: var(--title, Bangers), sans-serif; color: #fff; overflow: visible; }
.st-cz-card { position: absolute; left: -40px; right: -40px; top: 118px; height: 112px; text-align: center; overflow: hidden; transform: skewY(-5deg); animation: czCard 2.7s cubic-bezier(.2, .9, .3, 1) both;
  background: linear-gradient(90deg, transparent, rgba(12, 10, 30, .94) 14%, rgba(12, 10, 30, .94) 86%, transparent); border-top: 3px solid var(--c); border-bottom: 3px solid var(--c); }
.st-cz-card::before { content: ''; position: absolute; inset: 0; opacity: .35; animation: czLines .5s linear infinite;
  background: repeating-linear-gradient(90deg, transparent 0 22px, var(--c) 22px 24px, transparent 24px 61px, rgba(255,255,255,.6) 61px 62px); }
.st-cz-card small { position: relative; display: block; margin-top: 12px; font-size: 13px; letter-spacing: 8px; color: var(--c); }
.st-cz-card b { position: relative; display: block; font-size: 54px; font-weight: 400; line-height: 1; letter-spacing: 1px; text-shadow: 3px 3px 0 #000, 0 0 22px var(--c); }
.st-cz-card i { position: relative; display: block; margin-top: 3px; font: 700 13px 'Barlow Condensed', sans-serif; font-style: normal; letter-spacing: .5px; opacity: .9; }
@keyframes czCard { 0% { transform: skewY(-5deg) scaleY(0) translateX(160px); opacity: 0; } 9% { transform: skewY(-5deg) scaleY(1.15) translateX(0); opacity: 1; } 14% { transform: skewY(-5deg) scaleY(1); }
  84% { transform: skewY(-5deg) translateX(-14px); opacity: 1; } 100% { transform: skewY(-5deg) translateX(-180px); opacity: 0; } }
@keyframes czLines { to { background-position: -122px 0; } }
.st-cz-tip { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%) skewX(-6deg); padding: 5px 14px 6px; background: rgba(12, 10, 30, .88); border: 2px solid #ffd84a; box-shadow: 3px 3px 0 #000;
  font: 700 13px 'Barlow Condensed', sans-serif; white-space: nowrap; letter-spacing: .3px; transition: opacity .3s; }
.st-cz-tip.off { opacity: 0; }
.st-cz-tip b { color: #ffd84a; font-weight: 700; }
.st-cz-count { position: absolute; left: 0; right: 0; top: 30px; text-align: center; text-shadow: 0 2px 0 #000; }
.st-cz-count small { display: block; font-size: 10px; letter-spacing: 3px; color: #ffd84a; }
.st-cz-count b { display: inline-block; font-size: 28px; font-weight: 400; }
.st-cz-count b.hit { animation: stFzHit .3s; }
.st-cz-cue { position: absolute; width: 0; height: 0; }
.st-cz-cue i { position: absolute; left: -20px; top: -20px; width: 40px; height: 40px; border-radius: 50%; box-sizing: border-box; border: 3px solid #ffd84a; box-shadow: 0 0 0 1.5px #000, inset 0 0 0 1.5px #000; }
.st-cz-cue i.o { border-color: rgba(255, 255, 255, .85); border-width: 2px; }
.st-cz-cue b { position: absolute; left: -9px; top: -8px; font-weight: 400; }
.st-cz-cue b .st-k { margin: 0; }
.st-cz-cue.ok i.i { border-color: #7dff9a; box-shadow: 0 0 14px #7dff9a, 0 0 0 1.5px #000; }
.st-cz-cue.pf i.i { border-color: #fff; box-shadow: 0 0 22px #fff, 0 0 0 1.5px #000; }
.st-cz-gauge { position: absolute; left: 150px; right: 150px; top: 34px; height: 14px; background: linear-gradient(90deg, #ff4aa8, #ff9ad8); border: 3px solid #0c0a1e; box-shadow: 0 0 0 2px #fff, 4px 4px 0 #000; transform: skewX(-12deg); }
.st-cz-gauge i { position: absolute; left: 0; top: 0; bottom: 0; width: 50%; background: linear-gradient(90deg, #2a7aff, #bff2ff); }
.st-cz-gauge em { position: absolute; top: -7px; width: 6px; height: 22px; margin-left: -3px; background: #fff; box-shadow: 0 0 12px #fff, 0 0 4px #ffd84a; }
.st-cz-gauge small { position: absolute; top: -16px; font-size: 11px; letter-spacing: 2px; }
.st-cz-gauge small.l { right: -2px; color: #ff9ad8; } .st-cz-gauge small.r { left: -2px; color: #bff2ff; }
.st-cz-word { position: absolute; left: -60px; right: -60px; top: 120px; text-align: center; font-size: 64px; line-height: 1; color: var(--c); -webkit-text-stroke: 2.5px #000; paint-order: stroke fill;
  text-shadow: 5px 5px 0 #000, 0 0 26px var(--c); animation: czWord 1.15s cubic-bezier(.2, 1.6, .4, 1) both; white-space: nowrap; }
.st-cz-word.big { -webkit-text-stroke: 4px #000; letter-spacing: 4px; animation: czBig 1.8s cubic-bezier(.15, 1.5, .4, 1) both; }
.st-cz-word.go { left: auto; right: 22px; top: 40px; width: 70px; font-size: 54px; writing-mode: vertical-rl; letter-spacing: -6px; color: #b07aff; animation: czGo 2.2s steps(1) both; }
@keyframes czWord { 0% { transform: scale(3) rotate(-10deg); opacity: 0; } 14% { transform: scale(1) rotate(-4deg); opacity: 1; } 78% { transform: scale(1.06) rotate(-4deg); opacity: 1; } 100% { transform: scale(1.25) rotate(-4deg); opacity: 0; } }
@keyframes czBig { 0% { transform: scale(5); opacity: 0; } 10% { transform: scale(.92); opacity: 1; } 16% { transform: scale(1.04); } 80% { transform: scale(1.12); opacity: 1; } 100% { transform: scale(1.3); opacity: 0; } }
@keyframes czGo { 0%, 20%, 40%, 60%, 80% { transform: translate(0, 0); opacity: 1; } 10%, 30%, 50%, 70% { transform: translate(2px, -2px); } 100% { opacity: 0; } }
.st-cz-imp { position: absolute; inset: -200px; animation: czImp .26s steps(2) both;
  background: repeating-conic-gradient(from 3deg at 50% 50%, rgba(0, 0, 0, .9) 0 1.6deg, transparent 1.6deg 7deg); -webkit-mask: radial-gradient(circle at 50% 50%, transparent 22%, #000 46%); mask: radial-gradient(circle at 50% 50%, transparent 22%, #000 46%); }
@keyframes czImp { 0% { opacity: 1; transform: rotate(0); } 50% { opacity: .8; transform: rotate(4deg) scale(1.05); } 100% { opacity: 0; } }
.st-cz-era { position: absolute; left: 0; right: 0; top: 64px; text-align: center; animation: czEra 2.6s cubic-bezier(.2, .9, .3, 1) both; }
.st-cz-era b { display: block; font-size: 70px; font-weight: 400; line-height: 1; color: #ffd84a; letter-spacing: 3px; text-shadow: 4px 4px 0 #000, 0 0 30px #ff9a2a; -webkit-text-stroke: 2px #000; paint-order: stroke fill; }
.st-cz-era i { display: inline-block; margin-top: 6px; padding: 3px 12px; background: #0c0a1e; border: 2px solid #ffd84a; font: 700 14px 'Barlow Condensed', sans-serif; font-style: normal; letter-spacing: 4px; }
@keyframes czEra { 0% { opacity: 0; transform: scaleY(0) translateY(-30px); filter: blur(6px); } 12% { opacity: 1; transform: scaleY(1.2); filter: blur(0); } 18% { transform: none; } 82% { opacity: 1; } 100% { opacity: 0; transform: translateY(10px); } }
.st-cz-white { position: absolute; inset: -4000px; background: #fff; opacity: 0; }
.st-cz-white.on { opacity: 1; }

/* ---- le panneau des commandes des niveaux spéciaux (src/story/ctrlPanel.js, 9 nov. 2026) : à gauche, discret, les vrais
   boutons de la manette (Xbox : A vert, B rouge, X bleu, Y jaune ; PlayStation : ✕ ○ □ △) ou les touches du clavier ---- */
.px.st-hud .st-ctrl { position: absolute; left: 6px; top: 50%; transform: translateY(-50%) scale(.68); transform-origin: 0 50%; display: flex; flex-direction: column; gap: 1px;
  padding: 2px 4px; border-radius: 4px; background: radial-gradient(ellipse at 0 50%, rgba(8, 6, 16, .22), rgba(8, 6, 16, 0) 70%);
  opacity: 0; transition: opacity .5s; text-shadow: none; }
.px.st-hud .st-ctrl.on { opacity: .62; }
.px.st-hud .st-ctrl.on.dim { opacity: .3; }
.st-ctrl .cp-row { display: flex; align-items: center; gap: 5px; min-height: 11px; }
.st-ctrl .cp-g { display: inline-flex; align-items: center; justify-content: flex-start; gap: 1.5px; min-width: 22px; }
/* (la colonne alignée à gauche, sur le premier picto ; un stick à flèches déborde d'un bouton de .264em de chaque côté (moins la marge .08em des boutons, glyphs.css) : ses
   flèches sortent de la colonne, le cercle tombe pile sur les boutons) */
.st-ctrl .cp-g > .pg-arr { margin-left: -.184em !important; margin-right: -.184em !important; }
.st-ctrl .cp-l { font-size: 6.5px; font-weight: 600; letter-spacing: .2px; color: #f4efe6; text-shadow: 0 1px 1px rgba(0, 0, 0, .8); white-space: nowrap; }
.st-ctrl i, .st-ctrl s { font-style: normal; text-decoration: none; box-sizing: border-box; }
.st-ctrl .cp-or { font-size: 6px; font-weight: 400; color: rgba(244, 239, 230, .55); margin: 0 1px; }
/* les boutons du dessus : ronds, brillants */
.st-ctrl .cp-b { display: inline-flex; align-items: center; justify-content: center; width: 11px; height: 11px; border-radius: 50%; font-size: 7px; font-weight: 800; line-height: 1;
  color: #fff; text-shadow: 0 .5px 1px rgba(0, 0, 0, .7); border: .5px solid rgba(0, 0, 0, .55); box-shadow: inset 0 -1px 1px rgba(0, 0, 0, .35), 0 1px 1px rgba(0, 0, 0, .5); }
.st-ctrl .cp-xbox0 { background: radial-gradient(circle at 35% 30%, #b6f08c, #5cb83a 55%, #2f7a1c); }
.st-ctrl .cp-xbox1 { background: radial-gradient(circle at 35% 30%, #ff9c8f, #e0352b 55%, #8e1610); }
.st-ctrl .cp-xbox2 { background: radial-gradient(circle at 35% 30%, #9cc8ff, #2e7fe0 55%, #164c94); }
.st-ctrl .cp-xbox3 { background: radial-gradient(circle at 35% 30%, #fff0a0, #f0bd22 55%, #a77a08); color: #4a3500; text-shadow: 0 .5px 0 rgba(255, 255, 255, .5); }
.st-ctrl [class*="cp-ps"] { background: radial-gradient(circle at 35% 30%, #4a4a58, #1d1d25 60%, #0b0b10); font-size: 7.5px; }
.st-ctrl .cp-ps0 { color: #8fb4ff; } .st-ctrl .cp-ps1 { color: #ff7a7a; } .st-ctrl .cp-ps2 { color: #f7a3dc; } .st-ctrl .cp-ps3 { color: #5fdcbc; }
/* les boutons de tranche (LB / RB) et les gâchettes (LT / RT) */
.st-ctrl .cp-sh, .st-ctrl .cp-tr, .st-ctrl .cp-sm, .st-ctrl .cp-dp, .st-ctrl .cp-st { display: inline-flex; align-items: center; justify-content: center; font-weight: 800; line-height: 1; color: #f2f2f6;
  background: linear-gradient(#5a5a66, #2a2a33 60%, #17171d); border: .5px solid rgba(0, 0, 0, .6); box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .25), 0 1px 1px rgba(0, 0, 0, .5); }
.st-ctrl .cp-sh { height: 9px; padding: 0 3px; border-radius: 4px 4px 2px 2px; font-size: 5.5px; }
.st-ctrl .cp-tr { height: 11px; padding: 0 2.5px; border-radius: 5px 5px 2px 2px; font-size: 5.5px; }
.st-ctrl .cp-sm { width: 9px; height: 9px; border-radius: 50%; font-size: 5px; }
.st-ctrl .cp-dp { width: 10px; height: 10px; border-radius: 2px; font-size: 5px; }
/* le stick : un rond creux, la direction à côté */
.st-ctrl .cp-st { width: 11px; height: 11px; border-radius: 50%; font-size: 5.5px; background: radial-gradient(circle, #2a2a33 45%, #4c4c58 50%, #1c1c23 75%); }
.st-ctrl .cp-ar { font-size: 5.5px; color: #ffd76a; margin-left: .5px; }
/* le clavier : des touches claires en relief, la souris */
.st-ctrl .cp-key { display: inline-flex; align-items: center; justify-content: center; min-width: 10px; height: 10px; padding: 0 2px; border-radius: 2.5px; font-size: 6.5px; font-weight: 800; line-height: 1;
  color: #1d1a22; background: linear-gradient(#fbf8f2, #d9d3c7); border: .5px solid #6f6a60; box-shadow: 0 1.5px 0 #6f6a60; margin-bottom: 1px; }
.st-ctrl .cp-key.wide { padding: 0 3.5px; font-size: 6px; }
.st-ctrl .cp-wasd { display: inline-block; text-align: center; line-height: 0; }
.st-ctrl .cp-wasd .cp-key { min-width: 8px; height: 8px; font-size: 5.5px; margin: 0 .5px 1.5px; box-shadow: 0 1px 0 #6f6a60; }
.st-ctrl .cp-mouse { position: relative; display: inline-block; width: 8px; height: 11px; border-radius: 4px 4px 4.5px 4.5px; background: linear-gradient(#fbf8f2, #d9d3c7); border: .5px solid #6f6a60; overflow: hidden; }
.st-ctrl .cp-mouse::after { content: ''; position: absolute; left: 50%; top: 0; width: .5px; height: 45%; background: #6f6a60; }
.st-ctrl .cp-mouse u { position: absolute; top: 0; width: 50%; height: 45%; background: #ff9a3c; }
.st-ctrl .cp-m0 u { left: 0; } .st-ctrl .cp-m2 u { right: 0; } .st-ctrl .cp-m1 u { left: 35%; width: 30%; }

/* ---- l'écran de chargement du mode Histoire (9 nov. 2026 : src/ui/storyLoader.js) : une portée dont les notes s'allument.
   Rien que transform et opacity : la page est figée pendant que le niveau se construit, ces animations continuent. ---- */
.sl { position: fixed; inset: 0; z-index: 62; overflow: hidden; opacity: 0; transition: opacity .3s ease; pointer-events: none; --p: 0; --d: 600ms; background: #070614; font-family: 'Barlow Condensed', sans-serif; }
.sl.on { opacity: 1; }
.sl.off { opacity: 0; transition: opacity .7s ease; }
.sl-sky { position: absolute; inset: -20%; background: radial-gradient(60% 50% at 50% 62%, rgba(120, 80, 220, .42), transparent 70%), radial-gradient(40% 30% at 22% 30%, rgba(255, 150, 90, .2), transparent 70%), radial-gradient(45% 35% at 80% 26%, rgba(70, 190, 255, .2), transparent 70%), linear-gradient(#070614, #141032 60%, #0a0818); animation: sl-sky 14s ease-in-out infinite alternate; }
@keyframes sl-sky { from { transform: translate3d(-2%, 0, 0) scale(1); } to { transform: translate3d(2%, -2%, 0) scale(1.08); } }
.sl-motes u { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #ffe9a8; box-shadow: 0 0 10px 3px rgba(255, 220, 130, .7); opacity: 0; animation: sl-mote 8s linear infinite; }
@keyframes sl-mote { 0% { opacity: 0; transform: translate3d(0, 0, 0) scale(var(--s, 1)); } 15% { opacity: .9; } 85% { opacity: .7; } 100% { opacity: 0; transform: translate3d(30px, -34vh, 0) scale(var(--s, 1)); } }
.sl-mid { position: absolute; left: 50%; top: 50%; width: min(72vw, 980px); transform: translate(-50%, -50%); text-align: center; }
.sl-title { font-family: 'Bangers', 'Barlow Condensed', sans-serif; font-size: clamp(26px, 4.6vw, 64px); letter-spacing: .06em; color: #ffe08a; text-shadow: 0 0 22px rgba(255, 190, 90, .55), 0 3px 0 #2a1848; animation: sl-breathe 3.2s ease-in-out infinite; }
@keyframes sl-breathe { 0%, 100% { transform: scale(1); opacity: .92; } 50% { transform: scale(1.025); opacity: 1; } }
.sl-bar { position: relative; height: clamp(54px, 9vh, 96px); margin: clamp(30px, 7vh, 72px) 0 clamp(22px, 5vh, 48px); }
.sl-staff { position: absolute; inset: 0; }
.sl-staff i { position: absolute; left: 0; right: 0; height: 2px; margin-top: -1px; border-radius: 2px; background: currentColor; }
.sl-staff i:nth-child(1) { top: 0; } .sl-staff i:nth-child(2) { top: 25%; } .sl-staff i:nth-child(3) { top: 50%; } .sl-staff i:nth-child(4) { top: 75%; } .sl-staff i:nth-child(5) { top: 100%; }
.sl-staff s { position: absolute; text-decoration: none; font-size: clamp(22px, 3.8vh, 42px); line-height: 1; transform: translate(-50%, 0); }
.sl-staff.dim { color: rgba(220, 210, 255, .16); }
.sl-staff.lit { color: #ffe08a; filter: drop-shadow(0 0 8px rgba(255, 200, 90, .9)); }
.sl-staff.lit s { color: #fff3c4; animation: sl-note 1.6s ease-in-out infinite; }
@keyframes sl-note { 0%, 100% { transform: translate(-50%, 0) rotate(-4deg); } 50% { transform: translate(-50%, -14%) rotate(5deg); } }
.sl-wipe, .sl-wipe-in, .sl-head { transition: transform var(--d) cubic-bezier(.3, .6, .3, 1); }
.sl-wipe { position: absolute; left: 0; right: 0; top: -70px; bottom: -70px; overflow: hidden; transform: translateX(calc(-100% + var(--p) * 100%)); }
.sl-wipe-in { position: absolute; left: 0; right: 0; top: 70px; bottom: 70px; transform: translateX(calc(100% - var(--p) * 100%)); }
.sl-head { position: absolute; inset: 0; transform: translateX(calc(var(--p) * 100%)); }
.sl-head b { position: absolute; left: -9px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: #fff; box-shadow: 0 0 18px 8px rgba(255, 220, 140, .9), 0 0 60px 22px rgba(255, 170, 80, .45); animation: sl-spark .9s ease-in-out infinite; }
.sl-head b::after { content: ''; position: absolute; right: 60%; top: 50%; width: 130px; height: 4px; margin-top: -2px; border-radius: 4px; background: linear-gradient(90deg, transparent, rgba(255, 220, 140, .9)); }
@keyframes sl-spark { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }
.sl-step { font-size: clamp(13px, 1.5vw, 20px); font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: #cfc6ee; }
.sl-step.pop { animation: sl-pop .45s ease-out; }
@keyframes sl-pop { 0% { transform: translateY(8px) scale(.94); opacity: 0; } 100% { transform: none; opacity: 1; } }