/* =========================================================================
   Cofre Royale — hoja de estilos
   Paleta y tipografías como variables CSS en :root. Reutilizar esas
   variables en vez de introducir colores sueltos.
   Mobile-first; breakpoints principales en 800px y 640px.
   Se respeta prefers-reduced-motion (media query al final).
   ========================================================================= */

/* -------------------------------------------------------------------------
   FUENTES AUTO-ALOJADAS
   Antes se cargaban desde fonts.googleapis.com / fonts.gstatic.com. Servirlas
   desde el propio dominio evita enviar la IP de cada visitante a Google (dato
   personal según el RGPD) y hace que la web no dependa de terceros ni para el
   texto. Son las variantes "latin" (variables) de Google Fonts, que cubren el
   castellano: tildes, ñ, ü, ¿, ¡, € y comillas.
   Para actualizarlas: descarga de nuevo el .woff2 "latin" de cada familia
   desde fonts.google.com (o repite el proceso de esta sesión) y sustituye los
   archivos de assets/fonts/. Recuerda subir CACHE_VERSION en sw.js.
   ------------------------------------------------------------------------- */
@font-face{
  font-family:'Baloo 2'; font-style:normal; font-weight:500 800;
  font-display:swap; src:url('fonts/baloo2-latin.woff2') format('woff2');
}
@font-face{
  font-family:'Manrope'; font-style:normal; font-weight:400 800;
  font-display:swap; src:url('fonts/manrope-latin.woff2') format('woff2');
}
@font-face{
  font-family:'JetBrains Mono'; font-style:normal; font-weight:500 700;
  font-display:swap; src:url('fonts/jetbrainsmono-latin.woff2') format('woff2');
}

