* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Variables de paleta ──────────────────────────────────────
   Arcoíris vivido:  rojo · naranja · amarillo · verde · azul · violeta · rosa
   Fondo claro, texto oscuro — alto contraste, legible para niños
──────────────────────────────────────────────────────────── */

:root {
  /* rojo/naranja/amarillo/rosa: acentos de CTA — sin uso semántico fijo,
     se calientan levemente para v0.4 (kids-friendly, GDD fase 3).
     verde/azul/violeta/naranja: NO se retocan acá — son la misma paleta
     que RAREZA_COLOR/PD_BG_RAREZA/REVEAL_CFG en main.js (común/rara/
     épica/legendaria). Cambiarlas solo en CSS rompería la correspondencia
     visual entre color y rareza en toda la colección/reveal/detalle; si
     se quiere recolorear la rareza, es un cambio deliberado y sincronizado
     en los 4 lugares a la vez, no un retoque de paleta suelto. */
  --rojo:    #FF4D4D;
  --naranja: #FF8C00;
  --amarillo:#FFD93D;
  --verde:   #22CC55;
  --azul:    #1188FF;
  --violeta: #AA00FF;
  --rosa:    #FF4D94;
  --fondo:   #FFF6EC;
  --panel:   #FFFDF8;
  --texto:   #1A1A2E;
  --texto2:  #555577;
  --borde:   #E0D8F0;
  /* fondos temáticos */
  --bg-store: #FFF3E0;
  --bg-gems:  #E8F4FD;
  --bg-gold:  #FFFBF0;
  --bg-verde: #F0FFF4;
}

body {
  font-family: 'Nunito', sans-serif;
  font-weight: 400;
  background: var(--fondo);
  color: var(--texto);
  min-height: 100vh;
}

/* ── Tipografía (Fredoka títulos, Nunito cuerpo) ──────────────── */

header h1,
#store-header h2,
#seccion-coleccion h2,
#seccion-inventario h2,
.modal-nombre,
.modal-titulo,
.reveal-nombre,
.leg-titulo {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
}

strong,
button,
.store-info strong,
.pockie-id,
.pockie-rareza,
.modal-sub,
.herramienta-badge,
.inv-cantidad,
.gems-cantidad,
.gems-paquete-nombre,
.alim-puntos,
.reveal-badge,
.reveal-sub,
.lb-valor,
.max-badge {
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
}

/* ── Iconos SVG inline ────────────────────────────────────── */

.ico {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.2em;
  flex-shrink: 0;
}

.ico-lg {
  width: 2.2rem;
  height: 2.2rem;
  vertical-align: middle;
}

.ico-pantalla {
  width: 4.8rem;
  height: 4.8rem;
}

.store-ico {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────── */

#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 0 16px 40px;
}

/* ── Header ───────────────────────────────────────────── */

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  position: sticky;
  top: 0;
  background: var(--fondo);
  z-index: 50;
  border-bottom: 4px solid transparent;
  border-image: linear-gradient(90deg,
    var(--rojo), var(--naranja), var(--amarillo),
    var(--verde), var(--azul), var(--violeta), var(--rosa)) 1;
  margin-bottom: 20px;
}

header h1 {
  font-size: 2rem;
  background: linear-gradient(90deg, var(--rosa), var(--violeta), var(--azul));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

#recursos {
  display: flex;
  gap: 10px;
  font-size: 1.05rem;
}

.recurso-item {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--panel);
  border: 2.5px solid var(--borde);
  border-radius: 99px;
  padding: 4px 12px;
  font-weight: 700;
  color: var(--texto);
  box-shadow: 0 2px 0 var(--borde);
}

#btn-hamburguesa {
  display: none;
  background: var(--panel);
  border: 2.5px solid var(--borde);
  border-radius: 12px;
  color: var(--texto);
  font-size: 1.4rem;
  cursor: pointer;
  padding: 4px 10px;
  line-height: 1;
  box-shadow: 0 3px 0 var(--borde);
}

#btn-gems-hamburguesa {
  background: linear-gradient(135deg, var(--azul), var(--violeta));
  border: 2.5px solid #0055CC;
  border-radius: 12px;
  color: white;
  font-size: 1.1rem;
  cursor: pointer;
  padding: 5px 12px;
  line-height: 1;
  box-shadow: 0 3px 0 #003A99;
  display: flex;
  align-items: center;
  gap: 5px;
}
#btn-gems-hamburguesa:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #003A99;
}

#btn-tema {
  background: var(--panel);
  border: 2.5px solid var(--borde);
  border-radius: 12px;
  color: var(--texto);
  cursor: pointer;
  padding: 5px 10px;
  line-height: 1;
  box-shadow: 0 3px 0 var(--borde);
  display: flex;
  align-items: center;
  font-size: 1.15rem;
  transition: box-shadow 0.1s, transform 0.1s;
}

#btn-tema:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 var(--borde);
}

/* ── Layout PC: store | main | catálogo ───────────────── */

#layout {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}

/* ── Store sidebar ────────────────────────────────────── */

#store {
  width: 240px;
  flex-shrink: 0;
  background: var(--bg-store);
  border: 3px solid var(--naranja);
  border-radius: 22px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 80px;
  box-shadow: 0 4px 0 #E07800;
}

#store-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#store-header h2 {
  font-size: 1.05rem;
  color: var(--naranja);
  text-transform: uppercase;
  letter-spacing: 2px;
}

#btn-cerrar-store,
#btn-cerrar-catalogo {
  display: none;
  background: none;
  border: none;
  color: var(--texto2);
  font-size: 1.3rem;
  cursor: pointer;
}

/* ── Catálogo sidebar ─────────────────────────────────── */

#catalogo {
  width: 230px;
  flex-shrink: 0;
  background: var(--bg-verde);
  border: 3px solid var(--verde);
  border-radius: 22px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: sticky;
  top: 80px;
  max-height: calc(100vh - 100px);
  box-shadow: 0 4px 0 #009918;
}

#catalogo-header {
  display: flex;
  align-items: center;
  gap: 6px;
}

#catalogo-header h2 {
  font-family: 'Fredoka', sans-serif;
  font-size: 1.05rem;
  color: var(--verde);
  text-transform: uppercase;
  letter-spacing: 2px;
  flex: 1;
}

#catalogo-count {
  font-family: 'Nunito', sans-serif;
  font-size: 0.78rem;
  color: var(--texto2);
  font-weight: 700;
}

#catalogo-filtros {
  display: flex;
  gap: 5px;
}

.cat-orden {
  flex: 1;
  font-family: 'Nunito', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  border: 2px solid var(--borde);
  border-radius: 8px;
  background: var(--panel);
  color: var(--texto2);
  padding: 4px 0;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.cat-orden.activo {
  background: var(--verde);
  border-color: var(--verde);
  color: white;
}

#catalogo-lista {
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  /* scrollbar delgada */
  scrollbar-width: thin;
  scrollbar-color: var(--verde) transparent;
}

#catalogo-lista::-webkit-scrollbar       { width: 4px; }
#catalogo-lista::-webkit-scrollbar-thumb { background: var(--verde); border-radius: 4px; }

.cat-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 7px;
  border-radius: 10px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background 0.12s;
}

.cat-item:hover { background: var(--panel); }

.cat-item[data-rareza="comun"]     { border-color: rgba(34,204,85,0.25); }
.cat-item[data-rareza="rara"]      { border-color: rgba(17,136,255,0.25); }
.cat-item[data-rareza="epica"]     { border-color: rgba(170,0,255,0.25); }
.cat-item[data-rareza="legendaria"]{ border-color: rgba(255,140,0,0.35); }

.cat-emoji {
  font-size: 1.45rem;
  line-height: 1;
  flex-shrink: 0;
  width: 28px;
  text-align: center;
  filter: grayscale(0);
  transition: filter 0.2s;
}

.cat-item.no-tiene .cat-emoji { filter: grayscale(1); opacity: 0.4; }

.cat-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.cat-nombre {
  font-family: 'Nunito', sans-serif;
  font-size: 0.73rem;
  font-weight: 700;
  color: var(--texto);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.cat-item.no-tiene .cat-nombre { color: var(--texto2); }

.cat-meta {
  font-size: 0.62rem;
  color: var(--texto2);
  font-family: 'Nunito', sans-serif;
}

.cat-badge {
  font-size: 0.6rem;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 5px;
  color: white;
  flex-shrink: 0;
  white-space: nowrap;
}

.cat-badge-comun     { background: #22CC55; }
.cat-badge-rara      { background: #1188FF; }
.cat-badge-epica     { background: #AA00FF; }
.cat-badge-legendaria{ background: #FF8C00; }

.cat-separador {
  font-family: 'Nunito', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--texto2);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 6px 4px 2px;
  border-bottom: 1.5px solid var(--borde);
  margin-bottom: 2px;
}

#btn-catalogo-hamburguesa {
  background: linear-gradient(135deg, var(--verde), #009918);
  border: 2.5px solid #007A12;
  border-radius: 12px;
  color: white;
  font-size: 1rem;
  cursor: pointer;
  padding: 5px 10px;
  line-height: 1;
  box-shadow: 0 3px 0 #005A0D;
  display: none;
}
#btn-catalogo-hamburguesa:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #005A0D;
}

.store-seccion {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.store-seccion h3 {
  font-size: 0.75rem;
  color: var(--naranja);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding-bottom: 6px;
  border-bottom: 2px dashed #FFD0A0;
  display: flex;
  align-items: center;
  gap: 5px;
}

.store-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.store-item.bloqueado {
  opacity: 0.45;
}

.store-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.store-info strong {
  font-size: 0.82rem;
  color: var(--texto);
}

.store-info span {
  font-size: 0.7rem;
  color: var(--texto2);
}

.btn-comprar {
  background: var(--naranja);
  border: none;
  border-bottom: 3px solid #C06000;
  color: #fff;
  border-radius: 14px;
  box-shadow: 0 3px 8px rgba(255,140,0,0.28);
  padding: 6px 9px;
  font-size: 0.72rem;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.08s, border-bottom-width 0.08s;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 3px;
}

.btn-comprar:hover:not(:disabled) {
  filter: brightness(1.1);
}

.btn-comprar:active:not(:disabled) {
  transform: translateY(2px);
  border-bottom-width: 1px;
}

.btn-comprar:disabled {
  cursor: not-allowed;
  opacity: 0.45;
  background: #ccc;
  border-bottom-color: #aaa;
}

.btn-comprar.sin-fondos {
  background: #b9b0c8;
  border-bottom-color: #8a8298;
  color: #3d3350;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
}
.btn-faltan { font-size: 0.6rem; font-weight: 800; opacity: 0.85; }

.store-proximamente {
  font-size: 0.7rem;
  color: var(--texto2);
  text-align: center;
  padding-top: 4px;
}

/* ── Gems packages (shared between store drawer and store.html) ── */

.gems-paquetes {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.gems-paquete {
  background: var(--panel);
  border: 2.5px solid #BDD9F8;
  border-radius: 14px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
  box-shadow: 0 2px 0 #BDD9F8;
}

.gems-paquete.popular { border-color: var(--amarillo); box-shadow: 0 2px 0 #C8A000; }
.gems-paquete.oferta  { border-color: var(--verde);    box-shadow: 0 2px 0 #00882A; }
.gems-paquete.ballena { border-color: var(--violeta);  box-shadow: 0 2px 0 #7700CC; }

.gems-badge-label {
  position: absolute;
  top: -10px;
  right: 8px;
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 1px;
  padding: 2px 8px;
  border-radius: 99px;
  color: #fff;
}

.gems-paquete.popular .gems-badge-label { background: var(--naranja); }
.gems-paquete.oferta  .gems-badge-label { background: var(--verde); }
.gems-paquete.ballena .gems-badge-label { background: var(--violeta); }

.gems-paquete-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.gems-cantidad {
  font-size: 1rem;
  font-weight: 800;
  color: var(--azul);
  display: flex;
  align-items: center;
  gap: 4px;
}

.gems-bonus {
  font-size: 0.62rem;
  color: var(--verde);
  font-weight: 700;
}

.gems-paquete-nombre {
  font-size: 0.72rem;
  color: var(--texto2);
}

.btn-gems {
  background: var(--azul);
  border: none;
  border-bottom: 3px solid #005FCC;
  color: #fff;
  border-radius: 10px;
  padding: 7px 0;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  width: 100%;
  transition: transform 0.08s, border-bottom-width 0.08s;
  margin-top: 2px;
}

.btn-gems:hover:not(:disabled) { filter: brightness(1.1); }
.btn-gems:active:not(:disabled) { transform: translateY(2px); border-bottom-width: 1px; }
.btn-gems:disabled { cursor: not-allowed; opacity: 0.45; background: #aaa; border-bottom-color: #888; }

/* ── Main ─────────────────────────────────────────────── */

main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* ── Expendedora ──────────────────────────────────────── */

#expendedora-wrap {
  display: flex;
  justify-content: center;
}

/* Los colores salen de variables: cada skin (más abajo) solo las redefine.
   --exp-c1/--exp-c2 cuerpo · --exp-borde contorno y cartel · --exp-sombra
   base 3D · --exp-oscuro vitrina, bandeja y ranura · --exp-foco focos. */
#expendedora {
  --exp-c1: #5C35CC;
  --exp-c2: #1188FF;
  --exp-borde: var(--amarillo);
  --exp-sombra: #A07800;
  --exp-oscuro: #1C1240;
  --exp-foco: #FFE36B;
  background: linear-gradient(160deg, var(--exp-c1), var(--exp-c2));
  border: 5px solid var(--exp-borde);
  border-radius: 28px 28px 22px 22px;
  width: 236px;
  padding: 0 20px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  box-shadow: 0 6px 0 var(--exp-sombra), 0 12px 30px rgba(90,50,200,0.35);
}

#expendedora.shake { animation: shake 0.4s ease; }
#expendedora.glow  { animation: glow  0.6s ease; }
#expendedora.mega  { animation: mega  1.2s ease; }

#expendedora-pantalla {
  position: relative;
  z-index: 1;
  width: 92px;
  height: 92px;
  background: radial-gradient(circle, rgba(255,255,255,0.95) 55%, rgba(255,255,255,0.6) 70%, transparent 72%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  font-weight: 900;
  color: var(--exp-c1);
}

#btn-tocar {
  background: linear-gradient(180deg, #FF5F5F, var(--rojo));
  color: #fff;
  border: none;
  border-bottom: 5px solid #AA0000;
  border-radius: 16px;
  padding: 14px 32px;
  font-size: 1.15rem;
  font-weight: 900;
  cursor: pointer;
  letter-spacing: 2px;
  transition: transform 0.08s, border-bottom-width 0.08s;
  width: 100%;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

#btn-tocar:active   {
  transform: translateY(3px);
  border-bottom-width: 2px;
}
#btn-tocar:disabled { background: #aaa; border-bottom-color: #888; cursor: not-allowed; }

/* ── Resultado ────────────────────────────────────────── */

#resultado {
  background: var(--bg-verde);
  border: 3px solid var(--verde);
  border-radius: 18px;
  padding: 20px;
  text-align: center;
  font-size: 1.15rem;
  color: var(--texto);
  box-shadow: 0 3px 0 #009933;
}

#resultado.oculto { display: none; }

#resultado-contenido {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* ── Colección e inventario ───────────────────────────── */

#seccion-coleccion,
#seccion-inventario {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#seccion-coleccion h2,
#seccion-inventario h2 {
  font-size: 1.05rem;
  color: var(--violeta);
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

#seccion-coleccion h2 span {
  background: var(--violeta);
  color: #fff;
  border-radius: 99px;
  padding: 0 9px;
  font-size: 0.85rem;
  margin-left: 7px;
}

#coleccion-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 10px;
}

.pockie-card {
  background: var(--panel);
  border: 2.5px solid #DDD;
  border-radius: 14px;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  box-shadow: 0 3px 0 #DDD;
  color: var(--texto);
}

/* Borde de rareza en cards */
.pockie-card[data-rareza="comun"]     { border-color: var(--verde);   box-shadow: 0 3px 0 #009933; }
.pockie-card[data-rareza="rara"]      { border-color: var(--azul);    box-shadow: 0 3px 0 #005FCC; }
.pockie-card[data-rareza="epica"]     { border-color: var(--violeta); box-shadow: 0 3px 0 #7700CC; }
.pockie-card[data-rareza="legendaria"]{ border-color: var(--naranja); box-shadow: 0 3px 0 #C06000; background: #FFFBF0; }

.pockie-emoji    { font-size: 2rem; }
.pockie-cantidad { font-size: 0.75rem; color: var(--rosa); font-weight: 800; }
/* Una sola línea: los nombres largos terminan en "…", como en el catálogo,
   en vez de partirse en cualquier letra ("Slurppossumwin / k"). El nombre
   entero está en el title y en la ficha. */
.pockie-id       { font-size: 0.7rem; color: var(--texto2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pockie-aspecto  { font-size: 0.62rem; color: #999; }
.pockie-rareza   { font-size: 0.7rem; font-weight: 800; text-transform: uppercase; }

#inventario-lista {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.inv-item {
  background: var(--panel);
  border: 2px solid var(--borde);
  border-radius: 10px;
  padding: 9px 14px;
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  color: var(--texto);
}

/* Herramientas activas */
#herramientas-activas {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

.herramienta-badge {
  background: var(--panel);
  border: 2.5px solid var(--rosa);
  border-radius: 99px;
  padding: 4px 14px;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--texto);
}

.herramienta-badge span {
  color: var(--rosa);
  font-weight: 800;
}

.btn-activar {
  background: var(--panel);
  border: 2px solid var(--borde);
  border-bottom: 3px solid var(--borde);
  color: var(--texto);
  border-radius: 14px;
  padding: 4px 10px;
  font-size: 0.72rem;
  cursor: pointer;
  transition: border-color 0.12s;
}

.btn-activar:hover { border-color: var(--violeta); }

.btn-activar.activo {
  background: #F0FFF4;
  border-color: var(--verde);
  color: var(--verde);
  cursor: default;
}

.inv-cantidad { color: var(--texto2); }

.vacio {
  color: #bbb;
  font-size: 0.85rem;
  text-align: center;
  padding: 12px 0;
}

/* ── Overlay (mobile) ─────────────────────────────────── */

#overlay-store {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 98;
}

#overlay-store.visible { display: block; }

/* ── Toast pasivo ─────────────────────────────────────── */

.toast-pasivo {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(24px);
  background: var(--panel);
  border: 2.5px solid var(--amarillo);
  border-radius: 40px;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--texto);
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
  white-space: nowrap;
}

.toast-pasivo.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Mobile ───────────────────────────────────────────── */

@media (max-width: 720px) {
  #btn-hamburguesa,
  #btn-catalogo-hamburguesa { display: block; }

  #btn-cerrar-store,
  #btn-cerrar-catalogo { display: block; }

  #layout { display: block; }

  /* ── Header compacto en mobile ── */
  header {
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  header h1 { font-size: 1.35rem; }

  #recursos { margin-left: auto; }

  /* solo el ícono de gema en pantallas chicas */
  #btn-gems-hamburguesa .btn-tienda-label { display: none; }
  #btn-gems-hamburguesa { padding: 5px 9px; }

  #nav-botones button { padding: 4px 8px; font-size: 0.95rem; }
  .nav-texto { display: none; }

  #recursos { gap: 6px; }

  .recurso-item {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0 2px;
    gap: 3px;
    font-size: 0.9rem;
  }

  #btn-tema {
    padding: 4px 7px;
  }

  /* ── Drawers mobile ── */
  #store, #catalogo {
    position: fixed;
    top: 0;
    width: 280px;
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    border-top: none;
    border-bottom: none;
    z-index: 99;
    padding-top: 24px;
    box-shadow: none;
  }

  #store {
    left: -280px;
    border-right: 4px solid var(--naranja);
    border-left: none;
    transition: left 0.3s ease;
  }

  #catalogo {
    right: -280px;
    border-left: 4px solid var(--verde);
    border-right: none;
    transition: right 0.3s ease;
  }

  #store.abierto    { left: 0; }
  #catalogo.abierto { right: 0; }

  main { padding-top: 8px; }

  /* La barra de abajo toma el lugar de la tienda, el catálogo y los botones
     de la cabecera; arriba quedan las monedas, las gemas, el tema y las skins. */
  #btn-hamburguesa,
  #btn-catalogo-hamburguesa,
  #nav-botones button:not(#btn-skins) { display: none; }
  #app { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); }
}

/* ── La barra de abajo (solo en el teléfono) ── */
#barra-abajo {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;   /* debajo de los cajones (99) y de su fondo oscuro (98) */
  justify-content: space-around;
  gap: 2px;
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
  background: var(--panel);
  border-top: 2.5px solid var(--borde);
  box-shadow: 0 -4px 16px rgba(43, 27, 61, 0.1);
}
#barra-abajo button {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-height: 48px;
  padding: 4px 2px;
  border: none;
  border-radius: 12px;
  background: none;
  color: var(--texto2);
  font-family: 'Nunito', sans-serif;
  font-size: 0.68rem;
  font-weight: 800;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#barra-abajo button .ico { width: 1.5rem; height: 1.5rem; }
#barra-abajo button:active { background: var(--fondo); transform: scale(0.94); }
@media (max-width: 720px) {
  #barra-abajo { display: flex; }
}

/* ── Modal alimentación ───────────────────────────────── */

#modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

#modal-overlay.oculto { display: none; }

#modal-box {
  background: var(--panel);
  border: 3px solid var(--violeta);
  border-radius: 24px;
  padding: 24px;
  width: 100%;
  max-width: 380px;
  max-height: 88vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  box-shadow: 0 6px 0 #7700CC, 0 20px 40px rgba(0,0,0,0.25);
  color: var(--texto);
}

#modal-cerrar {
  position: absolute;
  top: 14px;
  right: 14px;
  background: #EEE;
  border: none;
  border-radius: 8px;
  color: var(--texto2);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 2px 8px;
}

.modal-pockie-info {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--fondo);
  border: 2.5px solid #DDD;
  border-radius: 16px;
  padding: 14px;
}

