/* Harudoku — capa visual. Se carga después de app.css y solo cambia la estética:
 * fondo, profundidad, color, tipografía, tarjetas y microanimaciones. */

:root {
  --bg: #fff4ee;
  --ink: #4a3038;
  --ink-soft: #8a6b73;
  --line: #f3dcd4;
  --card: #ffffff;
  --card-borde: rgba(255, 255, 255, 0.95);
  --sombra-color: 173, 92, 92;
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 12px 28px -14px rgba(var(--sombra-color), 0.34), 0 2px 6px rgba(var(--sombra-color), 0.07);
  --shadow-s: 0 6px 14px -8px rgba(var(--sombra-color), 0.32), 0 1px 3px rgba(var(--sombra-color), 0.08);
  --dulce: linear-gradient(180deg, #ffadc2 0%, #ff86a6 100%);
  --dulce-borde: #e2668c;
  --dulce-texto: #4a1a2c;
  --halo: radial-gradient(circle at 50% 55%, rgba(255, 214, 226, 0.95) 0 52%, rgba(255, 214, 226, 0) 53%);
  --board: #e3b3ac;
  --cell: #fffdfb;
  --cell-rel: #fff0e9;
  --cell-same: #ffdccc;
  --cell-sel: #ffc6ad;
  --given: #4a3038;
  --r: 22px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #18121f; --ink: #f8eaf0; --ink-soft: #c4aebb; --line: #3e3049; --card: #271f31; --card-borde: rgba(255, 255, 255, 0.06);
    --sombra-color: 0, 0, 0;
    --shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 14px 30px -14px rgba(0, 0, 0, 0.7), 0 2px 6px rgba(0, 0, 0, 0.25);
    --shadow-s: 0 6px 14px -8px rgba(0, 0, 0, 0.6);
    --halo: radial-gradient(circle at 50% 55%, rgba(132, 86, 160, 0.55) 0 52%, rgba(132, 86, 160, 0) 53%);
    --board: #6b4f7c; --cell: #241c2d; --cell-rel: #2f2539; --cell-same: #47344f; --cell-sel: #6b4672; --given: #f8eaf0;
  }
}
:root[data-theme='dark'] {
  --bg: #18121f; --ink: #f8eaf0; --ink-soft: #c4aebb; --line: #3e3049; --card: #271f31; --card-borde: rgba(255, 255, 255, 0.06);
  --sombra-color: 0, 0, 0;
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 14px 30px -14px rgba(0, 0, 0, 0.7), 0 2px 6px rgba(0, 0, 0, 0.25);
  --shadow-s: 0 6px 14px -8px rgba(0, 0, 0, 0.6);
  --halo: radial-gradient(circle at 50% 55%, rgba(132, 86, 160, 0.55) 0 52%, rgba(132, 86, 160, 0) 53%);
  --board: #6b4f7c; --cell: #241c2d; --cell-rel: #2f2539; --cell-same: #47344f; --cell-sel: #6b4672; --given: #f8eaf0;
}

