/* =========================================================
   Gelatina Calendar · escenas ampliadas
   Fauna, objetos y motivos propios de cada diseño.
   Se carga después de themes-2026.css y antes de ultra.css.
   ========================================================= */

.world-extra {
  height: auto;
  color: var(--scene-extra, rgba(11, 125, 135, 0.36));
  fill: currentColor;
  opacity: 0.34;
  pointer-events: none;
}

/* ---------- Gelatina ---------- */

.gel-sprinkle {
  width: 16px;
  height: 5px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(226, 86, 63, 0.7), rgba(255, 190, 160, 0.35));
  box-shadow: 0 0 12px rgba(255, 170, 143, 0.28);
  opacity: 0.45;
  animation: sprinkleFloat 16s ease-in-out infinite;
}

.gel-sprinkle:nth-of-type(odd) {
  background: linear-gradient(90deg, rgba(183, 136, 51, 0.6), rgba(255, 231, 174, 0.3));
}

.sprinkle-a { top: 18%; left: 22%; transform: rotate(28deg); }
.sprinkle-b { top: 34%; right: 14%; transform: rotate(-42deg); animation-delay: -3s; }
.sprinkle-c { bottom: 22%; left: 16%; transform: rotate(72deg); animation-delay: -6s; width: 12px; }
.sprinkle-d { top: 62%; right: 27%; transform: rotate(14deg); animation-delay: -9s; width: 13px; }
.sprinkle-e { bottom: 34%; right: 6%; transform: rotate(-18deg); animation-delay: -12s; }
.sprinkle-f { top: 9%; left: 56%; transform: rotate(58deg); animation-delay: -14s; width: 11px; }

@keyframes sprinkleFloat {
  0%, 100% { translate: 0 0; opacity: 0.28; }
  50% { translate: 6px -14px; opacity: 0.6; }
}

/* ---------- Victoriano ---------- */

.victorian-watch {
  bottom: 30%;
  left: 2%;
  width: clamp(64px, 7vw, 112px);
  color: rgba(166, 127, 54, 0.46);
  opacity: 0.55;
  animation: watchSway 26s ease-in-out infinite;
}

.victorian-cameo {
  right: 31%;
  bottom: 2%;
  width: clamp(56px, 6vw, 94px);
  color: rgba(166, 127, 54, 0.4);
  opacity: 0.55;
  animation: cameoFloat 22s ease-in-out infinite;
}

.victorian-rose {
  right: 4%;
  bottom: 22%;
  width: clamp(70px, 8vw, 128px);
  color: rgba(140, 84, 74, 0.38);
  opacity: 0.6;
  animation: roseTurn 34s linear infinite;
}

@keyframes watchSway {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-3deg); }
  50% { transform: translate3d(-8px, 14px, 0) rotate(4deg); }
}

@keyframes cameoFloat {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(2deg); }
  50% { transform: translate3d(10px, -16px, 0) rotate(-3deg); }
}

@keyframes roseTurn {
  to { transform: rotate(360deg); }
}

/* ---------- Futurista ---------- */

.futurista-planet {
  bottom: 29%;
  left: 1%;
  width: clamp(120px, 14vw, 220px);
  color: rgba(11, 165, 190, 0.26);
  stroke: currentColor;
  fill: none;
  animation: planetDrift 30s ease-in-out infinite alternate;
}

.futurista-sat {
  right: 2%;
  bottom: 26%;
  width: clamp(90px, 10vw, 160px);
  color: rgba(11, 165, 190, 0.3);
  stroke: currentColor;
  fill: none;
  animation: satOrbit 26s ease-in-out infinite;
}

.futurista-drone {
  right: 18%;
  bottom: 13%;
  width: clamp(54px, 6vw, 92px);
  color: rgba(90, 226, 214, 0.3);
  stroke: currentColor;
  fill: none;
  animation: droneHover 12s ease-in-out infinite;
}

@keyframes planetDrift {
  from { transform: translate3d(0, 0, 0) rotate(-4deg); }
  to { transform: translate3d(14px, -18px, 0) rotate(5deg); }
}

