/* La Saga - Extension of El Códice System */
@import url('/assets/codice.css');

/* ========================================================
   GEOMETRÍA CANÓNICA OFICIAL 2:3 (ALUEN WORLD)
   Estándar Definitivo para La Saga: Proporción 2:3 y Radio 5.89%
   ======================================================== */
:root {
  --aluen-card-ratio: 2 / 3 !important;
  --aluen-card-radius: 5.89% / 3.93% !important;
}

.codice-grid .codice-card,
.codice-card,
.force-portal {
  aspect-ratio: 2 / 3 !important;
  border-radius: 5.89% / 3.93% !important;
}

.force-portal__body,
.codice-card__body,
.force-portal__halo,
.locked-card-backdrop {
  border-radius: 5.89% / 3.93% !important;
}

/* Ensure 3-column grid for La Saga on desktop */
.codice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(1rem, 2vw, 1.6rem) !important;
  perspective: 120rem;
  width: 100%;
}

@media (max-width: 1024px) {
  .codice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .codice-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Ensure all cards take full cell width */
.codice-grid .codice-card {
  width: 100% !important;
}

/* Card Header: Top-Left Code and Top-Right Status */
.codice-card-head {
  align-self: start;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  position: relative;
  z-index: 5;
  transform: translateZ(1.25rem);
}

.codice-card-head .codice-card-index {
  align-self: auto;
  color: rgba(230, 168, 196, 0.72);
  font-family: "Cinzel", serif;
  font-size: 3.2cqi;
  letter-spacing: 0.18em;
  font-weight: 400;
}

.codice-card-status {
  display: inline-flex;
  align-items: center;
  gap: 1.2cqi;
  padding: 0.5cqi 1.8cqi;
  border: 1px solid rgba(230, 168, 196, 0.28);
  border-radius: 999px;
  background: rgba(230, 168, 196, 0.07);
  color: rgba(230, 168, 196, 0.85);
  font-family: "Cinzel", serif;
  font-size: 2.5cqi;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
  box-shadow: 0 0 10px rgba(230, 168, 196, 0.08);
}

.codice-card-status-dot {
  display: inline-block;
  width: 1.1cqi;
  height: 1.1cqi;
  border-radius: 50%;
  background: var(--rosa, #e6a8c4);
  box-shadow: 0 0 6px rgba(230, 168, 196, 0.9);
  animation: statusPulse 2.8s ease-in-out infinite;
}

@keyframes statusPulse {
  0%, 100% {
    opacity: 0.45;
    transform: scale(0.85);
  }
  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}

/* Card Content & Title: Zero empty gap, tight and proportional matching El Códice */
.codice-card .codice-card-content {
  align-self: end !important;
  margin-bottom: 3.8cqi !important;
}

.codice-card .codice-card-title {
  min-height: 0 !important;
  margin: 0 0 2.2cqi !important;
  line-height: 1.18 !important;
}

/* Active Saga Card (Saga I: El Eco del Tiempo) in Root View */
.codice-card--saga-active .codice-card__body {
  background: url('/assets/codice/reverso-aluen.jpg') center/cover no-repeat !important;
  opacity: 1 !important;
  filter: none !important;
}

/* ========================================================
   PORTADA OFICIAL DEL LIBRO: TOMO I NEVERMORE
   Máxima resolución nativa (2560×3840), espacio 100% limpio,
   cero información sobrante, con firma y títulos oficiales
   ======================================================== */
.codice-card--book-cover .codice-card__body {
  background: url('/assets/portada_nevermore.webp') center center / cover no-repeat !important;
  opacity: 1 !important;
  filter: none !important;
  display: block !important;
  padding: 0 !important;
  position: absolute !important;
  inset: 0 !important;
}

.codice-card--book-cover .force-portal__grain {
  display: none !important;
}

/* Crédito de Autor: "by Mau Morval" Centrado Superior */
.cover-author-credit {
  position: absolute;
  top: 8.5cqi;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  z-index: 10;
  pointer-events: none;
}

.author-credit-text {
  font-family: "Cinzel", serif;
  font-size: clamp(0.58rem, 2.6cqi, 0.74rem);
  letter-spacing: 0.22em;
  margin-right: -0.22em;
  color: rgba(228, 231, 239, 0.85);
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.9), 0 2px 8px rgba(0, 0, 0, 0.95);
}

/* Bloque Central Inferior: Título y Subtítulo en la Franja Inferior (Y: 85%) */
.cover-card-bottom-content {
  position: absolute;
  top: 85%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  width: 100%;
  z-index: 10;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  padding: 0 2cqi;
  box-sizing: border-box;
}

.cover-title-group {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Sombra transparente y sutil, estrictamente delimitada a la sección del título y subtítulo */
.cover-title-group::before {
  content: "";
  position: absolute;
  inset: -14% -12%;
  background: radial-gradient(
    ellipse 75% 70% at 50% 50%,
    rgba(3, 2, 7, 0.72) 0%,
    rgba(3, 2, 7, 0.44) 48%,
    rgba(3, 2, 7, 0.12) 75%,
    transparent 100%
  );
  pointer-events: none;
  z-index: -1;
  filter: blur(8px);
}

/* NEVERMORE: Cinzel 900 con degradado metálico platino-violeta y sombra sutil acentuada */
.cover-card-title-nevermore {
  font-family: "Cinzel", "Trajan Pro", serif;
  font-size: clamp(1.81rem, 10.97cqi, 3.22rem);
  font-weight: 900;
  letter-spacing: 0.10em;
  margin-right: -0.10em;
  line-height: 1.05;
  text-transform: uppercase;
  white-space: nowrap;
  background: linear-gradient(180deg, #ffffff 0%, #e4e7ef 45%, #c8b6f0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.95)) drop-shadow(0 4px 14px rgba(0, 0, 0, 0.88)) drop-shadow(0 0 20px rgba(230, 168, 196, 0.3));
  margin: 0 0 1.5cqi 0;
  width: 100%;
  text-align: center;
}

/* Subtítulo: LA SOMBRA DEL DESTINO */
.cover-card-subtitle {
  font-family: "Cinzel", "Trajan Pro", serif;
  font-size: clamp(0.59rem, 3.42cqi, 0.93rem);
  font-weight: 600;
  letter-spacing: 0.24em;
  margin-right: -0.24em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(228, 231, 239, 0.92);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95), 0 2px 8px rgba(0, 0, 0, 0.9), 0 0 12px rgba(228, 231, 239, 0.25);
  width: 100%;
  text-align: center;
  line-height: 1.25;
  margin: 0;
}

.codice-card--active-book .codice-card__body {
  background: url('/assets/portada_nevermore.webp') center/cover no-repeat !important;
  opacity: 1 !important;
  filter: none !important;
}

.codice-card--saga-active .force-portal__grain,
.codice-card--active-book .force-portal__grain {
  display: none !important;
}

/* Enhanced legibility for active cards with pure artwork */
.codice-card--saga-active .codice-card-title,
.codice-card--active-book .codice-card-title {
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.92), 0 0 24px rgba(6, 5, 16, 0.85);
}

.codice-card--saga-active .codice-card-copy,
.codice-card--active-book .codice-card-copy {
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.95), 0 0 16px rgba(6, 5, 16, 0.9);
}

