/* =====================================================================
   Club Bear - cielo de la Cima, Oso Dorado, Bromis, foquita en la pesca,
   topos que se mueven y minijuego del telescopio
   ===================================================================== */

/* ---------- Cima: estrellas que titilan y estrellas fugaces ---------- */
.decor .tw { animation: twinkleStar 3.4s ease-in-out infinite; }
@keyframes twinkleStar { 0%, 100% { opacity: .15; transform: scale(.5); } 50% { opacity: 1; transform: scale(1.1); } }
.decor .shoot { opacity: 0; animation: shootingStar 17s linear infinite; }
@keyframes shootingStar {
  0% { opacity: 0; transform: translate(0, 0); }
  1% { opacity: 1; }
  5% { opacity: 1; transform: translate(520px, 280px); }
  6.5%, 100% { opacity: 0; transform: translate(600px, 320px); }
}

/* ---------- Oso Dorado: destellos ---------- */
.gold-spark { opacity: 0; transform-box: fill-box; transform-origin: center; animation: goldSpark 2.4s ease-in-out infinite; }
.gold-spark.gs1 { animation-delay: .5s; } .gold-spark.gs2 { animation-delay: 1s; } .gold-spark.gs3 { animation-delay: 1.5s; } .gold-spark.gs4 { animation-delay: 1.9s; }
@keyframes goldSpark { 0%, 70%, 100% { opacity: 0; transform: scale(.2) rotate(0); } 80% { opacity: 1; transform: scale(1) rotate(45deg); } }

