/* =========================================================
   NAMTAR: ANCIENT REALMS — TOKENS DE DISEÑO
   Paleta: arcilla + basalto (fondo), lapislázuli (energía divina),
   oro viejo (legendario), amatista (épico), sangre seca (vida).

   TIPOGRAFÍA — 100% local, cero dependencias online:
   Los archivos de Cinzel Decorative, Cinzel, Crimson Text y Rajdhani
   viven en assets/fonts/ (ver README-fuentes.txt) y se cargan acá
   como .ttf — el @font-face de abajo los toma automáticamente.
   Si esos archivos NO están presentes, el navegador simplemente
   sigue la cadena de fallback a fuentes ya instaladas en el sistema
   (Cambria/Georgia/Segoe UI) — nunca se intenta una descarga externa.
   ========================================================= */

@font-face {
  font-family: 'Cinzel Decorative Local';
  src: url('../fonts/CinzelDecorative-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cinzel Decorative Local';
  src: url('../fonts/CinzelDecorative-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cinzel Local';
  src: url('../fonts/Cinzel-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cinzel Local';
  src: url('../fonts/Cinzel-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cinzel Local';
  src: url('../fonts/Cinzel-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Crimson Text Local';
  src: url('../fonts/CrimsonText-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Crimson Text Local';
  src: url('../fonts/CrimsonText-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Rajdhani Local';
  src: url('../fonts/Rajdhani-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Rajdhani Local';
  src: url('../fonts/Rajdhani-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Rajdhani Local';
  src: url('../fonts/Rajdhani-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
:root{
  --void:        #0A0805;
  --basalt:      #14100B;
  --clay:        #241B12;
  --clay-light:  #3A2C1C;
  --clay-crack:  #100C08;
  --bone:        #E9DDC2;
  --bone-dim:    #B7A987;
  --lapis:       #1D4E74;
  --lapis-glow:  #55C7E0;
  --gold:        #C79A32;
  --gold-bright: #EACB6E;
  --amethyst:    #7C4E9A;
  --blood:       #7A2A28;
  --stone:       #8A8067;
  --rarity-common:    #8A8067;
  --rarity-rare:      #3E86B5;
  --rarity-epic:      #9257C2;
  --rarity-legendary: #D8A93A;
  --rarity-divine:    #F3E6B8;
  --font-logo:  'Cinzel Decorative Local', 'Trajan Pro', 'Cambria', 'Palatino Linotype', 'Georgia', serif;
  --font-ui:    'Cinzel Local', 'Cambria', 'Palatino Linotype', 'Book Antiqua', 'Georgia', serif;
  --font-lore:  'Crimson Text Local', 'Georgia', 'Palatino Linotype', 'Times New Roman', serif;
  --font-data:  'Rajdhani Local', 'Segoe UI Semibold', 'Segoe UI', 'Arial Narrow', Tahoma, sans-serif;
  --radius: 4px;
}
*{ box-sizing: border-box; }
html,body{
  margin:0; padding:0; height:100%;
  background: var(--void);
  color: var(--bone);
  font-family: var(--font-data);
  overflow-x:hidden;
}
::selection{ background: var(--lapis-glow); color:var(--void); }
/* focus visibility */
button:focus-visible, .card:focus-visible{
  outline: 2px solid var(--lapis-glow);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; }
}
/* =========================================================
   FONDO — textura de tablilla de arcilla agrietada
   ========================================================= */
.board-bg{
  position: fixed; inset:0; z-index:-1;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(85,199,224,0.07), transparent 45%),
    radial-gradient(ellipse at 50% 110%, rgba(199,154,50,0.08), transparent 50%),
    repeating-linear-gradient(115deg, rgba(0,0,0,0.35) 0px, rgba(0,0,0,0.35) 1px, transparent 1px, transparent 90px),
    repeating-linear-gradient(25deg, rgba(0,0,0,0.25) 0px, rgba(0,0,0,0.25) 1px, transparent 1px, transparent 120px),
    linear-gradient(180deg, var(--basalt), var(--void) 60%);
}
/* =========================================================
   BARRA SUPERIOR
   ========================================================= */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding: 10px 22px;
  background: linear-gradient(180deg, var(--clay), rgba(36,27,18,0.4));
  border-bottom: 1px solid var(--clay-light);
}
.brand{ display:flex; align-items:baseline; gap:10px; }
.brand-glyph{ font-size:1.4rem; color: var(--gold-bright); text-shadow:0 0 12px rgba(234,203,110,.6); }
.brand-name{
  font-family: var(--font-logo); font-weight:700; letter-spacing: 3px;
  font-size: 1.5rem; margin:0; color: var(--gold-bright);
  text-shadow: 0 0 18px rgba(234,203,110,0.35);
}
.brand-sub{
  font-family: var(--font-ui); font-size:.62rem; letter-spacing: 3px;
  color: var(--bone-dim); align-self:flex-end; padding-bottom:3px;
}
.brand-link{ text-decoration:none; }
.turn-banner{
  font-family: var(--font-ui); letter-spacing: 4px; font-size:.85rem;
  color: var(--lapis-glow);
  display:flex; align-items:center; gap:10px;
  padding: 6px 22px; border:1px solid rgba(85,199,224,0.35);
  border-radius: 2px;
  background: rgba(29,78,116,0.12);
  text-shadow: 0 0 10px rgba(85,199,224,0.5);
}
.turn-banner.enemy-turn{ color: var(--blood); border-color: rgba(122,42,40,.5); text-shadow:0 0 10px rgba(122,42,40,.5); background: rgba(122,42,40,.12); }
.turn-glyph{ opacity:.7; }
.topbar-actions{ display:flex; align-items:center; gap:12px; }
.lang-toggle{
  background: var(--clay-light); border:1px solid var(--clay-light);
  color: var(--bone-dim); font-family: var(--font-ui); font-size:.72rem;
  letter-spacing:2px; padding:6px 10px; border-radius: 3px; cursor:pointer;
  display:flex; gap:5px; align-items:center;
}
.lang-opt{ padding:2px 4px; }
.lang-opt.active{ color: var(--gold-bright); }
.lang-sep{ opacity:.4; }
.account-btn{
  background: transparent; border:1px solid var(--clay-light);
  color: var(--bone); font-family: var(--font-ui); font-size:.72rem;
  letter-spacing:1.5px; padding:6px 12px; border-radius:3px; cursor:pointer;
  text-decoration:none; display:flex; align-items:center; gap:8px;
}
.account-btn:hover{ border-color: var(--gold); color: var(--gold-bright); }
.account-avatar{ color: var(--gold-bright); }
/* =========================================================
   ZONAS DE CAMPO (enemigo / jugador)
   ========================================================= */
.realm{ display:flex; align-items:center; gap: 18px; padding: 10px 26px; }
.realm--enemy{ padding-top:16px; }
.realm--player{ padding-bottom: 6px; flex-direction: row-reverse; }
.realm-sidebar{ width: 190px; flex-shrink:0; display:flex; flex-direction:column; gap:10px; }
.vitals-label{ font-family: var(--font-ui); font-size:.6rem; letter-spacing:2px; color: var(--bone-dim); margin-bottom:4px; }
.ziggurat-bar{
  position:relative; height:16px; background: var(--clay-crack);
  border:1px solid var(--clay-light); clip-path: polygon(0 100%, 4% 0, 96% 0, 100% 100%);
}
.ziggurat-fill{ height:100%; background: linear-gradient(90deg, var(--blood), #A9433F); transition: width .3s ease; }
.life-bar .ziggurat-fill{ background: linear-gradient(90deg, #5B7B2E, #8FB84C); }
.realm--enemy .ziggurat-fill{ background: linear-gradient(90deg, var(--blood), #A9433F); }
.ziggurat-value{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:.62rem; letter-spacing:1px; color: var(--bone); text-shadow: 0 1px 2px #000;
}
.essence-gems{ display:flex; gap:4px; flex-wrap:wrap; }
.gem{
  width:14px; height:14px; background: var(--lapis);
  border:1px solid var(--lapis-glow); transform: rotate(45deg);
  box-shadow: 0 0 6px rgba(85,199,224,.5);
}
.gem.empty{ background: transparent; border-color: var(--clay-light); box-shadow:none; }
.hand-count{ display:flex; align-items:center; gap:6px; font-size:.72rem; color: var(--bone-dim); }
.hand-count-icon{ color: var(--gold); }
.field{
  flex:1; display:grid; grid-template-columns: repeat(5, 1fr); gap:10px;
  min-height: 168px;
}
.slot{
  border: 1px dashed rgba(183,169,135,0.25); border-radius: var(--radius);
  background: rgba(0,0,0,0.18);
  display:flex; align-items:center; justify-content:center;
  min-height: 168px; position:relative;
  transition: border-color .15s, background .15s;
}
.slot.slot--targetable{ border-color: var(--gold-bright); background: rgba(234,203,110,0.08); }
.slot.slot--occupied{ border-style: solid; border-color: var(--clay-light); }
.realm-sidebar{ position:relative; }
.realm-sidebar.objetivo-disponible{
  outline: 2px solid var(--gold-bright); outline-offset: 4px; border-radius: var(--radius);
  cursor: pointer; box-shadow: 0 0 14px rgba(234,203,110,.35);
  animation: pulso-objetivo 1s ease-in-out infinite;
}
.realm-sidebar.objetivo-disponible::after{
  content: '⚔ ATACAR AQUÍ';
  position:absolute; top:-22px; left:50%; transform:translateX(-50%);
  font-family: var(--font-ui); font-size:.62rem; letter-spacing:2px;
  color: var(--gold-bright); text-shadow:0 1px 3px #000; white-space:nowrap;
  pointer-events:none;
}
@keyframes pulso-objetivo{
  0%,100%{ box-shadow: 0 0 14px rgba(234,203,110,.35); }
  50%{ box-shadow: 0 0 24px rgba(234,203,110,.75); }
}
.card.card--atacante-seleccionado{ outline: 2px solid var(--lapis-glow); outline-offset: 3px; }
.card.card--pendiente{
  outline: 2px solid var(--gold-bright); outline-offset: 3px;
  cursor: pointer; opacity: 1;
  box-shadow: 0 0 14px rgba(234,203,110,.4);
}
/* Insignia de espada sobre las propias criaturas que todavía pueden atacar:
   el ataque se inicia tocando la criatura, así que sin esta marca no queda
   claro que la carta del tablero es interactuable para eso. */
.card.card--on-field.card--puede-atacar::after{
  content: '⚔';
  position:absolute; bottom:-9px; right:-9px; z-index:3;
  width:22px; height:22px; border-radius:50%;
  background: var(--gold-bright); color: var(--void);
  display:flex; align-items:center; justify-content:center;
  font-size:.72rem; box-shadow: 0 0 8px rgba(234,203,110,.7);
  animation: pulso-espada 1.4s ease-in-out infinite;
  pointer-events:none;
}
@keyframes pulso-espada{
  0%,100%{ transform: scale(1); }
  50%{ transform: scale(1.18); }
}
/* =========================================================
   DIVISOR DE COMBATE
   ========================================================= */
.game-layout{
  display:grid; grid-template-columns: 1fr 270px; gap: 18px;
  align-items:start; padding: 0 18px 20px;
}
.game-board{ display:flex; flex-direction:column; gap:6px; min-width:0; user-select:none; -webkit-user-select:none; -moz-user-select:none; }
.game-sidebar{ display:flex; flex-direction:column; gap:14px; position:sticky; top:14px; }
/* El tablero (mano, campos, ficha del rival) no debe permitir seleccionar
   texto: es una zona de click/drag, no de lectura. El log y el panel de
   detalle sí quedan seleccionables por si el jugador quiere copiar algo. */
#logCombate, #panelDetalle{ user-select:text; -webkit-user-select:text; -moz-user-select:text; }
.combat-divider{ display:flex; align-items:center; gap:16px; padding: 4px 0; }
.divider-line{ flex:1; height:1px; background: linear-gradient(90deg, transparent, var(--clay-light) 20%, var(--gold) 50%, var(--clay-light) 80%, transparent); }
.end-turn-btn{
  font-family: var(--font-ui); letter-spacing:2px; font-size:.72rem;
  background: linear-gradient(180deg, var(--clay-light), var(--clay));
  border:1px solid var(--gold); color: var(--gold-bright);
  padding: 8px 20px; border-radius:3px; cursor:pointer;
  box-shadow: 0 0 12px rgba(199,154,50,0.15);
}
.end-turn-btn:hover{ background: var(--gold); color: var(--void); }
.end-turn-btn:disabled{ opacity:.4; cursor:not-allowed; }
/* =========================================================
   CARTAS
   ========================================================= */
.card{
  --rarity-color: var(--rarity-common);
  width: 118px; height: 168px; border-radius: var(--radius);
  background: linear-gradient(160deg, var(--clay-light), var(--clay) 60%);
  border: 2px solid var(--rarity-color);
  position:relative; cursor:pointer; flex-shrink:0;
  display:flex; flex-direction:column;
  box-shadow: 0 3px 8px rgba(0,0,0,0.5);
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
  /* Sin esto, al hacer click+arrastre sobre el texto de la carta (nombre,
     tipo, stats) el navegador entra en modo "selección de texto" en vez de
     iniciar el drag&drop nativo — así se ve como si la carta "pintara" el
     texto para copiarlo en lugar de moverse. */
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: element;
}
.card *{ user-select: none; -webkit-user-select: none; -moz-user-select: none; }
.card:hover, .card:focus-visible{ transform: translateY(-14px) scale(1.05); z-index:5; box-shadow: 0 14px 26px rgba(0,0,0,0.6); }
.card.card--selected{ outline: 2px solid var(--gold-bright); transform: translateY(-14px) scale(1.05); z-index:6; }
.card.card--rare{ --rarity-color: var(--rarity-rare); }
.card.card--epica{ --rarity-color: var(--rarity-epic); }
.card.card--legendaria{ --rarity-color: var(--rarity-legendary); }
.card.card--divina{
  --rarity-color: var(--rarity-divine);
  animation: divine-pulse 2.6s ease-in-out infinite;
}
@keyframes divine-pulse{
  0%,100%{ box-shadow: 0 3px 8px rgba(0,0,0,.5), 0 0 8px rgba(243,230,184,.25); }
  50%{ box-shadow: 0 3px 8px rgba(0,0,0,.5), 0 0 20px rgba(243,230,184,.65); }
}
.card.card--no-jugable{ opacity:.4; filter: grayscale(.5); cursor:not-allowed; }
.card-cost{
  position:absolute; top:-8px; left:-8px; width:26px; height:26px;
  background: var(--void); border:2px solid var(--gold);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-data); font-weight:700; font-size:.8rem; color: var(--gold-bright);
  z-index:2;
}
.card-rarity-tick{
  position:absolute; top:2px; right:4px; font-size:.55rem; letter-spacing:.5px;
  color: var(--rarity-color); font-family: var(--font-ui);
}
.card-art{
  height: 66px; display:flex; align-items:center; justify-content:center;
  font-size: 1.9rem; background: radial-gradient(circle, rgba(255,255,255,0.06), transparent 70%);
  border-bottom: 1px solid rgba(0,0,0,.4);
}
.card-name{
  font-family: var(--font-ui); font-size:.6rem; letter-spacing:.5px; text-align:center;
  padding: 4px 4px 2px; line-height:1.15; color: var(--bone); min-height: 26px;
}
.card-type{
  text-align:center; font-size:.5rem; letter-spacing:1px; color: var(--bone-dim);
  text-transform:uppercase;
}
.card-stats{
  margin-top:auto; display:flex; justify-content:space-between; padding: 4px 8px 6px;
  font-family: var(--font-data); font-weight:600; font-size:.85rem;
}
.card-stats .atk{ color: #C9564F; }
.card-stats .def{ color: var(--lapis-glow); }
.card.card--equipment .card-art, .card.card--spell .card-art{ font-size: 1.6rem; }
.card.card--on-field{ width:112px; height:158px; }
.card.card--flipped .card-art{ font-size: 1.4rem; }

/* Insignias de estado (bonos de equipo/hechizo, daño acumulado): así se
   nota de un vistazo que una carta cambió sus stats, no solo en el número. */
.card-badges{
  position:absolute; bottom:-11px; left:50%; transform:translateX(-50%);
  display:flex; gap:3px; z-index:4; pointer-events:none;
}
.card-badge{
  font-family: var(--font-data); font-size:.6rem; font-weight:700;
  padding: 1px 6px; border-radius: 9px; white-space:nowrap;
  box-shadow: 0 2px 5px rgba(0,0,0,.6);
  border: 1px solid rgba(255,255,255,.15);
}
.card-badge--buff{ background: linear-gradient(180deg, #6fae3a, #365c1e); color:#eaffda; border-color:#9ed873; }
.card-badge--danio{ background: linear-gradient(180deg, #a02d2d, #5a1a1a); color:#ffd9d9; border-color:#ff8f8f; }

@keyframes destello-buff{
  0%{ box-shadow: 0 3px 8px rgba(0,0,0,.5), 0 0 0 rgba(111,174,58,0); }
  35%{ box-shadow: 0 3px 8px rgba(0,0,0,.5), 0 0 24px rgba(111,174,58,.95); }
  100%{ box-shadow: 0 3px 8px rgba(0,0,0,.5), 0 0 0 rgba(111,174,58,0); }
}
@keyframes destello-danio{
  0%{ box-shadow: 0 3px 8px rgba(0,0,0,.5), 0 0 0 rgba(160,45,45,0); transform: translateX(0); }
  25%{ box-shadow: 0 3px 8px rgba(0,0,0,.5), 0 0 24px rgba(160,45,45,.95); transform: translateX(-3px); }
  50%{ transform: translateX(3px); }
  75%{ transform: translateX(-2px); }
  100%{ box-shadow: 0 3px 8px rgba(0,0,0,.5), 0 0 0 rgba(160,45,45,0); transform: translateX(0); }
}
.card.card--destello-buff{ animation: destello-buff .65s ease-out; }
.card.card--destello-danio{ animation: destello-danio .5s ease-out; }
/* dorso de carta (mano del oponente, decorativo) */
.card-back{
  width: 46px; height: 66px; border-radius:3px;
  background: repeating-linear-gradient(45deg, var(--clay), var(--clay) 4px, var(--clay-light) 4px, var(--clay-light) 8px);
  border: 1px solid var(--gold);
  display:flex; align-items:center; justify-content:center; color: var(--gold-bright); font-size:.9rem;
}
.card-back-tray{ display:flex; gap:6px; }
/* =========================================================
   MANO DEL JUGADOR
   ========================================================= */
.hand-tray{
  display:flex; justify-content:center; gap: -20px;
  padding: 6px 20px 18px; min-height: 190px;
}
.hand-tray .card{ margin: 0 -14px; }
.hand-tray .card:hover{ margin: 0 4px; }
/* =========================================================
   PANEL DE DETALLE (lateral, flotante)
   ========================================================= */
.detail-panel{
  width: 100%; box-sizing:border-box;
  background: linear-gradient(160deg, var(--clay), var(--basalt));
  border: 1px solid var(--clay-light); border-radius: var(--radius);
  padding: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.5);
  max-height: 46vh; overflow-y:auto;
}
.detail-empty{ text-align:center; color: var(--bone-dim); font-family: var(--font-lore); font-style:italic; font-size:.85rem; }
.detail-empty-glyph{ display:block; font-size:1.6rem; color: var(--gold); margin-bottom:8px; }
.detail-header{ display:flex; justify-content:space-between; font-size:.6rem; letter-spacing:1.5px; text-transform:uppercase; margin-bottom:6px; }
.detail-rarity{ color: var(--rarity-color, var(--gold)); font-family: var(--font-ui); }
.detail-type{ color: var(--bone-dim); }
.detail-name{ font-family: var(--font-ui); font-size:1.05rem; color: var(--gold-bright); margin: 0 0 6px; }
.detail-flavor{ font-family: var(--font-lore); font-style:italic; font-size:.82rem; color: var(--bone-dim); margin: 0 0 12px; line-height:1.4; }
.detail-core-stats{ display:flex; gap:8px; margin-bottom:12px; }
.core-stat{ flex:1; text-align:center; border:1px solid var(--clay-light); border-radius:3px; padding:6px 2px; }
.core-stat-label{ display:block; font-family: var(--font-ui); font-size:.55rem; letter-spacing:1px; color: var(--bone-dim); }
.core-stat-value{ font-size:1.15rem; font-weight:700; }
.core-stat.atk .core-stat-value{ color:#C9564F; }
.core-stat.def .core-stat-value{ color: var(--lapis-glow); }
.core-stat.cost .core-stat-value{ color: var(--gold-bright); }
.detail-secondary{ display:grid; grid-template-columns: 1fr 1fr; gap:6px; margin-bottom:12px; }
.sec-stat{ display:flex; justify-content:space-between; font-size:.72rem; border-bottom:1px solid var(--clay-light); padding:3px 0; }
.sec-stat span:last-child{ color: var(--gold-bright); font-weight:600; }
.detail-ability, .detail-equip{ border-top:1px solid var(--clay-light); padding-top:8px; margin-top:8px; }
.detail-ability-label, .detail-equip-label{ font-family: var(--font-ui); font-size:.6rem; letter-spacing:1.5px; color: var(--lapis-glow); }
.detail-ability p{ font-size:.78rem; line-height:1.4; color: var(--bone); }
.equip-item{ font-size:.75rem; padding:3px 0; color: var(--bone); }
.equip-item .equip-bonus{ color: var(--gold-bright); }
/* =========================================================
   LOG DE COMBATE
   ========================================================= */
.combat-log{
  width: 100%; box-sizing:border-box; max-height: 220px;
  overflow-y: auto; background: linear-gradient(160deg, var(--clay), var(--basalt));
  border: 1px solid var(--clay-light); border-radius: var(--radius);
  padding: 10px 12px; font-size:.72rem; color: var(--bone-dim);
  box-shadow: 0 10px 24px rgba(0,0,0,.5);
}
.combat-log-title{
  font-family: var(--font-ui); font-size:.6rem; letter-spacing:2px; text-transform:uppercase;
  color: var(--gold-bright); margin-bottom:6px; border-bottom:1px solid var(--clay-light); padding-bottom:4px;
}
.combat-log div{ margin-bottom:4px; line-height:1.35; }
/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1000px){
  .game-layout{ grid-template-columns: 1fr; padding: 0 14px 20px; }
  .game-sidebar{ position:static; }
  .detail-panel{ max-height:none; }
  .realm{ flex-direction:column; padding: 10px 14px; }
  .realm--player{ flex-direction:column; }
  .realm-sidebar{ width:100%; flex-direction:row; justify-content:space-between; align-items:center; }
  .field{ width:100%; grid-template-columns: repeat(5, minmax(70px,1fr)); }
  .card{ width: 92px; height:132px; }
  .card-art{ height:48px; font-size:1.3rem; }
}

/* =========================================================
   MENÚ PRINCIPAL — extensión con los mismos tokens
   ========================================================= */
.menu-wrap{
  position:relative; min-height:100vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding: 40px 20px; overflow:hidden;
}
.menu-glyphs{ position:absolute; inset:0; pointer-events:none; opacity:.5;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(85,199,224,0.08), transparent 45%),
    radial-gradient(ellipse at 50% 100%, rgba(199,154,50,0.10), transparent 50%);
}
.menu-brand{ position:relative; z-index:1; display:flex; flex-direction:column; align-items:center; margin-bottom:46px; }
.menu-glyph{ font-size:1.8rem; color: var(--gold-bright); text-shadow:0 0 16px rgba(234,203,110,.6); margin-bottom:6px; }
.menu-title{
  font-family: var(--font-logo); font-weight:900; letter-spacing:8px; font-size:4rem;
  margin:0; color: var(--gold-bright); text-shadow: 0 0 24px rgba(234,203,110,.35);
}
.menu-subtitle{
  font-family: var(--font-ui); font-size:.9rem; letter-spacing:6px; text-transform:uppercase;
  color: var(--bone-dim); margin-top:6px;
}
.menu-divider{ width:200px; height:1px; margin-top:22px;
  background: linear-gradient(90deg, transparent, var(--clay-light) 15%, var(--gold) 50%, var(--clay-light) 85%, transparent); }
.menu-actions{ position:relative; z-index:1; display:flex; flex-direction:column; gap:16px; width:320px; }
.menu-btn{
  font-family: var(--font-ui); letter-spacing:2px; text-transform:uppercase; font-size:.85rem;
  text-align:center; text-decoration:none; padding: 15px 22px; border-radius:3px; cursor:pointer;
  background: linear-gradient(180deg, var(--clay-light), var(--clay));
  border: 1px solid var(--clay-light); color: var(--bone);
  transition: border-color .15s, color .15s, box-shadow .15s;
}
.menu-btn:hover{ border-color: var(--gold); color: var(--gold-bright); box-shadow: 0 0 14px rgba(199,154,50,.2); }
.menu-btn.menu-btn--primary{
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  border-color: var(--gold-bright); color: var(--void); font-weight:700;
}
.menu-btn.menu-btn--primary:hover{ box-shadow: 0 0 20px rgba(234,203,110,.5); }
.menu-footer{ position:relative; z-index:1; margin-top:54px; font-size:.7rem; letter-spacing:1px; color: var(--bone-dim); opacity:.6; }

/* =========================================================
   LANDING PAGE PROMOCIONAL (portada pública)
   Nav sticky + hero + secciones con reveal-on-scroll (ver
   assets/js/landing.js) + CTA integrado en el propio diseño.
   Reutiliza .menu-btn/.menu-btn--primary para que los botones de
   Crear cuenta / Iniciar sesión luzcan igual en toda la app.
   ========================================================= */
html{ scroll-behavior: smooth; }
.lp-body{ overflow-x:hidden; }

/* ---- Nav sticky ---- */
.lp-nav{
  position: sticky; top:0; z-index:50;
  background: rgba(10,8,5,.6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(58,44,28,.6);
  transition: background .2s, border-color .2s, box-shadow .2s;
}
.lp-nav.lp-nav--scrolled{
  background: rgba(10,8,5,.92); border-color: var(--clay-light);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.lp-nav-inner{
  max-width:1200px; margin:0 auto; padding: 14px 30px;
  display:flex; align-items:center; justify-content:space-between; gap:20px;
}
.lp-nav-brand{
  font-family: var(--font-logo); color: var(--gold-bright); letter-spacing:3px;
  font-size:1.15rem; text-decoration:none; display:flex; align-items:center; gap:8px;
  text-shadow: 0 0 14px rgba(234,203,110,.35);
}
.lp-nav-glyph{ color: var(--gold-bright); }
.lp-nav-links{ display:flex; gap:28px; }
.lp-nav-links a{
  font-family: var(--font-ui); font-size:.78rem; letter-spacing:1.5px; text-transform:uppercase;
  color: var(--bone-dim); text-decoration:none; transition: color .15s;
}
.lp-nav-links a:hover{ color: var(--gold-bright); }
.lp-nav-auth{ display:flex; align-items:center; gap:20px; }
.lp-nav-login{
  font-family: var(--font-ui); font-size:.8rem; letter-spacing:1px;
  color: var(--bone); text-decoration:none; transition: color .15s;
}
.lp-nav-login:hover{ color: var(--gold-bright); }
.lp-nav-cta{ padding: 9px 20px; font-size:.72rem; }

@media (max-width: 860px){
  .lp-nav-links{ display:none; }
}
@media (max-width: 520px){
  .lp-nav-login{ display:none; }
  .lp-nav-inner{ padding: 12px 18px; }
}

/* ---- Hero ---- */
.lp-hero{
  position:relative; min-height: 92vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; padding: 60px 20px 40px; overflow:hidden;
  text-align:center;
}
.lp-hero-glyphs{ position:absolute; inset:0; pointer-events:none; z-index:0; }
.lp-hero-glyphs span{
  position:absolute; left: var(--gx); top: var(--gy); font-size: var(--gs);
  color: var(--gold); opacity:.14; text-shadow: 0 0 30px rgba(234,203,110,.4);
  animation: lp-float 9s ease-in-out infinite; animation-delay: var(--gd);
}
@keyframes lp-float{
  0%, 100%{ transform: translateY(0) rotate(0deg); }
  50%{ transform: translateY(-22px) rotate(4deg); }
}
.lp-hero-inner{ position:relative; z-index:1; max-width:760px; }
.lp-eyebrow{
  display:inline-block; font-family: var(--font-ui); font-size:.75rem; letter-spacing:2.5px;
  text-transform:uppercase; color: var(--gold-bright); border:1px solid var(--gold);
  border-radius: 20px; padding: 7px 18px; margin-bottom: 26px; opacity:.9;
}
.lp-hero-title{
  font-family: var(--font-logo); font-weight:900; letter-spacing:10px; font-size: clamp(2.6rem, 7vw, 5.2rem);
  margin:0; color: var(--gold-bright); text-shadow: 0 0 34px rgba(234,203,110,.4);
  line-height:1.05;
}
.lp-hero-title span{
  display:block; font-family: var(--font-ui); font-weight:400; letter-spacing:7px;
  font-size: clamp(1rem, 2.4vw, 1.4rem); color: var(--bone-dim); text-shadow:none; margin-top:12px;
}
.lp-hero-tagline{
  font-family: var(--font-lore); font-style:italic; font-size:1.15rem; color: var(--bone);
  max-width:560px; margin: 26px auto 0; line-height:1.6;
}
.lp-hero-cta{ display:flex; flex-wrap:wrap; gap:18px; justify-content:center; margin-top:36px; }
.lp-btn-lg{ padding: 17px 34px; font-size:.9rem; }

.lp-hero-stats{
  display:flex; flex-wrap:wrap; gap: 30px 42px; justify-content:center; margin-top:56px;
}
.lp-hero-stat{ display:flex; flex-direction:column; align-items:center; }
.lp-hero-stat strong{
  font-family: var(--font-logo); color: var(--gold-bright); font-size:1.5rem;
  text-shadow: 0 0 16px rgba(234,203,110,.3);
}
.lp-hero-stat span{
  font-family: var(--font-ui); font-size:.68rem; letter-spacing:1px; text-transform:uppercase;
  color: var(--bone-dim); margin-top:4px;
}

.lp-scroll-cue{
  position:relative; z-index:1; margin-top:50px; width:26px; height:42px;
  border: 2px solid var(--clay-light); border-radius:14px; display:flex; justify-content:center;
  padding-top:8px; text-decoration:none; transition: border-color .2s;
}
.lp-scroll-cue:hover{ border-color: var(--gold); }
.lp-scroll-cue span{
  width:4px; height:8px; border-radius:2px; background: var(--gold-bright);
  animation: lp-scroll-cue-bounce 1.6s ease-in-out infinite;
}
@keyframes lp-scroll-cue-bounce{
  0%, 100%{ opacity:.3; transform: translateY(0); }
  50%{ opacity:1; transform: translateY(8px); }
}

/* ---- Reveal-on-scroll (ver landing.js) ---- */
.lp-reveal{ opacity:0; transform: translateY(28px); transition: opacity .7s ease-out, transform .7s ease-out; }
.lp-reveal.lp-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .lp-reveal{ opacity:1; transform:none; transition:none; }
  .lp-hero-glyphs span, .lp-scroll-cue span{ animation:none; }
}

/* ---- Secciones genéricas ---- */
.lp-section{ position:relative; z-index:1; max-width:1120px; margin:0 auto; padding: 90px 30px; }
.lp-section--alt{ background: linear-gradient(180deg, transparent, rgba(36,27,18,.35) 12%, rgba(36,27,18,.35) 88%, transparent); }
.lp-section-head{ text-align:center; max-width:640px; margin: 0 auto 46px; }
.lp-kicker{
  font-family: var(--font-ui); font-size:.72rem; letter-spacing:3px; text-transform:uppercase;
  color: var(--gold); margin-bottom:10px;
}
.lp-section-title{
  font-family: var(--font-logo); color: var(--gold-bright); letter-spacing:2px;
  font-size: clamp(1.6rem, 3.4vw, 2.3rem); margin: 0 0 14px;
}
.lp-section-desc{ font-family: var(--font-lore); font-style:italic; color: var(--bone-dim); margin:0; }

/* ---- Universo ---- */
.lp-lore-grid{
  display:grid; grid-template-columns: 1fr 1.4fr; gap: 46px; align-items:center;
}
.lp-pull-quote{
  font-family: var(--font-lore); font-style:italic; font-size:1.3rem; line-height:1.55;
  color: var(--gold-bright); border-left: 3px solid var(--gold); padding-left:22px; margin:0;
}
.lp-lore-text p{ font-family: var(--font-lore); font-size:1rem; line-height:1.75; color: var(--bone); margin: 0 0 18px; }
.lp-lore-text p:last-child{ margin-bottom:0; }
@media (max-width: 780px){
  .lp-lore-grid{ grid-template-columns: 1fr; }
}

/* ---- Cinco fuerzas en juego ---- */
.lp-cartas-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); gap: 44px 24px;
  justify-items:center;
}
.lp-carta-item{ display:flex; flex-direction:column; align-items:center; text-align:center; max-width:220px; }
.lp-carta-preview{ transform: scale(1.4); margin-bottom:26px; }
.lp-carta-info{ margin-top:6px; }
.lp-carta-nombre{
  font-family: var(--font-ui); color: var(--gold-bright); letter-spacing:1.5px;
  text-transform:uppercase; font-size:.85rem; margin-bottom:8px;
}
.lp-carta-desc{ font-family: var(--font-lore); font-size:.85rem; color: var(--bone-dim); line-height:1.5; margin:0; }

/* ---- Cómo funciona: timeline ---- */
.lp-timeline{ position:relative; max-width:720px; margin: 0 auto 54px; }
.lp-timeline::before{
  content:''; position:absolute; left:19px; top:8px; bottom:8px; width:2px;
  background: linear-gradient(180deg, var(--gold), var(--clay-light));
}
.lp-timeline-item{ position:relative; display:flex; gap:22px; padding-bottom: 38px; }
.lp-timeline-item:last-child{ padding-bottom:0; }
.lp-timeline-num{
  position:relative; z-index:1; flex-shrink:0; width:40px; height:40px; border-radius:50%;
  background: linear-gradient(160deg, var(--gold-bright), var(--gold));
  color: var(--void); font-family: var(--font-ui); font-weight:700; font-size:1.1rem;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 4px 14px rgba(0,0,0,.4);
}
.lp-timeline-body{ padding-top:6px; }
.lp-timeline-body h3{ font-family: var(--font-ui); color: var(--bone); font-size:1.05rem; margin: 0 0 6px; }
.lp-timeline-body p{ font-family: var(--font-lore); font-size:.92rem; color: var(--bone-dim); line-height:1.6; margin:0; }

.lp-reglas{
  background: linear-gradient(160deg, var(--clay), var(--basalt));
  border:1px solid var(--clay-light); border-radius: var(--radius);
  padding: 30px 34px; max-width:820px; margin:0 auto;
}
.lp-reglas-titulo{ font-family: var(--font-ui); color: var(--gold-bright); letter-spacing:1.5px; font-size:1rem; margin: 0 0 18px; text-align:center; }
.lp-reglas-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 22px; }
.lp-regla strong{ display:block; font-family: var(--font-ui); color: var(--gold-bright); font-size:.85rem; letter-spacing:.5px; margin-bottom:6px; }
.lp-regla p{ font-family: var(--font-lore); font-size:.88rem; color: var(--bone); line-height:1.55; margin:0; }

/* ---- Rarezas ---- */
.lp-rarezas{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; }
.lp-rareza-chip{
  --chip-color: var(--stone);
  font-family: var(--font-ui); font-size:.8rem; letter-spacing:1px;
  padding: 10px 22px; border-radius: 20px; color: var(--void); font-weight:700;
  background: var(--chip-color);
  box-shadow: 0 0 16px var(--chip-color);
  transition: transform .15s;
}
.lp-rareza-chip:hover{ transform: translateY(-3px); }

/* ---- Por qué NAMTAR: features ---- */
.lp-features-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap: 22px;
}
.lp-feature-card{
  background: linear-gradient(160deg, var(--clay), var(--basalt));
  border:1px solid var(--clay-light); border-radius: var(--radius);
  padding: 28px 24px; text-align:center;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.lp-feature-card:hover{
  transform: translateY(-6px); border-color: var(--gold);
  box-shadow: 0 14px 30px rgba(0,0,0,.4);
}
.lp-feature-glifo{ font-size:2rem; margin-bottom:14px; }
.lp-feature-card h3{ font-family: var(--font-ui); color: var(--gold-bright); font-size:.95rem; margin: 0 0 10px; }
.lp-feature-card p{ font-family: var(--font-lore); font-size:.86rem; color: var(--bone-dim); line-height:1.55; margin:0; }

/* ---- CTA banner final ---- */
.lp-cta-banner{
  position:relative; z-index:1; margin: 20px 30px 100px; padding: 70px 30px;
  border-radius: 8px; text-align:center;
  background: radial-gradient(ellipse at 50% 0%, rgba(199,154,50,.16), transparent 60%), linear-gradient(160deg, var(--clay), var(--basalt));
  border: 1px solid var(--gold);
  box-shadow: 0 0 60px rgba(199,154,50,.12);
}
.lp-cta-banner-inner{ max-width:560px; margin:0 auto; }
.lp-cta-banner h2{
  font-family: var(--font-logo); color: var(--gold-bright); letter-spacing:2px;
  font-size: clamp(1.5rem, 3.2vw, 2.1rem); margin: 0 0 12px;
}
.lp-cta-banner p{ font-family: var(--font-lore); font-style:italic; color: var(--bone-dim); margin: 0 0 8px; }

/* ---- Footer ---- */
.lp-footer{ position:relative; z-index:1; border-top: 1px solid var(--clay-light); padding: 40px 30px; }
.lp-footer-inner{
  max-width:1120px; margin:0 auto; display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:20px;
}
.lp-footer-brand{
  font-family: var(--font-logo); color: var(--gold-bright); letter-spacing:2px; font-size:.95rem;
  display:flex; align-items:center; gap:8px;
}
.lp-footer-links{ display:flex; flex-wrap:wrap; gap: 20px; }
.lp-footer-links a{
  font-family: var(--font-ui); font-size:.75rem; letter-spacing:1px; color: var(--bone-dim); text-decoration:none;
  transition: color .15s;
}
.lp-footer-links a:hover{ color: var(--gold-bright); }
.lp-footer-version{ font-size:.68rem; letter-spacing:1px; color: var(--bone-dim); opacity:.6; }

@media (max-width: 640px){
  .lp-section{ padding: 56px 20px; }
  .lp-reglas{ padding: 22px 18px; }
  .lp-cta-banner{ margin: 20px 16px 70px; padding: 50px 22px; }
}

/* =========================================================
   COLECCIÓN Y TIENDA
   ========================================================= */
.page-wrap{ position:relative; z-index:1; max-width:1150px; margin:0 auto; padding:26px 30px 60px; }
.page-back{ font-family: var(--font-ui); font-size:.75rem; letter-spacing:1.5px; color: var(--gold-bright); text-decoration:none; }
.page-title{ font-family: var(--font-logo); color: var(--gold-bright); letter-spacing:3px; margin: 14px 0 4px; font-size:2rem; }
.page-desc{ font-family: var(--font-lore); font-style:italic; color: var(--bone-dim); margin-bottom: 10px; }
.card-grid{ display:flex; flex-wrap:wrap; gap: 30px 18px; margin-top: 26px; padding-top: 14px; }

.sobres-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); gap:18px; margin-top:26px; }
.sobre-card{
  background: linear-gradient(160deg, var(--clay), var(--basalt)); border:1px solid var(--clay-light);
  border-radius: var(--radius); padding:20px; text-align:center;
  box-shadow: 0 6px 18px rgba(0,0,0,.45);
}
.sobre-icono{ width:72px; height:92px; margin:0 auto 14px; border-radius: var(--radius); }
.sobre-nombre{ font-family: var(--font-ui); font-size:1rem; color: var(--bone); margin: 0 0 6px; }
.sobre-desc{ font-family: var(--font-lore); font-style: italic; font-size:.8rem; color: var(--bone-dim); margin-bottom:14px; }
.sobre-precio-btn{
  width:100%; font-family: var(--font-ui); letter-spacing:1.5px; font-size:.75rem;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold)); border:1px solid var(--gold-bright);
  color: var(--void); padding:10px; border-radius:3px; cursor:pointer; font-weight:700;
}

/* =========================================================
   AUTENTICACIÓN — registro / login
   ========================================================= */
.auth-wrap{
  position:relative; z-index:1; min-height:100vh; display:flex;
  align-items:center; justify-content:center; padding: 40px 20px;
}
.auth-card{
  width:100%; max-width:380px; background: linear-gradient(160deg, var(--clay), var(--basalt));
  border:1px solid var(--clay-light); border-radius: var(--radius);
  padding: 34px 30px; box-shadow: 0 16px 40px rgba(0,0,0,.55);
}
.auth-form{ display:flex; flex-direction:column; gap:6px; }
.auth-label{
  font-family: var(--font-ui); font-size:.65rem; letter-spacing:1.5px; text-transform:uppercase;
  color: var(--bone-dim); margin-top:10px;
}
.auth-input{
  font-family: var(--font-data); font-size:.9rem; color: var(--bone);
  background: var(--void); border:1px solid var(--clay-light); border-radius:3px;
  padding:10px 12px; outline:none; transition: border-color .15s, box-shadow .15s;
}
.auth-input:focus{ border-color: var(--gold); box-shadow: 0 0 0 2px rgba(199,154,50,.2); }
.auth-error{
  background: rgba(122,42,40,.25); border:1px solid var(--blood); color:#ffb3b0;
  font-size:.78rem; padding:10px 12px; border-radius:3px; margin-bottom:14px; line-height:1.4;
}
.auth-footer{ text-align:center; font-size:.78rem; color: var(--bone-dim); margin-top:18px; }
.auth-footer a{ color: var(--gold-bright); text-decoration:none; }
.auth-footer a:hover{ text-decoration:underline; }
.sobre-precio-btn:hover{ box-shadow: 0 0 16px rgba(234,203,110,.4); }

/* =========================================================
   APERTURA DE SOBRES DE BIENVENIDA
   ========================================================= */
/* Layout de dos columnas: sobres a la izquierda (siempre visibles),
   panel de revelación más grande a la derecha. */
.sobres-layout{
  display:grid; grid-template-columns: 260px 1fr; gap:30px;
  align-items:stretch; margin: 26px 0;
}
.sobres-abrir-grid{
  display:grid; grid-template-columns: repeat(2, 1fr); gap:14px;
  align-content:start;
}
.sobre-cerrado{
  font-family: var(--font-ui); background: linear-gradient(160deg, var(--clay-light), var(--clay) 65%);
  border:1px solid var(--gold); border-radius: var(--radius); padding:26px 10px;
  color: var(--bone); cursor:pointer; text-align:center;
  box-shadow: 0 8px 20px rgba(0,0,0,.5);
  transition: transform .15s ease, box-shadow .15s ease;
}
.sobre-cerrado:hover:not(:disabled){ transform: translateY(-6px); box-shadow: 0 14px 26px rgba(0,0,0,.6), 0 0 18px rgba(234,203,110,.35); }
.sobre-cerrado:disabled{ cursor:default; opacity:.5; }
.sobre-cerrado-icono{ font-size:2.2rem; color: var(--gold-bright); text-shadow:0 0 14px rgba(234,203,110,.5); margin-bottom:10px; }
.sobre-cerrado-label{ font-size:.8rem; letter-spacing:1.5px; text-transform:uppercase; }
.sobre-cerrado--abierto{ border-color: var(--clay-light); }
/* El sobre elegido se "rasga": tiembla, brilla y se dispersa antes de
   pasar a la pantalla de revelación, en vez de saltar ahí de golpe. */
.sobre-cerrado.sobre-cerrado--abriendo{
  animation: sobre-abrir .52s cubic-bezier(.36,.07,.19,.97) forwards;
}
@keyframes sobre-abrir{
  0%{ transform: scale(1) rotate(0deg); filter: brightness(1) saturate(1); }
  15%{ transform: scale(1.04) rotate(-3deg); }
  30%{ transform: scale(1.04) rotate(3deg); }
  45%{ transform: scale(1.07) rotate(-2deg); filter: brightness(1.3) saturate(1.2); }
  60%{ transform: scale(1.07) rotate(2deg); }
  80%{ transform: scale(1.2) rotate(0deg); filter: brightness(2) saturate(1.4); }
  100%{ transform: scale(1.5) rotate(0deg); filter: brightness(3) saturate(0); opacity:0; }
}

/* ---- Panel de revelación (columna derecha, más grande) ---- */
.revelacion-panel{
  background: linear-gradient(160deg, var(--clay), var(--basalt));
  border:1px solid var(--clay-light); border-radius: var(--radius);
  padding: 30px; min-height: 440px;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
}
.revelacion-idle{ text-align:center; color: var(--bone-dim); }
.revelacion-idle-glyph{ font-size:2.6rem; color: var(--gold); margin-bottom:12px; opacity:.55; }
.revelacion-idle-texto{ font-family: var(--font-lore); font-style:italic; font-size:.95rem; margin:0; }

.revelacion-stage{
  display:flex; flex-direction:column; align-items:center; gap:18px;
  padding: 10px 0;
}
/* Un elemento con [hidden] normalmente se oculta por la hoja de estilos del
   navegador, pero como .revelacion-idle/.revelacion-stage ya definen su
   propio "display", esa regla del navegador queda pisada y el bloque
   "oculto" seguía ocupando lugar (por eso el mensaje de estado inicial
   quedaba tapado por la carta). Forzamos el ocultado acá con más
   especificidad para que sobres.js (que solo hace idle.hidden = true/false)
   funcione como se espera. */
.revelacion-idle[hidden],
.revelacion-stage[hidden]{
  display:none;
}
.revelacion-pips{ display:flex; gap:9px; }
.revelacion-pip{
  width:10px; height:10px; border-radius:50%; background: var(--clay-light);
  border:1px solid var(--bone-dim); transition: background .2s, border-color .2s, transform .25s;
}
.revelacion-pip.revelada{
  background: var(--gold-bright); border-color: var(--gold-bright); transform: scale(1.2);
  box-shadow: 0 0 8px rgba(234,203,110,.7);
}

.revelacion-carta-wrap{
  cursor:pointer; position:relative; perspective: 1400px;
  width:240px; height:336px;
}
.revelacion-carta-wrap:hover .revelacion-carta-flip:not(.girada){ transform: scale(1.03) rotateY(0); }

/* Destello de color detrás de la carta al revelarla: el color lo define
   sobres.js según la rareza que salió. */
.revelacion-destello{
  position:absolute; inset:-40px; border-radius:50%; z-index:-1;
  background: radial-gradient(circle, var(--destello-color, rgba(234,203,110,.5)), transparent 70%);
  opacity:0; pointer-events:none;
}
.revelacion-destello.activo{ animation: destello-revelacion .9s ease-out; }
@keyframes destello-revelacion{
  0%{ opacity:0; transform:scale(.3); }
  35%{ opacity:1; transform:scale(1.25); }
  100%{ opacity:0; transform:scale(1.6); }
}

/* Contenedor 3D: rota 180° para revelar la cara frontal (pre-renderizada
   pero oculta por backface-visibility hasta que gira). */
.revelacion-carta-flip{
  width:100%; height:100%; position:relative;
  transform-style: preserve-3d;
  transition: transform .62s cubic-bezier(.34,1.56,.64,1);
}
.revelacion-carta-flip.girada{ transform: rotateY(180deg); }

.revelacion-cara{
  position:absolute; inset:0; border-radius:6px; backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  box-shadow: 0 16px 34px rgba(0,0,0,.6);
}
.revelacion-cara--dorso{
  background: linear-gradient(160deg, var(--clay-light), var(--clay) 60%);
  border: 2px solid var(--gold);
  overflow:hidden;
}
.revelacion-carta-glyph{ font-size:3rem; color: var(--gold-bright); text-shadow:0 0 20px rgba(234,203,110,.5); }
/* Brillo que recorre el dorso en diagonal, como una carta con acabado
   metalizado — invita a tocarla. */
.revelacion-carta-brillo{
  position:absolute; top:0; left:-60%; width:40%; height:100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.18), transparent);
  animation: brillo-dorso 2.6s ease-in-out infinite;
}
@keyframes brillo-dorso{
  0%{ left:-60%; }
  50%{ left:130%; }
  100%{ left:130%; }
}

/* La cara frontal reutiliza el marcado de .card (card-cost, card-art,
   etc.) pero necesita ocupar todo el contenedor de 180x252 en vez de las
   medidas chicas de una carta en mano/tablero. */
.revelacion-cara.revelacion-cara--frente.card{
  width:100%; height:100%; cursor:default; flex-shrink:0;
  transform: rotateY(180deg);
}
.revelacion-cara.revelacion-cara--frente.card:hover{ transform: rotateY(180deg); }
.revelacion-cara--frente .card-name{ font-size:1.1rem; min-height:auto; padding-top:14px; }
.revelacion-cara--frente .card-type{ font-size:.78rem; }
.revelacion-cara--frente .card-rarity-tick{ font-size:.68rem; }
.revelacion-cara--frente .card-art{ height:150px; font-size:3.6rem; }
.revelacion-cara--frente .card-stats{ font-size:1.4rem; padding:10px 16px 16px; }
.revelacion-cara--frente .card-cost{ width:38px; height:38px; font-size:1.05rem; }
.revelacion-cara--frente.card--divina{ animation: divine-pulse 2.6s ease-in-out infinite; }

/* Partículas de confeti para pulls de Épica en adelante (ver sobres.js). */
.particula{
  position:absolute; top:50%; left:50%; width:6px; height:6px; border-radius:1px;
  background: var(--particula-color, var(--gold-bright));
  pointer-events:none; z-index:6;
  animation: particula-vuelo .9s ease-out forwards;
}
@keyframes particula-vuelo{
  0%{ transform: translate(-50%,-50%) rotate(var(--angulo,0deg)) translateX(0) scale(1); opacity:1; }
  100%{ transform: translate(-50%,-50%) rotate(var(--angulo,0deg)) translateX(var(--distancia,100px)) scale(.2); opacity:0; }
}

.revelacion-hint{ font-family: var(--font-lore); font-style:italic; color: var(--bone-dim); font-size:.8rem; }

/* Temblor de pantalla completa para pulls de Legendaria/Divina. */
@keyframes namtar-temblor-kf{
  0%,100%{ transform: translate(0,0); }
  20%{ transform: translate(-3px,2px); }
  40%{ transform: translate(3px,-2px); }
  60%{ transform: translate(-2px,-3px); }
  80%{ transform: translate(2px,3px); }
}
body.namtar-temblor{ animation: namtar-temblor-kf .42s ease-in-out; }

/* Muestreo horizontal del mazo que se va formando, debajo de las dos
   columnas de arriba. */
.cartas-obtenidas-titulo{
  font-family: var(--font-ui); font-size:.75rem; letter-spacing:1.5px; text-transform:uppercase;
  color: var(--bone-dim); margin: 34px 0 12px;
}
.cartas-obtenidas-titulo span{ color: var(--gold-bright); font-weight:700; }

/* Carrusel: flechas fijas en los extremos en vez de una barra de scroll.
   La franja sigue siendo desplazable con el mouse/touch, pero ya no
   depende de que el jugador encuentre y arrastre el scrollbar. */
.cartas-obtenidas-carousel{
  display:flex; align-items:center; gap:10px;
}
.cartas-obtenidas-rail{
  display:flex; flex-wrap:nowrap; gap:14px; overflow-x:auto; overflow-y:hidden;
  padding: 10px 4px 22px; scroll-behavior:smooth; scroll-snap-type:x proximity;
  flex:1; min-width:0;
  scrollbar-width:none; -ms-overflow-style:none;
}
.cartas-obtenidas-rail::-webkit-scrollbar{ display:none; height:0; }
.cartas-obtenidas-rail > .card{ flex-shrink:0; scroll-snap-align:start; }

.carousel-flecha{
  flex-shrink:0; width:40px; height:40px; border-radius:50%;
  background: linear-gradient(160deg, var(--clay-light), var(--clay));
  border:1px solid var(--gold); color: var(--gold-bright);
  font-size:1.4rem; line-height:1; cursor:pointer; padding:0;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 4px 12px rgba(0,0,0,.35);
  transition: opacity .2s, transform .15s, background .2s;
}
.carousel-flecha:hover:not(:disabled){
  background: linear-gradient(160deg, var(--clay), var(--clay-light)); transform: scale(1.08);
}
.carousel-flecha:disabled{ opacity:.28; cursor:default; }

@media (max-width: 480px){
  .carousel-flecha{ width:34px; height:34px; font-size:1.15rem; }
}

@media (max-width: 820px){
  .sobres-layout{ grid-template-columns: 1fr; }
  .sobres-abrir-grid{ grid-template-columns: repeat(4, 1fr); }
  .revelacion-panel{ min-height: 380px; }
  .revelacion-carta-wrap{ width:200px; height:280px; }
}
@media (max-width: 480px){
  .sobres-abrir-grid{ grid-template-columns: repeat(2, 1fr); }
}

/* =========================================================
   DASHBOARD
   ========================================================= */
.dash-wrap{ position:relative; z-index:1; max-width:1200px; margin:0 auto; padding:26px 30px 60px; }
.dash-stats-row{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap:14px;
  margin-bottom:28px;
}
.dash-stat-card{
  background: linear-gradient(160deg, var(--clay), var(--basalt)); border:1px solid var(--clay-light);
  border-radius: var(--radius); padding:14px 18px; text-align:center;
  box-shadow: 0 6px 16px rgba(0,0,0,.4);
}
.dash-stat-label{ font-family: var(--font-ui); font-size:.62rem; letter-spacing:1.5px; text-transform:uppercase; color: var(--bone-dim); }
.dash-stat-value{ font-family: var(--font-data); font-size:1.5rem; font-weight:700; color: var(--gold-bright); margin-top:4px; }

.dash-columns{ display:grid; grid-template-columns: 1fr 300px; gap:26px; align-items:start; }
.dash-main{ min-width:0; }
.dash-sidebar{
  background: linear-gradient(160deg, var(--clay), var(--basalt)); border:1px solid var(--clay-light);
  border-radius: var(--radius); padding:18px; box-shadow: 0 10px 24px rgba(0,0,0,.4); position:sticky; top:16px;
}

.dash-menu-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap:14px; margin-top:14px; }
.dash-menu-tile{
  display:flex; flex-direction:column; gap:4px; text-decoration:none;
  background: linear-gradient(160deg, var(--clay-light), var(--clay) 65%);
  border:1px solid var(--clay-light); border-radius: var(--radius); padding:18px;
  color: var(--bone); transition: transform .15s ease, box-shadow .15s ease, border-color .15s;
}
.dash-menu-tile:hover{ transform: translateY(-4px); border-color: var(--gold); box-shadow: 0 10px 22px rgba(0,0,0,.5); }
.dash-menu-tile--primary{ border-color: var(--gold-bright); background: linear-gradient(160deg, #3a2c1c, #241b12); }
.dash-menu-icon{ font-size:1.6rem; color: var(--gold-bright); }
.dash-menu-title{ font-family: var(--font-ui); font-size:.85rem; letter-spacing:1px; color: var(--gold-bright); }
.dash-menu-desc{ font-family: var(--font-lore); font-style:italic; font-size:.72rem; color: var(--bone-dim); line-height:1.35; }

.leaderboard-table{ width:100%; border-collapse:collapse; font-size:.78rem; }
.leaderboard-table th{
  font-family: var(--font-ui); font-size:.62rem; letter-spacing:1px; text-transform:uppercase;
  color: var(--bone-dim); text-align:left; padding:6px 4px; border-bottom:1px solid var(--clay-light);
}
.leaderboard-table td{ padding:7px 4px; border-bottom:1px solid rgba(58,44,28,.5); color: var(--bone); }
.leaderboard-table tr.leaderboard-row--yo td{ color: var(--gold-bright); font-weight:700; }
@media (max-width: 900px){
  .dash-columns{ grid-template-columns: 1fr; }
  .dash-sidebar{ position:static; }
}

/* =========================================================
   BIBLIOTECA DE CARTAS
   ========================================================= */
.biblioteca-rareza-titulo{
  font-family: var(--font-logo); letter-spacing:2px; font-size:1.15rem;
  margin: 30px 0 6px; padding-top:14px; border-top:1px solid var(--clay-light);
}
.biblioteca-rareza-titulo:first-of-type{ border-top:none; padding-top:0; }
.biblioteca-rareza-cuenta{ font-family: var(--font-data); font-size:.75rem; color: var(--bone-dim); letter-spacing:0; }
.biblioteca-grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); gap:16px; margin-top:12px;
}
.biblioteca-item{
  display:flex; gap:12px; background: linear-gradient(160deg, var(--clay), var(--basalt));
  border:1px solid var(--clay-light); border-radius: var(--radius); padding:12px;
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
}
.biblioteca-item .card{ flex-shrink:0; cursor:default; }
.biblioteca-item .card:hover{ transform:none; box-shadow: 0 3px 8px rgba(0,0,0,0.5); }
.biblioteca-item--no-poseida .card{ opacity:.35; filter: grayscale(.6); }
.biblioteca-item--no-poseida .biblioteca-item-lore,
.biblioteca-item--no-poseida .biblioteca-item-habilidad{ opacity:.55; }
.biblioteca-item-info{ display:flex; flex-direction:column; gap:6px; min-width:0; }
.biblioteca-item-badge{
  font-family: var(--font-ui); font-size:.62rem; letter-spacing:1px; text-transform:uppercase;
  color: var(--gold-bright);
}
.biblioteca-item--no-poseida .biblioteca-item-badge{ color: var(--bone-dim); }
.biblioteca-item-lore{
  font-family: var(--font-lore); font-style:italic; font-size:.76rem; color: var(--bone-dim);
  line-height:1.4; margin:0;
}
.biblioteca-item-habilidad{ font-size:.72rem; color: var(--bone); line-height:1.4; margin:0; }
.biblioteca-item-habilidad strong{ color: var(--lapis-glow); }

/* =========================================================
   LORE / HISTORIA
   ========================================================= */
.lore-wrap{ max-width:820px; }
.lore-article{ margin-top:20px; }
.lore-section{ margin-bottom:30px; padding-bottom:24px; border-bottom:1px solid var(--clay-light); }
.lore-section:last-child{ border-bottom:none; }
.lore-section h3{
  font-family: var(--font-logo); letter-spacing:1.5px; color: var(--gold-bright);
  font-size:1.15rem; margin: 0 0 12px;
}
.lore-section p{
  font-family: var(--font-lore); font-size:.95rem; line-height:1.75; color: var(--bone);
}