/* LE RÉCIT (shared/recit.js, hub.js renderLivre, rogue/recit-dialogue.js) — la quête principale, « Vers le soleil noir »,
   d'après les maquettes validées (plans/lore/quete/) : l'onglet Récit du Journal de bord, l'illustration du chapitre
   dans la scène, l'annonce du retour en haut de la scène, et la page du livre de bord en grand. L'or et la nuit de la
   Légende ; les titres en Fraunces (--serif). */

/* ---------- L'onglet Récit (le panneau) ---------- */

.recit-quest {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    margin: 0 0 12px;
    padding: 10px 14px 10px 10px;
    border-radius: 16px;
    border: 1px solid rgba(var(--gold-rgb), 0.38);
    background: radial-gradient(120% 140% at 0% 0%, rgba(var(--gold-rgb), 0.14), transparent 60%), rgba(255, 255, 255, 0.02);
}

.recit-sun {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
}

.recit-sun svg {
    width: 64px;
    height: 64px;
}

.recit-quest-body small,
.recit-now small,
.recit-num {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(var(--gold-rgb), 0.92);
}

.recit-quest-body b {
    display: block;
    font-family: var(--serif);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.15;
    color: var(--text);
}

.recit-quest-body > span {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--muted);
}

.recit-count {
    text-align: right;
    font-size: 12px;
    color: var(--muted);
    white-space: nowrap;
}

.recit-count strong {
    display: block;
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 600;
    color: #ffe39a;
}

/* Le chapitre en cours : son objectif et son départ */
.recit-now {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
    padding: 10px 14px;
    border-radius: 14px;
    border: 1px solid rgba(var(--gold-rgb), 0.55);
    background: linear-gradient(90deg, rgba(var(--gold-rgb), 0.16), rgba(var(--gold-rgb), 0.03));
}

.recit-now.is-soon {
    grid-template-columns: auto minmax(0, 1fr);
    border-color: rgba(var(--gold-rgb), 0.3);
    background: linear-gradient(90deg, rgba(var(--gold-rgb), 0.08), rgba(var(--gold-rgb), 0.01));
}

.recit-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ffe39a;
    box-shadow: 0 0 10px 3px rgba(255, 227, 154, 0.4);
}

.recit-now.is-soon .recit-dot {
    background: rgba(var(--gold-rgb), 0.5);
    box-shadow: none;
}

/* La quête finie : le livre de bord continue, sans objectif ni départ */
.recit-now.is-done {
    grid-template-columns: auto minmax(0, 1fr);
    border-color: rgba(var(--gold-rgb), 0.35);
    background: linear-gradient(90deg, rgba(255, 196, 120, 0.12), rgba(var(--gold-rgb), 0.02));
}

.recit-now b {
    display: block;
    font-size: 14.5px;
    line-height: 1.3;
    color: var(--text);
}

.recit-now em {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    font-style: normal;
    color: var(--muted);
}

.recit-toast-read {
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    color: #1a1406;
    background: linear-gradient(180deg, #ffe39a, #e6b94f);
    border: 0;
    border-radius: 99px;
    padding: 7px 16px;
    white-space: nowrap;
    cursor: pointer;
}

.recit-toast-read:hover {
    filter: brightness(1.08);
}

.recit-toast-read:focus-visible {
    outline: 2px solid #fff3cf;
    outline-offset: 2px;
}

/* Les actes et leurs pages */
.recit-act {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 2px 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
}

.recit-act::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(var(--gold-rgb), 0.3), transparent);
}

.recit-list {
    display: grid;
    gap: 6px;
}

.recit-row {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 6px 12px 6px 6px;
    border-radius: 14px;
    border: 1px solid var(--stroke);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text);
    font: inherit;
    text-align: left;
}

