/* =====================================================================
   Club Bear - mapa, álbum por categorías, estampillas doradas, caminos
   iluminados, foquitas en casa y minijuego de Pesca
   ===================================================================== */

/* ---------- caminos que se iluminan ---------- */
.path-glow { fill: rgba(255, 222, 60, .5); stroke: #ffe46b; stroke-width: 6; stroke-linejoin: round; }

/* ---------- botón del mapa ---------- */
.hud-map { position: absolute; left: 26px; top: 22px; z-index: 2000; display: flex; flex-direction: column; align-items: center; gap: 0;
  width: 104px; height: 104px; border-radius: 26px; border: 4px solid #7a5232; background: linear-gradient(#fff6dc, #f0d9a6);
  box-shadow: 0 6px 0 rgba(0,0,0,.22); font: 700 20px var(--font); color: #7a5232; padding: 6px 0 0; }
.hud-map svg { width: 64px; height: 60px; }
.hud-map:hover { transform: translateY(-3px) rotate(-3deg); }

/* ---------- panel del mapa ---------- */
.map-box { position: relative; width: 1500px; padding: 30px 40px 40px; border-radius: 34px; background: linear-gradient(#fff8e6, #f3e2bb);
  border: 8px solid #7a5232; box-shadow: 0 16px 0 rgba(0,0,0,.25); }
.map-box .x-btn { right: 24px; top: 22px; }
.map-box h2 { margin: 0; font: 700 52px var(--font); color: #7a5232; }
.map-sub { margin: 4px 0 10px; font: 500 26px var(--font); color: #9b7350; }
.map-filters { display: flex; gap: 12px; margin: 0 0 12px; }
.map-filter { border: 4px solid #c9a76a; border-radius: 18px; background: #fffaf0; padding: 6px 22px 8px; font: 700 24px var(--font); color: #7a4a25; cursor: pointer; }
.map-filter.on { background: #7a4a25; color: #fff; border-color: #4a2a12; }
.map-filter[data-map="games"].on { background: #e07a14; border-color: #a85a10; color: #fff; }
.map-board { position: relative; height: 700px; border-radius: 24px; overflow: hidden;
  background: #d7e8f6; box-shadow: inset 0 0 0 5px rgba(122,82,50,.35); }
.map-art { position: absolute; left: -7%; top: -12%; width: 114%; height: 124%; object-fit: cover; display: block; pointer-events: none; }
.map-land { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#mapPins { position: absolute; inset: 0; }
.map-pin { position: absolute; transform: translate(-50%, -50%); border: 0; background: none; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0; }
.pin-icon { width: 78px; height: 78px; display: grid; place-items: center; font-size: 42px; border-radius: 50%; background: #fff;
  border: 5px solid #2f73c9; box-shadow: 0 5px 0 rgba(0,0,0,.25); transition: transform .15s; }
.pin-name { font: 700 22px var(--font); color: #10345f; background: rgba(255,255,255,.9); padding: 2px 12px; border-radius: 12px; white-space: nowrap; }
.map-pin:hover .pin-icon { transform: scale(1.15) translateY(-4px); border-color: #ff8a00; }
.map-pin.here .pin-icon { border-color: #e2463b; animation: pinBounce 1s ease-in-out infinite; }
.pin-you { font: 700 18px var(--font); color: #fff; background: #e2463b; padding: 1px 10px; border-radius: 10px; }
.pin-room { font: 700 18px var(--font); color: #1d4f93; background: #e7f4ff; border: 2px solid #9cc3e6; padding: 0 10px; border-radius: 10px; white-space: nowrap; }
.map-pin.game .pin-icon { border-color: #e07a14; background: #fff8ee; }
@keyframes pinBounce { 50% { transform: translateY(-8px); } }

/* ---------- álbum: categorías y secciones ---------- */
.album-tab { font-size: 28px !important; padding: 12px 26px 16px !important; }
.album-books { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 10px; }
.album-book { border: 4px solid #c9a76a; border-radius: 18px; background: #fffaf0; padding: 6px 16px; font: 700 22px var(--font); color: #7a4a25; }
.album-book small { font-size: 17px; opacity: .75; }
.album-book.on { background: #7a4a25; color: #fff; border-color: #4a2a12; }
.book-head h2 { font-size: 46px !important; }
.book-sub { margin-bottom: 14px !important; }

/* ---------- estampillas difíciles: borde dorado con brillo ---------- */
.stamp.hard .stamp-face { --hole: #f8f1de; border-color: #e0a91c; box-shadow: inset 0 0 0 3px #b8820c, 0 0 0 3px #f6d36b; overflow: hidden; }
.stamp.hard.got .stamp-face { background: linear-gradient(145deg, #fff6c8, #ffd34d 55%, #f0a91a); box-shadow: inset 0 0 0 3px #b8820c, 0 0 14px 4px rgba(255,200,40,.55); }
.stamp.hard .stamp-face::after { content: ''; position: absolute; inset: -40%; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.85) 50%, transparent 60%);
  transform: translateX(-120%); pointer-events: none; }
.stamp.hard:hover .stamp-face { animation: goldWobble .6s ease-in-out; }
.stamp.hard:hover .stamp-face::after { animation: goldShine .9s ease-out; }
.stamp.hard.got:hover .stamp-face { box-shadow: inset 0 0 0 3px #b8820c, 0 0 26px 10px rgba(255,210,60,.8); }
@keyframes goldShine { to { transform: translateX(120%); } }
@keyframes goldWobble { 25% { transform: rotate(-6deg) scale(1.08); } 75% { transform: rotate(6deg) scale(1.08); } }
.stamp.hard .stamp-name { color: #a87508; }
.tip-gold { color: #ffd34d; font-weight: 700; }

/* ---------- foquitas que juegan en casa ---------- */
.pet-follower.home .pet-say { position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, 10px) scale(.5); opacity: 0; font-size: 46px;
  background: #fff; border: 4px solid #1f2328; border-radius: 50%; width: 76px; height: 76px; display: grid; place-items: center; transition: .25s; pointer-events: none; }
.pet-follower.home .pet-say.show { animation: petSay 2.6s ease forwards; }
@keyframes petSay { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.5); } 12%, 80% { opacity: 1; transform: translate(-50%, -6px) scale(1); } 100% { opacity: 0; } }
.pet-follower.home .pet-name { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); margin-top: 10px; font: 600 18px var(--font); color: #10233d;
  background: rgba(255,255,255,.75); padding: 0 8px; border-radius: 8px; white-space: nowrap; }

/* =====================================================================
   PESCA
   ===================================================================== */
#fishGame { position: absolute; inset: 0; z-index: 3200; display: none; overflow: hidden; }
#fishGame.open { display: block; }
.fg-sky { position: absolute; left: 0; right: 0; top: 0; height: 350px; background: linear-gradient(#7cc4f2, #cfeafc); }
.fg-sky::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 120px;
  background: radial-gradient(ellipse at 20% 100%, #fff 0 40%, transparent 41%) 0 0/360px 120px repeat-x; opacity: .9; }
.fg-water { position: absolute; left: 0; right: 0; top: 350px; bottom: 0; background: linear-gradient(#3f8fd6, #1d5fa3 45%, #0d2f5c); }
.fg-water::before { content: ''; position: absolute; left: 0; right: 0; top: -10px; height: 24px;
  background: radial-gradient(ellipse at 50% 0, #9fd3ff 0 45%, transparent 46%) 0 0/120px 24px repeat-x; animation: waveMove 3s linear infinite; }
.fg-water::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(170deg, rgba(255,255,255,.05) 0 40px, transparent 40px 120px); }
@keyframes waveMove { to { background-position: 120px 0; } }
.fg-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(#2b6cb0, #1d4f93); color: #fff; border-bottom: 6px solid #0d2f5c; }
.fg-hud .cg-title { margin-right: auto; }
.fg-hud .cg-stat b { color: #fff; }
.fg-worms { display: flex; gap: 6px; font-size: 36px; }
.fg-worms .lost { filter: grayscale(1); opacity: .3; }
.fg-field { position: absolute; inset: 0; cursor: none; }
.fg-dock { position: absolute; left: 0; top: 300px; width: 620px; height: 70px; background: repeating-linear-gradient(90deg, #a46b3d 0 80px, #8a552c 80px 84px);
  border: 6px solid #4a2a12; border-left: 0; border-radius: 0 12px 12px 0; }
.fg-dock::after { content: ''; position: absolute; left: 80px; top: 64px; width: 30px; height: 300px; background: #6b4220; box-shadow: 300px 0 0 #6b4220; }
.fg-bear { position: absolute; left: 340px; top: 118px; width: 126px; height: 190px; }
.fg-bear svg { width: 100%; height: 100%; overflow: visible; }
.fg-bear::after { content: ''; position: absolute; left: 86px; top: 108px; width: 360px; height: 11px; background: linear-gradient(180deg, #d7a15a, #6b3e16); border: 3px solid #3a220c; border-radius: 8px; box-sizing: border-box; transform-origin: 0 50%; transform: rotate(-11deg); }
.fg-bucket { position: absolute; left: 150px; top: 200px; font-size: 90px; line-height: 1; }
.fg-bucket span { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%); font: 700 30px var(--font); color: #fff; text-shadow: 0 2px 0 #000; }
.fg-bucket.bump { animation: jarBump .3s; }
.fg-line { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.fg-line path { fill: none; stroke: rgba(255,255,255,.85); stroke-width: 3; }
.fg-hook { position: absolute; left: 0; top: 0; width: 0; height: 0; pointer-events: none; z-index: 3; }
.fg-hook::before { content: ''; position: absolute; left: -14px; top: -30px; width: 22px; height: 34px; border: 6px solid #d7dde4; border-top: 0; border-radius: 0 0 20px 20px; }
.fg-worm { position: absolute; left: -22px; top: -4px; font-size: 40px; }
.fg-hook.hurt { animation: blink .2s steps(2) infinite; }
@keyframes blink { 50% { opacity: .2; } }
#fgFish { position: absolute; inset: 0; pointer-events: none; }
.fg-item { position: absolute; left: 0; top: 0; will-change: transform; }
.fg-item.fish { height: auto; }
.fg-item.fish svg { width: 100%; display: block; }
.fg-item.jelly { width: 110px; height: 132px; }
.fg-item.jelly svg { width: 100%; height: 100%; animation: jellyPulse 1.2s ease-in-out infinite; }
@keyframes jellyPulse { 50% { transform: scaleY(.88); } }
.fg-item.hooked svg { animation: wiggle .25s ease-in-out infinite; }
@keyframes wiggle { 50% { transform: rotate(10deg); } }
.fg-item.landed { transition: transform .5s ease-in, opacity .5s; opacity: .2; }
.fg-panel { background: linear-gradient(#eaf6ff, #c3e2fb); border-color: #1d4f93; }
.fg-panel h2 { color: #1d4f93; }

#stampToasts { top: 150px; }

/* ---------- modo online ---------- */
.online-status { display: flex; align-items: center; gap: 8px; padding: 8px 18px; border-radius: 30px; background: rgba(16,40,75,.75); color: #fff; font: 600 22px var(--font); }
.online-status i { width: 14px; height: 14px; border-radius: 50%; background: #9aa6b2; }
.online-status.on i { background: #4be36a; box-shadow: 0 0 10px #4be36a; }
.label.online .nametag::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #4be36a; margin-right: 6px; vertical-align: 1px; }
.map-online { margin: -8px 0 12px; font: 500 22px var(--font); color: #5a4630; }
.pin-online { font: 700 18px var(--font); color: #fff; background: #2c8a29; padding: 1px 10px; border-radius: 10px; }
#friendRequests { position: absolute; right: 30px; top: 110px; display: flex; flex-direction: column; gap: 12px; z-index: 3600; }
.friend-request { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-radius: 22px; background: linear-gradient(#ffffff, #dff0ff);
  border: 5px solid var(--blue-d); box-shadow: 0 8px 0 rgba(0,0,0,.2); animation: pop .25s ease-out; }
.fr-face svg { width: 60px; height: 56px; display: block; }
.fr-text { display: grid; margin-right: 6px; }
.fr-text b { font: 700 28px var(--font); color: #10345f; }
.fr-text small { font: 500 20px var(--font); color: #5a7390; }