/* ══════════════════════════════════════
   VARIABLES DE TEMA
══════════════════════════════════════ */
:root {
  --bg:   #020617; --surf: #1e1b4b; --pri:  #9333ea;
  --prih: #7e22ce; --sec:  #06b6d4; --acc:  #f97316;
  --txt:  #f8fafc; --txtm: #94a3b8; --brd:  #4c1d95;
}
body.fantasy {
  --bg:   #ecfdf5; --surf: #d1fae5; --pri:  #10b981;
  --prih: #059669; --sec:  #8b5cf6; --acc:  #f59e0b;
  --txt:  #064e3b; --txtm: #047857; --brd:  #34d399;
}

/* ══════════════════════════════════════
   BASE
══════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; font-family: 'Nunito', sans-serif; }
body {
  background: var(--bg); color: var(--txt);
  min-height: 100vh; overflow-x: hidden;
  transition: background .5s, color .5s;
}

/* ══════════════════════════════════════
   ANIMACIONES
══════════════════════════════════════ */
@keyframes float   { 0%,100%{transform:translateY(0)}  50%{transform:translateY(-12px)} }
@keyframes drift   {
  0%  {transform:translate(0,0) rotate(0deg)}
  25% {transform:translate(80px,-60px) rotate(90deg)}
  50% {transform:translate(0,-120px) rotate(180deg)}
  75% {transform:translate(-80px,-60px) rotate(270deg)}
  100%{transform:translate(0,0) rotate(360deg)}
}
@keyframes fadeUp  { from{opacity:0;transform:translateY(18px) scale(.97)} to{opacity:1;transform:none} }
@keyframes popStar { 0%{transform:scale(0) rotate(-180deg);opacity:0} 70%{transform:scale(1.25) rotate(5deg);opacity:1} 100%{transform:scale(1) rotate(0);opacity:1} }
@keyframes shake   { 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-7px)} 40%,80%{transform:translateX(7px)} }
@keyframes fbIn    { from{opacity:0;transform:scale(.85)} to{opacity:1;transform:scale(1)} }
@keyframes pulse   { 0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--pri) 40%,transparent)} 50%{box-shadow:0 0 0 10px transparent} }

.anim-float    { animation: float 3s ease-in-out infinite; }
.anim-shake    { animation: shake .4s ease; }
.screen-anim   { animation: fadeUp .35s ease forwards; }
.star-pop      { animation: popStar .55s cubic-bezier(.34,1.56,.64,1) both; }

/* ══════════════════════════════════════
   FONDO FLOTANTE
══════════════════════════════════════ */
.bg-el {
  position:absolute; pointer-events:none; line-height:1;
  animation: drift linear infinite;
}

/* ══════════════════════════════════════
   CLASES TEMA
══════════════════════════════════════ */
.c-txt  { color: var(--txt); }
.c-txtm { color: var(--txtm); }
.c-pri  { color: var(--pri); }
.c-acc  { color: var(--acc); }
.c-sec  { color: var(--sec); }
.bg-surf{ background: var(--surf); }
.bg-pri { background: var(--pri); }
.brd-pri{ border-color: var(--pri)!important; }
.brd-brd{ border-color: var(--brd)!important; }