.codice-card--saga-active .codice-card-index,
.codice-card--active-book .codice-card-index {
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
}

.codice-card--saga-active .codice-card-meta,
.codice-card--active-book .codice-card-meta {
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
}

/* Card Copy / Synopsis: Strictly locked to EXACTLY 3 lines of fluid prose (min 3, max 3) */
.codice-card-copy,
.codice-card-copy--synopsis {
  font-family: "EB Garamond", serif !important;
  font-size: 4.15cqi !important;
  line-height: 1.34 !important;
  height: calc(3 * 1.34em) !important;
  min-height: calc(3 * 1.34em) !important;
  max-height: calc(3 * 1.34em) !important;
  overflow: hidden !important;
  white-space: normal !important;
  color: rgba(228, 231, 239, 0.84) !important;
  margin: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  text-overflow: ellipsis !important;
  text-wrap: pretty !important;
}

/* Locked Saga Cards: Delicate, Luxury 4-Chain Seal with Solid Foreground */
.codice-card--locked-relic {
  animation: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  cursor: pointer !important;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease !important;
}

.codice-card--locked-relic:hover {
  transform: translateY(-4px) scale(1.008);
}

.codice-card--locked-relic:active {
  transform: scale(0.988);
}

.codice-card--locked-relic .codice-card__body {
  position: absolute !important;
  inset: 0 !important;
  opacity: 1 !important;
  background: #060510 !important;
  display: block !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Background Artwork in penumbra (Nebulosa limpia sin destello) */
.locked-card-backdrop {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: 
    linear-gradient(180deg, rgba(6, 5, 16, 0.55) 0%, rgba(6, 5, 16, 0.28) 42%, rgba(6, 5, 16, 0.9) 100%),
    url('/assets/codice/reverso-aluen-bloqueado.jpg') center/cover no-repeat;
  opacity: 0.36;
  z-index: 1;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.codice-card--locked-relic:hover .locked-card-backdrop {
  opacity: 0.46;
}

.codice-card--locked-relic.is-rattle-1 .locked-card-backdrop,
.codice-card--locked-relic.is-rattle-2 .locked-card-backdrop {
  opacity: 0.58 !important;
  transition: opacity 0.15s ease-out;
}

/* Chains and Padlock Overlay */
.locked-chains-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  opacity: 1 !important;
  transform: translateZ(2.8rem);
  pointer-events: none;
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.75));
  will-change: transform;
}

