/* ============================================================
   CZ · Tus Cofres — tema premium oscuro (bordo · negro · dorado)
   ============================================================ */

:root {
  --bg: #100504;
  --bg-2: #1a0705;
  --maroon: #3a0d10;
  --maroon-deep: #200608;
  --gold: #e8c874;
  --gold-bright: #f6dfa0;
  --gold-deep: #a9822f;
  --gold-line: rgba(232, 200, 116, 0.28);
  --silver: #cdd6dc;
  --silver-deep: #7c8790;
  --bronze: #c98a4b;
  --bronze-deep: #6b3f18;
  --diamond: #eaf6ff;
  --diamond-deep: #6fa9c9;
  --ink: #f4ead7;
  --ink-dim: #b9a98f;
  --ink-faint: #8a7a63;
  --radius-lg: 22px;
  --radius-md: 14px;
  --shadow-deep: 0 20px 50px rgba(0, 0, 0, 0.55);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
}

body {
  min-height: 100vh;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { margin: 0; font-family: 'Marcellus SC', serif; font-weight: 400; }
p { margin: 0; }
button { font-family: inherit; }

/* ---------- Escenario / fondo ---------- */

.scene {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px 20px 40px;
}

/* ---------- Fondo de página (imagen fija, cubre todo el scroll) ---------- */

.page-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background-color: var(--bg);
}

.page-bg-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.page-bg-overlay {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 65% 45% at 50% 18%, rgba(8, 3, 2, 0.4), transparent 70%);
}

.bg-glow {
  position: fixed;
  top: -20%;
  left: 50%;
  width: 900px;
  max-width: 200vw;
  height: 700px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(232, 200, 116, 0.10) 0%, transparent 65%);
  pointer-events: none;
  z-index: 0;
}

.particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

/* Rayos de luz — 2 elementos fijos, sin blur() (el propio degradado ya
   difumina los bordes) y animando solo "opacity", la propiedad más barata
   para el compositor. Nada de esto usa JS por cuadro ni traslados largos,
   así que el costo en celulares de gama baja es mínimo. */
.light-ray {
  position: absolute;
  top: -20%;
  width: 240px;
  height: 145vh;
  /* Elipse en vez de rectángulo rotado: se difumina en todas las direcciones
     sola, sin bordes rectos visibles y sin necesitar filter:blur(). */
  background: radial-gradient(ellipse 35% 100% at 50% 50%, rgba(255, 214, 140, 0.07), transparent 72%);
  animation: rayFlicker 9s ease-in-out infinite;
}

.light-ray--1 { left: 2%; transform: rotate(11deg); animation-delay: 0s; }
.light-ray--2 { right: 4%; transform: rotate(-9deg); animation-delay: 3.2s; }

@keyframes rayFlicker {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.55; }
}

@media (prefers-reduced-motion: reduce) {
  .light-ray { animation: none !important; opacity: 0.3; }
}

/* ---------- Header ---------- */

.hero {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 480px;
  margin-bottom: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.crown-icon {
  width: 50px;
  height: auto;
  margin-bottom: 6px;
  filter: drop-shadow(0 3px 8px rgba(232, 200, 116, 0.4)) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.7));
}

/* Mascota pirata sin marco de "avatar de landing page": nada de aro
   sólido — un halo de luz detrás y un degradado radial que difumina el
   borde de la foto hasta que se funde con el fondo, como una aparición
   más que una foto de perfil. Dos gemas (arriba/abajo) hacen de acento
   ornamental, el mismo lenguaje que ya usa el separador de abajo. */
.brand-mascot-wrap {
  position: relative;
  width: 132px;
  height: 132px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand-mascot-wrap::before {
  content: '';
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(232, 200, 116, 0.32), transparent 68%);
  z-index: 0;
}

.brand-mascot {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-mask-image: radial-gradient(circle, #000 54%, rgba(0, 0, 0, 0.6) 68%, transparent 85%);
  mask-image: radial-gradient(circle, #000 54%, rgba(0, 0, 0, 0.6) 68%, transparent 85%);
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.55));
}