:root{
  --ink:#0A1428;
  --panel:#121F3D;
  --panel-2:#182A52;
  --line:rgba(147,162,199,0.18);
  --gold:#F2B705;
  --gold-2:#FFD76A;
  --royal:#3E7BFA;
  --arcane:#8C7BEF;
  --arcane-2:#7CFFEA;
  --text:#EDF2FF;
  --text-dim:#93A2C7;
  --success:#33D17A;

  --common:#9BA4B5;
  --rare:#FF8A3D;
  --epic:#B15DFF;
  --legendary:#FFD76A;
  --champion:#FF4B5C;

  --display:'Baloo 2', system-ui, sans-serif;
  --body:'Manrope', system-ui, sans-serif;
  --mono:'JetBrains Mono', monospace;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:
    radial-gradient(ellipse 900px 500px at 50% -10%, #1A2E5C 0%, transparent 60%),
    var(--ink);
  color:var(--text);
  font-family:var(--body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img,svg{ display:block; }
button{ font-family:inherit; }
input{ font-family:inherit; }
a{ color:var(--gold-2); }

/* Selección y barra de scroll acordes al tema oscuro. */
::selection{ background:var(--gold); color:#2A1B00; }
::-moz-selection{ background:var(--gold); color:#2A1B00; }
html{ scrollbar-color:var(--panel-2) transparent; scrollbar-width:thin; }
::-webkit-scrollbar{ width:12px; height:12px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{
  background:var(--panel-2); border-radius:100px; border:3px solid var(--ink);
}
::-webkit-scrollbar-thumb:hover{ background:color-mix(in srgb, var(--panel-2), var(--text) 14%); }

.wrap{ max-width:1180px; margin:0 auto; padding:0 20px; }

/* ---------- SITE HEADER / LOGO ---------- */
.site-header{ border-bottom:1px solid var(--line); }
.site-header .wrap{ padding-top:18px; padding-bottom:18px; }
.logo{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--display); font-weight:800; font-size:1.5rem;
  color:var(--text); letter-spacing:0.3px; line-height:1;
}
.logo b{ color:var(--gold-2); font-weight:800; }
.logo-mark{
  width:34px; height:34px; border-radius:9px; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center; font-size:1.05rem;
  background:linear-gradient(145deg, var(--gold-2), var(--gold) 60%, #C98A00);
  box-shadow:0 4px 14px rgba(242,183,5,0.35);
}
/* La corona de la cabecera es el disparador de un easter egg (7 toques):
   sin selección de texto ni destello de tap al pulsarla rápido. */
.site-header .logo-mark{ user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent; }

@media (max-width:640px){ .logo{ font-size:1.3rem; } }

/* ---------- INTRO / H1 ----------
   H1 real con palabras clave (SEO / requisitos de contenido de AdSense).
   El logo de la cabecera sigue siendo solo la marca; el encabezado de
   página es este. */
.page-intro{ padding:24px 0 4px; max-width:760px; }
.page-intro h1{
  font-family:var(--display); font-weight:800; line-height:1.18;
  font-size:1.7rem; margin:0 0 8px; color:var(--text); letter-spacing:0.2px;
}
.page-intro h1 b{ color:var(--gold-2); font-weight:800; }
.page-intro p{ margin:0; color:var(--text-dim); font-size:0.95rem; max-width:60ch; }
@media (max-width:640px){
  .page-intro{ padding-top:18px; }
  .page-intro h1{ font-size:1.35rem; }
  .page-intro p{ font-size:0.88rem; }
}

/* ---------- ANUNCIOS ----------
   Anuncios "no molestos": cada hueco lleva alto reservado (min-height)
   para que el anuncio no provoque saltos de maquetación al cargar, un
   alto máximo acotado con overflow:hidden para que no se coma la página,
   y una etiqueta "Publicidad" discreta. Formatos intrusivos
   (intersticiales, anclados, vignette) se desactivan en el panel de
   AdSense; ver el comentario de AdSense en index.html. */
.ad-slot{
  position:relative;
  border:1px dashed var(--line); border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  text-align:center; color:var(--text-dim); font-size:0.72rem;
  font-family:var(--mono); letter-spacing:0.03em; padding:20px 14px 14px;
  overflow:hidden; background:rgba(255,255,255,0.015);
}
.ad-slot::before{
  content:"Publicidad";
  position:absolute; top:6px; left:12px;
  font-size:0.56rem; letter-spacing:0.16em; text-transform:uppercase;
  color:var(--text-dim); opacity:0.55;
}
.ad-top{ margin:20px 0 18px; min-height:100px; max-height:140px; }
.ad-in-content{ margin:2px 0 18px; min-height:110px; max-height:280px; }
@media (max-width:640px){
  .ad-top{ min-height:80px; }
}

/* ---------- LAYOUT ---------- */
.layout{
  display:grid; grid-template-columns:300px 1fr; gap:20px;
  align-items:start; padding-bottom:14px;
}
@media (max-width:800px){
  .layout{ grid-template-columns:1fr; }
}

/* ---------- SIDEBAR / CHEST ---------- */
.sidebar{
  background:var(--panel); border:1px solid var(--line); border-radius:16px;
  padding:26px 20px; text-align:center; position:sticky; top:20px;
}
/* En una columna (móvil) la barra lateral es tan alta que el "sticky"
   la deja tapando el contenido al hacer scroll: se fija estática.
   Esta regla va DESPUÉS de la de arriba a propósito (misma especificidad,
   gana la última). */
@media (max-width:800px){
  .sidebar{ position:static; top:auto; }
}
.sidebar h2{
  font-family:var(--display); font-size:1.2rem; margin:0 0 2px; letter-spacing:0.2px;
}
.chest-stage{ position:relative; width:180px; height:164px; margin:10px auto 22px; }

/* Aura detrás del cofre. Tamaño FIJO: solo cambia la opacidad (antes
   escalaba y daba un "salto" al reiniciar el bucle). */
.rays{
  position:absolute; left:50%; top:50%; width:184px; height:184px; border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(124,255,234,0.22) 0%, rgba(124,255,234,0.08) 45%, rgba(124,255,234,0) 70%);
  opacity:0; transition:opacity .45s ease;
}
.chest-stage.open .rays{ opacity:1; animation:auraFade 3.2s ease-in-out infinite; }
@keyframes auraFade{ 0%,100%{ opacity:0.6; } 50%{ opacity:1; } }

/* Luz cálida que sale por la abertura al abrir. */
.glow{
  position:absolute; left:50%; bottom:60px; transform:translate(-50%,0);
  width:8px; height:8px; border-radius:50%;
  background:var(--gold-2); filter:blur(15px); opacity:0; transition:all .5s ease;
}
.chest-stage.open .glow{ opacity:0.8; width:112px; height:82px; }

/* ---- Cofre: diseño CSS propio, NO arte de Supercell (ver CLAUDE.md) ---- */
.chest{
  position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
  width:150px; height:122px;
}
.chest-stage.shaking .chest{ animation:shake .5s ease-in-out; }

.chest-base{
  position:absolute; left:0; bottom:0; width:150px; height:86px; border-radius:12px;
  background:linear-gradient(160deg, #8676E6 0%, #4B3A9E 55%, #2B1F66 100%);
  border:2px solid #170F3D;
  box-shadow:0 20px 30px rgba(0,0,0,0.5),
             inset 0 0 22px rgba(140,120,255,0.25),
             inset 0 3px 0 rgba(255,255,255,0.14);
}
/* Banda metálica vertical del cofre */
.chest-base::after{
  content:""; position:absolute; top:-2px; bottom:-2px; left:50%; width:22px;
  transform:translateX(-50%);
  background:linear-gradient(90deg, rgba(0,0,0,0.30), rgba(255,255,255,0.16) 50%, rgba(0,0,0,0.30));
  border-left:1px solid rgba(0,0,0,0.4); border-right:1px solid rgba(0,0,0,0.4);
}

/* Tapa cerrada: apoyada sobre el cuerpo (solapa ~8px, sin hueco).
   Al abrir se levanta por encima del cuerpo con una ligera inclinación
   (como una tapa de cofre que salta al abrirse); la luz sale por debajo. */
.chest-lid{
  position:absolute; left:-1px; bottom:78px; width:152px; height:42px;
  border-radius:13px 13px 4px 4px;
  background:linear-gradient(160deg, #ADA0F7 0%, #6E5BCB 60%, #4B3A9E 100%);
  border:2px solid #170F3D;
  box-shadow:inset 0 3px 0 rgba(255,255,255,0.22), inset 0 -8px 12px rgba(0,0,0,0.28);
  transform-origin:50% 100%;
  transition:transform .5s cubic-bezier(.3,.9,.4,1.15);
  z-index:2;
}
.chest-stage.open .chest-lid{ transform:translateY(-30px) rotate(-8deg); }

.chest-lock{
  position:absolute; left:50%; bottom:70px; z-index:3;
  width:24px; height:24px; border-radius:6px;
  transform:translateX(-50%) rotate(45deg);
  background:conic-gradient(from 45deg, var(--arcane-2), var(--royal), var(--arcane-2));
  border:2px solid #170F3D;
  box-shadow:0 0 14px rgba(124,255,234,0.55);
  transition:opacity .25s ease;
}
.chest-stage.open .chest-lock{ opacity:0; }

@keyframes shake{
  0%,100%{ transform:translateX(-50%) rotate(0); }
  20%{ transform:translateX(-50%) rotate(-3deg); }
  40%{ transform:translateX(-50%) rotate(3deg); }
  60%{ transform:translateX(-50%) rotate(-2deg); }
  80%{ transform:translateX(-50%) rotate(2deg); }
}

.particle{
  position:absolute; left:50%; top:52%; width:7px; height:7px; border-radius:2px;
  opacity:0; pointer-events:none; animation:burst .8s ease-out forwards;
}
@keyframes burst{
  0%{ opacity:1; transform:translate(-50%,-50%) rotate(0) translateY(0) scale(1); }
  100%{ opacity:0; transform:translate(-50%,-50%) rotate(var(--rot)) translateY(-90px) scale(0.4); }
}

.btn{
  font-family:var(--display); font-weight:700; font-size:1rem;
  border-radius:100px; padding:13px 34px; cursor:pointer; border:none;
  transition:transform .15s ease, box-shadow .15s ease;
}
.btn:active{ transform:scale(0.97); }
.btn:focus-visible{ outline:3px solid var(--royal); outline-offset:3px; }
.btn-primary{
  background:linear-gradient(160deg, var(--gold-2), var(--gold) 65%);
  color:#2A1B00; box-shadow:0 10px 24px rgba(242,183,5,0.28); width:100%;
}
.btn-primary:hover{ box-shadow:0 12px 28px rgba(242,183,5,0.4); }
.btn-ghost{
  background:var(--ink); color:var(--text); border:1px solid var(--line);
  width:100%; margin-top:10px; font-size:0.92rem; padding:11px 20px;
}
.btn-ghost:hover{ border-color:var(--royal); }
/* "Ajustes" es configuración, no una acción: se separa y se atenúa un poco
   para que no compita con "Abrir" / "Mazo rápido" / "Draft". */
#settingsBtn{ margin-top:16px; font-size:0.86rem; color:var(--text-dim); }
#settingsBtn:hover{ color:var(--text); }
.hint{ font-size:0.68rem; color:var(--text-dim); margin:10px 0 0; line-height:1.5; }
.hint b{ color:var(--text); font-weight:700; }

/* Opción "Mazo jugable" en la barra lateral. */
.opt{
  display:flex; align-items:flex-start; gap:9px; margin-top:14px;
  text-align:left; cursor:pointer; font-weight:700; font-size:0.88rem; color:var(--text);
}
.opt input{ margin:2px 0 0; width:16px; height:16px; accent-color:var(--gold); flex-shrink:0; cursor:pointer; }
.opt small{ display:block; font-weight:500; font-size:0.72rem; color:var(--text-dim); margin-top:2px; }

/* ---------- MAIN COLUMN ---------- */
.panel{
  background:var(--panel); border:1px solid var(--line); border-radius:16px;
  padding:22px; margin-bottom:18px;
}
/* El panel del mazo es el contenido estrella: borde superior dorado (es el
   propio `border-top`, así sigue exactamente la esquina redondeada y no se
   "sale") y encabezado en dorado para que el ojo aterrice ahí primero. */
.panel-primary{
  border-color:color-mix(in srgb, var(--gold) 28%, var(--line));
  border-top:3px solid var(--gold);
}
.panel-primary > .panel-head h2{ color:var(--gold-2); }
.panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; flex-wrap:wrap; gap:10px; }
.panel-head h2{ font-family:var(--display); font-size:1.1rem; margin:0; }
.panel-head-right{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

/* Botón "🎲 Nuevo mazo" en la cabecera del panel del mazo. */
.btn-reroll{
  background:linear-gradient(160deg, var(--gold-2), var(--gold) 65%);
  color:#2A1B00; font-family:var(--display); font-weight:700; font-size:0.86rem;
  border:none; border-radius:100px; padding:9px 18px; cursor:pointer;
  box-shadow:0 6px 16px rgba(242,183,5,0.25);
}
.btn-reroll:hover{ box-shadow:0 8px 20px rgba(242,183,5,0.4); }
.btn-reroll:active{ transform:scale(0.97); }

.empty-state{ position:relative; text-align:center; padding:34px 16px 42px; color:var(--text-dim); }
.empty-state::before{
  content:"👑"; position:absolute; left:50%; top:54%; transform:translate(-50%,-50%);
  font-size:8rem; line-height:1; opacity:0.05; pointer-events:none;
}
.empty-state p{ position:relative; margin:4px 0; }
.empty-state .big{ font-size:1.05rem; color:var(--text); font-weight:700; font-family:var(--display); }
/* Rejilla fantasma: insinúa la mano de 8 cartas antes de generar. */
.empty-ghost{
  position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:10px;
  max-width:320px; margin:0 auto 24px;
}
.empty-ghost span{
  display:block; aspect-ratio:4/5; border-radius:10px;
  border:1px dashed var(--line); border-top:3px solid var(--line);
  background:rgba(255,255,255,0.015);
}
@media (max-width:640px){ .empty-ghost{ max-width:250px; gap:7px; } }

.deck-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; }
@media (max-width:640px){ .deck-grid{ grid-template-columns:repeat(2, 1fr); } }

.card{
  position:relative; background:var(--ink);
  /* Tinte muy sutil del color de rareza (progresivo: sin color-mix se
     queda en var(--ink)). --card-color lo pone cardHTML por carta. */
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--card-color, var(--common)) 12%, var(--ink)),
    var(--ink) 76%);
  border:1px solid var(--line); border-top:3px solid var(--card-color, var(--common));
  border-radius:12px; padding:16px 10px 12px; text-align:center;
  opacity:0; transform:translateY(10px) scale(0.96);
  animation:cardIn .45s ease forwards; animation-delay:var(--d, 0s);
}
@keyframes cardIn{ to{ opacity:1; transform:none; } }

.card .elixir{
  position:absolute; top:-10px; left:-6px; width:26px; height:26px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--arcane-2), #14A085 65%);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-weight:700; font-size:0.72rem; color:#022;
  border:2px solid var(--panel);
}
.card .icon{ font-size:2.8rem; margin:2px 0 10px; display:flex; align-items:center; justify-content:center; height:104px; }
.card .icon img{ width:104px; height:104px; object-fit:contain; filter:drop-shadow(0 3px 8px rgba(0,0,0,0.5)); }
@media (max-width:640px){
  .card .icon{ height:120px; font-size:3.2rem; }
  .card .icon img{ width:120px; height:120px; }
}
.card .name{ font-family:var(--body); font-weight:700; font-size:0.85rem; }
.card .rarity{ margin-top:6px; font-family:var(--mono); font-size:0.62rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--card-color, var(--common)); }

/* ---------- DETALLE DE CARTA (hover / foco / toque) ----------
   Solo en el mazo generado (.deck-grid): zoom sutil del icono, realce del
   borde y un chip con el tipo de carta. El chip está oculto por defecto
   (también en los popups, que usan .card pero no lo necesitan). */
.card-type{ display:none; }
.deck-grid .card-type{
  display:block; position:absolute; left:6px; right:6px; bottom:6px;
  font-family:var(--mono); font-size:0.56rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--text); background:rgba(10,20,40,0.94);
  border:1px solid var(--card-color, var(--line)); border-radius:7px; padding:4px 0;
  opacity:0; transform:translateY(4px);
  transition:opacity .15s ease, transform .15s ease; pointer-events:none;
}
/* El "lift" no se hace con transform en .card: la animación de entrada
   (cardIn, con fill forwards) lo sobrescribiría. Se usan borde y sombra. */
