/* ======================= FIN D'EXPÉDITION ======================= */

/*
 * Le bilan se tient dans le monde qu'on vient de quitter : son décor passe
 * sous les dégradés habituels, qui l'assombrissent. Tombé au combat, une
 * lueur rouge monte du bas de l'écran — sans rien ôter à la lecture.
 */
#debrief-screen {
    --db-bg: url('../assets/backdrops/bg_world_1.webp');
}
#debrief-screen[data-world="2"] { --db-bg: url('../assets/backdrops/bg_world_2.webp'); }
#debrief-screen[data-world="3"] { --db-bg: url('../assets/backdrops/bg_world_3.webp'); }
#debrief-screen[data-world="4"] { --db-bg: url('../assets/backdrops/bg_world_4.webp'); }
#debrief-screen[data-world="5"] { --db-bg: url('../assets/backdrops/bg_world_5.webp'); }
#debrief-screen {
    background:
        radial-gradient(ellipse 70% 50% at 50% -8%, rgba(217, 164, 65, 0.12), transparent 70%),
        linear-gradient(180deg, rgba(15, 15, 12, 0.82), rgba(9, 9, 6, 0.94)),
        var(--db-bg) center / cover no-repeat,
        var(--ink);
}
#debrief-screen.fallen {
    background:
        radial-gradient(ellipse 80% 45% at 50% 110%, rgba(255, 59, 92, 0.16), transparent 70%),
        linear-gradient(180deg, rgba(15, 15, 12, 0.84), rgba(9, 9, 6, 0.95)),
        var(--db-bg) center / cover no-repeat,
        var(--ink);
}

/* Le verdict en grand, et la raison dessous, dans la voix du récit. */
.debrief-head { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 6px 0 14px; text-align: center; }

.debrief-title {
    font-size: clamp(1.6rem, 3.2vw, 2.4rem);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    background: linear-gradient(180deg, #fff6df 10%, var(--gold-lit) 45%, var(--gold) 75%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.8)) drop-shadow(0 0 26px rgba(201, 171, 69, 0.35));
}

#debrief-screen.fallen .debrief-title { background: linear-gradient(180deg, #ffe1e5 10%, #ff8a9b 50%, var(--blood) 90%); -webkit-background-clip: text; background-clip: text; }

.debrief-reason {
    margin: 0;
    font-family: var(--font-lore);
    font-style: italic;
    font-size: 1.1rem;
    color: var(--text-soft);
}

.debrief-layout {
    display: grid;
    grid-template-columns: minmax(220px, 0.8fr) minmax(360px, 1.5fr) minmax(280px, 1fr);
    gap: 16px;
    width: 100%;
    max-width: 1320px;
    flex: 1;
    min-height: 0;
}
.debrief-layout > .hub-panel { overflow-y: auto; }

/* ---------- Coupe du donjon ---------- */
.debrief-shaft { flex: 1; display: flex; flex-direction: column; gap: 14px; padding: 14px 16px 22px; min-height: 0; }
.shaft-head { display: flex; flex-direction: column; gap: 2px; }
.shaft-floor { font-family: var(--font-display); font-size: 1.05rem; letter-spacing: 0.08em; color: var(--text-soft); text-transform: uppercase; }
.shaft-floor b { font-size: 2.2rem; color: var(--gold-lit); letter-spacing: 0; margin-left: 4px; }
.shaft-head small { font-size: 0.72rem; color: var(--text-dim); }

/* Une barre de progression verticale, du premier étage au Gardien du Monde :
   un rail sombre, les gardiens en graduations, la descente en doré. */
.shaft-well {
    position: relative;
    flex: 1;
    min-height: 260px;
    margin: 6px 0 8px 84px;
    width: 14px;
    border-radius: 7px;
    background: #0b0b08;
    box-shadow: inset 0 0 0 1px var(--stone-600);
}
.shaft-top, .shaft-tick { position: absolute; left: 0; right: 0; transform: translateY(-50%); }
.shaft-top { top: 0; }
.shaft-top small,
.shaft-tick small {
    position: absolute;
    right: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    white-space: nowrap;
    font-size: 0.66rem;
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
}
.shaft-tick i { display: block; height: 2px; margin: 0 -6px; background: rgba(160, 170, 190, 0.45); }
.shaft-tick.world i { height: 3px; background: var(--blood-lit); }
.shaft-tick.world small { color: var(--blood-lit); right: auto; left: calc(100% + 12px); }

/* La descente de cette expédition : le trait doré, du départ à l'arrivée. */
.shaft-run {
    position: absolute;
    left: 0;
    width: 100%;
    min-height: 4px;
    border-radius: 7px;
    background: linear-gradient(180deg, var(--gold-deep), var(--gold-lit));
    box-shadow: 0 0 12px rgba(217, 164, 65, 0.45);
}
.shaft-record {
    position: absolute;
    left: -8px;
    width: 30px;
    border-top: 2px dashed rgba(127, 176, 255, 0.8);
}
.shaft-record small {
    position: absolute;
    left: calc(100% + 8px);
    top: -9px;
    white-space: nowrap;
    font-size: 0.66rem;
    color: #a9c6f0;
}
.shaft-record.beaten { border-top-color: rgba(127, 176, 255, 0.4); }
.shaft-record.beaten small { color: var(--text-dim); text-decoration: line-through; }
.shaft-hero { position: absolute; right: calc(100% + 30px); transform: translateY(-50%); width: 34px; height: 34px; z-index: 1; }
.shaft-hero-ico { display: inline-flex; width: 100%; height: 100%; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8)); }