.codice-card--locked-relic.is-rattle-1 .locked-chains-overlay {
  animation: overlayRecoilA 0.82s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.codice-card--locked-relic.is-rattle-2 .locked-chains-overlay {
  animation: overlayRecoilB 0.82s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes overlayRecoilA {
  0% { transform: translateZ(2.8rem) scale(1); }
  10% { transform: translateZ(2.8rem) scale(0.982); }
  25% { transform: translateZ(2.8rem) scale(1.014); }
  45% { transform: translateZ(2.8rem) scale(0.996); }
  68% { transform: translateZ(2.8rem) scale(1.004); }
  85% { transform: translateZ(2.8rem) scale(0.999); }
  100% { transform: translateZ(2.8rem) scale(1); }
}

@keyframes overlayRecoilB {
  0% { transform: translateZ(2.8rem) scale(1); }
  10% { transform: translateZ(2.8rem) scale(0.982); }
  25% { transform: translateZ(2.8rem) scale(1.014); }
  45% { transform: translateZ(2.8rem) scale(0.996); }
  68% { transform: translateZ(2.8rem) scale(1.004); }
  85% { transform: translateZ(2.8rem) scale(0.999); }
  100% { transform: translateZ(2.8rem) scale(1); }
}

.locked-chains-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Central Gothic Relic Padlock */
.relic-padlock-group {
  transform-origin: 160px 206px;
  transform-box: view-box;
  will-change: transform;
}

.codice-card--locked-relic.is-rattle-1 .relic-padlock-group {
  animation: padlockHeavyRattleLeft 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.codice-card--locked-relic.is-rattle-2 .relic-padlock-group {
  animation: padlockHeavyRattleRight 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes padlockHeavyRattleLeft {
  0% { transform: rotate(0deg) translate(0, 0); }
  8% { transform: rotate(-16deg) translate(-4px, -2.5px); }
  18% { transform: rotate(13deg) translate(3px, 1.5px); }
  28% { transform: rotate(-9.5deg) translate(-2px, 1.8px); }
  40% { transform: rotate(6.5deg) translate(1.5px, -0.6px); }
  52% { transform: rotate(-4deg) translate(-0.8px, 0.8px); }
  65% { transform: rotate(2.3deg) translate(0.5px, 0px); }
  78% { transform: rotate(-1.2deg) translate(-0.3px, 0.3px); }
  88% { transform: rotate(0.6deg) translate(0.1px, 0px); }
  95% { transform: rotate(-0.2deg) translate(0px, 0px); }
  100% { transform: rotate(0deg) translate(0, 0); }
}

@keyframes padlockHeavyRattleRight {
  0% { transform: rotate(0deg) translate(0, 0); }
  8% { transform: rotate(16deg) translate(4px, -2.5px); }
  18% { transform: rotate(-13deg) translate(-3px, 1.5px); }
  28% { transform: rotate(9.5deg) translate(2px, 1.8px); }
  40% { transform: rotate(-6.5deg) translate(-1.5px, -0.6px); }
  52% { transform: rotate(4deg) translate(0.8px, 0.8px); }
  65% { transform: rotate(-2.3deg) translate(-0.5px, 0px); }
  78% { transform: rotate(1.2deg) translate(0.3px, 0.3px); }
  88% { transform: rotate(-0.6deg) translate(-0.1px, 0px); }
  95% { transform: rotate(0.2deg) translate(0px, 0px); }
  100% { transform: rotate(0deg) translate(0, 0); }
}

/* Chains Group Vibration */
.relic-chains-group {
  transform-origin: 160px 260px;
  transform-box: view-box;
  will-change: transform;
}

.codice-card--locked-relic.is-rattle-1 .relic-chains-group {
  animation: chainsMetallicVibrateLeft 0.85s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
.codice-card--locked-relic.is-rattle-2 .relic-chains-group {
  animation: chainsMetallicVibrateRight 0.85s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

@keyframes chainsMetallicVibrateLeft {
  0% { transform: translate(0, 0); }
  7% { transform: translate(-2.5px, -1.5px); }
  14% { transform: translate(2.5px, 1.8px); }
  21% { transform: translate(-2px, 1.2px); }
  30% { transform: translate(1.8px, -1.5px); }
  40% { transform: translate(-1.2px, 1px); }
  52% { transform: translate(0.9px, -0.8px); }
  65% { transform: translate(-0.6px, 0.5px); }
  80% { transform: translate(0.3px, -0.2px); }
  92% { transform: translate(-0.1px, 0.1px); }
  100% { transform: translate(0, 0); }
}

@keyframes chainsMetallicVibrateRight {
  0% { transform: translate(0, 0); }
  7% { transform: translate(2.5px, -1.5px); }
  14% { transform: translate(-2.5px, 1.8px); }
  21% { transform: translate(2px, 1.2px); }
  30% { transform: translate(-1.8px, -1.5px); }
  40% { transform: translate(1.2px, 1px); }
  52% { transform: translate(-0.9px, -0.8px); }
  65% { transform: translate(0.6px, 0.5px); }
  80% { transform: translate(-0.3px, -0.2px); }
  92% { transform: translate(0.1px, 0.1px); }
  100% { transform: translate(0, 0); }
}

/* 4 Diagonal Chains: Anchor Pivot Tension Swings */
.relic-chain-tl {
  transform-origin: 20px 20px;
  transform-box: view-box;
  will-change: transform;
}
.relic-chain-tr {
  transform-origin: 300px 20px;
  transform-box: view-box;
  will-change: transform;
}
.relic-chain-bl {
  transform-origin: 20px 488px;
  transform-box: view-box;
  will-change: transform;
}
.relic-chain-br {
  transform-origin: 300px 488px;
  transform-box: view-box;
  will-change: transform;
}

.codice-card--locked-relic.is-rattle-1 .relic-chain-tl {
  animation: chainTensionTLLeft 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.codice-card--locked-relic.is-rattle-2 .relic-chain-tl {
  animation: chainTensionTLRight 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.codice-card--locked-relic.is-rattle-1 .relic-chain-tr {
  animation: chainTensionTRLeft 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.codice-card--locked-relic.is-rattle-2 .relic-chain-tr {
  animation: chainTensionTRRight 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.codice-card--locked-relic.is-rattle-1 .relic-chain-bl {
  animation: chainTensionBLLeft 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.codice-card--locked-relic.is-rattle-2 .relic-chain-bl {
  animation: chainTensionBLRight 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.codice-card--locked-relic.is-rattle-1 .relic-chain-br {
  animation: chainTensionBRLeft 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.codice-card--locked-relic.is-rattle-2 .relic-chain-br {
  animation: chainTensionBRRight 0.85s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes chainTensionTLLeft {
  0% { transform: rotate(0deg); }
  8% { transform: rotate(-2.8deg); }
  18% { transform: rotate(2.2deg); }
  28% { transform: rotate(-1.6deg); }
  40% { transform: rotate(1.2deg); }
  52% { transform: rotate(-0.7deg); }
  65% { transform: rotate(0.4deg); }
  78% { transform: rotate(-0.2deg); }
  100% { transform: rotate(0deg); }
}

@keyframes chainTensionTLRight {
  0% { transform: rotate(0deg); }
  8% { transform: rotate(2.8deg); }
  18% { transform: rotate(-2.2deg); }
  28% { transform: rotate(1.6deg); }
  40% { transform: rotate(-1.2deg); }
  52% { transform: rotate(0.7deg); }
  65% { transform: rotate(-0.4deg); }
  78% { transform: rotate(0.2deg); }
  100% { transform: rotate(0deg); }
}

@keyframes chainTensionTRLeft {
  0% { transform: rotate(0deg); }
  8% { transform: rotate(-2.5deg); }
  18% { transform: rotate(2.3deg); }
  28% { transform: rotate(-1.7deg); }
  40% { transform: rotate(1.2deg); }
  52% { transform: rotate(-0.7deg); }
  65% { transform: rotate(0.4deg); }
  78% { transform: rotate(-0.2deg); }
  100% { transform: rotate(0deg); }
}

@keyframes chainTensionTRRight {
  0% { transform: rotate(0deg); }
  8% { transform: rotate(2.5deg); }
  18% { transform: rotate(-2.3deg); }
  28% { transform: rotate(1.7deg); }
  40% { transform: rotate(-1.2deg); }
  52% { transform: rotate(0.7deg); }
  65% { transform: rotate(-0.4deg); }
  78% { transform: rotate(0.2deg); }
  100% { transform: rotate(0deg); }
}

@keyframes chainTensionBLLeft {
  0% { transform: rotate(0deg); }
  8% { transform: rotate(-2.6deg); }
  18% { transform: rotate(2.1deg); }
  28% { transform: rotate(-1.5deg); }
  40% { transform: rotate(1.1deg); }
  52% { transform: rotate(-0.6deg); }
  65% { transform: rotate(0.3deg); }
  78% { transform: rotate(-0.2deg); }
  100% { transform: rotate(0deg); }
}

@keyframes chainTensionBLRight {
  0% { transform: rotate(0deg); }
  8% { transform: rotate(2.6deg); }
  18% { transform: rotate(-2.1deg); }
  28% { transform: rotate(1.5deg); }
  40% { transform: rotate(-1.1deg); }
  52% { transform: rotate(0.6deg); }
  65% { transform: rotate(-0.3deg); }
  78% { transform: rotate(0.2deg); }
  100% { transform: rotate(0deg); }
}

@keyframes chainTensionBRLeft {
  0% { transform: rotate(0deg); }
  8% { transform: rotate(-2.4deg); }
  18% { transform: rotate(2.2deg); }
  28% { transform: rotate(-1.6deg); }
  40% { transform: rotate(1.1deg); }
  52% { transform: rotate(-0.6deg); }
  65% { transform: rotate(0.3deg); }
  78% { transform: rotate(-0.2deg); }
  100% { transform: rotate(0deg); }
}

@keyframes chainTensionBRRight {
  0% { transform: rotate(0deg); }
  8% { transform: rotate(2.4deg); }
  18% { transform: rotate(-2.2deg); }
  28% { transform: rotate(1.6deg); }
  40% { transform: rotate(-1.1deg); }
  52% { transform: rotate(0.6deg); }
  65% { transform: rotate(-0.3deg); }
  78% { transform: rotate(0.2deg); }
  100% { transform: rotate(0deg); }
}

/* Arcane Ward Shockwaves */
.relic-shockwave {
  opacity: 0;
  transform-origin: 160px 260px;
  transform-box: view-box;
  pointer-events: none;
  will-change: transform, opacity;
}

.codice-card--locked-relic.is-rattle-1 .relic-shockwave-primary {
  animation: shockwavePulsePrimaryA 0.75s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}
.codice-card--locked-relic.is-rattle-2 .relic-shockwave-primary {
  animation: shockwavePulsePrimaryB 0.75s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
}

.codice-card--locked-relic.is-rattle-1 .relic-shockwave-secondary {
  animation: shockwavePulseSecondaryA 0.82s cubic-bezier(0.1, 0.8, 0.3, 1) 0.05s forwards;
}
.codice-card--locked-relic.is-rattle-2 .relic-shockwave-secondary {
  animation: shockwavePulseSecondaryB 0.82s cubic-bezier(0.1, 0.8, 0.3, 1) 0.05s forwards;
}

@keyframes shockwavePulsePrimaryA {
  0% { transform: scale(0.7); opacity: 0; stroke-width: 3.5; }
  15% { opacity: 0.95; }
  100% { transform: scale(3.8); opacity: 0; stroke-width: 0.4; }
}
@keyframes shockwavePulsePrimaryB {
  0% { transform: scale(0.7); opacity: 0; stroke-width: 3.5; }
  15% { opacity: 0.95; }
  100% { transform: scale(3.8); opacity: 0; stroke-width: 0.4; }
}

@keyframes shockwavePulseSecondaryA {
  0% { transform: scale(0.6); opacity: 0; stroke-width: 2.5; }
  18% { opacity: 0.8; }
  100% { transform: scale(4.4); opacity: 0; stroke-width: 0.3; }
}
@keyframes shockwavePulseSecondaryB {
  0% { transform: scale(0.6); opacity: 0; stroke-width: 2.5; }
  18% { opacity: 0.8; }
  100% { transform: scale(4.4); opacity: 0; stroke-width: 0.3; }
}

/* Arcane Clink Sparks */
.relic-spark {
  opacity: 0;
  filter: drop-shadow(0 0 4px #f7d4e4) drop-shadow(0 0 8px #9d76cc);
  transform-box: view-box;
  pointer-events: none;
  will-change: transform, opacity;
}

.codice-card--locked-relic.is-rattle-1 .relic-spark-1 { transform-origin: 138px 229px; animation: sparkBurstA 0.55s ease-out 0.02s forwards; }
.codice-card--locked-relic.is-rattle-2 .relic-spark-1 { transform-origin: 138px 229px; animation: sparkBurstB 0.55s ease-out 0.02s forwards; }
.codice-card--locked-relic.is-rattle-1 .relic-spark-2 { transform-origin: 182px 229px; animation: sparkBurstA 0.55s ease-out 0.05s forwards; }
.codice-card--locked-relic.is-rattle-2 .relic-spark-2 { transform-origin: 182px 229px; animation: sparkBurstB 0.55s ease-out 0.05s forwards; }
.codice-card--locked-relic.is-rattle-1 .relic-spark-3 { transform-origin: 127px 271px; animation: sparkBurstA 0.55s ease-out 0.08s forwards; }
.codice-card--locked-relic.is-rattle-2 .relic-spark-3 { transform-origin: 127px 271px; animation: sparkBurstB 0.55s ease-out 0.08s forwards; }
.codice-card--locked-relic.is-rattle-1 .relic-spark-4 { transform-origin: 193px 271px; animation: sparkBurstA 0.55s ease-out 0.06s forwards; }
.codice-card--locked-relic.is-rattle-2 .relic-spark-4 { transform-origin: 193px 271px; animation: sparkBurstB 0.55s ease-out 0.06s forwards; }
.codice-card--locked-relic.is-rattle-1 .relic-spark-5 { transform-origin: 160px 295px; animation: sparkBurstA 0.55s ease-out 0.09s forwards; }
.codice-card--locked-relic.is-rattle-2 .relic-spark-5 { transform-origin: 160px 295px; animation: sparkBurstB 0.55s ease-out 0.09s forwards; }

@keyframes sparkBurstA {
  0% { opacity: 0; transform: scale(0.2); }
  20% { opacity: 1; transform: scale(2.4); }
  60% { opacity: 0.8; transform: scale(1.3); }
  100% { opacity: 0; transform: scale(0.1); }
}
@keyframes sparkBurstB {
  0% { opacity: 0; transform: scale(0.2); }
  20% { opacity: 1; transform: scale(2.4); }
  60% { opacity: 0.8; transform: scale(1.3); }
  100% { opacity: 0; transform: scale(0.1); }
}

/* Keyhole Ambient Pulse and Rattle Flare */
@keyframes keyholeVioletPulse {
  0%, 100% {
    filter: drop-shadow(0 0 2px rgba(230, 168, 196, 0.4));
    opacity: 0.6;
  }
  50% {
    filter: drop-shadow(0 0 10px rgba(107, 79, 163, 1)) drop-shadow(0 0 16px rgba(230, 168, 196, 0.8));
    opacity: 1;
  }
}

.locked-keyhole-glow {
  animation: keyholeVioletPulse 3.5s ease-in-out infinite;
}

.codice-card--locked-relic.is-rattle-1 .locked-keyhole-glow {
  animation: keyholeRattleFlareA 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}
.codice-card--locked-relic.is-rattle-2 .locked-keyhole-glow {
  animation: keyholeRattleFlareB 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

@keyframes keyholeRattleFlareA {
  0% {
    filter: drop-shadow(0 0 2px rgba(230, 168, 196, 0.4));
    opacity: 0.6;
  }
  15% {
    filter: drop-shadow(0 0 16px rgba(247, 212, 228, 1)) drop-shadow(0 0 32px rgba(157, 118, 204, 1)) drop-shadow(0 0 48px rgba(107, 79, 163, 0.95));
    opacity: 1;
  }
  100% {
    filter: drop-shadow(0 0 2px rgba(230, 168, 196, 0.4));
    opacity: 0.6;
  }
}

@keyframes keyholeRattleFlareB {
  0% {
    filter: drop-shadow(0 0 2px rgba(230, 168, 196, 0.4));
    opacity: 0.6;
  }
  15% {
    filter: drop-shadow(0 0 16px rgba(247, 212, 228, 1)) drop-shadow(0 0 32px rgba(157, 118, 204, 1)) drop-shadow(0 0 48px rgba(107, 79, 163, 0.95));
    opacity: 1;
  }
  100% {
    filter: drop-shadow(0 0 2px rgba(230, 168, 196, 0.4));
    opacity: 0.6;
  }
}

/* Padlock Body Plate Flash */
.codice-card--locked-relic.is-rattle-1 .relic-padlock-plate {
  animation: padlockPlateFlashA 0.85s ease-out forwards;
}
.codice-card--locked-relic.is-rattle-2 .relic-padlock-plate {
  animation: padlockPlateFlashB 0.85s ease-out forwards;
}

@keyframes padlockPlateFlashA {
  0% { filter: none; }
  15% { filter: drop-shadow(0 0 8px rgba(230, 168, 196, 0.8)) drop-shadow(0 0 16px rgba(107, 79, 163, 0.6)); }
  100% { filter: none; }
}

@keyframes padlockPlateFlashB {
  0% { filter: none; }
  15% { filter: drop-shadow(0 0 8px rgba(230, 168, 196, 0.8)) drop-shadow(0 0 16px rgba(107, 79, 163, 0.6)); }
  100% { filter: none; }
}

/* Webtoon Vertical Reader Viewer */
.webtoon-viewer {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  justify-content: center;
  background: #030107;
  overflow-y: auto;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.webtoon-viewer[hidden] {
  display: flex !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.webtoon-container {
  position: relative;
  width: min(800px, 100vw);
  margin: 0 auto;
  min-height: 100vh;
  background: radial-gradient(120% 90% at 50% 0%, rgba(107, 79, 163, 0.15), #060510 60%);
  border-left: 1px solid rgba(228, 231, 239, 0.1);
  border-right: 1px solid rgba(228, 231, 239, 0.1);
  padding: clamp(3rem, 6vw, 5rem) clamp(1.2rem, 5vw, 3rem) 8rem;
  color: var(--plata);
}

.webtoon-close {
  --aluen-icon-x: 0px;
  --aluen-icon-y: 0px;
  position: fixed;
  top: clamp(1rem, 2.5vh, 2rem);
  right: clamp(1rem, 2.5vw, 2.5rem);
  z-index: 550;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(230, 168, 196, 0.4);
  border-radius: 50%;
  background: rgba(6, 5, 16, 0.85);
  backdrop-filter: blur(12px);
  color: #fff;
  font-size: 1.6rem;
  cursor: pointer;
  display: grid;
  place-items: center;
  transform: translate(var(--aluen-icon-x), var(--aluen-icon-y));
  transition: border-color 0.25s ease, transform 0.25s ease, background 0.25s ease;
}

.webtoon-close:hover {
  border-color: var(--rosa);
  background: rgba(230, 168, 196, 0.2);
  transform: translate(var(--aluen-icon-x), var(--aluen-icon-y)) rotate(90deg) scale(1.05);
}

.webtoon-header {
  text-align: center;
  border-bottom: 1px solid rgba(228, 231, 239, 0.14);
  padding-bottom: 2.5rem;
  margin-bottom: 3.5rem;
}

.webtoon-kicker {
  color: var(--rosa);
  font-family: "Cinzel", serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  margin-bottom: 0.8rem;
}

.webtoon-title {
  margin: 0 0 1rem;
  font-family: "Cinzel", serif;
  font-size: clamp(2rem, 4vw, 2.8rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
}

.webtoon-specs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.4rem;
  font-family: "Cinzel", serif;
  font-size: 0.74rem;
  color: rgba(228, 231, 239, 0.7);
  letter-spacing: 0.12em;
}

.webtoon-specs span {
  padding: 5px 12px;
  border-radius: 6px;
  background: rgba(228, 231, 239, 0.05);
  border: 1px solid rgba(228, 231, 239, 0.12);
}

.webtoon-panel {
  margin-bottom: 3.5rem;
  padding: 2.2rem;
  border: 1px solid rgba(228, 231, 239, 0.12);
  border-radius: 16px;
  background: rgba(228, 231, 239, 0.025);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.4);
}

.webtoon-panel-num {
  color: var(--rosa);
  font-family: "Cinzel", serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.webtoon-panel-heading {
  margin: 0 0 1rem;
  font-family: "Cinzel", serif;
  font-size: 1.25rem;
  letter-spacing: 0.08em;
  color: #fff;
}

.webtoon-panel-narrative {
  font-family: "EB Garamond", serif;
  font-size: 1.25rem;
  line-height: 1.65;
  color: rgba(228, 231, 239, 0.88);
  margin-bottom: 1.4rem;
}

.webtoon-dialogue {
  margin: 1.2rem 0 1.2rem 1.8rem;
  padding-left: 1.2rem;
  border-left: 2px solid var(--rosa);
}

.webtoon-speaker {
  color: var(--rosa);
  font-family: "Cinzel", serif;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.webtoon-speech {
  font-family: "EB Garamond", serif;
  font-size: 1.22rem;
  font-style: italic;
  color: #fff;
  margin-top: 5px;
}

/* Triada Sagrada de Formatos */
.codice-card--locked-format .codice-card__body {
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  padding: 8.5cqi !important;
  overflow: hidden !important;
  background: linear-gradient(145deg, rgba(228, 231, 239, 0.04), rgba(7, 6, 13, 0.94)) !important;
}

.codice-card--locked-format .codice-card-index,
.codice-card--locked-format .codice-card-content,
.codice-card--locked-format .codice-card-meta {
  position: relative !important;
  z-index: 12 !important;
  transform: translateZ(1.25rem);
}

.codice-card--locked-format .codice-card-content {
  align-self: end !important;
  margin-bottom: 2cqi !important;
  background: linear-gradient(180deg, transparent 0%, rgba(6, 5, 16, 0.84) 35%, rgba(6, 5, 16, 0.97) 100%) !important;
  padding: 2.5cqi 2cqi 1cqi !important;
  border-radius: 8px !important;
}

.codice-card--locked-format .locked-chains-overlay {
  opacity: 0.88;
}

.codice-card--locked-format:hover .locked-chains-overlay {
  opacity: 1;
}

.codice-card--format-active {
  border-color: rgba(255, 180, 199, 0.45) !important;
}

/* Novela Literaria (Prosa Canónica) */
.webtoon-prose-body {
  max-width: 680px;
  margin: 0 auto;
  padding: 1.5rem 0;
}

.webtoon-prose-para {
  font-family: "EB Garamond", serif;
  font-size: clamp(1.15rem, 2vw, 1.35rem);
  line-height: 1.9;
  color: rgba(228, 231, 239, 0.92);
  margin-bottom: 2rem;
  letter-spacing: 0.015em;
  text-align: justify;
}

.webtoon-prose-para:first-of-type::first-letter {
  font-family: "Cinzel", serif;
  font-size: 3.6rem;
  float: left;
  line-height: 0.8;
  margin-right: 0.9rem;
  color: var(--rosa);
  text-shadow: 0 0 20px rgba(230, 168, 196, 0.5);
}

/* Selector Sagrado de Formatos en Cabecera de Crónica */
.saga-format-switcher {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.75rem;
  margin-bottom: 2rem;
  padding: 0.45rem;
  background: rgba(8, 6, 20, 0.85);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(228, 231, 239, 0.12);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
  overflow-x: auto;
  scrollbar-width: none;
}

.saga-format-switcher::-webkit-scrollbar {
  display: none;
}

.saga-format-switcher[hidden] {
  display: none !important;
}

.saga-format-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 1.15rem;
  border-radius: 12px;
  background: transparent;
  border: 1px solid transparent;
  color: rgba(228, 231, 239, 0.75);
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.saga-format-btn:hover {
  color: #fff;
  background: rgba(228, 231, 239, 0.06);
  border-color: rgba(228, 231, 239, 0.16);
  transform: translateY(-1px);
}

.saga-format-btn[aria-pressed="true"] {
  background: rgba(230, 168, 196, 0.14);
  border-color: rgba(230, 168, 196, 0.5);
  color: #fff;
  box-shadow: 0 4px 20px rgba(107, 79, 163, 0.35), inset 0 0 10px rgba(230, 168, 196, 0.1);
}

.saga-format-btn__badge {
  font-family: "Cinzel", serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(228, 231, 239, 0.08);
  color: var(--rosa);
  border: 1px solid rgba(228, 231, 239, 0.1);
}

.saga-format-btn[aria-pressed="true"] .saga-format-btn__badge {
  background: rgba(230, 168, 196, 0.28);
  border-color: rgba(230, 168, 196, 0.5);
  color: #fff;
}

.saga-format-btn__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  line-height: 1.25;
  gap: 2px;
}

.saga-format-btn__label {
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: inherit;
}

.saga-format-btn__sub {
  font-size: 0.72rem;
  color: rgba(228, 231, 239, 0.5);
  letter-spacing: 0.03em;
}

.saga-format-btn[aria-pressed="true"] .saga-format-btn__sub {
  color: rgba(247, 212, 228, 0.9);
}

/* Botón de Formato en Custodia (Cinemática Animada) */
.saga-format-btn--vault {
  background: rgba(20, 15, 36, 0.5);
  border: 1px solid rgba(168, 85, 247, 0.22);
  color: rgba(228, 231, 239, 0.85);
  cursor: pointer;
}

.saga-format-btn--vault:hover {
  background: rgba(168, 85, 247, 0.1);
  border-color: rgba(168, 85, 247, 0.45);
  color: #fff;
  box-shadow: 0 0 24px rgba(168, 85, 247, 0.2);
  transform: translateY(-1px);
}

.saga-format-btn__badge--vault {
  background: rgba(168, 85, 247, 0.16);
  border: 1px solid rgba(168, 85, 247, 0.35);
  color: #d8b4fe;
}

.saga-format-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.32rem 0.42rem;
  border-radius: 999px;
  background: rgba(168, 85, 247, 0.12);
  border: 1px solid rgba(168, 85, 247, 0.32);
  color: #d8b4fe;
  transition: all 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
  margin-left: 0.4rem;
  overflow: hidden;
}

.saga-format-pill__icon {
  width: 11px;
  height: 11px;
  stroke: currentColor;
  stroke-width: 2.2;
  fill: none;
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.saga-format-pill__label {
  display: inline-block;
  max-width: 0;
  opacity: 0;
  overflow: hidden;
  margin-left: 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: max-width 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.25s ease, margin-left 0.3s ease;
}

/* Hover suave cuando NO esta seleccionado */
.saga-format-btn--vault:not([aria-pressed="true"]):hover .saga-format-pill {
  background: rgba(168, 85, 247, 0.22);
  border-color: rgba(168, 85, 247, 0.5);
  color: #fff;
  transform: scale(1.08);
}

/* Cuando esta seleccionado (aria-pressed="true") */
.saga-format-btn--vault[aria-pressed="true"] {
  background: rgba(168, 85, 247, 0.16);
  border-color: rgba(168, 85, 247, 0.55);
  color: #fff;
  box-shadow: 0 4px 20px rgba(168, 85, 247, 0.35), inset 0 0 10px rgba(168, 85, 247, 0.15);
}

.saga-format-btn--vault[aria-pressed="true"] .saga-format-pill {
  padding: 0.22rem 0.65rem;
  background: rgba(168, 85, 247, 0.3);
  border-color: rgba(168, 85, 247, 0.7);
  color: #fff;
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.45);
}

.saga-format-btn--vault[aria-pressed="true"] .saga-format-pill__icon {
  transform: rotate(-10deg) scale(1.05);
}

.saga-format-btn--vault[aria-pressed="true"] .saga-format-pill__label {
  max-width: 120px;
  opacity: 1;
  margin-left: 0.35rem;
}

.saga-format-btn--vault.is-rattle {
  animation: formatLockRattle 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes formatLockRattle {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-3px, 0, 0); }
  40%, 60% { transform: translate3d(3px, 0, 0); }
}

/* Lector Modal: Pestañas de Formato en Cabecera */
.webtoon-reader-tabs {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 1.2rem auto 0;
  padding: 4px;
  background: rgba(6, 5, 16, 0.85);
  border: 1px solid rgba(228, 231, 239, 0.14);
  border-radius: 30px;
}

.webtoon-tab-btn {
  padding: 7px 18px;
  border-radius: 20px;
  background: transparent;
  border: none;
  color: rgba(228, 231, 239, 0.68);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all 0.2s ease;
}

.webtoon-tab-btn:hover {
  color: #fff;
  background: rgba(228, 231, 239, 0.06);
}

.webtoon-tab-btn.is-active {
  background: rgba(230, 168, 196, 0.22);
  border: 1px solid rgba(230, 168, 196, 0.45);
  color: #fff;
  box-shadow: 0 0 14px rgba(230, 168, 196, 0.25);
}