/* ---------- animalitos de la isla ---------- */
.critter { position: absolute; transform: translate(-50%, -96%); cursor: pointer; transition: translate .1s; }
.critter img { width: 100%; height: 100%; display: block; filter: drop-shadow(0 4px 3px rgba(20,30,60,.25)); pointer-events: none; }
.critter.flip img { transform: scaleX(-1); }
.critter::after { content: ''; position: absolute; left: 15%; right: 15%; bottom: -3px; height: 10%; border-radius: 50%; background: rgba(0,0,0,.14); z-index: -1; }
.critter:hover img { filter: drop-shadow(0 0 6px #fff6b0) drop-shadow(0 4px 3px rgba(20,30,60,.25)); }
.critter.c-bunny:not(.hopping) img { animation: lifeNibble 2.8s ease-in-out infinite; transform-origin: 50% 100%; }
.critter.c-bunny.flip:not(.hopping) img { animation-name: lifeNibbleFlip; }
.critter.c-squirrel img { animation: lifeTail 1.6s ease-in-out infinite; transform-origin: 60% 100%; }
.critter.c-squirrel.flip img { animation-name: lifeTailFlip; }
.critter.c-duck { transform: translate(-50%, -70%); }
.critter.c-duck::after { display: none; }
.critter.c-duck img { animation: lifeBob 2.2s ease-in-out infinite; }
.critter.c-duck.flip img { animation-name: lifeBobFlip; }
.critter.c-duck.baby { scale: .7; }
.critter.happy img { animation: lifeHappy .6s cubic-bezier(.3,1.8,.5,1); }
.critter.flyoff { transition: none; animation: lifeFly 2.6s ease-in forwards; pointer-events: none; }
.critter.flyoff::after { display: none; }
@keyframes lifeNibble { 0%, 80%, 100% { transform: scale(1, 1); } 86% { transform: scale(1.03, .97); } 92% { transform: scale(.98, 1.03); } }
@keyframes lifeNibbleFlip { 0%, 80%, 100% { transform: scaleX(-1); } 86% { transform: scale(-1.03, .97); } 92% { transform: scale(-.98, 1.03); } }
@keyframes lifeTail { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-3deg); } }
@keyframes lifeTailFlip { 0%, 100% { transform: scaleX(-1) rotate(0); } 50% { transform: scaleX(-1) rotate(-3deg); } }
@keyframes lifeBob { 50% { transform: translateY(-4px) rotate(-2deg); } }
@keyframes lifeBobFlip { 0%, 100% { transform: scaleX(-1); } 50% { transform: scaleX(-1) translateY(-4px) rotate(-2deg); } }
@keyframes lifeHappy { 40% { transform: translateY(-22%) scale(1.08); } }
@keyframes lifeFly { 0% { translate: 0 0; } 100% { translate: var(--fx, 600px) -700px; opacity: .2; } }

.life-pop { position: absolute; transform: translate(-50%, -100%); white-space: nowrap; pointer-events: none; z-index: 6; font: 800 30px var(--font);
  color: #ff5a8a; -webkit-text-stroke: 1.5px #fff; text-shadow: 0 3px 0 rgba(120,20,60,.35); animation: lifePop 1.3s ease-out forwards; }
@keyframes lifePop { 0% { opacity: 0; transform: translate(-50%, -60%) scale(.6); } 20% { opacity: 1; transform: translate(-50%, -100%) scale(1.1); } 100% { opacity: 0; transform: translate(-50%, -220%); } }

/* peces que saltan */
.life-fish { position: absolute; width: 0; height: 0; z-index: 3; }
.life-fish img { position: absolute; left: -45px; top: -22px; width: 90px; cursor: pointer; animation: lifeJump 1.6s ease-in-out forwards; }
.life-fish.flip img { animation-name: lifeJumpFlip; }
.life-fish.caught img { animation-play-state: paused; filter: drop-shadow(0 0 10px #fff6b0); }
.life-fish .ring { position: absolute; left: -40px; top: -10px; width: 80px; height: 22px; border: 4px solid rgba(255,255,255,.85); border-radius: 50%; opacity: 0; animation: lifeRing 1s ease-out forwards; }
.life-fish .ring.r2 { animation-delay: 1.1s; }
@keyframes lifeJump { 0% { transform: translate(-60px, 0) rotate(-60deg); opacity: 0; } 10% { opacity: 1; } 50% { transform: translate(0, -150px) rotate(0); } 90% { opacity: 1; } 100% { transform: translate(60px, 0) rotate(60deg); opacity: 0; } }
@keyframes lifeJumpFlip { 0% { transform: translate(60px, 0) rotate(60deg) scaleX(-1); opacity: 0; } 10% { opacity: 1; } 50% { transform: translate(0, -150px) scaleX(-1); } 90% { opacity: 1; } 100% { transform: translate(-60px, 0) rotate(-60deg) scaleX(-1); opacity: 0; } }
@keyframes lifeRing { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.6); } }

/* búho */
.life-owl { position: absolute; transform: translate(-50%, -100%); cursor: pointer; }
.life-owl img { width: 100%; height: 100%; filter: drop-shadow(0 4px 3px rgba(0,0,0,.3)); }
.life-owl.happy img { animation: lifeHappy .6s cubic-bezier(.3,1.8,.5,1); }

.life-clock, .life-train { pointer-events: none; }

/* nombre de la canción de la sala, bajo el nombre de la sala */
#roomName[data-song]::after { content: attr(data-song); display: block; margin-top: 4px; font-size: .48em; font-weight: 600; opacity: .9; letter-spacing: .02em; }
@media (prefers-reduced-motion: reduce) { .critter img, .life-fish img { animation: none !important; } }

/* DJ: canciones desbloqueables */
#djPanel .dj-extra-h { margin: 14px 0 8px; font: 800 26px var(--font); color: #ffd23f; text-align: center; text-shadow: 0 2px 0 rgba(0,0,0,.4); }
#djPanel .diffs.dj-extra { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
#djPanel .diff.song-plus { min-height: 0; padding: 12px 14px; }
#djPanel .diff.song-plus b { font-size: 22px; }
#djPanel .diff.song-plus:not(.locked) { color: #fff; text-shadow: 0 2px 0 rgba(0,0,0,.3); }
#djPanel .diff.song-plus:not(.locked) small { color: rgba(255,255,255,.9); }
#djPanel .diff[data-diff="djTropical"]:not(.locked) { background: linear-gradient(#3ad6a0, #0f9a8a); box-shadow: 0 6px 0 #0a6a60; }
#djPanel .diff[data-diff="djFunk"]:not(.locked) { background: linear-gradient(#ffa13a, #d2541a); box-shadow: 0 6px 0 #8a3a10; }
#djPanel .diff[data-diff="djChip"]:not(.locked) { background: linear-gradient(#a86aff, #5a2ad0); box-shadow: 0 6px 0 #3a1a8a; }
#djPanel .diff[data-diff="djTrain"]:not(.locked) { background: linear-gradient(#5a8aff, #2a4ab8); box-shadow: 0 6px 0 #1a2a7a; }
#djPanel .diff[data-diff="djAurora"]:not(.locked) { background: linear-gradient(135deg, #3ad6a0, #5a6aff 50%, #ff5ab8); box-shadow: 0 6px 0 #3a1a6a; }
#djPanel .diff[data-diff="djTrueno"]:not(.locked) { background: linear-gradient(#ffe03a, #ff7a1a 45%, #2a2a4a); box-shadow: 0 6px 0 #1a1a2a; }