@keyframes satOrbit {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-8deg); }
  50% { transform: translate3d(-18px, 16px, 0) rotate(6deg); }
}

@keyframes droneHover {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(-10px, -12px, 0) rotate(4deg); }
}

/* ---------- Ajedrez ---------- */

.chess-spotlight {
  top: -18%;
  left: 50%;
  width: min(70vw, 900px);
  height: 90vh;
  transform: translateX(-50%);
  background: conic-gradient(
    from 176deg at 50% 0%,
    transparent 0deg,
    rgba(255, 246, 214, 0.05) 4deg,
    rgba(255, 246, 214, 0.1) 8deg,
    rgba(255, 246, 214, 0.05) 12deg,
    transparent 17deg,
    rgba(255, 246, 214, 0.03) 20deg,
    rgba(255, 246, 214, 0.06) 24deg,
    rgba(255, 246, 214, 0.03) 29deg,
    transparent 34deg
  );
  opacity: 0.65;
  animation: spotlightBreathe 18s ease-in-out infinite alternate;
}

@keyframes spotlightBreathe {
  from { opacity: 0.35; transform: translateX(-50%) rotate(-1deg) scale(0.98); }
  to { opacity: 0.8; transform: translateX(-50%) rotate(1deg) scale(1.03); }
}

.chess-piece {
  width: clamp(70px, 8vw, 128px);
  color: var(--piece-dark);
  fill: currentColor;
  stroke: rgba(251, 245, 230, 0.2);
  stroke-width: 0.7;
  opacity: 0.16;
  filter: drop-shadow(0 18px 22px rgba(28, 36, 31, 0.26));
  animation: pieceMeditate 26s var(--scene-ease) infinite alternate;
}

.chess-piece.piece-e {
  top: 34%;
  right: 4%;
  color: var(--piece-light);
  stroke: rgba(28, 36, 31, 0.28);
  opacity: 0.22;
  animation-delay: -8s;
}

.chess-piece.piece-f {
  bottom: 4%;
  left: 26%;
  width: clamp(52px, 6vw, 92px);
  opacity: 0.12;
  animation-delay: -15s;
}

/* ---------- Católica ---------- */

.catolica-dove {
  bottom: 21%;
  left: 2%;
  width: clamp(62px, 8vw, 118px);
  color: rgba(177, 132, 61, 0.45);
  opacity: 0.7;
  stroke: currentColor;
  fill: none;
  animation: doveGlide 30s ease-in-out infinite;
}

.catolica-bell {
  right: 2%;
  bottom: 11%;
  width: clamp(46px, 5vw, 78px);
  color: rgba(177, 132, 61, 0.38);
  opacity: 0.62;
  stroke: currentColor;
  fill: none;
  animation: bellSway 18s ease-in-out infinite;
}

.stained-shard {
  width: 90px;
  height: 140px;
  background: linear-gradient(160deg, rgba(168, 51, 54, 0.14), rgba(216, 164, 77, 0.08) 55%, transparent 76%);
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
  opacity: 0.5;
  filter: blur(0.4px);
}

.shard-a { top: 4%; left: 34%; transform: rotate(8deg); }
.shard-b { top: 10%; left: 42%; width: 54px; height: 90px; background: linear-gradient(160deg, rgba(52, 99, 121, 0.16), transparent 76%); transform: rotate(-12deg); }
.shard-c { bottom: 2%; right: 32%; width: 120px; height: 180px; background: linear-gradient(160deg, rgba(216, 164, 77, 0.12), transparent 70%); transform: rotate(16deg); }

@keyframes doveGlide {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-3deg); }
  40% { transform: translate3d(26px, -18px, 0) rotate(4deg); }
  70% { transform: translate3d(10px, 8px, 0) rotate(-2deg); }
}

@keyframes bellSway {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(5deg); }
}

/* ---------- Mar Pacífico ---------- */