.modal-emoji  { font-size: 2.8rem; }
.modal-nombre { font-size: 1.1rem; font-weight: 800; color: var(--texto); }
.modal-sub    { font-size: 0.75rem; color: var(--texto2); margin-top: 4px; }

.modal-seccion-titulo {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--violeta);
  font-weight: 700;
}

.btn-alimentar {
  background: var(--fondo);
  border: 2.5px solid #DDD;
  border-bottom: 4px solid #CCC;
  border-radius: 14px;
  color: var(--texto);
  padding: 12px 14px;
  font-size: 0.9rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  transition: border-color 0.15s;
  width: 100%;
}

.btn-alimentar:hover:not(:disabled) { border-color: var(--violeta); border-bottom-color: #7700CC; }
.btn-alimentar:disabled { opacity: 0.35; cursor: not-allowed; }

.alim-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.alim-puntos {
  font-size: 0.75rem;
  color: var(--verde);
  font-weight: 800;
}

.alim-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.72rem;
  color: var(--texto2);
}

.prog-barra {
  height: 8px;
  background: #EEE;
  border-radius: 99px;
  overflow: hidden;
  margin: 6px 0 4px;
}

.prog-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--violeta), var(--rosa));
  border-radius: 99px;
  transition: width 0.35s ease;
  min-width: 3px;
}

.evol-preview {
  font-size: 0.72rem;
  color: var(--violeta);
  font-weight: 700;
}

.modal-maxstage {
  text-align: center;
  color: #bbb;
  font-size: 0.85rem;
  padding: 8px 0;
}

/* Legendaria progress */
.modal-legendaria {
  background: var(--bg-gold);
  border: 2.5px solid #FFD600;
  border-radius: 16px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.leg-titulo {
  font-size: 0.88rem;
  color: var(--naranja);
  font-weight: 800;
}

.leg-progreso {
  display: flex;
  align-items: center;
  gap: 10px;
}

.leg-barra {
  flex: 1;
  height: 10px;
  background: #FFE;
  border-radius: 99px;
  overflow: hidden;
  border: 1px solid #FFD600;
}

.leg-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--amarillo), var(--naranja));
  border-radius: 99px;
  transition: width 0.4s ease;
  min-width: 4px;
}

.leg-progreso span {
  font-size: 0.8rem;
  color: var(--naranja);
  white-space: nowrap;
  font-weight: 800;
}

.btn-fusionar {
  background: linear-gradient(135deg, var(--amarillo), var(--naranja));
  border: none;
  border-bottom: 4px solid #C06000;
  border-radius: 12px;
  color: #fff;
  font-weight: 900;
  font-size: 0.95rem;
  padding: 11px;
  cursor: pointer;
  width: 100%;
  transition: transform 0.08s, border-bottom-width 0.08s;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.btn-fusionar:hover { filter: brightness(1.07); }
.btn-fusionar:active { transform: translateY(2px); border-bottom-width: 2px; }

/* Feed button en cards */
.btn-feed-card {
  background: none;
  border: 2px solid var(--borde);
  border-radius: 8px;
  color: var(--texto);
  font-size: 0.75rem;
  padding: 3px 8px;
  cursor: pointer;
  margin-top: 4px;
  transition: border-color 0.12s, color 0.12s;
}

.btn-feed-card:hover { border-color: var(--violeta); color: var(--violeta); }

.max-badge,
.evoluc-hint {
  font-size: 0.65rem;
  font-weight: 900;
  margin-top: 4px;
}

.max-badge {
  color: var(--naranja);
}

.evoluc-hint {
  color: var(--verde);
  letter-spacing: 1.5px;
}

/* ── Animaciones ──────────────────────────────────────── */

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-7px); }
  40%       { transform: translateX(7px); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(4px); }
}

@keyframes glow {
  0%, 100% { box-shadow: 0 6px 0 var(--exp-sombra), 0 12px 30px rgba(90,50,200,0.35); }
  50%       { box-shadow: 0 6px 0 var(--exp-sombra), 0 0 50px var(--rosa), 0 0 80px var(--violeta); }
}

