/* Harudoku — estilos */
:root {
  --bg: #fff6ef;
  --bg2: #ffeadd;
  --card: #ffffff;
  --ink: #4a3530;
  --ink-soft: #8d7068;
  --line: #f1dccf;
  --pink: #ff8fab;
  --pink-d: #e9668b;
  --orange: #f2a14b;
  --lav: #b9a4ff;
  --mint: #8fd6c0;
  --sky: #9ad3ff;
  --yellow: #ffd25e;
  --shadow: 0 6px 18px rgba(180, 110, 90, 0.14);
  --shadow-s: 0 2px 6px rgba(180, 110, 90, 0.14);
  --board: #b98c7c;
  --cell: #fffdfb;
  --cell-rel: #fff0e5;
  --cell-same: #ffd8c4;
  --cell-sel: #ffbf9c;
  --given: #4a3530;
  --user: #9d2f54;
  --pista: #3f8f7a;
  --err: #e5484d;
  --err-bg: #ffe1e1;
  --huella: rgba(242, 161, 75, 0.09);
  --r: 20px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #1e1923; --bg2: #2a2231; --card: #2d2535; --ink: #f7ebe6; --ink-soft: #bca9b6; --line: #41364b;
    --shadow: 0 6px 18px rgba(0, 0, 0, 0.35); --shadow-s: 0 2px 6px rgba(0, 0, 0, 0.3);
    --board: #6e5a7a; --cell: #2a2232; --cell-rel: #352b3f; --cell-same: #4c3a57; --cell-sel: #6a4a72;
    --given: #f7ebe6; --user: #ff9cbd; --pista: #8fe0c6; --err: #ff7b7f; --err-bg: #4a2630; --huella: rgba(255, 180, 120, 0.05);
    color-scheme: dark;
  }
}
:root[data-theme='dark'] {
  --bg: #1e1923; --bg2: #2a2231; --card: #2d2535; --ink: #f7ebe6; --ink-soft: #bca9b6; --line: #41364b;
  --shadow: 0 6px 18px rgba(0, 0, 0, 0.35); --shadow-s: 0 2px 6px rgba(0, 0, 0, 0.3);
  --board: #6e5a7a; --cell: #2a2232; --cell-rel: #352b3f; --cell-same: #4c3a57; --cell-sel: #6a4a72;
  --given: #f7ebe6; --user: #ff9cbd; --pista: #8fe0c6; --err: #ff7b7f; --err-bg: #4a2630; --huella: rgba(255, 180, 120, 0.05);
  color-scheme: dark;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; }