.sea-octopus {
  bottom: 16%;
  left: 2%;
  width: clamp(84px, 9.5vw, 150px);
  color: rgba(11, 125, 135, 0.36);
  opacity: 0.5;
  animation: octoFloat 24s ease-in-out infinite;
}

.sea-seahorse {
  bottom: 26%;
  left: 2%;
  width: clamp(38px, 4vw, 62px);
  color: rgba(201, 143, 77, 0.42);
  opacity: 0.55;
  animation: seahorseBob 18s ease-in-out infinite;
}

.sea-turtle {
  bottom: 2%;
  left: 17%;
  width: clamp(66px, 7.6vw, 118px);
  color: rgba(11, 125, 135, 0.3);
  opacity: 0.5;
  animation: turtleDrift 34s ease-in-out infinite;
}

.sea-ray {
  right: 1%;
  bottom: 23%;
  width: clamp(96px, 11vw, 176px);
  color: rgba(125, 218, 221, 0.26);
  opacity: 0.5;
  animation: rayGlide 28s ease-in-out infinite;
}

.sea-starfish {
  bottom: 8%;
  left: 31%;
  width: clamp(38px, 4vw, 62px);
  color: rgba(201, 143, 77, 0.48);
  opacity: 0.6;
  animation: starfishTurn 20s linear infinite;
}

.sea-whale {
  top: 4%;
  right: -4%;
  width: clamp(200px, 28vw, 420px);
  color: rgba(5, 73, 86, 0.18);
  animation: whaleGlide 48s ease-in-out infinite alternate;
}

.sea-angelfish {
  width: clamp(34px, 4vw, 60px);
  color: rgba(11, 125, 135, 0.3);
  opacity: 0;
  animation: fishSwim 30s linear infinite;
}

.angelfish-a {
  top: 56%;
  left: -10%;
  animation-delay: -6s;
}

.angelfish-b {
  top: 29%;
  left: -10%;
  width: clamp(24px, 2.8vw, 42px);
  color: rgba(201, 143, 77, 0.34);
  --fish-flip: -1;
  animation-delay: -19s;
  animation-duration: 36s;
}

@keyframes octoFloat {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-3deg); }
  50% { transform: translate3d(10px, -20px, 0) rotate(4deg); }
}

@keyframes seahorseBob {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(4deg); }
  50% { transform: translate3d(-6px, -16px, 0) rotate(-5deg); }
}

@keyframes turtleDrift {
  0% { transform: translate3d(0, 0, 0) rotate(-4deg); }
  50% { transform: translate3d(-36px, 18px, 0) rotate(3deg); }
  100% { transform: translate3d(-70px, 0, 0) rotate(-4deg); }
}

@keyframes rayGlide {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(4deg) scale(0.98); }
  50% { transform: translate3d(-30px, -22px, 0) rotate(-5deg) scale(1.04); }
}

@keyframes starfishTurn {
  to { transform: rotate(360deg); }
}

@keyframes whaleGlide {
  from { transform: translate3d(0, 0, 0) rotate(-2deg); }
  to { transform: translate3d(-70px, 24px, 0) rotate(2deg); }
}

/* ---------- Jungla ---------- */

.jungle-parrot {
  right: 4%;
  bottom: 24%;
  width: clamp(48px, 5.4vw, 84px);
  color: rgba(201, 154, 55, 0.46);
  opacity: 0.62;
  animation: parrotSway 20s ease-in-out infinite;
}

.jungle-frog {
  bottom: 7%;
  left: 13%;
  width: clamp(42px, 4.8vw, 74px);
  color: rgba(23, 101, 67, 0.42);
  opacity: 0.62;
  animation: frogBreathe 9s ease-in-out infinite;
}

.jungle-snake {
  right: 2%;
  bottom: 2%;
  width: clamp(100px, 13vw, 200px);
  color: rgba(23, 101, 67, 0.28);
  opacity: 0.55;
  animation: snakeCoil 26s ease-in-out infinite;
}