.deck-grid .card{ transition:border-color .16s ease, box-shadow .16s ease; }
.deck-grid .card .icon img{ transition:transform .18s ease; }
.deck-grid .card:hover,
.deck-grid .card:focus-visible{
  border-color:var(--card-color, var(--royal));
  box-shadow:0 14px 30px rgba(0,0,0,0.5);
  /* Resplandor del color de rareza (sustituye a la sombra negra, que sobre
     fondo oscuro apenas se ve). */
  box-shadow:0 0 0 1px var(--card-color, var(--royal)),
             0 12px 30px color-mix(in srgb, var(--card-color, var(--royal)) 34%, transparent);
}
.deck-grid .card:focus-visible{ outline:2px solid var(--royal); outline-offset:2px; }
.deck-grid .card:hover .icon img,
.deck-grid .card:focus-visible .icon img{ transform:scale(1.09); }
.deck-grid .card:hover .card-type,
.deck-grid .card:focus-visible .card-type,
.deck-grid .card:active .card-type{ opacity:1; transform:none; }

/* ---------- CANDADO (fijar carta y volver a tirar) ----------
   Solo en el mazo generado. En los popups (.reveal-grid / .preview-grid)
   el botón se oculta. */
.card-lock{ display:none; }
.deck-grid .card-lock{
  display:flex; align-items:center; justify-content:center;
  position:absolute; top:-10px; right:-8px; z-index:4;
  width:26px; height:26px; border-radius:50%; padding:0; cursor:pointer;
  font-size:0.78rem; line-height:1;
  background:var(--panel-2); color:var(--text);
  border:2px solid var(--panel);
  opacity:0; transition:opacity .15s ease, transform .12s ease, box-shadow .15s ease;
}
.deck-grid .card:hover .card-lock,
.deck-grid .card:focus-within .card-lock{ opacity:1; }
.deck-grid .card-lock:hover{ transform:scale(1.12); }
.deck-grid .card-lock:focus-visible{ outline:2px solid var(--royal); outline-offset:2px; }
.deck-grid .card.is-locked .card-lock{
  opacity:1;
  background:linear-gradient(160deg, var(--gold-2), var(--gold) 70%);
  color:#2A1B00; border-color:var(--panel);
  box-shadow:0 0 12px rgba(242,183,5,0.5);
}
.deck-grid .card.is-locked{
  border-color:var(--gold);
  box-shadow:0 0 0 1px var(--gold) inset, 0 10px 26px rgba(0,0,0,0.45);
  /* Mismo lenguaje que el resplandor de hover, en dorado. */
  box-shadow:0 0 0 1px var(--gold) inset,
             0 0 22px color-mix(in srgb, var(--gold) 30%, transparent),
             0 10px 26px rgba(0,0,0,0.4);
}