/* Drop legendario: reacción exagerada (GDD 3) */
@keyframes mega {
  0%        { transform: scale(1) rotate(0); box-shadow: none; }
  15%       { transform: scale(1.08) rotate(-3deg); box-shadow: 0 0 40px #f59e0b; }
  30%       { transform: scale(1.05) rotate(3deg);  box-shadow: 0 0 70px #f59e0b, 0 0 120px #ff6eb4; }
  45%       { transform: scale(1.1) rotate(-2deg);  box-shadow: 0 0 90px #fbbf24, 0 0 140px #ff6eb4; }
  60%       { transform: scale(1.04) rotate(2deg);  box-shadow: 0 0 70px #f59e0b; }
  100%      { transform: scale(1) rotate(0); box-shadow: none; }
}



/* ── Nav header ───────────────────────────────────────── */

#nav-botones {
  display: flex;
  gap: 4px;
}

#nav-botones button {
  background: #2a1050;
  border: 1px solid #5a2a9e;
  border-radius: 10px;
  font-size: 1.1rem;
  padding: 4px 10px;
  cursor: pointer;
  transition: border-color 0.15s;
}

#nav-botones button:hover { border-color: #ff6eb4; }
/* Ícono y palabra: antes eran cuatro íconos sin texto y había que apretarlos
   para saber qué era cada uno. En el teléfono queda solo el ícono (y solo el
   de las skins: el resto está en la barra de abajo). */
#nav-botones button { display: inline-flex; align-items: center; gap: 6px; color: #F3E8FF; }
.nav-texto { font-family: 'Nunito', sans-serif; font-size: 0.8rem; font-weight: 800; white-space: nowrap; }
/* Entre la tablet y una computadora chica no entran las palabras. */
@media (max-width: 960px) { .nav-texto { display: none; } }

/* ── Info links / racha ───────────────────────────────── */

#info-links {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.btn-link {
  background: none;
  border: none;
  color: #9b59b6;
  font-size: 0.78rem;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

.btn-link:hover { color: #ff6eb4; }


/* ── Toasts ───────────────────────────────────────────── */

#toasts {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 300;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: max-content;
  max-width: 92vw;
  pointer-events: none;
}
.toast {
  transform: translateY(20px);
  color: #fff;
  background: #2a1050;
  border: 2px solid #ff6eb4;
  border-radius: 99px;
  padding: 10px 22px;
  font-size: 0.9rem;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  white-space: nowrap;
  max-width: 92vw;
  overflow: hidden;
  text-overflow: ellipsis;
}

.toast.visible {
  opacity: 1;
  transform: none;
}
/* En el teléfono, arriba de la barra de abajo. */
@media (max-width: 720px) {
  #toasts,
  .toast-pasivo { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
}

/* ── Modales genéricos ────────────────────────────────── */

.modal-titulo {
  font-size: 1.2rem;
  color: #ff6eb4;
}

.modal-nota {
  font-size: 0.78rem;
  color: #aaa;
  line-height: 1.5;
}

/* Login diario */
.login-racha { font-size: 0.9rem; color: var(--texto2); }

.login-recompensa {
  background: var(--bg-verde, rgba(34,204,85,0.12));
  border: 2px solid #22CC55;
  border-radius: 12px;
  padding: 14px;
  text-align: center;
  font-size: 1.05rem;
  font-weight: bold;
  color: var(--texto);
}

[data-theme="oscuro"] .login-recompensa {
  background: #0d0520;
  border-color: #4ade80;
}

.login-especial {
  color: #f59e0b;
  font-size: 0.88rem;
  line-height: 1.5;
}

/* Perfil */
.perfil-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.perfil-stats div {
  background: #0d0520;
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: center;
}

.perfil-stats strong { font-size: 1rem; }
.perfil-stats small  { font-size: 0.68rem; color: #888; }

.perfil-rarezas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  font-size: 0.75rem;
}

.logros-lista {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
}

.logro {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #0d0520;
  border-radius: 8px;
  padding: 8px 12px;
  color: #fff;
}

/* Bloqueado se lee igual: con la transparencia de antes, el título gris
   sobre el fondo oscuro casi no se veía. El candado y el ícono apagado
   dicen que falta. */
.logro:not(.desbloqueado) { background: #1d1236; }
.logro:not(.desbloqueado) > :first-child { opacity: 0.55; }
.logro:not(.desbloqueado) strong { color: #ddd0f2; }

.logro strong { font-size: 0.82rem; display: block; }
.logro small  { font-size: 0.7rem; color: #bfb0dc; }

/* El perfil: aire entre las partes, para que los botones no se toquen. */
#modal-box.modal-perfil #modal-contenido { display: flex; flex-direction: column; gap: 12px; }
#modal-box.modal-perfil .modal-seccion-titulo { margin: 4px 0 -4px; }

.btn-secundario {
  background: #3a1a6e;
  border: 1px solid #9b59b6;
  border-radius: 10px;
  color: #fff;
  padding: 10px;
  font-size: 0.85rem;
  cursor: pointer;
  width: 100%;
  transition: background 0.15s;
}

.btn-secundario:hover { background: #5a2a9e; }

/* Leaderboard */
.lb-tabs {
  display: flex;
  gap: 6px;
}

.lb-tab {
  flex: 1;
  background: #0d0520;
  border: 1px solid #3a1a6e;
  border-radius: 8px;
  color: #aaa;
  padding: 8px;
  font-size: 0.78rem;
  cursor: pointer;
}

.lb-tab.activa {
  border-color: #ff6eb4;
  color: #fff;
}

#lb-contenido {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lb-fila {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #0d0520;
  color: #f0e8ff;   /* la fila es oscura con cualquier tema */
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.85rem;
}

.lb-fila.propia { border: 1px solid #ff6eb4; }
.lb-libres {
  margin: 0 0 10px;
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--bg-verde, #EFFFF3);
  color: var(--texto);
  font-size: 0.85rem;
  font-weight: 700;
}
.lb-invitado {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1.5px dashed var(--borde);
  text-align: center;
  font-size: 0.85rem;
  color: var(--texto2);
}
.lb-invitado p { margin: 0 0 8px; }

.lb-pos    { width: 32px; flex-shrink: 0; }
.lb-nombre { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-valor  { color: #f59e0b; font-weight: bold; white-space: nowrap; }

/* Probabilidades */
.prob-tabla {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.prob-fila {
  display: flex;
  justify-content: space-between;
  background: #0d0520;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.85rem;
}

.prob-fila strong { color: #4ade80; }


/* ══════════ Reveal (portado de master) ══════════ */

/* ── Reveal Pockie ─────────────────────────────────────────── */

#reveal-overlay {
  position: fixed;
  inset: 0;
  z-index: 600;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(10, 5, 30, 0.97);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

#reveal-overlay.oculto { display: none; }

#reveal-rays {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

#reveal-rays::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 300vmax; height: 300vmax;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(
    var(--rarity-color-dim, rgba(255,255,255,0.06)) 0deg 12deg,
    transparent 12deg 30deg
  );
  animation: raysSpin 18s linear infinite;
}

@keyframes raysSpin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

#reveal-card {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  animation: cardSpring 0.52s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* La épica entra en cámara lenta; la legendaria, con su propio rebote. */
.epica #reveal-card { animation-duration: 0.9s; }

.legendaria #reveal-card {
  animation: cardSpringLeg 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes cardSpring {
  from { transform: translateY(70px) scale(0.3); opacity: 0; }
  to   { transform: translateY(0) scale(1);      opacity: 1; }
}

@keyframes cardSpringLeg {
  from { transform: translateY(90px) scale(0.2) rotate(-8deg); opacity: 0; }
  55%  { transform: translateY(-20px) scale(1.1) rotate(3deg);  opacity: 1; }
  75%  { transform: translateY(8px) scale(0.97) rotate(-1deg); }
  to   { transform: translateY(0) scale(1) rotate(0deg); opacity: 1; }
}

.reveal-badge {
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.28em;
  padding: 5px 18px;
  border-radius: 99px;
  background: var(--rarity-color);
  color: #05000f;
  animation: fadeUp 0.3s 0.38s ease both;
}

.reveal-emoji-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.reveal-halo {
  position: absolute;
  width: 140px; height: 140px;
  border-radius: 50%;
  border: 3px solid var(--rarity-color);
  pointer-events: none;
  animation: haloExpand 0.75s 0.05s ease-out both;
}

@keyframes haloExpand {
  from { transform: scale(0.3); opacity: 0.9; }
  to   { transform: scale(2.5); opacity: 0; }
}

.reveal-emoji {
  font-size: 7rem;
  line-height: 1;
  filter: drop-shadow(0 0 16px var(--rarity-color));
  animation: emojiGlow 2.2s ease-in-out infinite;
}

.legendaria .reveal-emoji {
  font-size: 8.5rem;
  animation: emojiGlow 1.6s ease-in-out infinite, legendaEntrada 0.55s ease both;
}

@keyframes emojiGlow {
  0%, 100% { filter: drop-shadow(0 0 12px var(--rarity-color)); }
  50%       { filter: drop-shadow(0 0 50px var(--rarity-color)) brightness(1.3); }
}

@keyframes legendaEntrada {
  from { transform: rotate(-14deg) scale(1.5); }
  to   { transform: rotate(0) scale(1); }
}

.reveal-nombre {
  font-size: 1.8rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 0 28px var(--rarity-color);
  text-align: center;
  animation: fadeUp 0.3s 0.5s ease both;
}

.reveal-sub {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.5);
  text-align: center;
  animation: fadeUp 0.3s 0.65s ease both;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

#reveal-hint {
  position: absolute;
  bottom: 36px;
  font-size: 0.75rem;
  color: rgba(255,255,255,0.25);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  pointer-events: none;
  animation: hintBlink 2s 1.3s ease-in-out infinite both;
}

@keyframes hintBlink {
  0%, 100% { opacity: 0.22; }
  50%       { opacity: 0.65; }
}

#reveal-particulas {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.reveal-particula {
  position: absolute;
  top: 50%; left: 50%;
  border-radius: 50%;
  animation: particulaBurst var(--dur) ease-out forwards;
}

@keyframes particulaBurst {
  0%   { transform: translate(-50%, -50%) scale(1.2); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) scale(0); opacity: 0; }
}

/* ── La anticipación: la cápsula tiembla antes de abrirse ── */
/* Tiembla --temblores veces (una por rara, dos por épica, tres por
   legendaria) y se abre. Mientras tanto, nada de rayos ni pista: la
   pantalla se queda quieta, con la cápsula sola. */
/* visibility y no opacity: la pista parpadea con una animación de opacidad. */
/* Recién abierto no se puede cerrar (BLINDAJE_MS en main.js): la pista aparece después. */
#reveal-overlay.blindado #reveal-hint,
#reveal-overlay.anticipando #reveal-hint,
#reveal-overlay.anticipando #reveal-rays { visibility: hidden; }
#reveal-overlay.anticipando.legendaria {
  background: radial-gradient(circle at 50% 50%, rgba(255, 140, 0, 0.3), transparent 60%), rgba(10, 5, 30, 0.97);
}
.reveal-capsula {
  /* Cápsula de gashapón, vertical: cúpula transparente arriba, el color de la
     rareza abajo. Redonda y mitad y mitad se parecería a una Pokébola. */
  position: relative;
  width: 104px;
  height: 156px;
  border-radius: 52px;
  overflow: hidden;
  border: 5px solid #2b1b3d;
  box-shadow: 0 0 40px var(--rarity-color), inset 0 -10px 0 rgba(0, 0, 0, 0.12);
  animation: capsulaTiembla var(--ms-temblor, 480ms) ease-in-out calc(var(--temblores, 1)) both;
}
.reveal-capsula-tapa,
.reveal-capsula-base { position: absolute; left: 0; right: 0; height: 50%; }
.reveal-capsula-tapa { top: 0; background: linear-gradient(180deg, #F1FAFF, #B7E3FF); }
.reveal-capsula-base { bottom: 0; background: var(--rarity-color); border-top: 5px solid #2b1b3d; }
.reveal-capsula-base::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 10px;
  background: #FFD93D;
  border-bottom: 4px solid #2b1b3d;
}
.reveal-capsula-tapa::after {
  content: '';
  position: absolute;
  top: 14%; left: 18%;
  width: 22%; height: 30%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
}
@keyframes capsulaTiembla {
  0%, 100% { transform: rotate(0) scale(1); }
  15%      { transform: rotate(-14deg) scale(1.02); }
  35%      { transform: rotate(12deg) scale(1.04); }
  55%      { transform: rotate(-8deg) scale(1.02); }
  75%      { transform: rotate(4deg) scale(1.06); }
}

/* ¡NUEVA! y la cuenta de la colección, cuando es la primera copia. */
.reveal-nueva {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.12em;
  color: #2b1b3d;
  background: var(--amarillo);
  padding: 4px 16px;
  border-radius: 99px;
  box-shadow: 0 3px 0 #C9A400, 0 0 24px rgba(255, 217, 61, 0.7);
  animation: nuevaSalta 0.5s 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes nuevaSalta {
  from { transform: scale(0) rotate(-12deg); opacity: 0; }
  to   { transform: scale(1) rotate(-4deg); opacity: 1; }
}
.reveal-coleccion {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.7);
  animation: fadeUp 0.3s 0.8s ease both;
}
.reveal-coleccion strong { color: #fff; }

#reveal-flash {
  position: fixed;
  inset: 0;
  z-index: 700;
  pointer-events: none;
  opacity: 0;
  background: var(--flash-color, #fff);
}

#reveal-flash.activo {
  animation: flashOut 0.55s ease-out forwards;
}

@keyframes flashOut {
  0%   { opacity: 0.65; }
  100% { opacity: 0; }
}


/* Evolución: el card rota en lugar de subir */
.evolucion #reveal-card {
  animation: cardSpringEvol 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.evolucion/* La épica entra en cámara lenta; la legendaria, con su propio rebote. */
.epica #reveal-card { animation-duration: 0.9s; }

.legendaria #reveal-card {
  animation: cardSpringLegEvol 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes cardSpringEvol {
  from { transform: scale(0.1) rotate(18deg);  opacity: 0; }
  60%  { transform: scale(1.12) rotate(-4deg); opacity: 1; }
  80%  { transform: scale(0.97) rotate(1.5deg); }
  to   { transform: scale(1) rotate(0deg);     opacity: 1; }
}

@keyframes cardSpringLegEvol {
  from { transform: scale(0) rotate(-20deg);    opacity: 0; }
  40%  { transform: scale(1.2) rotate(8deg);   opacity: 1; }
  65%  { transform: scale(0.93) rotate(-3deg); }
  82%  { transform: scale(1.04) rotate(1deg); }
  to   { transform: scale(1) rotate(0deg);     opacity: 1; }
}

/* Badge de evolución: gradiente blanco → rareza */
.reveal-badge-evol {
  background: linear-gradient(135deg, #fff 0%, var(--rarity-color) 60%);
  color: #05000f;
}

/* ── Pockie Detail — Página completa ─────────────────────────── */

#pockie-detail-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

#pockie-detail-overlay.oculto { display: none; }

#pockie-detail-box {
  background: var(--panel);
  border-radius: 24px;
  width: min(900px, 96vw);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 70px rgba(0, 0, 0, 0.45);
  border: 2.5px solid var(--borde);
}

/* Topbar */
#pd-topbar {
  display: flex;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 2px solid var(--borde);
  flex-shrink: 0;
  gap: 12px;
}

#pockie-detail-cerrar {
  background: var(--fondo);
  border: 2px solid var(--borde);
  border-radius: 99px;
  padding: 6px 16px;
  font-family: 'Nunito', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--texto);
  cursor: pointer;
  box-shadow: 0 2px 0 var(--borde);
}
#pockie-detail-cerrar:hover { border-color: var(--azul); color: var(--azul); }
#pockie-detail-cerrar:active { transform: translateY(1px); box-shadow: none; }

/* Dos paneles */
#pd-layout {
  display: flex;
  flex: 1;
  min-height: 0;
}

/* Panel izquierdo: imagen + cadena */
#pd-left {
  width: 320px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  border-right: 2px solid var(--borde);
}

#pd-imagen-area {
  flex: 1;
  min-height: 220px;
  border-radius: 20px;
  border: 3px solid var(--borde);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  transition: border-color 0.35s, background 0.35s;
  background: var(--fondo);
}

/* Aura de fondo que pulsa */
#pd-imagen-glow {
  position: absolute;
  inset: 0;
  opacity: 0.18;
  transition: background 0.35s;
  pointer-events: none;
}

#pd-imagen-emoji {
  font-size: 7.5rem;
  line-height: 1;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.22));
  transition: font-size 0.2s;
  user-select: none;
}

/* Cadena de evolución debajo de la imagen */
#pockie-detail-evol-chain {
  display: flex;
  align-items: center;
  gap: 5px;
  overflow-x: auto;
  padding: 4px 2px 6px;
  scrollbar-width: none;
  flex-shrink: 0;
}
#pockie-detail-evol-chain::-webkit-scrollbar { display: none; }

.pd-arrow {
  color: var(--texto2);
  font-size: 1rem;
  flex-shrink: 0;
  opacity: 0.5;
}

.pd-evol-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 7px;
  border-radius: 14px;
  border: 2.5px solid var(--borde);
  background: var(--fondo);
  flex: 1;
  min-width: 60px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.12s;
}

.pd-evol-step:hover:not(.pd-evol-viendo) {
  border-color: var(--azul);
  background: rgba(17, 136, 255, 0.07);
  transform: translateY(-2px);
}

.pd-evol-step.pd-evol-viendo {
  border-color: var(--violeta);
  background: rgba(170, 0, 255, 0.08);
  box-shadow: 0 0 0 3px rgba(170, 0, 255, 0.18);
}

.pd-evol-step.pd-evol-tiene {
  border-color: var(--verde);
}

.pd-evol-step.pd-evol-locked {
  opacity: 0.38;
}

.pd-evol-emoji  { font-size: 1.6rem; line-height: 1; }
.pd-evol-etapa  { font-family: 'Nunito', sans-serif; font-size: 0.58rem; font-weight: 700; color: var(--texto2); text-transform: uppercase; }
.pd-evol-nombre { font-family: 'Nunito', sans-serif; font-size: 0.6rem; color: var(--texto); text-align: center; max-width: 58px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Panel derecho: info */
#pd-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px 24px;
  overflow-y: auto;
  min-width: 0;
}

#pd-nombre-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

#pd-svgslot {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#pockie-detail-nombre {
  font-family: 'Fredoka', sans-serif;
  font-size: 1.7rem;
  color: var(--texto);
  line-height: 1.1;
}

#pockie-detail-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pd-badge {
  font-family: 'Nunito', sans-serif;
  font-size: 0.73rem;
  font-weight: 700;
  border-radius: 8px;
  padding: 3px 10px;
  color: white;
  text-transform: capitalize;
}

.pd-rareza-comun      { background: #22CC55; }
.pd-rareza-rara       { background: #1188FF; }
.pd-rareza-epica      { background: #AA00FF; }
.pd-rareza-legendaria { background: #FF8C00; }
.pd-badge-tipo        { background: var(--texto2); }
.pd-badge-etapa       { background: var(--violeta); }

#pockie-detail-personalidad {
  font-family: 'Nunito', sans-serif;
  font-size: 0.85rem;
  color: var(--texto2);
}

#pockie-detail-desc {
  font-family: 'Nunito', sans-serif;
  font-size: 0.92rem;
  color: var(--texto);
  line-height: 1.6;
  background: var(--fondo);
  border-radius: 14px;
  padding: 14px 16px;
  border-left: 4px solid var(--violeta);
  transition: border-color 0.35s;
  flex: 1;
}

#pockie-detail-aviso {
  margin: 8px 2px 0;
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--texto2);
}
#pockie-detail-aviso.oculto { display: none; }

#pd-stats {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.pd-stat {
  background: var(--fondo);
  border: 2px solid var(--borde);
  border-radius: 10px;
  padding: 6px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pd-stat-label {
  font-family: 'Nunito', sans-serif;
  font-size: 0.65rem;
  color: var(--texto2);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.pd-stat strong {
  font-family: 'Nunito', sans-serif;
  font-size: 0.88rem;
  color: var(--texto);
}

/* Botón MEJORAR */
#pockie-detail-mejorar {
  font-family: 'Fredoka', sans-serif;
  font-size: 1.25rem;
  border-radius: 16px;
  padding: 14px;
  border: none;
  cursor: pointer;
  width: 100%;
  letter-spacing: 0.03em;
  transition: transform 0.1s, box-shadow 0.1s;
  margin-top: auto;
}

#pockie-detail-mejorar.btn-mejorar-activo {
  background: linear-gradient(135deg, var(--verde), #00AA22);
  color: white;
  box-shadow: 0 5px 0 #007A12;
}
#pockie-detail-mejorar.btn-mejorar-activo:active { transform: translateY(4px); box-shadow: 0 1px 0 #007A12; }

#pockie-detail-mejorar.btn-mejorar-leg {
  background: linear-gradient(135deg, var(--naranja), var(--rojo));
  color: white;
  box-shadow: 0 5px 0 #AA4400;
}
#pockie-detail-mejorar.btn-mejorar-leg:active { transform: translateY(4px); box-shadow: 0 1px 0 #AA4400; }

#pockie-detail-mejorar.btn-mejorar-max {
  background: linear-gradient(135deg, #FFD600, #FF8C00);
  color: white;
  box-shadow: 0 5px 0 #CC6600;
  cursor: default;
}

#pockie-detail-mejorar.btn-mejorar-sin-fondos,
#pockie-detail-mejorar.btn-mejorar-no {
  background: var(--borde);
  color: var(--texto2);
  cursor: not-allowed;
  box-shadow: none;
}

/* Colección cards: clickeables */
.pockie-card { cursor: pointer; }
.pockie-card:hover { transform: translateY(-2px); }

/* Mobile: panel apilado */
@media (max-width: 640px) {
  #pockie-detail-overlay { padding: 0; align-items: flex-end; }

  #pockie-detail-box {
    width: 100%;
    max-height: 94vh;
    border-radius: 24px 24px 0 0;
    border-bottom: none;
    border-left: none;
    border-right: none;
  }

  #pd-layout { flex-direction: column; overflow-y: auto; }

  #pd-left {
    width: 100%;
    border-right: none;
    border-bottom: 2px solid var(--borde);
    flex-direction: row;
    align-items: flex-start;
    padding: 14px 16px;
    gap: 12px;
  }

  #pd-imagen-area {
    width: 140px;
    min-height: 140px;
    flex-shrink: 0;
    flex: none;
  }

  #pd-imagen-emoji { font-size: 4.5rem; }

  #pockie-detail-evol-chain {
    flex: 1;
    flex-direction: column;
    gap: 6px;
    overflow-x: visible;
    overflow-y: auto;
    max-height: 140px;
  }

  .pd-arrow { display: none; }

  .pd-evol-step {
    flex-direction: row;
    gap: 8px;
    padding: 6px 10px;
    flex: none;
    width: 100%;
    min-width: 0;
  }

  .pd-evol-nombre { max-width: none; }

  #pd-right { padding: 16px; }

  #pockie-detail-nombre { font-size: 1.35rem; }
}

/* ── Modo Oscuro ─────────────────────────────────────────────── */

