/* =====================================================================
   SIDE-FLYOUT.CSS — Panneau qui s'ouvre À CÔTÉ d'un bouton du menu de
   gauche (Quêtes, Cadeaux, Missions, Événements).

   Différence avec la fenêtre de profil : ici il n'y a PAS de fond sombre.
   Le panneau se pose sur la page, à droite du bouton cliqué, et le reste
   du jeu reste visible et utilisable.

   La bordure est la même que celle des boutons du menu (fin liseré or,
   coins coupés, fond sombre), pour que bouton et panneau fassent un tout.

   Structure HTML : voir <div class="side-flyout"> dans index.html.
   Rempli et positionné par js/side-flyout.js.
   ===================================================================== */


/* ---------------------------------------------------------------------
   0. SPRITE D'ICÔNES (caché) — sert de "bibliothèque" pour <use href="#sf-...">
   --------------------------------------------------------------------- */
.sf-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Contour sombre des icônes. IMPORTANT : cette règle vise l'icône dans le
   sprite lui-même (.sf-defs), pas là où elle est affichée : c'est comme ça
   que fonctionne <use> en SVG. */
.sf-defs .ol {
  stroke: var(--void, #090811);
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}


/* ---------------------------------------------------------------------
   1. CONTENEUR (positionné en JS : left, top, et --sf-gem-y)
   --------------------------------------------------------------------- */
.side-flyout {
  --sf-gem-y: 40px;         /* hauteur de la gemme et du trait de liaison (posée en JS) */
  position: absolute;
  z-index: 13;              /* au-dessus du menu (12) et de la bulle de dialogue (10) */
  left: 114px;
  top: 172px;
  width: 340px;
  animation: sf-slide-in 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.side-flyout[hidden] {
  display: none;
}

@keyframes sf-slide-in {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Petit trait qui relie le bouton au panneau */
.side-flyout-link {
  position: absolute;
  left: -12px;
  top: var(--sf-gem-y);
  width: 12px;
  height: 1px;
  background: linear-gradient(90deg, rgba(216, 168, 62, 0.2), var(--gold, #d8a83e));
}

/* Gemme dorée au bord du panneau, à hauteur du bouton (même détail que la
   bulle de dialogue) */
.side-flyout-gem {
  position: absolute;
  left: -6px;
  top: var(--sf-gem-y);
  z-index: 2;
  width: 11px;
  height: 11px;
  margin-top: -5px;
  transform: rotate(45deg);
  background: linear-gradient(135deg, #fff1b8 0%, var(--gold, #d8a83e) 55%, #a8741f 100%);
  border: 1.5px solid var(--void, #090811);
  box-shadow: 0 0 8px rgba(216, 168, 62, 0.5);
}


/* ---------------------------------------------------------------------
   2. LE PANNEAU — même bordure que .side-btn (liseré or, coins coupés)
   --------------------------------------------------------------------- */
.side-flyout-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  max-height: 556px;        /* au-delà, le contenu défile à l'intérieur */
  background: linear-gradient(160deg, rgba(24, 14, 46, 0.99) 0%, rgba(10, 8, 20, 0.99) 100%);
  /* Petit flou de ce qu'il y a derrière : évite qu'un texte du jeu (une carte
     d'événement, par exemple) ne "transparaisse" derrière le panneau */
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(216, 168, 62, 0.55);
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

/* Liseré intérieur, comme sur les boutons */
.side-flyout-panel::before {
  content: "";
  position: absolute;
  inset: 2px;
  border: 1px solid rgba(216, 168, 62, 0.18);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
  pointer-events: none;
}


/* ---------------------------------------------------------------------
   3. EN-TÊTE (icône + titre + croix)
   --------------------------------------------------------------------- */
.sf-header {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px 8px;
}

.sf-header-icon {
  flex: none;
  width: 22px;
  height: 22px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7));
}

.sf-title {
  flex: 1;
  margin: 0;
  font-family: "Cinzel", serif;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--gold-light, #ffe18a);
  text-shadow: 0 0 10px rgba(216, 168, 62, 0.35);
}

.sf-close {
  flex: none;
  width: 24px;
  height: 24px;
  padding: 5px;
  display: grid;
  place-items: center;
  color: var(--muted, #b8aabf);
  background: transparent;
  border: 1px solid rgba(216, 168, 62, 0.35);
  border-radius: 50%;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.sf-close svg {
  width: 100%;
  height: 100%;
}

.sf-close:hover {
  color: var(--gold-light, #ffe18a);
  border-color: var(--gold-light, #ffe18a);
}


/* ---------------------------------------------------------------------
   4. CORPS (zone défilable)
   --------------------------------------------------------------------- */
.sf-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 2px 16px 12px;
  /* Barre de défilement fine et dorée */
  scrollbar-width: thin;
  scrollbar-color: rgba(216, 168, 62, 0.5) transparent;
}

.sf-body::-webkit-scrollbar {
  width: 6px;
}

.sf-body::-webkit-scrollbar-thumb {
  background: rgba(216, 168, 62, 0.5);
  border-radius: 3px;
}

/* Message des panneaux pas encore remplis */
.sf-empty {
  margin: 10px 0 6px;
  text-align: center;
  font-size: 12px;
  color: var(--muted, #b8aabf);
}


/* ---------------------------------------------------------------------
   5. QUÊTES — bandeau de renouvellement
   --------------------------------------------------------------------- */
.sf-reset {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  padding: 8px 14px;
  background: linear-gradient(90deg, rgba(245, 207, 76, 0.12), rgba(245, 207, 76, 0.03));
  border: 1px solid rgba(245, 207, 76, 0.5);
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
}

/* Petit point jaune lumineux (qui pulse doucement) */
.sf-reset-dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--banana, #f5cf4c);
  box-shadow: 0 0 8px 2px rgba(245, 207, 76, 0.7);
  animation: sf-dot-pulse 2.4s ease-in-out infinite;
}

@keyframes sf-dot-pulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}

.sf-reset-main {
  font-family: "Cinzel", serif;
  font-size: 13px;
  font-weight: 800;
  color: var(--banana, #f5cf4c);
}

.sf-reset-sub {
  margin-top: 2px;
  font-size: 10px;
  color: var(--banana, #f5cf4c);
  opacity: 0.85;
}

.sf-reset-sub i {
  opacity: 0.8;
}


/* ---------------------------------------------------------------------
   6. QUÊTES — liste et cartes
   --------------------------------------------------------------------- */
.sf-quests {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 7px;
}

.sf-quest {
  /* Couleur du type de quête (surchargée plus bas) */
  --q-accent: #8fb4ff;

  position: relative;
  padding: 7px 12px 6px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}

/* Filet coloré en haut de la carte (couleur du type de quête) */
.sf-quest::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 70%;
  height: 2px;
  background: linear-gradient(90deg, var(--q-accent), transparent);
}

.sf-quest.is-rotative {
  --q-accent: #c9a0ff;
}

/* Quête terminée : la carte passe au vert */
.sf-quest.is-done {
  --q-accent: #3ddc84;
  background: linear-gradient(160deg, rgba(40, 150, 90, 0.16), rgba(0, 0, 0, 0.3));
  border-color: rgba(61, 220, 132, 0.55);
}

.sf-quest-top {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.sf-quest-icon {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
}

.sf-quest-title {
  flex: 1;
  min-width: 0;
  font-family: "Cinzel", serif;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--cream, #f5ead5);
}

/* Pastille "FIXE" / "ROTATIVE" */
.sf-quest-badge {
  flex: none;
  padding: 2px 8px;
  border-radius: 8px;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--q-accent);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--q-accent);
}

.sf-quest.is-done .sf-quest-badge {
  color: #8fb4ff;
  border-color: rgba(143, 180, 255, 0.6);
}

.sf-quest.is-done.is-rotative .sf-quest-badge {
  color: #c9a0ff;
  border-color: rgba(201, 160, 255, 0.6);
}

.sf-quest-desc {
  margin: 2px 0 6px;
  font-size: 10.5px;
  line-height: 1.3;
  color: var(--muted, #b8aabf);
}

/* Barre de progression */
.sf-progress {
  height: 8px;
  overflow: hidden;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.sf-progress span {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, #f5cf4c, #ffb020);
  box-shadow: 0 0 8px rgba(245, 207, 76, 0.4);
  transition: width 0.5s ease;
}

.sf-quest.is-done .sf-progress span {
  background: linear-gradient(90deg, #2fcf7a, #5cf0a0);
  box-shadow: 0 0 8px rgba(61, 220, 132, 0.45);
}

/* Ligne du bas : compteur à gauche, récompense (ou "Validé") à droite */
.sf-quest-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
  min-height: 16px;
}

.sf-quest-count {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--muted, #b8aabf);
  font-variant-numeric: tabular-nums;
}

.sf-quest-reward {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 800;
  color: var(--gold-light, #ffe18a);
}

.sf-quest-reward svg {
  width: 15px;
  height: 15px;
}

/* Pastille verte "Validé" */
.sf-quest-valid {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1px 10px 1px 8px;
  border-radius: 10px;
  font-size: 10.5px;
  font-weight: 800;
  color: #06251a;
  background: linear-gradient(180deg, #5cf0a0, #2fcf7a);
  box-shadow: 0 0 8px rgba(61, 220, 132, 0.4);
}

.sf-quest-valid svg {
  width: 11px;
  height: 11px;
}


/* ---------------------------------------------------------------------
   7. ACCESSIBILITÉ
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .side-flyout,
  .sf-reset-dot {
    animation: none;
  }

  .sf-progress span {
    transition: none;
  }
}