/* ---------- catálogo: varias tarjetas por página ---------- */
.cv-page.acc-page { background: radial-gradient(circle at 18% 16%, #ffe08a, transparent 42%), linear-gradient(165deg, #1a2744, #8a1e2a 52%, #1f7a3a); }
.acc-sticker { border-color: #8a1e2a !important; background: linear-gradient(#ffe08a, #f07820) !important; color: #3a1608 !important; }
.acc-sticker small { color: #6a2808 !important; }
#catSoon { flex-wrap: nowrap; }
#catSoon .fk-sticker { flex: 1 1 0; min-width: 0; font-size: 16px; padding: 6px 4px; }
#catSoon .fk-sticker span { font-size: 28px; }
#catSoon .fk-sticker small { font-size: 13px; }
#catHoodies { min-height: 0; overflow-y: auto; }
.featured.many .cat-items { grid-template-columns: repeat(3, 1fr); gap: 12px; }
.featured.many .cat-item { padding: 8px; gap: 2px; }
.featured.many .cat-item .cat-item-art { width: 130px; height: 150px; }
.featured.many .cat-item h3 { font-size: 24px; }
.featured.many .cat-item p { display: none; }
.featured.many .cat-item .cat-price { font-size: 28px; }
.featured.many .cat-item .btn { font-size: 22px; padding: 8px 18px; }
.cat-items.three { grid-template-columns: repeat(3, 1fr); gap: 14px; }
.cat-items.three .cat-item p { font-size: 17px; }
.cat-items.three h3 { font-size: 28px; }
.bromi-art-mini { display: grid; place-items: center; height: 140px !important; }
.bromi-art-mini img { width: 150px; }

/* página del Oso Dorado */
.page.left.gold-page { background: linear-gradient(160deg, #3a2400, #8a5a00 50%, #2a1a00); overflow: hidden; }
.gold-rays { position: absolute; left: 50%; top: 60%; width: 1400px; height: 1400px; margin: -700px 0 0 -700px; opacity: .35;
  background: conic-gradient(from 0deg, #ffd34d 0 6deg, transparent 6deg 24deg, #ffd34d 24deg 30deg, transparent 30deg 48deg, #ffd34d 48deg 54deg, transparent 54deg 72deg,
    #ffd34d 72deg 78deg, transparent 78deg 96deg, #ffd34d 96deg 102deg, transparent 102deg 120deg, #ffd34d 120deg 126deg, transparent 126deg 144deg,
    #ffd34d 144deg 150deg, transparent 150deg 168deg, #ffd34d 168deg 174deg, transparent 174deg 192deg, #ffd34d 192deg 198deg, transparent 198deg 216deg,
    #ffd34d 216deg 222deg, transparent 222deg 240deg, #ffd34d 240deg 246deg, transparent 246deg 264deg, #ffd34d 264deg 270deg, transparent 270deg 288deg,
    #ffd34d 288deg 294deg, transparent 294deg 312deg, #ffd34d 312deg 318deg, transparent 318deg 336deg, #ffd34d 336deg 342deg, transparent 342deg);
  animation: spin 30s linear infinite; }
.gold-page .cv-title { color: #ffe27a; text-shadow: 0 6px 0 #5a3a00, 0 0 30px rgba(255,210,80,.6); }
.gold-timer { position: relative; z-index: 2; display: inline-block; margin-top: 16px; padding: 8px 18px; border-radius: 18px; background: rgba(0,0,0,.4); font: 700 26px var(--font); color: #ffe27a; }
.gold-art .gold-bear { left: 50%; margin-left: -125px; animation: cvBounce 2.6s ease-in-out infinite; filter: drop-shadow(0 0 22px rgba(255,210,80,.7)); }
.gold-tag { background: linear-gradient(#ffd34d, #c48d0a) !important; color: #3a2400 !important; }
.gold-card { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 14px 24px; border-radius: 24px; background: linear-gradient(#fffbea, #ffeeb5);
  border: 5px solid #e0a91c; box-shadow: 0 0 26px rgba(255,200,40,.45); }
.gold-card h3 { margin: 0; font: 700 48px var(--font); color: #a87508; }
.gold-card p { margin: 0; font: 400 22px/1.3 var(--font); color: #5a4a20; max-width: 520px; }
.gold-card .gold-date { font-weight: 700; color: #b3352b; }
.gold-mini { width: 170px; height: 220px; }
.gold-mini svg { width: 100%; height: 100%; overflow: visible; }

/* página de Bromis */
.page.left.bromi-page { background: linear-gradient(160deg, #ffb35c, #d9692b 55%, #7a3a14); overflow: hidden; }
.bromi-art img { position: absolute; bottom: 0; width: 240px; }
.bromi-hop.b0 { left: 30px; animation: bromiHop 1.8s ease-in-out infinite; }
.bromi-hop.b1 { left: 230px; bottom: 60px; width: 210px; animation: bromiHop 1.8s ease-in-out .4s infinite; }
.bromi-hop.b2 { left: 420px; animation: bromiHop 1.8s ease-in-out .8s infinite; transform: scaleX(-1); }
@keyframes bromiHop { 0%, 100% { translate: 0 0; } 30% { translate: 0 -40px; } 45% { translate: 0 0; } }
.cv-leaves i { position: absolute; width: 34px; height: 22px; border-radius: 0 100% 0 100%; background: #ffd06b; opacity: .8; animation: leafFall 7s linear infinite; }
.cv-leaves i:nth-child(1) { left: 10%; animation-delay: 0s; } .cv-leaves i:nth-child(2) { left: 35%; animation-delay: 1.4s; background: #ff8a3c; }
.cv-leaves i:nth-child(3) { left: 60%; animation-delay: 2.8s; } .cv-leaves i:nth-child(4) { left: 80%; animation-delay: 4.2s; background: #c84a1a; }
.cv-leaves i:nth-child(5) { left: 50%; animation-delay: 5.6s; }
@keyframes leafFall { from { top: -40px; transform: rotate(0); } to { top: 105%; transform: rotate(540deg) translateX(60px); } }

/* ---------- pesca: la foquita que ayuda ---------- */
.fg-pet { position: absolute; left: 0; top: 0; width: 140px; z-index: 3; pointer-events: none; }
.fg-pet img { width: 100%; display: block; animation: petSwim 1s ease-in-out infinite; filter: drop-shadow(0 0 10px rgba(255,255,255,.4)); }
.fg-pet.flip img { animation-name: petSwimFlip; }
@keyframes petSwim { 50% { transform: translateY(-8px) rotate(-6deg); } }
@keyframes petSwimFlip { 0%, 100% { transform: scaleX(-1); } 50% { transform: scaleX(-1) translateY(-8px) rotate(6deg); } }
.fg-pet-name { position: absolute; left: 50%; top: -26px; transform: translateX(-50%); font: 700 18px var(--font); color: #fff; text-shadow: 0 2px 0 #0d2f5c; white-space: nowrap; }
.fg-pet.carry::after { content: '💪'; position: absolute; right: -10px; top: -10px; font-size: 26px; }

/* ---------- Caza Gemas: el topo se mueve ---------- */
.gg-tile.wiggle { animation: tileWiggle .45s ease-in-out; }
@keyframes tileWiggle { 25% { transform: rotate(-3deg) translateY(-3px); } 75% { transform: rotate(3deg); } }

/* ---------- minijuego del telescopio ---------- */
#teleGame { position: absolute; inset: 0; z-index: 3200; display: none; overflow: hidden; background: #05060f; }
#teleGame.open { display: block; }
.tl-bg { position: absolute; inset: 0; background: url(../assets/obs-dentro.webp) center/cover; filter: blur(8px) brightness(.25); transform: scale(1.05); }
.tl-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(#1b2140, #0d1128); color: #e8ecff; border-bottom: 6px solid #6a7cff; }
.tl-hud .cg-title { margin-right: auto; }
.tl-hud .cg-stat b { color: #fff; }
.tl-wrap { position: absolute; left: 50%; top: 125px; width: 900px; height: 900px; margin-left: -450px; border-radius: 50%;
  box-shadow: 0 0 0 26px #2b2f3a, 0 0 0 34px #6b7280, 0 0 0 40px #1f2328, 0 0 60px 40px rgba(0,0,0,.6); }
.tl-wrap canvas { width: 900px; height: 900px; border-radius: 50%; display: block; cursor: grab; transition: filter .08s; }
.tl-wrap canvas:active { cursor: grabbing; }
.tl-wrap.idle { opacity: .55; }
.tl-vignette { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, transparent 60%, rgba(0,0,0,.75) 100%); }
.tl-cross { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.tl-cross i { position: absolute; background: rgba(255,255,255,.5); }
.tl-cross i:nth-child(1) { left: -110px; width: 220px; top: -1px; height: 2px; }
.tl-cross i:nth-child(2) { top: -110px; height: 220px; left: -1px; width: 2px; }
.tl-cross b { position: absolute; left: -70px; top: -70px; width: 140px; height: 140px; border-radius: 50%; border: 4px dashed rgba(255,255,255,.55); }
.tl-cross.near b { border-color: #ffd27f; }
.tl-cross.ok b { border: 5px solid #5cff8a; box-shadow: 0 0 22px #5cff8a; animation: crossOk .6s ease-in-out infinite alternate; }
.tl-cross.ok i { background: #5cff8a; }
@keyframes crossOk { to { transform: scale(1.08); } }
.tl-arrow { position: absolute; left: 50%; top: 50%; width: 0; height: 0; font: 700 60px/0 var(--font); color: #ffd27f; text-shadow: 0 0 14px #ffb347; pointer-events: none; transition: opacity .2s; }
.tl-msg { position: absolute; left: 50%; top: 150px; transform: translateX(-50%); white-space: nowrap; font: 700 44px var(--font); text-shadow: 0 3px 0 rgba(0,0,0,.7); opacity: 0; pointer-events: none; }
.tl-msg.show { animation: fbPop 1.3s ease-out forwards; }
.tl-wrap.snap::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: #fff; animation: snapFlash .25s ease-out forwards; pointer-events: none; }
@keyframes snapFlash { from { opacity: .6; } to { opacity: 0; } }
.tl-side { position: absolute; top: 200px; width: 340px; display: grid; gap: 22px; justify-items: center; color: #e8ecff; }
.tl-side.left { left: 50px; }
.tl-side.right { right: 50px; }
.tl-goal { width: 100%; padding: 20px; border-radius: 26px; background: rgba(30,36,70,.85); border: 4px solid #6a7cff; text-align: center; display: grid; gap: 4px; }
.tl-goal small { font: 600 22px var(--font); color: #b8c2ff; text-transform: uppercase; letter-spacing: .08em; }
.tl-goal b { font: 700 38px var(--font); }
.tl-goal span { font-size: 70px; }
.tl-life { width: 100%; display: grid; gap: 6px; text-align: center; font: 600 20px var(--font); color: #b8c2ff; }
.tl-life div { height: 18px; border-radius: 10px; background: rgba(255,255,255,.15); overflow: hidden; }
.tl-life i { display: block; height: 100%; background: linear-gradient(90deg, #ff6b6b, #ffd27f, #5cff8a); }
.tl-focus-label { font: 700 30px var(--font); }
#teleFocus { writing-mode: vertical-lr; direction: rtl; width: 50px; height: 420px; accent-color: #6a7cff; cursor: pointer; }
.tl-capture { background: linear-gradient(#7d8cff, #4a5ad8); }
.tl-sharp i { background: linear-gradient(90deg, #6b6f8a, #b8c2ff); transition: width .1s; }
.tl-sharp.ok i { background: linear-gradient(90deg, #5cff8a, #b8ffcf); }
.tl-sharp.ok small { color: #5cff8a; }
.tl-fbtns { display: flex; gap: 18px; }
.tl-fbtns .btn { font-size: 34px; min-width: 90px; color: #fff; border-color: #6a7cff; }
/* móvil/tableta: la cruceta va a la derecha, así que enfoque y capturar pasan a la izquierda */
html.touch .tl-side.right { left: 50px; right: auto; top: 560px; gap: 16px; }
html.touch #teleFocus { writing-mode: horizontal-tb; direction: ltr; width: 330px; height: 64px; }
html.touch .tl-focus-label { font-size: 26px; }
html.touch .tl-side.left { gap: 14px; top: 130px; }
html.touch .tl-goal { padding: 12px; }
html.touch .tl-goal span { font-size: 52px; }
html.touch #teleCapture kbd { display: none; }
.tl-panel { background: linear-gradient(#1c2246, #0f1330); border-color: #6a7cff; color: #fff; box-shadow: 0 0 0 2000px rgba(0,0,10,.5), 0 0 50px rgba(106,124,255,.4); }
.tl-panel h2 { color: #c9d1ff; }
.tl-panel .howto { background: rgba(255,255,255,.08); color: #e8ecff; }
.tl-panel .howto kbd { background: #4a5ad8; }
.tl-panel .sub { color: #c9d1ff; }
.tl-panel .results > div { color: #e8ecff; border-color: rgba(255,255,255,.18); }
.tl-panel .results .total { color: #ffe45c; }
.tl-panel .new-stamps .stamp-face.small { --hole: #161b3a; }

/* ajustes de la página de Bromis */
.cat-items.three { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.cat-items.three .cat-item { min-width: 0; padding: 8px 6px; }
.cat-items.three .bromi-art-mini img { width: 120px; }
.cat-items.three .btn { padding: 8px 14px; font-size: 22px; }
.bromi-art img { width: 200px; }
.bromi-hop.b0 { left: 20px; } .bromi-hop.b1 { left: 205px; width: 180px; } .bromi-hop.b2 { left: 380px; }

/* ---------- catálogo de la Tienda de Mascotas: foquitas y Bromis ---------- */
#petShopTabs { margin-bottom: 14px; }
.ps-seal { display: flex; align-items: center; gap: 22px; padding: 12px 22px; background: #fff; border: 4px solid #9cc3e6; border-radius: 24px; margin-bottom: 14px; }
.ps-seal img { width: 130px; }
.ps-seal .ps-info b { font: 700 32px var(--font); color: #10345f; }
.ps-seal .ps-info small { font: 500 22px var(--font); color: #5a7390; }
.ps-bromi-head { font: 700 30px var(--font); color: #8a4a14; margin: 4px 0 10px; }
.ps-bromi-head small { font: 500 22px var(--font); color: #a9744a; }
#petShopPets .cat-item { background: #fff7ea; border: 4px solid #f0d9b5; border-radius: 22px; }
#petShopPets .cat-item h3 { color: #a8541a; margin: 0; }