.jungle-flower {
  right: 15%;
  bottom: 17%;
  width: clamp(36px, 4.2vw, 62px);
  color: rgba(201, 102, 87, 0.42);
  opacity: 0.62;
  animation: flowerBreathe 14s ease-in-out infinite;
}

@keyframes parrotSway {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(5deg); }
}

@keyframes frogBreathe {
  0%, 100% { transform: translate3d(0, 0, 0) scale(0.98); }
  50% { transform: translate3d(0, -6px, 0) scale(1.03); }
}

@keyframes snakeCoil {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(2deg); }
  50% { transform: translate3d(-18px, 12px, 0) rotate(-3deg); }
}

@keyframes flowerBreathe {
  0%, 100% { transform: rotate(-4deg) scale(0.96); }
  50% { transform: rotate(6deg) scale(1.05); }
}

/* ---------- Ampliación de escenas ---------- */

.gel-cube {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  background: linear-gradient(145deg, rgba(226, 86, 63, 0.55), rgba(255, 208, 190, 0.2));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35), 0 6px 16px rgba(226, 86, 63, 0.18);
  transform: rotate(14deg);
  opacity: 0.4;
  animation: cubeBob 18s ease-in-out infinite;
}

.cube-a { bottom: 9%; left: 4%; }
.cube-b {
  bottom: 33%;
  left: 1.5%;
  width: 16px;
  height: 16px;
  animation-delay: -7s;
  background: linear-gradient(145deg, rgba(183, 136, 51, 0.5), rgba(255, 238, 196, 0.2));
}

.gel-berry {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffd9cf, rgba(226, 86, 63, 0.85));
  box-shadow: 0 0 10px rgba(255, 150, 120, 0.4);
  opacity: 0.55;
  animation: berryFloat 21s ease-in-out infinite;
}

.berry-a { bottom: 28%; left: 3%; }
.berry-b { bottom: 14%; left: 21%; animation-delay: -8s; }
.berry-c {
  bottom: 12%;
  right: 9%;
  animation-delay: -14s;
  background: radial-gradient(circle at 35% 30%, #fff2cc, rgba(183, 136, 51, 0.9));
  box-shadow: 0 0 10px rgba(255, 220, 150, 0.35);
}

@keyframes cubeBob {
  0%, 100% { translate: 0 0; rotate: 14deg; }
  50% { translate: 8px -12px; rotate: -8deg; }
}

@keyframes berryFloat {
  0%, 100% { translate: 0 0; opacity: 0.3; }
  50% { translate: -6px -18px; opacity: 0.7; }
}

.gel-mold {
  right: 4%;
  bottom: 6%;
  width: clamp(92px, 10vw, 150px);
  color: rgba(226, 86, 63, 0.34);
  opacity: 0.55;
  animation: moldWobble 24s ease-in-out infinite;
}

.gel-spoon {
  right: 18%;
  bottom: 11%;
  width: clamp(40px, 4.5vw, 66px);
  color: rgba(183, 136, 51, 0.38);
  opacity: 0.5;
  transform: rotate(-22deg);
  animation: spoonFloat 28s ease-in-out infinite;
}

.gel-cherry {
  bottom: 4%;
  left: 30%;
  width: clamp(44px, 5vw, 72px);
  color: rgba(226, 86, 63, 0.4);
  opacity: 0.5;
  animation: cherrySway 20s ease-in-out infinite;
}

.gel-meringue {
  bottom: 7%;
  left: 13%;
  width: clamp(50px, 6vw, 84px);
  color: rgba(183, 136, 51, 0.32);
  opacity: 0.45;
  animation: meringueTurn 34s linear infinite;
}

@keyframes moldWobble {
  0%, 100% { transform: rotate(-2deg) scale(1); }
  50% { transform: rotate(3deg) scale(1.035); }
}

@keyframes spoonFloat {
  0%, 100% { translate: 0 0; rotate: -22deg; }
  50% { translate: -8px -16px; rotate: -14deg; }
}

@keyframes cherrySway {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-4deg); }
  50% { transform: translate3d(8px, -10px, 0) rotate(5deg); }
}