.db-ico-art { width: 100%; height: 100%; object-fit: contain; }

/* ---------- Chiffres ---------- */
.debrief-record { padding: 12px 14px 0; }
.debrief-record:empty { display: none; }
.db-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
    border-radius: var(--radius);
    background: linear-gradient(90deg, rgba(217, 164, 65, 0.2), rgba(217, 164, 65, 0.04));
    border: 1px solid rgba(217, 164, 65, 0.55);
}
.db-banner.fallen { background: linear-gradient(90deg, rgba(255, 59, 92, 0.16), rgba(255, 59, 92, 0.03)); border-color: rgba(255, 59, 92, 0.5); }
.db-banner-ico { display: inline-flex; width: 64px; height: 36px; flex: 0 0 auto; }
.db-banner b { display: block; font-family: var(--font-display); font-size: 1rem; letter-spacing: 0.08em; color: var(--gold-lit); text-transform: uppercase; }
.db-banner.fallen b { color: var(--blood-lit); }
.db-banner small { font-size: 0.74rem; color: var(--text-soft); }

.debrief-stats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
    padding: 12px 14px;
}
.db-stat {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    column-gap: 9px;
    align-items: center;
    padding: 9px 10px;
    border-radius: var(--radius);
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--stone-700);
}
.db-ico { grid-row: span 2; display: inline-flex; width: 30px; height: 30px; }
.db-stat-label { font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); }
.db-stat-value { font-family: var(--font-display); font-size: 1.12rem; color: #fff; font-variant-numeric: tabular-nums; }
.db-stat small { grid-column: 2; font-size: 0.64rem; color: var(--text-dim); }
.db-stat.bad .db-stat-value { color: var(--blood-lit); }
.db-stat.zero { opacity: 0.55; }

.debrief-extra:empty { display: none; }

/* ---------- Tout le butin ---------- */
.debrief-loot { padding: 10px 14px 14px; display: flex; flex-direction: column; gap: 10px; }
.panel-header-bg h2 small { font-family: var(--font-ui, inherit); letter-spacing: 0.04em; color: var(--text-dim); text-transform: none; }
.db-drops { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 5px; }
.db-drop {
    --rar: var(--stone-500);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: 5px;
    border: 1px solid var(--rar);
    background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.6));
}
.db-drop.set-piece {
    background:
        linear-gradient(0deg, var(--set) 0 3px, transparent 3px),
        radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--set) 40%, transparent), color-mix(in srgb, var(--set) 16%, transparent) 75%);
}
.db-drop-ico { display: grid; place-items: center; width: 86%; height: 86%; }
.db-drop-art { width: 100%; height: 100%; object-fit: contain; }
.db-drop .fam-egg { width: 22px; height: 29px; }
.db-mats { display: flex; flex-wrap: wrap; gap: 12px; }
.db-mat { display: inline-flex; align-items: center; gap: 5px; font-size: 0.8rem; color: var(--text-soft); }
.db-mat-art { display: inline-flex; width: 26px; height: 26px; }

