/* =====================================================================
   Club Bear - Armario: inventario con pestañas, outfits, peinados y
   marcos de la tarjeta de jugador
   ===================================================================== */

/* ---------- marcos de tarjeta (variables) ---------- */
#card, .mini-card {
  --cf-bg: linear-gradient(160deg, #8fc6ef, #5f9fd8 60%, #6aa8dd);
  --cf-bd: #2d5f93; --cf-text: #10345f; --cf-in: rgba(255,255,255,.35);
  --cf-inv: linear-gradient(160deg, #e6f4ff, #b7dbf7);
  --cf-arrow: linear-gradient(90deg, #5f9fd8, #8fc6ef);
  --cf-flake: #49a7e6; --cf-flake-bd: #9bd0f3;
}
#card .card-frame { background: var(--cf-bg); border-color: var(--cf-bd); box-shadow: inset 0 0 0 6px var(--cf-in), 0 18px 0 rgba(0,0,0,.25); }
#card .card-name { text-shadow: 0 3px 0 var(--cf-bd); z-index: 2; }
#card .card-stats { color: var(--cf-text); position: relative; z-index: 2; }
#card .card-stats .flake { color: var(--cf-flake); border-color: var(--cf-flake-bd); }
#card .card-arrow { background: var(--cf-arrow); border-color: var(--cf-bd); text-shadow: 0 3px 0 var(--cf-bd); }
#card #inventory { background: var(--cf-inv); border-color: var(--cf-bd); }
#card .card-portrait, #card .x-btn { position: relative; z-index: 2; }
#card .x-btn { position: absolute; }
.cf-deco { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: 28px; z-index: 1; }
.cf-deco i { position: absolute; display: none; font-style: normal; }

/* rosa */
#card.frame-frmPink, .mini-card.frame-frmPink {
  --cf-bg: linear-gradient(160deg, #ffd0e4, #ff94c2 58%, #ffb3d4); --cf-bd: #c2457e; --cf-text: #6a1f43; --cf-in: rgba(255,255,255,.55);
  --cf-inv: linear-gradient(160deg, #fff0f6, #ffd0e4); --cf-arrow: linear-gradient(90deg, #ff94c2, #ffd0e4);
  --cf-flake: #e04d8f; --cf-flake-bd: #ffb3d4;
}
.frame-frmPink .icicles { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='44'%3E%3Cpath d='M0 0h120v8c-6 0-7 4-9 14-2-10-4-14-10-14-5 0-6 6-8 30-2-24-4-30-10-30-6 0-7 3-9 10-2-7-4-10-10-10-5 0-7 5-9 20-2-15-4-20-10-20-6 0-7 4-9 12-2-8-4-12-10-12-5 0-7 6-9 26C15 14 13 8 6 8H0z' fill='%23fff2f8' stroke='%23c2457e' stroke-width='3'/%3E%3C/svg%3E"); background-size: 120px 44px; }
.frame-frmPink .cf-deco i { display: block; color: #fff; font-size: 34px; text-shadow: 0 2px 0 #c2457e; animation: cfFloat 3.2s ease-in-out infinite; }
.frame-frmPink .cf-deco i::before { content: '♥'; }
.frame-frmPink .cf-deco .d1 { left: 14px; top: 92px; }
.frame-frmPink .cf-deco .d2 { right: 16px; top: 120px; animation-delay: .8s; font-size: 26px; }
.frame-frmPink .cf-deco .d3 { left: 10px; bottom: 120px; animation-delay: 1.6s; font-size: 24px; }
.frame-frmPink .cf-deco .d4 { right: 12px; bottom: 60px; animation-delay: 2.2s; }
.frame-frmPink .cf-deco .d5 { left: 46%; bottom: 8px; font-size: 22px; animation-delay: 1.1s; }

/* halloween */
#card.frame-frmHalloween, .mini-card.frame-frmHalloween {
  --cf-bg: radial-gradient(circle at 92% 4%, #ffe08a 0, #ffb84a 34px, transparent 36px), linear-gradient(165deg, #6a3a9a, #3a1d5c 55%, #1d0f30);
  --cf-bd: #ff8a1f; --cf-text: #ffe2b8; --cf-in: rgba(125,255,106,.35);
  --cf-inv: linear-gradient(160deg, #3a2356, #1d0f30); --cf-arrow: linear-gradient(90deg, #3a1d5c, #6a3a9a);
  --cf-flake: #ff8a1f; --cf-flake-bd: #7dff6a;
}
#card.frame-frmHalloween #inventory h3, #card.frame-frmHalloween .inv-help, #card.frame-frmHalloween .inv-empty { color: #ffd9a8; }
.frame-frmHalloween .card-name { color: #ffe2b8; }
.frame-frmHalloween .icicles { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='44'%3E%3Cpath d='M0 0h120v8c-4 0-6 3-7 12-1 9-8 9-8 0 0-7-3-12-10-12-6 0-8 5-9 22-1 10-9 10-9 0 0-14-4-22-11-22-5 0-7 4-8 10-1 6-7 6-7 0 0-6-4-10-10-10-6 0-8 6-9 16-1 8-8 8-8 0 0-10-3-16-8-16H0z' fill='%237dff6a' stroke='%232a6a1a' stroke-width='3'/%3E%3C/svg%3E"); }
.frame-frmHalloween .cf-deco i { display: block; }
.frame-frmHalloween .cf-deco .d1, .frame-frmHalloween .cf-deco .d2 { width: 54px; height: 26px; top: 70px; animation: cfBat 4s ease-in-out infinite;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-32 -16 64 30'%3E%3Cpath d='M0 0 Q-14 -14 -30 -4 Q-20 0 -22 8 Q-10 2 0 8 Q10 2 22 8 Q20 0 30 -4 Q14 -14 0 0 Z' fill='%231a0d2a' stroke='%23ff8a1f' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat; }
.frame-frmHalloween .cf-deco .d1 { left: 10px; }
.frame-frmHalloween .cf-deco .d2 { right: 12px; top: 190px; animation-delay: 1.5s; transform: scale(.8); }
.frame-frmHalloween .cf-deco .d3 { left: 0; bottom: 0; width: 130px; height: 130px; opacity: .8;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23e8dcff' stroke-width='2'%3E%3Cpath d='M0 100 L0 10 M0 100 L40 60 M0 100 L90 100 M0 100 L30 20 M0 100 L70 70 M0 100 L85 40'/%3E%3Cpath d='M0 72 Q12 70 20 80 Q26 90 26 100 M0 46 Q24 44 40 60 Q54 76 56 100 M0 22 Q36 22 60 46 Q80 68 82 100'/%3E%3C/svg%3E") center / contain no-repeat; }
.frame-frmHalloween .cf-deco .d4 { right: 40px; top: -10px; width: 4px; height: 120px; background: #e8dcff; animation: cfSpider 5s ease-in-out infinite; transform-origin: top; }
.frame-frmHalloween .cf-deco .d4::after { content: '🕷️'; position: absolute; left: -16px; bottom: -26px; font-size: 32px; }
.frame-frmHalloween .cf-deco .d5 { right: 14px; bottom: 14px; font-size: 44px; animation: cfFloat 2.6s ease-in-out infinite; }
.frame-frmHalloween .cf-deco .d5::before { content: '🎃'; }
.frame-frmHalloween .cf-deco .d6 { left: 46%; top: 40px; font-size: 26px; animation: cfGhost 6s ease-in-out infinite; opacity: .8; }
.frame-frmHalloween .cf-deco .d6::before { content: '👻'; }

/* aesthetic */
#card.frame-frmAesthetic, .mini-card.frame-frmAesthetic {
  --cf-bg: radial-gradient(circle at 20% 15%, #fff 0, transparent 22%), linear-gradient(160deg, #ffc9e6, #d9c6ff 48%, #b9dcff);
  --cf-bd: #9a7fd1; --cf-text: #5a4a8a; --cf-in: rgba(255,255,255,.9);
  --cf-inv: linear-gradient(160deg, #fff4fb, #e6dcff); --cf-arrow: linear-gradient(90deg, #e6d6ff, #ffe0f0);
  --cf-flake: #b48ae8; --cf-flake-bd: #e6d6ff;
}
.frame-frmAesthetic .card-frame, .mini-card.frame-frmAesthetic { outline: 4px dashed rgba(255,255,255,.95); outline-offset: -20px; }
.frame-frmAesthetic .card-name, .frame-frmAesthetic .mc-name { color: #8a63d2; text-shadow: 0 3px 0 #fff, 0 0 12px #fff; }
.frame-frmAesthetic .icicles { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='40'%3E%3Cpath d='M0 0h90v12c0 8-6 12-12 12-2 8-10 12-17 10-4 6-12 8-18 4-6 6-16 6-20 0-8 4-17 0-17-8-4 0-6-4-6-8z' fill='%23ffffff' stroke='%23c7b3ef' stroke-width='3'/%3E%3C/svg%3E"); background-size: 90px 40px; }
.frame-frmAesthetic .cf-deco i { display: block; color: #ff8fc8; text-shadow: 0 0 8px #fff, 0 2px 0 #fff; animation: cfTwinkle 2.2s ease-in-out infinite; }
.frame-frmAesthetic .cf-deco i::before { content: '✦'; }
.frame-frmAesthetic .cf-deco .d1 { left: 16px; top: 96px; font-size: 40px; }
.frame-frmAesthetic .cf-deco .d2 { right: 18px; top: 110px; font-size: 28px; animation-delay: .6s; color: #a98bf0; }
.frame-frmAesthetic .cf-deco .d3 { left: 12px; bottom: 140px; font-size: 26px; animation-delay: 1.2s; }
.frame-frmAesthetic .cf-deco .d4 { right: 14px; bottom: 90px; font-size: 38px; animation-delay: 1.7s; color: #7cc4ff; }
.frame-frmAesthetic .cf-deco .d5 { left: 40%; bottom: 6px; font-size: 24px; animation-delay: .3s; }
.frame-frmAesthetic .cf-deco .d5::before { content: '♡'; }
.frame-frmAesthetic .cf-deco .d6 { right: 30%; top: 8px; font-size: 22px; animation-delay: 1s; }
.frame-frmAesthetic .cf-deco .d6::before { content: '☁'; }

@keyframes cfFloat { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-10px) rotate(6deg); } }
@keyframes cfTwinkle { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
@keyframes cfBat { 0%, 100% { translate: 0 0; } 25% { translate: 10px -12px; } 50% { translate: 0 -4px; } 75% { translate: -8px -14px; } }
@keyframes cfSpider { 0%, 100% { height: 90px; } 50% { height: 150px; } }
@keyframes cfGhost { 0%, 100% { translate: -30px 0; } 50% { translate: 30px 10px; } }

/* ---------- inventario con pestañas ---------- */
#inventory.open { width: 560px; }
#inventory h3 { margin-bottom: 10px !important; }
.inv-tabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 12px; }
.inv-tab { display: flex; align-items: center; justify-content: center; gap: 4px; height: 44px; padding: 0 4px; border-radius: 14px; border: 3px solid #7fb0dc; background: rgba(255,255,255,.75); font-size: 20px; cursor: pointer; }
.inv-tab small { font: 600 14px var(--font); color: #34506e; white-space: nowrap; }
.inv-tab:hover { transform: translateY(-2px); }
.inv-tab.on { background: #fff; border-color: #f2b51c; box-shadow: 0 0 0 3px rgba(242,181,28,.35); }
#inventory .inv-grid { grid-template-columns: repeat(3, 140px); max-height: 560px; overflow-y: auto; overflow-x: hidden; padding: 4px 10px 4px 2px; align-content: start; }
#inventory .inv-item, #inventory .inv-slot { width: 136px; height: 150px; }
#inventory .inv-help { margin-top: 10px; white-space: normal; font-size: 18px; }
#inventory.tab-outfits .inv-grid, #inventory.tab-outfits .inv-help { display: none; }
.inv-item { cursor: pointer; position: relative; }
.inv-item.some { border-color: #f2b51c; background: #fffaea; }
.inv-icon em { font-style: normal; font-size: 26px; position: absolute; transform: translate(-14px, 30px); }
.inv-item.part .inv-icon { position: relative; }
.inv-parts { display: flex; gap: 4px; margin-top: 2px; }
.inv-parts button { width: 36px; height: 30px; border-radius: 10px; border: 3px solid #b9cde0; background: #f3f7fb; font-size: 17px; line-height: 1; cursor: pointer; padding: 0; }
.inv-parts button:hover { border-color: var(--blue); }
.inv-parts button.on { border-color: #35a632; background: #d8fbd2; }
.inv-item.cos .inv-icon { font-size: 46px; }
.inv-item.cos .inv-name { font-size: 15px; }
.inv-frame-sw { width: 70px; height: 84px; border-radius: 12px; border: 4px solid; }

/* muestras de marco */
.sw-classic { background: linear-gradient(160deg, #8fc6ef, #5f9fd8 60%, #6aa8dd); border-color: #2d5f93 !important; }
.sw-frmPink { background: linear-gradient(160deg, #ffd0e4, #ff94c2 58%, #ffb3d4); border-color: #c2457e !important; }
.sw-frmHalloween { background: radial-gradient(circle at 75% 15%, #ff8a1f 0 10%, transparent 11%), linear-gradient(165deg, #6a3a9a, #3a1d5c 55%, #1d0f30); border-color: #ff8a1f !important; }
.sw-frmAesthetic { background: radial-gradient(circle at 25% 20%, #fff 0 14%, transparent 15%), linear-gradient(160deg, #ffe0f0, #e6d6ff 48%, #cfe6ff); border-color: #9a7fd1 !important; }
.frame-sw-big { width: 150px !important; height: 190px !important; border-radius: 22px; border: 6px solid; animation: none !important; cursor: pointer; position: relative; box-shadow: inset 0 0 0 5px rgba(255,255,255,.35); }
.frame-sw-big::after { position: absolute; inset: 0; display: grid; place-items: center; font-size: 56px; }
.frame-sw-big.sw-classic::after { content: '❄️'; }
.frame-sw-big.sw-frmPink::after { content: '🩷'; }
.frame-sw-big.sw-frmHalloween::after { content: '🎃'; }
.frame-sw-big.sw-frmAesthetic::after { content: '🌷'; }
#catFrames .cat-items { grid-template-columns: repeat(2, 1fr); gap: 10px; }
#catFrames .cat-item { padding: 8px; gap: 2px; }
#catFrames .cat-item h3 { font-size: 24px; }
#catFrames .cat-item p { font-size: 15px; margin: 0; }
#catFrames .cat-item .cat-price { font-size: 24px; }
#catFrames .cat-item .btn { font-size: 20px; padding: 6px 16px; }

/* ---------- outfits ---------- */
.inv-outfits:empty { display: none; }
.of-save { display: flex; gap: 14px; align-items: center; padding: 10px; border-radius: 20px; background: rgba(255,255,255,.8); border: 4px solid #7fb0dc; }
.of-now { width: 110px; height: 160px; flex: none; }
.of-now svg, .of-bear svg { width: 100%; height: 100%; overflow: visible; }
.of-form { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.of-form b { font: 700 22px var(--font); color: #34506e; }
.of-form input { font: 600 20px var(--font); padding: 8px 12px; border-radius: 12px; border: 3px solid #7fb0dc; outline: none; width: 100%; }
.of-form input:focus { border-color: #f2b51c; }
.of-form .btn { font-size: 20px; padding: 8px 14px; }
.of-form small { font: 600 15px var(--font); color: #5a7390; }
.of-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; max-height: 410px; overflow-y: auto; padding-right: 6px; }
.of-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px; border-radius: 18px; background: #fff; border: 4px solid #7fb0dc; }
.of-card.missing { border-style: dashed; opacity: .8; }
.of-bear { width: 92px; height: 132px; }
.of-name { font: 700 17px var(--font); color: #34506e; text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.of-btns { display: flex; gap: 4px; }
.of-btns .btn { font-size: 15px; padding: 5px 9px; }
.of-empty { grid-column: 1 / -1; font: 500 20px var(--font); color: #456; text-align: center; margin: 20px 0; }
.frame-frmHalloween .of-save, .frame-frmHalloween .of-card { background: rgba(255,240,220,.92); }

/* ---------- catálogo: tarjetas ---------- */
.cv-page.frame-page { background: radial-gradient(circle at 75% 15%, #fff, transparent 35%), linear-gradient(160deg, #ffd0e4, #c9b3ff 50%, #6a3a9a); }
.frame-sticker { background: linear-gradient(#ffe0f0, #c9b3ff) !important; }
/* portada del catálogo: Halloween compacto + lista de novedades legible */
.spread[data-spread="1"] #catFeatured .cat-items { gap: 12px; }
.spread[data-spread="1"] #catFeatured .cat-item { display: grid; grid-template-columns: 110px 1fr; grid-template-rows: auto auto auto; column-gap: 12px; row-gap: 2px; align-items: center; text-align: left; padding: 8px 12px; }
.spread[data-spread="1"] #catFeatured .cat-item-art { width: 110px !important; height: 110px !important; grid-row: 1 / 4; animation: none; }
.spread[data-spread="1"] #catFeatured .cat-item h3 { font-size: 22px; margin: 0; }
.spread[data-spread="1"] #catFeatured .cat-item p { display: none; }
.spread[data-spread="1"] #catFeatured .cat-item .cat-price { font-size: 22px; justify-content: flex-start; }
.spread[data-spread="1"] #catFeatured .cat-item .btn { font-size: 18px; padding: 6px 14px; justify-self: start; }
#catSoon { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; max-height: 560px; overflow-y: auto; padding: 4px 6px 4px 2px; align-content: start; }
#catSoon::before { content: '📰 Novedades de esta edición'; grid-column: 1 / -1; font: 700 24px var(--font); color: #7a3a10; padding: 2px 4px; }
#catSoon .fk-sticker { display: grid !important; grid-template-columns: 52px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: left;
  min-height: 84px; padding: 8px 12px !important; border-width: 3px; border-radius: 16px; transform: none !important; }
#catSoon .fk-sticker span { grid-row: 1 / 3; font-size: 40px !important; text-align: center; }
#catSoon .fk-sticker b { font-size: 20px; line-height: 1.1; }
#catSoon .fk-sticker small { font-size: 16px !important; }
#catSoon .fk-sticker:hover { filter: brightness(1.06); transform: translateY(-2px) !important; }
.wings-sticker { background: linear-gradient(#ffffff, #fff1c4) !important; }
.cv-page.wings-page { background: radial-gradient(circle at 50% 25%, #fffbe8, transparent 50%), linear-gradient(160deg, #bfe3ff, #8fb8f0 55%, #f2d9a0); }
.cv-page.wings-page .cv-bear svg, #catWings .cat-item-art svg { overflow: visible; }

.frame-preview { position: absolute; left: 0; right: 0; bottom: 40px; display: grid; place-items: center; z-index: 2; }
.mini-card { position: relative; width: 300px; height: 440px; border-radius: 26px; padding: 62px 18px 16px; background: var(--cf-bg); border: 5px solid var(--cf-bd);
  box-shadow: inset 0 0 0 5px var(--cf-in), 0 12px 0 rgba(0,0,0,.25); transform: rotate(-3deg); animation: floaty 3s ease-in-out infinite; }
.mini-card .cf-deco { border-radius: 20px; transform: scale(1); }
.mini-card .cf-deco i { scale: .6; }
.mc-name { position: absolute; left: 0; right: 0; top: 14px; text-align: center; font: 700 28px var(--font); color: #fff; text-shadow: 0 3px 0 var(--cf-bd); z-index: 2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 20px; }
.mc-portrait { position: relative; z-index: 2; height: 270px; border-radius: 18px; overflow: hidden; background: radial-gradient(ellipse at 50% 45%, #e9f5ff 0, #8ebde6 32%, #2f629f 70%, #173f73 100%); display: grid; place-items: end center; }
.mc-portrait svg { height: 240px; width: auto; margin-bottom: 8px; overflow: visible; }
.mc-portrait .shadow { display: none; }
.mc-stats { position: relative; z-index: 2; display: flex; justify-content: space-around; margin-top: 14px; font: 700 24px var(--font); color: var(--cf-text); }
.mc-stats span { display: flex; align-items: center; gap: 6px; }
.mc-flake { font-style: normal; background: #fff; color: var(--cf-flake); border: 3px solid var(--cf-flake-bd); border-radius: 8px; width: 30px; height: 30px; display: grid; place-items: center; font-size: 22px; }
.mc-stats .coin { font-size: 30px; }

/* ---------- inventario con la imagen de cada objeto ---------- */
.inv-art { width: 112px; height: 84px; display: block; flex: none; border-radius: 14px; background: radial-gradient(circle at 50% 40%, #fff 0 45%, #e3f0fb 75%); overflow: hidden; pointer-events: none; }
.inv-art svg { width: 100%; height: 100%; display: block; }
/* el navegador no pinta los objetos que quedan fuera de la vista (inventario más ligero) */
#inventory .inv-item { content-visibility: auto; contain-intrinsic-size: 136px 150px; }
.inv-art.full { height: 88px; }
.inv-item.on .inv-art { background: radial-gradient(circle at 50% 40%, #fff 0 45%, #d6f6cf 75%); }
.inv-item .inv-name { font-size: 15px; line-height: 1.05; max-height: 32px; overflow: hidden; }
.inv-item .inv-state { font-size: 14px; }
.inv-item.cos .inv-art { height: 72px; }
.inv-frame-sw { width: 66px; height: 82px; border-radius: 12px; border: 5px solid; display: block; box-shadow: inset 0 0 0 4px rgba(255,255,255,.35); }

/* ---------- toda la letra del juego en Fredoka ---------- */
body, button, input, textarea, select, .btn { font-family: var(--font); }
svg text { font-family: var(--font); }