/* =====================================================================
   Club Bear - ambiente: luces que parpadean, clima y noche
   ===================================================================== */

/* ---------- luces ---------- */
.room-light { pointer-events: none; transform-box: view-box; }
.room-light-core { pointer-events: none; transform-box: view-box; filter: drop-shadow(0 0 6px #ffe08a); }
.room-light-core.lamp { animation: lightLamp 3.2s ease-in-out infinite; }
.room-light-core.bulb { animation: lightBulb 1.8s ease-in-out infinite; }
.room-light-core.fire { animation: lightFire .55s ease-in-out infinite alternate; fill: #ffd27a; }
.room-light.lamp { animation: lightLamp 3.2s ease-in-out infinite; }
.room-light.window { animation: lightWindow 5s ease-in-out infinite; opacity: .7; }
.room-light.neon { animation: lightNeon 1.6s steps(1) infinite, lightHue 6s linear infinite; }
.room-light.bulb { animation: lightBulb 1.8s ease-in-out infinite; }
.room-light.fire { animation: lightFire .55s ease-in-out infinite alternate; }
@keyframes lightLamp { 0%, 100% { opacity: .85; } 46% { opacity: .95; } 50% { opacity: .55; } 54% { opacity: .9; } }
@keyframes lightWindow { 0%, 100% { opacity: .55; } 50% { opacity: .85; } }
@keyframes lightNeon { 0%, 86%, 100% { opacity: .85; } 88% { opacity: .25; } 92% { opacity: .9; } 94% { opacity: .3; } }
@keyframes lightHue { to { filter: hue-rotate(360deg); } }
@keyframes lightBulb { 0%, 100% { opacity: .45; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes lightFire { from { opacity: .6; transform: scale(.92); } to { opacity: 1; transform: scale(1.08); } }
/* de noche las luces brillan más */
#stage.night .room-light { filter: brightness(1.35); }
#stage.night .room-light.window, #stage.night .room-light.lamp { opacity: 1; }

/* ---------- noche y clima ---------- */
#nightFx { position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity 3s;
  background: radial-gradient(ellipse at 50% 40%, rgba(20,30,80,.12), rgba(8,12,40,.38)); mix-blend-mode: multiply; }
#nightFx.on { opacity: 1; }
#weatherFx { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; }
#weatherFx.rain { background: linear-gradient(rgba(70,90,130,.10), rgba(70,90,130,.16)); }

/* ---------- fogatas encendidas ---------- */
.room-fire { pointer-events: none; }

/* ---------- Candy Shop: caramelos y tienda ---------- */
.candy-drop { position: absolute; transform: translate(-50%, -100%); cursor: pointer; pointer-events: auto;
  filter: drop-shadow(0 4px 3px rgba(0,0,0,.25)); animation: candyBob 1.8s ease-in-out infinite; }
.candy-drop svg, .candy-drop img { width: 100%; height: 100%; display: block; object-fit: contain; pointer-events: none; }
.candy-drop.gold { filter: drop-shadow(0 0 10px rgba(255,210,60,1)); }
.candy-drop:hover { filter: drop-shadow(0 0 12px #fff6b0); }
.candy-drop.got { animation: candyGot .8s ease-out forwards; pointer-events: none; }
@keyframes candyBob { 50% { transform: translate(-50%, -112%) rotate(-6deg); } }
@keyframes candyGot { to { transform: translate(-50%, -260%) scale(1.5) rotate(20deg); opacity: 0; } }
.candy-pop { position: absolute; transform: translate(-50%, -50%); font: 800 34px var(--font); color: #ff5a8a; text-shadow: 0 3px 0 #fff, 0 0 8px #fff;
  pointer-events: none; z-index: 5000; animation: ffPop .9s ease-out forwards; white-space: nowrap; }
.hud-candy { display: flex; align-items: center; gap: 6px; padding: 6px 16px; border-radius: 30px; background: linear-gradient(#ffe0ef, #ffb3d4);
  border: 4px solid #b8326a; color: #6a1438; font: 700 26px var(--font); box-shadow: 0 4px 0 rgba(0,0,0,.2); }
.hud-candy span { font-size: 28px; }
#candyShop .candy-box { position: relative; width: 1480px; padding: 26px 32px 22px; border-radius: 36px; font-family: var(--font); text-align: center; color: #ffe7c4;
  background:
    radial-gradient(circle at 8% -8%, rgba(255, 176, 64, .5), transparent 280px),
    radial-gradient(circle at 98% 0%, rgba(160, 90, 255, .4), transparent 280px),
    linear-gradient(180deg, #3a1868 0%, #241042 46%, #1a1028 100%);
  border: 8px solid #ff9a2e; box-shadow: 0 0 0 8px #14081f, 0 24px 0 rgba(0,0,0,.35); }
#candyShop .x-btn { position: absolute; right: 18px; top: 18px; z-index: 2; }
.spooky-top { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0 78px 16px 6px; }
#candyShop h2 { margin: 0; font-size: 64px; color: #ffd36a; text-shadow: 0 4px 0 #4a1a08, 0 0 16px rgba(255, 170, 40, .4); }
.spooky-candy { font: 800 28px var(--font); color: #fff; background: linear-gradient(#ff7aa8, #e23b78); border: 4px solid #fff; border-radius: 999px; padding: 6px 18px; box-shadow: 0 4px 0 rgba(0,0,0,.25); white-space: nowrap; }
.spooky-layout { display: flex; gap: 22px; align-items: stretch; text-align: center; }
.spooky-clerk { width: 330px; flex: none; display: flex; flex-direction: column; align-items: center; padding: 14px 14px 10px; border-radius: 28px; background: rgba(255, 244, 220, .1); border: 4px dashed #ffb15a; }
.spooky-say { margin: 0 0 12px; background: #fff8ee; color: #3a1608; border: 4px solid #ffb15a; border-radius: 22px; padding: 12px 14px; font: 700 21px var(--font); line-height: 1.25; min-height: 92px; position: relative; box-shadow: 0 6px 0 rgba(0,0,0,.22); }
.spooky-say::after { content: ''; position: absolute; left: 50%; bottom: -18px; transform: translateX(-50%); border: 10px solid transparent; border-top: 12px solid #ffb15a; }
.spooky-say.pop { animation: spookySay .35s ease-out; }
@keyframes spookySay { from { transform: translateY(10px); opacity: 0; } }
.spooky-bear { border: 0; background: none; padding: 0; height: 240px; cursor: pointer; }
.spooky-bear svg { height: 100%; width: auto; display: block; }
.spooky-bear:hover svg { filter: drop-shadow(0 0 8px #ffd36a); }
.spooky-name { margin-top: 4px; font-size: 22px; color: #ffd7a8; }
.spooky-shop-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* la tienda tiene muchos artículos (mascotas, fondos, objetos): rejilla con scroll vertical */
.candy-items { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; align-items: stretch; max-height: 640px; overflow-y: auto; padding: 4px 8px 4px 2px; }
.candy-item { flex: 1; min-width: 0; padding: 14px; border-radius: 24px; background: linear-gradient(#fffaf3, #ffe7c8); border: 4px solid #ff9a2e; box-shadow: 0 8px 0 rgba(0,0,0,.18); display: flex; flex-direction: column; }
.candy-art { height: 156px; display: grid; place-items: center; }
.candy-art img { max-height: 146px; max-width: 240px; animation: floaty 3s ease-in-out infinite; }
.candy-art img.candy-bg { width: 110px; height: 146px; max-width: none; object-fit: cover; object-position: center 28%;
  border-radius: 16px; border: 4px solid #2a1030; box-shadow: 0 6px 0 rgba(0,0,0,.18); animation: none; }
.candy-item h3 { margin: 8px 0 4px; font-size: 26px; color: #7a2e00; }
.candy-item p { font-size: 16px; color: #5a4030; margin: 0 0 10px; flex: 1; }
.candy-price { font: 800 28px var(--font); color: #b8326a; margin-bottom: 10px; }
.candy-item .btn { width: 100%; font-size: 24px; padding: 10px 8px; }
.candy-hint { font-size: 20px; color: #ffd7a8; margin: 14px 0 0; }

/* ---------- tablón de población del Ayuntamiento ---------- */
.bear-population { font: 800 64px var(--font); fill: #7a3a10; stroke: #fffaf0; stroke-width: 6px; paint-order: stroke; }