.mascot-gem {
  position: absolute;
  left: 50%;
  width: 6px;
  height: 6px;
  transform: translateX(-50%) rotate(45deg);
  background: linear-gradient(160deg, var(--gold-bright), var(--gold-deep));
  box-shadow: 0 0 6px rgba(232, 200, 116, 0.6);
  z-index: 2;
}

.mascot-gem--top { top: -2px; }
.mascot-gem--bottom { bottom: -2px; }

@media (min-width: 400px) {
  .brand-mascot-wrap { width: 150px; height: 150px; }
}

.flourish {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 10px 0 18px;
}

.flourish-line {
  width: 64px;
  height: 1px;
}

.flourish-line--left { background: linear-gradient(90deg, transparent, var(--gold-deep)); }
.flourish-line--right { background: linear-gradient(90deg, var(--gold-deep), transparent); }

.flourish-gem {
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  background: linear-gradient(160deg, var(--gold-bright), var(--gold-deep));
  box-shadow: 0 0 6px rgba(232, 200, 116, 0.6);
  flex: none;
}

.hero-title {
  font-family: 'Marcellus SC', serif;
  font-weight: 400;
  font-size: 26px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold) 55%, var(--gold-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.75));
  margin-bottom: 10px;
}

/* Texto de ambientación, no una etiqueta de UI: cursiva, tamaño natural,
   sin versalitas ni tracking agresivo — así se lee como "flavor text" de
   un menú AAA en vez de un subtítulo de landing page. */
/* Misma Z en bordo que el logo de arriba (.brand-z) — un solo acento de
   color reutilizado, no un rojo plano ni distinto entre los dos "CZ". */
.hero-title-z {
  background: linear-gradient(180deg, #e2606a 6%, #a8232d 45%, #5c1119 95%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 6px rgba(168, 35, 45, 0.5));
}

.hero-sub {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.01em;
  color: var(--ink-dim);
  line-height: 1.5;
  max-width: 340px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.85);
}

/* ---------- Panel de estado ---------- */

.status-panel {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  width: 100%;
  max-width: 420px;
  margin-bottom: 40px;
  padding: 20px 8px;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, rgba(58, 13, 16, 0.55), rgba(16, 5, 4, 0.55));
  border: 1px solid rgba(232, 200, 116, 0.14);
  box-shadow: var(--shadow-deep), inset 0 1px 0 rgba(255,255,255,0.03);
  backdrop-filter: blur(6px);
}

.status-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  text-align: center;
}

.status-value {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  font-family: 'DM Serif Display', serif;
  font-weight: 400;
  font-size: 30px;
  color: var(--gold-bright);
  line-height: 1;
  text-shadow: 0 0 18px rgba(232, 200, 116, 0.35);
  transition: color 0.3s ease;
}

