/* =====================================================================
   Club Bear - pantalla principal, mascotas que bailan, energía del día,
   chimenea, pelajes del Gachapón y el Gachapón de la Estación
   ===================================================================== */

/* ---------- pantalla principal con START ---------- */
#splash { position: absolute; inset: 0; z-index: 30; background: url(../assets/principal.webp) center / cover no-repeat; transition: opacity .6s, transform .6s; }
#splash.gone { opacity: 0; transform: scale(1.06); pointer-events: none; }
.splash-start { position: absolute; left: 794px; top: 968px; width: 414px; height: 132px; border: 0; border-radius: 66px; background: transparent; color: transparent;
  font-size: 1px; cursor: pointer; animation: splashPulse 1.6s ease-in-out infinite; }
.splash-start:hover { box-shadow: 0 0 0 6px rgba(255,255,255,.7), 0 0 40px 10px rgba(255,255,160,.8); }
.splash-start:focus-visible { outline: 5px solid #ffd23f; outline-offset: 6px; }
@keyframes splashPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } 50% { box-shadow: 0 0 26px 8px rgba(255,255,255,.55); } }

/* ---------- las mascotas bailan ---------- */
/* el nombre de la mascota NO baila: se queda quieto bajo sus pies (solo baila la mascota) */
.pet-follower.dance > :not(.pet-name) { animation: petDance .7s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes petDance { 0%, 100% { translate: 0 0; rotate: -10deg; scale: 1 1; } 25% { translate: 0 -18%; rotate: 0deg; scale: .95 1.08; }
  50% { translate: 0 0; rotate: 10deg; scale: 1.06 .92; } 75% { translate: 0 -18%; rotate: 0deg; scale: .95 1.08; } }

/* ---------- chimenea de la cabaña ---------- */
.cabin-fire { pointer-events: none; }

/* ---------- pelajes del Gachapón ---------- */
svg.gsk-neb { filter: drop-shadow(0 0 10px rgba(170,110,255,.8)) drop-shadow(0 0 22px rgba(255,120,220,.4)); }
svg.gsk-fire { filter: drop-shadow(0 0 10px rgba(255,140,40,.9)); animation: gskFlicker .35s ease-in-out infinite alternate; }
svg.gsk-volt { filter: drop-shadow(0 0 8px rgba(90,232,255,.95)); animation: gskVolt 1.2s steps(1) infinite; }
svg.gsk-rose { filter: drop-shadow(0 0 8px rgba(255,190,200,.9)) drop-shadow(0 0 18px rgba(255,255,255,.5)); }
svg.gsk-jade { filter: drop-shadow(0 0 10px rgba(110,240,170,.85)); }
svg.gsk-galaxy { filter: drop-shadow(0 0 12px rgba(120,90,255,.9)) drop-shadow(0 0 26px rgba(80,160,255,.5)); }
svg.gsk-disco { animation: gskDisco 2s linear infinite; }
svg.gsk-holo { opacity: .88; animation: gskGlitch 2.4s steps(1) infinite; filter: drop-shadow(0 0 10px rgba(127,232,255,.9)); }
svg.gsk-lava { animation: gskLava 1.4s ease-in-out infinite; }
svg.gsk-storm { animation: gskStorm 2.6s steps(1) infinite; }
@keyframes gskFlicker { from { filter: drop-shadow(0 0 8px rgba(255,140,40,.8)); } to { filter: drop-shadow(0 0 18px rgba(255,90,20,1)); } }
@keyframes gskVolt { 0%, 70%, 100% { filter: drop-shadow(0 0 8px rgba(90,232,255,.95)); } 72%, 78% { filter: drop-shadow(0 0 22px #fff27a) brightness(1.4); } }
@keyframes gskDisco { from { filter: hue-rotate(0deg) drop-shadow(0 0 12px rgba(255,90,184,.9)); } to { filter: hue-rotate(360deg) drop-shadow(0 0 12px rgba(255,90,184,.9)); } }
@keyframes gskGlitch { 0%, 88%, 100% { translate: 0 0; } 89% { translate: -6px 2px; } 91% { translate: 7px -3px; opacity: .5; } 93% { translate: -3px 0; } 95% { translate: 0 0; opacity: .9; } }
@keyframes gskLava { 0%, 100% { filter: drop-shadow(0 0 8px rgba(255,90,26,.7)); } 50% { filter: drop-shadow(0 0 22px rgba(255,140,40,1)); } }
@keyframes gskStorm { 0%, 70%, 100% { filter: drop-shadow(0 0 6px rgba(140,180,255,.6)); } 72%, 80% { filter: drop-shadow(0 0 26px #fff) brightness(1.6); } }
@media (prefers-reduced-motion: reduce) { svg.gsk { animation: none !important; } .pet-follower.dance > * { animation: none; } }

/* =====================================================================
   🎰 Gachapón
   ===================================================================== */
.gc-box { position: relative; width: 1500px; min-height: 860px; padding: 28px 36px; border-radius: 36px; font-family: var(--font); overflow: hidden;
  background: radial-gradient(circle at 20% 0, #fff 0, transparent 40%), linear-gradient(#fff6fb, #ffe0ef); border: 8px solid #c2457e; box-shadow: 0 18px 0 rgba(0,0,0,.25); }
.gc-box .x-btn { right: 20px; top: 20px; z-index: 5; }
.gc-layout { display: grid; grid-template-columns: 470px 1fr; gap: 30px; align-items: start; }
.gc-machine { position: relative; height: 780px; border-radius: 30px; overflow: hidden; border: 6px solid #fff; box-shadow: inset 0 0 0 4px #f2bcd2, 0 8px 0 rgba(0,0,0,.15);
  background: linear-gradient(#ffe7f3, #ffd0e6); }
/* las dos máquinas, recortadas del dibujo de la estación */
.gc-art { position: absolute; left: 50%; top: 50%; width: 360px; height: 480px; transform: translate(-50%, -50%) scale(1.55);
  background: url(../assets/estacion-dentro.webp) -6px -660px / 2000px 1116px no-repeat; border-radius: 20px; }
.gc-knob { position: absolute; left: 50%; bottom: 40px; width: 110px; height: 110px; margin-left: -55px; border-radius: 50%; border: 8px solid #7a2a4a;
  background: radial-gradient(circle, #fff 0 20%, #ff8ab8 21% 100%); box-shadow: 0 6px 0 rgba(0,0,0,.25); }
.gc-knob::after { content: ''; position: absolute; left: 50%; top: 8px; bottom: 8px; width: 18px; margin-left: -9px; border-radius: 9px; background: #7a2a4a; }
.gc-knob.turn { animation: gcTurn .8s cubic-bezier(.3,1.3,.5,1); }
@keyframes gcTurn { to { transform: rotate(360deg); } }
.gc-side h2 { margin: 0; font: 700 50px var(--font); color: #b8326a; text-shadow: 0 3px 0 #fff; }
.gc-sub { margin: 6px 0 14px; font: 500 23px/1.35 var(--font); color: #5a2a42; }
.gc-buy { display: flex; align-items: center; gap: 22px; font: 600 24px var(--font); color: #5a2a42; }
.gc-buy .btn[disabled] { opacity: .6; }
.gc-pity { margin: 12px 0; font: 600 20px var(--font); color: #8a5a00; }
.gc-tiers { display: grid; gap: 10px; }
.gc-tier { padding: 8px 14px; border-radius: 18px; background: rgba(255,255,255,.85); border: 3px solid #f2bcd2; }
.gc-tier.t-legend { border-color: #f2b51c; background: linear-gradient(90deg, #fffbe6, #fff); }
.gc-tier.t-increible { border-color: #ff5ab8; background: linear-gradient(90deg, #fff0fa, #f0f6ff, #fffbe6); }
.gc-tier-h { display: flex; justify-content: space-between; align-items: baseline; }
.gc-tier-h b { font-size: 24px; }
.gc-tier-h small { font: 600 18px var(--font); color: #8a6a7a; }
.gc-faces { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.gc-face { width: 52px; height: 48px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.gc-face svg { width: 52px; height: 48px; }
.gc-face:hover { transform: scale(1.18); }
.gc-face.locked { cursor: default; border-radius: 50%; background: #e8d6e0; color: #b89aa8; font: 800 26px var(--font); width: 46px; height: 46px; }
.gc-tip { margin: 12px 0 0; font: 500 19px var(--font); color: #7a4a62; }

/* ---------- la cápsula ---------- */
.gc-show { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 45%, rgba(255,255,255,.96), rgba(255,226,240,.97) 60%, rgba(220,180,210,.98)); }
.gc-show[hidden] { display: none; }
.gc-show.gold { background: radial-gradient(circle at 50% 45%, #fffbe0, #ffe48a 55%, #e0a020); }
.gc-show.t-increible { background: radial-gradient(circle at 50% 45%, #fff, #ffd6f4 40%, #b8a4ff 70%, #5a8aff); }
.gc-rays { position: absolute; left: 50%; top: 45%; width: 1400px; height: 1400px; margin: -700px 0 0 -700px; opacity: 0; pointer-events: none;
  background: repeating-conic-gradient(rgba(255,255,255,.55) 0 10deg, transparent 10deg 20deg); border-radius: 50%; transition: opacity .5s; }
.gc-show.reveal .gc-rays { opacity: 1; animation: gcSpin 12s linear infinite; }
.gc-show.gold.reveal .gc-rays { background: repeating-conic-gradient(rgba(255,255,255,.75) 0 8deg, transparent 8deg 16deg); }
@keyframes gcSpin { to { transform: rotate(360deg); } }
.gc-capsule { position: relative; width: 240px; height: 240px; cursor: pointer; transform: translateY(-700px); filter: drop-shadow(0 18px 14px rgba(0,0,0,.25)); }
.gc-capsule.drop { animation: gcDrop .9s cubic-bezier(.3,1.5,.5,1) forwards; }
@keyframes gcDrop { 0% { transform: translateY(-700px) rotate(-30deg); } 100% { transform: translateY(0) rotate(0); } }
.gc-capsule i { position: absolute; left: 0; width: 240px; height: 120px; }
.gc-top { top: 0; border-radius: 120px 120px 0 0; background: radial-gradient(circle at 35% 30%, #fff 0 12%, var(--shell) 40%); border: 7px solid rgba(0,0,0,.35); border-bottom: 0; box-sizing: border-box; transition: transform .7s cubic-bezier(.3,1.2,.4,1), opacity .7s; }
.gc-bot { top: 120px; border-radius: 0 0 120px 120px; background: linear-gradient(#fff, #e8e8f0); border: 7px solid rgba(0,0,0,.35); border-top: 4px solid rgba(0,0,0,.3); box-sizing: border-box; transition: transform .7s cubic-bezier(.3,1.2,.4,1), opacity .7s; }
.gc-shine { top: 22px !important; left: 48px !important; width: 46px !important; height: 26px !important; border-radius: 50%; background: rgba(255,255,255,.85); transform: rotate(-30deg); }
.gold .gc-top { background: radial-gradient(circle at 35% 30%, #fff 0 12%, #ffd23f 40%, #c98a0a); box-shadow: 0 0 40px #ffe48a; }
.t-increible .gc-top { background: conic-gradient(from 0deg, #ff5ab8, #ffd23f, #5ae8ff, #8aff6a, #b07cff, #ff5ab8); box-shadow: 0 0 50px #ff9ae0; }
.gc-capsule.shake { animation: gcShake .7s ease-in-out; transform: none; }
@keyframes gcShake { 0%, 100% { rotate: 0deg; } 20% { rotate: -14deg; } 40% { rotate: 12deg; } 60% { rotate: -9deg; } 80% { rotate: 6deg; } }
.gc-capsule.open .gc-top { transform: translate(-160px, -260px) rotate(-60deg); opacity: 0; }
.gc-capsule.open .gc-bot { transform: translate(160px, 200px) rotate(50deg); opacity: 0; }
.gc-capsule.open .gc-shine { opacity: 0; }
.gc-capsule.open { pointer-events: none; position: absolute; }
.gc-hint { position: relative; margin: 30px 0 0; font: 700 32px var(--font); color: #7a2a4a; text-align: center; animation: gcHint 1s ease-in-out infinite alternate; }
@keyframes gcHint { to { transform: scale(1.06); } }
.gc-prize { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; animation: gcPrize .7s cubic-bezier(.3,1.5,.5,1); }
@keyframes gcPrize { from { transform: scale(.3); opacity: 0; } }
.gc-banner { padding: 8px 40px; border-radius: 30px; color: #fff; font: 800 38px var(--font); text-shadow: 0 3px 0 rgba(0,0,0,.3); border: 5px solid #fff; box-shadow: 0 6px 0 rgba(0,0,0,.2); }
.t-increible .gc-banner { background: linear-gradient(90deg, #ff5ab8, #ffb02a, #5ae8ff, #b07cff) !important; animation: gcBanner 1s ease-in-out infinite alternate; }
@keyframes gcBanner { to { transform: scale(1.08) rotate(-2deg); } }
.gc-bear { width: 290px; height: 420px; margin-top: 6px; }
.gc-bear svg { width: 100%; height: 100%; overflow: visible; }
.gc-prize h3 { margin: 0; font: 700 40px var(--font); color: #3a1a2a; }
.gc-prize p { margin: 4px 0 10px; max-width: 700px; font: 500 22px var(--font); color: #5a3a4a; }
.gc-stk { display: flex; align-items: center; gap: 14px; padding: 8px 22px 8px 10px; border-radius: 22px; background: #fff; border: 4px solid #f2bcd2; }
.gc-stk img { width: 90px; height: 90px; object-fit: contain; transform: rotate(-8deg); }
.gc-stk span { display: flex; flex-direction: column; text-align: left; font: 600 18px var(--font); color: #8a5a6a; }
.gc-stk b { font-size: 26px; color: #3a1a2a; }
.gc-stk.legend { border-color: #f2b51c; background: linear-gradient(#fffbe6, #ffe48a); box-shadow: 0 0 30px rgba(255,200,40,.8); }
.gc-btns { display: flex; gap: 14px; margin-top: 16px; }
.gc-conf { position: absolute; top: 45%; width: 16px; height: 26px; border-radius: 4px; pointer-events: none; animation: gcConf 2s ease-out forwards; }
@keyframes gcConf { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 100% { transform: translate(var(--dx), calc(var(--dy) + 900px)) rotate(var(--r)); opacity: 0; } }
.stk-cell.legend { border-color: #f2b51c; background: linear-gradient(#fffbe6, #fff); }