/* Botón de texto discreto (p. ej. "Soltar candados"). */
.btn-text{
  background:none; border:none; cursor:pointer; padding:4px 2px;
  font-family:var(--body); font-weight:700; font-size:0.8rem; color:var(--gold-2);
}
.btn-text:hover{ text-decoration:underline; }
.btn-round.is-active{
  background:linear-gradient(160deg, var(--gold-2), var(--gold) 70%);
  color:#2A1B00; border-color:transparent;
}

/* ---------- DECK SUMMARY BAR ---------- */
.summary-bar{
  display:flex; align-items:center; flex-wrap:wrap; gap:10px 12px; margin-top:18px;
  padding-top:18px; border-top:1px solid var(--line);
}
.summary-bar .btn-round + .btn-round{ margin-left:-2px; }
.avg-elixir{ display:flex; align-items:center; gap:8px; color:var(--text-dim); font-size:0.88rem; }
.avg-elixir .dot{
  width:22px; height:22px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--arcane-2), #14A085 65%);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-weight:700; font-size:0.65rem; color:#022;
}
.avg-elixir b{ font-family:var(--mono); color:var(--text); }
.rarity-chip{
  font-family:var(--mono); font-size:0.7rem; font-weight:700;
  padding:5px 10px; border-radius:100px; border:1px solid var(--line); color:var(--text-dim);
}
.rarity-chip .n{ color:var(--text); }
.summary-spacer{ flex:1; }
.btn-copy{
  background:linear-gradient(160deg, #4CE092, var(--success) 70%);
  color:#04321A; font-family:var(--display); font-weight:700; font-size:0.92rem;
  border:none; border-radius:100px; padding:11px 22px; cursor:pointer;
  display:flex; align-items:center; gap:8px;
}
.btn-copy:hover{ filter:brightness(1.05); }
.btn-round{
  width:42px; height:42px; border-radius:50%; border:1px solid var(--line);
  background:var(--ink); color:var(--text); cursor:pointer; font-size:1.05rem;
  display:flex; align-items:center; justify-content:center;
}
.btn-round:hover{ border-color:var(--royal); }

/* ---------- CHALLENGES ---------- */
.badge-emblem{
  width:46px; height:46px; border-radius:12px; flex-shrink:0;
  background:linear-gradient(155deg, var(--gold-2), var(--gold) 65%);
  display:flex; align-items:center; justify-content:center; font-size:1.4rem;
  box-shadow:0 6px 14px rgba(242,183,5,0.3);
}
.panel-head-left{ display:flex; align-items:center; gap:12px; }
.archetype-note{ font-family:var(--mono); font-size:0.72rem; color:var(--arcane-2); display:block; margin-top:2px; }
.btn-blue{
  background:var(--royal); color:#fff; font-family:var(--body); font-weight:700; font-size:0.85rem;
  border:none; border-radius:100px; padding:10px 18px; cursor:pointer;
}
.btn-blue:hover{ filter:brightness(1.1); }
.challenge-card{
  background:var(--panel-2); border:1px solid var(--line); border-left:4px solid var(--gold);
  border-radius:12px; padding:16px 18px; margin-top:12px; display:flex; gap:14px; align-items:flex-start;
}
.challenge-card .badge{
  font-family:var(--display); font-weight:700; font-size:0.7rem;
  background:var(--gold); color:#2A1B00; padding:4px 9px; border-radius:7px;
  white-space:nowrap; margin-top:2px; text-transform:uppercase; letter-spacing:0.03em;
}
.challenge-card p{ margin:0; font-size:0.9rem; }
/* Color por dificultad del reto (data-level lo pone renderChallenges). */
.challenge-card[data-level="dificil"]{ border-left-color:var(--rare); }
.challenge-card[data-level="dificil"] .badge{ background:var(--rare); color:#2A1300; }
.challenge-card[data-level="extrema"]{ border-left-color:var(--champion); }
.challenge-card[data-level="extrema"] .badge{ background:var(--champion); color:#fff; }

/* ---------- HOW IT WORKS ---------- */
.how-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:640px){ .how-grid{ grid-template-columns:1fr; } }
.how-step{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:18px; }
.how-step .num{ font-family:var(--mono); color:var(--arcane-2); font-size:0.78rem; font-weight:700; }
.how-step h3{ font-family:var(--display); font-size:1.02rem; margin:8px 0 6px; }
.how-step p{ margin:0; font-size:0.86rem; color:var(--text-dim); }

/* ---------- FAQ ---------- */
.faq{ padding:8px 0 40px; }
.faq h2{ font-family:var(--display); font-size:1.3rem; margin:0 0 16px; }
.faq details{
  border:1px solid var(--line); border-radius:12px; background:var(--panel);
  padding:14px 18px; margin-bottom:10px;
}
/* En pantallas anchas ocupa todo el ancho como el resto, en dos columnas. */
@media (min-width:760px){
  .faq{ display:grid; grid-template-columns:1fr 1fr; gap:10px 16px; align-items:start; }
  .faq h2{ grid-column:1 / -1; }
  .faq details{ margin-bottom:0; }
}
.faq summary{
  cursor:pointer; font-family:var(--display); font-weight:700; font-size:0.98rem;
  list-style:none; color:var(--text);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::before{ content:"+ "; color:var(--arcane); font-weight:800; }
.faq details[open] summary::before{ content:"– "; }
.faq details[open] summary{ margin-bottom:8px; }
.faq p{ margin:0; font-size:0.9rem; line-height:1.6; color:var(--text-dim); }
.faq code{ font-family:var(--mono); font-size:0.85em; color:var(--arcane-2); }

/* ---------- TUS MAZOS (favoritos + historial) ---------- */
.saved-h{
  font-family:var(--display); font-size:0.95rem; margin:6px 0 10px;
  color:var(--text-dim);
}
.saved-h + .saved-list{ margin-bottom:6px; }
.saved-list:empty{ display:none; }
.saved-list + .saved-h{ margin-top:22px; }
.saved-row{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:var(--panel-2); border:1px solid var(--line); border-radius:12px;
  padding:10px 12px; margin-bottom:8px;
}
.saved-icons{ display:flex; gap:3px; flex:1; min-width:0; flex-wrap:wrap; }
.saved-icons img{
  width:38px; height:38px; object-fit:contain; flex-shrink:0;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}
.saved-avg{
  font-family:var(--mono); font-size:0.78rem; color:var(--text-dim); white-space:nowrap;
}
.saved-actions{ display:flex; gap:6px; }
.btn-round.sm{ width:34px; height:34px; font-size:0.9rem; }
.saved-empty{ color:var(--text-dim); font-size:0.82rem; margin:0 0 4px; }
.saved-list:not(:empty) + .saved-empty{ display:none; }
.saved-name{
  flex-basis:100%; font-family:var(--display); font-weight:700; font-size:0.82rem;
  color:var(--text); margin:-2px 0 2px;
}
/* Campo para renombrar un favorito en la propia fila (botón ✎). */
.saved-rename{ flex-basis:100%; margin:-2px 0 2px; }
.saved-rename input{
  width:100%; max-width:260px;
  background:var(--ink); border:1px solid var(--royal); border-radius:8px;
  padding:5px 9px; color:var(--text); font:inherit;
  font-family:var(--display); font-weight:700; font-size:0.82rem;
}
.saved-rename input:focus-visible{ outline:2px solid var(--royal); outline-offset:1px; }
@media (max-width:640px){
  .saved-icons img{ width:32px; height:32px; }
}

/* Estadísticas de sesión (bajo el historial). */
.sess-stats{
  margin-top:20px; padding-top:16px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:10px 18px;
  font-size:0.82rem; color:var(--text-dim);
}
.sess-stats b{ color:var(--text); font-family:var(--mono); }

/* ---------- DOCUMENTO (privacidad, etc.) ---------- */
.doc{ max-width:760px; padding:32px 0 60px; }
.doc h1{ font-family:var(--display); font-size:1.8rem; margin:0 0 6px; }
.doc h2{ font-family:var(--display); font-size:1.15rem; margin:28px 0 8px; }
.doc p, .doc li{ font-size:0.92rem; line-height:1.7; color:var(--text-dim); }
.doc ul{ padding-left:20px; }
.doc a{ color:var(--gold-2); }
.doc code{ font-family:var(--mono); font-size:0.85em; color:var(--arcane-2); }
.doc-meta{ font-family:var(--mono); font-size:0.78rem; color:var(--text-dim); margin:0 0 20px; }
.doc-note{ color:var(--rare); font-size:0.85em; }
.doc-back{ margin-top:36px; }
.doc-back a{ font-weight:700; }

/* ---------- FOOTER ---------- */
footer{
  border-top:1px solid var(--line); margin-top:28px;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,0.22));
}
.footer-inner{
  display:flex; align-items:center; justify-content:center;
  padding:22px 0 6px;
}
.footer-ad{ width:100%; max-width:400px; min-height:100px; max-height:140px; }
@media (max-width:640px){ .footer-ad{ min-height:80px; } }

.footer-bottom{
  display:flex; flex-direction:column; align-items:center; gap:12px;
  text-align:center; padding:20px 0 36px;
}
.footer-bottom::before{
  content:""; width:44px; height:2px; border-radius:2px;
  background:linear-gradient(90deg, transparent, var(--arcane), transparent);
}
.footer-brand{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--display); font-weight:800; font-size:1rem; color:var(--text);
}
.footer-brand b{ color:var(--gold-2); font-weight:800; }
.footer-brand .logo-mark{ width:26px; height:26px; font-size:0.8rem; border-radius:7px; }
.footer-links{ display:flex; gap:18px; flex-wrap:wrap; justify-content:center; }
.footer-links a{ color:var(--text-dim); font-size:0.8rem; text-decoration:none; }
.footer-links a:hover{ color:var(--gold-2); text-decoration:underline; }
.legal{
  margin:0; max-width:600px;
  color:var(--text-dim); font-size:0.74rem; line-height:1.65;
}
.legal a{ color:var(--text-dim); text-decoration:underline; text-underline-offset:2px; }
.legal a:hover{ color:var(--gold-2); }
.footer-copy{
  margin:0; font-family:var(--mono); font-size:0.66rem; letter-spacing:0.05em;
  color:var(--text-dim); opacity:0.65;
}

.toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%, 20px);
  background:var(--success); color:#062; font-weight:700; font-family:var(--body);
  padding:11px 20px; border-radius:100px; font-size:0.88rem;
  opacity:0; pointer-events:none; transition:all .25s ease; box-shadow:0 10px 24px rgba(0,0,0,0.35); z-index:50;
}
.toast.show{ opacity:1; transform:translate(-50%, 0); }

/* Estado "en vivo": aviso de que las cartas vienen de la API oficial. */
.live-badge{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--mono); font-size:0.68rem; font-weight:700;
  color:var(--success); border:1px solid rgba(51,209,122,0.4);
  background:rgba(51,209,122,0.08); border-radius:100px; padding:4px 10px;
}

/* ---------- POPUPS (cofre clásico + captura + ajustes + draft + modos +
   a ciegas + ruleta + nombre + estilo + duelo + escalera + cartas vistas) ----
   Misma caja centrada para todos. El del cofre reutiliza el marcado y CSS
   del cofre de la barra lateral (.chest-stage / .chest-lid). Al añadir un
   modal nuevo hay que sumarlo a estas listas de selectores (ver CLAUDE.md). */
.chest-modal, .preview-modal, .settings-modal, .draft-modal, .modes-modal, .blind-modal, .roulette-modal, .name-modal, .style-modal, .duel-modal, .ladder-modal, .seen-modal{
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.chest-modal[hidden], .preview-modal[hidden], .settings-modal[hidden], .draft-modal[hidden], .modes-modal[hidden], .blind-modal[hidden], .roulette-modal[hidden], .name-modal[hidden], .style-modal[hidden], .duel-modal[hidden], .ladder-modal[hidden], .seen-modal[hidden]{ display:none; }
.chest-modal-backdrop, .preview-modal-backdrop, .settings-modal-backdrop, .draft-modal-backdrop, .modes-modal-backdrop, .blind-modal-backdrop, .roulette-modal-backdrop, .name-modal-backdrop, .style-modal-backdrop, .duel-modal-backdrop, .ladder-modal-backdrop, .seen-modal-backdrop{
  position:absolute; inset:0;
  background:rgba(5,9,20,0.8); backdrop-filter:blur(4px);
}
.chest-modal-box, .preview-modal-box, .settings-modal-box, .draft-modal-box, .modes-modal-box, .blind-modal-box, .roulette-modal-box, .name-modal-box, .style-modal-box, .duel-modal-box, .ladder-modal-box, .seen-modal-box{
  position:relative; z-index:1;
  width:min(560px,100%); max-height:calc(100dvh - 40px); overflow-y:auto;
  background:linear-gradient(180deg, var(--panel-2), var(--panel));
  border:1px solid var(--line); border-radius:20px;
  padding:24px 22px 26px; text-align:center;
  box-shadow:0 30px 80px rgba(0,0,0,0.55);
  animation:modalIn .3s ease both;
}
@keyframes modalIn{ from{ opacity:0; transform:translateY(14px) scale(0.97); } }
.chest-modal-box h3, .preview-modal-box h3, .settings-modal-box h3, .draft-modal-box h3, .modes-modal-box h3, .blind-modal-box h3, .roulette-modal-box h3, .name-modal-box h3, .style-modal-box h3, .duel-modal-box h3, .ladder-modal-box h3, .seen-modal-box h3{ font-family:var(--display); font-size:1.2rem; margin:0 0 4px; }
.chest-modal .chest-stage{ margin:4px auto 12px; }
.chest-modal .btn-primary, .preview-modal .btn-primary, .settings-modal .btn-primary, .draft-modal .btn-primary, .roulette-modal .btn-primary, .name-modal .btn-primary{ width:auto; padding:12px 28px; }

/* ---- Modo "A ciegas" ---- */
.blind-hint{ margin:0 0 14px; font-size:0.76rem; color:var(--text-dim); }
.blind-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:16px; }
@media (max-width:560px){ .blind-grid{ grid-template-columns:repeat(2,1fr); } }
.blind-grid .card{ opacity:1; transform:none; animation:none; padding:14px 6px 10px; }
.blind-grid .card .icon{ height:74px; font-size:2.1rem; margin:2px 0 6px; }
.blind-grid .card .icon img{ width:74px; height:74px; }
.blind-grid .card .name{ font-size:0.76rem; }
.blind-grid .card.reveal-pop{ animation:revealPop .4s cubic-bezier(.2,.9,.3,1.35) both; }
.blind-back{
  border-radius:12px; border:1px solid var(--line); min-height:150px;
  background:linear-gradient(160deg, #6E5BCB 0%, #4B3A9E 60%, #2B1F66 100%);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-weight:800; font-size:1.9rem; color:var(--gold-2);
}
.blind-actions{ display:flex; gap:10px; margin-bottom:6px; }
.blind-actions .btn{ width:auto; margin-top:0; flex:1; }
/* "Sigo" = seguir arriesgando: azul, para que se lea como acción de
   pleno derecho junto al dorado de "Me planto" (no como botón apagado). */
#blindMoreBtn{ background:var(--royal); color:#fff; box-shadow:0 8px 20px rgba(62,123,250,0.3); }
#blindMoreBtn:hover{ filter:brightness(1.12); box-shadow:0 10px 24px rgba(62,123,250,0.45); }
.blind-modal .btn-text{ display:block; margin:6px auto 0; }

/* ---- Selector de modos de juego (rejilla agrupada) ---- */
.mode-group{ margin:14px 0 4px; text-align:left; }
.mode-group + .mode-group{ margin-top:16px; }
.mode-group > h4{
  margin:0 0 8px; font-family:var(--display); font-size:0.72rem; font-weight:800;
  letter-spacing:0.09em; text-transform:uppercase; color:var(--text-dim);
}
.modes-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; }
.mode-item{
  display:flex; flex-direction:column; gap:3px; width:100%; height:100%; cursor:pointer;
  background:var(--ink); border:1px solid var(--line); border-radius:12px; padding:11px 12px;
  text-align:left; transition:border-color .14s ease, transform .1s ease;
}
.mode-item:hover{ border-color:var(--royal); }
.mode-item:active{ transform:scale(0.99); }
.mode-item:focus-visible{ outline:2px solid var(--royal); outline-offset:2px; }
.mode-name{ display:block; font-family:var(--display); font-weight:700; font-size:0.9rem; color:var(--text); }
.mode-desc{ display:block; font-size:0.75rem; line-height:1.45; color:var(--text-dim); }
@media (max-width:560px){ .modes-grid{ grid-template-columns:1fr; } }