@keyframes meringueTurn {
  to { transform: rotate(360deg); }
}

.victorian-chandelier {
  bottom: 3%;
  left: 2%;
  width: clamp(72px, 8vw, 120px);
  color: rgba(166, 127, 54, 0.4);
  opacity: 0.55;
  filter: drop-shadow(0 0 12px rgba(255, 226, 158, 0.28));
  animation: chandelierGlow 20s ease-in-out infinite;
}

.victorian-letter {
  bottom: 10%;
  left: 12%;
  width: clamp(70px, 7vw, 110px);
  color: rgba(140, 84, 74, 0.4);
  opacity: 0.6;
  animation: letterFloat 24s ease-in-out infinite;
}

.victorian-teacup {
  right: 15%;
  bottom: 15%;
  width: clamp(48px, 5vw, 76px);
  color: rgba(166, 127, 54, 0.4);
  opacity: 0.6;
  animation: teacupSteam 16s ease-in-out infinite;
}

.victorian-key {
  right: 12%;
  bottom: 4%;
  width: clamp(40px, 4.4vw, 68px);
  color: rgba(166, 127, 54, 0.44);
  opacity: 0.6;
  transform-origin: 20% 20%;
  animation: keySwing 22s ease-in-out infinite;
}

@keyframes chandelierGlow {
  0%, 100% { opacity: 0.48; }
  50% { opacity: 0.68; }
}

@keyframes letterFloat {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-3deg); }
  50% { transform: translate3d(6px, -14px, 0) rotate(2deg); }
}

@keyframes teacupSteam {
  0%, 100% { transform: translate3d(0, 0, 0); opacity: 0.7; }
  50% { transform: translate3d(-6px, -8px, 0); opacity: 1; }
}

@keyframes keySwing {
  0%, 100% { transform: rotate(-6deg); }
  50% { transform: rotate(7deg); }
}

.futurista-orbit {
  bottom: 6%;
  left: 5%;
  width: clamp(110px, 13vw, 200px);
  color: rgba(11, 165, 190, 0.26);
  stroke: currentColor;
  fill: none;
  animation: orbitSpin 44s linear infinite;
}

.futurista-hud {
  right: 4%;
  bottom: 5%;
  width: clamp(110px, 12vw, 180px);
  color: rgba(11, 165, 190, 0.32);
  stroke: currentColor;
  fill: none;
  animation: hudPulse 9s ease-in-out infinite;
}

.hud-scan {
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(90, 226, 214, 0.55), transparent);
  box-shadow: 0 0 18px rgba(90, 226, 214, 0.45);
  animation: hudScan 14s linear infinite;
}

.hud-coord {
  bottom: 22%;
  right: 6%;
  font: 600 10px/1 ui-monospace, "SFMono-Regular", Menlo, monospace;
  letter-spacing: 0.18em;
  color: rgba(11, 165, 190, 0.42);
}

@keyframes orbitSpin {
  to { transform: rotate(360deg); }
}

@keyframes hudPulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.7; }
}

@keyframes hudScan {
  0% { transform: translateY(8vh); opacity: 0; }
  12% { opacity: 1; }
  88% { opacity: 1; }
  100% { transform: translateY(92vh); opacity: 0; }
}

.chess-piece.piece-g {
  right: 12%;
  bottom: 3%;
  width: clamp(46px, 5vw, 78px);
  color: var(--piece-light);
  stroke: rgba(28, 36, 31, 0.24);
  opacity: 0.22;
  animation-delay: -18s;
}

.chess-piece.piece-h {
  bottom: 20%;
  left: 3%;
  width: clamp(38px, 4.2vw, 66px);
  color: var(--piece-dark);
  opacity: 0.18;
  animation-delay: -5s;
}

.chess-notation {
  font: 600 clamp(10px, 1vw, 13px)/1 ui-monospace, "SFMono-Regular", Menlo, monospace;
  letter-spacing: 0.2em;
  color: rgba(126, 155, 132, 0.44);
}