[data-theme="oscuro"] {
  --fondo:    #1A0A2E;
  --panel:    #2A1050;
  --texto:    #F0E8FF;
  --texto2:   #9988BB;
  --borde:    #3A2060;
  --bg-store: #1E1200;
  --bg-gems:  #001428;
  --bg-gold:  #1A1200;
  --bg-verde: #001A0A;
}

[data-theme="oscuro"] #store { box-shadow: 0 4px 0 #8A4000; }

[data-theme="oscuro"] .gems-paquete {
  border-color: #2A3A6E;
  box-shadow: 0 2px 0 #1A2A5E;
}
[data-theme="oscuro"] .gems-paquete.popular { border-color: var(--amarillo); box-shadow: 0 2px 0 #8A6000; }
[data-theme="oscuro"] .gems-paquete.oferta  { border-color: var(--verde);    box-shadow: 0 2px 0 #005A1A; }
[data-theme="oscuro"] .gems-paquete.ballena { border-color: var(--violeta);  box-shadow: 0 2px 0 #550088; }

[data-theme="oscuro"] .store-seccion h3  { border-bottom-color: #5A3000; }
[data-theme="oscuro"] .prog-barra        { background: #2A1050; }
[data-theme="oscuro"] .leg-barra         { background: #2A2000; border-color: #6A5000; }

[data-theme="oscuro"] .pockie-card {
  border-color: var(--borde);
  box-shadow: 0 3px 0 #1A0A2E;
}
[data-theme="oscuro"] .pockie-card[data-rareza="comun"]     { border-color: #008833; box-shadow: 0 3px 0 #005522; }
[data-theme="oscuro"] .pockie-card[data-rareza="rara"]      { border-color: #0055CC; box-shadow: 0 3px 0 #003388; }
[data-theme="oscuro"] .pockie-card[data-rareza="epica"]     { border-color: #7700BB; box-shadow: 0 3px 0 #550088; }
[data-theme="oscuro"] .pockie-card[data-rareza="legendaria"]{ border-color: #AA5500; box-shadow: 0 3px 0 #773300; background: #150900; }

[data-theme="oscuro"] .modal-pockie-info { background: #0D0520; border-color: var(--borde); }
[data-theme="oscuro"] #modal-cerrar      { background: #3A2060; color: var(--texto2); }

[data-theme="oscuro"] .btn-alimentar { border-color: var(--borde); border-bottom-color: #1A0A2E; }
[data-theme="oscuro"] .btn-alimentar:hover:not(:disabled) { border-color: var(--violeta); border-bottom-color: #5500AA; }
[data-theme="oscuro"] .btn-feed-card { border-color: var(--borde); color: var(--texto); }

[data-theme="oscuro"] .herramienta-badge { background: #2A1050; }
[data-theme="oscuro"] .btn-activar {
  background: #2A1050;
  border-color: var(--borde);
  border-bottom-color: #1A0A2E;
  color: var(--texto);
}
[data-theme="oscuro"] .btn-activar.activo { background: #001A08; }

[data-theme="oscuro"] .inv-item { border-color: var(--borde); }
[data-theme="oscuro"] #store    { border-right-color: var(--naranja); }
[data-theme="oscuro"] #catalogo {
  box-shadow: 0 4px 0 #005A10;
  border-color: var(--verde);
}
[data-theme="oscuro"] .cat-orden       { background: #1A0A2E; }
[data-theme="oscuro"] .cat-orden.activo{ background: #005A10; border-color: var(--verde); }
[data-theme="oscuro"] .cat-item:hover  { background: #2A1050; }

/* ── Combo + feedback flotante ────────────────────────── */

#expendedora-wrap { position: relative; }

#expendedora.tap { animation: tapBounce 0.16s ease; }

@keyframes tapBounce {
  40%  { transform: scale(0.96, 0.93); }
  100% { transform: scale(1); }
}

.float-drop {
  position: absolute;
  /* Sale de la vitrina y sube: desde más arriba tapaba el cartel. */
  top: 40%;
  font-weight: 900;
  font-size: 1.25rem;
  pointer-events: none;
  z-index: 5;
  text-shadow: 0 1px 0 #fff, 0 2px 6px rgba(0,0,0,0.25);
  animation: floatUp 1s ease-out forwards;
}

.float-drop.dorado {
  font-size: 1.5rem;
  color: #FF8C00;
  -webkit-text-stroke: 0.5px #A05000;
}

@keyframes floatUp {
  0%   { opacity: 1; transform: translateY(0) scale(0.9); }
  20%  { transform: translateY(-12px) scale(1.15); }
  70%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-72px) scale(1.05); }
}

#combo-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #FFD600, #FF8C00);
  color: #7A2E00;
  font-weight: 900;
  font-size: 0.95rem;
  padding: 4px 16px;
  border-radius: 999px;
  border: 3px solid #fff;
  box-shadow: 0 3px 0 #A05000, 0 5px 12px rgba(0,0,0,0.2);
  z-index: 6;
  pointer-events: none;
  white-space: nowrap;
}

#combo-badge.oculto { display: none; }
#combo-badge.pulso  { animation: comboPulso 0.18s ease; }

@keyframes comboPulso {
  50% { transform: translateX(-50%) scale(1.22); }
}

[data-theme="oscuro"] #combo-badge { border-color: #1A0A2E; }
[data-theme="oscuro"] .float-drop  { text-shadow: 0 1px 0 #000, 0 2px 6px rgba(0,0,0,0.5); }

/* ── Tienda de gemas (se llamó "Crimson Store" un tiempo) ────────
   Solo la sección "Conseguir gemas" (paquetes de pago real) usa la
   identidad de Crimson Entertainment — Exo 2 + Bricolage Grotesque,
   acento carmesí, esquinas cortadas — pero en su versión clara y
   alegre (marfil, no tinta), porque vive adentro de un juego para
   chicos. El resto del modal (caja, header, "Pockies directas") se
   queda con el estilo Pockies de siempre. */
#gemstore-overlay {
  --gs-crimson: #b30400;
  --gs-crimson-bright: #df0500;
  --gs-crimson-soft: #fff1ee;
  --gs-crimson-line: #ffd9d0;
  --gs-cut-sm: polygon(0 8px, 8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);

  position: fixed;
  inset: 0;
  background: rgba(20, 5, 40, 0.6);
  z-index: 350;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
}

#gemstore-overlay.oculto { display: none; }

#gemstore-box {
  background: var(--panel);
  border: 3px solid var(--azul);
  border-radius: 24px;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: var(--texto);
  box-shadow: 0 6px 0 #003A99, 0 20px 40px rgba(0,0,0,0.3);
}

#gemstore-header {
  display: flex;
  align-items: center;
  gap: 10px;
}

#gemstore-header h2 {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
}

.gs-saldo {
  font-size: 0.85rem;
  color: var(--texto2);
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

#gemstore-cerrar {
  background: var(--panel);
  border: 2px solid var(--borde);
  border-radius: 10px;
  color: var(--texto);
  font-size: 1rem;
  cursor: pointer;
  padding: 4px 10px;
  line-height: 1;
}

.gs-sec-title {
  font-weight: 900;
  font-size: 0.82rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 4px;
}

.gs-sec-main { color: var(--azul); margin-top: 4px; }

/* "Conseguir gemas": la única parte con identidad de Crimson Entertainment. */
.gs-sec-title.gs-sec-ce {
  font-family: 'Exo 2', sans-serif;
  color: var(--gs-crimson-bright);
}

.gs-paquetes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

.gs-paquete {
  background: var(--gs-crimson-soft);
  border: 1.5px solid var(--gs-crimson-line);
  clip-path: var(--gs-cut-sm);
  padding: 16px 10px 12px;
  text-align: center;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-family: 'Bricolage Grotesque', sans-serif;
}

.gs-paquete.gs-destacado { border-color: var(--gs-crimson-bright); }

.gs-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gs-crimson-bright);
  color: #fff;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.gs-paquete-gemas {
  font-family: 'Exo 2', sans-serif;
  font-weight: 900;
  font-size: 1.05rem;
  color: var(--gs-crimson);
  display: flex;
  align-items: center;
  gap: 4px;
}

.gs-paquete-nombre { font-size: 0.8rem; color: var(--texto2); }
.gs-paquete-nota   { font-size: 0.68rem; color: var(--gs-crimson-bright); font-weight: bold; }

.gs-btn-paquete {
  background: var(--gs-crimson-bright);
  border: none;
  clip-path: var(--gs-cut-sm);
  border-radius: 0;
  color: #fff;
  font-family: 'Exo 2', sans-serif;
  font-weight: 900;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 7px 14px;
  width: 100%;
  box-shadow: 3px 3px 0 var(--gs-crimson);
  transition: transform 0.1s, box-shadow 0.1s;
}

.gs-btn-paquete:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--gs-crimson); }

.gs-btn-paquete.gs-pronto {
  background: var(--borde);
  color: var(--texto2);
  box-shadow: none;
  cursor: default;
}

.gs-pockies-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
}

.gs-pockie {
  border: 2.5px solid var(--borde);
  border-radius: 14px;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-align: center;
}

.gs-pockie-emoji  { font-size: 1.8rem; }

.gs-pockie-nombre {
  font-size: 0.72rem;
  font-weight: bold;
  overflow-wrap: break-word;
  max-width: 100%;
}

.gs-pockie-nombre small { color: var(--texto2); font-weight: normal; }

.gs-btn-pockie {
  background: linear-gradient(180deg, #34D399, #059669);
  border: none;
  border-bottom: 3px solid #036B4A;
  border-radius: 10px;
  color: #fff;
  font-weight: 900;
  font-size: 0.8rem;
  cursor: pointer;
  padding: 5px 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.gs-btn-pockie:active { transform: translateY(2px); border-bottom-width: 1px; }

.gs-btn-pockie.sin-fondos {
  background: var(--borde);
  border-bottom-color: transparent;
  color: var(--texto2);
  cursor: not-allowed;
}

[data-theme="oscuro"] #gemstore-box { box-shadow: 0 6px 0 #002060, 0 20px 40px rgba(0,0,0,0.6); }
[data-theme="oscuro"] .gs-paquete   { background: rgba(223, 5, 0, 0.12); border-color: rgba(223, 5, 0, 0.35); }

/* ── Splash de marca (Crimson Entertainment) ──────────────────
   Se muestra mientras cargarEstado() confirma si hay sesión. Con sesión
   activa se sostiene un delay simulado de 5s (ver js/main.js) para que el
   logo de CE tenga su momento en vez de mostrar el cartel de login de
   golpe; sin sesión se oculta apenas se confirma, para dar paso al gate
   real de Kodeval. */
#ce-splash-overlay {
  position: fixed;
  inset: 0;
  z-index: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a1226;
}

#ce-splash-overlay.oculto { display: none; }

#ce-splash-logo {
  width: min(220px, 55vw);
  height: auto;
  /* Sin radio propio: el logo ya trae el suyo (la base redondeada del bloque
     rojo) y redondear las cuatro puntas lo deforma. Ver marca/MARCA.md en el
     repositorio de Crimson. */
  opacity: 0;
  animation: ceSplashFade 1.4s ease forwards;
}

@keyframes ceSplashFade {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Gate de login (Kodeval Connections SSO) ──────────────────── */

#auth-gate-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: #1A0A2E;
}

#auth-gate-overlay.oculto { display: none; }

/* La beta cerrada: mismo fondo y misma caja que la entrada. */
#beta-cerrada-overlay {
  position: fixed; inset: 0; z-index: 510;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  background: #1A0A2E;
}
#beta-cerrada-overlay.oculto { display: none; }
#beta-cerrada-box {
  background: #2A1050; border: 3px solid var(--violeta); border-radius: 24px;
  padding: 24px 20px 20px; width: 100%; max-width: 420px; text-align: center; color: #F0E8FF;
  box-shadow: 0 6px 0 #7700CC, 0 20px 40px rgba(0,0,0,0.35);
}
#beta-cerrada-box h1 { font-family: 'Fredoka', sans-serif; font-size: 1.5rem; margin-bottom: 12px; }
#beta-cerrada-box p { font-size: 0.92rem; color: #C9BEE8; line-height: 1.55; margin-bottom: 18px; }
.beta-cerrada-acciones { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.beta-cerrada-enlace { color: #FFD23F; font-weight: 800; }
.beta-cerrada-salir { background: transparent; color: #C9BEE8; border: 2px solid #7A5FB8; border-radius: 12px; padding: 10px 16px; font-weight: 700; cursor: pointer; }

#auth-gate-box {
  background: #2A1050;
  border: 3px solid var(--violeta);
  border-radius: 24px;
  padding: 22px 18px 18px;
  width: 100%;
  max-width: 400px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  text-align: center;
  color: #F0E8FF;
  box-shadow: 0 6px 0 #7700CC, 0 20px 40px rgba(0,0,0,0.35);
}

#auth-gate-box h1 {
  font-family: 'Fredoka', sans-serif;
  font-size: 1.6rem;
  margin-bottom: 12px;
}

#auth-gate-box p {
  font-size: 0.88rem;
  color: #C9BEE8;
  line-height: 1.55;
  margin-bottom: 20px;
}


/* Jugar sin cuenta: progreso solo local */
#btn-auth-gate-invitado {
  background: transparent;
  color: #C9BEE8;
  border: 2px solid #7A5FB8;
  border-radius: 12px;
  padding: 10px 16px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  width: 100%;
  margin-top: 12px;
}
#auth-gate-invitado-nota {
  font-size: 0.75rem !important;
  color: #A99AD0 !important;
  margin: 8px 0 0 !important;
}

/* ── Cartel de la Cuenta Crimson ─────────────────────────────────
   El mismo cartel en la entrada (#auth-gate-box) y en el aviso que ven
   los invitados al volver (#promo-cuenta-overlay); también viste el
   regalo cuando llega (#regalo-cuenta-box). Carmesí de Crimson con oro,
   rayos girando y el regalo que salta: tiene que llamar la atención. */

.promo-cuenta,
#regalo-cuenta-box {
  --pc-carmesi: #b30400;
  --pc-carmesi-vivo: #df0500;
  --pc-oro: #FFD93D;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 20px;
  background: radial-gradient(circle at 50% 30%, #ff3b30 0%, var(--pc-carmesi-vivo) 35%, var(--pc-carmesi) 70%, #5e0200 100%);
  border: 3px solid var(--pc-oro);
  box-shadow: 0 0 0 3px #5e0200, 0 0 28px rgba(255, 60, 40, 0.55);
  color: #fff;
  text-align: center;
}

.promo-cuenta {
  padding: 16px 14px 14px;
  margin-bottom: 14px;
}

.promo-rayos {
  position: absolute;
  inset: -60%;
  z-index: -1;
  background: repeating-conic-gradient(from 0deg, rgba(255, 217, 61, 0.16) 0deg 10deg, transparent 10deg 22.5deg);
  animation: promo-girar 18s linear infinite;
}

.promo-cinta {
  display: inline-block;
  background: var(--pc-oro);
  color: #5e0200;
  font-family: 'Exo 2', 'Nunito', sans-serif;
  font-weight: 900;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
  box-shadow: 0 2px 0 #8a6500;
}

.promo-regalo {
  display: block;
  width: 108px;
  height: auto;
  margin: 8px auto 2px;
  filter: drop-shadow(0 6px 10px rgba(60, 0, 0, 0.45));
  animation: promo-saltar 1.6s ease-in-out infinite;
}

.promo-destellos { animation: promo-titilar 1.2s ease-in-out infinite alternate; }

.promo-titulo {
  font-family: 'Fredoka', sans-serif;
  font-size: 1.35rem;
  line-height: 1.15;
  margin: 4px 0 6px;
  color: #fff;
  text-shadow: 0 2px 0 #5e0200, 0 0 14px rgba(255, 217, 61, 0.6);
}

#auth-gate-box .promo-texto,
.promo-texto {
  font-size: 0.86rem;
  line-height: 1.45;
  color: #ffe9e4;
  margin: 0;
}
.promo-texto strong { color: var(--pc-oro, #FFD93D); }

/* El botón de entrar brilla: un reflejo que lo cruza cada tanto. */
.promo-btn-login {
  position: relative;
  overflow: hidden;
  display: block;
  width: 100%;
  background: linear-gradient(180deg, #FFE36B, #FFD93D 55%, #f2b705);
  color: #5e0200;
  border: none;
  border-radius: 14px;
  padding: 14px 18px;
  font-family: 'Fredoka', sans-serif;
  font-size: 1.02rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 5px 0 #8a6500, 0 0 22px rgba(255, 217, 61, 0.55);
  animation: promo-latir 1.6s ease-in-out infinite;
}
.promo-btn-login::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.75), transparent);
  transform: skewX(-20deg);
  animation: promo-reflejo 2.8s ease-in-out infinite;
}
.promo-btn-login:active { transform: translateY(4px); box-shadow: 0 1px 0 #8a6500; }

.promo-letra-chica {
  font-size: 0.64rem !important;
  line-height: 1.45 !important;
  color: #a99ad0 !important;
  margin: 12px 0 0 !important;
  text-align: left;
}

/* Aviso para los invitados que vuelven */
#promo-cuenta-overlay,
#regalo-cuenta-overlay {
  position: fixed;
  inset: 0;
  z-index: 480;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(20, 5, 20, 0.72);
  animation: promo-aparecer 0.25s ease-out;
}
#promo-cuenta-overlay.oculto,
#regalo-cuenta-overlay.oculto { display: none; }

#promo-cuenta-box {
  position: relative;
  width: 100%;
  max-width: 380px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  background: #2A1050;
  border: 3px solid var(--violeta);
  border-radius: 24px;
  padding: 22px 18px 16px;
  color: #F0E8FF;
  box-shadow: 0 6px 0 #7700CC, 0 20px 40px rgba(0, 0, 0, 0.35);
  animation: promo-entrar 0.35s cubic-bezier(.2, 1.4, .4, 1);
}

.promo-cerrar {
  position: absolute;
  top: 6px;
  right: 8px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #F0E8FF;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

#btn-promo-ahora-no {
  display: block;
  width: 100%;
  margin-top: 10px;
  background: transparent;
  color: #C9BEE8;
  border: 2px solid #7A5FB8;
  border-radius: 12px;
  padding: 10px 16px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}

/* El regalo, cuando llega */
#regalo-cuenta-box {
  width: 100%;
  max-width: 360px;
  padding: 20px 18px 16px;
  animation: promo-entrar 0.45s cubic-bezier(.2, 1.4, .4, 1);
}
#regalo-cuenta-arte {
  font-size: 150px;
  line-height: 1;
  margin: 10px auto 4px;
  filter: drop-shadow(0 8px 12px rgba(60, 0, 0, 0.5));
}
/* El mejor premio del preregistro, cuando no es una Pockie (js/main.js). */
#regalo-cuenta-arte .regalo-premio { display: block; width: 150px; height: 150px; margin: 0 auto; }
#regalo-cuenta-arte .regalo-icono { border-radius: 50%; border: 5px solid #ffd23f; box-sizing: border-box; }
#regalo-cuenta-box .promo-letra-chica { color: #ffd0c8 !important; }
.promo-letra-chica a { color: inherit; text-decoration: underline; }
#regalo-cuenta-box .promo-btn-login { margin-top: 14px; }