/* Tarjeta con interruptor: el botón ⇄ va sobre el borde derecho, centrado. */
.mode-item-wrap{ position:relative; display:flex; }
.mode-item-wrap .mode-item{ flex:1; }
.mode-item.has-switch{ padding-right:44px; }
.mode-switch{
  position:absolute; top:50%; right:6px; transform:translateY(-50%);
  width:30px; height:30px; border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:var(--panel-2); border:1px solid var(--line); color:var(--text-dim);
  font-size:0.95rem; line-height:1;
  transition:border-color .14s ease, color .14s ease, background .14s ease;
}
.mode-switch:hover{ border-color:var(--royal); color:var(--text); }
.mode-switch:active{ transform:translateY(-50%) scale(0.94); }
.mode-switch:focus-visible{ outline:2px solid var(--royal); outline-offset:2px; }
.mode-switch[aria-pressed="true"]{ border-color:var(--gold); color:var(--gold-2); background:rgba(242,183,5,0.1); }
.draft-budget{ margin:-6px 0 12px; font-family:var(--mono); font-size:0.8rem; color:var(--gold-2); }

/* ---- Draft del chat: interruptor + reloj + opciones numeradas ---- */
.draft-chat-toggle{
  display:inline-block; margin:0 0 12px; cursor:pointer;
  background:var(--ink); border:1px solid var(--line); border-radius:999px;
  padding:5px 14px; font-size:0.76rem; font-weight:700; color:var(--text-dim);
  font-family:var(--display); transition:border-color .14s ease, color .14s ease;
}
.draft-chat-toggle:hover{ border-color:var(--royal); }
.draft-chat-toggle[aria-pressed="true"]{ border-color:var(--gold); color:var(--gold-2); }
.draft-timer{
  margin:-4px 0 12px; font-family:var(--mono); font-size:0.85rem; font-weight:700; color:var(--text);
}
.draft-timer.is-low{ color:#F2545B; }
.draft-choices.is-chat .card{ position:relative; }
.draft-choices.is-chat .card::after{
  content:attr(data-key); position:absolute; top:-9px; left:-9px; z-index:2;
  width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(145deg, var(--gold-2), var(--gold) 60%, #C98A00);
  color:#241a02; font-family:var(--display); font-weight:800; font-size:0.95rem;
  box-shadow:0 3px 10px rgba(242,183,5,0.4);
}

/* ---- La Ruleta ---- */
.roulette-hint, .name-hint{ margin:0 0 14px; font-size:0.78rem; color:var(--text-dim); }
.roulette-wheel{
  width:min(320px,100%); min-height:96px; margin:0 auto 16px;
  display:flex; align-items:center; justify-content:center; padding:16px 18px;
  border-radius:16px; border:1px solid var(--line);
  background:radial-gradient(120% 120% at 50% 0%, rgba(120,90,220,0.28), rgba(20,26,48,0.6));
  font-family:var(--display); font-weight:700; font-size:0.98rem; line-height:1.4; color:var(--text);
}
.roulette-wheel.spinning{ animation:rouletteShake .5s linear infinite; }
@keyframes rouletteShake{ 0%,100%{ transform:rotate(-1.2deg); } 50%{ transform:rotate(1.2deg); } }
.roulette-wheel #rouletteFace.settled{ animation:revealPop .4s cubic-bezier(.2,.9,.3,1.35) both; }
.roulette-result{
  margin:14px auto 4px; padding:12px 14px; border-radius:12px;
  border:1px solid var(--gold); background:rgba(242,183,5,0.08);
  font-size:0.85rem; line-height:1.5; color:var(--text);
}
.roulette-result b{ color:var(--gold-2); }
.roulette-rules{ text-align:left; margin:16px 0 6px; border-top:1px solid var(--line); padding-top:12px; }
.roulette-rules > summary{
  cursor:pointer; font-size:0.8rem; font-weight:700; color:var(--text-dim); font-family:var(--display);
  list-style:none;
}
.roulette-rules > summary::-webkit-details-marker{ display:none; }
.roulette-rules[open] > summary{ margin-bottom:10px; }
.rule-list{ list-style:none; margin:0 0 10px; padding:0; display:flex; flex-direction:column; gap:6px; }
.rule-list:empty{ display:none; }
.rule-list li{
  display:flex; align-items:center; gap:8px;
  background:var(--ink); border:1px solid var(--line); border-radius:10px; padding:8px 10px;
  font-size:0.8rem; line-height:1.4; color:var(--text);
}
.rule-list li .rule-txt{ flex:1; }
.rule-list li .rule-tag{
  flex-shrink:0; font-size:0.62rem; font-weight:800; text-transform:uppercase; letter-spacing:0.06em;
  color:var(--text-dim);
}
.rule-list li .rule-del{
  flex-shrink:0; cursor:pointer; background:none; border:none; color:var(--text-dim);
  font-size:1rem; line-height:1; padding:2px 4px;
}
.rule-list li .rule-del:hover{ color:#F2545B; }
.rule-add{ display:flex; gap:8px; margin-bottom:10px; }
.rule-add input{
  flex:1; background:var(--ink); border:1px solid var(--line); border-radius:10px;
  padding:8px 10px; color:var(--text); font:inherit; font-size:0.8rem;
}
.rule-add input:focus-visible{ outline:2px solid var(--royal); outline-offset:1px; }
.roulette-modal .btn-text, .name-modal .btn-text{ display:block; margin:6px auto 0; }
#rouletteDefaultsBtn{ margin:0; }
#rouletteSpinBtn[disabled]{ opacity:0.5; cursor:not-allowed; }

/* ---- El mazo de tu nombre ---- */
.name-form{ display:flex; flex-direction:column; gap:12px; align-items:center; }
.name-form input{
  width:100%; background:var(--ink); border:1px solid var(--line); border-radius:12px;
  padding:12px 14px; color:var(--text); font:inherit; font-size:0.95rem; text-align:center;
}
.name-form input:focus-visible{ outline:2px solid var(--royal); outline-offset:1px; }

/* ---- Elige tu estilo ---- */
.style-hint, .duel-tally, .ladder-progress, .seen-count{ margin:0 0 14px; font-size:0.78rem; color:var(--text-dim); }
.style-list{ display:flex; flex-direction:column; gap:8px; margin:0 0 8px; text-align:left; }
.style-list button{
  display:block; width:100%; cursor:pointer;
  background:var(--ink); border:1px solid var(--line); border-radius:12px; padding:12px 14px;
  transition:border-color .14s ease, transform .1s ease;
}
.style-list button:hover{ border-color:var(--royal); }
.style-list button:active{ transform:scale(0.99); }
.style-list button:focus-visible{ outline:2px solid var(--royal); outline-offset:2px; }
.style-list .st-name{ display:block; font-family:var(--display); font-weight:700; font-size:0.95rem; color:var(--text); }
.style-list .st-hint{ display:block; margin-top:3px; font-size:0.76rem; line-height:1.45; color:var(--text-dim); }
.style-modal .btn-text, .duel-modal .btn-text, .seen-modal .btn-text{ display:block; margin:8px auto 0; }

/* ---- Duelo de mazos ---- */
.duel-tally b{ color:var(--gold-2); }
.duel-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:0 0 14px; }
@media (max-width:560px){ .duel-grid{ grid-template-columns:1fr; } }
.duel-side{
  display:flex; flex-direction:column; gap:8px;
  background:var(--ink); border:1px solid var(--line); border-radius:14px; padding:12px;
}
.duel-icons{ display:grid; grid-template-columns:repeat(4,1fr); gap:4px; }
.duel-icons .icon{ display:flex; align-items:center; justify-content:center; aspect-ratio:1; font-size:1.1rem; line-height:1; }
.duel-icons .icon img{ width:100%; height:100%; object-fit:contain; }
.duel-style{ font-family:var(--display); font-weight:700; font-size:0.9rem; color:var(--gold-2); }
.duel-stats{ list-style:none; margin:0; padding:0; font-size:0.74rem; line-height:1.55; color:var(--text-dim); text-align:left; }
.duel-stats b{ color:var(--text); font-weight:700; }
.duel-side .btn{ margin-top:auto; width:100%; padding:11px 20px; font-size:0.9rem; }

/* ---- Escalera de retos ---- */
.ladder-progress{ font-family:var(--mono); }
.ladder-rung{
  background:var(--ink); border:1px solid var(--gold); border-radius:14px;
  padding:16px 16px; margin:0 0 14px; font-size:0.92rem; line-height:1.5; color:var(--text);
}
.ladder-rung.is-clear{ border-color:var(--success); }
.ladder-rung .rung-num{ display:block; font-family:var(--display); font-weight:800; font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-dim); margin-bottom:6px; }
.ladder-actions{ display:flex; gap:10px; justify-content:center; margin-bottom:8px; }
.ladder-actions .btn{ flex:1; margin-top:0; }
#ladderDoneBtn{ background:var(--royal); color:#fff; }
#ladderDoneBtn:hover{ filter:brightness(1.12); }
.ladder-modal #ladderResetBtn{ display:block; margin:4px auto 0; }
.ladder-modal #ladderCloseBtn{ display:block; margin:6px auto 0; }

/* ---- Cartas vistas ---- */
.seen-count b{ color:var(--gold-2); }
.seen-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(46px, 1fr)); gap:6px; }
.seen-card{ position:relative; border-radius:8px; border:1px solid var(--line); padding:4px; background:var(--ink); }
.seen-card .icon{ display:flex; align-items:center; justify-content:center; aspect-ratio:1; font-size:1rem; line-height:1; }
.seen-card .icon img{ width:100%; height:100%; object-fit:contain; display:block; }
.seen-card.is-unseen{ opacity:0.32; filter:grayscale(1); }

