/* ═══════════════════════════════════════════════════════════
   SoulsGuides — Compatibilidad Safari / iOS
   ═══════════════════════════════════════════════════════════
   Hoja de degradación para navegadores que no soportan
   features CSS modernas (color-mix(), etc.).

   Reglas:
   · Se carga SIEMPRE la última (después del CSS de página).
   · Todo el bloque va dentro de @supports not (...), así que los
     navegadores modernos NO aplican ninguna de estas reglas.
   · Los fallbacks usan las mismas variables de tema (--game-*,
     --bg2, --bg3...) para que el color del juego se conserve.

   Solo afecta a Safari/iOS < 16.2 (color-mix) y navegadores
   similares. No cambia nada para el resto de visitantes.
   ═══════════════════════════════════════════════════════════ */

@supports not (background: color-mix(in srgb, red, blue)) {

  /* ── BLOG — Portada C ──
     El <em> del h1 es transparente con contorno; sin color-mix
     el contorno desaparece y el texto quedaría INVISIBLE. */
  .sgp-cover h1 em {
    color: var(--game-start, #c4a35a);
    -webkit-text-stroke-color: var(--game-start, #c4a35a);
  }
  .sgp-cover h1 {
    text-shadow: 0 4px 40px rgba(0, 0, 0, .8);
  }
  .sgp-cover .veil {
    background:
      linear-gradient(0deg, var(--bg, #0a0908) 10%, rgba(0, 0, 0, .42) 55%, rgba(0, 0, 0, .14) 100%);
  }
  .sgp-cover .crumbs a:hover { color: var(--game-end, #e0c078); }
  .sgp-cover .crumbs .sep { color: var(--game-mid, #8a6f35); }
  .sgp-cover .kcat { color: var(--game-end, #e0c078); }
  .sgp-cover .meta {
    border-color: rgba(196, 163, 90, .34);
    background: rgba(10, 9, 8, .86);
  }
  .sgp-cover .meta span + span { border-left-color: rgba(196, 163, 90, .18); }
  .sgp-cover .orn::after {
    background: linear-gradient(270deg, transparent, rgba(196, 163, 90, .55));
  }
  .sgp-shell ::selection {
    background: rgba(196, 163, 90, .45);
  }

  /* ── BLOG — TOC y tarjetas ── */
  .sgp-toc {
    border-color: rgba(196, 163, 90, .16);
    background: linear-gradient(170deg, var(--bg2, #12100c), var(--bg, #0a0908));
  }
  .sgp-toc-h { border-bottom-color: rgba(196, 163, 90, .18); }
  .sgp-toc a .n { color: var(--game-start, #c4a35a); }
  .sgp-gcard {
    border-color: rgba(196, 163, 90, .22);
    background: linear-gradient(160deg, var(--bg2, #12100c), var(--bg, #0a0908));
  }

  /* ── BLOG — Cuerpo de lectura ── */
  .sgp-body .lede { color: #e6ddc8; }
  .sgp-body h2 {
    color: #f4efe2;
    border-bottom-color: rgba(196, 163, 90, .26);
  }
  .sgp-body h3 { color: #e6ddc8; }
  .sgp-body a {
    color: var(--game-start, #c4a35a);
    border-bottom-color: rgba(196, 163, 90, .42);
  }
  .sgp-body a:hover {
    color: var(--game-end, #e0c078);
    background: rgba(196, 163, 90, .14);
  }
  .sgp-body iframe,
  .sgp-body .post-video-facade {
    border-color: rgba(196, 163, 90, .24);
  }

  /* ── BLOG — Catálogo Cron ── */
  .cron-command { border-bottom-color: rgba(196, 163, 90, .16); }
  .cron-plate-cat { border-color: rgba(196, 163, 90, .2); }

  /* ── GUÍAS UNIFICADAS ── */
  .guia-chapter { background: var(--bg2); }
  .guia-fallback-box { background: var(--bg2); }
  .guia-tooltip { background: var(--bg3); }

  /* ── BUSCADOR GLOBAL ── */
  .sg-search-panel { background: rgba(16, 19, 24, .96); }

  /* ── CHAT ── */
  .sg-chat__fab { border-color: var(--sg-chat-accent); }
  .sg-chat__panel { border-color: rgba(196, 163, 90, .24); }
  .sg-chat__thread:hover,
  .sg-chat__thread.active {
    border-color: rgba(196, 163, 90, .32);
    background: rgba(196, 163, 90, .1);
  }

  /* ── BUILD CALC (barras de atributo) ── */
  .abar.magic i { background: var(--fx-magic); }
  .abar.fire  i { background: var(--fx-fire); }
  .abar.lght  i { background: var(--fx-lght); }
  .abar.holy  i { background: var(--fx-holy); }
  .abar.def   i { background: var(--amber); }
}