/* ============================================================
   Grimoire — page principale du talisman.
   Fond = image d'un grimoire ouvert (public/img/design/grimoire.webp).
   Les zones utiles sont positionnées en % du fond pour coller au dessin :
     page GAUCHE  : de 13% à 46% (largeur)   -> talisman
     page DROITE  : de 52% à 85% (15% du bord droit) -> runes
     hauteur      : padding-top 14%, padding-bottom 17%
   Le reste = zones mortes (on n'y met rien).
   ============================================================ */

.grimoire-stage {
  position: relative;
  width: min(100%, 1100px);
  margin: 1rem auto 0;
  aspect-ratio: 1600 / 1100;   /* ratio de grimoire.webp */
  background-image: url("../img/design/grimoire.webp");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  /* Conteneur de référence pour les unités "cqw"/"cqh" ci-dessous : les
     polices ET les tailles (roue du talisman, bannière...) se calculent
     par rapport aux dimensions RÉELLES du livre affiché (mobile, desktop,
     plein écran paysage court...) au lieu de rem/vw fixes. Indispensable
     pour le plein écran paysage téléphone où la HAUTEUR est la ressource
     rare, pas la largeur. */
  container-type: size;
}

/* Zone page gauche = TALISMAN */
.zone-talisman {
  position: absolute;
  left: 13%;
  right: 54%;            /* fin de zone à 46% -> 100-46 = 54% depuis la droite */
  top: 14%;
  bottom: 17%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 0.8rem 0;
  gap: clamp(0.25rem, 1.6cqh, 0.6rem);
}

/* Zone page droite = RUNES */
.zone-runes {
  position: absolute;
  left: 52%;
  right: 15%;            /* 15% du bord droit ; fin à 85% */
  top: 14%;
  bottom: 17%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  overflow: hidden;
}

.zone-title {
  font-family: var(--font-display);
  font-size: clamp(0.8rem, 1.5cqw, 1.05rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--wood-dark);
  text-align: center;
  margin: 0;
}

.table-runique-img { max-width: 60%; border-radius: var(--radius-lg); }

.runes-carousel { position: relative; }
.runes-scroll-arrow { display: none; } /* uniquement visible en mobile, voir media query plus bas */

/* ---------- Talisman ---------- */

.talisman-frame {
  position: relative;
  width: min(100%, 380px, 42cqh);   /* borné aussi par la hauteur dispo : évite que la roue
                                        mange toute la hauteur en plein écran paysage court */
  aspect-ratio: 1 / 1;
}

.talisman-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 6px 12px rgba(46,31,20,0.3));
}

.slots { position: absolute; inset: 0; }

.slot {
  position: absolute;
  width: 22%;                 /* runes agrandies */
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slot img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.15s ease;
}

.slot:hover img { transform: scale(1.08); }
.slot.is-locked { cursor: not-allowed; }

/* ---------- Résultat combo ---------- */

.result-banner {
  width: 100%;
  max-width: 340px;
  min-height: clamp(1.8rem, 13cqh, 3.6rem);
  max-height: clamp(2.6rem, 25cqh, 4.8rem);   /* borne dure : le bouton Verrouiller garde
                                                  toujours sa place réservée en dessous */
  overflow-y: auto;                            /* filet de sécurité si le texte est très long */
  text-align: center;
  border-radius: var(--radius-md);
  padding: clamp(0.25rem, 1cqh, 0.4rem) 0.6rem;
  border: 1px solid transparent;
  background: transparent;
  opacity: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: opacity 0.25s ease;
}
.result-banner.visible { opacity: 1; }
.result-banner.visible.success { border-color: var(--success); color: var(--success); background: rgba(255,255,255,0.35); }
.result-banner.visible.fail { border-color: var(--fail); color: var(--fail); background: rgba(255,255,255,0.35); }
.result-title { font-family: var(--font-display); font-weight: 700; margin: 0 0 0.1rem; font-size: clamp(0.85rem, 1.4cqw, 1.3rem); line-height: 1.15; }
.result-text { margin: 0; font-style: italic; font-size: clamp(0.75rem, 1.25cqw, 1.05rem); color: var(--ink-soft); line-height: 1.2; }

/* ---------- Actions ---------- */

.talisman-actions { display: flex; align-items: center; gap: clamp(0.25rem, 0.88cqw, 0.6rem); flex-wrap: wrap; justify-content: center; }

.etat-badge {
  font-family: var(--font-display);
  font-size: clamp(0.55rem, 1.5cqw, 0.85rem);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--wood);
  border: 1px solid var(--wood);
  padding: clamp(0.12rem, 0.55cqh, 0.28rem) clamp(0.28rem, 0.9cqw, 0.55rem);
  border-radius: 999px;
}
.etat-badge.locked { color: var(--parchment); background: var(--wood-dark); border-color: var(--wood-dark); }

.btn-lock {
  font-family: var(--font-display);
  font-size: clamp(0.62rem, 1.7cqw, 0.95rem);
  color: var(--parchment);
  background: var(--wood);
  border: 1px solid var(--wood-dark);
  padding: clamp(0.24rem, 1.06cqh, 0.5rem) clamp(0.5rem, 1.6cqw, 1rem);
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--wood-dark);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.btn-lock:not(:disabled):hover { background: var(--wood-dark); transform: translateY(-1px); box-shadow: 0 4px 0 var(--wood-dark); }
.btn-lock:not(:disabled):active { transform: translateY(2px); box-shadow: 0 1px 0 var(--wood-dark); }
.btn-lock:disabled { background: var(--parchment-shadow); color: var(--ink-soft); box-shadow: none; cursor: not-allowed; opacity: 0.7; }