.notation-a { right: 20%; bottom: 14%; }
.notation-b { bottom: 3%; left: 8%; }

.catolica-chalice {
  right: 8%;
  bottom: 10%;
  width: clamp(44px, 4.6vw, 72px);
  color: rgba(177, 132, 61, 0.42);
  opacity: 0.6;
  stroke: currentColor;
  fill: none;
  animation: chaliceLift 24s ease-in-out infinite;
}

.catolica-rosary {
  bottom: 4%;
  left: 6%;
  width: clamp(80px, 9vw, 140px);
  color: rgba(216, 164, 77, 0.32);
  opacity: 0.6;
  stroke: currentColor;
  fill: none;
  animation: rosaryTurn 40s linear infinite;
}

.catolica-halo {
  top: 12%;
  left: 50%;
  width: clamp(160px, 22vw, 320px);
  height: clamp(160px, 22vw, 320px);
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 246, 218, 0.16), transparent 65%);
  animation: haloBreathe 16s ease-in-out infinite;
}

@keyframes chaliceLift {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-2deg); }
  50% { transform: translate3d(-6px, -12px, 0) rotate(2deg); }
}

@keyframes rosaryTurn {
  to { transform: rotate(360deg); }
}

@keyframes haloBreathe {
  0%, 100% { opacity: 0.5; scale: 0.96; }
  50% { opacity: 0.9; scale: 1.04; }
}

.sea-clownfish {
  width: clamp(44px, 5vw, 74px);
  color: rgba(201, 102, 87, 0.55);
  opacity: 0.65;
  animation: clownSwim 32s linear infinite;
}

.clownfish-a { bottom: 12%; left: -14%; }

.sea-puffer {
  bottom: 21%;
  left: 4%;
  width: clamp(52px, 6vw, 88px);
  color: rgba(201, 143, 77, 0.45);
  opacity: 0.62;
  filter: drop-shadow(0 0 16px rgba(201, 143, 77, 0.16));
  animation: pufferBob 20s ease-in-out infinite;
}

.sea-crab {
  bottom: 4%;
  left: 58%;
  width: clamp(46px, 5vw, 74px);
  color: rgba(201, 102, 87, 0.48);
  opacity: 0.62;
  animation: crabScuttle 26s ease-in-out infinite;
}

.sea-shell {
  right: 6%;
  bottom: 1%;
  width: clamp(38px, 4.2vw, 60px);
  color: rgba(226, 178, 112, 0.4);
  opacity: 0.6;
  animation: shellRock 30s ease-in-out infinite;
}

.sea-anemone {
  bottom: 1%;
  left: 45%;
  width: clamp(44px, 4.8vw, 70px);
  color: rgba(125, 218, 221, 0.38);
  opacity: 0.6;
  transform-origin: 50% 90%;
  animation: anemoneWave 14s ease-in-out infinite;
}

.sea-jelly.jelly-c {
  bottom: 38%;
  left: 1%;
  width: clamp(40px, 4.4vw, 64px);
  color: rgba(226, 178, 112, 0.3);
  animation-delay: -12s;
}

.sea-fish-mini {
  width: clamp(22px, 2.4vw, 36px);
  color: rgba(11, 125, 135, 0.45);
  opacity: 0;
  animation: miniSwim 38s linear infinite;
}

.mini-a { bottom: 24%; animation-delay: -4s; }
.mini-b { bottom: 16%; width: 20px; color: rgba(201, 143, 77, 0.45); animation-delay: -16s; }
.mini-c { bottom: 7%; animation-delay: -27s; }

@keyframes clownSwim {
  0% { transform: translate3d(0, 0, 0) scaleX(1); }
  49% { transform: translate3d(66vw, -16px, 0) scaleX(1); }
  50% { transform: translate3d(66vw, -16px, 0) scaleX(-1); }
  99% { transform: translate3d(0, 6px, 0) scaleX(-1); }
  100% { transform: translate3d(0, 0, 0) scaleX(1); }
}

