/* ============================================================
   Table Runique — Fusion (3 fragments -> rune) et Cassage
   (rune -> fragments). Voir table-runique.md pour la spec complète.

   Deux zones côte à côte en desktop (table à gauche, inventaire à
   droite) ; empilées en mobile, la table restant TOUJOURS visible
   en premier (jamais masquée, cf. section 8.1 du doc).
   ============================================================ */

:root {
  --rt-fade-duration: 0.35s;
}

.rt-stage {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  width: min(100%, 1200px);
  margin: 1rem auto 0;
}

.rt-table-zone {
  flex: 1 1 50%;
  min-width: 0;
}

.rt-inventaire-zone {
  flex: 1 1 50%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* ---------- Table rituelle (même technique que les fichiers de test) ---------- */

.ritual-table {
  position: relative;
  width: 100%;
  aspect-ratio: 2048 / 1843;
  user-select: none;
  filter: drop-shadow(0 8px 18px rgba(46,31,20,0.35));
}

.rt-base,
.rt-glow,
.rt-slot-fragment {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: block;
}

.rt-glow {
  opacity: 0;
  transition: opacity var(--rt-fade-duration) ease;
}
.rt-glow.is-active { opacity: 1; }

/* Bug corrigé : la règle display:block ci-dessus (partagée avec .rt-base/
   .rt-glow) avait une spécificité supérieure à celle de l'UA pour [hidden],
   donc un <img> vide (src="") avec l'attribut hidden restait quand même
   affiché — visible comme un petit carré "image cassée" sur chaque
   emplacement vide. */
.rt-slot-fragment[hidden] { display: none; }

/* Calque dynamique du fragment posé dans un emplacement — positionné en
   absolu aux mêmes coordonnées % que le hotspot correspondant (réglé en JS,
   voir table-runique.js). object-fit: contain pour ne jamais déformer. */
.rt-slot-fragment {
  position: absolute;
  width: auto;
  height: auto;
  object-fit: contain;
}
.rt-slot-fragment img,
img.rt-slot-fragment {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.rt-hotspot {
  position: absolute;
  cursor: pointer;
  z-index: 5;
}
.rt-hotspot.rt-slot-hotspot { cursor: pointer; }
.rt-hotspot.rt-slot-hotspot.drop-target::after {
  content: "";
  position: absolute;
  inset: -6%;
}

/* Bouton Fusionner — même principe que .rt-base/.rt-glow : l'image est
   plein-canevas (elle contient tout le calque, avec juste le bouton dessiné
   dans un coin), SEUL le hotspot (petite zone cliquable) est positionné en
   coordonnées réelles. pointer-events: none ici, le clic/survol passe par
   le hotspot séparé. */
.rt-fusion-btn {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 6;
  background: none;
  border: none;
  padding: 0;
  pointer-events: none;
}
.rt-fusion-btn img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Loupe — même principe que le bouton Fusionner : plein-canevas, visible
   uniquement quand les 3 emplacements sont remplis (cf. rtRenderSlots en JS).
   pointer-events: none, le clic/survol passe par #rtLoupeHotspot séparé. */
.rt-loupe-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  z-index: 6;
}

/* Image centrale (table_centre.webp) — plein-canevas comme .rt-base,
   TOUJOURS affichée (elle remplace définitivement le centre de la table,
   pas un calque conditionnel comme les glows). */
.rt-centre-img { z-index: 1; }

/* Jauge de pourcentage — positionnée pile sur le disque de table_centre.webp
   (centre et rayon mesurés directement sur l'asset : centre à 49.83%/57.60%
   du canevas, rayon ≈ 8.8%/9.3% largeur/hauteur -> diamètre ≈ 17.2% de la
   largeur de la table pour un cercle qui colle exactement au disque). */
.rt-jauge {
  position: absolute;
  top: 57.6%;
  left: 49.83%;
  transform: translate(-50%, -50%);
  width: 17.2%;
  aspect-ratio: 1;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.rt-jauge-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.rt-jauge-track {
  fill: none;
  stroke: rgba(0,0,0,0.25);
  stroke-width: 8;
}
.rt-jauge-fill {
  fill: none;
  stroke: #9b59e0;
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 339.3;
  stroke-dashoffset: 339.3;
}
.rt-jauge-label {
  position: absolute;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(0.9rem, 2.4vw, 1.6rem);
  color: var(--parchment);
  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
}

#rtHint { text-align: center; }

/* ---------- Inventaire des fragments ---------- */

.rt-inventaire {
  position: relative;
  width: 100%;
  aspect-ratio: 2048 / 1843; /* même ratio que la table en attendant inventaire.webp */
  container-type: size;
}

.rt-inventaire-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

/* Zone de contenu utile à l'intérieur de inventaire.webp — 14% de marge de
   chaque côté (mesuré sur inventaire.webp livré : le cadre de pierre +
   bandeau décoratif haut/bas prend environ 9-10%, marge augmentée pour être
   sûr de ne jamais recouvrir la bordure). */
.rt-inventaire-content {
  position: absolute;
  top: 14%;
  right: 14%;
  bottom: 14%;
  left: 14%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.rt-inventaire-content .zone-title { flex: 0 0 auto; }
.rt-inventaire-content .runes-carousel { flex: 1 1 auto; min-height: 0; }
.rt-inventaire-content .runes-list { height: 100%; }

/* ---------- Pop-ups thématiques Table Runique ----------
   Même technique que .slot-resultat-modal (déjà utilisée par la
   Runo-Machine) : fond image plutôt que .modal plat, cf. échange avec
   l'utilisateur — fond_pop_up_haut réservé au livre du Grimoire-info,
   fond_pop_up_carre pour la bougie et le résultat de fusion. */

.rt-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: rgba(46,31,20,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.rt-modal {
  position: relative;
  width: min(92vw, 400px);
  min-height: 300px;
  max-height: 85vh;
  background-image: url("../img/design/fond_pop_up_carre.webp");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  /* IMPORTANT : un padding en % se calcule TOUJOURS par rapport à la largeur
     du bloc conteneur (.rt-modal-backdrop, quasi tout l'écran), jamais par
     rapport à la largeur de cet élément lui-même — même le padding-top/
     bottom suit cette règle. Résultat avec l'ancien "9% 10%" : sur un écran
     de 1500px, ça faisait ~135-150px de marge de CHAQUE côté d'une pop-up
     large de 400px, écrasant tout le contenu utile dans une bande centrale
     minuscule. Des rem fixes évitent complètement ce piège. */
  padding: 2.25rem 1.6rem 1.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
  overflow-y: auto;
}

.rt-modal h3 {
  font-family: var(--font-display);
  color: var(--wood-dark);
  margin: 0;
  font-size: clamp(0.95rem, 4.5vw, 1.3rem);
}
.rt-modal p { margin: 0; font-size: clamp(0.78rem, 3.2vw, 0.95rem); color: var(--ink-soft); }

.rt-modal-close {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  margin-top: 0.4rem;
  flex-shrink: 0;
}
.rt-modal-close img { display: block; height: clamp(30px, 6vh, 42px); width: auto; transition: transform 0.1s; }
.rt-modal-close:active img { transform: scale(0.96); }

.rt-result-score {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.1rem, 5vw, 1.7rem);
}
.rt-result-score.success { color: var(--success); }
.rt-result-score.fail { color: var(--fail); }
.rt-result-threshold { font-size: clamp(0.7rem, 3vw, 0.85rem); color: var(--ink-soft); }

.rt-result-items {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.rt-result-items img {
  width: clamp(36px, 10vw, 56px);
  height: clamp(36px, 10vw, 56px);
  object-fit: contain;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(107,74,48,0.3);
  background: rgba(255,255,255,0.25);
  padding: 2px;
}

/* Cassage : liste de runes disponibles (grille façon rune-card) */
.rt-cassage-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
  max-height: 42vh;
  overflow-y: auto;
  width: 100%;
}

/* ---------- Pop-up livre "Grimoire-info" ----------
   fond_pop_up_haut.webp = une page (portrait). 2 pages côte à côte en
   desktop, 1 seule en mobile. */

.rt-book-backdrop {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: rgba(46,31,20,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.rt-book {
  display: flex;
  gap: 0.6rem;
  align-items: stretch;
}

.rt-book-page {
  position: relative;
  width: min(38vw, 300px);
  aspect-ratio: 1014 / 1324;
  background-image: url("../img/design/fond_pop_up_haut.webp");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  /* rem fixes, pas de % : le conteneur (.rt-book, en flex dans une backdrop
     plein écran) est bien plus large que la page elle-même, donc un
     padding en % s'y calculerait dessus et non sur la largeur réelle de
     la page (même piège que .rt-modal, voir plus haut). */
  padding: 1.75rem 1.3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.4rem;
  overflow-y: auto;
  container-type: size;
}
.rt-book-page.rt-book-page-hidden { display: none; }

.rt-book-page h4 {
  font-family: var(--font-display);
  color: var(--wood-dark);
  margin: 0;
  font-size: clamp(0.85rem, 6.5cqw, 1.1rem);
}
.rt-book-page p { margin: 0; font-size: clamp(0.75rem, 4.8cqw, 0.92rem); color: var(--ink-soft); line-height: 1.35; }
.rt-book-page img.rt-book-frag-img {
  width: clamp(52px, 26cqw, 92px);
  height: clamp(52px, 26cqw, 92px);
  object-fit: contain;
  margin-top: 0.3rem;
}
.rt-book-power {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--parchment-shadow);
  width: 100%;
}
.rt-book-power-name {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gold);
  margin: 0 0 0.2rem;
  font-size: clamp(0.8rem, 5.5cqw, 1rem);
}
.rt-book-power-desc {
  margin: 0;
  font-size: clamp(0.7rem, 4.4cqw, 0.85rem);
  color: var(--ink-soft);
}

.rt-book-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
}
.rt-book-arrow {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--parchment-shadow);
  background: var(--parchment);
  color: var(--wood-dark);
  font-family: var(--font-display);
  font-size: 1.1rem;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(46,31,20,0.25);
}
.rt-book-arrow:disabled { opacity: 0.35; cursor: not-allowed; }
.rt-book-close-wrap { display: flex; justify-content: center; margin-top: 0.5rem; }

/* ---------- Plein écran (même principe que le Grimoire, cf. grimoire.css) ----------
   Classe DÉDIÉE (fullscreen-mode-table, différente de fullscreen-mode du
   Grimoire) : sinon les 2 sections passent en display:flex en même temps
   dès qu'UN des deux boutons est cliqué (une règle CSS avec #id + classe a
   plus de spécificité que l'attribut [hidden] posé par showTab(), donc les
   deux sections redeviendraient visibles simultanément avec une seule
   classe partagée — c'était le bug remonté).
   .rt-stage contient 2 zones côte à côte (table 55% / inventaire 45%), toutes
   deux au ratio 2048/1843. On agrandit .rt-stage pour remplir l'écran tout en
   gardant ce ratio, façon object-fit:contain : jamais coupé, jamais déformé.
   Facteur ≈ (2048/1843) / 0.5 ≈ 2.22 (largeur totale nécessaire pour que la
   zone table, la plus haute des deux, tienne en hauteur). */
body.fullscreen-mode-table .topbar { display: none; }

body.fullscreen-mode-table #tab-table-runique.container {
  padding: 0;
  max-width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.fullscreen-mode-table #tab-table-runique .page-header { display: none; }
body.fullscreen-mode-table #rtHint { display: none; }

body.fullscreen-mode-table .rt-stage {
  width: min(100vw, calc(100vh * 2.22));
  max-width: none;
  margin: 0;
  flex-shrink: 0;
}

@media (max-width: 720px) and (orientation: portrait) {
  body.fullscreen-mode-table .rotate-hint {
    display: block;
    text-align: center;
    color: var(--wood);
    font-style: italic;
    font-size: 0.85rem;
    margin: 0.4rem 0 0.6rem;
  }
}

@media (max-width: 720px) {
  body:not(.fullscreen-mode-table) .rt-stage {
    flex-direction: column;
  }
  body:not(.fullscreen-mode-table) .rt-table-zone,
  body:not(.fullscreen-mode-table) .rt-inventaire-zone {
    flex: 1 1 auto;
    width: 100%;
  }
  .rt-inventaire-content .runes-list { height: auto; }

  .rt-book-page {
    width: min(78vw, 320px);
  }
}