/* =====================================================================
   Club Bear - récords, ajustes, "ir con un amigo" y páginas del
   catálogo de gorritos y pelajes
   ===================================================================== */

/* ---------- botón de récords (debajo del mapa) ---------- */
.hud-rank { top: 140px; border-color: #b8820c; background: linear-gradient(#fff4c4, #f6d36b); color: #8a5a00; }
.hud-rank .rank-icon { font-size: 50px; line-height: 64px; }
#stampToasts { top: 262px !important; }

/* ---------- panel de récords ---------- */
.rank-box { position: relative; width: 1000px; padding: 34px 40px; border-radius: 34px; background: linear-gradient(#fffaf0, #f6e7c3);
  border: 8px solid #b8820c; box-shadow: 0 16px 0 rgba(0,0,0,.25); }
.rank-box .x-btn { right: 22px; top: 22px; }
.rank-box h2 { margin: 0 0 16px; font: 700 50px var(--font); color: #8a5a00; }
.rank-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.rank-tab { border: 4px solid #d9b25a; border-radius: 18px; background: #fffaf0; padding: 8px 18px; font: 700 24px var(--font); color: #8a5a00; }
.rank-tab.on { background: #b8820c; color: #fff; border-color: #8a5a00; }
.rank-list { display: grid; gap: 10px; max-height: 560px; overflow-y: auto; }
.rank-row { display: flex; align-items: center; gap: 16px; padding: 10px 20px; border-radius: 20px; background: #fff; border: 4px solid #eedcae; }
.rank-row.me { border-color: var(--blue); background: #eef6ff; }
.rank-row.top { background: linear-gradient(90deg, #fff3c0, #ffffff); border-color: #e0a91c; animation: topGlow 2s ease-in-out infinite; }
@keyframes topGlow { 50% { box-shadow: 0 0 22px rgba(255,200,40,.6); } }
.rank-pos { width: 56px; text-align: center; font: 700 38px var(--font); color: #8a5a00; }
.rank-row .friend-face svg { width: 60px; height: 56px; display: block; }
.rank-name { flex: 1; min-width: 0; font: 700 30px var(--font); color: #10345f; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank-name small { font-size: 20px; color: var(--blue); }
.rank-crown { display: inline-block; animation: crownBob 1.4s ease-in-out infinite; }
@keyframes crownBob { 50% { transform: translateY(-5px) rotate(-8deg); } }
.rank-score { display: grid; text-align: right; }
.rank-score b { font: 700 34px var(--font); color: #2c8a29; font-variant-numeric: tabular-nums; }
.rank-score small { font: 500 17px var(--font); color: #7d8a99; }
.rank-note { margin: 16px 0 0; font: 500 22px var(--font); color: #8a6a30; text-align: center; }

/* ---------- ajustes ---------- */
.set-box { position: relative; width: 760px; padding: 34px 46px 30px; border-radius: 34px; background: linear-gradient(#ffffff, #e2f0fc);
  border: 6px solid var(--blue-d); box-shadow: 0 14px 0 rgba(0,0,0,.25); display: grid; gap: 22px; }
.set-box .x-btn { right: 22px; top: 22px; }
.set-box h2 { margin: 0; font: 700 50px var(--font); color: var(--blue-d); }
.set-row { display: grid; grid-template-columns: 190px 1fr 90px; align-items: center; gap: 18px; font: 700 30px var(--font); color: #10345f; }
.set-row b { text-align: right; font-variant-numeric: tabular-nums; color: var(--blue); }
.set-row input[type=range] { width: 100%; height: 34px; accent-color: var(--blue); cursor: pointer; }
.set-box #setFull { justify-self: center; }
.set-note { margin: 0; text-align: center; font: 500 20px var(--font); color: #5a7390; }

/* ---------- amigos: botón "Ir" ---------- */
div.friend { cursor: pointer; }
.friend-goto { padding: 8px 18px !important; font-size: 22px !important; border-radius: 14px !important; }
.friend-goto:disabled { background: linear-gradient(#cfd6de, #b4bec9); cursor: default; transform: none; }

/* ---------- catálogo: gorritos y pelajes ---------- */
.cat-item-art.head-crop { height: 170px; overflow: hidden; }
.cat-item-art.head-crop svg { width: 100%; height: auto; margin-top: 44px; }
.cv-page { color: #fff; }
.page.left.beanie-page { background: linear-gradient(160deg, #4fa3e0, #2a6fb8 60%, #1d4f93); }
.page.left.skin-page { background: linear-gradient(160deg, #ff9ccb, #b56be0 60%, #4b3a8f); }
.cv-title { position: relative; font: 700 100px/0.95 var(--font); text-shadow: 0 6px 0 rgba(0,0,0,.2); z-index: 2; }
.cv-sub { position: relative; font: 600 32px var(--font); margin-top: 12px; opacity: .95; z-index: 2; }
.cv-art { position: absolute; left: 0; right: 0; bottom: 40px; height: 430px; z-index: 2; }
.cv-bear { position: absolute; bottom: 0; width: 250px; height: 377px; }
.cv-bear svg { width: 100%; height: 100%; overflow: visible; }
.cv-bear.a { left: 70px; animation: cvBounce 2.4s ease-in-out infinite; }
.cv-bear.b { right: 70px; animation: cvBounce 2.4s ease-in-out .6s infinite; }
@keyframes cvBounce { 50% { transform: translateY(-16px) rotate(2deg); } }
/* nieve que cae en la página de los gorros */
.cv-snow { position: absolute; inset: 0; opacity: .9;
  background-image: radial-gradient(circle, #fff 0 4px, transparent 5px), radial-gradient(circle, #fff 0 3px, transparent 4px), radial-gradient(circle, rgba(255,255,255,.7) 0 2px, transparent 3px);
  background-size: 140px 140px, 90px 90px, 60px 60px; background-position: 0 0, 40px 60px, 20px 30px; animation: cvSnow 9s linear infinite; }
@keyframes cvSnow { to { background-position: 30px 920px, 70px 980px, 40px 950px; } }
/* destellos en la página de pelajes */
.cv-sparkles i { position: absolute; width: 18px; height: 18px; background: #fff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  animation: twinkle 2s ease-in-out infinite; }
.cv-sparkles i:nth-child(1) { left: 12%; top: 46%; }
.cv-sparkles i:nth-child(2) { left: 80%; top: 30%; animation-delay: .4s; width: 26px; height: 26px; }
.cv-sparkles i:nth-child(3) { left: 60%; top: 58%; animation-delay: .8s; }
.cv-sparkles i:nth-child(4) { left: 30%; top: 70%; animation-delay: 1.2s; width: 24px; height: 24px; }
.cv-sparkles i:nth-child(5) { left: 88%; top: 72%; animation-delay: 1.6s; }
.cv-sparkles i:nth-child(6) { left: 46%; top: 36%; animation-delay: 1s; width: 14px; height: 14px; }
@keyframes twinkle { 0%, 100% { transform: scale(.3) rotate(0); opacity: .3; } 50% { transform: scale(1.2) rotate(45deg); opacity: 1; } }