@keyframes pufferBob {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-3deg); }
  50% { transform: translate3d(12px, -18px, 0) rotate(4deg); }
}

@keyframes crabScuttle {
  0%, 100% { transform: translate3d(0, 0, 0); }
  25% { transform: translate3d(-22px, -4px, 0); }
  50% { transform: translate3d(-8px, -10px, 0); }
  75% { transform: translate3d(-30px, -2px, 0); }
}

@keyframes shellRock {
  0%, 100% { transform: rotate(-6deg); }
  50% { transform: rotate(8deg); }
}

@keyframes anemoneWave {
  0%, 100% { transform: rotate(-5deg) scale(0.98); }
  50% { transform: rotate(6deg) scale(1.04); }
}

@keyframes miniSwim {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  8% { opacity: 0.7; }
  90% { opacity: 0.7; }
  100% { transform: translate3d(120vw, -10px, 0); opacity: 0; }
}

.jungle-toucan {
  bottom: 11%;
  left: 3%;
  width: clamp(50px, 5.6vw, 84px);
  color: rgba(201, 154, 55, 0.46);
  opacity: 0.64;
  animation: toucanBob 22s ease-in-out infinite;
}

.jungle-monkey {
  bottom: 16%;
  left: 22%;
  width: clamp(48px, 5.4vw, 82px);
  color: rgba(90, 62, 40, 0.34);
  opacity: 0.6;
  transform-origin: 50% 0;
  animation: monkeySwing 24s ease-in-out infinite;
}

.jungle-orchid {
  right: 6%;
  bottom: 6%;
  width: clamp(36px, 4vw, 58px);
  color: rgba(201, 102, 87, 0.42);
  opacity: 0.62;
  animation: flowerBreathe 18s ease-in-out infinite;
  animation-delay: -6s;
}

.butterfly-b {
  bottom: 30%;
  left: 8%;
  width: clamp(26px, 3vw, 44px);
  animation-delay: -9s;
}

.jungle-waterfall {
  top: 0;
  right: 22%;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, rgba(125, 218, 221, 0.22) 30%, rgba(125, 218, 221, 0.08));
  filter: blur(1px);
  animation: waterfallFlow 8s linear infinite;
}

@keyframes toucanBob {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-3deg); }
  50% { transform: translate3d(6px, -12px, 0) rotate(4deg); }
}

@keyframes monkeySwing {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(5deg); }
}

@keyframes waterfallFlow {
  0% { background-position: 0 0; opacity: 0.5; }
  50% { opacity: 1; }
  100% { background-position: 0 220px; opacity: 0.5; }
}

/* ---------- Ajustes por tema oscuro ---------- */

:root[data-theme="dark"] .victorian-watch,
:root[data-theme="dark"] .victorian-cameo {
  color: rgba(222, 188, 125, 0.4);
}

:root[data-theme="dark"] .victorian-rose {
  color: rgba(198, 130, 120, 0.32);
}

:root[data-theme="dark"] .futurista-planet,
:root[data-theme="dark"] .futurista-sat {
  color: rgba(83, 224, 236, 0.28);
}

:root[data-theme="dark"] .futurista-drone {
  color: rgba(126, 245, 231, 0.3);
}

:root[data-theme="dark"] .chess-piece.piece-e {
  color: var(--piece-dark);
  stroke: rgba(251, 245, 230, 0.18);
  opacity: 0.2;
}

:root[data-theme="dark"] .catolica-dove {
  color: rgba(255, 242, 205, 0.4);
}

:root[data-theme="dark"] .catolica-bell {
  color: rgba(222, 188, 125, 0.36);
}

:root[data-theme="dark"] .sea-octopus,
:root[data-theme="dark"] .sea-turtle,
:root[data-theme="dark"] .sea-angelfish {
  color: rgba(125, 218, 221, 0.32);
}

:root[data-theme="dark"] .sea-whale {
  color: rgba(125, 218, 221, 0.13);
}

:root[data-theme="dark"] .sea-seahorse,
:root[data-theme="dark"] .sea-starfish {
  color: rgba(226, 178, 112, 0.4);
}