/* ---------- Fondo: cielo pastel con manchas de color y huellitas ---------- */
body { background: var(--bg); }
body::before, body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -1; }
body::before {
  background:
    radial-gradient(60vmax 45vmax at -10% -8%, #ffd6e2 0%, rgba(255, 214, 226, 0) 62%),
    radial-gradient(55vmax 40vmax at 112% 4%, #e9ddff 0%, rgba(233, 221, 255, 0) 60%),
    radial-gradient(60vmax 50vmax at 50% 118%, #d9f3ea 0%, rgba(217, 243, 234, 0) 62%),
    radial-gradient(40vmax 30vmax at 95% 70%, #ffe7c9 0%, rgba(255, 231, 201, 0) 60%);
}
body::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='%23e0889a' fill-opacity='0.08'%3E%3Cg transform='translate(24 26) 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(98 96) rotate(22)'%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");
}
:root[data-theme='dark'] body::before {
  background:
    radial-gradient(60vmax 45vmax at -10% -8%, #3b2150 0%, rgba(59, 33, 80, 0) 62%),
    radial-gradient(55vmax 40vmax at 112% 4%, #2a2a52 0%, rgba(42, 42, 82, 0) 60%),
    radial-gradient(60vmax 50vmax at 50% 118%, #1c3442 0%, rgba(28, 52, 66, 0) 62%);
}
:root[data-theme='dark'] body::after {
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, rgba(255, 255, 255, 0.55) 50%, transparent 51%),
    radial-gradient(1px 1px at 72% 12%, rgba(255, 255, 255, 0.45) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 86% 44%, rgba(255, 236, 200, 0.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 32% 64%, rgba(255, 255, 255, 0.35) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 58% 86%, rgba(255, 255, 255, 0.4) 50%, transparent 51%);
  background-size: 320px 320px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) body::before {
    background:
      radial-gradient(60vmax 45vmax at -10% -8%, #3b2150 0%, rgba(59, 33, 80, 0) 62%),
      radial-gradient(55vmax 40vmax at 112% 4%, #2a2a52 0%, rgba(42, 42, 82, 0) 60%),
      radial-gradient(60vmax 50vmax at 50% 118%, #1c3442 0%, rgba(28, 52, 66, 0) 62%);
  }
  :root:not([data-theme='light']) body::after {
    background-image:
      radial-gradient(1.2px 1.2px at 12% 18%, rgba(255, 255, 255, 0.55) 50%, transparent 51%),
      radial-gradient(1px 1px at 72% 12%, rgba(255, 255, 255, 0.45) 50%, transparent 51%),
      radial-gradient(1.4px 1.4px at 86% 44%, rgba(255, 236, 200, 0.5) 50%, transparent 51%),
      radial-gradient(1px 1px at 32% 64%, rgba(255, 255, 255, 0.35) 50%, transparent 51%);
    background-size: 320px 320px;
  }
}

/* ---------- Tipografía ---------- */
h1, h2, h3, .fredoka { letter-spacing: 0.2px; }
.pantalla > * { animation: aparecerSuave 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.1) both; }
.pantalla > *:nth-child(2) { animation-delay: 0.04s; }
.pantalla > *:nth-child(3) { animation-delay: 0.08s; }
.pantalla > *:nth-child(4) { animation-delay: 0.12s; }
.pantalla > *:nth-child(5) { animation-delay: 0.16s; }
.pantalla > *:nth-child(n + 6) { animation-delay: 0.2s; }
@keyframes aparecerSuave { from { opacity: 0; transform: translateY(10px) scale(0.985); } }

/* ---------- Superficies ---------- */
.tarjeta { background: var(--card); border: 1px solid var(--card-borde); border-radius: var(--r); box-shadow: var(--shadow); }
.icono-btn, .chip-tiempo {
  background: color-mix(in srgb, var(--card) 82%, transparent);
  border: 1px solid var(--card-borde);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.icono-btn { border-radius: 15px; transition: transform 0.12s ease; }
.chip-tiempo { height: 38px; }

/* ---------- Botones de caramelo ---------- */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--dulce); color: var(--dulce-texto); border: 0;
  box-shadow: 0 4px 0 var(--dulce-borde), 0 12px 22px -10px rgba(226, 102, 140, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.6);
  letter-spacing: 0.2px; transition: transform 0.1s ease, box-shadow 0.1s ease, filter 0.2s;
}
.btn::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 55%; border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0)); z-index: -1;
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--dulce-borde), 0 6px 12px -8px rgba(226, 102, 140, 0.7); }
.btn.sec { background: var(--card); color: var(--ink); box-shadow: 0 4px 0 var(--line), var(--shadow-s); border: 1px solid var(--card-borde); }
.btn.sec::before, .btn.suave::before { display: none; }
.btn.suave { background: color-mix(in srgb, var(--card) 60%, transparent); border: 1px dashed var(--line); }
.link { text-decoration-color: color-mix(in srgb, var(--ink-soft) 50%, transparent); }

/* ---------- Encabezado y logo ---------- */
.logo { gap: 10px; }
.logo .huellita {
  width: 36px; height: 36px; padding: 7px; border-radius: 12px; color: #fff; flex: none;
  background: linear-gradient(140deg, #ffbf85, #ff86a6); transform: rotate(-8deg);
  box-shadow: 0 6px 14px -6px rgba(226, 102, 140, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.logo h1 { font-weight: 700; font-size: 1.75rem; color: var(--ink); }
.logo h1 span {
  background: linear-gradient(90deg, #ff6f98, #ff9b6a); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- Saludo de Haru ---------- */
.hero {
  position: relative; align-items: flex-end; gap: 8px; padding: 14px 14px 0 6px; min-height: 160px;
  border-radius: 28px; overflow: hidden;
  background: linear-gradient(135deg, #ffe4d6 0%, #ffd5e3 55%, #eadcff 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 14px 30px -18px rgba(226, 102, 140, 0.55);
}
.hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 18% 30%, rgba(255, 255, 255, 0.85) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 62% 12%, rgba(255, 255, 255, 0.9) 0 2px, transparent 3px),
    radial-gradient(circle at 92% 78%, rgba(255, 255, 255, 0.7) 0 1.5px, transparent 2.5px),
    radial-gradient(120px 90px at 22% 100%, rgba(255, 255, 255, 0.55), transparent 70%);
}
.hero .gato { width: 150px; height: 150px; margin: 0 0 -6px -6px; position: relative; filter: drop-shadow(0 10px 12px rgba(120, 50, 60, 0.22)); }
.hero .burbuja { margin-bottom: 64px; border: 1px solid rgba(255, 255, 255, 0.9); box-shadow: 0 10px 22px -12px rgba(173, 92, 92, 0.45); position: relative; }
.burbuja { font-family: 'Fredoka', 'Nunito', sans-serif; font-weight: 600; font-size: 1.05rem; }
.burbuja small { font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 0.86rem; }
:root[data-theme='dark'] .hero { background: linear-gradient(135deg, #3a2448 0%, #2f2347 55%, #223049 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 14px 30px -18px rgba(0, 0, 0, 0.8); }
:root[data-theme='dark'] .hero .burbuja { border-color: rgba(255, 255, 255, 0.06); }

/* ---------- Niveles del sudoku ---------- */
.seccion-titulo h2 { font-size: 1.4rem; }
.niveles { gap: 12px; }
.nivel {
  min-height: 98px; padding: 14px 14px 12px; border-radius: 20px; overflow: hidden; isolation: isolate;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 10px 18px -12px var(--tono, rgba(0, 0, 0, 0.3));
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.nivel::after {
  content: ''; position: absolute; right: -10px; bottom: -14px; width: 74px; height: 74px; z-index: -1; opacity: 0.5;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='%23ffffff'%3E%3Cellipse cx='20' cy='27' rx='10' ry='8.5'/%3E%3Cellipse cx='8' cy='16' rx='4.2' ry='5.2'/%3E%3Cellipse cx='16' cy='9' rx='4.2' ry='5.4'/%3E%3Cellipse cx='25' cy='9' rx='4.2' ry='5.4'/%3E%3Cellipse cx='33' cy='16' rx='4.2' ry='5.2'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  transform: rotate(-18deg);
}
.nivel:active { transform: translateY(2px) scale(0.98); }
.nivel b { font-size: 1.3rem; }
.nivel > span:not(.pts):not(.continuar) {
  align-self: flex-start; opacity: 1; font-size: 0.8rem; padding: 2px 9px; border-radius: 99px;
  background: rgba(255, 255, 255, 0.6); margin-top: 2px;
}
.nivel .pts { margin-top: 8px; }
.nivel .pts i { width: 9px; height: 9px; }
.nivel .continuar { background: #fff; box-shadow: 0 4px 10px -4px var(--tono); color: inherit; }
.nivel-facil { background: linear-gradient(150deg, #dcf8ec, #b4ead3); color: #1f5a47; --tono: rgba(44, 150, 112, 0.55); }
.nivel-medio { background: linear-gradient(150deg, #e0f0ff, #b9d8ff); color: #22487a; --tono: rgba(64, 120, 200, 0.55); }
.nivel-dificil { background: linear-gradient(150deg, #efe7ff, #d3c3ff); color: #48378a; --tono: rgba(112, 86, 200, 0.55); }
.nivel-experto { background: linear-gradient(150deg, #ffe5ec, #ffc2d3); color: #87294b; --tono: rgba(214, 80, 124, 0.55); }
:root[data-theme='dark'] .nivel { filter: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 10px 18px -12px rgba(0, 0, 0, 0.8); }
:root[data-theme='dark'] .nivel::after { opacity: 0.08; }
:root[data-theme='dark'] .nivel > span:not(.pts):not(.continuar) { background: rgba(255, 255, 255, 0.1); }
:root[data-theme='dark'] .nivel .continuar { background: rgba(255, 255, 255, 0.16); }
:root[data-theme='dark'] .nivel-facil { background: linear-gradient(150deg, #24564a, #1a3f37); color: #c2f3de; }
:root[data-theme='dark'] .nivel-medio { background: linear-gradient(150deg, #254769, #1b3450); color: #d2e6ff; }
:root[data-theme='dark'] .nivel-dificil { background: linear-gradient(150deg, #3f3470, #2e2554); color: #e3daff; }
:root[data-theme='dark'] .nivel-experto { background: linear-gradient(150deg, #64304a, #4a2236); color: #ffd7e4; }

/* ---------- Accesos (memorice, álbum, stickers) ---------- */
.accesos { gap: 12px; }
.acceso {
  position: relative; overflow: hidden; isolation: isolate; border: 1px solid var(--card-borde);
  padding: 12px 6px 12px; border-radius: 20px; font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 1rem;
  transition: transform 0.12s ease;
}
.acceso::before { content: ''; position: absolute; inset: 0 0 45% 0; z-index: -1; background: var(--tinte, #ffe7dc); border-radius: 20px 20px 50% 50% / 20px 20px 22px 22px; }
.acceso:nth-child(1) { --tinte: linear-gradient(180deg, #ffe0cf, #fff0e8); }
.acceso:nth-child(2) { --tinte: linear-gradient(180deg, #d9ecff, #eef6ff); }
.acceso:nth-child(3) { --tinte: linear-gradient(180deg, #ebe0ff, #f5f0ff); }
.acceso .gato { width: 76px; height: 76px; filter: drop-shadow(0 6px 6px rgba(120, 50, 60, 0.2)); transition: transform 0.2s ease; }
.acceso:active { transform: scale(0.96); }
.acceso:active .gato { transform: rotate(-6deg) scale(1.06); }
.acceso small { font-family: 'Nunito', sans-serif; }
:root[data-theme='dark'] .acceso:nth-child(1) { --tinte: linear-gradient(180deg, #4a3036, #2b2230); }
:root[data-theme='dark'] .acceso:nth-child(2) { --tinte: linear-gradient(180deg, #273a55, #232236); }
:root[data-theme='dark'] .acceso:nth-child(3) { --tinte: linear-gradient(180deg, #392e58, #26203a); }
.pie { opacity: 0.85; font-weight: 700; }

/* ---------- Check-in ---------- */
.modal .gato { background: var(--halo); border-radius: 50%; }
.checkin .cabecera .gato { filter: drop-shadow(0 10px 12px rgba(120, 50, 60, 0.22)); }
.checkin h1 { font-size: 2rem; font-weight: 700; }
.pregunta h3 { display: flex; align-items: center; gap: 8px; }
.chip {
  background: var(--cell); border: 1.5px solid var(--line); box-shadow: 0 2px 0 var(--line);
  transition: transform 0.1s ease, background 0.15s ease, border-color 0.15s ease;
}
.chip:active { transform: translateY(1px); box-shadow: none; }
.chip.on {
  background: var(--dulce); border-color: var(--dulce-borde); color: var(--dulce-texto);
  box-shadow: 0 3px 0 var(--dulce-borde), 0 8px 14px -8px rgba(226, 102, 140, 0.7);
}
:root[data-theme='dark'] .chip.on { color: var(--dulce-texto); }
.campo { background: var(--cell); border-radius: 16px; border-width: 1.5px; transition: border-color 0.15s, box-shadow 0.15s; }
.campo:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--pink) 25%, transparent); }

/* ---------- Sudoku ---------- */
.tablero, .caja { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tablero {
  padding: 4px; gap: 3px; border-radius: 20px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--board) 85%, #fff), var(--board));
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 18px 32px -18px rgba(var(--sombra-color), 0.55), 0 3px 8px rgba(var(--sombra-color), 0.1);
}
.caja { background: color-mix(in srgb, var(--board) 38%, var(--cell)); }
.caja:nth-child(1) { border-top-left-radius: 16px; }
.caja:nth-child(3) { border-top-right-radius: 16px; }
.caja:nth-child(7) { border-bottom-left-radius: 16px; }
.caja:nth-child(9) { border-bottom-right-radius: 16px; }
.celda { min-width: 0; }
.celda.sel { box-shadow: inset 0 0 0 2.5px color-mix(in srgb, var(--pink-d) 75%, transparent); }
.celda.igual { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pink) 30%, transparent); }
.celda.brilla { animation: brilloSuave 0.8s ease; }
@keyframes brilloSuave { 0% { background: var(--cell); } 35% { background: #fff1b8; box-shadow: inset 0 0 0 2px #ffd25e; } 100% { } }
:root[data-theme='dark'] .celda.brilla { animation-name: brilloNoche; }
@keyframes brilloNoche { 35% { background: #5b4a2a; box-shadow: inset 0 0 0 2px #ffd25e; } }

.estado-juego span[data-reloj] {
  font-variant-numeric: tabular-nums; padding: 4px 10px; border-radius: 99px;
  background: color-mix(in srgb, var(--card) 70%, transparent); border: 1px solid var(--card-borde);
}
.estado-juego span[data-reloj]:empty { display: none; }
.estado-juego .gatito { width: 58px; height: 58px; }

.herramientas { gap: 6px; }
.herr { gap: 5px; padding: 2px 0; background: none; }
.herr svg {
  width: 46px; height: 46px; padding: 11px; border-radius: 16px; box-sizing: border-box;
  background: var(--card); border: 1px solid var(--card-borde); box-shadow: var(--shadow-s); color: var(--ink);
  transition: transform 0.1s ease, background 0.15s;
}
.herr:active { background: none; }
.herr:active svg { transform: scale(0.92); }
.herr.on { background: none; color: var(--pink-d); }
.herr.on svg { background: var(--dulce); color: var(--dulce-texto); box-shadow: 0 6px 14px -6px rgba(226, 102, 140, 0.8); border-color: transparent; }
.herr .badge { top: -4px; right: calc(50% - 30px); box-shadow: 0 2px 6px rgba(226, 102, 140, 0.5); }

.teclado { gap: 6px; }
.tecla {
  height: 64px; border-radius: 16px; position: relative;
  background: linear-gradient(180deg, var(--card), color-mix(in srgb, var(--card) 88%, var(--line)));
  border: 1px solid var(--card-borde);
  box-shadow: 0 3px 0 var(--line), 0 8px 14px -10px rgba(var(--sombra-color), 0.5);
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.tecla:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--line); }
.tecla small { font-size: 0.66rem; opacity: 0.85; }
.notas-on .tecla { background: linear-gradient(180deg, #f3eeff, #e9e1ff); color: #5a46a6; box-shadow: 0 3px 0 #d6c9ff; }
:root[data-theme='dark'] .notas-on .tecla { background: linear-gradient(180deg, #34295a, #2a2149); color: #d8ccff; box-shadow: 0 3px 0 #201a3a; }

/* ---------- Memorice ---------- */
.memo { gap: 9px; }
.carta > div { border-radius: 16px; }
.carta .dorso {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 40 40'%3E%3Cg fill='%23ffffff' fill-opacity='0.22'%3E%3Cellipse cx='20' cy='27' rx='10' ry='8.5'/%3E%3Cellipse cx='8' cy='16' rx='4.2' ry='5.2'/%3E%3Cellipse cx='16' cy='9' rx='4.2' ry='5.4'/%3E%3Cellipse cx='25' cy='9' rx='4.2' ry='5.4'/%3E%3Cellipse cx='33' cy='16' rx='4.2' ry='5.2'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 34px 34px,
    linear-gradient(145deg, #ffb3c7, #ffcfae);
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.55), 0 8px 16px -10px rgba(226, 102, 140, 0.8);
}
.carta .dorso::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.28) 45%, transparent 60%);
}
:root[data-theme='dark'] .carta .dorso::after { opacity: 0.35; }
.carta .dorso svg { width: 40%; height: 40%; filter: drop-shadow(0 2px 3px rgba(200, 80, 110, 0.35)); }
.carta .frente { padding: 4px; background: #fff; }
.carta .frente img { border-radius: 12px; }
.carta.par .frente { box-shadow: 0 0 0 3px #8fd6c0, 0 10px 18px -10px rgba(60, 170, 130, 0.8); animation: celebrarPar 0.5s ease; }
@keyframes celebrarPar { 50% { transform: rotateY(180deg) scale(1.08); } }
:root[data-theme='dark'] .carta .dorso {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 40 40'%3E%3Cg fill='%23ffffff' fill-opacity='0.12'%3E%3Cellipse cx='20' cy='27' rx='10' ry='8.5'/%3E%3Cellipse cx='8' cy='16' rx='4.2' ry='5.2'/%3E%3Cellipse cx='16' cy='9' rx='4.2' ry='5.4'/%3E%3Cellipse cx='25' cy='9' rx='4.2' ry='5.4'/%3E%3Cellipse cx='33' cy='16' rx='4.2' ry='5.2'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 34px 34px,
    linear-gradient(145deg, #7b4774, #8c5a5b);
  box-shadow: inset 0 0 0 4px rgba(255, 255, 255, 0.1), 0 8px 16px -10px rgba(0, 0, 0, 0.8);
}
:root[data-theme='dark'] .carta .frente { background: #f3e9ec; }
.opcion-memo { border: 1px solid var(--card-borde); transition: transform 0.12s ease; }

/* ---------- Álbum: fotos tipo polaroid ---------- */
.filtros { gap: 8px; padding: 2px 2px 6px; scrollbar-width: none; }
.filtros::-webkit-scrollbar { display: none; }
.filtro { border: 1px solid var(--card-borde); background: var(--card); transition: transform 0.1s; }
.filtro.on { background: var(--dulce); color: var(--dulce-texto); box-shadow: 0 3px 0 var(--dulce-borde), 0 8px 14px -8px rgba(226, 102, 140, 0.7); }
.galeria { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 10px; padding: 4px 2px; }
.foto {
  aspect-ratio: auto; min-width: 0;
  background: #fff; padding: 5px 5px 16px; border-radius: 10px; overflow: visible;
  box-shadow: 0 10px 18px -12px rgba(var(--sombra-color), 0.6), 0 1px 3px rgba(var(--sombra-color), 0.12);
  transition: transform 0.15s ease;
}
.foto img { border-radius: 6px; aspect-ratio: 1; width: 100%; height: auto; }
.foto.bloq { aspect-ratio: 1 / 1.1; }
.foto:nth-child(3n + 1) { transform: rotate(-2deg); }
.foto:nth-child(3n + 2) { transform: rotate(1.4deg) translateY(3px); }
.foto:nth-child(3n) { transform: rotate(-0.8deg); }
.foto:active { transform: scale(1.04) rotate(0); z-index: 2; }
.foto .nueva { top: -6px; left: auto; right: -6px; transform: rotate(8deg); box-shadow: 0 4px 10px -3px rgba(226, 102, 140, 0.8); background: var(--dulce); color: var(--dulce-texto); }
.foto.bloq { background: color-mix(in srgb, var(--card) 55%, transparent); border: 2px dashed var(--line); box-shadow: none; padding: 0; }
.foto.bloq svg { opacity: 0.28; }
:root[data-theme='dark'] .foto { background: #f3e9ec; }
:root[data-theme='dark'] .foto.bloq { background: rgba(255, 255, 255, 0.03); }

/* ---------- Stickers: página de álbum de stickers ---------- */
.stickers {
  padding: 18px 10px; border-radius: 26px; gap: 16px 6px;
  background: radial-gradient(circle, color-mix(in srgb, var(--line) 85%, transparent) 1px, transparent 1.5px) 0 0 / 18px 18px, var(--card);
  border: 1px solid var(--card-borde); box-shadow: var(--shadow);
}
.sticker .disco { border-width: 4px; box-shadow: 0 10px 18px -10px rgba(var(--sombra-color), 0.6), 0 0 0 1px rgba(var(--sombra-color), 0.06); transition: transform 0.15s ease; }
.sticker:active .disco { transform: rotate(0) scale(1.06); }
.sticker.bloq .disco { background: transparent; border: 2.5px dashed var(--line); box-shadow: none; }
.sticker span { font-family: 'Fredoka', sans-serif; font-weight: 600; }

/* ---------- Ajustes ---------- */
.interruptor { background: color-mix(in srgb, var(--line) 90%, var(--ink-soft)); }
.interruptor.on { background: linear-gradient(90deg, #7fd3b9, #5cc4a5); }
.segmentos { border: 1px solid var(--card-borde); }

/* ---------- Capas: modales, festejo y avisos ---------- */
.capa { background: rgba(60, 28, 44, 0.42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.capa .tarjeta { border-radius: 30px; padding: 20px 18px; }
.modal h2 { font-size: 1.6rem; font-weight: 700; }
.modal.festejo { position: relative; isolation: isolate; }
.modal.festejo::before {
  content: ''; position: absolute; top: -40px; left: 50%; width: 300px; height: 300px; margin-left: -150px; z-index: -1;
  background: repeating-conic-gradient(from 0deg, rgba(255, 210, 94, 0.32) 0deg 9deg, rgba(255, 210, 94, 0) 9deg 22.5deg);
  -webkit-mask: radial-gradient(circle, #000 18%, transparent 68%); mask: radial-gradient(circle, #000 18%, transparent 68%);
  animation: girar 22s linear infinite;
}
@keyframes girar { to { transform: rotate(1turn); } }
.festejo .gato { background: none; filter: drop-shadow(0 12px 14px rgba(120, 50, 60, 0.28)); }
.festejo h2 {
  font-size: 1.9rem; background: linear-gradient(90deg, #ff6f98, #ff9b6a); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.festejo .dato { background: color-mix(in srgb, var(--pink) 14%, var(--card)); border: 1px solid color-mix(in srgb, var(--pink) 25%, transparent); }
.premio { border: 1px solid var(--card-borde); background: linear-gradient(90deg, color-mix(in srgb, var(--pink) 12%, var(--card)), var(--card)); box-shadow: var(--shadow-s); }
.premio img { border: 3px solid #fff; box-shadow: var(--shadow-s); transform: rotate(-3deg); }

.aviso {
  border: 1px solid var(--card-borde); border-radius: 22px; padding: 8px 16px 8px 8px;
  background: color-mix(in srgb, var(--card) 92%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 18px 36px -16px rgba(var(--sombra-color), 0.55), 0 2px 6px rgba(var(--sombra-color), 0.1);
}
.aviso .gato { background: var(--halo); border-radius: 50%; }

/* ---------- Regalo ---------- */
.regalo { position: relative; }
.regalo h1 { font-size: 2.1rem; font-weight: 700; }
.caja-regalo::before {
  content: ''; position: absolute; left: 50%; top: 50%; width: 150%; aspect-ratio: 1; transform: translate(-50%, -50%); z-index: -2;
  background: radial-gradient(circle, rgba(255, 220, 160, 0.75) 0%, rgba(255, 190, 210, 0.35) 40%, transparent 68%);
  animation: latido 2.4s ease-in-out infinite;
}
.caja-regalo::after {
  content: ''; position: absolute; left: 12%; right: 12%; bottom: -6%; height: 9%; border-radius: 50%; z-index: -1;
  background: radial-gradient(ellipse, rgba(120, 50, 60, 0.25), transparent 70%);
}
@keyframes latido { 50% { transform: translate(-50%, -50%) scale(1.08); opacity: 0.8; } }
.carta-regalo { border-radius: 28px; padding: 20px; }
.carta-regalo p { line-height: 1.55; }
.carta-regalo .firma { font-size: 1.15rem; }

/* ---------- Detalles ---------- */
:focus-visible { outline: 3px solid color-mix(in srgb, var(--pink-d) 80%, transparent); outline-offset: 2px; border-radius: 12px; }
/* Títulos y diálogos que reciben foco solo para el lector de pantalla no se marcan */
[tabindex='-1']:focus, [tabindex='-1']:focus-visible { outline: none; }
.cargando .huellas svg { color: #ff86a6; }

/* ---------- Check-in minimalista ---------- */
.checkin { gap: 0; padding-top: 8px; }
.checkin .cabecera { gap: 2px; margin-bottom: 22px; }
.checkin .cabecera .gato { width: 112px; height: 112px; }
.checkin h1 { font-size: 1.9rem; }
.checkin .cabecera p { margin: 0; font-family: 'Fredoka', sans-serif; font-weight: 500; font-size: 1.15rem; color: var(--ink-soft); }
.tiempos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tiempo {
  height: 54px; border-radius: 16px; font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 1.05rem;
  background: var(--card); border: 1.5px solid var(--line); color: var(--ink);
  transition: transform 0.1s ease, background 0.15s ease, border-color 0.15s ease;
}
.tiempo:active { transform: scale(0.96); }
.tiempo.on { background: var(--dulce); border-color: transparent; color: var(--dulce-texto); box-shadow: 0 8px 16px -10px rgba(226, 102, 140, 0.8); }
.checkin .campo-hora {
  margin: 12px auto 0; width: 170px; height: 54px; text-align: center; font-family: 'Fredoka', sans-serif; font-size: 1.5rem; font-weight: 600;
  animation: aparecerSuave 0.25s ease both;
}
.checkin .campo-hora[hidden] { display: none; }
:root[data-theme='dark'] .campo-hora { color-scheme: dark; }
.resumen-tiempo { margin: 12px 0 28px; text-align: center; font-weight: 700; font-size: 0.95rem; color: var(--ink-soft); min-height: 1.4em; }
.resumen-tiempo.error { color: var(--err); }
.checkin .etiqueta { font-family: 'Fredoka', sans-serif; font-weight: 600; font-size: 1.05rem; margin: 0 2px 8px; }
.checkin .etiqueta span { font-family: 'Nunito', sans-serif; font-size: 0.85rem; font-weight: 700; color: var(--ink-soft); }
.checkin #tarea-despues { margin: 0; background: var(--card); }
.sugerencias { display: flex; gap: 6px; margin: 10px 0 30px; flex-wrap: wrap; }
.sugerencia {
  padding: 6px 12px; border-radius: 99px; font-size: 0.86rem; font-weight: 700; color: var(--ink-soft);
  background: color-mix(in srgb, var(--card) 60%, transparent); border: 1px solid var(--line);
}
.sugerencia.on { color: var(--ink); border-color: color-mix(in srgb, var(--pink) 60%, transparent); background: color-mix(in srgb, var(--pink) 14%, var(--card)); }
.checkin .link { align-self: center; margin-top: 4px; font-size: 0.92rem; }
.checkin .btn[disabled] { opacity: 0.5; filter: saturate(0.5); }

/* ---------- Sticker compañero en el juego ---------- */
.companero { cursor: pointer; display: grid; place-items: center; -webkit-tap-highlight-color: transparent; }
.companero .disco {
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
  background: var(--c, #ffd6e2); border: 3px solid #fff; box-shadow: var(--shadow-s); transform: rotate(-6deg);
}
.companero .disco .gato { width: 100%; height: 100%; margin-top: 12%; animation: none; }
.companero.salta .disco { animation: compaSalta 0.55s ease; }
.companero.tiembla .disco { animation: compaTiembla 0.45s ease; }
.companero.cambia .disco { animation: compaCambia 0.4s cubic-bezier(0.3, 1.6, 0.5, 1); }
@keyframes compaSalta { 40% { transform: translateY(-8px) rotate(4deg); } }
@keyframes compaTiembla { 20%, 60% { transform: translateX(-3px) rotate(-10deg); } 40%, 80% { transform: translateX(3px) rotate(-2deg); } }
@keyframes compaCambia { from { transform: scale(0.5) rotate(-30deg); opacity: 0.3; } }
:root[data-theme='dark'] .companero .disco { border-color: #f7ebe6; }