@keyframes promo-girar   { to { transform: rotate(360deg); } }
@keyframes promo-saltar  { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-8px) rotate(3deg); } }
@keyframes promo-titilar { from { opacity: 0.35; } to { opacity: 1; } }
@keyframes promo-latir   { 0%, 100% { box-shadow: 0 5px 0 #8a6500, 0 0 14px rgba(255, 217, 61, 0.4); } 50% { box-shadow: 0 5px 0 #8a6500, 0 0 30px rgba(255, 217, 61, 0.9); } }
@keyframes promo-reflejo { 0%, 55% { left: -60%; } 100% { left: 130%; } }
@keyframes promo-aparecer { from { opacity: 0; } }
@keyframes promo-entrar  { from { transform: scale(0.85); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .promo-rayos, .promo-regalo, .promo-destellos, .promo-btn-login, .promo-btn-login::after,
  #promo-cuenta-box, #regalo-cuenta-box, #promo-cuenta-overlay, #regalo-cuenta-overlay { animation: none; }
}

.btn-cerrar-sesion {
  background: none;
  border: 1px solid var(--rojo);
  color: var(--rojo);
  border-radius: 10px;
  padding: 8px;
  font-size: 0.8rem;
  cursor: pointer;
  width: 100%;
  transition: background 0.15s;
}

.btn-cerrar-sesion:hover { background: rgba(255, 59, 59, 0.1); }

[data-theme="oscuro"] #auth-gate-overlay { background: #0D0520; }
[data-theme="oscuro"] .gs-pockie          { background: rgba(255,255,255,0.02); }

/* ── Banner de estado de sincronización ─────────────────────── */

#sync-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 300;
  background: #B8860B;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  text-align: center;
  padding: 7px 14px;
  transform: translateY(-110%);
  transition: transform 0.25s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

#sync-banner.visible { transform: translateY(0); }

/* ── Banner de evento temporal (GDD 11) ───────────────── */

#banner-evento,
.banner-evento {
  max-width: 1100px;
  margin: -8px auto 16px;
  width: 100%;
  background: linear-gradient(90deg, var(--violeta), var(--rosa));
  color: white;
  border-radius: 14px;
  padding: 10px 16px;
  font-size: 0.9rem;
  text-align: center;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.15);
}

/* ── Footer ───────────────────────────────────────────── */

#footer-links {
  max-width: 1100px;
  margin: 28px auto 0;
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;   /* en teléfono la firma se salía de la pantalla */
  gap: 4px 10px;
  font-size: 0.8rem;
  color: var(--texto2);
  padding: 14px 8px;
  border-top: 2px solid var(--borde);
}

#footer-links a {
  color: var(--texto2);
  text-decoration: none;
  font-weight: 700;
}

#footer-links a:hover { color: var(--rosa); }

.footer-firma { opacity: 0.7; }

/* ── Perfil público (?perfil=<user_id>) ───────────────── */

.perfil-publico {
  max-width: 640px;
  margin: 24px auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
  text-align: center;
}

.perfil-publico h1 {
  font-family: 'Fredoka', sans-serif;
  font-size: 2rem;
  background: linear-gradient(90deg, var(--rosa), var(--violeta), var(--azul));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* La tarjeta del jugador y, debajo, cuántas tiene de cada rareza. */
.pp-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pp-card .perfil-rarezas { justify-content: center; }

.pp-coleccion {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 10px;
  width: 100%;
}

.pp-jugar {
  background: linear-gradient(135deg, var(--rosa), var(--violeta));
  color: white;
  text-decoration: none;
  font-family: 'Nunito', sans-serif;
  font-weight: 700;
  border-radius: 14px;
  padding: 12px 28px;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.18);
}

/* ══════════ v0.4: Mejoras, Skins y Plaza ══════════ */

/* ── Mejoras (tienda) ─────────────────────────────── */

.mejora-nivel {
  background: var(--amarillo);
  color: #7A5800;
  border-radius: 8px;
  padding: 1px 7px;
  font-size: 0.7rem;
  margin-left: 4px;
}

/* ── Ayudantes (tienda): toques automáticos ───────── */