/* ---------- Liste des runes (3 par ligne) ---------- */

.runes-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);   /* 3 runes sur la même ligne */
  gap: 0.5rem;
  overflow-y: auto;
  align-content: start;
  padding-right: 4px;
}

.rune-card {
  position: relative;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  padding: 0.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  cursor: pointer;
}
.rune-card .rune-img-frame {
  position: relative;
  width: 90%;
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(107,74,48,0.28);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.rune-card:hover:not(.is-disabled) .rune-img-frame { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(200,150,10,0.3); }
.rune-card.is-selected .rune-img-frame { border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold); }
.rune-card.is-disabled { opacity: 0.4; cursor: not-allowed; filter: grayscale(0.6); }
.rune-card img { width: 88%; height: 88%; object-fit: contain; }
.rune-card .rune-qty {
  position: absolute; bottom: -6px; right: -6px;
  font-family: var(--font-display); font-size: clamp(0.58rem, 0.8cqw, 0.78rem); font-weight: 700;
  background: var(--wood-dark); color: var(--parchment);
  padding: 0.1rem 0.32rem; border-radius: 999px;
  border: 2px solid #fff;
}

.grimoire-hint { text-align: center; color: var(--ink-soft); font-size: 0.85rem; margin-top: 0.75rem; }

.fullscreen-toggle {
  position: fixed;
  bottom: 0.7rem;
  right: 0.7rem;
  z-index: 25;
  background: var(--wood-dark);
  color: var(--parchment);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(46,31,20,0.35);
  opacity: 0.9;
}
.fullscreen-toggle:hover { opacity: 1; }

.rotate-hint { display: none; }

body.fullscreen-mode .topbar { display: none; }

/* Plein écran : on GARDE le design desktop existant tel quel (fond livre,
   talisman à gauche, runes à droite, grille de runes normale) — on se
   contente de l'agrandir pour remplir l'écran, en respectant son ratio
   d'aspect fixe (1600:1100) façon "object-fit: contain" : jamais coupé,
   jamais déformé, que l'écran soit très large ou peu large. */
body.fullscreen-mode #tab-grimoire.container {
  padding: 0;
  max-width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
body.fullscreen-mode #tab-grimoire .page-header { display: none; }
body.fullscreen-mode #hint { display: none; }

body.fullscreen-mode .grimoire-stage {
  aspect-ratio: 1600 / 1100;
  background-image: url("../img/design/grimoire.webp");
  width: min(100vw, calc(100vh * 1600 / 1100));
  max-width: none;
  margin: 0;
  flex-shrink: 0;
}
body.fullscreen-mode .zone-talisman {
  position: absolute;
  left: 13%; right: 54%; top: 14%; bottom: 17%;
}
body.fullscreen-mode .zone-runes {
  position: absolute;
  left: 52%; right: 15%; top: 14%; bottom: 17%;
}

/* Si la rotation n'a pas pu être forcée (ex: iPhone), on invite l'utilisateur
   à tourner lui-même son téléphone plutôt que de rester en portrait serré. */
@media (max-width: 720px) and (orientation: portrait) {
  body.fullscreen-mode .rotate-hint {
    display: block;
    text-align: center;
    color: var(--wood);
    font-style: italic;
    font-size: 0.85rem;
    margin: 0.4rem 0 0.6rem;
  }
}

.rune-card { touch-action: none; }

.rune-drag-ghost {
  position: fixed;
  object-fit: contain;
  pointer-events: none;
  z-index: 100;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.5));
  opacity: 0.9;
}

/* Retour visuel de zone de dépôt volontairement retiré : le fantôme suivant
   le doigt/curseur suffit à indiquer où la rune va se placer. */

/* Repli mobile : on abandonne le fond image (zones trop petites),
   on empile talisman puis runes proprement. */
@media (max-width: 720px) {
  .grimoire-stage {
    aspect-ratio: auto;
    background-image: none;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-top: 0.4rem;
    container-type: inline-size;   /* plus de hauteur figée ici : on repasse en containment
                                       largeur seule, cqh n'aurait pas de sens sur du contenu
                                       à hauteur libre */
  }
  .zone-talisman, .zone-runes {
    position: static;
    inset: auto;
  }
  .zone-runes { max-height: none; }

  .talisman-frame {
    width: 100%;
    max-width: 380px;   /* pas de plafond cqh ici, la page défile normalement */
  }

  /* Un peu moins d'espace entre la nav, "Mon Grimoire" et le talisman —
     le reste (bannière résultat, boutons) garde ses distances actuelles. */
  #tab-grimoire.container { padding-top: 1rem; }
  #tab-grimoire .page-subtitle { margin-bottom: 0.75rem; }

  .table-runique-img { max-width: 90%; }

  /* Inventaire de runes : carrousel scrollable horizontalement au lieu
     d'une grille empilée — exactement 3 runes visibles, flèche de chaque côté. */
  .runes-list {
    display: flex;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    gap: 0.6rem;
    padding: 0.2rem 2.4rem 0.4rem;
    scrollbar-width: none;      /* Firefox */
  }
  .runes-list::-webkit-scrollbar { display: none; }  /* Chrome/Safari/Android */
  .runes-list .rune-card {
    flex: 0 0 calc((100% - 1.2rem) / 3);   /* 3 cartes visibles (2 gaps de 0.6rem) */
    scroll-snap-align: start;
  }
  .runes-carousel { position: relative; }
  .runes-scroll-arrow {
    display: flex;
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    width: 34px;
    height: 34px;
    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;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(46,31,20,0.25);
    cursor: pointer;
    z-index: 2;
  }
  .runes-scroll-arrow.next { right: 0; }
  .runes-scroll-arrow.prev { left: 0; }
}