/**
 * Forja do Mago — Smart Conversions
 * Fase 5 · Parte 2: Lore UI — Mobile-First Gamification Layer (PREMIUM EPIC EDITION)
 *
 * @version 5.3.0
 */

/* ─────────────────────────────────────────────────────────────────────────
   VARIÁVEIS GLOBAIS
───────────────────────────────────────────────────────────────────────── */
:root {
  --forja-seal-size:        52px;
  --forja-sheet-radius:     24px; /* Mais arredondado para visual premium */
  --forja-overlay-bg:       rgba(0, 0, 0, 0.75); /* Mais escuro para imersão */
  --forja-sheet-bg:         rgba(15, 15, 20, 0.95); /* Dark Glassmorphism */
  
  /* ALTURA ALTERADA PARA 70% DA TELA */
  --forja-sheet-height:     70vh; 
  
  --forja-sheet-min-height: 400px;
  --forja-group-color:      #d4af37; /* Dourado padrão épico */
  --forja-transition-sheet: 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  --forja-transition-seal:  0.28s ease-out;
  --forja-z-seal:           20;
  --forja-z-overlay:        9000;
  --forja-z-sheet:          9001;
  --forja-z-badge:          9900;
}

/* ═════════════════════════════════════════════════════════════════════════
   1. SELO FLUTUANTE
═════════════════════════════════════════════════════════════════════════ */
.forja-lore-anchor { position: relative; }

.forja-lore-seal {
  z-index:          var(--forja-z-seal);
  display:          flex;
  flex-direction:   column;
  align-items:      center;
  justify-content:  center;
  gap:              4px;
  width:            var(--forja-seal-size);
  height:           var(--forja-seal-size);
  border-radius:    50%;
  background:       var(--forja-group-color);
  color:            #fff;
  cursor:           pointer;
  box-shadow:       0 4px 16px rgba(0,0,0,0.4), 0 0 0 2px rgba(255,255,255,0.2);
  border:           2px solid rgba(255,255,255,0.8);
  padding:          0;
  margin:           0;
  box-sizing:       border-box;
  -webkit-tap-highlight-color: transparent;
  user-select:      none;
  transition:       transform var(--forja-transition-seal), opacity var(--forja-transition-seal), box-shadow 0.2s ease;
}

.forja-lore-seal.forja-lore-seal--visible {
  transform: scale(1);
  opacity:   1;
  animation: forja-seal-pulse 1.5s ease-in-out 3;
}

.forja-lore-seal:hover,
.forja-lore-seal:focus-visible {
  box-shadow: 0 6px 20px rgba(0,0,0,0.6), 0 0 0 4px rgba(255,255,255,0.4);
  outline: none;
}

.forja-lore-seal:active { transform: scale(0.92); }

.forja-lore-seal__icon { font-size: 22px; line-height: 1; pointer-events: none; }

.forja-lore-seal__tooltip {
  position:       absolute;
  bottom:         calc(100% + 8px);
  right:          0;
  background:     rgba(0,0,0,0.9);
  color:          var(--forja-group-color);
  font-size:      12px;
  font-weight:    700;
  white-space:    nowrap;
  padding:        6px 12px;
  border-radius:  6px;
  pointer-events: none;
  opacity:        0;
  transform:      translateY(4px);
  transition:     opacity 0.18s ease, transform 0.18s ease;
  letter-spacing: 0.5px;
  border:         1px solid rgba(255,255,255,0.1);
}

.forja-lore-seal:hover .forja-lore-seal__tooltip,
.forja-lore-seal:focus-visible .forja-lore-seal__tooltip {
  opacity: 1; transform: translateY(0);
}

@keyframes forja-seal-pulse {
  0%, 100% { transform: scale(1);    box-shadow: 0 4px 16px rgba(0,0,0,0.4), 0 0 0 2px rgba(255,255,255,0.2); }
  50%       { transform: scale(1.1); box-shadow: 0 6px 24px rgba(0,0,0,0.6), 0 0 0 5px rgba(255,255,255,0.4);  }
}

/* ═════════════════════════════════════════════════════════════════════════
   2. OVERLAY
═════════════════════════════════════════════════════════════════════════ */
.forja-lore-overlay {
  position:   fixed;
  inset:      0;
  z-index:    var(--forja-z-overlay);
  background: var(--forja-overlay-bg);
  opacity:    0;
  transition: opacity var(--forja-transition-sheet);
  pointer-events: none;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter:          blur(4px);
}
.forja-lore-overlay--visible { opacity: 1; pointer-events: all; }