/* ---- Ajustes del cofre (formulario en dos columnas, alineado a la izq.) ---- */
.settings-modal-box{ text-align:left; padding-bottom:22px; width:min(620px,100%); }
.settings-modal-box h3{ text-align:left; }
.settings-hint{ margin:0 0 16px; font-size:0.76rem; color:var(--text-dim); }
/* Rejilla de dos columnas; los bloques `.full` ocupan el ancho entero. */
.set-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px 18px; align-items:start; margin-bottom:4px; }
.set-grid .full{ grid-column:1 / -1; }
@media (max-width:560px){ .set-grid{ grid-template-columns:1fr; } }
.set-group{ margin-bottom:0; }
.set-label{ display:block; font-weight:800; font-size:0.82rem; margin-bottom:8px; color:var(--text); font-family:var(--display); }
.settings-modal .opt{ margin-top:0; }
.seg{ display:flex; flex-wrap:wrap; gap:6px; }
.seg button{
  flex:1; min-width:74px; padding:9px 10px; border-radius:9px; cursor:pointer;
  border:1px solid var(--line); background:var(--ink); color:var(--text-dim);
  font-family:var(--body); font-weight:700; font-size:0.8rem;
}
/* En las medias columnas los botones se aprietan para caber en una fila.
   `white-space:nowrap` + un min-width que aguanta la etiqueta más larga
   ("Ninguno") evitan que el texto se salga o parta. */
.set-grid .set-group:not(.full) .seg button{
  min-width:56px; padding:8px 6px; font-size:0.75rem; white-space:nowrap;
}
.seg button:hover{ border-color:var(--royal); }
.seg button.is-active{
  background:linear-gradient(160deg, var(--gold-2), var(--gold) 70%);
  color:#2A1B00; border-color:transparent;
}
.checks{ display:flex; flex-wrap:wrap; gap:9px 16px; }
.checks label{ display:flex; align-items:center; gap:7px; font-size:0.85rem; font-weight:600; cursor:pointer; }
.checks input{ width:15px; height:15px; accent-color:var(--gold); cursor:pointer; }
.settings-actions{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-top:20px; padding-top:16px; border-top:1px solid var(--line);
}