/* ---------- Bandeau des sceaux, sous le titre ---------- */
.debrief-seals {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin: -4px 0 12px;
    padding: 6px 14px;
    border-radius: 18px;
    background: rgba(255, 122, 60, 0.08);
    border: 1px solid rgba(255, 122, 60, 0.4);
}
.debrief-seals.hidden { display: none; }
.db-seals-label { font-family: var(--font-display); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: #ffa472; }
.db-seal-emblem { display: inline-flex; width: 26px; height: 26px; }
.db-drop, .db-find { cursor: help; }
.db-seal { display: inline-flex; align-items: center; gap: 5px; font-size: 0.74rem; color: var(--text-soft); }
.db-unlocks { list-style: none; margin: 0; padding: 0 14px 14px; display: flex; flex-direction: column; gap: 5px; }
.db-unlocks li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 10px;
    border-radius: var(--radius);
    background: rgba(79, 212, 138, 0.08);
    border: 1px solid rgba(79, 212, 138, 0.3);
    font-size: 0.78rem;
}
.db-unlocks b { color: var(--verdant); }

/* ---------- Ce qu'il en reste ---------- */
.debrief-finds, .debrief-beasts { padding: 10px 14px 14px; }
.debrief-finds { display: flex; flex-direction: column; gap: 7px; }
.db-find {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px 6px 6px;
    border-radius: var(--radius);
    border: 1px solid var(--rar);
    background: radial-gradient(circle at 20% 50%, color-mix(in srgb, var(--rar) 16%, transparent), rgba(0, 0, 0, 0.35) 70%);
}
.db-find.set-piece { background: linear-gradient(90deg, color-mix(in srgb, var(--set) 30%, transparent), rgba(0, 0, 0, 0.35) 75%); }
.db-find-art { flex: 0 0 auto; display: inline-flex; width: 48px; height: 48px; }
.db-find-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.db-find-body b { color: #f0e6d2; font-size: 0.84rem; }
.db-find-body small { font-size: 0.68rem; color: var(--text-dim); }

.debrief-beasts { display: flex; flex-wrap: wrap; gap: 8px; }
.db-beast { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 74px; text-align: center; }
.db-beast-art { display: inline-flex; width: 60px; height: 60px; }
.db-beast small { font-size: 0.62rem; color: var(--text-soft); line-height: 1.2; }

.db-seal-art { display: inline-flex; width: 24px; height: 24px; }
.db-seal-line { margin: 0; font-size: 0.74rem; color: var(--text-soft); }
.db-seal-line b { color: #ffa472; }
.db-empty { margin: 0; font-size: 0.74rem; color: var(--text-dim); font-style: italic; }

.debrief-actions { display: flex; justify-content: center; gap: 14px; padding: 14px 0 4px; }
.debrief-actions .btn { min-width: 180px; }

/* « Repartir » est le bouton doré du départ : c'est le même geste. */
.debrief-actions { align-items: center; }
#btn-debrief-again { min-width: 260px; }

@media (max-width: 1100px) {
    .debrief-layout { grid-template-columns: minmax(200px, 0.8fr) minmax(0, 1.5fr); }
    .debrief-side { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
    .debrief-layout { grid-template-columns: minmax(0, 1fr); }
    .shaft-well { min-height: 200px; }
}