/* Palabra Pop */
:root {
  --ink: #24124a;
  --font: "Baloo 2", ui-rounded, "Trebuchet MS", system-ui, sans-serif;
  --ok: #3fd277;
  --ok2: #1f9e50;
  --okd: #157a3b;
  --hay: #ffcb3d;
  --hay2: #f29b13;
  --hayd: #b86e06;
  --no: #8a86ad;
  --no2: #67638e;
  --nod: #49466c;
  --pink: #ff5fa2;
  --gold: #ffd23f;
  --t: 58px; /* lado de una casilla (lo ajusta juego.js) */
  --kh: 52px; /* alto de una tecla */
}
body.cb {
  --ok: #ff9a4d;
  --ok2: #ea6a1c;
  --okd: #b14a0b;
  --hay: #6cc4ff;
  --hay2: #2f8fe6;
  --hayd: #1b62a8;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body {
  margin: 0; height: 100%; overflow: hidden; font-family: var(--font); color: var(--ink);
  background: #3a179c;
  -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
  touch-action: manipulation; overscroll-behavior: none;
}
body {
  background:
    radial-gradient(90% 55% at 50% 0%, rgba(255, 140, 220, 0.55), transparent 70%),
    radial-gradient(80% 60% at 100% 100%, rgba(80, 200, 255, 0.35), transparent 70%),
    linear-gradient(170deg, #8d5bff 0%, #6236e6 45%, #3d1aa8 100%);
}
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; padding: 0; }
button:focus { outline: none; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* ---------- Fondo de letras flotantes ---------- */
#bg { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
#bg span {
  position: absolute; bottom: -140px; font-weight: 800; color: #fff; opacity: 0.07; line-height: 1;
  animation: flota linear infinite;
}
#bg i {
  position: absolute; border-radius: 50%; background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.55), rgba(255,255,255,.06) 60%);
  animation: flota linear infinite; bottom: -60px;
}
@keyframes flota {
  from { transform: translateY(0) rotate(var(--r0, -10deg)); }
  to { transform: translateY(calc(-100vh - 280px)) rotate(var(--r1, 20deg)); }
}

#fx { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 80; }

.scr { position: absolute; inset: 0; display: flex; flex-direction: column; z-index: 1; }
.shadow { text-shadow: 0 2px 0 rgba(30, 10, 80, 0.35); }