.glass {
  background: color-mix(in srgb, var(--surf) 78%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.grad-text {
  background: linear-gradient(135deg, var(--sec), var(--pri));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ══════════════════════════════════════
   PANTALLAS
══════════════════════════════════════ */
.screen { display:none!important; }
.screen.on { display:flex!important; }

/* ══════════════════════════════════════
   BOTÓN GENÉRICO
══════════════════════════════════════ */
.btn { transition: transform .15s, box-shadow .15s; cursor:pointer; }
.btn:hover  { transform: scale(1.05); }
.btn:active { transform: scale(.95); }

/* ══════════════════════════════════════
   TARJETA DE PERFIL
══════════════════════════════════════ */
.profile-card {
  display:flex; flex-direction:column; align-items:center; gap:14px;
  padding:32px; border-radius:24px;
  background:var(--surf); border:4px solid var(--brd);
  box-shadow:0 12px 32px rgba(0,0,0,.3);
  cursor:pointer; min-width:170px;
  transition: border-color .2s, transform .15s, box-shadow .2s;
}
.profile-card:hover { border-color:var(--pri); transform:scale(1.05); box-shadow:0 20px 48px rgba(0,0,0,.4); }
.profile-card:active{ transform:scale(.97); }

/* ══════════════════════════════════════
   NODO DE NIVEL (MAPA)
══════════════════════════════════════ */
.lvl-node { display:flex; flex-direction:column; align-items:center; gap:8px; flex-shrink:0; }
.lvl-node.unlocked { cursor:pointer; }
.lvl-bubble {
  width:80px; height:80px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; font-weight:900; border:4px solid;
  box-shadow:0 8px 24px rgba(0,0,0,.3);
  transition: transform .2s, box-shadow .2s;
}
.lvl-node.unlocked:hover .lvl-bubble { transform:translateY(-8px) scale(1.08); box-shadow:0 16px 32px rgba(0,0,0,.4); }
.lvl-open   { background:var(--surf); border-color:var(--pri); color:var(--txt); }
.lvl-locked { background:var(--bg);   border-color:var(--brd); color:var(--txtm); opacity:.45; }

/* ══════════════════════════════════════
   TECLADO NUMÉRICO
══════════════════════════════════════ */
.num-btn {
  aspect-ratio:1/1; display:flex; align-items:center; justify-content:center;
  font-size:1.8rem; font-weight:900; border-radius:12px;
  border:none; border-bottom:6px solid;
  cursor:pointer; transition:transform .1s, border-bottom-width .1s, background .12s;
}
.num-btn:hover  { transform:translateY(-2px); }
.num-btn:active { transform:translateY(2px); border-bottom-width:2px; }
.nb-num { background:var(--surf); color:var(--txt); border-color:var(--brd); }
.nb-num:hover { background:var(--pri); color:#fff; border-color:var(--prih); }
.nb-del { background:rgba(239,68,68,.15); color:#f87171; border-color:rgba(239,68,68,.35); font-size:.85rem; }
.nb-del:hover { background:#ef4444; color:#fff; }
.nb-ok  { background:rgba(34,197,94,.15); color:#4ade80; border-color:rgba(34,197,94,.35); font-size:1rem; }
.nb-ok:hover  { background:#22c55e; color:#fff; }

/* ══════════════════════════════════════
   CAJA DE RESPUESTA
══════════════════════════════════════ */
#answer-box {
  min-width:80px; height:80px; border-bottom:8px solid var(--pri);
  display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:3rem;
  color:var(--sec); opacity:.5; transition:all .2s;
}
#answer-box.filled { color:var(--txt); opacity:1; }

/* ══════════════════════════════════════
   OVERLAY FEEDBACK (CORRECTO / INCORRECTO)
══════════════════════════════════════ */
#fb-overlay {
  position:absolute; inset:0; border-radius:1.5rem;
  display:none; flex-direction:column;
  align-items:center; justify-content:center;
  z-index:20; animation: fbIn .25s ease;
}
#fb-overlay.fb-ok  { display:flex!important; background:rgba(22,163,74,.93); }
#fb-overlay.fb-bad { display:flex!important; background:rgba(220,38,38,.93); }

.fb-icon-wrap {
  width:110px; height:110px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:4rem; margin-bottom:12px;
}
.fb-ok  .fb-icon-wrap { background:rgba(255,255,255,.2); }
.fb-bad .fb-icon-wrap { background:rgba(255,255,255,.2); }

/* ══════════════════════════════════════
   NAV INFERIOR
══════════════════════════════════════ */
.nav-item {
  padding:10px 14px; border-radius:12px;
  display:flex; flex-direction:column; align-items:center; gap:3px;
  cursor:pointer; min-width:58px;
  transition:background .2s;
}
.nav-item:hover  { background:color-mix(in srgb,var(--surf) 60%,transparent); }
.nav-item.active { background:var(--pri); }
.nav-item.active .nav-lbl { color:#fff!important; }

/* ══════════════════════════════════════
   ÁLBUM DE CROMOS
══════════════════════════════════════ */
.sticker-card {
  aspect-ratio:1/1; border-radius:22px; border:4px solid;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  box-shadow:0 8px 24px rgba(0,0,0,.2);
  overflow:hidden; position:relative;
  transition:transform .2s, box-shadow .2s;
}
.sc-open   { background:var(--surf); border-color:var(--pri); }
.sc-locked { background:var(--bg);   border-color:var(--brd); opacity:.45; }
.sc-open:hover { transform:scale(1.07) rotate(2deg); box-shadow:0 14px 36px rgba(0,0,0,.35); }

/* ══════════════════════════════════════
   BADGE DE CROMO NUEVO
══════════════════════════════════════ */
@keyframes badgePop { 0%{transform:scale(0)}80%{transform:scale(1.15)}100%{transform:scale(1)} }
.badge-new {
  position:absolute; top:6px; right:6px;
  background:var(--acc); color:#fff;
  font-size:.6rem; font-weight:900; padding:2px 7px; border-radius:20px;
  animation: badgePop .4s ease both;
  text-transform:uppercase; letter-spacing:.05em;
}

/* ══════════════════════════════════════
   MARCA DE AGUA
══════════════════════════════════════ */
#watermark {
  position:fixed; bottom:0; left:0; right:0;
  text-align:center; padding:4px 0 6px;
  font-size:.68rem; font-weight:700; letter-spacing:.04em;
  color:color-mix(in srgb,var(--txtm) 55%,transparent);
  z-index:30; pointer-events:none;
  transition:color .5s;
}
#watermark a {
  pointer-events:all;
  color:color-mix(in srgb,var(--pri) 70%,transparent);
  text-decoration:none; transition:color .2s;
}
#watermark a:hover { color:var(--pri); }

/* ══════════════════════════════════════
   SCROLLBAR
══════════════════════════════════════ */
::-webkit-scrollbar { width:5px; height:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--brd); border-radius:5px; }

/* ══════════════════════════════════════
   BADGE DE ESTRELLAS POR TEMA
══════════════════════════════════════ */
.theme-stars-badge {
  display:inline-flex; align-items:center; gap:3px;
  background:color-mix(in srgb,var(--acc) 20%,transparent);
  border:1px solid color-mix(in srgb,var(--acc) 40%,transparent);
  border-radius:20px; padding:2px 8px;
  font-size:.75rem; font-weight:800; color:var(--acc);
}