/* ========================= RELIQUAIRE =========================
   Une salle de prière de l'Almanax, au fond de la Forge
   (tools/dofus-reliquaire.py), posée à ses proportions comme la Forge. La
   stèle du bassin ouvre sa fiche à droite ; la cérémonie se joue sur la
   carte, autour de la stèle (--vx, --vy : son cadran, posé par
   js/ui/reliquaire.js). Rien n'y anime autre chose qu'opacity et transform.
   ===================================================================== */

#reliquaire-screen { background: #070605; }
.sanctuaire { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.sanctuaire-map {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(100%, calc((100dvh - var(--bar-h)) * 1.4545));
    aspect-ratio: 1280 / 880;
    transform: translate(-50%, -50%);
    background: center / 100% 100% no-repeat;
    container-type: inline-size;
    box-shadow: 0 0 60px 20px rgba(0, 0, 0, 0.5);
}
.sanctuaire-sol, .sanctuaire-objets, .rite-reliquaire { position: absolute; inset: 0; }
.sanctuaire-sol { cursor: pointer; }
/* Le calque des objets ignore la souris ; la stèle et la sortie la reprennent. */
.sanctuaire-objets { pointer-events: none; z-index: 1500; }
/* Autour de la salle, la même carte floue : pas de bandes noires. */
.sanctuaire::before {
    content: '';
    position: absolute;
    inset: -60px;
    z-index: 0;
    background: var(--fond) center / cover no-repeat;
    filter: blur(26px) brightness(0.55);
    pointer-events: none;
}

/* ---------- La stèle et la sortie ----------
   La stèle est dans le décor : son bouton est transparent, sa lueur seule
   se voit. La sortie est une lueur au sol, à la pointe basse. */
.stele-almanax, .sanctuaire-porte {
    position: absolute;
    padding: 0;
    border: 0;
    border-radius: 40%;
    background: none;
    cursor: pointer;
    pointer-events: auto;
}
.stele-almanax:focus-visible, .sanctuaire-porte:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.stele-almanax .bld-plaque, .sanctuaire-porte .bld-plaque { top: auto; bottom: calc(100% + 4px); opacity: 0; transition: opacity 0.2s; }
.stele-almanax:hover .bld-plaque, .stele-almanax:focus-visible .bld-plaque,
.sanctuaire-porte:hover .bld-plaque, .sanctuaire-porte:focus-visible .bld-plaque { opacity: 1; }
.stele-almanax .bld-plaque small, .sanctuaire-porte .bld-plaque small { font-size: 0.68rem; color: var(--text-dim); }

/* Le cadran respire ; prête (dix parchemins), la stèle luit plus fort et plus vite. */
.stele-lueur {
    position: absolute;
    inset: 0 10% 30%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 190, 100, 0.7), rgba(255, 140, 40, 0.2) 60%, transparent);
    opacity: 0.3;
    pointer-events: none;
    animation: steleSouffle 3.4s ease-in-out infinite alternate;
}
.stele-almanax:hover .stele-lueur { opacity: 0.95; animation: none; }
@keyframes steleSouffle { from { opacity: 0.2; } to { opacity: 0.55; } }
.stele-almanax.prete .stele-lueur { animation: stelePrete 1.4s ease-in-out infinite alternate; }
@keyframes stelePrete { from { opacity: 0.5; } to { opacity: 1; } }

.porte-lueur {
    position: absolute;
    inset: 10%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 200, 120, 0.55), rgba(255, 150, 50, 0.15) 60%, transparent);
    opacity: 0.6;
    pointer-events: none;
}
.sanctuaire-porte:hover .porte-lueur { opacity: 1; }