/* ═════════════════════════════════════════════════════════════════════════
   3. BOTTOM SHEET (EPIC DARK THEME)
═════════════════════════════════════════════════════════════════════════ */
.forja-lore-sheet {
  position:      fixed;
  bottom:        0;
  left:          0;
  right:         0;
  z-index:       var(--forja-z-sheet);
  height:        var(--forja-sheet-height);
  min-height:    var(--forja-sheet-min-height);
  max-height:    88vh;
  background:    var(--forja-sheet-bg);
  border-radius: var(--forja-sheet-radius) var(--forja-sheet-radius) 0 0;
  
  /* Borda superior de energia/cor do grupo */
  border-top:    2px solid var(--forja-group-color);
  box-shadow:    0 -10px 50px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.1);
  
  /* Glassmorphism */
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter:         blur(15px);
  
  display:       flex;
  flex-direction: column;
  overflow:      hidden;
  transform:     translateY(100%);
  transition:    transform var(--forja-transition-sheet);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.forja-lore-sheet--open { transform: translateY(0); }

/* ── Drag Handle ── */
.forja-lore-sheet__handle {
  flex-shrink: 0; display: flex; justify-content: center; padding: 14px 0 8px; cursor: grab; touch-action: none;
}
.forja-lore-sheet__handle::before {
  content: ''; display: block; width: 40px; height: 5px; background: rgba(255,255,255,0.2); border-radius: 3px;
}

/* ── Cabeçalho ── */
.forja-lore-sheet__header {
  flex-shrink: 0; display: flex; align-items: center; gap: 12px; padding: 4px 24px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.forja-lore-sheet__group-icon { font-size: 26px; line-height: 1; flex-shrink: 0; filter: drop-shadow(0 0 8px rgba(255,255,255,0.2)); }
.forja-lore-sheet__title {
  flex: 1; font-size: 17px; font-weight: 800; color: #f0f0f0; line-height: 1.3; margin: 0; text-transform: uppercase; letter-spacing: 0.5px;
}
.forja-lore-sheet__title span { color: var(--forja-group-color); text-shadow: 0 0 15px var(--forja-group-color); }

/* Botão Fechar */
.forja-lore-sheet__close {
  flex-shrink: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.05); border-radius: 50%;
  cursor: pointer; font-size: 16px; color: #ccc; transition: all 0.2s; -webkit-tap-highlight-color: transparent; padding: 0;
}
.forja-lore-sheet__close:hover  { background: rgba(255,255,255,0.15); color: #fff; transform: rotate(90deg); }
.forja-lore-sheet__close:active { transform: scale(0.9); }

/* ── Barra de Progresso Temática ── */
.forja-lore-sheet__progress { flex-shrink: 0; padding: 16px 24px 0; }
.forja-lore-sheet__progress-label {
  font-size: 13px; color: #a0a0a0; font-weight: 600; margin-bottom: 8px; display: flex; align-items: center; justify-content: space-between; text-transform: uppercase; letter-spacing: 1px;
}
.forja-lore-sheet__progress-label strong { color: var(--forja-group-color); font-size: 14px; font-weight: 800; }
.forja-lore-sheet__progress-track { height: 6px; background: rgba(0,0,0,0.5); border-radius: 3px; overflow: hidden; box-shadow: inset 0 1px 3px rgba(0,0,0,0.8); }
.forja-lore-sheet__progress-fill {
  height: 100%; border-radius: 3px; background: var(--forja-group-color); width: var(--forja-progress-pct, 0%);
  transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1); box-shadow: 0 0 10px var(--forja-group-color);
}
.forja-lore-sheet__stars { display: flex; gap: 8px; margin-top: 10px; }
.forja-lore-sheet__star { font-size: 15px; opacity: 0.15; transition: opacity 0.3s, transform 0.3s; filter: grayscale(1); }
.forja-lore-sheet__star--earned { opacity: 1; filter: grayscale(0) drop-shadow(0 0 5px rgba(255,215,0,0.5)); animation: forja-star-pop 0.5s ease-out; }

/* ── Corpo / Conteúdo da Lore ── */
/* ── Corpo / Conteúdo da Lore ── */
.forja-lore-sheet__body {
  flex: 1; 
  overflow-y: auto; 
  /* ESPAÇAMENTO DE SEGURANÇA AUMENTADO PARA O PLAYER (130px de respiro no final) */
  padding: 24px 24px 130px; 
  -webkit-overflow-scrolling: touch; 
  overscroll-behavior: contain; 
  /* O position: relative foi removido daqui para o player colar na tela! */
}