/* Selector "Cartas disponibles" (Solo cartas que tengo). */
.owned summary{
  cursor:pointer; font-weight:700; font-size:0.85rem; color:var(--text);
  padding:8px 10px; border:1px solid var(--line); border-radius:9px; background:var(--ink);
  list-style:none;
}
.owned summary::-webkit-details-marker{ display:none; }
.owned summary::before{ content:"▸ "; color:var(--text-dim); }
.owned[open] summary::before{ content:"▾ "; }
.owned #ownedCount{ color:var(--gold-2); }
.owned-actions{ display:flex; gap:14px; margin:10px 0 8px; }
.owned-grid{
  max-height:270px; overflow-y:auto;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(50px, 1fr)); gap:7px;
  border:1px solid var(--line); border-radius:9px; padding:10px;
}
.own-card{
  position:relative; padding:3px; border:1px solid var(--line); border-radius:9px;
  background:var(--ink); cursor:pointer; line-height:0;
  transition:opacity .12s ease, border-color .12s ease, filter .12s ease;
}
.own-card .icon{ display:block; font-size:1.4rem; line-height:1; text-align:center; }
.own-card .icon img{ width:100%; height:auto; display:block; }
.own-card:hover{ border-color:var(--royal); }
.own-card:focus-visible{ outline:2px solid var(--royal); outline-offset:1px; }
.own-card .own-mark{
  position:absolute; top:-5px; right:-5px; width:17px; height:17px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:0.66rem; font-weight:700;
  background:var(--success); color:#04321A; border:2px solid var(--panel-2);
}
.own-card .own-mark::before{ content:"✓"; }
.own-card.is-excluded{ opacity:0.3; filter:grayscale(1); }
.own-card.is-excluded .own-mark{ background:var(--champion); color:#fff; }
.own-card.is-excluded .own-mark::before{ content:"✕"; }

/* Punto dorado en el botón de Ajustes si hay opciones no estándar. */
.btn-settings{ position:relative; }
.btn-settings.has-custom::after{
  content:""; position:absolute; top:9px; right:14px;
  width:8px; height:8px; border-radius:50%;
  background:var(--gold); box-shadow:0 0 8px var(--gold);
}

/* ---- Modo Draft: elige 1 de 3 ---- */
.draft-progress{ margin:0 0 14px; font-family:var(--mono); font-size:0.8rem; color:var(--text-dim); }
.draft-progress span{ color:var(--gold-2); font-weight:700; }
.draft-picks{
  display:flex; flex-wrap:wrap; justify-content:center; gap:5px; margin-bottom:16px; min-height:34px;
}
.draft-picks img{ width:34px; height:34px; object-fit:contain; filter:drop-shadow(0 2px 4px rgba(0,0,0,0.4)); }
.draft-picks .draft-slot{
  width:34px; height:34px; border-radius:7px; border:1px dashed var(--line); box-sizing:border-box;
}
.draft-choices{
  display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:16px;
}
.draft-choices .card{
  opacity:1; transform:none; animation:none; cursor:pointer;
  transition:border-color .14s ease, box-shadow .14s ease, transform .12s ease;
}
.draft-choices .card:hover, .draft-choices .card:focus-visible{
  border-color:var(--card-color, var(--royal));
  box-shadow:0 12px 26px rgba(0,0,0,0.5); transform:translateY(-3px); outline:none;
}
.draft-choices .card .icon{ height:70px; font-size:2rem; margin:2px 0 6px; }
.draft-choices .card .icon img{ width:70px; height:70px; }
.draft-choices .card .name{ font-size:0.74rem; }
@media (max-width:480px){
  .draft-choices .card .icon{ height:58px; }
  .draft-choices .card .icon img{ width:58px; height:58px; }
  .draft-choices .card .name{ font-size:0.68rem; }
}
.draft-modal .btn-text{ display:block; margin:8px auto 0; }

/* ---- Análisis del mazo ---- */
.an-stats{ display:flex; flex-direction:column; gap:2px; }
.an-row{
  display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  padding:9px 0; border-bottom:1px solid var(--line);
}
.an-row:last-child{ border-bottom:none; }
.an-k{ color:var(--text-dim); font-size:0.85rem; }
.an-v{ font-weight:700; font-size:0.88rem; text-align:right; }
.an-warns{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.an-warn, .an-ok{
  font-family:var(--mono); font-size:0.72rem; font-weight:700;
  border-radius:100px; padding:5px 11px;
}
.an-warn{ color:var(--rare); border:1px solid rgba(255,138,61,0.4); background:rgba(255,138,61,0.08); }
.an-ok{ color:var(--success); border:1px solid rgba(51,209,122,0.4); background:rgba(51,209,122,0.08); }

.reveal-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:10px;
  min-height:2px; margin-bottom:16px;
}
@media (max-width:560px){ .reveal-grid{ grid-template-columns:repeat(2,1fr); } }
/* Dentro del popup la carta es algo más compacta y no usa la entrada
   escalonada de .deck-grid: aparece con su propio "pop" al revelarse. */
.reveal-grid .card{
  opacity:1; transform:none; animation:none; padding:14px 6px 10px;
}
.reveal-grid .card .icon{ height:74px; font-size:2.1rem; margin:2px 0 6px; }
.reveal-grid .card .icon img{ width:74px; height:74px; }
.reveal-grid .card .name{ font-size:0.76rem; }
.reveal-grid .card.reveal-pop{ animation:revealPop .4s cubic-bezier(.2,.9,.3,1.35) both; }
@keyframes revealPop{
  0%{ opacity:0; transform:translateY(-24px) scale(0.55); }
  60%{ opacity:1; transform:translateY(3px) scale(1.06); }
  100%{ opacity:1; transform:none; }
}

/* ---- Vista para captura: rejilla "limpia" sin coste de elixir ---- */
.preview-hint{ margin:0 0 14px; font-size:0.76rem; color:var(--text-dim); }
.preview-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:14px;
}
@media (max-width:560px){ .preview-grid{ grid-template-columns:repeat(2,1fr); } }
.preview-grid .card{
  opacity:1; transform:none; animation:none; padding:14px 8px 10px; cursor:default;
}
.preview-grid .card .elixir{ display:none; }   /* <- lo que se pidió quitar */
.preview-grid .card .icon{ height:78px; font-size:2.2rem; margin:2px 0 6px; }
.preview-grid .card .icon img{ width:78px; height:78px; }
.preview-grid .card .name{ font-size:0.78rem; }
.preview-brand{
  display:flex; align-items:center; justify-content:center; gap:7px;
  font-family:var(--display); font-weight:800; font-size:0.92rem;
  color:var(--text); margin-bottom:16px;
}
.preview-brand b{ color:var(--gold-2); }
.preview-brand .logo-mark{ width:24px; height:24px; font-size:0.72rem; border-radius:7px; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.001s !important; transition-duration:0.001s !important; }
}