/* =====================================================================
   Club Bear - estilos del pueblo, mascotas y minijuegos Heladero y
   Luciérnagas (se carga después de style.css)
   ===================================================================== */

/* ---------- etiqueta al pasar el ratón ---------- */
#tip { position: absolute; transform: translate(-50%, -100%); padding: 6px 16px; border-radius: 16px; background: rgba(16,40,75,.9); color: #fff;
  font: 600 24px var(--font); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .12s; z-index: 2500; }
#tip.show { opacity: 1; }

/* ---------- acciones: brújula para sentarse ---------- */
#actionMenu { min-width: 330px; }
.sit-title { font: 700 24px var(--font); color: var(--blue-d); }
.sit-compass { display: grid; grid-template-columns: repeat(3, 84px); gap: 8px; justify-content: center; }
.sit-dir { width: 84px; height: 70px; border: 0; border-radius: 16px; background: #eef6ff; font: 700 40px var(--font); color: var(--blue-d); }
.sit-dir:hover { background: #cfe6ff; transform: scale(1.06); }
.sit-bear { display: grid; place-items: center; }
.sit-bear svg { width: 60px; height: 56px; }
.sit-hint { font: 500 18px/1.3 var(--font); color: #6a7d92; text-align: center; max-width: 290px; justify-self: center; }

/* ---------- decoración animada ---------- */
.firefly-dot { animation: ffBlink 2.2s ease-in-out infinite; }
@keyframes ffBlink { 0%, 100% { opacity: .15; } 50% { opacity: 1; } }
.decor .type-dot { animation: typeDot 1.2s infinite; }
.decor .type-dot.d2 { animation-delay: .2s; } .decor .type-dot.d3 { animation-delay: .4s; }
@keyframes typeDot { 0%, 100% { opacity: .25; } 40% { opacity: 1; } }
.decor .tap { animation: tap .6s steps(2) infinite; }
.decor .tap.t2 { animation-delay: .3s; }
@keyframes tap { 50% { opacity: 0; } }
.decor .screen-glow { animation: glowPulse 1.6s ease-in-out infinite; }

/* ---------- foquita que acompaña ---------- */
.pet-follower { position: absolute; transform: translate(-50%, -100%); pointer-events: auto; cursor: pointer; }
.pet-follower img { width: 100%; height: 100%; display: block; transition: transform .15s; }
.pet-follower.flip img { transform: scaleX(-1); }
.pet-follower.hop img { animation: petHop .32s ease-in-out infinite; }
.pet-follower.flip.hop img { animation-name: petHopFlip; }
@keyframes petHop { 50% { transform: translateY(-14%); } }
@keyframes petHopFlip { 0%, 100% { transform: scaleX(-1); } 50% { transform: scaleX(-1) translateY(-14%); } }
.pet-follower.joy img { animation: petJoy .5s ease-out 2; }
@keyframes petJoy { 50% { transform: translateY(-30%) rotate(-8deg); } }
.pet-follower:hover img { filter: drop-shadow(0 0 8px #fff6b0); }
.pet-heart, .pet-card-heart { position: absolute; left: 50%; top: -10%; font-size: 40px; animation: heartUp 1.1s ease-out forwards; pointer-events: none; }
@keyframes heartUp { from { transform: translate(-50%, 0) scale(.5); opacity: 1; } to { transform: translate(-50%, -90px) scale(1.2); opacity: 0; } }
.card-pet { position: absolute; right: 36px; bottom: 34px; width: 150px; }
.card-pet img { width: 100%; display: block; }

/* ---------- conversación con Silver ---------- */
.talk-box { display: flex; align-items: center; gap: 30px; width: 1100px; padding: 30px 40px; border-radius: 34px; background: linear-gradient(#ffffff, #e2f0fc);
  border: 6px solid var(--blue-d); box-shadow: 0 14px 0 rgba(0,0,0,.25); }
.talk-portrait { flex: none; width: 240px; height: 240px; border-radius: 50%; border: 6px solid var(--blue-d);
  background: url(../assets/ayuntamiento.webp) no-repeat; background-size: 1450px 809px; background-position: -945px -150px; }
.talk-content { flex: 1; min-width: 0; }
.talk-name { font: 700 42px var(--font); color: #c0392b; }
.talk-content p { font: 500 34px/1.35 var(--font); color: #263445; margin: 10px 0 24px; min-height: 92px; }
.talk-content p.typing { animation: typeIn .5s ease-out; }
@keyframes typeIn { from { opacity: 0; transform: translateY(8px); } }
.talk-content .row { justify-content: flex-start; }

/* ---------- mascota ---------- */
.pet-box { position: relative; width: 1100px; padding: 36px 46px; border-radius: 34px; background: linear-gradient(160deg, #f0f7ff, #cfe6fb);
  border: 6px solid #2d5f93; box-shadow: 0 16px 0 rgba(0,0,0,.25); }
.pet-box .x-btn { right: 24px; top: 24px; }
.pet-box h2 { margin: 0 0 16px; font: 700 50px var(--font); color: var(--blue-d); }
.pet-tabs { position: relative; z-index: 5; display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.pet-tab { width: 96px; height: 80px; border: 4px solid #9cc3e6; border-radius: 18px; background: #fff; padding: 4px; }
.pet-tab img { width: 100%; height: 100%; object-fit: contain; }
.pet-tab.on { border-color: var(--blue); background: #e5f2ff; }
.pet-main { display: flex; gap: 40px; align-items: center; }
.pet-portrait { position: relative; flex: none; width: 380px; height: 330px; border-radius: 30px; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 60%, #ffffff, #b9daf5 70%); border: 5px solid #9cc3e6; }
.pet-portrait img { width: 300px; }
/* las mascotas altas (fantasmas) se ajustan por altura: antes se salían del recuadro y tapaban las pestañas */
.pet-portrait img[src*="fantasma_"] { width: auto; height: 240px; }
.pet-portrait img.joy { animation: petJoy .5s ease-out 2; }
.pet-info { flex: 1; min-width: 0; display: grid; gap: 12px; }
.pet-name-label { font: 600 22px var(--font); color: #5a7390; }
#petName { font: 700 38px var(--font); color: #10345f; border: 4px solid #9cc3e6; border-radius: 16px; padding: 6px 16px; width: 100%; outline: 0; }
#petName:focus { border-color: var(--blue); }
.pet-hearts { display: flex; gap: 10px; font: 400 54px/1 var(--font); color: #1f2328; }
.pet-hearts span.on { color: #ff3b5c; text-shadow: 0 3px 0 #a3122c; animation: heartPop .4s ease-out; }
@keyframes heartPop { 50% { transform: scale(1.3); } }
.pet-bar { display: grid; grid-template-columns: 140px 1fr 70px; align-items: center; gap: 12px; font: 600 24px var(--font); color: #10345f; }
.pet-bar > div { height: 22px; border-radius: 12px; background: #fff; border: 3px solid #9cc3e6; overflow: hidden; }
.pet-bar i { display: block; height: 100%; border-radius: 10px; transition: width .4s; }
.pet-bar b { text-align: right; font-variant-numeric: tabular-nums; }
.pet-actions { display: flex; gap: 18px; align-items: center; margin-top: 24px; flex-wrap: wrap; }
.pet-actions .btn small { font-size: 22px; opacity: .85; }
.pet-play { width: 120px; height: 120px; border-radius: 50%; border: 6px solid #a3122c; background: radial-gradient(circle at 40% 35%, #ff8aa0, #ff3b5c 60%);
  color: #fff; font: 700 56px/1 var(--font); display: grid; place-items: center; box-shadow: 0 6px 0 rgba(0,0,0,.25); }
.pet-play small { font-size: 18px; margin-top: -26px; }
.pet-play:hover { transform: scale(1.07); }
.pet-empty { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 20px; }
.pet-empty img { width: 220px; filter: grayscale(.4); opacity: .7; }
.pet-empty p { font: 500 32px/1.4 var(--font); color: #263445; margin: 0; }
.pet-empty small { font: 500 24px var(--font); color: #5a7390; }

.adopt-sub { font: 500 26px var(--font); color: #34506e; margin: 0 0 18px; display: flex; align-items: center; gap: 8px; }
.adopt-layout { display: flex; gap: 30px; }
.adopt-grid { display: grid; grid-template-columns: repeat(4, 150px); gap: 14px; }
.adopt-opt { border: 5px solid #9cc3e6; border-radius: 22px; background: #fff; padding: 8px; display: grid; gap: 4px; justify-items: center; font: 600 22px var(--font); color: #10345f; }
.adopt-opt img { width: 120px; height: 98px; object-fit: contain; }
.adopt-opt:hover { transform: translateY(-3px); }
.adopt-opt.on { border-color: #ff8a00; background: #fff6e6; box-shadow: 0 0 0 4px rgba(255,138,0,.25); }
.adopt-side { flex: 1; min-width: 0; display: grid; gap: 12px; align-content: start; }
.adopt-preview { height: 230px; border-radius: 26px; display: grid; place-items: center; background: radial-gradient(circle at 50% 60%, #fff, #b9daf5 75%); border: 5px solid #9cc3e6; }
.adopt-preview img { width: 240px; animation: floaty 2.4s ease-in-out infinite; }
.adopt-side label { font: 600 24px var(--font); color: #34506e; }
#adoptName { font: 700 32px var(--font); padding: 8px 16px; border: 4px solid #9cc3e6; border-radius: 16px; outline: 0; }

#petShopItems { display: grid; gap: 16px; margin-bottom: 22px; }
.ps-item { display: flex; align-items: center; gap: 24px; padding: 16px 24px; background: #fff; border: 4px solid #9cc3e6; border-radius: 24px; }
.ps-icon { font-size: 80px; }
.ps-info { flex: 1; min-width: 0; display: grid; gap: 4px; }
.ps-info b { font: 700 32px var(--font); color: #10345f; }
.ps-info small { font: 500 22px var(--font); color: #5a7390; }
.ps-buy { display: grid; justify-items: center; gap: 6px; }
.ps-buy .cat-price { font-size: 36px; margin: 0; }

/* ---------- catálogo con varias prendas ---------- */
.cat-head { width: 100%; display: flex; justify-content: center; margin-bottom: 8px; }
.cat-head .cat-tag { position: static; transform: rotate(-3deg); }
.cat-items { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; width: 100%; }
.cat-item { display: grid; justify-items: center; text-align: center; gap: 4px; background: #fff7ea; border: 4px solid #f0d9b5; border-radius: 22px; padding: 12px; }
.cat-item .cat-item-art { width: 190px; height: 210px; }
.cat-item h3 { font-size: 34px; margin: 0; }
.cat-item p { font-size: 20px; margin: 0; }
.cat-item .cat-price { font-size: 38px; margin: 4px 0; }

/* =====================================================================
   HELADERO
   ===================================================================== */
#iceGame { position: absolute; inset: 0; z-index: 3200; display: none; overflow: hidden; }
#iceGame.open { display: block; }
.ic-bg { position: absolute; inset: 0; background: url(../assets/heladeria.webp) center/cover; filter: blur(5px) brightness(.85) saturate(1.1); transform: scale(1.05); }
.ic-hud { position: absolute; left: 0; right: 0; top: 0; height: 90px; display: flex; align-items: center; gap: 36px; padding: 0 30px; z-index: 5;
  background: linear-gradient(#ff9ec4, #f06b9f); color: #fff; border-bottom: 6px solid #b83d6c; }
.ic-hud .cg-title { margin-right: auto; }
.ic-hud .cg-stat b { color: #fff; }
.ic-lives { display: flex; gap: 4px; font-size: 36px; }
.ic-lives .lost { filter: grayscale(1); opacity: .35; }
.ic-field { position: absolute; left: 0; right: 0; top: 90px; bottom: 0; cursor: none; }
#icItems { position: absolute; left: 0; top: -90px; width: 100%; height: 1116px; pointer-events: none; }
.ic-item { position: absolute; left: 0; top: 0; width: 110px; height: 100px; will-change: transform; }
.ic-item svg { width: 100%; height: 100%; display: block; }
.ic-item.falling { transition: transform .8s cubic-bezier(.4,0,1,1); }
.ic-player { position: absolute; left: 0; top: -90px; width: 0; height: 1116px; pointer-events: none; }
.ic-cone { position: absolute; left: -66px; top: 920px; width: 132px; height: 180px; }
.ic-cone svg { width: 100%; height: 100%; }
.ic-stack { position: absolute; left: -60px; bottom: calc(1116px - 978px); width: 120px; }
.ic-scoop { position: absolute; left: 0; width: 120px; height: 110px; animation: scoopLand .2s ease-out; }
.ic-scoop svg { width: 100%; height: 100%; }
@keyframes scoopLand { from { transform: translateY(-20px) scale(1.1, .9); } }
.ic-player.hurt .ic-cone, .ic-player.hurt .ic-stack { animation: hurtBlink .9s steps(1); }
@keyframes hurtBlink { 0%, 22%, 44%, 66% { opacity: .25; filter: drop-shadow(0 0 10px #ff3b3b) sepia(1) saturate(4) hue-rotate(-30deg); } 11%, 33%, 55%, 77%, 100% { opacity: 1; filter: none; } }
.ic-pop { position: absolute; transform: translateX(-50%); font: 700 40px var(--font); text-shadow: 0 3px 0 rgba(0,0,0,.4); pointer-events: none; white-space: nowrap; animation: popUp 1s ease-out forwards; }
.ic-pop.big { font-size: 56px; }
@keyframes popUp { to { transform: translate(-50%, -90px); opacity: 0; } }
.ic-done-cone { position: absolute; top: 300px; transform: translateX(-50%); animation: coneFly 1.1s ease-in forwards; pointer-events: none; }
.ic-mini { position: relative; width: 80px; height: 200px; }
.ic-mini span { position: absolute; left: 0; bottom: 0; width: 80px; height: 110px; }
.ic-mini span svg { width: 100%; height: 100%; }
.ic-mini i { position: absolute; left: 6px; width: 68px; height: 50px; border-radius: 50%; border: 3px solid #2a1a10; }
@keyframes coneFly { to { transform: translate(800px, -400px) scale(.4) rotate(30deg); opacity: 0; } }
.ic-panel { background: linear-gradient(#fff3f8, #ffd9e8); border-color: #e05a8f; }
.ic-panel h2 { color: #c2326b; }

/* =====================================================================
   LUCIÉRNAGAS
   ===================================================================== */
#ffGame { position: absolute; inset: 0; z-index: 3200; display: none; overflow: hidden; background: #050b14; }
#ffGame.open { display: block; }
.ff-bg { position: absolute; inset: 0; background: url(../assets/bosque.webp) center/cover; filter: brightness(.22) saturate(.7) hue-rotate(10deg); }
.ff-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 55%, transparent 30%, rgba(0,0,8,.75) 85%); }
.ff-hud { position: absolute; left: 0; right: 0; top: 0; height: 90px; display: flex; align-items: center; gap: 30px; padding: 0 30px; z-index: 5;
  background: linear-gradient(#18324a, #0d1f30); color: #fff6c2; border-bottom: 6px solid #ffd84a; }
.ff-hud .cg-title { margin-right: auto; }
.ff-hud .cg-stat b { color: #fff; }
.ff-timer { width: 500px; height: 22px; border-radius: 12px; background: rgba(255,255,255,.15); overflow: hidden; }
.ff-timer i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #ffd84a, #9dff6a); }
.ff-field { position: absolute; left: 0; right: 0; top: 0; bottom: 0; cursor: crosshair; }
.ff-field.paused .ff-bug, .ff-field.paused .ff-bug i { animation-play-state: paused; }
.ff-bug { position: absolute; width: 110px; height: 110px; margin: -55px 0 0 -55px; border-radius: 50%; cursor: pointer;
  animation: bugLife var(--life) ease-in-out forwards; }
.ff-bug i { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px; border-radius: 50%; background: #fffbd0;
  box-shadow: 0 0 24px 12px rgba(255,236,110,.95), 0 0 80px 34px rgba(190,255,90,.5); animation: bugFlicker .35s ease-in-out infinite alternate; }
.ff-bug.gold i { background: #fff; box-shadow: 0 0 22px 12px rgba(255,200,40,1), 0 0 80px 34px rgba(255,170,0,.6); }
@keyframes bugLife { 0% { opacity: 0; transform: translate(0, 0) scale(.4); } 15% { opacity: 1; transform: scale(1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.6); } }
@keyframes bugFlicker { to { transform: scale(.75); opacity: .8; } }
.ff-fly { position: absolute; width: 18px; height: 18px; margin: -9px; border-radius: 50%; background: #fffbd0; box-shadow: 0 0 20px 8px rgba(255,236,110,.9);
  transition: left .55s ease-in, top .55s ease-in, opacity .55s; pointer-events: none; z-index: 4; }
.ff-fly.gold { box-shadow: 0 0 24px 10px rgba(255,190,30,1); }
.ff-jar { --fill: 0; position: absolute; right: 60px; top: 110px; width: 130px; height: 170px; border-radius: 24px 24px 34px 34px; z-index: 4; pointer-events: none;
  border: 6px solid rgba(220,240,255,.8); background: linear-gradient(to top, rgba(255,236,110,.85) calc(var(--fill) * 100%), rgba(255,255,255,.08) calc(var(--fill) * 100%));
  box-shadow: 0 0 calc(var(--fill) * 60px) rgba(255,236,110,.8); display: grid; place-items: center; }
.ff-jar::before { content: ''; position: absolute; top: -26px; left: 14px; right: 14px; height: 22px; border-radius: 8px; background: #a7744a; border: 5px solid #5a3a1f; }
.ff-jar span { font: 700 54px var(--font); color: #fff; text-shadow: 0 3px 0 rgba(0,0,0,.5); }
.ff-jar.bump { animation: jarBump .25s; }
@keyframes jarBump { 50% { transform: scale(1.1); } }
.ff-panel { background: linear-gradient(#1c3550, #0f2133); border-color: #ffd84a; color: #fff; box-shadow: 0 0 0 2000px rgba(0,0,10,.5), 0 0 50px rgba(255,216,74,.4); }
.ff-panel h2 { color: #ffe45c; }
.ff-panel .howto { background: rgba(255,255,255,.08); color: #e8f1ff; }
.ff-panel .sub { color: #c9d8ec; }
.ff-panel .results > div { color: #e8f1ff; border-color: rgba(255,255,255,.18); }
.ff-panel .results .total { color: #ffe45c; }
.ff-panel .new-stamps .stamp-face.small { --hole: #172d44; }
.ff-result-jar { margin: 0 auto 14px; width: 130px; height: 160px; border-radius: 22px 22px 32px 32px; border: 6px solid rgba(220,240,255,.8);
  background: radial-gradient(circle, rgba(255,240,140,.95), rgba(255,200,60,.6)); box-shadow: 0 0 50px rgba(255,236,110,.8); display: grid; place-items: center; }
.ff-result-jar span { font: 700 60px var(--font); color: #5a3a00; }

/* pestañas del álbum en una sola línea */
.album-tab { white-space: nowrap; font-size: 21px; padding: 10px 14px 14px; }
.album-tab.on { padding-bottom: 20px; }