body {
  background-color: var(--bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='%23f2a14b' fill-opacity='0.09'%3E%3Cg transform='translate(20 22) rotate(-18)'%3E%3Cellipse cx='0' cy='6' rx='7' ry='6'/%3E%3Cellipse cx='-8' cy='-3' rx='3' ry='3.6'/%3E%3Cellipse cx='-3' cy='-8' rx='3' ry='3.8'/%3E%3Cellipse cx='3' cy='-8' rx='3' ry='3.8'/%3E%3Cellipse cx='8' cy='-3' rx='3' ry='3.6'/%3E%3C/g%3E%3Cg transform='translate(82 80) rotate(20)'%3E%3Cellipse cx='0' cy='6' rx='7' ry='6'/%3E%3Cellipse cx='-8' cy='-3' rx='3' ry='3.6'/%3E%3Cellipse cx='-3' cy='-8' rx='3' ry='3.8'/%3E%3Cellipse cx='3' cy='-8' rx='3' ry='3.8'/%3E%3Cellipse cx='8' cy='-3' rx='3' ry='3.6'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  color: var(--ink);
  font-family: 'Nunito', ui-rounded, 'Segoe UI', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; touch-action: manipulation; }
h1, h2, h3, .fredoka { font-family: 'Fredoka', ui-rounded, 'Segoe UI', system-ui, sans-serif; font-weight: 600; margin: 0; line-height: 1.15; }
img { display: block; max-width: 100%; }

#app {
  max-width: 520px;
  margin: 0 auto;
  min-height: 100dvh;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px calc(env(safe-area-inset-bottom, 0px) + 20px);
  display: flex;
  flex-direction: column;
}
.pantalla { display: flex; flex-direction: column; gap: 14px; flex: 1; animation: entrar 0.35s ease both; }
@keyframes entrar { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Barra superior ---------- */
.barra { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.barra .titulo { flex: 1; min-width: 0; }
.barra .titulo h2 { font-size: 1.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra .titulo small { color: var(--ink-soft); font-size: 0.82rem; }
.icono-btn {
  width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center;
  background: var(--card); box-shadow: var(--shadow-s); flex: none;
}
.icono-btn svg { width: 22px; height: 22px; }
.icono-btn:active { transform: scale(0.94); }
.logo { flex: 1; display: flex; align-items: center; gap: 8px; }
.logo h1 { font-size: 1.7rem; letter-spacing: 0.3px; }
.logo h1 span { color: var(--pink-d); }
.logo .huellita { width: 26px; height: 26px; color: var(--orange); transform: rotate(-14deg); }

.chip-tiempo {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px 0 6px; border-radius: 99px;
  background: var(--card); box-shadow: var(--shadow-s); font-weight: 700; font-size: 0.9rem; white-space: nowrap;
}
.chip-tiempo svg { width: 26px; height: 26px; }
.chip-tiempo.poco { background: #ffe9b8; color: #7a4b00; }
.chip-tiempo.fin { background: var(--pink); color: #fff; }
:root[data-theme='dark'] .chip-tiempo.poco { background: #5a4520; color: #ffe3a3; }

/* ---------- Tarjetas y botones ---------- */
.tarjeta { background: var(--card); border-radius: var(--r); box-shadow: var(--shadow); padding: 16px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 22px; border-radius: 18px; font-weight: 800; font-size: 1.05rem;
  background: var(--pink); color: #452632; box-shadow: 0 4px 0 var(--pink-d), var(--shadow-s);
  transition: transform 0.08s, box-shadow 0.08s;
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--pink-d); }
.btn.sec { background: var(--card); color: var(--ink); box-shadow: 0 4px 0 var(--line), var(--shadow-s); }
.btn.sec:active { box-shadow: 0 1px 0 var(--line); }
.btn.suave { background: var(--bg2); color: var(--ink); box-shadow: none; }
.btn.ancho { width: 100%; }
.btn[disabled] { opacity: 0.45; pointer-events: none; }
.btn svg { width: 22px; height: 22px; }
.link { color: var(--ink-soft); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; padding: 10px; }

/* ---------- Inicio ---------- */
.hero { display: flex; align-items: flex-end; gap: 4px; position: relative; min-height: 150px; }
.hero .gato { width: 150px; height: 150px; flex: none; margin-left: -8px; }
.burbuja {
  position: relative; background: var(--card); border-radius: 20px; padding: 12px 14px; box-shadow: var(--shadow);
  font-weight: 700; margin-bottom: 70px; flex: 1;
}
.burbuja::after {
  content: ''; position: absolute; left: -9px; bottom: 16px; width: 18px; height: 18px; background: var(--card);
  transform: rotate(45deg); border-radius: 4px;
}
.burbuja small { display: block; font-weight: 600; color: var(--ink-soft); margin-top: 2px; }

.seccion-titulo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.seccion-titulo h2 { font-size: 1.3rem; }
.niveles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.nivel {
  position: relative; text-align: left; border-radius: 18px; padding: 14px; min-height: 88px;
  display: flex; flex-direction: column; justify-content: space-between; color: #4a3530;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.08); transition: transform 0.08s;
}
.nivel:active { transform: translateY(3px); }
.nivel b { font-family: 'Fredoka', sans-serif; font-size: 1.2rem; font-weight: 600; }
.nivel span { font-size: 0.86rem; font-weight: 700; opacity: 0.75; }
.nivel .pts { display: flex; gap: 3px; margin-top: 4px; }
.nivel .pts i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: 0.25; }
.nivel .pts i.on { opacity: 0.8; }
.nivel .continuar {
  position: absolute; top: 10px; right: 10px; font-size: 0.7rem; font-weight: 800; background: rgba(255, 255, 255, 0.75);
  padding: 2px 8px; border-radius: 99px; text-transform: uppercase; letter-spacing: 0.4px;
}
.nivel-facil { background: #c8f0e1; }
.nivel-medio { background: #cfe7ff; }
.nivel-dificil { background: #e3d9ff; }
.nivel-experto { background: #ffd6e2; }
:root[data-theme='dark'] .nivel { filter: saturate(0.9) brightness(0.92); }

.accesos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.acceso {
  background: var(--card); border-radius: 18px; box-shadow: var(--shadow); padding: 10px 6px 12px;
  display: flex; flex-direction: column; align-items: center; gap: 4px; font-weight: 800; font-size: 0.95rem;
}
.acceso .gato { width: 64px; height: 64px; }
.acceso small { font-weight: 700; color: var(--ink-soft); font-size: 0.78rem; }
.acceso:active { transform: scale(0.97); }
.pie { text-align: center; color: var(--ink-soft); font-size: 0.85rem; margin-top: auto; padding-top: 8px; }

/* ---------- Sudoku ---------- */
.juego { gap: 12px; }
.estado-juego { display: flex; align-items: center; justify-content: space-between; color: var(--ink-soft); font-weight: 700; font-size: 0.9rem; padding: 0 4px; }
.estado-juego .gatito { width: 54px; height: 54px; margin: -14px 0 -8px; }
.estado-juego .gatito.salta .gato { animation: saltito 0.6s ease; }
.tablero {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; background: var(--board); padding: 3px;
  border-radius: 16px; aspect-ratio: 1; width: 100%; box-shadow: var(--shadow); user-select: none; -webkit-user-select: none;
}
.caja { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: color-mix(in srgb, var(--board) 45%, var(--cell)); overflow: hidden; }
.caja:nth-child(1) { border-top-left-radius: 13px; }
.caja:nth-child(3) { border-top-right-radius: 13px; }
.caja:nth-child(7) { border-bottom-left-radius: 13px; }
.caja:nth-child(9) { border-bottom-right-radius: 13px; }
.celda {
  background: var(--cell); display: grid; place-items: center; position: relative; aspect-ratio: 1;
  font-family: 'Fredoka', ui-rounded, sans-serif; font-size: clamp(20px, 6.6vw, 31px); font-weight: 500; color: var(--user);
  transition: background-color 0.12s;
}
.celda.dada { color: var(--given); font-weight: 600; }
.celda.pista { color: var(--pista); }
.celda.rel { background: var(--cell-rel); }
.celda.igual { background: var(--cell-same); }
.celda.sel { background: var(--cell-sel); }
.celda.mal { color: var(--err); background: var(--err-bg); }
.celda.sel.mal { background: color-mix(in srgb, var(--err-bg) 60%, var(--cell-sel)); }
.celda.brilla { animation: brillo 0.7s ease; }
.celda.pop { animation: popcito 0.25s ease; }
@keyframes brillo { 0% { background: var(--cell); } 40% { background: #ffe58f; } 100% { } }
@keyframes popcito { 50% { transform: scale(1.18); } }
.notas { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; height: 100%; padding: 1px 2px; }
.notas i {
  font-style: normal; font-size: clamp(9px, 2.5vw, 12px); font-weight: 600; color: var(--ink-soft);
  display: grid; place-items: center; line-height: 1; font-family: 'Nunito', sans-serif;
}
.notas i.igual { color: #452632; background: var(--pink); border-radius: 4px; }

.herramientas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.herr {
  display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 0.78rem; font-weight: 800;
  color: var(--ink-soft); padding: 6px 0; border-radius: 14px; position: relative;
}
.herr svg { width: 26px; height: 26px; }
.herr:active { background: var(--bg2); }
.herr.on { color: var(--ink); background: color-mix(in srgb, var(--pink) 16%, transparent); }
.herr .badge {
  position: absolute; top: 0; right: 18%; background: var(--pink); color: #fff; font-size: 0.68rem; min-width: 18px;
  height: 18px; border-radius: 9px; display: grid; place-items: center; padding: 0 4px;
}
.teclado { display: grid; grid-template-columns: repeat(9, 1fr); gap: 5px; }
.tecla {
  height: 62px; border-radius: 14px; background: var(--card); box-shadow: 0 3px 0 var(--line);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: 'Fredoka', sans-serif; font-size: 1.7rem; font-weight: 500; color: var(--user);
}
.tecla small { font-family: 'Nunito', sans-serif; font-size: 0.68rem; font-weight: 800; color: var(--ink-soft); margin-top: -3px; }
.tecla:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--line); }
.tecla.lista { opacity: 0.5; }
.notas-on .tecla { color: var(--ink-soft); font-size: 1.25rem; }

/* ---------- Memorice ---------- */
.memo { display: grid; gap: 8px; width: 100%; perspective: 900px; }
.carta { aspect-ratio: 1; position: relative; transform-style: preserve-3d; transition: transform 0.45s cubic-bezier(0.3, 1.4, 0.5, 1); }
.carta.vuelta, .carta.par { transform: rotateY(180deg); }
.carta > div { position: absolute; inset: 0; border-radius: 14px; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; box-shadow: var(--shadow-s); }
.carta .dorso { background: linear-gradient(135deg, #ffc2d1, #ffd9b8); display: grid; place-items: center; }
.carta .dorso svg { width: 42%; height: 42%; color: rgba(255, 255, 255, 0.85); }
.carta .frente { transform: rotateY(180deg); background: var(--card); }
.carta .frente img { width: 100%; height: 100%; object-fit: cover; }
.carta.par .frente { box-shadow: 0 0 0 3px var(--mint), var(--shadow-s); }
.carta.par .frente::after { content: '💛'; position: absolute; right: 4px; bottom: 2px; font-size: 1rem; }
:root[data-theme='dark'] .carta .dorso { background: linear-gradient(135deg, #7a4f6e, #8a5f56); }
.opciones-memo { display: grid; gap: 10px; }
.menu-memorice .hero { align-items: center; gap: 12px; min-height: 122px; }
.menu-memorice .hero .gato { width: 104px; height: 104px; margin: 0; }
.menu-memorice .hero .burbuja { margin: 0; }
.menu-memorice .hero .burbuja::after { bottom: 50%; }
.opcion-memo { display: flex; align-items: center; gap: 14px; min-height: 88px; padding: 16px; text-align: left; border: 2px solid transparent; }
.opcion-memo > div { flex: 1; min-width: 0; }
.opcion-memo > svg { width: 24px; height: 24px; flex: none; color: var(--ink-soft); }
.cantidad-memo { width: 44px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--bg2); color: var(--ink); font-family: 'Fredoka', sans-serif; font-size: 1.5rem; }
.opcion-memo:active { transform: translateY(2px); }
.opcion-memo:focus-visible { outline: 3px solid var(--pink-d); outline-offset: 3px; }
.opcion-memo b { font-family: 'Fredoka', sans-serif; font-size: 1.2rem; font-weight: 600; }
.opcion-memo span:not(.cantidad-memo) { display: block; color: var(--ink-soft); font-size: .9rem; }
.opcion-memo small { color: var(--ink-soft); font-weight: 700; display: block; }

/* ---------- Álbum ---------- */
.filtros { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.filtro { padding: 8px 16px; border-radius: 99px; background: var(--card); box-shadow: var(--shadow-s); font-weight: 800; white-space: nowrap; }
.filtro.on { background: var(--pink); color: #452632; }
.galeria { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.foto { aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: var(--bg2); position: relative; box-shadow: var(--shadow-s); }
.foto img { width: 100%; height: 100%; object-fit: cover; }
.foto.bloq { display: grid; place-items: center; color: var(--ink-soft); }
.foto.bloq svg { width: 36%; opacity: 0.35; }
.foto .nueva { position: absolute; top: 6px; left: 6px; background: var(--pink); color: #452632; font-size: 0.68rem; font-weight: 800; padding: 2px 7px; border-radius: 99px; }
.visor { position: fixed; inset: 0; z-index: 60; background: #171219; color: #fff; display: flex; flex-direction: column; gap: 12px; padding: max(12px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); animation: aparecer 0.2s ease; }
.visor-barra { display: flex; gap: 12px; align-items: center; width: 100%; max-width: 1080px; margin: 0 auto; }
.visor-barra h2 { font-size: 1.1rem; flex: 1; min-width: 0; }
.visor-imagen { flex: 1; min-height: 0; min-width: 0; overflow: auto; overscroll-behavior: contain; touch-action: pan-x pan-y; cursor: zoom-in; }
.visor-imagen.ampliada { cursor: zoom-out; }
.visor-lienzo { width: 100%; height: 100%; display: grid; place-items: center; }
.visor-imagen .visor-lienzo > img, .visor-imagen .visor-lienzo > svg { display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: contain; border-radius: 12px; }
.sticker-secreto { font-size: 2.5rem; line-height: 1; }
.visor-descripcion { text-align: center; margin: 0; max-height: 20dvh; overflow: auto; flex: none; }
.visor-descripcion small { display: block; margin-top: 4px; color: #ddd0da; }
.premio-sticker { width: 100%; text-align: left; }
.premio-sticker:focus-visible { outline: 3px solid var(--pink-d); outline-offset: 2px; }
.visor .pie-visor { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; }
.visor button { color: #fff; width: 44px; height: 44px; flex: none; border-radius: 50%; background: #ffffff20; display: grid; place-items: center; }
.visor svg { width: 22px; height: 22px; flex: none; }
.visor a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 16px; border-radius: 14px; background: #ffd1df; color: #452632; font-weight: 800; text-decoration: none; }
.visor a[aria-disabled='true'] { opacity: .5; pointer-events: none; }
.visor button:focus-visible, .visor a:focus-visible { outline: 3px solid #ffd1df; outline-offset: 3px; }
.visor-estado { text-align: center; font-size: .85rem; margin: 0; color: #ddd0da; }
.visor [hidden] { display: none; }
.visor .visor-reintentar { width: auto; border-radius: 12px; padding: 8px 16px; align-self: center; }
.continuar-sudoku { margin-bottom: 12px; }
.copias { flex-wrap: wrap; gap: 10px; }
.copias .btn { flex: 1 1 180px; }
.premio-foto { cursor: pointer; border: 2px solid transparent; }
.premio-foto:hover, .premio-foto:focus-visible { border-color: var(--pink-d); outline: none; }
.premio-foto .foto-accion { display: block; margin-top: 4px; color: var(--ink); font-size: .8rem; font-weight: 700; }
.celda.sel .notas i { color: var(--ink); }
.modo-notas { padding: 3px 8px; border-radius: 8px; background: var(--bg2); color: var(--ink); font-size: .8rem; font-weight: 800; }
.modo-notas[hidden] { display: none; }
.herramientas.sin-pistas { grid-template-columns: repeat(3, 1fr); }
.herramientas .herr.on { color: var(--ink); }

/* ---------- Stickers ---------- */
.stickers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 8px; }
.sticker { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: 0.8rem; font-weight: 800; line-height: 1.15; }
.sticker .disco {
  width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; background: var(--c, #ffd6e2);
  border: 5px solid #fff; box-shadow: var(--shadow); overflow: hidden; transform: rotate(var(--g, -4deg));
}
.sticker .disco .gato { width: 92%; height: 92%; }
.sticker.bloq .disco { background: var(--bg2); border-color: var(--card); }
.sticker.bloq .disco .gato { filter: grayscale(1) brightness(0.55) opacity(0.35); }
.sticker.bloq { color: var(--ink-soft); }
:root[data-theme='dark'] .sticker .disco { border-color: #f7ebe6; }

/* ---------- Ajustes ---------- */
.ajustes-lista { display: flex; flex-direction: column; padding: 4px 16px; }
.fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); font-weight: 700; }
.fila:last-child { border-bottom: 0; }
.fila small { display: block; color: var(--ink-soft); font-weight: 600; font-size: 0.82rem; }
.interruptor { width: 52px; height: 32px; border-radius: 99px; background: var(--line); position: relative; flex: none; transition: background 0.2s; }
.interruptor::after { content: ''; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-s); transition: transform 0.2s; }
.interruptor.on { background: var(--mint); }
.interruptor.on::after { transform: translateX(20px); }
.segmentos { display: flex; background: var(--bg2); border-radius: 12px; padding: 3px; }
.segmentos button { padding: 6px 10px; border-radius: 9px; font-weight: 800; font-size: 0.85rem; color: var(--ink-soft); }
.segmentos button.on { background: var(--card); color: var(--ink); box-shadow: var(--shadow-s); }

/* ---------- Check-in ---------- */
.checkin .cabecera { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.checkin .cabecera .gato { width: 150px; height: 150px; }
.checkin h1 { font-size: 1.8rem; }
.pregunta h3 { font-size: 1.1rem; margin-bottom: 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 10px 14px; border-radius: 99px; background: var(--bg2); font-weight: 800; border: 2px solid transparent; }
.chip.on { background: color-mix(in srgb, var(--pink) 22%, var(--card)); border-color: var(--pink); color: var(--pink-d); }
:root[data-theme='dark'] .chip.on { color: #ffd0dd; }
.campo { width: 100%; height: 50px; border-radius: 14px; border: 2px solid var(--line); background: var(--cell); padding: 0 14px; font-weight: 700; margin-bottom: 10px; }
.campo:focus { outline: none; border-color: var(--pink); }
.nota-suave { color: var(--ink-soft); font-size: 0.88rem; text-align: center; font-weight: 600; }

/* ---------- Regalo ---------- */
.regalo { justify-content: safe center; align-items: center; text-align: center; gap: 18px; overflow-anchor: none; }
.checkin { justify-content: safe center; }
.regalo h1 { font-size: 2rem; }
.regalo .titulo-regalo { font-size: clamp(1.5rem, 6.5vw, 2rem); text-wrap: balance; }
.regalo .caja-regalo { width: min(64vw, 240px); position: relative; cursor: pointer; flex: none; animation: menear 2.4s ease-in-out infinite; }
.regalo .caja-regalo::before { width: 110%; }
.caja-regalo svg { width: 100%; overflow: visible; }
.caja-regalo .tapa { transform-box: fill-box; transform-origin: center bottom; }
.regalo .caja-regalo.abierta { animation: none; margin-top: calc(min(64vw, 240px) * 0.5); transition: margin-top 0.5s ease; }
.caja-regalo.abierta .tapa { animation: volarTapa 0.8s cubic-bezier(0.3, 0.6, 0.4, 1) forwards; }
.caja-regalo .sale { position: absolute; left: 50%; bottom: 30%; width: 82%; transform: translate(-50%, 30%) scale(0.2); opacity: 0; z-index: -1; }
.caja-regalo.abierta .sale { animation: salir 0.9s 0.25s cubic-bezier(0.3, 1.5, 0.5, 1) forwards; }
@keyframes menear { 0%, 100% { transform: rotate(0); } 8% { transform: rotate(-5deg); } 16% { transform: rotate(5deg); } 24% { transform: rotate(-3deg); } 32% { transform: rotate(0); } }
@keyframes volarTapa { to { transform: translateY(-110px) rotate(18deg); opacity: 0; } }
@keyframes salir { to { transform: translate(-50%, -38%) scale(1); opacity: 1; } }
.regalo.revelado { justify-content: flex-start; gap: 12px; }
.regalo.revelado .caja-regalo { width: 140px; height: 140px; margin-top: 0; cursor: default; }
.regalo.revelado .caja-regalo > svg { display: none; }
.regalo.revelado .caja-regalo::before, .regalo.revelado .caja-regalo::after { display: none; }
.regalo.revelado .sale { position: static; width: 100%; height: 100%; opacity: 1; transform: none; animation: none; }
.caja-regalo .sale .gato { display: block; width: 100%; height: 100%; }
.contenido-regalo { width: 100%; min-width: 0; }
.contenido-regalo:empty { display: none; }
.carta-regalo { text-align: left; animation: entrar 0.5s ease both; display: flex; flex-direction: column; gap: 10px; }
.carta-regalo p { margin: 0; }
.carta-regalo .firma { font-family: 'Fredoka', sans-serif; font-weight: 600; color: var(--pink-d); text-align: right; }
.carta-regalo .foto-regalo { border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-s); transform: rotate(-2deg); border: 6px solid #fff; }

/* ---------- Superposiciones ---------- */
.capa { position: fixed; inset: 0; z-index: 50; background: rgba(60, 30, 40, 0.38); display: flex; align-items: center; justify-content: center; padding: 16px; animation: aparecer 0.2s ease; }
.capa .tarjeta { width: 100%; max-width: 420px; max-height: 92dvh; overflow: auto; animation: subir 0.35s cubic-bezier(0.3, 1.4, 0.5, 1); }
.modal { display: flex; flex-direction: column; gap: 12px; text-align: center; align-items: center; }
.modal .gato { width: 140px; height: 140px; }
.modal h2 { font-size: 1.5rem; }
.modal p { margin: 0; color: var(--ink-soft); font-weight: 600; }
.modal .botones { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: 4px; }
@keyframes aparecer { from { opacity: 0; } }
@keyframes subir { from { transform: translateY(30px) scale(0.96); opacity: 0; } }

.festejo .gato { width: 170px; height: 170px; animation: saltar 0.9s ease-in-out infinite; }
.festejo .datos { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.festejo .dato { background: var(--bg2); border-radius: 12px; padding: 6px 12px; font-weight: 800; font-size: 0.88rem; }
.premio { display: flex; align-items: center; gap: 12px; background: var(--bg2); border-radius: 16px; padding: 10px; width: 100%; text-align: left; font-weight: 800; }
.premio img { width: 64px; height: 64px; border-radius: 12px; object-fit: cover; flex: none; }
.premio .disco { width: 64px; height: 64px; border-radius: 50%; background: var(--c, #ffd6e2); border: 4px solid #fff; display: grid; place-items: center; overflow: hidden; flex: none; }
.premio .disco .gato { width: 94%; height: 94%; animation: none; }
.premio small { display: block; color: var(--ink-soft); font-weight: 700; }
@keyframes saltar { 0%, 100% { transform: translateY(0) scale(1, 1); } 30% { transform: translateY(-16px) scale(0.98, 1.03); } 55% { transform: translateY(0) scale(1.04, 0.96); } }
@keyframes saltito { 40% { transform: translateY(-8px) rotate(-6deg); } }

.aviso {
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); transform: translateX(-50%);
  z-index: 70; width: min(92vw, 440px); display: flex; align-items: center; gap: 8px;
  background: var(--card); border-radius: 20px; box-shadow: 0 10px 30px rgba(120, 60, 60, 0.25); padding: 8px 14px 8px 6px;
  animation: avisoEntra 0.4s cubic-bezier(0.3, 1.4, 0.5, 1); font-weight: 700;
}
.aviso .gato { width: 58px; height: 58px; flex: none; }
.aviso.sale { animation: avisoSale 0.3s ease forwards; }
@keyframes avisoEntra { from { transform: translate(-50%, 120%); } }
@keyframes avisoSale { to { transform: translate(-50%, 140%); opacity: 0; } }

.cargando { flex: 1; display: grid; place-items: center; text-align: center; color: var(--ink-soft); font-weight: 800; }
.cargando .huellas { display: flex; gap: 10px; justify-content: center; margin-bottom: 10px; }
.cargando .huellas svg { width: 26px; color: var(--orange); animation: pisar 1.2s infinite; opacity: 0.2; }
.cargando .huellas svg:nth-child(2) { animation-delay: 0.2s; }
.cargando .huellas svg:nth-child(3) { animation-delay: 0.4s; }
@keyframes pisar { 30% { opacity: 1; transform: translateY(-4px); } 60% { opacity: 0.2; } }

.confeti { position: fixed; inset: 0; width: 100%; height: 100%; height: 100dvh; pointer-events: none; z-index: 80; }

/* ---------- Animaciones del gato ---------- */
.gato { overflow: visible; }
.gato .ojo { transform-box: fill-box; transform-origin: center; animation: parpadeo 5s infinite; }
.gato .cola { transform-box: fill-box; transform-origin: 0% 100%; animation: cola 3.2s ease-in-out infinite; }
.gato .acc.flota { animation: flotar 2.6s ease-in-out infinite; }
.gato.vivo .cabeza-wrap { transform-box: fill-box; transform-origin: 50% 90%; animation: cabecear 4s ease-in-out infinite; }
.pose-cheer .brazos { transform-box: fill-box; transform-origin: 50% 100%; animation: saludar 0.9s ease-in-out infinite; }
@keyframes parpadeo { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.1); } }
@keyframes cola { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-9deg); } }
@keyframes flotar { 50% { transform: translateY(-6px); } }
@keyframes cabecear { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-3deg); } 60% { transform: rotate(2deg); } }
@keyframes saludar { 50% { transform: scaleY(0.94) translateY(4px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
@media (max-width: 360px) {
  .tecla { height: 54px; font-size: 1.45rem; }
  .hero .gato { width: 120px; height: 120px; }
}
@media (min-width: 700px) {
  #app { padding-top: 28px; }
}