.ay-total {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  color: var(--texto);
}
.ay-total b { font-size: 1.6rem; font-family: 'Nunito', sans-serif; font-weight: 900; }
.ay-total small { color: var(--texto-suave); margin-left: auto; }
.ay-barra { margin: 6px 0; }
.ay-nota { margin: 4px 0 8px; font-size: 0.8rem; color: var(--texto-suave); }
.ay-cantidades { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; color: var(--texto-suave); font-size: 0.85rem; }
.ay-cantidad {
  min-width: 48px;
  min-height: 40px;
  border-radius: 10px;
  border: 2px solid var(--borde, rgba(0, 0, 0, 0.2));
  background: transparent;
  color: var(--texto);
  font-weight: 800;
  cursor: pointer;
}
.ay-cantidad.elegida { background: var(--amarillo); color: #7A5800; border-color: transparent; }
.ay-item .btn-ayudante { min-width: 96px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.ay-item .btn-ayudante.sin-fondos { opacity: 0.6; }

.mejora-max {
  color: var(--verde);
  font-size: 1.3rem;
  font-weight: 900;
  padding: 0 10px;
}

/* ── Skins de expendedora (temas via data-skin) ──────
   Cada tema redefine las variables --exp-* de #expendedora; cartel,
   vitrina, palanca y bandeja las heredan. */

.skin-muestra[data-skin="bosque"], #expendedora[data-skin="bosque"]   { --exp-c1: #1E7A3C; --exp-c2: #66BB3A; --exp-borde: #A3E048; --exp-sombra: #145226; --exp-oscuro: #0F3A1C; --exp-foco: #E4FF9E; }
.skin-muestra[data-skin="oceano"], #expendedora[data-skin="oceano"]   { --exp-c1: #0B4F8A; --exp-c2: #19AFD0; --exp-borde: #7DE3F4; --exp-sombra: #073757; --exp-oscuro: #06294A; --exp-foco: #C8F6FF; }
.skin-muestra[data-skin="caramelo"], #expendedora[data-skin="caramelo"] { --exp-c1: #E8447A; --exp-c2: #FF9ECD; --exp-borde: #FFE1F0; --exp-sombra: #A82355; --exp-oscuro: #6E1639; --exp-foco: #FFF4A8; }
.skin-muestra[data-skin="estrella"], #expendedora[data-skin="estrella"] { --exp-c1: #C98A00; --exp-c2: #FFD600; --exp-borde: #FFF3B8; --exp-sombra: #8A5F00; --exp-oscuro: #5A3D00; --exp-foco: #FFFFFF; }
.skin-muestra[data-skin="galaxia"], #expendedora[data-skin="galaxia"] {
  --exp-c1: #191233; --exp-c2: #4B2A8A; --exp-borde: #8B6EF0; --exp-sombra: #0E0A20; --exp-oscuro: #0B0718; --exp-foco: #7DD3FC;
}
#expendedora[data-skin="galaxia"] {
  background:
    radial-gradient(2px 2px at 25% 20%, #fff 40%, transparent 50%),
    radial-gradient(1.5px 1.5px at 70% 35%, #FFD600 40%, transparent 50%),
    radial-gradient(2px 2px at 45% 75%, #7DD3FC 40%, transparent 50%),
    radial-gradient(1.5px 1.5px at 85% 65%, #fff 40%, transparent 50%),
    linear-gradient(160deg, var(--exp-c1), var(--exp-c2));
}
/* Las dos de evento se vendían sin tema propio: se veían como la Clásica */
.skin-muestra[data-skin="pockieween"], #expendedora[data-skin="pockieween"] {
  --exp-c1: #2A123D; --exp-c2: #FF7A1A; --exp-borde: #FFB347; --exp-sombra: #1A0A26; --exp-oscuro: #14081F; --exp-foco: #B6FF6B;
}
.skin-muestra[data-skin="navidad"], #expendedora[data-skin="navidad"] {
  --exp-c1: #B3122E; --exp-c2: #E8414F; --exp-borde: #2E9E4F; --exp-sombra: #6E0A1A; --exp-oscuro: #3D0710; --exp-foco: #FFF6D6;
}
#expendedora[data-skin="navidad"] {
  background:
    radial-gradient(2.5px 2.5px at 18% 30%, #fff 40%, transparent 55%),
    radial-gradient(2px 2px at 78% 22%, #fff 40%, transparent 55%),
    radial-gradient(2.5px 2.5px at 62% 70%, #fff 40%, transparent 55%),
    radial-gradient(2px 2px at 30% 82%, #fff 40%, transparent 55%),
    linear-gradient(160deg, var(--exp-c1), var(--exp-c2));
}


/* ── Tienda de skins (modal) ──────────────────────── */

.skins-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.skin-card {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 2px solid var(--borde);
  border-radius: 14px;
  padding: 10px 12px;
  cursor: pointer;
  background: var(--panel);
}

.skin-card-equipada { border-color: var(--verde); background: var(--bg-verde); }

.skin-emoji { font-size: 1.7rem; }

.skin-evento-tag { color: var(--rosa); font-weight: 700; }

.skin-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.skin-info small { color: var(--texto2); font-size: 0.75rem; }

.btn-skin-comprar, .btn-skin-equipar {
  border: none;
  border-radius: 10px;
  padding: 7px 12px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.btn-skin-comprar { background: var(--azul); color: #fff; }
.btn-skin-comprar.sin-fondos { opacity: 0.45; cursor: not-allowed; }
.btn-skin-equipar { background: var(--amarillo); color: #7A5800; }
.skin-equipada  { color: var(--verde); font-weight: 700; white-space: nowrap; }
.skin-bloqueada { color: var(--texto2); font-weight: 700; white-space: nowrap; }

/* ── Plaza (js/plaza.js) ─────────────────────────────────────
   Escenario dibujado (assets/plaza/*.svg, 16:10) con la grilla de lugares
   encima del piso. En pantallas angostas el escenario no se achica por
   debajo de 640 px: se desliza de costado, así cada lugar sigue siendo
   tocable y la grilla coincide con las baldosas. */

#plaza-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 5, 40, 0.6);
  z-index: 350;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}
#plaza-overlay.oculto { display: none; }

#plaza-box {
  background: var(--panel);
  border: 3px solid var(--violeta);
  border-radius: 24px;
  width: 100%;
  max-width: 940px;
  max-height: 94vh;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--texto);
  box-shadow: 0 6px 0 #5a0a99, 0 20px 40px rgba(0,0,0,0.3);
}

#plaza-header { display: flex; align-items: center; gap: 10px; }
#plaza-header h2 {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
}
#plaza-cerrar {
  background: var(--panel);
  border: 2px solid var(--borde);
  border-radius: 10px;
  color: var(--texto);
  padding: 4px 8px;
  cursor: pointer;
}

.plaza-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.plaza-tab {
  flex: 1;
  min-width: 96px;
  padding: 8px 10px;
  border: 2px solid var(--borde);
  border-radius: 12px;
  background: var(--panel);
  color: var(--texto);
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  cursor: pointer;
}
.plaza-tab.activa { background: var(--violeta); border-color: var(--violeta); color: #fff; }

.plaza-salas { display: flex; align-items: center; justify-content: center; gap: 10px; }
.plaza-salas button {
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 2px solid var(--borde);
  background: var(--panel);
  color: var(--texto);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}
.plaza-salas button:disabled { opacity: .35; cursor: default; }
#plaza-sala-nombre { font-weight: 700; font-size: .92rem; color: var(--texto2); }

.plaza-escena-scroll {
  overflow-x: auto;
  border-radius: 16px;
  border: 3px solid #2b1b3d;
}
.plaza-escena {
  position: relative;
  min-width: 640px;
  aspect-ratio: 16 / 10;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.plaza-grilla { position: absolute; left: 0; right: 0; bottom: 0; display: grid; }

.plaza-celda {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 0 6%;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: clamp(1.9rem, 4.2vw, 2.9rem);
  line-height: 1;
}
.plaza-celda.libre:hover, .plaza-celda.libre:focus-visible { background: rgba(255,255,255,.35); outline: none; }
.plaza-celda.elegida { background: rgba(255,255,255,.5); box-shadow: inset 0 0 0 3px var(--violeta); border-radius: 8px; }
.plaza-celda.mia .pockie-arte { filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 3px var(--rosa)); }
.plaza-celda:hover { z-index: 3; }

.plaza-burbuja {
  position: absolute;
  bottom: 88%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  max-width: 150px;
  width: max-content;
  padding: 4px 8px;
  border: 2px solid #2b1b3d;
  border-radius: 12px;
  background: #fff;
  color: #2b1b3d;
  font-family: 'Nunito', sans-serif;
  font-size: .68rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  pointer-events: none;
}
.plaza-burbuja::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -7px;
  width: 10px; height: 10px;
  background: #fff;
  border-right: 2px solid #2b1b3d;
  border-bottom: 2px solid #2b1b3d;
  transform: translateX(-50%) rotate(45deg);
}

.plaza-aviso {
  position: absolute;
  inset: auto 0 40% 0;
  margin: 0 auto;
  width: fit-content;
  padding: 8px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,.9);
  color: #2b1b3d;
  font-weight: 700;
}

#plaza-panel { display: flex; flex-direction: column; gap: 8px; }
/* Lo exhibido por el equipo de Pockies, marcado. */
.plaza-celda { position: relative; }
.plaza-equipo {
  position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  font-size: 0.55rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase;
  background: var(--violeta); color: #fff; border-radius: 999px; padding: 1px 5px; pointer-events: none; white-space: nowrap;
}
.plaza-reaccion {
  display: flex; align-items: center; gap: 4px;
  padding: 6px 12px;
  border: 2px solid var(--borde);
  border-radius: 999px;
  background: var(--panel);
  color: var(--texto);
  cursor: pointer;
}
.plaza-reaccion.activa { border-color: var(--rosa); background: #FFE3EF; }
.plaza-reaccion:disabled { cursor: default; opacity: .8; }
.plaza-perfil { color: var(--violeta); font-weight: 700; font-size: .9rem; }

/* ── La tarjeta del jugador ─────────────────────────────────────
   La misma en La Plaza, en el perfil propio y en el público. Es siempre
   oscura, con cualquier tema: es una carta, y así se reconoce en los tres
   lugares. El borde y el halo toman el color de la rareza de su Pockie. */
.tarjeta-jugador {
  --tj-rareza: var(--violeta);
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 10px 14px;
  align-items: center;
  padding: 14px;
  border-radius: 22px;
  border: 3px solid var(--violeta);
  background: linear-gradient(160deg, #2e1060 0%, #1d0b3a 100%);
  box-shadow: 0 4px 0 #12052a, inset 0 0 0 1px rgba(255,255,255,.06);
  color: #f0e8ff;
  text-align: left;
  width: 100%;
  max-width: 560px;
  margin: 14px auto;
  box-sizing: border-box;
}
.tarjeta-jugador + .perfil-rarezas { margin-top: 6px; }
/* El marco (tools/gen_marcos.mjs escribe css/marcos.css con el borde y el
   adorno de cada uno): el borde es un degradé detrás del fondo, y el adorno
   va arriba a la izquierda y, espejado, abajo a la derecha. */
.tarjeta-jugador[data-marco], .marco-muestra {
  position: relative;
  border: 4px solid transparent;
  background: linear-gradient(160deg, #2e1060 0%, #1d0b3a 100%) padding-box, var(--marco-borde, var(--violeta)) border-box;
}
.tarjeta-jugador[data-marco] { box-shadow: 0 4px 0 #12052a, 0 0 18px -4px var(--marco-brillo, transparent); }
.tarjeta-jugador::before, .tarjeta-jugador::after {
  position: absolute; width: 48px; height: 48px; pointer-events: none;
  background-size: contain; background-repeat: no-repeat;
}
.tarjeta-jugador::before { top: -16px; left: -14px; }
.tarjeta-jugador::after  { bottom: -16px; right: -14px; transform: scaleX(-1); }
@keyframes marco-neon {
  from { box-shadow: 0 4px 0 #12052a, 0 0 8px -2px #c04dff; }
  to   { box-shadow: 0 4px 0 #12052a, 0 0 24px 2px #3ee7ff; }
}
@media (prefers-reduced-motion: reduce) { .tarjeta-jugador { animation: none !important; } }
.marco-muestra { display: inline-block; width: 46px; height: 32px; border-radius: 10px; box-sizing: border-box; }
#skins-marco-vista { padding: 12px 10px 14px; }
.tj-aviso { font-size: .68rem; color: #b9a8d9; line-height: 1.3; }
.tj-pockie {
  width: 84px; height: 84px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--tj-rareza) 45%, transparent) 0%, transparent 70%);
  font-size: 3rem; line-height: 1;
}
.tj-pockie img { width: 76px; height: 76px; }
.tj-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tj-cabeza { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; }
.tj-handle {
  font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 1.3rem;
  overflow-wrap: anywhere; line-height: 1.15;
}
.tj-insignias { display: flex; flex-wrap: wrap; gap: 4px; }
/* El ícono de perfil: un circulito con un diseño de Pockies o una Pockie de
   la colección (nunca la foto de la cuenta). */
.icono-perfil {
  flex: 0 0 auto; display: inline-grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%; overflow: hidden;
  border: 2px solid rgba(255,255,255,.85); background: #2e1060;
  box-shadow: 0 2px 0 rgba(0,0,0,.25); vertical-align: middle;
}
.icono-perfil img { width: 100%; height: 100%; display: block; }
.icono-pockie { background: radial-gradient(circle, color-mix(in srgb, var(--icono-rareza) 55%, #fff) 0%, var(--icono-rareza) 100%); }
.icono-pockie img { width: 130%; height: 130%; margin-top: 18%; animation: none !important; }
.lb-fila .icono-perfil { width: 28px; height: 28px; }
.skin-emoji .icono-perfil { width: 44px; height: 44px; }
.icono-opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.icono-opcion { padding: 3px; border-radius: 50%; border: 3px solid transparent; background: none; cursor: pointer; }
.icono-opcion .icono-perfil { width: 52px; height: 52px; }
.icono-opcion.activa { border-color: var(--violeta); }
.icono-opcion { position: relative; }
.icono-precio {
  position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 2px; white-space: nowrap;
  font-size: .7rem; font-weight: 800; color: #fff; background: var(--violeta);
  border-radius: 999px; padding: 1px 6px;
}
.icono-precio .ico { width: 11px; height: 11px; }

/* ── La Tienda de Cosméticos ─────────────────────────────────────
   Como una vidriera de noche: cabecera oscura con la fecha y el saldo,
   fichas del color de su rareza (como la tienda de Fortnite, que es la
   referencia), las destacadas arriba y grandes. Sin cuenta regresiva:
   CLAUDE.md. */
#modal-box.modal-tienda { max-width: 760px; padding: 0 0 20px; gap: 0; }
#modal-box.modal-tienda #modal-cerrar { z-index: 2; background: rgba(255,255,255,.14); color: #fff; }
#modal-box.modal-tienda #modal-contenido { display: flex; flex-direction: column; }
.tc-cabecera {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 16px;
  padding: 20px 22px 18px; color: #f0e8ff;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 95, 162, .35) 0, transparent 45%),
    radial-gradient(circle at 90% 110%, rgba(62, 231, 255, .25) 0, transparent 50%),
    linear-gradient(160deg, #2e1060 0%, #1d0b3a 100%);
  border-bottom: 3px solid var(--violeta);
}
.tc-titulos { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 260px; }
.tc-sobretitulo {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .78rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: #ffb3d9;
}
.tc-sobretitulo .ico { width: 16px; height: 16px; }
.tc-fecha { margin: 0; font-family: 'Fredoka', sans-serif; font-size: 1.7rem; line-height: 1.1; color: #fff; }
.tc-cambio { margin: 0; font-size: .82rem; font-weight: 700; color: #cbb8f0; line-height: 1.35; }
.tc-saldo { display: flex; gap: 6px; flex-wrap: wrap; }
.tc-saldo span {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); font-size: .9rem;
}
.tc-saldo .ico { width: 15px; height: 15px; }
#tc-contenido { display: flex; flex-direction: column; gap: 12px; padding: 4px 20px 0; }
.tc-seccion {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; margin: 14px 0 0;
  font-family: 'Fredoka', sans-serif; font-size: 1.15rem; color: var(--texto);
}
.tc-seccion small { font-family: 'Nunito', sans-serif; font-size: .78rem; font-weight: 700; color: var(--texto2); }
.tc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tc-grid-dos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

/* La ficha: fondo del color de la rareza con un brillo detrás del dibujo, y
   abajo una franja oscura con el nombre y el precio. */
.tc-item {
  --tc-rareza: #8a6fd6;
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  border-radius: 16px; border: 3px solid color-mix(in srgb, var(--tc-rareza) 70%, #fff);
  background:
    radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--tc-rareza) 35%, #fff) 0%, var(--tc-rareza) 48%, color-mix(in srgb, var(--tc-rareza) 55%, #12052a) 100%);
  box-shadow: 0 4px 0 color-mix(in srgb, var(--tc-rareza) 45%, #12052a);
  transition: transform .15s ease, box-shadow .15s ease;
}
.tc-item:hover { transform: translateY(-2px); box-shadow: 0 6px 0 color-mix(in srgb, var(--tc-rareza) 45%, #12052a), 0 0 22px -6px var(--tc-rareza); }
.tc-arte { display: grid; place-items: center; padding: 12px 6px 6px; min-height: 92px; }
.tc-arte img { width: 80px; height: 80px; filter: drop-shadow(0 4px 4px rgba(18, 5, 42, .35)); }
.tc-pie {
  display: flex; flex-direction: column; gap: 2px; padding: 7px 8px 8px; margin-top: auto;
  background: rgba(18, 5, 42, .72); color: #fff; text-align: center;
}
.tc-pie strong { font-family: 'Fredoka', sans-serif; font-size: .92rem; line-height: 1.15; overflow-wrap: anywhere; }
.tc-pie small { font-size: .7rem; font-weight: 700; color: color-mix(in srgb, var(--tc-rareza) 45%, #fff); line-height: 1.25; }
.tc-btn {
  margin-top: 6px; width: 100%; display: flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: wrap;
  border: none; border-radius: 999px; padding: 6px 6px; cursor: pointer;
  background: #fff; color: #2b1b3d; font-weight: 900; font-size: .85rem;
  box-shadow: 0 2px 0 rgba(0,0,0,.3);
}
.tc-btn .ico { width: 14px; height: 14px; }
.tc-btn .tc-mas { opacity: .6; }
.tc-btn:not(:disabled):not(.sin-fondos):hover { background: #fff3c4; }
.tc-btn.sin-fondos { opacity: .55; cursor: not-allowed; }
.tc-btn:disabled { background: rgba(255,255,255,.18); color: #e8dcff; box-shadow: none; cursor: default; font-size: .75rem; }

/* Las destacadas: más grandes, con cinta y rayos detrás. */
.tc-destacada .tc-arte { min-height: 150px; padding-top: 22px; background: repeating-conic-gradient(from 0deg at 50% 55%, rgba(255,255,255,.14) 0 10deg, transparent 10deg 20deg); }
.tc-destacada .tc-arte img { width: 128px; height: 128px; }
.tc-destacada .tc-pie strong { font-size: 1.1rem; }
.tc-etiqueta {
  position: absolute; top: 8px; left: 8px; z-index: 1; white-space: nowrap;
  font-size: .68rem; font-weight: 900; text-transform: uppercase; letter-spacing: .04em;
  color: var(--tc-rareza); background: #fff; border-radius: 999px; padding: 2px 9px;
  box-shadow: 0 2px 0 rgba(0,0,0,.25);
}

/* Los marcos: fondo de noche (van sobre la tarjeta, que es oscura) y una
   tarjeta en miniatura con el marco de verdad. */
.tc-marco { --tc-rareza: #5a3fb0; cursor: pointer; background: radial-gradient(circle at 50% 35%, #4b2a8a 0%, #2e1060 60%, #1d0b3a 100%); border-color: #6f55d9; }
.tc-marco.probando { border-color: #ffd23f; box-shadow: 0 4px 0 #12052a, 0 0 0 3px rgba(255,210,63,.35); }
.tc-marco:focus-visible { outline: 3px solid #ffd23f; outline-offset: 2px; }
.tc-marco .tc-pie small { color: #cbb8f0; }
.tc-marco .tc-arte { padding: 22px 16px 16px; }
.tarjeta-jugador.tc-mini {
  display: flex; align-items: center; gap: 6px; width: 100%; max-width: 110px; height: 58px;
  margin: 0; padding: 6px 8px; border-radius: 12px; grid-template-columns: none;
}
.tarjeta-jugador.tc-mini::before, .tarjeta-jugador.tc-mini::after { width: 26px; height: 26px; }
.tarjeta-jugador.tc-mini::before { top: -10px; left: -9px; }
.tarjeta-jugador.tc-mini::after { bottom: -10px; right: -9px; }
.tc-mini-pockie { flex: 0 0 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle, #b58df0 0%, #6f55d9 100%); }
.tc-mini-lineas { display: flex; flex-direction: column; gap: 5px; flex: 1; }
.tc-mini-lineas i { display: block; height: 5px; border-radius: 3px; background: rgba(240, 232, 255, .55); }
.tc-mini-lineas i + i { width: 60%; background: rgba(240, 232, 255, .3); }
#tc-vista .tarjeta-jugador { margin: 6px auto 4px; }

.tc-lote-vacio {
  padding: 16px; border-radius: 16px; border: 2px dashed var(--borde);
  text-align: center; color: var(--texto2); font-size: .85rem; font-weight: 700;
}
/* Los lotes: una caja ancha con todo lo que trae a la vista y el precio
   abajo, sin "oferta" ni cuenta regresiva (solo la fecha hasta la que está). */
.tc-lote {
  display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 14px;
  border-radius: 18px; border: 3px solid #ffd23f;
  background: radial-gradient(circle at 50% 0%, #6a3fc2 0%, #3a1a7a 55%, #1d0b3a 100%);
  box-shadow: 0 4px 0 #12052a; color: #fff;
}
.tc-lote-cabeza { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 2px 10px; }
.tc-lote-cabeza strong { font-family: 'Fredoka', sans-serif; font-size: 1.2rem; }
.tc-lote-cabeza small { font-size: .78rem; font-weight: 800; color: #ffe38a; }
.tc-lote-cosas { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.tc-lote-cosa {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; min-height: 92px;
  padding: 6px 4px; border-radius: 12px; background: rgba(255, 255, 255, .1);
}
.tc-lote-cosa img { width: 56px; height: 56px; }
.tc-lote-cosa .tc-lote-icono { width: 44px; height: 44px; border-radius: 50%; }
.tc-lote-cosa .tarjeta-jugador.tc-mini { max-width: 70px; height: 40px; }
.tc-lote-cosa small { font-size: .68rem; font-weight: 800; text-align: center; line-height: 1.2; color: #f0e8ff; overflow-wrap: anywhere; }
.tc-lote-detalle { margin: 0; font-size: .78rem; color: #e8dcff; text-align: center; }
.tc-lote .tc-btn { align-self: center; width: auto; min-width: 140px; padding: 7px 18px; font-size: .95rem; }
.tc-nota { margin: 4px 0 0; text-align: center; font-size: .78rem; color: var(--texto2); }
#tc-mis-cosmeticos { align-self: center; }

@media (max-width: 520px) {
  .tc-cabecera { padding: 18px 16px 14px; }
  .tc-fecha { font-size: 1.35rem; }
  #tc-contenido { padding: 0 12px; }
  .tc-grid { gap: 7px; }
  .tc-arte { min-height: 72px; padding: 8px 4px 4px; }
  .tc-arte img { width: 60px; height: 60px; }
  .tc-pie { padding: 6px 5px 7px; }
  .tc-pie strong { font-size: .8rem; }
  .tc-pie small { font-size: .64rem; }
  .tc-btn { font-size: .78rem; padding: 5px 4px; }
  .tc-destacada .tc-arte { min-height: 118px; }
  .tc-destacada .tc-arte img { width: 96px; height: 96px; }
  .tc-marco .tc-arte { padding: 18px 8px 12px; }
  .tarjeta-jugador.tc-mini { height: 46px; padding: 5px 6px; }
}
@media (prefers-reduced-motion: reduce) { .tc-item { transition: none; } .tc-item:hover { transform: none; } }
.tj-insignia {
  font-size: .72rem; font-weight: 800; color: #fff;
  border-radius: 999px; padding: 2px 9px; white-space: nowrap;
}
.tj-equipo { background: var(--violeta); }
.tj-beta   { background: #1f8a70; }
.tj-sub    { color: #b9a8d9; font-size: .92rem; }
.tj-frase  { font-size: 1.05rem; color: #f0e8ff; }
.tj-stats {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px;
}
.tj-stats div {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: 6px 4px; border-radius: 12px; background: rgba(255,255,255,.07);
  min-width: 0;
}
.tj-stats strong { font-size: .95rem; white-space: nowrap; }
.tj-stats small  { font-size: .66rem; color: #b9a8d9; }
.tj-acciones {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.tarjeta-jugador .plaza-reaccion {
  background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.2);
}
.tarjeta-jugador .plaza-reaccion.activa { border-color: var(--rosa); background: rgba(255,77,148,.28); }
.tarjeta-jugador .plaza-perfil, .tj-enlace { color: #d9b3ff; font-weight: 700; font-size: .95rem; }
.tarjeta-jugador .btn-secundario { width: auto; margin: 0 0 0 auto; }
@media (max-width: 420px) {
  .tarjeta-jugador { grid-template-columns: 68px minmax(0, 1fr); padding: 12px; }
  .tj-pockie { width: 68px; height: 68px; }
  .tj-pockie img { width: 62px; height: 62px; }
  .tj-handle { font-size: 1.15rem; }
}

.plaza-propias { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.plaza-elegir-pockie {
  flex: 0 0 auto;
  font-size: 2.2rem;
  line-height: 1;
  padding: 6px;
  border: 2px solid var(--borde);
  border-radius: 12px;
  background: var(--panel);
  cursor: pointer;
}
.plaza-elegir-pockie.activa { border-color: var(--violeta); background: #F3E6FF; }
.plaza-frases { display: flex; gap: 6px; flex-wrap: wrap; }
.plaza-frase {
  padding: 5px 10px;
  border: 2px solid var(--borde);
  border-radius: 999px;
  background: var(--panel);
  color: var(--texto);
  font-size: .8rem;
  cursor: pointer;
}
.plaza-frase.activa { border-color: var(--violeta); background: var(--violeta); color: #fff; }
#plaza-exhibir { align-self: flex-start; }
#plaza-exhibir:disabled { opacity: .5; cursor: default; }

[data-theme="oscuro"] #plaza-box { box-shadow: 0 6px 0 #2a0050, 0 20px 40px rgba(0,0,0,0.6); }


/* ══════════ v0.4: Rediseño kids-friendly ══════════ */

/* La expendedora es un personaje: ojos que parpadean y boca que
   reacciona al drop. Referencia Toca Boca (GDD 1). */

#expendedora { position: relative; }

#expendedora-cara {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  width: 100%;
  margin-bottom: -6px;
  min-height: 22px;
  position: relative;
}

.exp-ojo {
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  position: relative;
  animation: parpadeo 4.6s infinite;
}

.exp-ojo::after {
  content: '';
  position: absolute;
  width: 7px;
  height: 7px;
  background: #1A1A2E;
  border-radius: 50%;
  top: 4px;
  left: 3.5px;
}

@keyframes parpadeo {
  0%, 93%, 100% { transform: scaleY(1); }
  95%, 97%      { transform: scaleY(0.08); }
}

.exp-boca {
  position: absolute;
  bottom: -9px;
  left: 50%;
  width: 16px;
  height: 7px;
  margin-left: -8px;
  border-bottom: 3px solid #fff;
  border-radius: 0 0 12px 12px;
  transition: height 0.15s, width 0.15s, margin-left 0.15s;
}

/* Al escupir un drop, abre la boca; a mayor rareza, más se sorprende */
#expendedora.tap .exp-boca {
  height: 10px; width: 12px; margin-left: -6px;
  border: 3px solid #fff; border-top: none; background: #331144;
}
#expendedora.shake .exp-boca,
#expendedora.glow .exp-boca,
#expendedora.mega .exp-boca {
  height: 14px; width: 14px; margin-left: -7px;
  border: 3px solid #fff; background: #331144; border-radius: 50%;
}

/* Squash & stretch del toque (pisa el tapBounce simple anterior) */
#expendedora.tap { animation: squashTap 0.18s ease; }

@keyframes squashTap {
  0%   { transform: scale(1, 1); }
  40%  { transform: scale(1.05, 0.92); }
  100% { transform: scale(1, 1); }
}

/* Botón TOCAR más candy: gordito, redondo, con brillo */
#btn-tocar {
  border-radius: 999px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.35);
}

/* Fondo con degradé suave en vez de plano */
body {
  background: linear-gradient(180deg, #FFF3E6 0%, var(--fondo) 260px);
  background-attachment: fixed;
}

:root[data-theme="oscuro"] body,
[data-theme="oscuro"] body {
  background: linear-gradient(180deg, #241A38 0%, var(--fondo) 260px);
  background-attachment: fixed;
}

/* Confeti de hitos y logros */
.confeti {
  position: fixed;
  top: -12px;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  z-index: 9999;
  pointer-events: none;
  animation: confeti-cae var(--dur, 1.8s) ease-in forwards;
}

@keyframes confeti-cae {
  0%   { transform: translateY(0) rotate(0); opacity: 1; }
  100% { transform: translateY(105vh) rotate(720deg); opacity: 0.7; }
}

/* ── v0.4: Misiones diarias + suerte + calendario login ── */

/* ── Metas a la vista: hito, protección de suerte y racha (INTERFAZ.md) ── */

#metas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 10px;
}
.meta {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 2px solid var(--borde);
  border-radius: 14px;
  padding: 10px 12px;
  background: var(--panel);
  transition: border-color 0.3s, box-shadow 0.3s;
}
.meta-icono {
  flex: none;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  font-size: 1.6rem;
}
.meta-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.meta-titulo { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 0.95rem; color: var(--texto); }
.meta small { color: var(--texto2); font-size: 0.75rem; }
.meta small strong { color: var(--texto); }
.meta-barra { height: 12px; margin: 4px 0 2px; }
.meta-rareza[data-rareza="comun"]      { color: var(--verde); }
.meta-rareza[data-rareza="rara"]       { color: var(--azul); }
.meta-rareza[data-rareza="epica"]      { color: var(--violeta); }
.meta-rareza[data-rareza="legendaria"] { color: var(--naranja); }

/* La cápsula del próximo hito, del color de lo que trae: vertical, de
   gashapón (cúpula clara arriba con el "?", el color abajo). */
.meta-capsula {
  width: 30px;
  height: 42px;
  margin: 0 5px;
  border-radius: 15px;
  border: 2.5px solid #2b1b3d;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1;
  color: #2b1b3d;
  place-items: start center;
  padding-top: 3px;
  background: linear-gradient(180deg, #E9F6FF 0 48%, #2b1b3d 48% 54%, var(--cap, var(--verde)) 54%);
}
.meta-capsula[data-rareza="comun"]      { --cap: var(--verde); }
.meta-capsula[data-rareza="rara"]       { --cap: var(--azul); }
.meta-capsula[data-rareza="epica"]      { --cap: var(--violeta); }
.meta-capsula[data-rareza="legendaria"] { --cap: var(--naranja); }

/* Cerca de la meta, la tarjeta late: lo que está por llegar se persigue más. */
.meta-cerca { border-color: var(--amarillo); box-shadow: 0 0 0 3px rgba(255, 217, 61, 0.25); }
.meta-cerca .meta-icono { animation: meta-late 1.4s ease-in-out infinite; }
.meta-lista { border-color: var(--verde); box-shadow: 0 0 14px rgba(34, 204, 85, 0.45); }
@keyframes meta-late {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}
@media (prefers-reduced-motion: reduce) {
  .meta-cerca .meta-icono { animation: none; }
}

#suerte-barra .prog-fill { background: linear-gradient(90deg, var(--verde), var(--amarillo)); }

/* La semana de la racha: el día de hoy marcado, los pasados apagados. */
.racha-semana { display: flex; gap: 4px; margin: 4px 0 2px; }
.racha-dia {
  flex: 1;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--fondo);
  border: 1.5px solid var(--borde);
  font-size: 0.95rem;
}
.racha-pasado { opacity: 0.45; }
.racha-hoy { border-color: var(--naranja); background: #FFF1DC; box-shadow: 0 2px 0 var(--naranja); }
[data-theme="oscuro"] .racha-hoy { background: #3A2210; }

#seccion-misiones {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#seccion-misiones h2 { font-family: 'Fredoka', sans-serif; }

.mision {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 2px solid var(--borde);
  border-radius: 14px;
  padding: 10px 12px;
  background: var(--panel);
}
.mision-hecha { border-color: var(--verde); background: var(--bg-verde); }
.mision-check { font-size: 1.3rem; }
.mision-info  { flex: 1; display: flex; flex-direction: column; gap: 5px; font-size: 0.9rem; }
.mision small { color: var(--texto2); white-space: nowrap; }
.mision-lado  { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.mision-premio { font-size: 0.75rem; font-weight: 800; color: var(--texto); white-space: nowrap; }

.login-calendario {
  display: flex;
  gap: 5px;
  justify-content: center;
  margin: 10px 0;
}
.cal-dia {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  border: 2px solid var(--borde);
  border-radius: 10px;
  padding: 6px 7px;
  font-size: 0.95rem;
}
.cal-dia small { font-size: 0.6rem; color: var(--texto2); }
.cal-hoy    { border-color: var(--rosa); background: #FFF0F6; transform: scale(1.1); }
.cal-pasado { opacity: 0.45; }
[data-theme="oscuro"] .cal-hoy { background: #442238; }

/* Ilustraciones de las Pockies (assets/pockies/, de tools/gen_pockies.mjs).
   Miden en em para heredar el tamaño que cada contenedor le daba al emoji. */
.pockie-arte {
  width: 1.3em;
  height: 1.3em;
  display: inline-block;
  vertical-align: middle;
  object-fit: contain;
  user-select: none;
}
.toast .pockie-arte,
.evol-preview .pockie-arte,
.leg-titulo .pockie-arte,
#banner-evento .pockie-arte { width: 1.6em; height: 1.6em; vertical-align: -0.5em; }
.pockie-emoji .pockie-arte,
.gs-pockie-emoji .pockie-arte { width: 1.7em; height: 1.7em; }
.cat-emoji:has(.pockie-arte) { width: 36px; }
.cat-emoji .pockie-arte { width: 1.5em; height: 1.5em; }

/* ── Animaciones de las Pockies ───────────────────────────────────────
   Reposo según personalidad (ANIM_PERSONALIDAD en js/pockies.js), solo donde
   la Pockie se ve como mascota: colección, detalle, modal, tienda y la cadena
   de evolución de las que ya tienes. En catálogo y avisos queda quieta.
   --desfase lo pone pockieImg() para que no se muevan todas a la vez. */
:is(.pockie-emoji, .modal-emoji, #pd-imagen-emoji, .gs-pockie-emoji, .pd-evol-tiene .pd-evol-emoji) > .pockie-arte {
  transform-origin: 50% 88%;
  animation-delay: var(--desfase, 0ms);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
:is(.pockie-emoji, .modal-emoji, #pd-imagen-emoji, .gs-pockie-emoji, .pd-evol-tiene .pd-evol-emoji) > .anim-respira  { animation-name: pkRespira;  animation-duration: 3.2s; }
:is(.pockie-emoji, .modal-emoji, #pd-imagen-emoji, .gs-pockie-emoji, .pd-evol-tiene .pd-evol-emoji) > .anim-salta    { animation-name: pkSalta;    animation-duration: 1.8s; }
:is(.pockie-emoji, .modal-emoji, #pd-imagen-emoji, .gs-pockie-emoji, .pd-evol-tiene .pd-evol-emoji) > .anim-dormita  { animation-name: pkDormita;  animation-duration: 5s; }
:is(.pockie-emoji, .modal-emoji, #pd-imagen-emoji, .gs-pockie-emoji, .pd-evol-tiene .pd-evol-emoji) > .anim-tiembla  { animation-name: pkTiembla;  animation-duration: 3.4s; animation-timing-function: linear; }
:is(.pockie-emoji, .modal-emoji, #pd-imagen-emoji, .gs-pockie-emoji, .pd-evol-tiene .pd-evol-emoji) > .anim-bambolea { animation-name: pkBambolea; animation-duration: 2.4s; }
:is(.pockie-emoji, .modal-emoji, #pd-imagen-emoji, .gs-pockie-emoji, .pd-evol-tiene .pd-evol-emoji) > .anim-flota    { animation-name: pkFlota;    animation-duration: 4s; }

/* Al pasar por encima de su tarjeta, cualquiera se entusiasma */
.pockie-card:hover .pockie-emoji > .pockie-arte,
.pockie-card:focus-visible .pockie-emoji > .pockie-arte { animation-name: pkSalta; animation-duration: .9s; animation-delay: 0ms; }

/* La revelación: aparece de golpe y rebota */
.reveal-emoji > .pockie-arte { animation: pkAparece .75s cubic-bezier(.34, 1.56, .64, 1) both; transform-origin: 50% 80%; }

/* Reacciones de una sola vez (reaccionarPockie): pisan al reposo mientras duran */
.pockie-arte.reaccion-comer { animation: pkComer .7s ease-out !important; }
.pockie-arte.reaccion-boing { animation: pkBoing .8s cubic-bezier(.3, 1.4, .5, 1) !important; }
#pd-imagen-area { cursor: pointer; }

@keyframes pkRespira {
  0%, 100% { transform: scale(1, 1); }
  50%      { transform: scale(1.035, .965); }
}
@keyframes pkSalta {
  0%, 60%, 100% { transform: translateY(0) scale(1, 1); }
  8%            { transform: translateY(0) scale(1.08, .9); }
  22%           { transform: translateY(-14%) scale(.94, 1.07); }
  36%           { transform: translateY(0) scale(1.07, .92); }
  46%           { transform: translateY(0) scale(.98, 1.02); }
}
@keyframes pkDormita {
  0%, 100% { transform: rotate(-3deg) scale(1, 1); }
  50%      { transform: rotate(3deg) scale(1.03, .97); }
}
@keyframes pkTiembla {
  0%, 70%, 100% { transform: translateX(0); }
  73%, 79%, 85% { transform: translateX(-2.5%) rotate(-1.5deg); }
  76%, 82%, 88% { transform: translateX(2.5%) rotate(1.5deg); }
}
@keyframes pkBambolea {
  0%, 100% { transform: rotate(-6deg); }
  50%      { transform: rotate(6deg) scale(1.02, .98); }
}
@keyframes pkFlota {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8%); }
}
@keyframes pkAparece {
  0%   { transform: scale(0) rotate(-20deg); opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes pkComer {
  0%, 100% { transform: scale(1, 1); }
  15%      { transform: scale(1.14, .84); }
  30%      { transform: scale(.92, 1.1); }
  45%      { transform: scale(1.1, .9); }
  60%      { transform: scale(.96, 1.05); }
  78%      { transform: scale(1.03, .97); }
}
@keyframes pkBoing {
  0%   { transform: scale(1, 1); }
  15%  { transform: scale(1.18, .78); }
  40%  { transform: translateY(-18%) scale(.88, 1.14) rotate(-6deg); }
  65%  { transform: translateY(0) scale(1.1, .9) rotate(3deg); }
  100% { transform: scale(1, 1) rotate(0); }
}

/* Quien pidió menos movimiento en su sistema ve a las Pockies quietas */
@media (prefers-reduced-motion: reduce) {
  .pockie-arte, .pockie-arte[class*="reaccion-"] { animation: none !important; }
}

/* ── Expendedora: cartel, vitrina, palanca y bandeja ─────────────────────
   Todo toma los colores de las variables --exp-* de la skin equipada. */

/* Cartel con focos arriba, como una máquina de feria */
.exp-cartel {
  position: relative;
  width: calc(100% + 40px);
  margin: 0 -20px;
  padding: 10px 0 8px;
  border-radius: 22px 22px 14px 14px;
  background: linear-gradient(180deg, rgba(255,255,255,0.22), rgba(0,0,0,0.12)), var(--exp-oscuro);
  border-bottom: 4px solid var(--exp-borde);
  text-align: center;
}
.exp-cartel-texto {
  display: block;
  font-size: 1.25rem;
  font-weight: 900;
  letter-spacing: 4px;
  color: var(--exp-foco);
  text-shadow: 0 0 8px var(--exp-foco), 0 2px 0 rgba(0,0,0,0.35);
}
.exp-focos {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 6px;
}
.exp-focos i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--exp-foco);
  box-shadow: 0 0 6px var(--exp-foco);
  opacity: 0.35;
  animation: expFoco 1.4s steps(1) infinite;
}
/* Luz que corre de izquierda a derecha */
.exp-focos i:nth-child(1) { animation-delay: 0s; }
.exp-focos i:nth-child(2) { animation-delay: .2s; }
.exp-focos i:nth-child(3) { animation-delay: .4s; }
.exp-focos i:nth-child(4) { animation-delay: .6s; }
.exp-focos i:nth-child(5) { animation-delay: .8s; }
.exp-focos i:nth-child(6) { animation-delay: 1s; }
.exp-focos i:nth-child(7) { animation-delay: 1.2s; }
@keyframes expFoco {
  0%   { opacity: 1; }
  30%  { opacity: 0.35; }
}
/* Con un drop bueno, los focos se vuelven locos */
#expendedora:is(.glow, .mega) .exp-focos i { animation-duration: .35s; }

/* Vitrina: cápsulas en estantes detrás del vidrio; el resultado va adelante */
.exp-vitrina {
  position: relative;
  width: 100%;
  height: 132px;
  border-radius: 16px;
  border: 4px solid var(--exp-borde);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    /* estantes */
    linear-gradient(transparent 40px, rgba(255,255,255,0.35) 40px 43px, transparent 43px 84px, rgba(255,255,255,0.35) 84px 87px, transparent 87px),
    /* cápsulas: fila de arriba */
    radial-gradient(circle at 12% 22px, #FF8FC7 9px, transparent 10px),
    radial-gradient(circle at 31% 22px, #7FD6FF 9px, transparent 10px),
    radial-gradient(circle at 50% 22px, #FFE14D 9px, transparent 10px),
    radial-gradient(circle at 69% 22px, #9BE15D 9px, transparent 10px),
    radial-gradient(circle at 88% 22px, #C9A7FF 9px, transparent 10px),
    /* fila del medio */
    radial-gradient(circle at 21% 66px, #FFB36B 9px, transparent 10px),
    radial-gradient(circle at 40% 66px, #FF6FAE 9px, transparent 10px),
    radial-gradient(circle at 60% 66px, #7FF6FF 9px, transparent 10px),
    radial-gradient(circle at 79% 66px, #FFD23F 9px, transparent 10px),
    /* fila de abajo */
    radial-gradient(circle at 12% 110px, #9BE15D 9px, transparent 10px),
    radial-gradient(circle at 31% 110px, #C9A7FF 9px, transparent 10px),
    radial-gradient(circle at 50% 110px, #FF8FC7 9px, transparent 10px),
    radial-gradient(circle at 69% 110px, #7FD6FF 9px, transparent 10px),
    radial-gradient(circle at 88% 110px, #FFB36B 9px, transparent 10px),
    var(--exp-oscuro);
  box-shadow: inset 0 4px 12px rgba(0,0,0,0.45);
}
/* Reflejo del vidrio */
.exp-vitrina::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,0.28) 24%, rgba(255,255,255,0.08) 34%, transparent 36%, transparent 62%, rgba(255,255,255,0.14) 64%, transparent 70%);
  pointer-events: none;
  z-index: 2;
}
/* El vidrio se sacude con cada toque */
#expendedora.tap .exp-vitrina { animation: expVitrina .2s ease; }
@keyframes expVitrina {
  50% { transform: translateY(2px); }
}

/* Palanca a la derecha: gira con cada toque */
.exp-palanca {
  position: absolute;
  right: -24px;
  top: 150px;
  width: 20px;
  height: 36px;
  border-radius: 0 10px 10px 0;
  background: var(--exp-borde);
  box-shadow: inset -3px 0 0 rgba(0,0,0,0.2);
}
.exp-palanca i {
  position: absolute;
  left: 6px;
  top: 14px;
  width: 30px;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(180deg, #e8e8f0, #9aa3b8);
  transform-origin: 4px 4px;
  transform: rotate(-35deg);
}
.exp-palanca i::after {
  content: '';
  position: absolute;
  right: -8px;
  top: -5px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff9a9a, var(--rojo));
  box-shadow: 0 2px 0 #AA0000;
}
.exp-palanca.gira i { animation: expPalanca .3s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes expPalanca {
  0%   { transform: rotate(-35deg); }
  40%  { transform: rotate(55deg); }
  100% { transform: rotate(-35deg); }
}

/* Bandeja de salida: por acá cae la cápsula del drop */
.exp-bandeja {
  position: relative;
  width: 70%;
  height: 34px;
  border-radius: 10px 10px 16px 16px;
  background: linear-gradient(180deg, rgba(0,0,0,0.25), transparent 60%), var(--exp-oscuro);
  border: 3px solid var(--exp-borde);
  overflow: hidden;
}
/* Tapita batiente de la bandeja */
.exp-bandeja::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 10px;
  background: rgba(255,255,255,0.18);
  border-bottom: 2px solid rgba(255,255,255,0.3);
  transform-origin: top;
  z-index: 2;
}
.exp-bandeja.abre::before { animation: expTapita .5s ease; }
@keyframes expTapita {
  30% { transform: rotateX(70deg); }
}
.exp-capsula {
  position: absolute;
  left: calc(50% - 11px);
  bottom: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,0.35);
  background: linear-gradient(180deg, var(--cap, #FF8FC7) 50%, #fff 50%);
  animation: expCapsula .9s cubic-bezier(.3, 1.6, .6, 1) both;
}
.exp-capsula[data-nivel="raro"]       { --cap: #4DA6FF; }
.exp-capsula[data-nivel="epico"]      { --cap: #B36BFF; box-shadow: 0 0 10px #B36BFF; }
.exp-capsula[data-nivel="legendario"] { --cap: #FFD23F; box-shadow: 0 0 14px #FFD23F, 0 0 24px #FF8C00; }
@keyframes expCapsula {
  0%   { transform: translateY(-40px) rotate(-90deg); opacity: 0; }
  30%  { opacity: 1; }
  60%  { transform: translateY(0) rotate(20deg); }
  80%  { transform: translateY(-5px) rotate(0); }
  100% { transform: translateY(0) rotate(0); }
}
.exp-capsula.se-va { animation: expCapsulaSeVa .3s ease forwards; }
@keyframes expCapsulaSeVa {
  to { transform: translateX(40px) scale(.6); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .exp-focos i, .exp-palanca i, .exp-capsula, .exp-bandeja::before, #expendedora .exp-vitrina { animation: none !important; }
  .exp-focos i { opacity: 1; }
}

/* El combo flota arriba del cartel, sin taparle el nombre */
#expendedora-wrap { padding-top: 30px; }
#combo-badge { top: -4px; z-index: 3; }

/* ── Botón TOCAR: botón de arcade ─────────────────────────────────────
   Pisa los estilos anteriores del botón. El cooldown entre toques (140-160
   ms, js/mejoras.js) lo deja :disabled; antes eso lo pintaba de gris y el
   botón parpadeaba gris con cada toque: ahora se ve hundido, nada más. */
#btn-tocar {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 15px 20px 13px;
  font-size: 1.45rem;
  font-weight: 900;
  letter-spacing: 3px;
  color: #fff;
  background: linear-gradient(180deg, #FF8A5B 0%, #FF3B5C 50%, #E0114A 100%);
  border: 3px solid #fff;
  border-radius: 999px;
  box-shadow:
    0 7px 0 #9E0B35,
    0 11px 18px rgba(224, 17, 74, 0.45),
    inset 0 3px 0 rgba(255, 255, 255, 0.5),
    inset 0 -4px 0 rgba(0, 0, 0, 0.12);
  text-shadow: 0 2px 0 #9E0B35;
  transform: translateY(0);
  transition: transform 0.06s, box-shadow 0.06s;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
#btn-tocar .ico { width: 1.15em; height: 1.15em; filter: drop-shadow(0 2px 0 #9E0B35); }
#btn-tocar:hover { filter: brightness(1.06); }

/* Apretado (o en el cooldown): baja y se come la base */
#btn-tocar:active,
#btn-tocar:disabled {
  background: linear-gradient(180deg, #FF8A5B 0%, #FF3B5C 50%, #E0114A 100%);
  border: 3px solid #fff;
  transform: translateY(5px);
  box-shadow:
    0 2px 0 #9E0B35,
    0 4px 8px rgba(224, 17, 74, 0.35),
    inset 0 3px 0 rgba(255, 255, 255, 0.5),
    inset 0 -4px 0 rgba(0, 0, 0, 0.12);
  cursor: pointer;
}

/* Destello que cruza el botón cada tanto */
.btn-tocar-brillo {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -40%;
  width: 30%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  transform: skewX(-20deg);
  animation: tocarBrillo 3.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes tocarBrillo {
  0%, 60% { left: -40%; }
  85%, 100% { left: 120%; }
}

/* Invitación tras unos segundos sin tocar (reiniciarInvitacion en main.js) */
#btn-tocar.invita { animation: tocarInvita 1.1s ease-in-out infinite; }
@keyframes tocarInvita {
  0%, 100% {
    transform: translateY(0) scale(1);
    box-shadow: 0 7px 0 #9E0B35, 0 11px 18px rgba(224, 17, 74, 0.45), 0 0 0 0 rgba(255, 214, 0, 0.8),
      inset 0 3px 0 rgba(255, 255, 255, 0.5), inset 0 -4px 0 rgba(0, 0, 0, 0.12);
  }
  50% {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 9px 0 #9E0B35, 0 14px 22px rgba(224, 17, 74, 0.5), 0 0 0 12px rgba(255, 214, 0, 0),
      inset 0 3px 0 rgba(255, 255, 255, 0.5), inset 0 -4px 0 rgba(0, 0, 0, 0.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn-tocar-brillo { display: none; }
  #btn-tocar.invita { animation: none; }
}

/* La máquina espera al servidor (empezarEspera en main.js): el "?" late y
   gira un poco, los focos corren rápido. Así un servidor lento se ve como
   "pensando" y no como una vitrina congelada. */
#expendedora.pensando #expendedora-pantalla { animation: expPensando 0.9s ease-in-out infinite; }
#expendedora.pensando .exp-focos i { animation-duration: 0.5s; }
@keyframes expPensando {
  0%, 100% { transform: scale(1) rotate(0); }
  30%      { transform: scale(1.08) rotate(-8deg); }
  60%      { transform: scale(0.96) rotate(6deg); }
}
@media (prefers-reduced-motion: reduce) {
  #expendedora.pensando #expendedora-pantalla { animation: none; opacity: 0.6; }
}

/* Miniatura de skin en la tienda y en la Plaza (muestraSkin en js/skins.js):
   toma las mismas variables --exp-* que la expendedora. */
.skin-muestra { display: inline-flex; line-height: 0; vertical-align: middle; }
.skin-muestra .ico { width: 1.3em; height: 1.3em; }
.skin-emoji .skin-muestra .ico { width: 1.6em; height: 1.6em; }

/* ── La guía de los primeros minutos ── */
#guia {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 95;   /* sobre la barra de abajo (90), debajo de los cajones (99) */
  width: min(460px, calc(100vw - 24px));
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px 12px;
  padding: 12px 14px;
  background: var(--panel);
  border: 2.5px solid var(--violeta);
  border-radius: 16px;
  box-shadow: 0 4px 0 #7700CC, 0 12px 30px rgba(43, 27, 61, 0.25);
  animation: guiaEntra 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
#guia p { margin: 0; font-size: 0.9rem; font-weight: 700; color: var(--texto); grid-column: 2; }
.guia-icono { font-size: 1.8rem; grid-row: 1 / span 2; }
.guia-boton {
  grid-column: 2;
  justify-self: start;
  border: none;
  border-radius: 99px;
  padding: 6px 16px;
  background: linear-gradient(90deg, var(--violeta), var(--rosa));
  color: #fff;
  font-family: 'Nunito', sans-serif;
  font-weight: 800;
  font-size: 0.85rem;
  cursor: pointer;
}
.guia-cerrar {
  grid-column: 3;
  grid-row: 1;
  align-self: start;
  border: none;
  background: none;
  color: var(--texto2);
  cursor: pointer;
  font-size: 1rem;
}
@keyframes guiaEntra {
  from { transform: translate(-50%, 30px); opacity: 0; }
  to   { transform: translate(-50%, 0); opacity: 1; }
}
@media (max-width: 720px) {
  #guia { bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  #guia { animation: none; }
}

/* ── Compra de gemas: el doble de la primera y lo que llega al volver ── */
.gs-paquete-regalo {
  font-size: 0.75rem;
  font-weight: 800;
  color: #1a7f3c;
  background: #d9f7e3;
  border-radius: 999px;
  padding: 2px 8px;
}
.gs-primera {
  margin: 0 0 10px;
  padding: 8px 12px;
  border-radius: 12px;
  background: #d9f7e3;
  color: #14622e;
  font-weight: 700;
  text-align: center;
}
/* La Vitrina: como las Pockies directas, con su rareza y etapa. */
.gs-vitrina-rareza { font-size: 0.7rem; font-weight: 800; }
.gs-btn-vitrina {
  border: none; border-radius: 10px; padding: 6px 10px; width: 100%;
  background: #8A3FE0; color: #fff; font-weight: 800; cursor: pointer;
  display: inline-flex; gap: 4px; align-items: center; justify-content: center;
}
.gs-btn-vitrina.sin-fondos { opacity: .5; cursor: not-allowed; }
.gs-btn-vitrina:disabled { background: var(--borde); color: var(--texto2); cursor: default; }

/* El apodo de una Pockie (solo lo ve su dueño). */
#pd-apodo-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
#pockie-detail-apodo { margin: 0; font-family: 'Fredoka', sans-serif; font-size: 1.1rem; color: var(--texto2); }
#pockie-detail-apodo.oculto, #pd-apodo-btn.oculto, .apodo-error.oculto { display: none; }
#pd-apodo-btn {
  border: 2px solid var(--borde); background: transparent; color: var(--texto);
  border-radius: 999px; padding: 3px 12px; font-size: 0.78rem; font-weight: 700; cursor: pointer;
  display: inline-flex; gap: 4px; align-items: center;
}
.apodo-input {
  width: 100%; box-sizing: border-box; margin: 6px 0; padding: 10px 12px;
  border: 2px solid var(--borde); border-radius: 12px; font-size: 1rem;
  background: var(--panel); color: var(--texto);
}
.apodo-error { color: #c62828; font-size: 0.85rem; margin: 0 0 8px; }
#apodo-quitar { margin-top: 10px; }

/* Gemas en negativo por un reembolso: se avisa, sin alarma. */
#gemas.negativo { color: #c62828; }
.gs-deuda {
  margin: 0 0 10px; padding: 8px 12px; border-radius: 12px;
  background: #fdecea; color: #8a1c1c; font-size: 0.85rem; font-weight: 700;
}

/* El lanzamiento: las fundadoras que traen las compras, antes de pagar. */
.gs-lanzamiento {
  margin: 0 0 10px; padding: 10px 12px; border-radius: 12px;
  background: linear-gradient(135deg, #fff4d6, #ffe3f0); color: #2b1b3d; font-size: 0.85rem;
}
.gs-lanzamiento p { margin: 0 0 8px; }
.gs-fundadoras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.gs-fundadora {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px;
  border: 3px solid; border-radius: 12px; background: #fff;
}
.gs-fundadora-tiene { font-size: 0.72rem; font-weight: 800; color: #1a7f3c; display: inline-flex; gap: 3px; align-items: center; }
.mision-fundadora { display: inline-flex; align-items: center; gap: 3px; font-weight: 800; }
.mision-fundadora .pockie-img, .mision-fundadora img { width: 20px; height: 20px; }
.compra-fundadora { font-weight: 700; }

.gs-inmediata {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 0 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f3eefb;
  color: #2b1b3d;
  font-size: 0.8rem;
  line-height: 1.35;
  cursor: pointer;
}
.gs-inmediata input { width: 20px; height: 20px; flex: none; margin: 0; accent-color: #8A3FE0; cursor: pointer; }
.gs-btn-paquete:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }
.compra-aviso, .compra-recibida { text-align: center; padding: 8px 4px; }
.compra-aviso h2, .compra-recibida h2 { display: flex; gap: 8px; align-items: center; justify-content: center; }
.compra-gemas { font-size: 2.4rem; margin: 10px 0; display: flex; gap: 10px; align-items: center; justify-content: center; }
/* Botón principal de las ventanas de compra: del azul de las gemas. */
.btn-primario {
  display: inline-block;
  margin-top: 12px;
  padding: 12px 22px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(180deg, #8FD8FF, #2E96F0 55%, #1450A8);
  color: #fff;
  font-family: 'Fredoka', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 4px 0 #0d3a7a;
}
.btn-primario:active { transform: translateY(2px); box-shadow: 0 2px 0 #0d3a7a; }

/* Cada paquete de gemas sobre su color (PAQUETES_GEMAS en main.js, los
   mismos de tools/gen_paquetes.mjs y de las imágenes de Lemon Squeezy). */
.gs-paquete[style*="--pq-claro"] {
  background: radial-gradient(circle at 50% 30%, var(--pq-claro), var(--pq-oscuro));
  border: 3px solid #2b1b3d;
  border-radius: 18px;
  clip-path: none;
  gap: 4px;
}
.gs-paquete-arte { width: 96px; height: 80px; margin: 0 auto 2px; filter: drop-shadow(0 3px 0 rgba(43, 27, 61, .18)); }
.gs-paquete[style*="--pq-claro"] .gs-paquete-nombre {
  font-family: 'Fredoka', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  -webkit-text-stroke: 4px #2b1b3d;
  paint-order: stroke fill;
}
.gs-paquete[style*="--pq-claro"] .gs-paquete-gemas { color: #2b1b3d; justify-content: center; }
.gs-paquete[style*="--pq-claro"] .gs-paquete-nota { color: #2b1b3d; opacity: .8; }
[data-theme="oscuro"] .gs-paquete[style*="--pq-claro"] { background: radial-gradient(circle at 50% 30%, var(--pq-claro), var(--pq-oscuro)); border-color: #2b1b3d; }

/* La lista de premios del preregistro, dentro del cartel de regalo. */
.regalo-lista {
  text-align: left;
  margin: 6px auto 10px;
  padding-left: 20px;
  max-width: 320px;
}
.regalo-lista li { margin: 2px 0; }