/* =====================================================================
   Club Bear - isla viva: letrero de Discord, huellas, pájaros, referidos
   ===================================================================== */

/* ---------- letrero de Discord (Ayuntamiento) ---------- */
.dc-sign { position: absolute; cursor: pointer; pointer-events: auto; transform-origin: 50% 100%; transition: transform .2s; }
.dc-sign:hover { transform: scale(1.04); }
.dc-easel { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dc-board { position: absolute; left: 6%; right: 6%; top: 0; height: 58%; border-radius: 22px; border: 6px solid #2b2b36; overflow: hidden;
  background: linear-gradient(160deg, #7983f5, #5865f2 55%, #4049c9); box-shadow: 0 8px 0 rgba(0,0,0,.25), inset 0 0 0 4px rgba(255,255,255,.25);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #fff; text-align: center; }
.dc-board b { font: 700 24px/1.05 var(--font); text-shadow: 0 3px 0 rgba(0,0,0,.25); position: relative; }
.dc-board small { font: 600 15px var(--font); opacity: .9; position: relative; }
.dc-icon { width: 70px; height: 54px; position: relative; animation: dcBob 2.4s ease-in-out infinite; }
.dc-icon svg { width: 100%; height: 100%; filter: drop-shadow(0 3px 0 rgba(0,0,0,.25)); }
.dc-glow { position: absolute; inset: -40%; background: conic-gradient(from 0deg, transparent, rgba(255,255,255,.25), transparent 30%); animation: dcSpin 6s linear infinite; }
.dc-spark { position: absolute; font-style: normal; color: #fff; font-size: 22px; text-shadow: 0 0 8px #aab4ff; animation: dcTw 2s ease-in-out infinite; pointer-events: none; }
.dc-spark.s1 { left: 0; top: 8%; } .dc-spark.s2 { right: 0; top: 30%; animation-delay: .7s; } .dc-spark.s3 { left: 46%; top: -8%; animation-delay: 1.3s; }
@keyframes dcBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes dcSpin { to { transform: rotate(360deg); } }
@keyframes dcTw { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .2; transform: scale(.5); } }

/* ---------- panel de la comunidad ---------- */
.dc-box { position: relative; width: 760px; padding: 40px 50px 34px; border-radius: 34px; text-align: center; color: #fff;
  background: radial-gradient(circle at 50% 0, #8f98ff, transparent 60%), linear-gradient(165deg, #5865f2, #3c45b8); border: 6px solid #232a7a; box-shadow: 0 18px 0 rgba(0,0,0,.3); }
.dc-box .x-btn { position: absolute; right: 22px; top: 20px; }
.dc-hero { width: 140px; height: 108px; margin: 0 auto 10px; animation: dcBob 2.4s ease-in-out infinite; }
.dc-hero svg { width: 100%; height: 100%; filter: drop-shadow(0 6px 0 rgba(0,0,0,.25)); }
.dc-box h2 { margin: 0 0 12px; font: 700 40px var(--font); text-shadow: 0 4px 0 rgba(0,0,0,.25); }
.dc-box p { margin: 0 0 22px; font: 500 24px/1.35 var(--font); }
.dc-join { display: inline-flex; align-items: center; gap: 14px; padding: 16px 40px; border-radius: 40px; background: #fff; color: #4049c9; text-decoration: none;
  font: 700 32px var(--font); box-shadow: 0 8px 0 #232a7a; transition: transform .15s; }
.dc-join:hover { transform: translateY(-3px) scale(1.03); }
.dc-join svg { width: 44px; height: 34px; }
.dc-join svg path { fill: #5865f2; }
.dc-link { display: flex; justify-content: center; align-items: center; gap: 12px; margin: 22px 0 10px; font: 600 22px var(--font); }
.dc-link span { padding: 8px 16px; border-radius: 14px; background: rgba(0,0,0,.25); }
.dc-sign-off { font-size: 18px !important; opacity: .85; margin: 6px 0 0 !important; }

/* ---------- huellas y pájaros ---------- */
.paw-print { position: absolute; width: 26px; height: 30px; pointer-events: none; z-index: 1; animation: pawFade 5s ease-in forwards;
  background: radial-gradient(ellipse 9px 11px at 50% 62%, rgba(90,120,160,.45) 98%, transparent 100%),
    radial-gradient(circle 4px at 22% 22%, rgba(90,120,160,.45) 98%, transparent 100%),
    radial-gradient(circle 4px at 50% 12%, rgba(90,120,160,.45) 98%, transparent 100%),
    radial-gradient(circle 4px at 78% 22%, rgba(90,120,160,.45) 98%, transparent 100%); }
@keyframes pawFade { 0% { opacity: .9; } 70% { opacity: .6; } 100% { opacity: 0; } }
.bird-flock { position: absolute; left: -400px; width: 360px; height: 100px; z-index: 6000; pointer-events: none; animation: flyRight 15s linear forwards; }
.bird-flock.rtl { left: auto; right: -400px; animation-name: flyLeft; }
.bird-flock .bird { position: absolute; width: 40px; height: 20px; overflow: visible; animation: birdBob 1.4s ease-in-out infinite; }
@keyframes flyRight { from { transform: translate(0, 0); } to { transform: translate(2500px, -80px); } }
@keyframes flyLeft { from { transform: translate(0, 0) scaleX(-1); } to { transform: translate(-2500px, -60px) scaleX(-1); } }
@keyframes birdBob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }

/* ---------- referidos ---------- */
.login-ref-hint { font: 600 15px var(--font); color: #7a5a00; background: #fff6d8; border: 2px solid #f2c94c; border-radius: 12px; padding: 6px 10px; text-align: center; }

/* ---------- canasta en el Candy Shop ---------- */
.candy-basket-art { height: 100%; width: auto; animation: floaty 2.4s ease-in-out infinite; }

/* ---------- skin celestial ---------- */
svg.cos-celestial { filter: drop-shadow(0 0 10px rgba(255,226,122,.8)) drop-shadow(0 0 22px rgba(255,255,255,.5)); }

/* ---------- novedades más breves ---------- */
details.news-item > summary { list-style: none; cursor: pointer; }
details.news-item > summary::-webkit-details-marker { display: none; }
details.news-item > summary .news-head::after { content: '▼'; margin-left: auto; font-size: 20px; color: #8a9bb0; transition: transform .2s; }
details.news-item[open] > summary .news-head::after { transform: rotate(180deg); }
details.news-item:not([open]) { padding-bottom: 14px; }
.news-rewards { margin-top: 6px; font-weight: 600; }
.news-event ol { margin: 6px 0; }