/* Tamagodan — estilos (antes dentro de index.html) */
  :root {
    --c1: #00e5ff;      /* carcasa: inicio del degradado */
    --c2: #ff2bd6;      /* carcasa: fin del degradado */
    --lcd: #05080a;
    --ink: #7fe8ff;     /* color de Tamagodan */
    --ui: #e6f7ff;      /* color de los iconos y botones (claro, independiente del mod) */
  }
  * { box-sizing: border-box; }
  /* en el móvil: sin zoom por doble toque, sin selección de texto ni menú al mantener pulsado, sin flash al tocar */
  html { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
  body { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
  input, textarea { -webkit-user-select: text; user-select: text; }
  body {
    margin: 0; min-height: 100vh; color: var(--ink);
    background: radial-gradient(ellipse at 50% 25%, #1b0f33 0%, #08060f 65%, #030208 100%);
    font-family: "Courier New", monospace;
  }
  button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
  /* medidas que escalan con la pantalla: botones (--btn), iconos de esquina (--ico) y su separación (--cs) */
  :root { --btn: clamp(50px, min(13.5vw, 7.6vh), 96px); --ico: clamp(22px, min(5.6vw, 3vh), 34px); --cs: calc(var(--ico) * 1.15 + 22px); }
  .stage {
    min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: calc(var(--ico) + 40px + env(safe-area-inset-top)) 12px calc(var(--btn) + 34px + env(safe-area-inset-bottom));
  }

  /* --- barras de estado, arriba y en iconos --- */
  .stats { position: fixed; z-index: 10; top: calc(12px + env(safe-area-inset-top)); left: calc(12px + env(safe-area-inset-left)); display: flex; gap: clamp(8px, 2.4vw, 16px); width: max(124px, min(440px, calc(100vw - 4 * var(--cs) - 36px))); }   /* nunca pisa los 4 iconos de la derecha */
  .stat { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: clamp(16px, min(4.4vw, 2.6vh), 30px); line-height: 1; }
  .stat .bar { width: 100%; flex: none; }
  .bar { flex: 1; height: clamp(7px, .9vh, 11px); border-radius: 4px; background: #ffffff1c; overflow: hidden; }
  .bar > i { display: block; height: 100%; width: 50%; border-radius: 4px; transition: width .3s;
    background: var(--ui); box-shadow: 0 0 8px var(--ui); }
  .stat.low { animation: warn .8s ease-in-out infinite alternate; }
  @keyframes warn { to { opacity: .35; } }

  /* --- carcasa: proporción del boceto (1500x1240), contorno degradado y pantalla interior --- */
  /* --- cuerpos (formas de la carcasa): se eligen en ajustes; las variables --ar, --pt... las fija cada forma --- */
  :root { --ar: 1983 / 1869; --arn: 1.061; --pt: .0655; --pl: .083; --pb: .189; --ro: 41% / 44.5%; --ri: 41% / 50%; --clo: none; --cli: none; }
  body.shape-circle { --ar: 1 / 1; --arn: 1; --pt: .03; --pl: .041; --pb: .053; --ro: 50%; --ri: 50%; }
  body.shape-square { --ar: 1 / 1; --arn: 1; --pt: .042; --pl: .042; --pb: .042; --ro: 5.5%; --ri: 3%; }
  body.shape-trap { --ar: 1664 / 1481; --arn: 1.1236; --pt: .0605; --pl: .135; --pb: .1807; --ro: 0; --ri: 0;
    --clo: polygon(5.51% 3.36%, 5.65% 2.34%, 5.95% 1.50%, 6.40% 0.84%, 7.01% 0.37%, 7.78% 0.09%, 8.70% 0.00%, 91.20% 0.00%, 92.12% 0.09%, 92.89% 0.37%, 93.50% 0.84%, 93.95% 1.49%, 94.25% 2.34%, 94.40% 3.36%, 99.80% 96.64%, 99.78% 97.66%, 99.58% 98.51%, 99.20% 99.16%, 98.64% 99.63%, 97.91% 99.91%, 97.00% 100.00%, 3.00% 100.00%, 2.09% 99.91%, 1.35% 99.63%, 0.80% 99.16%, 0.42% 98.50%, 0.22% 97.66%, 0.19% 96.64%);
    --cli: polygon(5.38% 3.92%, 5.54% 2.73%, 5.89% 1.74%, 6.42% 0.98%, 7.13% 0.44%, 8.02% 0.11%, 9.10% 0.00%, 90.70% 0.00%, 91.78% 0.11%, 92.67% 0.44%, 93.38% 0.98%, 93.91% 1.74%, 94.26% 2.73%, 94.43% 3.92%, 99.77% 96.08%, 99.74% 97.27%, 99.51% 98.26%, 99.07% 99.02%, 98.42% 99.56%, 97.56% 99.89%, 96.50% 100.00%, 3.50% 100.00%, 2.44% 99.89%, 1.58% 99.56%, 0.93% 99.02%, 0.49% 98.26%, 0.25% 97.27%, 0.22% 96.08%); }
  body.shape-invtrap { --ar: 1664 / 1481; --arn: 1.1236; --pt: .0934; --pl: .093; --pb: .0534; --ro: 0; --ri: 0;
    --clo: polygon(0.19% 3.36%, 0.22% 2.34%, 0.42% 1.50%, 0.80% 0.84%, 1.35% 0.37%, 2.09% 0.09%, 3.00% 0.00%, 97.00% 0.00%, 97.91% 0.09%, 98.64% 0.37%, 99.20% 0.84%, 99.58% 1.49%, 99.78% 2.34%, 99.80% 3.36%, 94.40% 96.64%, 94.25% 97.66%, 93.95% 98.51%, 93.50% 99.16%, 92.89% 99.63%, 92.12% 99.91%, 91.20% 100.00%, 8.70% 100.00%, 7.78% 99.91%, 7.01% 99.63%, 6.40% 99.16%, 5.95% 98.50%, 5.65% 97.66%, 5.51% 96.64%);
    --cli: polygon(0.22% 3.92%, 0.25% 2.73%, 0.49% 1.74%, 0.93% 0.98%, 1.58% 0.44%, 2.44% 0.11%, 3.50% 0.00%, 96.50% 0.00%, 97.56% 0.11%, 98.42% 0.44%, 99.07% 0.98%, 99.52% 1.74%, 99.75% 2.73%, 99.78% 3.92%, 94.72% 96.08%, 94.55% 97.27%, 94.21% 98.26%, 93.68% 99.02%, 92.97% 99.56%, 92.08% 99.89%, 91.00% 100.00%, 9.15% 100.00%, 8.07% 99.89%, 7.18% 99.56%, 6.47% 99.02%, 5.94% 98.26%, 5.59% 97.27%, 5.43% 96.08%); }
  body.shape-cat { --ar: 1882 / 1620; --arn: 1.1617; --pt: 0.0301; --pl: 0.0281; --pb: 0.0266; --ro: 0; --ri: 0;
    --clo: polygon(50.00% 18.52%, 44.56% 18.89%, 36.77% 20.12%, 29.18% 12.84%, 24.97% 9.51%, 20.81% 6.57%, 16.85% 4.23%, 13.63% 2.63%, 9.52% 1.04%, 5.95% 0.00%, 3.83% 5.18%, 2.33% 11.20%, 1.02% 21.23%, 0.15% 33.64%, 0.52% 37.92%, 2.92% 49.91%, 4.33% 54.76%, 6.27% 57.96%, 4.69% 61.54%, 3.47% 65.81%, 2.12% 72.09%, 2.11% 74.90%, 2.74% 78.04%, 3.59% 80.43%, 5.05% 83.27%, 6.74% 85.87%, 8.91% 88.14%, 12.82% 90.71%, 17.53% 92.84%, 23.54% 95.03%, 32.83% 97.35%, 44.10% 99.32%, 50.00% 100.00%, 55.90% 99.32%, 67.17% 97.35%, 76.46% 95.03%, 82.47% 92.84%, 87.18% 90.71%, 91.09% 88.14%, 93.26% 85.87%, 94.95% 83.27%, 96.41% 80.43%, 97.26% 78.04%, 97.89% 74.90%, 97.88% 72.09%, 96.53% 65.81%, 95.31% 61.54%, 93.73% 57.96%, 95.67% 54.76%, 97.08% 49.91%, 99.48% 37.92%, 99.85% 33.64%, 98.98% 21.23%, 97.67% 11.20%, 96.17% 5.18%, 94.05% 0.00%, 90.48% 1.04%, 86.37% 2.63%, 83.15% 4.23%, 79.19% 6.57%, 75.03% 9.51%, 70.82% 12.84%, 63.23% 20.12%, 55.44% 18.89%);
    --cli: polygon(50.00% 19.39%, 45.12% 19.71%, 36.69% 21.02%, 35.23% 20.99%, 33.94% 20.10%, 26.28% 12.67%, 18.93% 7.00%, 15.76% 4.97%, 11.70% 2.74%, 8.06% 1.17%, 4.54% 0.00%, 4.79% 0.09%, 3.72% 2.98%, 2.74% 6.46%, 1.80% 11.76%, 0.69% 21.70%, 0.00% 32.29%, 0.45% 36.89%, 2.82% 48.77%, 4.02% 53.09%, 5.69% 56.00%, 6.44% 58.86%, 4.08% 65.05%, 2.87% 69.92%, 1.98% 74.68%, 2.32% 77.64%, 3.13% 80.34%, 4.41% 83.02%, 6.28% 85.99%, 8.55% 88.27%, 11.80% 90.37%, 16.53% 92.52%, 22.71% 94.80%, 32.25% 97.20%, 44.11% 99.30%, 50.00% 100.00%, 55.89% 99.30%, 67.75% 97.20%, 77.29% 94.80%, 83.47% 92.52%, 88.20% 90.37%, 91.45% 88.27%, 93.72% 85.99%, 95.59% 83.02%, 96.87% 80.34%, 97.68% 77.64%, 98.02% 74.68%, 97.13% 69.92%, 95.92% 65.05%, 93.56% 58.86%, 94.31% 56.00%, 95.98% 53.09%, 97.18% 48.77%, 99.55% 36.89%, 100.00% 32.29%, 99.31% 21.70%, 98.20% 11.76%, 97.26% 6.46%, 96.28% 2.98%, 95.21% 0.09%, 95.46% 0.00%, 91.94% 1.17%, 88.30% 2.74%, 84.24% 4.97%, 81.07% 7.00%, 73.72% 12.67%, 66.06% 20.10%, 64.77% 20.99%, 63.31% 21.02%, 54.88% 19.71%); }
  body.shape-bunny { --ar: 1707 / 1854; --arn: 0.9207; --pt: 0.0492; --pl: 0.0489; --pb: 0.0486; --ro: 0; --ri: 0;
    --clo: polygon(25.25% 1.29%, 21.09% 3.83%, 17.69% 7.28%, 14.53% 12.30%, 12.48% 17.58%, 11.25% 23.57%, 11.01% 30.69%, 11.72% 36.25%, 13.53% 42.45%, 8.20% 47.03%, 4.34% 51.83%, 1.70% 56.90%, 0.23% 62.46%, 0.00% 66.56%, 0.47% 70.66%, 1.76% 74.97%, 3.40% 78.37%, 5.62% 81.72%, 8.55% 85.06%, 12.07% 88.19%, 15.70% 90.78%, 20.45% 93.47%, 25.19% 95.58%, 30.46% 97.36%, 35.79% 98.65%, 41.65% 99.57%, 47.63% 100.00%, 53.78% 99.95%, 58.88% 99.51%, 64.26% 98.65%, 69.60% 97.36%, 74.87% 95.58%, 79.61% 93.47%, 84.36% 90.78%, 87.99% 88.19%, 91.51% 85.06%, 94.14% 82.09%, 96.66% 78.37%, 98.30% 74.97%, 99.41% 71.47%, 100.00% 67.69%, 100.00% 64.08%, 99.47% 60.52%, 98.36% 56.90%, 97.01% 53.99%, 95.14% 50.97%, 92.62% 47.84%, 89.34% 44.66%, 86.53% 42.45%, 87.81% 38.51%, 88.64% 34.63%, 89.05% 30.69%, 89.05% 26.21%, 88.58% 21.95%, 87.58% 17.58%, 86.41% 14.24%, 84.42% 10.25%, 80.90% 5.61%, 78.97% 3.83%, 76.63% 2.21%, 74.28% 1.08%, 71.76% 0.32%, 68.95% 0.00%, 66.26% 0.16%, 63.56% 0.81%, 60.87% 2.00%, 58.70% 3.40%, 56.41% 5.39%, 54.36% 7.77%, 52.67% 10.30%, 50.03% 16.07%, 48.45% 12.24%, 45.69% 7.77%, 42.18% 4.05%, 39.66% 2.27%, 36.50% 0.81%, 32.86% 0.05%, 28.88% 0.22%);
    --cli: polygon(24.09% 1.30%, 27.99% 0.06%, 30.39% 0.00%, 32.40% 0.36%, 34.61% 1.19%, 36.69% 2.43%, 39.03% 4.45%, 40.58% 6.22%, 43.31% 10.55%, 45.39% 15.89%, 46.23% 19.50%, 46.75% 23.83%, 46.82% 27.27%, 46.36% 32.78%, 47.27% 34.26%, 48.90% 34.85%, 51.95% 34.68%, 52.73% 34.26%, 53.51% 33.25%, 53.25% 23.83%, 53.77% 19.50%, 54.81% 15.23%, 56.23% 11.50%, 57.92% 8.36%, 60.52% 4.92%, 62.99% 2.67%, 65.39% 1.19%, 67.60% 0.36%, 69.61% 0.00%, 73.25% 0.30%, 76.36% 1.54%, 78.90% 3.32%, 80.97% 5.39%, 83.44% 8.83%, 85.13% 12.15%, 86.43% 15.77%, 87.34% 19.68%, 87.86% 24.42%, 87.86% 28.22%, 87.34% 32.90%, 86.04% 38.06%, 84.48% 41.79%, 84.48% 43.21%, 85.39% 44.46%, 88.44% 46.59%, 91.88% 49.61%, 94.35% 52.34%, 96.49% 55.36%, 98.25% 58.74%, 99.42% 62.24%, 99.94% 65.20%, 100.00% 68.88%, 99.55% 72.02%, 98.38% 75.76%, 96.75% 79.02%, 94.42% 82.39%, 91.43% 85.66%, 88.64% 88.09%, 85.06% 90.63%, 80.71% 93.12%, 75.39% 95.49%, 69.87% 97.33%, 65.58% 98.40%, 59.68% 99.41%, 53.51% 99.94%, 48.25% 100.00%, 42.40% 99.64%, 37.53% 98.99%, 31.88% 97.81%, 26.56% 96.21%, 22.86% 94.78%, 16.88% 91.82%, 12.21% 88.74%, 8.57% 85.66%, 5.58% 82.39%, 3.57% 79.55%, 1.62% 75.76%, 0.26% 71.01%, 0.00% 65.98%, 0.58% 62.24%, 2.53% 57.08%, 5.65% 52.34%, 8.12% 49.61%, 11.56% 46.59%, 14.61% 44.46%, 15.45% 43.39%, 15.58% 42.03%, 13.57% 36.81%, 12.27% 29.99%, 12.14% 24.42%, 12.86% 18.67%, 14.48% 13.10%, 17.08% 8.00%, 20.19% 4.15%); }
  /* el conejo tiene orejas largas: la mascota se baja y reduce un poco para quedar dentro de la cabeza */
  body.shape-bunny #pet, body.shape-bunny #hwrap, body.shape-bunny #gl3d { translate: 0 13%; scale: .82; }
  body.shape-bunny .screen.playing #pet, body.shape-bunny .screen.playing #hwrap, body.shape-bunny .screen.playing #gl3d { translate: none; scale: none; }
  .devwrap { position: relative; --dw: min(94vw, calc((100vh - var(--btn) - var(--ico) - 110px) * var(--arn)), calc((100dvh - var(--btn) - var(--ico) - 110px) * var(--arn)), 920px); width: var(--dw); }
  /* el brillo va en un contenedor aparte: el clip-path de las formas recortaría un box-shadow */
  .devfx { filter: drop-shadow(0 0 8px var(--c1)) drop-shadow(0 0 26px color-mix(in srgb, var(--c2) 60%, transparent)); }
  .device {
    position: relative; aspect-ratio: var(--ar); width: 100%;
    /* los % de padding se miden contra el padre, no contra la carcasa: se calculan con --dw */
    padding: calc(var(--dw) * var(--pt)) calc(var(--dw) * var(--pl)) calc(var(--dw) * var(--pb));
    border-radius: var(--ro); clip-path: var(--clo);
    background: linear-gradient(135deg, var(--c1) 0%, var(--c2) 100%);
    box-shadow: inset 0 0 14px #ffffff55;
  }
  .screen {
    width: 100%; height: 100%; border-radius: var(--ri); clip-path: var(--cli); overflow: hidden;
    background: linear-gradient(135deg, #000 0%, #2b2b2e 35%, #000 55%, #3a3a3e 80%, #000 100%);
    background-size: 300% 300%; animation: bgmove 14s ease-in-out infinite;
    box-shadow: inset 0 0 26px #000, 0 0 0 3px #000a;
  }
  #pet { width: 100%; height: 100%; display: block; }
  #pet path.f, #pet ellipse, #pet circle, #gallery path.f, #gallery ellipse, #gallery circle { fill: var(--ink); }

  /* --- iconos vectoriales (trazo, color de iconos de la interfaz) --- */
  .ic { display: block; width: 1em; height: 1em; }
  #msg .ic.gi { width: 1.1em; height: 1.1em; vertical-align: -0.2em; margin: 0 .1em; }
  .ic.gi { display: inline-block; vertical-align: -0.18em; width: 1.05em; height: 1.05em; }
  .buttons button { color: var(--ui); }
  .buttons button .ic { width: 60%; height: 60%; margin: auto; }
  .corner .ic { width: 1.15em; height: 1.15em; }
  .stat .ic { width: 1em; height: 1em; color: var(--ui); }
  .stat span { display: grid; place-items: center; }

  /* --- botones flotando fuera, estilo neón --- */
  .buttons { position: fixed; z-index: 10; left: 0; right: 0; bottom: calc(16px + env(safe-area-inset-bottom));
    display: flex; gap: clamp(10px, 3.6vw, 34px); justify-content: center; pointer-events: none; }
  .buttons button { pointer-events: auto; }
  .buttons button {
    width: var(--btn); aspect-ratio: 1; border-radius: 50%; font-size: calc(var(--btn) * .45);
    border: 5px solid var(--ui); background: #ffffff08;
    box-shadow: 0 0 10px var(--ui), inset 0 0 10px color-mix(in srgb, var(--ui) 40%, transparent);
    animation: float 3s ease-in-out infinite;
    transition: transform .1s, box-shadow .2s;
  }
  .buttons button:nth-child(2) { animation-delay: -.7s; }
  .buttons button:nth-child(3) { animation-delay: -1.4s; }
  .buttons button:nth-child(4) { animation-delay: -2.1s; }
  .buttons button:active { transform: scale(.9); }
  @keyframes float { 50% { transform: translateY(-5px); } }

  /* iconos flotantes de esquina: estilo de cara y configuración */
  .corner { position: fixed; top: calc(10px + env(safe-area-inset-top)); z-index: 10; font-size: var(--ico); padding: 6px 8px; color: var(--ui); text-shadow: 0 0 8px var(--ui); }
  #openSettings { right: 12px; }
  #styleBtn { right: calc(12px + var(--cs)); }
  #exprBtn { right: calc(12px + 2 * var(--cs)); }
  #exitFull { display: none; }

  /* --- bocadillo de cómic --- */
  #msg {
    position: fixed; z-index: 20; left: 50%; top: 10%; transform: translateX(-50%);
    max-width: min(80vw, 420px); padding: 10px 16px; background: #fff; color: #111;
    border: 3px solid #111; border-radius: 22px; box-shadow: 3px 4px 0 #0006;
    font: 700 clamp(16px, 3.4vmin, 26px)/1.25 "Comic Sans MS", "Comic Neue", "Chalkboard SE", cursive; text-align: center;
    pointer-events: none; animation: pop .22s ease-out;
  }
  #msg:empty { display: none; }
  #msg::before, #msg::after { content: ""; position: absolute; left: 50%; border: 10px solid transparent; }
  #msg::before { bottom: -23px; margin-left: -10px; border-top-color: #111; border-width: 11px 10px 0; }
  #msg::after  { bottom: -17px; margin-left: -7px;  border-top-color: #fff; border-width: 9px 7px 0; }
  @keyframes pop { from { transform: translateX(-50%) scale(.5); opacity: 0; } }

  .bob { animation: bob 1.6s ease-in-out infinite; }
  .jump { animation: jump .7s ease-out 1; }
  .wobble { animation: wobble .5s ease-in-out infinite alternate; transform-origin: 50px 90px; }
  .shake { animation: shake .35s ease-in-out 1; transform-origin: 50px 90px; }
  @keyframes shake { 20% { transform: rotate(-12deg); } 40% { transform: rotate(11deg); } 60% { transform: rotate(-8deg); } 80% { transform: rotate(5deg); } }
  @keyframes bgmove { 0%, 100% { background-position: 0% 0%; } 50% { background-position: 100% 100%; } }
  @media (prefers-reduced-motion: reduce) { .screen, .buttons button, .stat.low { animation: none; } }
  @keyframes bob { 50% { transform: translateY(2px); } }
  @keyframes jump { 40% { transform: translateY(-14px); } }
  @keyframes wobble { from { transform: rotate(-6deg); } to { transform: rotate(6deg); } }

  /* --- panel de configuración --- */
  dialog#settings { border: 1px solid var(--c1); border-radius: 18px; padding: 0; width: min(340px, 90vw);
    background: #120d22; color: #fff; font-family: inherit; box-shadow: 0 0 24px color-mix(in srgb, var(--c1) 50%, transparent); }
  dialog#settings::backdrop { background: #000b; }
  .panel { padding: 16px; display: grid; gap: 10px; }
  .panel header { display: flex; justify-content: space-between; align-items: center; }
  .panel header button { font-size: 16px; padding: 2px 8px; }
  .panel .row { display: flex; justify-content: space-between; align-items: center; gap: 8px; background: #241a3d; color: #fff;
    border-radius: 12px; padding: 12px 14px; font-size: 14px; text-align: left; width: 100%; }
  .panel .row.danger { color: #ff8a8a; }
  .panel select { background: #120d22; color: #fff; border: 1px solid #555; border-radius: 8px; padding: 4px 6px; font: inherit; }
  .panel input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--c1); }
  .colors { display: flex; gap: 8px; align-items: center; }
  .colors button { color: #fff; font-size: 18px; padding: 0 6px; line-height: 1; }
  input[type=color] { width: 26px; height: 26px; padding: 0; border: 2px solid #fff; border-radius: 50%; background: none; cursor: pointer; }

  /* --- pantalla total (sin carcasa) --- */
  body.full { overflow: hidden; background: #000; }
  body.full .stage { padding: 0; gap: 0; }
  body.full .device { position: fixed; inset: 0; width: 100%; aspect-ratio: auto; padding: 0; border-radius: 0; clip-path: none; background: #000; box-shadow: none; }
  body.full .devfx { filter: none; }
  body.full .screen { border-radius: 0; clip-path: none; box-shadow: none; }
  /* pantalla total: solo crece la pantalla; barras, iconos de esquina y botones se quedan donde siempre */
  body.full #gallery { display: none; }
  body.full .stats { width: max(124px, min(440px, calc(100vw - 5 * var(--cs) - 36px))); }      /* deja sitio al botón de salir */
  body.full #exitFull { display: block; position: fixed; top: calc(10px + env(safe-area-inset-top)); right: calc(12px + 4 * var(--cs)); z-index: 10; font-size: var(--ico); padding: 6px 8px;
    color: var(--ui); text-shadow: 0 0 8px var(--ui); }

  /* --- sprites de comida/juegos (atlas teñido) e iconos vectoriales de salud/descanso --- */
  .screen { position: relative; }
  #fxlayer { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }      /* por encima del 3D (#gl3d tiene z-index 1) */
  .sp { display: block; aspect-ratio: 1; background: var(--ink);
    -webkit-mask: url(img/sprites.png) no-repeat; mask: url(img/sprites.png) no-repeat;
    -webkit-mask-size: 700% 600%; mask-size: 700% 600%;
    filter: drop-shadow(0 0 4px var(--ink)); }
  .svgsp { display: block; aspect-ratio: 1; color: var(--ink); filter: drop-shadow(0 0 4px var(--ink)); }
  .svgsp svg { width: 100%; height: 100%; display: block; }
  /* la comida cae en la "barbilla" de la carcasa, debajo de la pantalla */
  #chinlayer { z-index: 2; position: absolute; left: 0; right: 0; bottom: 1%; height: 20%; pointer-events: none;
    display: flex; justify-content: center; align-items: center; gap: 3%; }
  .fx-food { position: absolute; left: 39%; top: 8%; width: 22%; animation: eat 2.8s ease-in-out forwards; }
  #chinlayer .fx-food, #chinlayer .fx-game { position: relative; left: auto; top: auto; width: 17%; flex: none; }
  /* chapa neón: fondo oscuro, borde de color y brillo para que no se pierda sobre el degradado */
  .chip { aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
    background: radial-gradient(circle at 35% 30%, #2d2260, #0b0b1a 72%);
    border: 3px solid var(--ink);
    box-shadow: 0 0 8px var(--ink), 0 0 20px color-mix(in srgb, var(--ink) 60%, transparent),
                inset 0 0 10px color-mix(in srgb, var(--ink) 45%, transparent); }
  .chip .sp, .chip .svgsp { width: 62%; filter: drop-shadow(0 0 4px var(--ink)); }
  .chip .sp { background: var(--ink); }
  .chip .svgsp { color: var(--ink); }
  #chinlayer .fx-food { animation: chipin 2.8s ease-in-out forwards; }
  .chip.fx-food .sp { animation: bites 2.8s linear forwards; }
  @keyframes chipin {
    0%   { transform: translateY(-60%) scale(.4); opacity: 0; }
    14%  { transform: translateY(0) scale(1.08); opacity: 1; }
    22%  { transform: translateY(0) scale(1); }
    32%  { transform: translateY(-7%); }
    42%  { transform: translateY(0); }
    90%  { opacity: 1; }
    100% { transform: translateY(8%) scale(.9); opacity: 0; }
  }
  @keyframes bites {
    0%, 45%  { clip-path: inset(0 0 0 0); }
    46%, 62% { clip-path: inset(0 22% 0 0); }
    63%, 78% { clip-path: inset(0 48% 0 0); }
    79%, 92% { clip-path: inset(0 78% 0 0); }
    100%     { clip-path: inset(0 100% 0 0); }
  }
  body.full #chinlayer { height: 30%; }
  .fx-game { position: absolute; left: 36%; top: 54%; width: 28%; animation: gamepop 2.8s ease-in-out forwards; }
  .fx-spark { position: absolute; left: 46%; top: 50%; width: 9%; animation: spark 1.6s ease-out forwards; }
  .fx-zzz { position: absolute; left: 62%; top: 38%; width: 13%; animation: zzz 3.2s ease-out forwards; }
  @keyframes eat {
    0%   { transform: translateY(-60%) scale(.4); opacity: 0; clip-path: inset(0 0 0 0); }
    14%  { transform: translateY(0) scale(1.08); opacity: 1; clip-path: inset(0 0 0 0); }
    22%  { transform: translateY(0) scale(1); }
    32%  { transform: translateY(-7%); }
    42%  { transform: translateY(0); clip-path: inset(0 0 0 0); }
    45%  { clip-path: inset(0 0 0 0); }
    46%  { clip-path: inset(0 22% 0 0); } 62% { clip-path: inset(0 22% 0 0); }
    63%  { clip-path: inset(0 48% 0 0); } 78% { clip-path: inset(0 48% 0 0); }
    79%  { clip-path: inset(0 78% 0 0); } 92% { clip-path: inset(0 78% 0 0); opacity: 1; }
    100% { clip-path: inset(0 100% 0 0); opacity: 0; }
  }
  @keyframes gamepop {
    0%   { transform: translateY(80%) scale(.3); opacity: 0; }
    18%  { transform: translateY(0) scale(1.12); opacity: 1; }
    28%  { transform: translateY(0) scale(1); }
    40%  { transform: rotate(-9deg); } 55% { transform: rotate(9deg); } 70% { transform: rotate(-6deg); } 85% { transform: rotate(0); opacity: 1; }
    100% { transform: translateY(-20%) scale(.7); opacity: 0; }
  }
  @keyframes spark {
    0% { transform: translate(0, 0) scale(.3) rotate(0); opacity: 0; }
    20% { opacity: 1; }
    100% { transform: translate(var(--dx), var(--dy)) scale(1) rotate(180deg); opacity: 0; }
  }
  @keyframes zzz {
    0% { transform: translate(0, 40%) scale(.5); opacity: 0; }
    25% { opacity: .9; }
    100% { transform: translate(40%, -90%) scale(1.1); opacity: 0; }
  }
  @media (prefers-reduced-motion: reduce) { .fx-food, .fx-game, .fx-spark, .fx-zzz { animation-duration: .01s; } }

  /* --- menú de selección (pulsación larga) --- */
  #menu { position: fixed; z-index: 25; left: 50%; bottom: calc(var(--btn) + 42px + env(safe-area-inset-bottom)); transform: translateX(-50%);
    width: min(94vw, 380px); max-height: 52vh; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: 10px; border-radius: 18px;
    background: #120d22f2; border: 1px solid var(--c1);
    box-shadow: 0 0 18px color-mix(in srgb, var(--c1) 55%, transparent); }
  #menu[hidden] { display: none; }
  #menu .mg { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; min-width: 0; }
  #menu .mh { grid-column: 1 / -1; margin: 6px 2px 0; font-size: 11px; letter-spacing: 1px; color: #fff; opacity: .7; text-transform: uppercase; }
  #menu .mi { aspect-ratio: 1; display: grid; place-items: center; border-radius: 12px; border: 1px solid #ffffff22; background: #ffffff0a; }
  #menu .mi .sp { width: 72%; filter: none; }
  #menu .mi .svgsp { width: 66%; filter: none; }
  #menu .mi:active { transform: scale(.92); border-color: var(--c2); }
  .buttons button[data-a="feed"], .buttons button[data-a="play"], .buttons button[data-a="sleep"], .buttons button[data-a="health"] { position: relative; }
  .buttons button[data-a="feed"]::after, .buttons button[data-a="play"]::after,
  .buttons button[data-a="sleep"]::after, .buttons button[data-a="health"]::after {
    content: "▴"; position: absolute; top: -9px; left: 50%; transform: translateX(-50%); font-size: 12px; color: var(--ui); text-shadow: 0 0 6px var(--ui); }
  .buttons button:nth-child(5) { animation-delay: -2.8s; }

  /* --- modo Halloween: caras de calabaza vectoriales (img/halloween.json, 45 trazados) --- */
  #hwrap { position: absolute; inset: 0; display: none; place-items: center; pointer-events: none; }
  #hface { width: calc(var(--hs, .9) * 100%); height: calc(var(--hs, .9) * 100%); fill: var(--ink);   /* el SVG se ajusta solo al lado más corto */
    filter: drop-shadow(0 0 10px var(--ink)); }
  body.blobby { background: radial-gradient(ellipse at 50% 25%, #35182c 0%, #170c1c 62%, #07050b 100%); }
  body.mochi { background: radial-gradient(ellipse at 50% 25%, #3a1620 0%, #1b0b14 62%, #08040a 100%); }
  body.skullytet { background: radial-gradient(ellipse at 50% 25%, #3a1d12 0%, #170c0a 62%, #070404 100%); }
  body.skully { background: radial-gradient(ellipse at 50% 25%, #1d1740 0%, #0d0a22 62%, #05040e 100%); }
  body.danimod { background: radial-gradient(ellipse at 50% 25%, #14204f 0%, #0b1030 62%, #04061a 100%); }
  body.kaomoji { background: radial-gradient(ellipse at 50% 25%, #0f3036 0%, #0a1a22 62%, #04080c 100%); }
  body.chibi { background: radial-gradient(ellipse at 50% 25%, #2d1536 0%, #130c24 62%, #07050f 100%); }
  body.comic { background: radial-gradient(ellipse at 50% 25%, #231a4a 0%, #120d27 62%, #07050f 100%); }
  body.nightmare { background: radial-gradient(ellipse at 50% 25%, #1b0b36 0%, #0a0613 62%, #030207 100%); }
  body.halloween { background: radial-gradient(ellipse at 50% 25%, #2b0f06 0%, #0d0610 62%, #040205 100%); }
  #pumpkinBtn { right: calc(12px + 3 * var(--cs)); }
  #gamesBtn { right: calc(12px + 3 * var(--cs)); }

  /* --- ¡policía! --- */
  #siren { position: fixed; inset: 0; z-index: 15; pointer-events: none; animation: sirenfx .5s steps(1) infinite; }
  #siren[hidden] { display: none; }
  @keyframes sirenfx {
    0%   { background: radial-gradient(circle at 12% 50%, rgba(255, 0, 40, .8), transparent 62%); }
    50%  { background: radial-gradient(circle at 88% 50%, rgba(0, 90, 255, .8), transparent 62%); }
  }
  @media (prefers-reduced-motion: reduce) { #siren { animation: none; background: rgba(255, 0, 40, .25); } }

  /* --- selector de estilos --- */
  #stylemenu { position: fixed; z-index: 26; top: 54px; right: 12px; width: min(94vw, 340px); padding: 10px; border-radius: 16px;
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-height: 70vh; overflow: auto;
    background: #120d22f2; border: 1px solid var(--c1); box-shadow: 0 0 18px color-mix(in srgb, var(--c1) 55%, transparent); }
  #stylemenu[hidden] { display: none; }
  #stylemenu button { display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: 12px; font-size: 13px;
    color: #fff; text-align: left; background: #ffffff0a; border: 1px solid #ffffff22; }
  #stylemenu button.on { border-color: var(--c2); background: #ffffff1c; }
  #stylemenu .vrow { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  #stylemenu .sechead, #gallery .gsec { grid-column: 1 / -1; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; opacity: .65; margin: 2px 2px 0; }
  #stylemenu .sep, #gallery .gsep { grid-column: 1 / -1; height: 1px; background: linear-gradient(90deg, transparent, #ffffff55, transparent); margin: 6px 0 2px; }
  #stylemenu .dot { width: 18px; height: 18px; border-radius: 50%; flex: none; }

  /* --- caras y estilos: selección y exportación --- */
  dialog#facesDlg { border: 1px solid var(--c1); border-radius: 18px; padding: 0; width: min(620px, 96vw); max-height: 90vh;
    background: #120d22; color: #fff; font-family: inherit; box-shadow: 0 0 24px color-mix(in srgb, var(--c1) 50%, transparent); }
  dialog#facesDlg::backdrop { background: #000b; }
  .facespanel { padding: 14px; display: grid; gap: 10px; }
  .facespanel header { display: flex; justify-content: space-between; align-items: center; }
  .facespanel header button { font-size: 16px; padding: 2px 8px; }
  .facespanel .hint { margin: 0; font-size: 12px; opacity: .75; line-height: 1.4; }
  .ftools { display: flex; flex-wrap: wrap; gap: 8px; }
  .ftools button, .fbtns button { padding: 8px 12px; border-radius: 10px; border: 1px solid var(--c1); font-size: 12px; background: #ffffff0a; }
  #facesList { display: grid; gap: 8px; max-height: 58vh; overflow: auto; padding-right: 2px; }
  .fpack { border: 1px solid #ffffff22; border-radius: 14px; background: #ffffff08; }
  .fpack.nouse { opacity: .55; }
  .fhead { display: flex; align-items: center; gap: 8px; padding: 8px 10px; flex-wrap: wrap; }
  .fhead input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--c1); }
  .fname { flex: 1; text-align: left; font-size: 14px; min-width: 120px; }
  .fname small { opacity: .65; margin-left: 6px; }
  .fbtns { display: flex; gap: 6px; }
  .fbtns button { padding: 5px 9px; }
  .fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(62px, 1fr)); gap: 6px; padding: 4px 10px 10px; }
  .fthumb { aspect-ratio: 1; border-radius: 10px; border: 2px solid var(--c1); background: #05080a; padding: 3px; }
  .fthumb svg { width: 100%; height: 100%; display: block; fill: var(--ink); }
  .fthumb svg path.f, .fthumb svg ellipse, .fthumb svg circle { fill: var(--ink); }
  .fthumb.off { opacity: .22; border-color: #ffffff33; filter: grayscale(1); }
  .fempty { grid-column: 1 / -1; font-size: 12px; opacity: .7; padding: 8px; }

  /* --- minijuegos dentro de la pantalla --- */
  #game { position: absolute; inset: 0; z-index: 6; touch-action: none; }
  #game[hidden] { display: none; }
  #gcv { width: 100%; height: 100%; display: block; }
  #gui { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
  #gui .rps { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 15% 4% 5%; pointer-events: none; }
  #gui .rpsTop { display: grid; gap: 6px; justify-items: center; width: 100%; }
  #gui .rpsStage { display: flex; align-items: center; justify-content: center; gap: clamp(8px, 4vw, 26px); }
  #gui .rpsHand { display: grid; justify-items: center; gap: 2px; transition: transform .2s, opacity .2s, filter .2s; }
  #gui .rpsHand .who { font: 700 clamp(11px, 3vw, 15px) "Courier New", monospace; color: var(--ui); opacity: .85; letter-spacing: 1px; text-transform: uppercase; }
  #gui .rpsHand .emo { line-height: 0; color: var(--ui); filter: drop-shadow(0 0 10px var(--ui)); }
  #gui .rpsHand .emo .hnd { width: clamp(64px, 22vw, 116px); height: clamp(64px, 22vw, 116px); }
  #gui .rpsRow button .hnd { width: 62%; height: 62%; color: var(--ui); }
  #gui .rpsHand.spin .emo { opacity: .75; }
  #gui .rpsHand.pick { transform: scale(1.05); }
  #gui .rpsHand.win { transform: scale(1.18); }
  #gui .rpsHand.win .emo { filter: drop-shadow(0 0 16px #7dff9b); }
  #gui .rpsHand.lose { opacity: .45; transform: scale(.88); }
  #gui .rpsVs { font: 800 clamp(14px, 4vw, 22px) "Courier New", monospace; color: var(--ui); opacity: .7; }
  #gui .rpsVerdict { font: 800 clamp(20px, 6.4vw, 34px) "Courier New", monospace; color: var(--ui); text-shadow: 0 0 12px var(--ui); text-align: center; min-height: 1.2em; }
  #gui .rpsVerdict.win { color: #7dff9b; text-shadow: 0 0 14px #7dff9b; }
  #gui .rpsVerdict.lose { color: #ff9a9a; text-shadow: 0 0 14px #ff6a6a; }
  #gui .rpsRow { display: flex; gap: clamp(8px, 3vw, 18px); pointer-events: auto; }
  #gui .rpsRow button { width: clamp(48px, 13vw, 68px); aspect-ratio: 1; border-radius: 50%; font-size: clamp(24px, 6.6vw, 34px);
    border: 4px solid var(--ui); background: #0b0b1a; box-shadow: 0 0 12px var(--ui); }
  #gui .rpsInfo { font-weight: 700; color: var(--ui); text-shadow: 0 0 8px var(--ui); font-size: clamp(14px, 4vw, 22px); text-align: center; }
  /* textos de los juegos: encima de la carcasa (marcadores) y debajo (mensajes) */
  #gtop, #gbottom { position: absolute; left: 0; right: 0; z-index: 9; display: none; pointer-events: none; }
  #gtop { bottom: 100%; margin-bottom: 8px; justify-content: center; flex-wrap: wrap; gap: 8px; }
  #gbottom { top: 100%; margin-top: 10px; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
  .devwrap.gaming #gtop { display: flex; }
  .devwrap.gaming #gbottom { display: flex; }
  #gtop span { padding: 4px 14px; border-radius: 999px; background: #0b0b1af2; border: 2px solid var(--ui); color: var(--ui);
    font: 700 clamp(14px, 3.8vw, 22px) "Courier New", monospace; box-shadow: 0 0 10px var(--ui); white-space: nowrap; }
  #gmsg { color: var(--ui); font: 700 clamp(16px, 4.6vw, 28px) "Courier New", monospace; text-shadow: 0 0 10px var(--ui); min-height: 1.2em; }
  #ghint { color: #fff; opacity: .85; font: 600 clamp(11px, 3vw, 15px) "Courier New", monospace; }
  body.full #gtop { position: fixed; top: calc(50px + env(safe-area-inset-top)); bottom: auto; margin: 0; z-index: 12; }
  body.full #gbottom { position: fixed; top: auto; bottom: calc(var(--btn) + 30px + env(safe-area-inset-bottom)); margin: 0; z-index: 12; }
  #gpet { position: absolute; top: 8px; left: calc(50% + 34px); z-index: 7; font-size: 15px; line-height: 1.2; padding: 3px 9px; color: var(--ui); opacity: .7;
    border: 2px solid var(--ui); border-radius: 12px; background: #0008; }
  #gpet.off { opacity: .55; }
  #gpet .gpi { width: 1.3em; height: 1.3em; display: block; }
  #gquit { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 7; font-size: 16px; padding: 4px 10px; color: var(--ui); opacity: .7;
    border: 2px solid var(--ui); border-radius: 12px; background: #0008; }
  .screen.playing #pet, .screen.playing #hwrap { opacity: .3; transition: opacity .3s; }
  .screen.playing.hidepet #pet, .screen.playing.hidepet #hwrap, .screen.playing.hidepet #gl3d { opacity: 0; }
  #menu .mi .emo { font-size: 24px; line-height: 1; display: block; }
  .gico { display: block; width: 36px; height: 36px; color: var(--ui); }
  .gico svg { width: 100%; height: 100%; display: block; fill: currentColor; filter: drop-shadow(0 0 3px color-mix(in srgb, var(--ui) 55%, transparent)); }
  .gico.stroke svg { fill: none; }
  #menu .mi.game { aspect-ratio: auto; min-height: 64px; padding: 6px 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
  #menu .mi.game small { font-size: 9.5px; line-height: 1.1; text-align: center; color: #fff; opacity: .85; max-width: 100%; overflow-wrap: anywhere; word-break: break-word; hyphens: auto; }
  #menu .mi { min-width: 0; overflow: hidden; }
  /* selector de dificultad (Parejas): botones en fila, con salto de línea, centrados */
  #gui .pickWrap { width: 100%; height: 100%; display: grid; place-items: center; pointer-events: none; }
  #gui .pickRow { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 92%; pointer-events: auto; }
  #gui .pickRow .gbtn { min-width: 92px; text-align: center; line-height: 1.25; padding: 10px 14px; }
  #gui .pickRow .gbtn small { display: block; font-size: .7em; opacity: .85; font-weight: 600; }
  #gui .gbtn { pointer-events: auto; padding: 10px 18px; border-radius: 14px; border: 3px solid var(--ui); background: #0b0b1a; color: var(--ui);
    font-weight: 700; font-size: clamp(14px, 4vw, 20px); box-shadow: 0 0 12px var(--ui); }

  @media (max-height: 520px) { #holdhint { display: none !important; } }
  /* apaisado (móvil girado): los 5 botones van en columna a la derecha y la carcasa aprovecha la altura */
  /* pantallas apaisadas (móvil girado, y también tablet/ordenador anchos): botones en columna a la derecha, la carcasa gana altura */
  @media (orientation: landscape) and (max-height: 520px), (min-aspect-ratio: 13/10) and (min-width: 900px) {
    .stage { padding: calc(var(--ico) + 30px + env(safe-area-inset-top)) calc(var(--btn) + 44px + env(safe-area-inset-right)) 10px calc(12px + env(safe-area-inset-left)); }
    .devwrap { --dw: min(70vw, calc((100vh - var(--ico) - 50px) * var(--arn)), calc((100dvh - var(--ico) - 50px) * var(--arn)), 920px); }
    #holdhint { display: none !important; }
    .buttons { left: auto; right: calc(14px + env(safe-area-inset-right)); bottom: auto; top: 50%; transform: translateY(-50%);
      flex-direction: column; gap: min(14px, 2vh); }
    .buttons button { width: min(var(--btn), calc((100vh - 110px) / 5.6)); border-width: 4px; }
    #menu { left: auto; right: calc(var(--btn) + 36px + env(safe-area-inset-right)); bottom: 10px; transform: none; max-height: calc(100vh - 70px); width: min(60vw, 380px); }
    body.full .buttons { top: 50%; }
    /* en juego: marcadores y mensajes en la columna libre de la izquierda (no pisan las barras ni se salen por abajo) */
    .devwrap.gaming #gtop, .devwrap.gaming #gbottom { position: fixed; left: calc(12px + env(safe-area-inset-left)); right: auto; margin: 0;
      width: max(140px, calc((100vw - var(--btn) - 56px - var(--dw)) / 2 - 16px)); }
    .devwrap.gaming #gtop { top: 62px; bottom: auto; flex-direction: column; align-items: flex-start; }
    .devwrap.gaming #gbottom { top: auto; bottom: calc(12px + env(safe-area-inset-bottom)); align-items: flex-start; text-align: left; }
    #gmsg { font-size: clamp(14px, 3.6vh, 20px); }
  }
  /* --- ayuda "mantén pulsado" --- */
  @property --p { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
  .buttons button.holding::before { content: ""; position: absolute; inset: -9px; border-radius: 50%; pointer-events: none;
    background: conic-gradient(var(--ui) var(--p), transparent 0);
    -webkit-mask: radial-gradient(circle, transparent 60%, #000 62%); mask: radial-gradient(circle, transparent 60%, #000 62%);
    animation: holdp .42s linear forwards; }
  @keyframes holdp { to { --p: 100%; } }
  .buttons button.holding { transform: scale(.94); }
  #holdhint { position: fixed; left: 0; right: 0; bottom: calc(var(--btn) + 30px + env(safe-area-inset-bottom)); z-index: 9; text-align: center;
    pointer-events: none; display: flex; justify-content: center; }
  #holdhint[hidden] { display: none; }
  #holdhint span { padding: 6px 14px; border-radius: 999px; background: #0b0b1ae6; border: 1px solid var(--c1); color: #fff;
    font: 600 clamp(11px, 3.1vw, 14px) "Courier New", monospace; box-shadow: 0 0 10px color-mix(in srgb, var(--c1) 55%, transparent);
    max-width: 94vw; animation: hintpulse 2.4s ease-in-out infinite; }
  @keyframes hintpulse { 50% { opacity: .6; } }

  /* --- que nada se salga del panel (móvil estrecho) --- */
  .panel { grid-template-columns: minmax(0, 1fr); min-width: 0; }
  .panel .row { min-width: 0; flex-wrap: wrap; row-gap: 6px; }
  .panel .row > :is(input[type=text], select, input[type=range]) { max-width: 100%; min-width: 0; }
  .panel select { max-width: 62%; }
  dialog#settings, dialog#namesDlg, dialog#facesDlg { overflow-x: hidden; max-width: 94vw; }
  .stabs button { min-width: 0; flex: 1 1 0; padding: 7px 2px; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; line-height: 1.1; }
  .stabs .ti { font-size: 18px; line-height: 1; }
  .stabs .ti .ic { width: 22px; height: 22px; }
  #stylemenu .vrow button, #gallery .gt { display: flex; align-items: center; justify-content: center; gap: 6px; }
  #stylemenu .vrow button .ic { width: 1.25em; height: 1.25em; flex: none; }
  #gallery .gt .ic { width: 1.3em; height: 1.3em; flex: none; }
  .panel header b { overflow-wrap: anywhere; }

  /* --- color de fondo elegido por el usuario (gana a los fondos de cada mod) --- */
  body.custom-bg:not(.full) { background: var(--bgc) !important; }
  /* degradado suave sobre el color elegido, fijo a la ventana (no se estira con la página ni cambia con la barra del navegador) */
  body.custom-bg:not(.full)::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(ellipse at 50% 35%, color-mix(in srgb, var(--bgc) 90%, white) 0%, var(--bgc) 55%, color-mix(in srgb, var(--bgc) 68%, black) 100%);
  }
  /* en pantalla total la "pantalla" ocupa todo: ahí es donde se aplica el color de fondo elegido */
  body.full.custom-bg .screen { background: radial-gradient(ellipse at 50% 35%, color-mix(in srgb, var(--bgc) 90%, white) 0%, var(--bgc) 55%, color-mix(in srgb, var(--bgc) 68%, black) 100%); animation: none; }
  body.full.custom-bg .device { background: var(--bgc); }
  #uiSwatches .sw { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #ffffff66; padding: 0; }
  #uiSwatches .auto { font-size: 11px; padding: 2px 7px; border: 1px solid #ffffff55; border-radius: 10px; }
  .insta { display: flex; justify-content: center; align-items: center; margin: 6px auto 0; width: 44px; height: 44px; border-radius: 50%; color: #fff; border: 1px solid #ffffff3a; background: #ffffff0d; opacity: .8; }
  .insta:hover, .insta:focus-visible { opacity: 1; border-color: var(--c2); box-shadow: 0 0 10px color-mix(in srgb, var(--c2) 45%, transparent); }
  .shead { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; opacity: .65; margin: 8px 2px -2px; }
  .shead[hidden] { display: none; }
  .colors .sw { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #ffffff66; padding: 0; }

  /* --- ajustes por pestañas --- */
  .stabs { display: flex; gap: 6px; position: sticky; top: 0; z-index: 2; background: #120d22; padding: 4px 0 8px; flex-wrap: wrap; }
  .stabs button { flex: 1; padding: 8px 6px; border-radius: 10px; border: 1px solid #ffffff2e; background: #ffffff0a; color: #fff; font-size: 12px; white-space: nowrap; }
  .stabs button.on { border-color: var(--c2); background: #ffffff1c; box-shadow: 0 0 10px color-mix(in srgb, var(--c2) 40%, transparent); }
  .panel .row[hidden] { display: none; }
  dialog#settings .panel { max-height: 86vh; overflow-y: auto; }

  /* --- nombres --- */
  dialog#namesDlg { border: 1px solid var(--c1); border-radius: 18px; padding: 0; width: min(380px, 92vw);
    background: #120d22; color: #fff; font-family: inherit; box-shadow: 0 0 24px color-mix(in srgb, var(--c1) 50%, transparent); }
  dialog#namesDlg::backdrop { background: #000b; }
  .panel input[type=text] { background: #120d22; color: #fff; border: 1px solid #666; border-radius: 8px; padding: 8px 10px;
    font: inherit; width: 56%; min-width: 0; }
  .panel .hint { margin: 0; font-size: 12px; opacity: .8; line-height: 1.4; }
  .panel .row.primary { justify-content: center; background: linear-gradient(135deg, var(--c1), var(--c2)); color: #000; font-weight: 700; }

  /* --- Mod 3D (Three.js) --- */
  #gl3d { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
  .screen.playing #gl3d { opacity: .3; transition: opacity .3s; }
  body.mod3d { background: radial-gradient(ellipse at 50% 25%, #2a1650 0%, #120a2a 62%, #06040f 100%); }

  /* --- banner de consentimiento --- */
  #consent { position: fixed; z-index: 30; left: 50%; bottom: 12px; transform: translateX(-50%); width: min(92vw, 480px);
    display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px;
    background: #120d22ee; color: #fff; font-size: 13px; line-height: 1.35;
    border: 1px solid var(--c1); box-shadow: 0 0 16px color-mix(in srgb, var(--c1) 50%, transparent); }
  #consent[hidden] { display: none; }
  #consent p { margin: 0; flex: 1; }
  #consent div { display: flex; gap: 8px; }
  #consent button { padding: 8px 12px; border-radius: 10px; border: 1px solid var(--c1); }
  #consent #consentYes { background: linear-gradient(135deg, var(--c1), var(--c2)); color: #000; border-color: transparent; font-weight: 700; }
  @media (max-width: 420px) { #consent { flex-direction: column; align-items: stretch; } #consent div { justify-content: flex-end; } }

  /* --- galería de expresiones --- */
  #gallery { width: min(560px, 94vw); display: none; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 0 auto 30px; }
  #gallery.open { display: grid; padding-bottom: 120px; }   /* para que los botones fijos no tapen la última fila */
  #gallery .gtabs, #gallery .gchips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
  #gallery .gt, #gallery .gc { padding: 8px 12px; border-radius: 12px; border: 1px solid #ffffff33; background: #ffffff0a; color: #fff; font-size: 13px; }
  #gallery .gt { flex: 1; text-align: center; font-size: 14px; padding: 10px 8px; }
  #gallery .gt.on, #gallery .gc.on { border-color: var(--c2); background: #ffffff1c; box-shadow: 0 0 10px color-mix(in srgb, var(--c2) 45%, transparent); }
  #gallery .gp path { fill: var(--ink); }
  #gallery .gnote { grid-column: 1 / -1; font-size: 12px; opacity: .7; margin: 0; }
  #gallery h2 { grid-column: 1 / -1; margin: 10px 0 0; font-size: 14px; color: #fff; letter-spacing: 1px; }
  #gallery .card { background: var(--lcd); border: 2px solid var(--c1); border-radius: 12px; padding: 4px;
    cursor: pointer; text-align: center; font-size: 10px; color: #fff; }
  #gallery .card:hover { border-color: var(--c2); }
  #gallery svg { width: 100%; display: block; }
  @media (max-width: 480px) { #gallery { grid-template-columns: repeat(3, 1fr); } }

  /* --- habitación de fondo: imagen vertical u horizontal según la pantalla; en 3D se quita la carcasa y el personaje queda de pie en el suelo --- */
  #room { display: none; }
  body.room #room { display: block; position: fixed; inset: -3%; z-index: -1; pointer-events: none;
    background: #120c26 url(img/room_v.webp) center 62% / cover no-repeat; transition: filter 1.2s ease; will-change: transform; }
  @media (min-aspect-ratio: 1/1) { body.room #room { background-image: url(img/room_h.webp); background-position: center 70%; } }
  body.room #room::after { content: ""; position: absolute; inset: 0;      /* arriba y abajo más oscuro: barras y botones se leen bien */
    background: linear-gradient(to bottom, #0b0820d0 0%, #0b082000 20%, #0b082000 68%, #0b0820e0 100%); }
  @media (min-aspect-ratio: 1/1) { body.room #room::after { background: linear-gradient(to bottom, #0b0820c0 0%, #0b082000 18%, #0b082000 80%, #0b0820a0 100%), linear-gradient(to left, #0b0820b0 0%, #0b082000 22%); } }
  body.room.asleep #room { filter: brightness(.42) saturate(.85) hue-rotate(-12deg); }
  body.room.r3d .devwrap:not(.gaming) .devfx { filter: none; }
  body.room.r3d .devwrap:not(.gaming) .device { background: none; box-shadow: none; clip-path: none; }
  body.room.r3d .devwrap:not(.gaming) .screen { background: none; box-shadow: none; animation: none; clip-path: none; border-radius: 0; }
  /* en 2D (y con el huevo) se conserva la carcasa, con la pantalla de cristal translúcido */
  body.room:not(.r3d) .screen { background: radial-gradient(ellipse at 50% 40%, #1a1233b8 0%, #06040fd8 100%); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: none; }
  body.room.full .device { background: transparent; }
  body.room.full.custom-bg .screen, body.room.full .screen { background: none; }