.status-value--nivel {
  font-family: 'Marcellus SC', serif;
  font-size: 19px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.status-value--name {
  font-family: 'Marcellus SC', serif;
  font-size: 17px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.status-label {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 11.5px;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ---------- Color dinámico según el nivel actual ----------
   Mismo acento que ya usan la cinta y el nombre de cada cofre, aplicado acá
   con baja opacidad (fondo/borde) para que siga leyéndose como parte del
   mismo panel oscuro, y a color completo en el texto del nivel. */
.status-panel--bronce { border-color: rgba(201, 138, 75, 0.4); background: linear-gradient(160deg, rgba(201, 138, 75, 0.16), rgba(16, 5, 4, 0.6)); }
.status-panel--bronce .status-value--nivel { color: #e0a566; text-shadow: 0 0 16px rgba(201, 138, 75, 0.4); }

.status-panel--plata { border-color: rgba(183, 193, 200, 0.4); background: linear-gradient(160deg, rgba(150, 165, 175, 0.16), rgba(16, 5, 4, 0.6)); }
.status-panel--plata .status-value--nivel { color: #eef1f3; text-shadow: 0 0 16px rgba(183, 193, 200, 0.4); }

.status-panel--oro { border-color: rgba(232, 200, 116, 0.5); background: linear-gradient(160deg, rgba(232, 200, 116, 0.18), rgba(16, 5, 4, 0.6)); }
.status-panel--oro .status-value--nivel { color: var(--gold-bright); text-shadow: 0 0 18px rgba(232, 200, 116, 0.5); }

.status-panel--diamante { border-color: rgba(168, 32, 45, 0.45); background: linear-gradient(160deg, rgba(168, 32, 45, 0.2), rgba(16, 5, 4, 0.6)); }
.status-panel--diamante .status-value--nivel { color: #e18a94; text-shadow: 0 0 16px rgba(168, 32, 45, 0.45); }

.status-divider {
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(232, 200, 116, 0.25), transparent);
  margin: 2px 0;
}

/* ---------- Grid de cofres ---------- */

.chests-grid {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 560px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}

@media (min-width: 400px) {
  .chests-grid { gap: 16px; }
}

@media (min-width: 720px) {
  .chests-grid {
    max-width: 980px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
  }
}

.chest-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  padding: 28px 8px 16px;
  border-radius: var(--radius-lg);
  background: linear-gradient(165deg, rgba(58, 13, 16, 0.42), rgba(10, 4, 3, 0.55));
  border: 1px solid rgba(232, 200, 116, 0.16);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

@media (min-width: 400px) {
  .chest-card { padding: 30px 12px 18px; }
}

.chest-card:active { transform: scale(0.97); }

.chest-card--current {
  border-color: rgba(232, 200, 116, 0.6);
  background: linear-gradient(165deg, rgba(169, 130, 47, 0.22), rgba(58, 13, 16, 0.5));
  box-shadow: 0 0 0 1px rgba(232, 200, 116, 0.25) inset, 0 0 26px rgba(232, 200, 116, 0.18), var(--shadow-deep);
}

/* El pulso se anima en un pseudo-elemento aparte via opacity (compositor,
   sin repaint) en lugar de animar box-shadow directamente en la card. */
.chest-card--current::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  box-shadow: 0 0 0 1px rgba(232, 200, 116, 0.4) inset, 0 0 44px rgba(232, 200, 116, 0.32);
  opacity: 0;
  animation: cardPulse 3.2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes cardPulse {
  0%, 100% { opacity: 0; }
  50% { opacity: 1; }
}

.chest-card--locked { opacity: 0.94; }

/* ---------- Cinta de nivel ---------- */

.chest-ribbon {
  position: absolute;
  top: -2px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 74%;
  padding: 6px 14px 5px;
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-align: center;
  color: #fff6e0;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  clip-path: polygon(6% 0%, 94% 0%, 100% 50%, 94% 100%, 6% 100%, 0% 50%);
  box-shadow: 0 4px 10px rgba(0,0,0,0.45);
  z-index: 3;
}

.chest-ribbon--bronce { background: linear-gradient(180deg, #d99a5c, #8a5228); }
.chest-ribbon--plata { background: linear-gradient(180deg, #3a3a3d, #101012); color: #f2f2f2; }
.chest-ribbon--oro { background: linear-gradient(180deg, #f6da8d, #c99a34); color: #241505; text-shadow: 0 1px 1px rgba(255,255,255,0.25); }
.chest-ribbon--diamante { background: linear-gradient(180deg, #8a1c25, #46080d); }

/* ---------- Cofre visual ---------- */

.chest-visual {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}

.chest-visual picture,
.chest-img {
  width: 100%;
  height: 100%;
}

.chest-img {
  object-fit: contain;
  filter: drop-shadow(0 14px 16px rgba(0,0,0,0.6));
  transition: filter 0.3s var(--ease), transform 0.3s var(--ease);
}

.chest-card--locked .chest-img { filter: drop-shadow(0 14px 16px rgba(0,0,0,0.6)) saturate(0.5) brightness(0.6); }

.chest-card--current .chest-img {
  filter: drop-shadow(0 14px 16px rgba(0,0,0,0.6)) drop-shadow(0 0 22px rgba(232, 200, 116, 0.5));
  animation: chestFloat 3.6s ease-in-out infinite;
}

.chest-card[data-level="diamante"]:not(.chest-card--locked) .chest-img {
  filter: drop-shadow(0 14px 16px rgba(0,0,0,0.6)) drop-shadow(0 0 24px rgba(160, 195, 255, 0.5));
}

@keyframes chestFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.chest-card--opening .chest-img {
  filter: brightness(0.7) saturate(0.7);
  transition: filter 0.3s ease;
}

/* ---------- Info del cofre ---------- */

.chest-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-align: center;
}

.chest-name {
  font-family: 'Marcellus SC', serif;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.chest-name--bronce { color: #e0a566; }
.chest-name--plata { color: #eef1f3; }
.chest-name--oro { color: var(--gold-bright); }
.chest-name--diamante { color: #f4e3e5; }

.chest-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 14px 5px 5px;
  border-radius: 999px;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.08);
}

.status-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  flex: none;
  font-size: 10.5px;
}

.chest-status--claimed { color: var(--ink-dim); }
.chest-status--claimed .status-icon { background: linear-gradient(180deg, #a9c2ae, #5f7a66); color: #0c2414; }

.chest-status--current { color: var(--gold-bright); border-color: rgba(232, 200, 116, 0.35); }
.chest-status--current .status-icon { background: linear-gradient(180deg, var(--gold-bright), var(--gold-deep)); color: #241505; }

.chest-status--locked { color: var(--ink-dim); }
.chest-status--locked .status-icon { background: rgba(255,255,255,0.08); color: var(--ink-dim); border: 1px solid rgba(255,255,255,0.1); }

.chest-status--locked-diamante { color: #e18a94; }
.chest-status--locked-diamante .status-icon { background: rgba(138, 28, 37, 0.35); color: #f2a3ac; border: 1px solid rgba(219, 84, 97, 0.4); }

/* ---------- Íconos propios (reemplazan a los emojis 🔒 ✨ 🥉 🥈 🥇 💎 ★) ----------
   Los degradados que usan (#iconGoldMetal, #iconGoldGlow, etc.) están
   definidos una única vez en el <svg> oculto al principio de index.html.
   La mayoría escala con "em" para heredar el font-size de cada contexto
   (píldora de estado, badge de esquina, modal, cinemática) sin repetir CSS. */

.icon {
  display: inline-block;
  vertical-align: middle;
  flex: none;
}

.icon-lock {
  width: 1em;
  height: 1.08em;
  filter: drop-shadow(0 0 3px rgba(232, 200, 116, 0.55)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}

.icon-star { width: 1em; height: 1em; filter: drop-shadow(0 0 2px rgba(232, 200, 116, 0.5)); }
.icon-medal { width: 1em; height: 1.09em; }
.icon-gem { width: 1em; height: 0.91em; }
.icon-sparkle { width: 2.1em; height: 1.58em; }

/* Destello con brillo/pulse sutil y escalonado — "magia de recompensa" sin parecer un emoji. */
.icon-sparkle .spark {
  transform-origin: center;
  animation: sparkTwinkle 2.2s ease-in-out infinite;
}
.icon-sparkle .spark--lg { animation-delay: 0s; }
.icon-sparkle .spark--md { animation-delay: 0.4s; }
.icon-sparkle .spark--sm { animation-delay: 0.8s; }

@keyframes sparkTwinkle {
  0%, 100% { opacity: 0.75; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.08); }
}

/* Ícono de nivel (medalla/gema) junto al nombre del cofre y en el panel de stats. */
.chest-name .icon,
.status-value--nivel .icon {
  width: 15px;
  height: 16.4px;
  margin-right: 2px;
  vertical-align: -3px;
}
.chest-name .icon-gem,
.status-value--nivel .icon-gem { height: 13.6px; }

.status-value--nivel .icon {
  width: 17px;
  height: 18.6px;
  vertical-align: -4px;
}
.status-value--nivel .icon-gem { height: 15.4px; }

.chest-micro {
  margin-top: 6px;
  font-family: 'Cormorant Garamond', serif;
  font-size: 13px;
  font-weight: 500;
  font-style: italic;
  color: var(--gold-deep);
  opacity: 0.85;
}

.chest-claimed {
  margin-top: 6px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---------- Estado de error (link inválido / sin conexión) ---------- */

.error-state {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 380px;
  margin: 20px auto 0;
  padding: 28px 24px;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, rgba(58, 13, 16, 0.55), rgba(16, 5, 4, 0.55));
  border: 1px solid rgba(232, 200, 116, 0.14);
  box-shadow: var(--shadow-deep);
  text-align: center;
}

.error-state p {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-dim);
}

/* ---------- Footer ---------- */

.page-footer {
  position: relative;
  z-index: 2;
  margin-top: 12px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  text-transform: uppercase;
}

/* ---------- Modal ---------- */

.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(5, 2, 1, 0);
  pointer-events: none;
  transition: background 0.35s var(--ease);
}

.modal-overlay.is-open {
  background: rgba(5, 2, 1, 0.72);
  pointer-events: auto;
  backdrop-filter: blur(3px);
}

@media (min-width: 560px) {
  .modal-overlay { align-items: center; }
}

.modal {
  width: 100%;
  max-width: 400px;
  margin: 34px 16px 16px;
  padding: 98px 26px 26px;
  border-radius: 22px;
  background:
    radial-gradient(120% 90% at 50% 15%, rgba(122, 26, 34, 0.4), transparent 62%),
    linear-gradient(165deg, #3a0f12 0%, #1c0705 65%, #120504 100%);
  border: 1px solid rgba(232, 200, 116, 0.35);
  box-shadow: 0 -10px 40px rgba(0,0,0,0.5), 0 0 40px rgba(232, 200, 116, 0.12);
  text-align: center;
  transform: translateY(24px) scale(0.96);
  opacity: 0;
  filter: blur(6px);
  transition: transform 0.5s var(--ease), opacity 0.5s var(--ease), filter 0.5s var(--ease);
  position: relative;
}

@media (min-width: 560px) {
  .modal { margin: 34px 16px 16px; }
}

/* Doble marco: el border de afuera + esta línea fina inset, como en un
   pergamino/carta con moldura dorada. */
.modal::after {
  content: '';
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(232, 200, 116, 0.3);
  border-radius: 15px;
  pointer-events: none;
}

.modal-overlay.is-open .modal {
  transform: translateY(0) scale(1);
  opacity: 1;
  filter: blur(0);
}

.modal::before {
  content: '';
  position: absolute;
  top: -60%;
  left: 50%;
  width: 220px;
  height: 220px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(232, 200, 116, 0.28), transparent 68%);
  pointer-events: none;
}

/* Escudo pirata que corona la carta, montado sobre el borde superior
   como un sello de cera — mismo emblema en cualquier estado del modal. */
.modal-crest {
  position: absolute;
  top: -50px;
  left: 50%;
  transform: translateX(-50%);
  width: 122px;
  z-index: 2;
}

.modal-crest .icon-crest {
  display: block;
}

.modal-crest .icon-crest img {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.6));
}

.modal-eyebrow {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 8px;
  position: relative;
}

.modal-title {
  font-family: 'Marcellus SC', serif;
  font-weight: 400;
  font-size: 21px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin-bottom: 12px;
  position: relative;
}

.modal-body {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-style: italic;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-dim);
  margin-bottom: 22px;
  position: relative;
}

.modal-flourish {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: -6px 0 18px;
}

.modal-flourish-line {
  width: 42px;
  height: 1px;
}
.modal-flourish-line--left { background: linear-gradient(90deg, transparent, rgba(232, 200, 116, 0.4)); }
.modal-flourish-line--right { background: linear-gradient(90deg, rgba(232, 200, 116, 0.4), transparent); }

.icon-skull-mini {
  width: 15px;
  height: auto;
  color: var(--gold-deep);
  opacity: 0.85;
  flex: none;
}

.modal-close {
  position: relative;
  border: 1px solid rgba(232, 200, 116, 0.4);
  background: linear-gradient(180deg, rgba(232, 200, 116, 0.16), rgba(232, 200, 116, 0.04));
  color: var(--gold-bright);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 12px 28px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
}

.modal-close:active { transform: scale(0.96); }

@media (hover: hover) {
  .chest-card:not(.chest-card--locked-disabled):hover { transform: translateY(-3px); }
  .modal-close:hover { background: linear-gradient(180deg, rgba(232, 200, 116, 0.26), rgba(232, 200, 116, 0.08)); }
}

/* ============================================================
   CINEMÁTICA DE APERTURA DE COFRE (estilo AAA)
   Ver js/cinematic.js — el JS solo agrega/quita clases "is-*" en los
   momentos justos; toda la animación en sí vive acá, en CSS Keyframes.
   ============================================================ */

.cinematic {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.cinematic.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.cinematic-backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 45%, rgba(20, 10, 5, 0.55) 0%, rgba(4, 2, 1, 0.96) 78%);
  opacity: 0;
  transition: opacity 0.32s cubic-bezier(0.22, 0.61, 0.36, 1), backdrop-filter 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.cinematic.is-active .cinematic-backdrop {
  opacity: 1;
  backdrop-filter: blur(7px) saturate(0.85);
}

/* ---------- Escenario / cámara ---------- */

.cinematic-stage {
  position: relative;
  width: min(74vw, 460px);
  aspect-ratio: 4 / 3;
  transform: scale(0.92);
  transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.cinematic.is-active .cinematic-stage { transform: scale(1); }

.cinematic-stage.is-impact { animation: camImpact 0.3s cubic-bezier(0.16, 1, 0.3, 1) both; }
.cinematic-stage.is-pushback { animation: camPushback 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; }

@keyframes camImpact {
  0% { transform: scale(1); }
  100% { transform: scale(1.09); }
}

@keyframes camPushback {
  0% { transform: scale(1.09); }
  55% { transform: scale(0.965); }
  100% { transform: scale(1); }
}

/* ---------- El cofre ---------- */

.cinematic-chest-wrap {
  position: absolute;
  inset: 6% 12%;
  z-index: 3;
}

.cinematic-chest-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.7)) brightness(0.86);
  transition: filter 0.5s ease;
}

.cinematic-chest-wrap.is-radiant .cinematic-chest-img {
  filter: drop-shadow(0 20px 46px rgba(0, 0, 0, 0.75)) brightness(1.1) saturate(1.1);
}

.cinematic-chest-wrap.is-trembling {
  animation: chestTremble 0.7s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

.cinematic-chest-wrap.is-opening .cinematic-chest-img {
  animation: chestOpenPulse 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes chestTremble {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0); }
  10% { transform: translate3d(-2px, 1px, 0) rotate(-0.4deg); }
  20% { transform: translate3d(2px, -1px, 0) rotate(0.4deg); }
  30% { transform: translate3d(-2px, 0, 0) rotate(-0.3deg); }
  40% { transform: translate3d(2px, 1px, 0) rotate(0.3deg); }
  50% { transform: translate3d(-1px, -1px, 0) rotate(-0.5deg); }
  60% { transform: translate3d(2px, 0, 0) rotate(0.4deg); }
  70% { transform: translate3d(-2px, 1px, 0) rotate(-0.3deg); }
  80% { transform: translate3d(1px, -1px, 0) rotate(0.3deg); }
  90% { transform: translate3d(-1px, 0, 0) rotate(-0.2deg); }
}

@keyframes chestOpenPulse {
  0% { transform: scale(1) translateY(0); }
  45% { transform: scale(1.018) translateY(-2px); }
  100% { transform: scale(1.03) translateY(-4px); }
}

/* Luz que se filtra por la rendija antes de abrirse */

.cinematic-seam-glow {
  position: absolute;
  left: 10%;
  right: 10%;
  top: 46%;
  height: 8%;
  background: linear-gradient(90deg, transparent, rgba(255, 214, 140, 0.9) 20%, rgba(255, 238, 200, 1) 50%, rgba(255, 214, 140, 0.9) 80%, transparent);
  filter: blur(6px);
  opacity: 0;
  mix-blend-mode: screen;
  z-index: 4;
  border-radius: 999px;
  pointer-events: none;
}

.cinematic-seam-glow.is-leaking { animation: seamLeak 1.6s cubic-bezier(0.22, 0.61, 0.36, 1) both; }

@keyframes seamLeak {
  0% { opacity: 0; filter: blur(4px); transform: scaleX(0.7); }
  60% { opacity: 0.55; }
  100% { opacity: 0.95; filter: blur(9px); transform: scaleX(1.05); }
}

/* Candado: tiembla y sale despedido girando */

.cinematic-lock {
  position: absolute;
  left: 50%;
  top: 53%;
  transform: translate(-50%, -50%);
  font-size: clamp(26px, 6vw, 40px);
  z-index: 5;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.7));
}

.cinematic-lock.is-tense { animation: lockShake 0.5s ease-in-out both; }
.cinematic-lock.is-breaking { animation: lockBreak 0.6s cubic-bezier(0.4, 0, 0.2, 1) both; }

@keyframes lockShake {
  0%, 100% { transform: translate(-50%, -50%) rotate(0); }
  25% { transform: translate(-52%, -50%) rotate(-6deg); }
  50% { transform: translate(-48%, -50%) rotate(6deg); }
  75% { transform: translate(-51%, -50%) rotate(-4deg); }
}

@keyframes lockBreak {
  0% { transform: translate(-50%, -50%) rotate(0) scale(1); opacity: 1; }
  30% { transform: translate(-50%, -58%) rotate(-25deg) scale(1.1); opacity: 1; }
  100% { transform: translate(15%, -170%) rotate(340deg) scale(0.5); opacity: 0; }
}

/* Cadenas: se tensan y después caen */

.cinematic-chains {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.chain-link {
  position: absolute;
  top: 38%;
  width: 8px;
  height: 42%;
  background: repeating-linear-gradient(180deg, #6b6458 0 6px, #2c2820 6px 12px);
  border-radius: 5px;
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.6);
  opacity: 0.9;
}

.chain-link--left { left: 22%; --tilt: -4deg; transform: rotate(var(--tilt)); }
.chain-link--right { right: 22%; --tilt: 4deg; transform: rotate(var(--tilt)); }

.cinematic-chains.is-falling .chain-link { animation: chainFall 0.9s cubic-bezier(0.55, 0, 0.85, 0.35) both; }

@keyframes chainFall {
  0% { transform: rotate(var(--tilt)) translateY(0); opacity: 0.9; }
  100% { transform: rotate(calc(var(--tilt) * 3)) translateY(140%); opacity: 0; }
}

/* ---------- Luz / atmósfera ---------- */

.cinematic-ground-glow {
  position: absolute;
  left: 50%;
  bottom: 2%;
  width: 72%;
  height: 18%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(255, 200, 120, 0.55), transparent 70%);
  filter: blur(10px);
  opacity: 0;
  mix-blend-mode: screen;
  z-index: 1;
  pointer-events: none;
}

.cinematic-ground-glow.is-lit { animation: groundLit 1.8s cubic-bezier(0.22, 0.61, 0.36, 1) both; }

@keyframes groundLit {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.cinematic-rays {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 140%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(0.4) rotate(0deg);
  background: conic-gradient(
    from 0deg,
    rgba(255, 220, 150, 0) 0deg, rgba(255, 220, 150, 0.35) 6deg, rgba(255, 220, 150, 0) 14deg,
    rgba(255, 220, 150, 0) 40deg, rgba(255, 220, 150, 0.3) 46deg, rgba(255, 220, 150, 0) 54deg,
    rgba(255, 220, 150, 0) 90deg, rgba(255, 220, 150, 0.35) 96deg, rgba(255, 220, 150, 0) 104deg,
    rgba(255, 220, 150, 0) 140deg, rgba(255, 220, 150, 0.3) 146deg, rgba(255, 220, 150, 0) 154deg,
    rgba(255, 220, 150, 0) 190deg, rgba(255, 220, 150, 0.35) 196deg, rgba(255, 220, 150, 0) 204deg,
    rgba(255, 220, 150, 0) 240deg, rgba(255, 220, 150, 0.3) 246deg, rgba(255, 220, 150, 0) 254deg,
    rgba(255, 220, 150, 0) 290deg, rgba(255, 220, 150, 0.35) 296deg, rgba(255, 220, 150, 0) 304deg,
    rgba(255, 220, 150, 0) 330deg, rgba(255, 220, 150, 0.3) 336deg, rgba(255, 220, 150, 0) 344deg,
    rgba(255, 220, 150, 0) 360deg
  );
  filter: blur(4px);
  opacity: 0;
  mix-blend-mode: screen;
  z-index: 2;
  pointer-events: none;
}

.cinematic-rays.is-bursting { animation: raysBurst 1.4s cubic-bezier(0.16, 1, 0.3, 1) both; }

@keyframes raysBurst {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4) rotate(0deg); }
  30% { opacity: 0.9; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5) rotate(35deg); }
}

.cinematic-burst {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 60%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(0.3);
  border-radius: 50%;
  background: radial-gradient(circle, #fff6da 0%, #ffd98a 30%, rgba(255, 180, 90, 0.5) 55%, transparent 75%);
  opacity: 0;
  mix-blend-mode: screen;
  z-index: 6;
  pointer-events: none;
}

.cinematic-burst.is-flashing { animation: burstFlash 0.9s cubic-bezier(0.16, 1, 0.3, 1) both; }

@keyframes burstFlash {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
  35% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2.1); }
}

/* ---------- Partículas (polvo, chispas, motas doradas, humo, gemas) ---------- */

.cinematic-particles {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  overflow: visible;
}

.p-dust, .p-spark, .p-gold, .p-smoke, .p-gem {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  will-change: transform, opacity;
}

.p-dust {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(200, 180, 150, 0.7);
  filter: blur(0.5px);
  animation: dustFall var(--dur, 1.6s) ease-in var(--delay, 0s) both;
}

@keyframes dustFall {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  15% { opacity: 0.8; }
  100% { transform: translate3d(var(--dx, 0), 60px, 0); opacity: 0; }
}

.p-spark {
  width: 2px;
  height: 10px;
  border-radius: 2px;
  background: linear-gradient(180deg, #fff6da, transparent);
  box-shadow: 0 0 6px 1px rgba(255, 220, 150, 0.8);
  animation: sparkFly var(--dur, 0.6s) cubic-bezier(0.16, 1, 0.3, 1) var(--delay, 0s) both;
}

@keyframes sparkFly {
  0% { transform: translate3d(0, 0, 0) rotate(var(--rot, 0deg)); opacity: 1; }
  100% { transform: translate3d(var(--dx, 0), var(--dy, -40px), 0) rotate(var(--rot, 0deg)); opacity: 0; }
}

.p-gold {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff6da, #e8c874 60%, transparent);
  box-shadow: 0 0 8px 2px rgba(232, 200, 116, 0.7);
  animation: goldFloat var(--dur, 1.8s) ease-out var(--delay, 0s) both;
}

@keyframes goldFloat {
  0% { transform: translate3d(0, 0, 0) scale(0.6); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translate3d(var(--dx, 0), var(--dy, -70px), 0) scale(1); opacity: 0; }
}

.p-smoke {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(120, 100, 80, 0.35), transparent 70%);
  filter: blur(6px);
  animation: smokeRise var(--dur, 2.2s) ease-out var(--delay, 0s) both;
}

@keyframes smokeRise {
  0% { transform: translate3d(0, 0, 0) scale(0.5); opacity: 0; }
  25% { opacity: 0.55; }
  100% { transform: translate3d(var(--dx, 0), -90px, 0) scale(1.8); opacity: 0; }
}

.p-gem {
  width: 7px;
  height: 7px;
  background: linear-gradient(135deg, #fff, #9fd8ff 50%, #4a90c2);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  box-shadow: 0 0 6px rgba(160, 220, 255, 0.8);
  animation: gemPop var(--dur, 1.1s) cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0s) both;
}

@keyframes gemPop {
  0% { transform: translate3d(0, 0, 0) rotate(0) scale(0.4); opacity: 0; }
  25% { opacity: 1; }
  100% { transform: translate3d(var(--dx, 0), var(--dy, 40px), 0) rotate(var(--rot, 180deg)) scale(1); opacity: 0; }
}

/* Monedas: física real (gravedad + rebote) vía requestAnimationFrame en Canvas */

.cinematic-coins {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .chest-card--current::after,
  .chest-svg {
    animation: none !important;
  }

  .cinematic-stage,
  .cinematic-chest-wrap,
  .cinematic-seam-glow,
  .cinematic-lock,
  .cinematic-chains .chain-link,
  .cinematic-ground-glow,
  .cinematic-rays,
  .cinematic-burst,
  .p-dust, .p-spark, .p-gold, .p-smoke, .p-gem {
    animation: none !important;
  }

  .cinematic.is-active .cinematic-backdrop { opacity: 1; }
  .cinematic-seam-glow.is-leaking,
  .cinematic-ground-glow.is-lit { opacity: 0.7; }
}