/* ---------- Botones ---------- */
.round {
  width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.95); display: grid; place-items: center;
  font-size: 21px; font-weight: 800; box-shadow: 0 4px 0 rgba(30,10,80,.35); flex: none; color: var(--ink); text-decoration: none;
  transition: transform .08s;
}
.round:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(30,10,80,.35); }
.btn {
  border-radius: 999px; min-height: 52px; padding: 6px 18px; font-weight: 800; font-size: 19px;
  background: linear-gradient(180deg, #fff 0%, #f6f1ff 60%, #e9e0ff 100%); color: var(--ink);
  box-shadow: inset 0 2px 0 #fff, 0 5px 0 rgba(30, 10, 80, 0.38), 0 10px 18px rgba(20, 5, 60, 0.18);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none;
  transition: transform .08s; white-space: nowrap;
}
.btn:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(30, 10, 80, 0.38); }
.btn.go {
  color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.2); background: linear-gradient(180deg, #7df29a, #22b357);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 6px 0 #137a39, 0 10px 18px rgba(10,60,30,.25);
}
.btn.go:active { box-shadow: 0 2px 0 #137a39; }
.btn.reto {
  color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.2); background: linear-gradient(180deg, #ffc061, #ff6a3d);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 6px 0 #c2410c, 0 10px 18px rgba(120,40,0,.25);
}
.btn.reto:active { box-shadow: 0 2px 0 #c2410c; }
.btn.pink {
  color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.2); background: linear-gradient(180deg, #ff8cc3, #ff4f93);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 6px 0 #c41f63, 0 10px 18px rgba(120,0,50,.25);
}
.btn.pink:active { box-shadow: 0 2px 0 #c41f63; }
.btn.small { min-height: 44px; font-size: 16.5px; padding: 4px 14px; }
.row { display: flex; gap: 10px; }
.row .btn { flex: 1 1 0; min-width: 0; }

/* ---------- Mascota: Eñe ---------- */
.ene { display: block; overflow: visible; }
.ene .m-all { transform-origin: 50px 104px; transform-box: view-box; animation: m-bob 2.2s ease-in-out infinite; }
.ene .m-eye { transform-origin: center; transform-box: fill-box; animation: m-blink 4.2s infinite; }
.ene .m-pupils { transition: transform .25s; }
.ene .m-arm { transform-box: view-box; }
.ene .m-arm.l { transform-origin: 16px 64px; animation: m-wave-l 2.2s ease-in-out infinite; }
.ene .m-arm.r { transform-origin: 84px 64px; animation: m-wave-r 2.2s ease-in-out infinite; }
.ene .m-tilde { transform-origin: 50px 14px; transform-box: view-box; animation: m-tilde 2.2s ease-in-out infinite; }
.ene .m-sad, .ene .m-wow { display: none; }
.ene.sad .m-happy, .ene.wow .m-happy { display: none; }
.ene.sad .m-sad, .ene.wow .m-wow { display: inline; }
.ene.sad .m-all { animation: m-droop 2.6s ease-in-out infinite; }
.ene.sad .m-pupils { transform: translateY(3px); }
.ene.dance .m-all { animation: m-dance .52s ease-in-out infinite alternate; }
.ene.dance .m-arm.l { animation: m-arms-l .26s ease-in-out infinite alternate; }
.ene.dance .m-arm.r { animation: m-arms-r .26s ease-in-out infinite alternate; }
.ene.dance .m-tilde { animation: m-tilde .26s ease-in-out infinite alternate; }
.ene.hop .m-all { animation: m-hop .45s cubic-bezier(.3,1.6,.5,1); }
.ene.no .m-all { animation: m-no .5s ease-in-out; }
@keyframes m-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes m-blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes m-wave-l { 0%,100% { transform: rotate(0); } 50% { transform: rotate(10deg); } }
@keyframes m-wave-r { 0%,100% { transform: rotate(0); } 50% { transform: rotate(-10deg); } }
@keyframes m-tilde { 0%,100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg) translateY(-1px); } }
@keyframes m-dance {
  0% { transform: translateY(0) rotate(-9deg) scale(1.02, .96); }
  50% { transform: translateY(-16px) rotate(0) scale(.97, 1.04); }
  100% { transform: translateY(0) rotate(9deg) scale(1.02, .96); }
}
@keyframes m-arms-l { from { transform: rotate(-30deg); } to { transform: rotate(40deg); } }
@keyframes m-arms-r { from { transform: rotate(30deg); } to { transform: rotate(-40deg); } }
@keyframes m-hop { 0% { transform: translateY(0) scale(1); } 40% { transform: translateY(-12px) scale(.95, 1.06); } 100% { transform: translateY(0); } }
@keyframes m-no { 0%,100% { transform: rotate(0); } 20% { transform: rotate(-10deg); } 40% { transform: rotate(9deg); } 60% { transform: rotate(-6deg); } 80% { transform: rotate(4deg); } }
@keyframes m-droop { 0%,100% { transform: translateY(2px) rotate(-2deg); } 50% { transform: translateY(4px) rotate(2deg); } }

/* ---------- Portada ---------- */
#sInicio { overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; align-items: center; padding: 10px 16px calc(18px + env(safe-area-inset-bottom, 0px)); }
.home-top { width: 100%; max-width: 520px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fecha { color: #fff; font-weight: 800; font-size: 16px; text-align: center; opacity: .95; line-height: 1.1; }
.fecha small { display: block; font-size: 13px; opacity: .8; font-weight: 700; }
.home { width: 100%; max-width: 460px; display: flex; flex-direction: column; gap: 12px; margin: auto 0; padding-top: 4px; }
.logo { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 2px 0 0; }
.logo .ln { display: flex; gap: 5px; justify-content: center; perspective: 500px; }
.logo .lt {
  --c1: #fff; --c2: #ddd; --c3: #aaa;
  width: 40px; height: 46px; border-radius: 11px; display: grid; place-items: center; color: #fff;
  font-size: 30px; font-weight: 800; line-height: 1; padding-top: 3px; text-shadow: 0 2px 0 rgba(0,0,0,.22);
  background: linear-gradient(180deg, var(--c1), var(--c2));
  box-shadow: inset 0 3px 0 rgba(255,255,255,.4), 0 5px 0 var(--c3), 0 9px 14px rgba(20,5,60,.3);
  animation: lt-bob 2.6s ease-in-out infinite; animation-delay: calc(var(--i) * -0.22s);
}
.logo .ln.pop .lt { width: 58px; height: 64px; font-size: 44px; border-radius: 15px; }
.logo .lt.flip { animation: lt-flip .7s cubic-bezier(.4,1.4,.5,1); }
.logo .lt.g { --c1: #6fec95; --c2: #25b75c; --c3: #157a3b; }
.logo .lt.y { --c1: #ffe066; --c2: #f7a91c; --c3: #b86e06; }
.logo .lt.p { --c1: #ff9acb; --c2: #ff4f93; --c3: #b51b5c; }
.logo .lt.b { --c1: #7fd6ff; --c2: #2d97ef; --c3: #1660a8; }
.logo .lt.v { --c1: #c9a2ff; --c2: #8b53f5; --c3: #5726b8; }
body.cb .logo .lt.g { --c1: #ffb27a; --c2: #ea6a1c; --c3: #b14a0b; }
@keyframes lt-bob { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-6px) rotate(2deg); } }
@keyframes lt-flip { 0% { transform: rotateX(0); } 50% { transform: rotateX(90deg) scale(1.05); } 100% { transform: rotateX(0); } }
.logo .ln.pop { align-items: flex-end; margin-left: 74px; }
.logo .ene { width: 76px; height: 84px; margin: 0 0 -10px -2px; flex: none; }
.tagline { text-align: center; color: #fff; font-weight: 800; font-size: 18px; margin: 4px 0 0; line-height: 1.2; }

.cards { display: flex; flex-direction: column; gap: 12px; }
.card {
  position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; text-align: left;
  border-radius: 24px; padding: 12px 14px 12px 12px; color: #fff; overflow: hidden;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.45), 0 6px 0 var(--cs), 0 14px 22px rgba(20,5,60,.28);
  transition: transform .1s;
  animation: card-in .55s cubic-bezier(.3,1.5,.5,1) both;
}
.card:nth-child(2) { animation-delay: .08s; }
.card:active { transform: translateY(4px); box-shadow: inset 0 2px 0 rgba(255,255,255,.45), 0 2px 0 var(--cs); }
.card.peq { background: linear-gradient(135deg, #4fe08a, #1fae9a); --cs: #12795f; }
.card.may { background: linear-gradient(135deg, #ff8fb8, #ff6a3d); --cs: #b8361b; }
body.cb .card.peq { background: linear-gradient(135deg, #46b8ff, #4f63e8); --cs: #2b3aa0; }
.card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.28) 48%, transparent 60%);
  transform: translateX(-120%); animation: shine 5s ease-in-out infinite;
}
.card.may::after { animation-delay: 2.5s; }
@keyframes shine { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@keyframes card-in { from { opacity: 0; transform: translateY(24px) scale(.95); } to { opacity: 1; transform: none; } }
.card .ico {
  width: 58px; height: 58px; border-radius: 18px; background: rgba(255,255,255,.25); display: grid; place-items: center;
  font-size: 34px; box-shadow: inset 0 2px 0 rgba(255,255,255,.35);
}
.card b { display: block; font-size: 25px; line-height: 1; text-shadow: 0 2px 0 rgba(0,0,0,.18); }
.card small { display: block; font-size: 14.5px; font-weight: 700; opacity: .95; line-height: 1.2; margin-top: 3px; }
.card .mini { display: flex; gap: 3px; margin-top: 6px; }
.card .mini i { width: 15px; height: 15px; border-radius: 4px; background: rgba(255,255,255,.32); }
.card .mini i.s2 { background: #fff; }
.card .mini i.s1 { background: var(--gold); }
.card .mini i.s0 { background: rgba(40, 10, 80, .28); }
.card .st {
  background: #fff; color: var(--ink); border-radius: 999px; padding: 5px 12px; font-weight: 800; font-size: 16px;
  box-shadow: 0 3px 0 rgba(0,0,0,.18); white-space: nowrap; line-height: 1.2;
}
.card .st.done { background: rgba(255,255,255,.22); color: #fff; box-shadow: none; text-align: center; padding: 4px 10px; font-size: 15px; }
.card .st.done em { display: block; font-style: normal; font-size: 12.5px; opacity: .95; }
.card .st:not(.done) { animation: st-pulse 1.8s ease-in-out infinite; }
@keyframes st-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.07); } }
.racha { position: absolute; top: 8px; right: 12px; font-size: 13px; font-weight: 800; background: rgba(0,0,0,.18); border-radius: 999px; padding: 0 8px; }
.home-note { color: #fff; text-align: center; font-weight: 700; font-size: 14.5px; margin: -2px 0 0; opacity: .9; line-height: 1.3; }

/* ---------- Juego ---------- */
#sJuego { align-items: center; }
.top {
  width: 100%; max-width: 560px; display: flex; align-items: center; gap: 8px;
  padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 4px;
}
.ttl { flex: 1; min-width: 0; text-align: center; color: #fff; line-height: 1.05; }
.ttl b { display: block; font-size: 22px; }
.ttl small { display: block; font-size: 13.5px; font-weight: 700; opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ttl small.conpista { opacity: 1; color: #fff7b8; }
.ttl small .pista { font-style: normal; font-size: 19px; line-height: 0; vertical-align: -2px; }
.top .ene { width: 44px; height: 48px; flex: none; margin: -4px 0 -2px; }
#retoBar {
  display: flex; align-items: center; justify-content: center; gap: 10px; color: #fff; font-weight: 800; font-size: 16px;
  padding: 0 12px 2px;
}
#retoBar .dots { display: flex; gap: 6px; }
#retoBar .dots i {
  min-width: 28px; height: 28px; padding: 0 3px; border-radius: 9px; background: rgba(255,255,255,.18); display: grid; place-items: center;
  font-style: normal; font-size: 13px; border: 2px solid rgba(255,255,255,.35); line-height: 1;
}
#retoBar .dots i.now { background: #fff; color: var(--ink); border-color: #fff; animation: st-pulse 1.4s infinite; }
#retoBar .dots i.done { background: linear-gradient(180deg, var(--ok), var(--ok2)); border-color: transparent; }
#retoBar .dots i.bad { background: #ff4f6d; border-color: transparent; }
#retoBar .clock { min-width: 58px; text-align: right; font-variant-numeric: tabular-nums; }

#boardWrap { flex: 1; min-height: 0; width: 100%; display: grid; place-items: center; padding: 4px 8px; }
#board { display: grid; gap: calc(var(--t) * 0.1); }
.fila { display: grid; grid-auto-flow: column; gap: calc(var(--t) * 0.1); }
.fila.shake { animation: shake .5s cubic-bezier(.36,.07,.19,.97); }
@keyframes shake {
  10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(5px); }
  30%, 50%, 70% { transform: translateX(-9px); } 40%, 60% { transform: translateX(9px); }
}
.tile { width: var(--t); height: var(--t); perspective: calc(var(--t) * 6); }
#board.in .tile { animation: tin .45s cubic-bezier(.3,1.6,.5,1) both; animation-delay: calc(var(--d) * 22ms); }
#board.in .tile.win { animation: bounce .7s cubic-bezier(.3,.9,.4,1) both; }
@keyframes tin { from { opacity: 0; transform: scale(.4) translateY(14px); } }
.tile .in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; }
.tile .f, .tile .b {
  position: absolute; inset: 0; display: grid; place-items: center; border-radius: calc(var(--t) * 0.2);
  font-weight: 800; font-size: calc(var(--t) * 0.6); line-height: 1; padding-top: calc(var(--t) * 0.07);
  text-transform: uppercase; backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.tile .f {
  background: rgba(255,255,255,.1); border: 2px solid rgba(255,255,255,.28); color: var(--ink);
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.fila.cur .tile:not(.full) .f { border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.16); }
.fila.cur .tile.next .f { border-color: rgba(255,255,255,.95); box-shadow: 0 0 0 3px rgba(255,255,255,.18); animation: next-glow 1.2s ease-in-out infinite; }
@keyframes next-glow { 50% { box-shadow: 0 0 0 6px rgba(255,255,255,.08); } }
.tile.full .f {
  background: linear-gradient(180deg, #fff, #f1ebff); border-color: #fff;
  box-shadow: 0 calc(var(--t) * 0.07) 0 #b9a6ff, 0 8px 14px rgba(20,5,60,.22);
}
.tile.pop .in { animation: tpop .16s ease-out; }
@keyframes tpop { 0% { transform: scale(.8); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
.tile .b { transform: rotateX(180deg); color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.22); }
.tile.s2 .b { background: linear-gradient(180deg, var(--ok), var(--ok2)); box-shadow: inset 0 3px 0 rgba(255,255,255,.3), 0 calc(var(--t) * 0.07) 0 var(--okd); }
.tile.s1 .b { background: linear-gradient(180deg, var(--hay), var(--hay2)); box-shadow: inset 0 3px 0 rgba(255,255,255,.35), 0 calc(var(--t) * 0.07) 0 var(--hayd); }
.tile.s0 .b { background: linear-gradient(180deg, var(--no), var(--no2)); box-shadow: inset 0 3px 0 rgba(255,255,255,.18), 0 calc(var(--t) * 0.07) 0 var(--nod); }
.tile.flip .in { animation: flip .56s cubic-bezier(.45,.05,.4,1.25) both; }
.tile.shown .in { transform: rotateX(180deg); }
@keyframes flip {
  0% { transform: rotateX(0) scale(1); }
  45% { transform: rotateX(100deg) scale(1.08); }
  100% { transform: rotateX(180deg) scale(1); }
}
.tile.win { animation: bounce .7s cubic-bezier(.3,.9,.4,1) both; }
@keyframes bounce {
  0% { transform: translateY(0) scale(1); }
  25% { transform: translateY(8%) scale(1.08, .9); }
  50% { transform: translateY(-45%) scale(.95, 1.08); }
  75% { transform: translateY(4%) scale(1.04, .96); }
  100% { transform: translateY(0) scale(1); }
}
/* El brillo acaba desplazado a un lado: sin recortarlo ensanchaba la página en el móvil. */
.tile.win .b { overflow: hidden; }
.tile.win .b::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.65) 50%, transparent 70%);
  animation: glint .9s .25s ease-out both;
}
@keyframes glint { from { transform: translateX(-80%); opacity: 1; } to { transform: translateX(80%); opacity: 0; } }

/* ---------- Teclado ---------- */
#kb {
  width: 100%; max-width: 560px; padding: 8px 5px calc(8px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; gap: 7px;
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  border-radius: 22px 22px 0 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
}
.kr { display: flex; gap: 4px; justify-content: center; }
.key {
  flex: 1 1 0; min-width: 0; height: var(--kh); border-radius: 10px; font-weight: 800; font-size: 21px; line-height: 1;
  background: linear-gradient(180deg, #fff, #ece5ff); color: var(--ink); padding-top: 2px;
  box-shadow: 0 3px 0 #a892f0, 0 5px 8px rgba(20,5,60,.22); text-transform: uppercase;
  transition: background .3s, color .3s, box-shadow .3s; position: relative;
}
.key.wide { flex: 1.55 1 0; font-size: 13.5px; letter-spacing: .02em; }
.key.enter { background: linear-gradient(180deg, #ff8cc3, #ff4f93); color: #fff; box-shadow: 0 3px 0 #b51b5c, 0 5px 8px rgba(20,5,60,.22); }
.key.enter.ready { animation: ready 1s ease-in-out infinite; }
@keyframes ready { 50% { transform: scale(1.06); filter: brightness(1.1); } }
.key.del { background: linear-gradient(180deg, #d9ccff, #b9a3ff); font-size: 22px; }
.key svg { width: 26px; height: 26px; display: block; margin: auto; }
.key.press { animation: kpop .2s ease-out; }
@keyframes kpop { 0% { transform: scale(.88) translateY(2px); } 60% { transform: scale(1.1); } 100% { transform: scale(1); } }
.key.k2 { background: linear-gradient(180deg, var(--ok), var(--ok2)); color: #fff; box-shadow: 0 3px 0 var(--okd); text-shadow: 0 1px 0 rgba(0,0,0,.2); }
.key.k1 { background: linear-gradient(180deg, var(--hay), var(--hay2)); color: #fff; box-shadow: 0 3px 0 var(--hayd); text-shadow: 0 1px 0 rgba(0,0,0,.2); }
.key.k0 { background: rgba(25, 10, 80, .4); color: rgba(255,255,255,.55); box-shadow: 0 2px 0 rgba(15,5,50,.4); }
.key.flash { animation: kflash .5s ease-out; }
@keyframes kflash { 0% { transform: scale(1); } 40% { transform: scale(1.18); } 100% { transform: scale(1); } }

/* ---------- Avisos ---------- */
#toasts { position: fixed; left: 0; right: 0; top: calc(64px + env(safe-area-inset-top, 0px)); z-index: 90; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.toast {
  background: #fff; color: var(--ink); font-weight: 800; font-size: 18px; padding: 8px 18px; border-radius: 16px;
  box-shadow: 0 5px 0 rgba(30,10,80,.3), 0 12px 24px rgba(20,5,60,.3); max-width: 90vw; text-align: center;
  animation: toast-in .45s cubic-bezier(.3,1.6,.5,1) both;
}
.toast.out { animation: toast-out .3s ease-in both; }
.toast.big { font-size: 26px; padding: 8px 24px; background: linear-gradient(180deg, #fff, #fff3c4); }
@keyframes toast-in { from { opacity: 0; transform: translateY(-24px) scale(.7); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(-12px) scale(.9); } }

/* ---------- Ventanas ---------- */
#ov {
  position: fixed; inset: 0; z-index: 70; display: flex; align-items: flex-end; justify-content: center;
  background: rgba(20, 6, 60, .55); animation: fade .25s both;
}
#ov.center { align-items: center; padding: 16px; }
@keyframes fade { from { opacity: 0; } }
.sheet {
  position: relative; width: 100%; max-width: 480px; max-height: calc(100% - 44px); overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y;
  background: linear-gradient(180deg, #fff 0%, #fbf8ff 100%); border-radius: 28px 28px 0 0;
  padding: 22px 18px calc(18px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -10px 40px rgba(20,5,60,.35);
  animation: sheet-in .5s cubic-bezier(.25,1.3,.45,1) both; user-select: text; -webkit-user-select: text;
}
#ov.center .sheet { border-radius: 28px; max-height: 100%; padding-bottom: 18px; }
@keyframes sheet-in { from { transform: translateY(100%); } to { transform: none; } }
.sheet h2 { margin: 0 0 6px; font-size: 27px; text-align: center; line-height: 1.1; }
.sheet h3 { margin: 12px 0 6px; font-size: 18px; }
.sheet p { margin: 6px 0; font-size: 17px; line-height: 1.35; font-weight: 600; }
.sheet .x {
  position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border-radius: 50%; background: #efe9ff;
  font-size: 22px; font-weight: 800; display: grid; place-items: center; z-index: 2;
}
.sheet .btn { width: 100%; }
.sheet .row { margin-top: 10px; }

/* Ayuda */
.ejw { display: flex; align-items: center; gap: 12px; margin: 10px 0; }
.ej { display: flex; gap: 4px; --t: 38px; flex: none; }
.ej .tile .f { background: #fff; border-color: #d9cdfa; box-shadow: 0 3px 0 #c9b8ff; font-size: 23px; }
.ej .tile .b { font-size: 23px; }
.ej-t { margin: 0 !important; font-size: 15px !important; line-height: 1.25 !important; }
.ej-t b.g { color: var(--ok2); } .ej-t b.y { color: var(--hayd); } .ej-t b.n { color: var(--nod); }
.tips { padding: 0; margin: 10px 0 12px; list-style: none; display: grid; gap: 8px; }
.tips li { background: #f4efff; border-radius: 14px; padding: 8px 12px; font-weight: 700; font-size: 15.5px; line-height: 1.3; display: flex; gap: 10px; align-items: center; }
.tips li span { font-size: 22px; flex: none; }
.tips li div { flex: 1; min-width: 0; }

/* Resultado */
.sheet.res { padding-top: 64px; overflow: visible; margin-top: 64px; max-height: calc(100% - 64px); }
.sheet.res .scroll { max-height: calc(100dvh - 160px); overflow-y: auto; overscroll-behavior: contain; margin: 0 -18px; padding: 0 18px; }
.res .ene { position: absolute; left: 50%; top: -58px; width: 104px; height: 114px; margin-left: -52px; z-index: 3; }
.res h2 { margin-bottom: 8px; }
.sol { display: flex; justify-content: center; gap: 6px; margin: 4px 0 10px; --t: 50px; }
.sol .tile .b { font-size: 31px; }
.sol .tile .f { background: linear-gradient(180deg, #efe8ff, #ddd0ff); border: 0; color: #a58ee8; box-shadow: 0 4px 0 #c3b2f5; }
.sol.ko .tile .b { background: linear-gradient(180deg, #ff8cc3, #ff4f93); box-shadow: inset 0 3px 0 rgba(255,255,255,.3), 0 4px 0 #b51b5c; }
.def {
  display: flex; gap: 10px; align-items: center; background: linear-gradient(135deg, #fff6d6, #ffe9f3); border-radius: 18px;
  padding: 10px 12px; margin: 4px 0 12px; box-shadow: inset 0 0 0 2px rgba(255, 180, 60, .25);
}
.def .em { font-size: 38px; line-height: 1; flex: none; animation: em-wiggle 2.4s ease-in-out infinite; }
@keyframes em-wiggle { 0%,100% { transform: rotate(-8deg) scale(1); } 50% { transform: rotate(8deg) scale(1.1); } }
.def p { margin: 0; font-size: 16.5px; }
.def p b { text-transform: uppercase; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 4px 0 10px; }
.stats div { background: #f4efff; border-radius: 14px; text-align: center; padding: 6px 2px 5px; line-height: 1.05; }
.stats b { display: block; font-size: 26px; }
.stats span { display: block; font-size: 12px; font-weight: 700; color: #6b5a9a; }
.stats .fire b { color: #ff6a3d; }
.dist { display: grid; gap: 4px; margin: 2px 0 12px; }
.dist div { display: grid; grid-template-columns: 16px 1fr; gap: 6px; align-items: center; font-weight: 800; font-size: 15px; }
.dist i {
  display: block; height: 22px; border-radius: 7px; background: #d4c8f5; color: #fff; text-align: right; padding: 0 8px; font-style: normal;
  font-size: 14px; line-height: 23px; min-width: 26px; transform-origin: left; animation: grow .7s cubic-bezier(.3,1.3,.5,1) both;
}
.dist i.me { background: linear-gradient(90deg, var(--ok2), var(--ok)); }
@keyframes grow { from { transform: scaleX(0); } }
.next { text-align: center; font-weight: 800 !important; color: #6b5a9a; font-size: 16px !important; margin-top: 10px !important; }
.reto-stars { text-align: center; font-size: 38px; letter-spacing: 4px; margin: 0 0 4px; }
.reto-stars span { display: inline-block; animation: star-pop .5s cubic-bezier(.3,1.8,.5,1) both; }
.reto-stars span.off { filter: grayscale(1); opacity: .3; }
@keyframes star-pop { from { transform: scale(0) rotate(-90deg); } }

/* Ajustes */
.opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 4px; border-bottom: 2px solid #f0eaff; font-weight: 800; font-size: 18px; }
.opt small { display: block; font-size: 13.5px; color: #6b5a9a; font-weight: 700; }
.sw { width: 58px; height: 34px; border-radius: 999px; background: #d6ccf2; position: relative; flex: none; transition: background .2s; }
.sw::after { content: ""; position: absolute; top: 4px; left: 4px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.2); transition: transform .25s cubic-bezier(.3,1.5,.5,1); }
.sw.on { background: var(--ok2); }
.sw.on::after { transform: translateX(24px); }
.swatch { display: inline-flex; gap: 3px; vertical-align: middle; margin-left: 4px; }
.swatch i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }

@media (hover: hover) {
  .key:hover, .btn:hover, .card:hover, .round:hover { filter: brightness(1.06); }
}

/* Pantallas más bajas */
@media (max-height: 640px) {
  html:root { --kh: 42px; }
}
@media (max-height: 760px) {
  :root { --kh: 48px; }
  #kb { gap: 6px; padding-top: 6px; }
  .ttl b { font-size: 20px; }
  .logo .ln.pop .lt { width: 52px; height: 56px; font-size: 38px; }
  .logo .lt { width: 36px; height: 42px; font-size: 27px; }
  .home { gap: 10px; }
  .card .ico { width: 50px; height: 50px; font-size: 30px; }
  .btn { min-height: 48px; }
}
@media (min-width: 700px) and (min-height: 700px) {
  :root { --kh: 58px; }
  .key { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  #bg span, #bg i { display: none; }
}
@media (max-width: 380px) {
  .card { gap: 10px; padding: 10px 12px 10px 10px; }
  .card .ico { width: 50px; height: 50px; font-size: 30px; border-radius: 16px; }
  .card small { font-size: 13.5px; }
  .card b { font-size: 23px; }
  .btn { font-size: 17.5px; padding: 6px 12px; }
  .btn.small { font-size: 15.5px; }
}