/* Scroll customizado Dark Mode */
.forja-lore-sheet__body::-webkit-scrollbar { width: 6px; }
.forja-lore-sheet__body::-webkit-scrollbar-track  { background: rgba(0,0,0,0.2); }
.forja-lore-sheet__body::-webkit-scrollbar-thumb  { background: rgba(255,255,255,0.15); border-radius: 3px; }
.forja-lore-sheet__body::-webkit-scrollbar-thumb:hover { background: var(--forja-group-color); }

/* Texto da lore */
.forja-lore-content {
  font-size: 16px; line-height: 1.8; color: #d1d5db; opacity: 0; transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.5s ease; text-align: justify; letter-spacing: 0.2px;
}
.forja-lore-content p { margin-bottom: 1.2em; }
.forja-lore-content strong { color: #fff; font-weight: 700; }
.forja-lore-content--visible { opacity: 1; transform: translateY(0); }

/* Spinner do texto */
.forja-lore-spinner { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 40px 0; color: var(--forja-group-color); font-size: 14px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; }
.forja-lore-spinner__ring { width: 40px; height: 40px; border: 3px solid rgba(255,255,255,0.05); border-top-color: var(--forja-group-color); border-radius: 50%; animation: forja-spin 0.8s linear infinite; }

.forja-lore-error { text-align: center; padding: 20px; color: #ff4b4b; font-size: 15px; font-weight: 600; background: rgba(255,75,75,0.1); border-radius: 8px; border: 1px solid rgba(255,75,75,0.3); }

/* ═════════════════════════════════════════════════════════════════════════
   6. PLAYER DE NARRAÇÃO ÉPICA (TTS) FLUTUANTE NO RODAPÉ
═════════════════════════════════════════════════════════════════════════ */
.forja-audio-player {
  display:       none;
  /* FLUTUANTE E FIXO NO RODAPÉ DO SHEET */
  position:      absolute;
  bottom:        24px;
  left:          24px;
  right:         24px;
  width:         calc(100% - 48px);
  z-index:       100;

  /* Estética Glassmorphism Premium */
  background:    rgba(20, 20, 28, 0.85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter:         blur(12px);
  border:        1px solid rgba(255, 255, 255, 0.1);
  border-left:   3px solid var(--forja-group-color); /* Detalhe épico */
  border-radius: 16px;
  padding:       12px 16px;
  box-shadow:    0 10px 30px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255,255,255,0.02) inset;

  animation:     forja-audio-float-up 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes forja-audio-float-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0);   }
}