/* Le compte des parchemins, en bas à gauche de la salle. */
.sanctuaire-compte {
    position: absolute;
    left: 16px;
    bottom: 16px;
    z-index: 1700;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(31, 31, 28, 0.94), rgba(15, 15, 12, 0.96));
    box-shadow: var(--lift);
    font-size: 0.9rem;
}
.sanctuaire-compte b { color: #ffb05a; font-size: 1.05rem; }
.sanctuaire-compte small { color: var(--text-dim); }
.sanctuaire-parch { display: grid; place-items: center; width: 26px; height: 26px; }
.sanctuaire-collection { margin-left: 8px; padding-left: 10px; border-left: 1px solid var(--line); color: var(--text-soft); font-size: 0.78rem; }

/* ---------- La fiche de la stèle ---------- */
.reliquaire-fiche {
    position: absolute;
    top: 50%;
    right: 24px;
    z-index: 1800;
    width: 340px;
    padding: 18px 18px 16px;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(31, 31, 28, 0.97), rgba(15, 15, 12, 0.98));
    box-shadow: var(--lift);
    text-align: center;
    transform: translateY(-50%);
    animation: popIn 0.18s var(--ease-out);
}
.reliquaire-jauge { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 8px; margin-top: 12px; font-size: 0.82rem; }
.reliquaire-parch { display: grid; place-items: center; width: 26px; height: 26px; }
.reliquaire-ico { max-width: 100%; max-height: 100%; }
.reliquaire-barre { height: 8px; border-radius: 999px; background: var(--well); border: 1px solid var(--line); overflow: hidden; }
.reliquaire-barre i { display: block; height: 100%; background: linear-gradient(90deg, #a8661e, #ff9d2e); }
.reliquaire-collection { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-top: 10px; }
.relique-case { display: grid; place-items: center; aspect-ratio: 1; border: 1px dashed var(--line); border-radius: 6px; color: var(--text-dim); font-size: 0.8rem; }
.relique-case.obtenue { border: 1px solid #ff9d2e; background: rgba(255, 157, 46, 0.1); }
.relique-art { width: 80%; height: 80%; object-fit: contain; }

/* ---------- La Relique révélée ---------- */
.reliquaire-revele {
    position: absolute;
    top: 50%;
    right: 24px;
    z-index: 2100;
    width: min(380px, calc(100% - 32px));
    padding: 18px 22px 18px;
    border: 1px solid rgba(255, 157, 46, 0.65);
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(38, 28, 16, 0.97), rgba(14, 11, 8, 0.98));
    box-shadow: var(--lift), 0 0 40px rgba(255, 140, 30, 0.25);
    text-align: center;
    transform: translateY(-50%);
    animation: reveleMonte 0.5s var(--ease-out);
}
@keyframes reveleMonte { from { opacity: 0; transform: translate(24px, -50%); } to { opacity: 1; transform: translate(0, -50%); } }
.revele-kicker { margin: 0; font-family: var(--font-display); font-size: 0.62rem; letter-spacing: 0.24em; text-transform: uppercase; color: #ffb05a; }
.revele-art { display: grid; place-items: center; width: 64px; height: 64px; margin: 8px auto 2px; }
.revele-img { max-width: 100%; max-height: 100%; }
.revele-nom { margin: 2px 0 8px; font-family: var(--font-display); font-size: 1.3rem; color: #ff9d2e; text-shadow: 0 0 18px rgba(255, 140, 30, 0.45); }
.revele-passif { display: grid; gap: 2px; margin: 0 0 10px; padding: 8px 12px; border: 1px solid rgba(255, 157, 46, 0.35); border-radius: 8px; background: rgba(255, 157, 46, 0.07); font-size: 0.84rem; line-height: 1.4; }
.revele-passif b { color: #ffcf8a; }
.revele-lignes { display: grid; gap: 2px; text-align: left; }
.revele-note { margin: 10px 0 12px; font-size: 0.8rem; color: var(--text-dim); }

/* ---------- La cérémonie ----------
   Tout se pose sur le cadran de la stèle (--vx, --vy). Les classes du
   conteneur s'ajoutent l'une après l'autre (js/ui/reliquaire.js, RITE). */
.rite-reliquaire { z-index: 1900; pointer-events: none; }
.rite-reliquaire > * { position: absolute; pointer-events: none; }

/* 1. La salle s'assombrit, sauf autour de la stèle. */
.rite-voile {
    inset: 0;
    background: radial-gradient(circle at var(--vx) var(--vy), transparent 0, rgba(5, 3, 1, 0.55) 16cqi, rgba(5, 3, 1, 0.82) 48cqi);
    opacity: 0;
    transition: opacity 0.7s ease;
}
.sanctuaire.en-rite .rite-voile { opacity: 1; }

/* 2. Les parchemins paraissent un à un, en cercle, puis tournent. */
.rite-orbite { left: var(--vx); top: var(--vy); width: 0; height: 0; }
.sanctuaire.en-orbite .rite-orbite { animation: riteTourne 2.6s cubic-bezier(0.5, 0, 0.7, 1) forwards; }
@keyframes riteTourne { to { transform: rotate(540deg); } }
.rite-serre { position: absolute; left: 0; top: 0; transition: transform 0.85s cubic-bezier(0.6, 0, 0.9, 0.5), opacity 0.3s 0.6s; }
/* 3. Ils se resserrent et se fondent dans la stèle. */
.sanctuaire.en-fusion .rite-serre { transform: scale(0.04); opacity: 0; }
.rite-p {
    position: absolute;
    left: 0;
    top: 0;
    width: 5cqi;
    height: 5cqi;
    margin: -2.5cqi 0 0 -2.5cqi;
    transform: rotate(calc(var(--i) * 36deg)) translateY(-13cqi);
}
.rite-p-art {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: rotate(calc(var(--i) * -36deg)) scale(0.3);
    filter: drop-shadow(0 0 0.6cqi rgba(255, 170, 60, 0.9));
}
.sanctuaire.en-rite .rite-p-art { animation: riteParait 0.45s calc(var(--i) * 85ms) var(--ease-out) forwards; }
@keyframes riteParait {
    from { opacity: 0; transform: rotate(calc(var(--i) * -36deg)) translateY(-2cqi) scale(0.3); }
    to { opacity: 1; transform: rotate(calc(var(--i) * -36deg)) scale(1); }
}
.rite-p-img { max-width: 100%; max-height: 100%; }

/* 4. La stèle s'embrase, une colonne de lumière monte. */
.rite-colonne {
    left: var(--vx);
    top: 0;
    width: 7cqi;
    height: var(--vpied);
    margin-left: -3.5cqi;
    background: linear-gradient(0deg, rgba(255, 190, 100, 0.95), rgba(255, 150, 40, 0.5) 45%, transparent);
    border-radius: 50% 50% 0 0 / 12% 12% 0 0;
    filter: blur(0.6cqi);
    opacity: 0;
    transform: scaleY(0);
    transform-origin: 50% 100%;
}
.sanctuaire.en-fusion .rite-colonne { animation: riteColonne 1.9s 0.55s ease-out forwards; }
@keyframes riteColonne {
    0% { opacity: 0; transform: scaleY(0) scaleX(0.4); }
    35% { opacity: 1; transform: scaleY(1) scaleX(1); }
    70% { opacity: 0.85; transform: scaleY(1) scaleX(0.8); }
    100% { opacity: 0; transform: scaleY(1) scaleX(0.2); }
}

/* 5. Un éclair. */
.rite-eclat { inset: 0; background: radial-gradient(circle at var(--vx) var(--vy), #fff8e6 0, rgba(255, 220, 160, 0.85) 18cqi, rgba(255, 180, 90, 0) 60cqi); opacity: 0; }
.sanctuaire.en-eclair .rite-eclat { animation: riteEclair 0.75s ease-out forwards; }
@keyframes riteEclair { 0% { opacity: 0; } 18% { opacity: 1; } 100% { opacity: 0; } }

/* 6. La Relique s'élève dans un soleil de rayons qui tourne. */
.rite-rayons {
    left: var(--vx);
    top: var(--vy);
    width: 46cqi;
    height: 46cqi;
    margin: -23cqi 0 0 -23cqi;
    border-radius: 50%;
    background: repeating-conic-gradient(rgba(255, 200, 120, 0.42) 0 6deg, transparent 6deg 18deg);
    -webkit-mask: radial-gradient(closest-side, #000 20%, transparent);
    mask: radial-gradient(closest-side, #000 20%, transparent);
    opacity: 0;
    transform: scale(0.2);
}
.sanctuaire.en-eclair .rite-rayons { animation: riteRayons 1.1s var(--ease-out) forwards, riteRayonsTournent 14s linear infinite; }
@keyframes riteRayons { to { opacity: 1; transform: scale(1); } }
@keyframes riteRayonsTournent { from { rotate: 0deg; } to { rotate: 360deg; } }
.rite-relique {
    left: var(--vx);
    top: var(--vy);
    display: grid;
    place-items: center;
    width: 11cqi;
    height: 11cqi;
    margin: -5.5cqi 0 0 -5.5cqi;
    opacity: 0;
    transform: translateY(4cqi) scale(0.2);
    filter: drop-shadow(0 0 1.4cqi rgba(255, 170, 60, 0.95));
}
.sanctuaire.en-elevation .rite-relique { animation: riteEleve 1.1s cubic-bezier(0.2, 1.4, 0.4, 1) forwards, riteFlotte 2.4s 1.1s ease-in-out infinite alternate; }
@keyframes riteEleve { to { opacity: 1; transform: translateY(-9cqi) scale(1); } }
@keyframes riteFlotte { from { transform: translateY(-9cqi) scale(1); } to { transform: translateY(-10.5cqi) scale(1.04); } }
.rite-relique-art { max-width: 100%; max-height: 100%; }

/* ---------- Écran étroit ---------- */
@media (max-width: 1000px) {
    .reliquaire-fiche, .reliquaire-revele { top: auto; right: 10px; left: 10px; bottom: 10px; width: auto; transform: none; animation: none; }
    .sanctuaire-compte { left: 8px; bottom: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .stele-lueur, .rite-reliquaire * { animation: none !important; }
}

/* Surbrillance : la stèle et la sortie se cernent, leurs plaques se montrent. */
body.surbrillance .stele-almanax, body.surbrillance .sanctuaire-porte { outline: 2px dashed color-mix(in srgb, var(--lime) 75%, transparent); outline-offset: -2px; background: color-mix(in srgb, var(--lime) 8%, transparent); }
body.surbrillance .stele-almanax .bld-plaque, body.surbrillance .sanctuaire-porte .bld-plaque { opacity: 1; transition: none; }