button.recit-row {
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

button.recit-row:hover {
    border-color: rgba(var(--gold-rgb), 0.45);
    background: rgba(var(--gold-rgb), 0.06);
}

.recit-thumb {
    display: grid;
    place-items: center;
    width: 64px;
    height: 38px;
    border-radius: 9px;
    overflow: hidden;
    background: linear-gradient(180deg, #05060d, #1a1840);
}

.recit-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Le livre de ta cabane : le portrait de celui qui ouvre la scène (hub.js renderLivre), en rond comme en tête des menus */
.recit-thumb.is-face {
    justify-self: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(var(--gold-rgb), 0.4);
    background: #0d1124;
}

.recit-thumb.is-face img {
    object-position: center 18%;
}

.recit-thumb i {
    display: grid;
    place-items: center;
    font-family: var(--serif);
    font-style: normal;
    font-size: 17px;
    color: rgba(var(--gold-rgb), 0.7);
}

/* La marque de la Cime, pour un chapitre de la Cime encore fermé */
.recit-thumb i svg {
    display: block;
}

.recit-row-body {
    min-width: 0;
}

.recit-row-body b {
    display: block;
    font-family: var(--serif);
    font-size: 15.5px;
    font-weight: 600;
    line-height: 1.15;
}

.recit-row-body small {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    color: var(--muted);
}

.recit-state {
    font-size: 12px;
    color: var(--muted);
    white-space: nowrap;
}

.recit-row.is-new {
    border-color: rgba(var(--gold-rgb), 0.6);
    background: linear-gradient(90deg, rgba(var(--gold-rgb), 0.13), rgba(255, 255, 255, 0.02));
}

.recit-row.is-new .recit-state {
    color: #ffe39a;
    font-weight: 700;
}

.recit-row.is-now {
    border-color: rgba(var(--gold-rgb), 0.35);
}

.recit-row.is-now .recit-state {
    color: #ffe39a;
}

.recit-row.is-now .recit-thumb img {
    filter: saturate(0.7) brightness(0.75);
}

.recit-row.is-locked {
    opacity: 0.55;
}

.recit-row.is-locked .recit-thumb img {
    filter: grayscale(0.9) brightness(0.4);
}

.recit-foot {
    margin: 12px 2px 0;
    font-size: 12px;
    color: var(--muted);
}

/* L'acte IV (maquette validée, 2026-10-08) : les cristaux des cimes, la même icône partout (shared/crystal-mark.js), et la
   lanterne de Lune dont le verre se remplit de tes cristaux ; sa lueur grandit avec elle */
.cc-icon {
    display: inline-block;
    flex: none;
    vertical-align: -2px;
    filter: drop-shadow(0 0 3px rgba(255, 217, 138, 0.45));
}

.cc-lantern {
    display: block;
    filter: drop-shadow(0 0 calc(var(--glow) * 18px) rgba(255, 200, 110, var(--glow)));
}

.recit-thumb.is-mark:has(.cc-icon, .cc-lantern) {
    background: radial-gradient(80% 90% at 50% 60%, rgba(255, 217, 138, 0.18), transparent 70%), linear-gradient(180deg, #05060d, #1a1840);
}

.recit-now.cc-now {
    grid-template-columns: auto minmax(0, 1fr) auto;
}

.cc-now-mark {
    display: grid;
    place-items: center;
    width: 44px;
}

.cc-count {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 5px;
    font-size: 12.5px;
    color: var(--muted);
}

.cc-count strong {
    font-family: var(--serif);
    font-size: 16px;
    font-weight: 600;
    color: #ffe39a;
}

.cc-meter {
    position: relative;
    flex: 1;
    min-width: 60px;
    height: 5px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

.recit-row-body .cc-meter {
    display: block;
    width: min(220px, 100%);
    margin-top: 5px;
}

.cc-meter i {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: 99px;
    background: linear-gradient(90deg, #e6b94f, #fff0bf);
    box-shadow: 0 0 8px rgba(255, 217, 138, 0.6);
}

.recit-row-body small .cc-icon {
    vertical-align: -1px;
}

/* Ailleurs : la fenêtre Ressources, l'écran de fin */
.wallet-glyph.crystals,
.gain span:has(> .cc-icon) {
    display: grid;
    place-items: center;
}

/* ---------- L'annonce du retour : en haut de la scène ---------- */

.recit-toast {
    position: absolute;
    top: 14px;
    left: 50%;
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: calc(100% - 28px);
    padding: 7px 7px 7px 9px;
    border-radius: 99px;
    border: 1px solid rgba(var(--gold-rgb), 0.55);
    background: linear-gradient(180deg, #19223b, #0e1528);
    box-shadow: 0 16px 36px -14px #000;
    color: var(--text);
    font-size: 14px;
    transform: translateX(-50%);
    animation: recit-toast-in 0.4s ease both;
}

.recit-toast.leaving {
    animation: recit-toast-out 0.26s ease both;
    pointer-events: none;
}

@keyframes recit-toast-in { from { opacity: 0; transform: translate(-50%, -10px); } }
@keyframes recit-toast-out { to { opacity: 0; transform: translate(-50%, -8px); } }

.recit-toast img {
    flex: none;
    width: 52px;
    height: 30px;
    border-radius: 99px;
    object-fit: cover;
}

.recit-toast-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recit-toast-text b {
    color: #ffe39a;
    font-weight: 700;
}

.recit-toast-close {
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--stroke);
    background: transparent;
    color: var(--muted);
    font-size: 12px;
    cursor: pointer;
}

/* ---------- Écran bas (téléphone en paysage, portable très bas) ---------- */

html.phone .recit-quest {
    grid-template-columns: 46px minmax(0, 1fr) auto;
    gap: 10px;
    padding: 7px 10px 7px 7px;
}

html.phone .recit-sun,
html.phone .recit-sun svg {
    width: 46px;
    height: 46px;
}

html.phone .recit-quest-body b {
    font-size: 16px;
}

html.phone .recit-count strong {
    font-size: 18px;
}

html.phone .recit-now {
    gap: 10px;
    padding: 8px 10px;
}

html.phone .recit-now b {
    font-size: 13px;
}

/* L'acte IV sur téléphone : la lanterne plus petite, la phrase sous les cristaux retirée */
html.phone .cc-now-mark {
    width: 34px;
}

html.phone .cc-now-mark .cc-lantern {
    width: 30px;
    height: 42px;
}

html.phone .recit-now.cc-now em {
    display: none;
}

/* Sauf ce qui ouvre la suite (le chapitre 16 : la Fournaise au-dessus des nuages) */
html.phone .recit-now.cc-now em.is-key {
    display: block;
    font-size: 11.5px;
}

html.phone .recit-row {
    grid-template-columns: 52px minmax(0, 1fr) auto;
    gap: 10px;
    padding: 5px 10px 5px 5px;
}

html.phone .recit-thumb {
    width: 52px;
    height: 32px;
}

html.phone .recit-thumb.is-face {
    width: 32px;
    height: 32px;
}

html.phone .recit-row-body b {
    font-size: 14px;
}

html.phone .recit-toast {
    top: 8px;
    gap: 8px;
    padding: 5px 5px 5px 6px;
    font-size: 12px;
}

html.phone .recit-toast img {
    width: 40px;
    height: 24px;
}

/* ---------- La discussion sur l'Ancre (rogue/recit-dialogue.js) ----------
   Dans le monde, là où se joue le chapitre (ancre-recit.js ; sans dessin derrière depuis le 2026-10-17) : en bas, les portraits des deux habitants (celui qui parle en lumière, l'autre en retrait) et la bulle de
   celui qui parle, sa pointe de son côté ; tes réponses dans la bulle. Les tailles suivent l'écran (vmin) : aussi
   présentes sur grand écran. Téléphone : seul celui qui parle, à côté de la bulle */

.recit-talk {
    --face: clamp(84px, 13vmin, 150px);
    position: absolute;
    inset: 0;
    z-index: 3;
    display: grid;
    grid-template-columns: var(--face) minmax(0, 1fr) var(--face);
    align-content: end;
    align-items: end;
    gap: 0 clamp(12px, 2vmin, 22px);
    padding: 0 clamp(16px, 2.6vmin, 30px) clamp(16px, 2.8vmin, 30px);
    cursor: pointer;
    animation: talk-in 0.35s ease both;
}

.recit-talk.leaving {
    animation: talk-out 0.24s ease both;
    pointer-events: none;
}

@keyframes talk-in {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
}

@keyframes talk-out {
    to {
        opacity: 0;
    }
}

.talk-who {
    grid-row: 1;
    margin: 0;
    display: grid;
    justify-items: center;
    gap: 6px;
    opacity: 0.45;
    filter: grayscale(0.5) brightness(0.75);
    transform: scale(0.84);
    transform-origin: 50% 100%;
    transition: opacity 0.3s ease, filter 0.3s ease, transform 0.3s ease;
}

.talk-who.is-left {
    grid-column: 1;
}

.talk-who.is-right {
    grid-column: 3;
}

.talk-who.is-speaking {
    opacity: 1;
    filter: none;
    transform: none;
}

.talk-who img {
    display: block;
    width: var(--face);
    height: var(--face);
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid rgba(var(--gold-rgb), 0.65);
    background: #0b1a2a;
    box-shadow: 0 16px 30px -12px #000;
}

.talk-who.is-speaking img {
    box-shadow: 0 0 0 5px rgba(var(--gold-rgb), 0.12), 0 0 36px rgba(var(--gold-rgb), 0.28), 0 16px 30px -12px #000;
}

/* Aube avec la fièvre : son anneau vire au violet ; au sommet, l'or des éclats s'y mêle */
.talk-who.is-fever.is-speaking img {
    border-color: rgba(201, 163, 255, 0.75);
    box-shadow: 0 0 0 5px rgba(176, 128, 255, 0.16), 0 0 38px rgba(176, 128, 255, 0.4), 0 16px 30px -12px #000;
}

.talk-who.is-fever[data-fever='3'].is-speaking img {
    border-color: rgba(255, 222, 150, 0.85);
    box-shadow: 0 0 0 5px rgba(255, 207, 110, 0.14), 0 0 26px rgba(255, 207, 110, 0.35), 0 0 46px rgba(176, 128, 255, 0.32), 0 16px 30px -12px #000;
}

/* Une nouvelle discussion (le chapitre 10, l'épilogue) : la bulle se retire, les portraits suivants arrivent */
.talk-who {
    animation: talk-who-in 0.36s ease both;
}

@keyframes talk-who-in {
    from {
        opacity: 0;
        translate: 0 10px;
    }
}

.talk-box {
    transition: opacity 0.22s ease, translate 0.22s ease;
}

.recit-talk.is-changing .talk-box,
.recit-talk.is-changing .talk-who {
    opacity: 0;
    translate: 0 8px;
}

.talk-who figcaption {
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
}

.talk-who.is-speaking figcaption {
    color: #f3d892;
}

.talk-box {
    grid-column: 2;
    grid-row: 1;
    position: relative;
    margin-bottom: clamp(20px, 3.6vmin, 34px);
    padding: 14px 44px 16px 20px;
    border-radius: 18px;
    border: 1px solid rgba(var(--gold-rgb), 0.55);
    background: linear-gradient(180deg, rgba(24, 33, 58, 0.97), rgba(13, 20, 39, 0.97));
    box-shadow: 0 26px 50px -24px #000, 0 0 0 4px rgba(var(--gold-rgb), 0.05);
}

/* La pointe, vers le portrait de celui qui parle */
.talk-box::before {
    content: '';
    position: absolute;
    left: -8px;
    bottom: calc(var(--face) / 2 - 14px);
    width: 14px;
    height: 14px;
    transform: rotate(45deg);
    background: #111a30;
    border-left: 1px solid rgba(var(--gold-rgb), 0.55);
    border-bottom: 1px solid rgba(var(--gold-rgb), 0.55);
}

.talk-box.from-right::before {
    left: auto;
    right: -8px;
    border-left: 0;
    border-bottom: 0;
    border-right: 1px solid rgba(var(--gold-rgb), 0.55);
    border-top: 1px solid rgba(var(--gold-rgb), 0.55);
}

.talk-name {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(var(--gold-rgb), 0.95);
}

/* Deux lignes réservées : la bulle ne grandit pas pendant que la réplique s'écrit */
.talk-line {
    display: block;
    min-height: 2.76em;
    margin-top: 5px;
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(16px, 2.45vmin, 22px);
    line-height: 1.38;
    color: var(--text);
    quotes: '«\00a0' '\00a0»' '“' '”';
}

.talk-line:lang(en) {
    quotes: '“' '”' '‘' '’';
}

.talk-choices {
    display: grid;
    gap: 7px;
    margin-top: 11px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.talk-choices:empty {
    display: none;
}

.talk-choices > small {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
}

.talk-choice {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    border-radius: 12px;
    border: 1px solid var(--stroke);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text);
    font: inherit;
    font-size: clamp(13px, 1.95vmin, 16px);
    font-weight: 600;
    text-align: left;
    cursor: pointer;
}

.talk-choice:hover,
.talk-choice:focus {
    border-color: rgba(var(--gold-rgb), 0.75);
    background: rgba(var(--gold-rgb), 0.09);
    outline: none;
}

.talk-choice kbd {
    flex: none;
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 1px solid rgba(var(--gold-rgb), 0.6);
    background: none;
    font: 700 11px/1 var(--font);
    color: #ffe39a;
}

/* La suite : une flèche dans le coin de la bulle, qui respire doucement */
.talk-next {
    position: absolute;
    right: 10px;
    bottom: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 0;
    background: none;
    color: rgba(var(--gold-rgb), 0.95);
    font-size: 14px;
    cursor: pointer;
    animation: talk-next 1.6s ease-in-out infinite;
}

.talk-next[hidden] {
    display: none;
}

.talk-next:focus-visible {
    outline: 2px solid rgba(var(--gold-rgb), 0.9);
    outline-offset: 2px;
}

@keyframes talk-next {
    50% {
        opacity: 0.45;
    }
}

.talk-skip {
    position: absolute;
    top: clamp(16px, 2.6vmin, 24px);
    right: clamp(16px, 2.6vmin, 26px);
    z-index: 4;
    padding: 6px 13px;
    border-radius: 99px;
    border: 1px solid var(--stroke);
    background: rgba(6, 9, 20, 0.55);
    color: var(--muted);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.talk-skip:hover,
.talk-skip:focus-visible {
    color: var(--text);
    border-color: rgba(var(--gold-rgb), 0.6);
    outline: none;
}

/* ---------- Les moments de la fin (2026-10-08, son retour : « plus impactante », « une fin plus propre ») ----------
   Un portrait qui quitte la scène, une voix au loin, une ligne du récit, l'illustration qui change, la lumière d'or (un
   seul fondu lent, jamais de clignotement), le carton de fin */

/* Un portrait quitte la scène : il s'efface en s'éloignant */
.talk-who.is-gone {
    opacity: 0 !important;
    translate: 26px 6px;
    filter: blur(2px) brightness(1.6);
    transition: opacity 0.9s ease, translate 0.9s ease, filter 0.9s ease;
}

.talk-who.is-left.is-gone {
    translate: -26px 6px;
}

/* Un portrait attendu (acte IV : Aube, dans la lumière) : sa place reste vide ; puis il revient, dans un halo d'or */
.talk-who.is-awaited {
    opacity: 0 !important;
    animation: none;
}

.talk-who.is-arriving {
    animation: talk-arrive 1.1s ease both;
}

/* Les fonctions de filtre dans le même ordre que .talk-who (grayscale, brightness) : le fondu reste continu */
@keyframes talk-arrive {
    from {
        opacity: 0;
        translate: 0 14px;
        filter: grayscale(0) brightness(1.9) blur(3px);
    }

    60% {
        opacity: 1;
        filter: grayscale(0) brightness(1.35) blur(0);
    }
}

/* La bulle se retire (une ligne du récit, la lumière) */
.talk-box.is-hidden {
    opacity: 0;
    translate: 0 8px;
    pointer-events: none;
}

/* Une voix au loin : la bulle pâlit, sans pointe ; la réplique s'écrit lentement, en or pâle */
.talk-box.is-far {
    border-style: dashed;
    border-color: rgba(var(--gold-rgb), 0.4);
    background: linear-gradient(180deg, rgba(24, 33, 58, 0.74), rgba(13, 20, 39, 0.74));
}

.talk-box.is-far::before {
    opacity: 0;
}

.talk-box.is-far .talk-line {
    color: #f3e2b4;
}

/* Une ligne du récit : au milieu de la scène, sans personne */
.talk-tell {
    position: absolute;
    left: 50%;
    top: 44%;
    width: min(80%, 760px);
    margin: 0;
    translate: -50% -50%;
    text-align: center;
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(17px, 2.7vmin, 27px);
    line-height: 1.4;
    color: #f6ecd2;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.92), 0 0 2px rgba(0, 0, 0, 0.8);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.recit-talk.is-telling .talk-tell {
    opacity: 1;
}

.recit-talk.is-telling .talk-who {
    opacity: 0.25;
}

/* La lumière d'or : elle emplit la scène, reste un instant, puis s'éteint ; translucide */
.recit-talk::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(62% 62% at 50% 44%, rgba(255, 244, 214, 0.86), rgba(255, 207, 110, 0.5) 45%, rgba(255, 207, 110, 0) 82%);
}

.recit-talk.is-light::before {
    animation: talk-light 3.2s ease-in-out both;
}

.recit-talk.is-light .talk-who {
    opacity: 0.1;
}

@keyframes talk-light {
    0% {
        opacity: 0;
    }

    38%,
    62% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* Le carton de fin : la berceuse vers après vers, le dernier en or, puis le nom de la quête et « Fin » */
.recit-talk.is-final .talk-who,
.recit-talk.is-final .talk-box,
.recit-talk.is-final .talk-skip,
.recit-talk.is-final .talk-tell {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s ease;
}

.talk-fin {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    gap: clamp(16px, 3.4vmin, 32px);
    padding: 0 6%;
    text-align: center;
    pointer-events: none;
}

.talk-fin-lines p {
    margin: 0;
    font-family: var(--serif);
    font-style: italic;
    font-size: clamp(18px, 3.1vmin, 31px);
    line-height: 1.55;
    color: #f6ecd2;
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.92);
    animation: fin-line 1.4s ease both;
    animation-delay: calc(var(--i) * 1.6s);
}

.talk-fin-lines p.is-gold {
    color: #ffd98a;
    text-shadow: 0 0 22px rgba(255, 207, 110, 0.45), 0 2px 16px rgba(0, 0, 0, 0.92);
}

.talk-fin-end {
    animation: fin-line 1.4s ease both;
    animation-delay: calc(var(--i) * 1.6s);
}

.talk-fin-end small {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(var(--gold-rgb), 0.9);
}

.talk-fin-end b {
    display: block;
    margin-top: 4px;
    font-family: var(--display, 'Lilita One', sans-serif);
    font-size: clamp(30px, 4.6vmin, 50px);
    font-weight: 400;
    line-height: 1;
    background: linear-gradient(115deg, #ffffff 15%, #ffd68c 95%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 0 22px rgba(255, 214, 140, 0.3));
}

.talk-fin-next {
    position: absolute;
    left: 50%;
    bottom: clamp(16px, 3vmin, 28px);
    translate: -50% 0;
    font-size: 12px;
    font-weight: 700;
    color: rgba(var(--gold-rgb), 0.95);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.recit-talk.fin-ready .talk-fin-next {
    opacity: 1;
    animation: talk-next 1.6s ease-in-out infinite;
}

.recit-talk.fin-all .talk-fin-lines p,
.recit-talk.fin-all .talk-fin-end {
    animation: none;
}

@keyframes fin-line {
    from {
        opacity: 0;
        translate: 0 8px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .recit-talk,
    .talk-next {
        animation: none;
    }
}

/* Téléphone : seul celui qui parle, à côté de la bulle (de son côté) */
html.phone .recit-talk {
    --face: 58px;
    grid-template-columns: var(--face) minmax(0, 1fr);
    gap: 0 9px;
    padding: 0 10px 10px;
}

html.phone .recit-talk .talk-who:not(.is-speaking) {
    display: none;
}

html.phone .recit-talk .talk-who.is-speaking {
    grid-column: 1;
}

html.phone .recit-talk .talk-box {
    grid-column: 2;
    margin-bottom: 18px;
    padding: 9px 30px 11px 13px;
    border-radius: 14px;
}

html.phone .recit-talk.speaks-right {
    grid-template-columns: minmax(0, 1fr) var(--face);
}

html.phone .recit-talk.speaks-right .talk-who.is-speaking {
    grid-column: 2;
}

html.phone .recit-talk.speaks-right .talk-box {
    grid-column: 1;
}

html.phone .talk-box::before {
    bottom: 16px;
}

html.phone .talk-who figcaption {
    font-size: 10.5px;
}

html.phone .talk-line {
    margin-top: 3px;
    font-size: 14px;
}

html.phone .talk-choices {
    margin-top: 7px;
    padding-top: 7px;
    gap: 5px;
}

html.phone .talk-choices > small {
    display: none;
}

html.phone .talk-choice {
    padding: 5px 9px;
    gap: 7px;
    font-size: 12px;
}

html.phone .talk-skip {
    top: 10px;
    right: 10px;
    padding: 4px 10px;
    font-size: 11px;
}

/* Téléphone : la ligne du récit et le carton de fin, plus petits (la scène est étroite) */
html.phone .talk-tell {
    width: 88%;
    font-size: 15px;
}

html.phone .talk-fin {
    gap: 10px;
    padding: 0 4%;
}

html.phone .talk-fin-lines p {
    font-size: 13.5px;
    line-height: 1.45;
}

html.phone .talk-fin-end b {
    font-size: 24px;
}

html.phone .talk-fin-next {
    bottom: 10px;
    font-size: 11px;
}

/* Le tableau de fin (rogue/recit-fin.js) : une toile à la place de l'illustration ; elle apparaît une fois ses calques
   chargés */
canvas.recit-fin { opacity: 0; transition: opacity 0.8s ease; }
canvas.recit-fin.is-ready { opacity: 1; }