.forja-audio-player__header { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.forja-audio-player__icon { font-size: 20px; line-height: 1; filter: drop-shadow(0 0 5px rgba(212,175,55,0.4)); }
.forja-audio-player__label { flex: 1; font-size: 13px; font-weight: 800; color: #f3f4f6; letter-spacing: 0.5px; text-transform: uppercase; }

.forja-audio-player__badge {
  font-size: 10px; font-weight: 800; letter-spacing: 1px; color: #fff;
  background: linear-gradient(135deg, var(--forja-group-color), #b8860b);
  border-radius: 4px; padding: 3px 6px; box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}

/* Spinner do Áudio */
.forja-audio-player__spinner { display: none; }
.forja-audio-player--loading .forja-audio-player__spinner { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 0; }
.forja-audio-spinner__ring { width: 24px; height: 24px; border: 2px solid rgba(255,255,255,0.1); border-top-color: var(--forja-group-color); border-radius: 50%; animation: forja-spin 0.7s linear infinite; }
.forja-audio-spinner__text { font-size: 12px; color: #9ca3af; letter-spacing: 0.5px; text-transform: uppercase; font-weight: 600; }
.forja-audio-player--loading .forja-audio-spinner__text { animation: forja-audio-text-pulse 1.5s infinite; }

@keyframes forja-audio-text-pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; color: var(--forja-group-color); } }

/* Player Control Nativo (Customizado para Escuro) */
.forja-audio-player__control { display: none; }
.forja-audio-player--ready .forja-audio-player__control {
  display: block; width: 100%; height: 40px; border-radius: 8px; outline: none; border: none; accent-color: var(--forja-group-color);
}
.forja-audio-player--ready .forja-audio-player__control::-webkit-media-controls-panel {
  background: rgba(0,0,0,0.4); border-radius: 8px; border: 1px solid rgba(255,255,255,0.05);
}
.forja-audio-player--ready .forja-audio-player__control::-webkit-media-controls-play-button,
.forja-audio-player--ready .forja-audio-player__control::-webkit-media-controls-current-time-display,
.forja-audio-player--ready .forja-audio-player__control::-webkit-media-controls-time-remaining-display {
  color: #fff; filter: invert(1); /* Hack Webkit para forçar botões brancos no player escuro */
}

.forja-audio-player__footer { margin-top: 8px; font-size: 10px; color: #6b7280; text-align: center; letter-spacing: 0.5px; text-transform: uppercase; }

/* ═════════════════════════════════════════════════════════════════════════
   7. BADGE E TOASTS (Mantidos, mas adaptados ao Dark Theme)
═════════════════════════════════════════════════════════════════════════ */
.forja-lore-toast {
  position: fixed; bottom: calc(var(--forja-sheet-height) + 20px); left: 50%; transform: translateX(-50%) translateY(10px);
  background: rgba(10, 10, 15, 0.95); border: 1px solid var(--forja-group-color); color: #fff; font-size: 14px; font-weight: 700;
  padding: 12px 24px; border-radius: 30px; white-space: nowrap; z-index: var(--forja-z-sheet); opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: none; box-shadow: 0 10px 25px rgba(0,0,0,0.5);
}
.forja-lore-toast--visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* (O restante das animações da Badge permanecem iguais pois já eram modais isolados) */
.forja-lore-badge-overlay {
  position: fixed; inset: 0; z-index: var(--forja-z-badge); display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.85); backdrop-filter: blur(8px); opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
.forja-lore-badge-overlay--visible { opacity: 1; pointer-events: all; }
.forja-lore-badge-card {
  background: linear-gradient(145deg, #1a1a24, #0f0f14); border: 1px solid var(--forja-group-color); border-radius: 24px;
  padding: 40px; text-align: center; max-width: 340px; width: calc(100% - 48px);
  box-shadow: 0 20px 80px rgba(0,0,0,0.8); transform: scale(0.8) translateY(30px); opacity: 0;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease; color: #fff;
}
.forja-lore-badge-overlay--visible .forja-lore-badge-card { transform: scale(1) translateY(0); opacity: 1; animation: forja-badge-glow 2s infinite; }
.forja-lore-badge-card__icon { font-size: 64px; line-height: 1; display: block; margin-bottom: 16px; animation: forja-badge-icon-bounce 0.6s ease-out 0.2s both; }
.forja-lore-badge-card__title { font-size: 14px; color: #9ca3af; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 8px; }
.forja-lore-badge-card__name { font-size: 24px; font-weight: 900; color: var(--forja-group-color); margin-bottom: 12px; line-height: 1.2; text-shadow: 0 0 10px rgba(212,175,55,0.4); }
.forja-lore-badge-card__desc { font-size: 15px; color: #d1d5db; line-height: 1.6; margin-bottom: 24px; }
.forja-lore-badge-card__bonus { display: inline-flex; align-items: center; gap: 8px; background: rgba(212,175,55,0.15); border: 1px solid rgba(212,175,55,0.3); color: #d4af37; font-size: 13px; font-weight: 700; padding: 8px 16px; border-radius: 20px; margin-bottom: 24px; box-shadow: 0 0 15px rgba(212,175,55,0.1); }
.forja-lore-badge-card__close { display: block; width: 100%; padding: 14px; background: var(--forja-group-color); color: #000; border: none; border-radius: 12px; font-size: 16px; font-weight: 800; cursor: pointer; transition: all 0.2s; text-transform: uppercase; letter-spacing: 1px; }
.forja-lore-badge-card__close:hover { filter: brightness(1.2); box-shadow: 0 0 20px rgba(212,175,55,0.4); }
.forja-lore-badge-card__close:active { transform: scale(0.96); }

@keyframes forja-badge-glow {
  0%, 100% { box-shadow: 0 20px 80px rgba(0,0,0,0.8), 0 0 0 0 rgba(212,175,55,0);   }
  50%       { box-shadow: 0 20px 80px rgba(0,0,0,0.8), 0 0 0 8px rgba(212,175,55,0.15); }
}
@keyframes forja-badge-icon-bounce { 0% { transform: scale(0) rotate(-10deg); } 70% { transform: scale(1.2) rotate(5deg); } 100% { transform: scale(1) rotate(0deg); } }
@keyframes forja-spin { to { transform: rotate(360deg); } }

/* ═════════════════════════════════════════════════════════════════════════
   8. RESPONSIVIDADE DESKTOP
═════════════════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
  .forja-lore-sheet {
    left: 50%; right: auto; transform: translateX(-50%) translateY(100%);
    width: 520px; /* Levemente mais largo para desktop */
    border-radius: var(--forja-sheet-radius); bottom: 40px;
    height: 75vh; /* Um pouco maior no desktop */
    border: 1px solid rgba(255,255,255,0.1);
    border-top: 3px solid var(--forja-group-color);
  }
  .forja-lore-sheet--open { transform: translateX(-50%) translateY(0); }
  .forja-lore-toast { bottom: 80px; }
}