:root[data-theme="dark"] .jungle-frog,
:root[data-theme="dark"] .jungle-snake {
  color: rgba(126, 196, 145, 0.3);
}

:root[data-theme="dark"] .jungle-parrot {
  color: rgba(232, 190, 96, 0.44);
}

:root[data-theme="dark"] .victorian-chandelier,
:root[data-theme="dark"] .victorian-letter,
:root[data-theme="dark"] .victorian-teacup,
:root[data-theme="dark"] .victorian-key {
  color: rgba(222, 188, 125, 0.38);
}

:root[data-theme="dark"] .futurista-orbit,
:root[data-theme="dark"] .futurista-hud,
:root[data-theme="dark"] .hud-coord {
  color: rgba(83, 224, 236, 0.26);
}

:root[data-theme="dark"] .chess-piece.piece-g {
  color: var(--piece-dark);
  stroke: rgba(251, 245, 230, 0.18);
  opacity: 0.18;
}

:root[data-theme="dark"] .catolica-chalice,
:root[data-theme="dark"] .catolica-rosary {
  color: rgba(222, 188, 125, 0.32);
}

:root[data-theme="dark"] .sea-clownfish,
:root[data-theme="dark"] .sea-puffer,
:root[data-theme="dark"] .sea-crab,
:root[data-theme="dark"] .sea-anemone,
:root[data-theme="dark"] .sea-fish-mini {
  color: rgba(125, 218, 221, 0.3);
}

:root[data-theme="dark"] .sea-shell,
:root[data-theme="dark"] .sea-jelly.jelly-c {
  color: rgba(226, 178, 112, 0.34);
}

:root[data-theme="dark"] .jungle-toucan,
:root[data-theme="dark"] .jungle-orchid {
  color: rgba(232, 190, 96, 0.4);
}

:root[data-theme="dark"] .jungle-monkey {
  color: rgba(196, 168, 132, 0.26);
}

:root[data-theme="dark"] .gel-mold,
:root[data-theme="dark"] .gel-cherry {
  color: rgba(255, 150, 120, 0.34);
}

:root[data-theme="dark"] .gel-spoon,
:root[data-theme="dark"] .gel-meringue {
  color: rgba(240, 200, 130, 0.32);
}

/* ---------- Pantallas estrechas ---------- */

@media (max-width: 900px) {
  .sea-whale,
  .sea-ray,
  .sea-turtle,
  .jungle-snake,
  .victorian-watch,
  .futurista-planet,
  .catolica-bell,
  .chess-piece.piece-f,
  .sprinkle-e,
  .sprinkle-f,
  .victorian-chandelier,
  .victorian-teacup,
  .victorian-key,
  .futurista-hud,
  .catolica-chalice,
  .sea-puffer,
  .sea-crab,
  .jungle-monkey,
  .jungle-waterfall,
  .cube-b,
  .berry-c,
  .gel-mold,
  .gel-spoon,
  .gel-cherry,
  .gel-meringue {
    display: none;
  }

  .sea-octopus {
    bottom: 8%;
    left: -2%;
    opacity: 0.22;
  }

  .sea-seahorse,
  .sea-starfish {
    opacity: 0.24;
  }

  .hud-coord {
    opacity: 0.7;
  }
}

@media (max-width: 600px) {
  .world-extra {
    opacity: 0.22;
  }

  .sea-octopus,
  .sea-seahorse,
  .sea-starfish,
  .jungle-frog,
  .jungle-flower,
  .victorian-rose,
  .futurista-sat,
  .catolica-dove,
  .victorian-letter,
  .futurista-orbit,
  .catolica-rosary,
  .sea-clownfish,
  .sea-shell,
  .sea-anemone,
  .jungle-toucan,
  .jungle-orchid,
  .butterfly-b,
  .hud-coord,
  .gel-cube,
  .gel-berry,
  .chess-notation {
    display: none;
  }

  .sea-fish-mini {
    display: none;
  }
}