/* Imagilang 2.0 · recompensas.css — extraído del index monolítico (Fase 1 refactor) */

/* ═══ hub de mundos + selector de avatares ═══ */
/* ── hub de Recompensas: mundos coleccionables ── */
main>#v-premios,main>#v-album,main>#v-tazos{max-width:980px}
#v-premios{container-type:inline-size}
main>#v-avatares{max-width:820px}
.reward-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;margin:18px 0 28px}
.reward-card{position:relative;isolation:isolate;min-width:0;min-height:206px;border:1.5px solid var(--border);border-radius:24px;
  overflow:hidden;background:var(--surface);box-shadow:var(--shadow);padding:20px;text-align:left;color:var(--text);
  display:flex;flex-direction:column;justify-content:space-between;gap:14px}
button.reward-card{width:100%;min-height:206px;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
button.reward-card:hover{transform:translateY(-3px);border-color:#C4B5FD;box-shadow:0 15px 38px rgba(46,16,101,.15)}
button.reward-card:active{transform:scale(.985)}
.reward-card::before{content:'';position:absolute;z-index:-1;width:170px;height:170px;border-radius:50%;right:-54px;top:-64px;background:var(--reward-glow,#EDE9FE)}
.reward-card.album{--reward-glow:#E4F7ED}.reward-card.tazos{--reward-glow:#FFF0C9}.reward-card.build{--reward-glow:#FFE3EA}
.reward-card.games{--reward-glow:#DDF4FF}.reward-card.avatars{--reward-glow:#EDE9FE}
.reward-copy{position:relative;z-index:1;max-width:28ch}
.reward-copy h2{font-size:clamp(1.2rem,1rem + 1vw,1.55rem);line-height:1.15}
.reward-copy p{color:var(--text2);font-weight:650;font-size:.9rem;line-height:1.4;margin-top:5px}
.reward-action{display:inline-flex;align-items:center;gap:6px;color:var(--purple);font-size:.84rem;font-weight:900}
.reward-action svg{width:17px;height:17px}
.reward-badge{display:inline-flex;align-items:center;min-height:30px;padding:5px 11px;border-radius:99px;background:#F5F3FF;color:#8B87A8;font-size:.72rem;font-weight:900;letter-spacing:.04em;text-transform:uppercase}
.reward-art{position:absolute;right:9px;bottom:8px;width:126px;height:126px;display:grid;place-items:center;pointer-events:none}
.reward-art svg{width:100%;height:100%;overflow:visible}
.reward-art .mini-avatars{display:grid;grid-template-columns:repeat(2,48px);gap:5px;transform:rotate(3deg)}
.reward-art .mini-avatars img{width:48px;height:48px;border-radius:50%;object-fit:cover;background:#fff;border:3px solid #fff;box-shadow:0 5px 14px rgba(46,16,101,.15)}
.reward-card.upcoming{background:#FBFAFF;border-style:dashed;box-shadow:none}
.reward-card.upcoming .reward-copy{padding-right:84px}
.view-back{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:10px 14px;margin:2px 0 8px;
  border:0;border-radius:14px;background:rgba(255,255,255,.8);color:var(--purple);font-weight:850;cursor:pointer;box-shadow:0 3px 14px rgba(46,16,101,.06)}
.view-back:hover{background:#fff}.view-back svg{width:19px;height:19px}
@container (min-width:640px){
  .reward-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .reward-card.album{grid-column:span 2;min-height:224px}.reward-card.album .reward-art{width:170px;height:150px;right:24px}
}
@container (min-width:840px){
  .reward-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .reward-card.album{grid-column:span 2}.reward-card.games{grid-column:span 2}
}

/* selector de avatares */
.avatar-panel{background:var(--surface);border-radius:24px;padding:clamp(18px,4vw,30px);box-shadow:var(--shadow);margin-top:10px}
.avatar-panel>p{text-align:center;color:var(--text2);font-weight:650}
.reward-avatars{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:20px}
.reward-avatar{position:relative;min-width:0;min-height:154px;padding:14px;border:2px solid var(--border);border-radius:20px;background:#fff;
  color:var(--deep);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;font-weight:850;transition:border-color .16s,transform .16s,background .16s}
.reward-avatar:hover{border-color:var(--purple-light);transform:translateY(-2px)}
.reward-avatar img{width:84px;height:84px;border-radius:50%;object-fit:cover;background:#F5F3FF}
.reward-avatar .avatar-used{display:none;color:var(--purple);font-size:.75rem;font-weight:900}
.reward-avatar.on{border-color:var(--purple);background:#F5F3FF;box-shadow:0 0 0 3px rgba(124,58,237,.1)}
.reward-avatar.on .avatar-used{display:block}.reward-avatar:disabled{cursor:wait;opacity:.62;transform:none}
.avatar-status{min-height:1.5em;margin-top:14px;text-align:center;color:var(--green);font-weight:800}
.avatar-status.err{color:var(--red)}
@media (min-width:480px){.reward-avatars{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ═══ álbum de cartas + visor ═══ */
/* ── álbum de cartas (Recompensas): colección numerada con candados ── */
.alb-panel{background:var(--surface);border-radius:22px;padding:clamp(16px,3vw,26px);box-shadow:var(--shadow);margin-top:16px;text-align:left}
.alb-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.alb-head h2{font-size:clamp(1.3rem,4vw,1.7rem)}
.alb-sub{color:var(--text2);font-weight:600;margin-top:2px}
.alb-counter{display:inline-flex;align-items:center;gap:9px;background:#FBFAFF;border:1px solid var(--border);
  border-radius:14px;padding:10px 16px;min-height:48px;font-weight:800;color:var(--deep);white-space:nowrap}
.alb-counter svg{width:18px;height:18px;color:var(--purple);flex:0 0 auto}
.alb-tabs{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--border);padding-bottom:12px;margin:14px 0 18px}
.alb-tab{padding:9px 20px;border-radius:99px;border:0;background:none;font-weight:800;font-size:.92rem;
  color:var(--text2);min-height:42px;cursor:pointer;transition:background .15s,color .15s}
.alb-tab:hover:not(.on){color:var(--purple)}
.alb-tab.on{background:#EDE9FE;color:var(--purple)}
#albumGrid,#tazosGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:16px}
.alb-card{position:relative;aspect-ratio:3/4;border-radius:16px;background:var(--surface);border:1.5px solid #DDD6FE;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:12px 6px 10px;
  box-shadow:0 4px 14px rgba(46,16,101,.06);cursor:pointer;transition:transform .15s,box-shadow .15s}
.alb-card:not(.vacia):hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(124,58,237,.16)}
.alb-card:not(.vacia):active{transform:scale(.95)}
.alb-num{position:absolute;top:-9px;left:-9px;width:26px;height:26px;border-radius:50%;background:var(--purple);
  color:#fff;font-size:.72rem;font-weight:800;display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 6px rgba(124,58,237,.4)}
.alb-img{width:70%;max-width:96px;aspect-ratio:1/1;border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 50% 42%,#E5DEFC 0%,#F3F0FF 62%,#FBFAFF 100%)}
.alb-img img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s;mix-blend-mode:multiply}
.alb-img img.ready{opacity:1}
/* flashcard (Mundo 2): color a sangre, sin el multiply pensado para ilustraciones de fondo blanco */
.alb-img img.fc{mix-blend-mode:normal}
.alb-en{font-size:.88rem;font-weight:800;color:var(--text);line-height:1.15;max-width:100%;padding:0 4px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.alb-es{font-size:.72rem;font-weight:700;color:var(--text2);line-height:1.1;max-width:100%;padding:0 4px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.alb-rare{font-size:.64rem;font-weight:800;padding:3px 11px;border-radius:99px;background:#EDE9FE;color:var(--purple);letter-spacing:.02em}
.alb-rare.r-rara{background:#DBEAFE;color:#1D4ED8}
.alb-rare.r-epica{background:#FCE7F3;color:#BE185D}
.alb-rare.r-legend{background:#FEF3C7;color:#B45309}
.alb-card.vacia{background:#F8F7FE;border:2px dashed #DDD6FE;box-shadow:none;cursor:default;gap:8px;color:#A5A0C8}
.alb-lockn{font-size:1.35rem;font-weight:800;color:#A5A0C8;line-height:1}
.alb-lock{display:flex}
.alb-lock svg{width:15px;height:15px;color:#B9B4D8}
.alb-prog{font-size:.68rem;font-weight:800;color:var(--purple-light)}
.alb-empty{grid-column:1/-1;text-align:center;color:var(--text2);font-weight:600;padding:26px 0}
.alb-hint{margin-top:16px;text-align:center;color:var(--text2);font-size:.88rem;font-weight:600}

/* ── marcos: skins del álbum de cartas, comprados con gemas ── */
.marcos-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:14px 0}
.marcos-lbl{font-weight:800;color:var(--text2);font-size:.85rem;width:100%}
.marco-chip{display:flex;flex-direction:column;align-items:center;gap:1px;padding:8px 14px;
  border:2px solid var(--border);border-radius:14px;background:#fff;cursor:pointer;transition:.15s;min-width:78px}
.marco-chip .mc-emo{font-size:1.4rem;line-height:1}
.marco-chip b{font-size:.82rem;color:var(--text)}
.marco-chip small{font-size:.68rem;color:var(--text2)}
.marco-chip:hover:not(.on){border-color:var(--purple)}
.marco-chip.on{border-color:var(--purple);background:rgba(124,58,237,.08)}
.marco-chip.on small{color:var(--purple);font-weight:800}
.marco-chip.lock small{color:#B45309;font-weight:800}
/* pieles: cambian el borde de la tarjeta + el medallón del número */
.alb-card.mk-black{border-color:#3a3a44}
.alb-card.mk-black .alb-num{background:linear-gradient(135deg,#0f0f13,#3a3a44)}
.alb-card.mk-dorada{border-color:#D97706}
.alb-card.mk-dorada .alb-num{background:linear-gradient(135deg,#FDE68A,#D97706)}
.alb-card.mk-diamante{border-color:#67e8f9;box-shadow:0 0 14px rgba(103,232,249,.45)}
.alb-card.mk-diamante .alb-num{background:linear-gradient(120deg,#22d3ee,#818cf8)}
.vc.mk-black{border-color:#3a3a44;box-shadow:0 20px 60px rgba(0,0,0,.35),0 0 0 3px #3a3a44}
.vc.mk-dorada{border-color:#D97706;box-shadow:0 20px 60px rgba(0,0,0,.35),0 0 0 3px #D97706}
.vc.mk-diamante{border-color:#67e8f9;box-shadow:0 20px 60px rgba(0,0,0,.35),0 0 0 3px #67e8f9,0 0 20px rgba(103,232,249,.5)}
/* la carta conseguida es la ilustración: ocupa el hueco entero, texto encima.
   los tazos (#tazosGrid) conservan la miniatura redonda. */
#albumGrid .alb-card:not(.vacia){overflow:hidden;padding:0 8px 10px;gap:2px;justify-content:flex-end;background:#EDE9FE}
#albumGrid .alb-card:not(.vacia) .alb-img{position:absolute;inset:0;width:auto;max-width:none;aspect-ratio:auto;border-radius:0}
#albumGrid .alb-card:not(.vacia) .alb-img img{mix-blend-mode:normal}
/* hueco reservado abajo para las 3 estrellas: el texto (en/es) sube y nunca se pisan */
#albumGrid .alb-card:not(.vacia){padding-bottom:30px}
/* sombra inferior amoldada a las curvas de la carta, más profunda en la base:
   las estrellas siempre legibles, pinte lo que pinte la ilustración detrás */
#albumGrid .alb-card:not(.vacia)::after{content:'';position:absolute;inset:auto 0 0 0;height:60%;pointer-events:none;
  border-radius:0 0 14px 14px;
  background:linear-gradient(to top,rgba(23,15,60,.97) 0%,rgba(23,15,60,.9) 18%,rgba(23,15,60,.75) 38%,rgba(23,15,60,0) 100%)}
#albumGrid .alb-card:not(.vacia) .alb-num{z-index:2;top:7px;left:7px;box-shadow:0 2px 8px rgba(0,0,0,.4)}
#albumGrid .alb-card:not(.vacia) .alb-en{position:relative;z-index:2;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.55)}
#albumGrid .alb-card:not(.vacia) .alb-es{position:relative;z-index:2;color:#fff;opacity:.92;text-shadow:0 1px 4px rgba(0,0,0,.6)}
#albumGrid .alb-card:not(.vacia) .alb-rare{position:relative;z-index:2}
/* flashcard (Mundo 2): la cara ya pinta «Aunt» arriba y «Tía» abajo → fuera los rótulos
   en/es duplicados y la sombra (su mitad inferior ya va oscurecida y las ☆ se leen) */
#albumGrid .alb-card.alb-fc .alb-en,#albumGrid .alb-card.alb-fc .alb-es{display:none}
#albumGrid .alb-card.alb-fc::after{height:22%;background:linear-gradient(to top,rgba(23,15,60,.55),rgba(23,15,60,0))}
/* visor de la carta en grande (mismo patrón que el álbum japonés) */
.visor{position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;gap:10px;
  padding:16px;background:rgba(30,27,75,.78);backdrop-filter:blur(4px)}
.visor.on{display:flex}
.visor-nav{flex:0 0 auto;width:52px;height:52px;border-radius:50%;border:0;background:rgba(255,255,255,.94);
  color:var(--purple);font-size:1.9rem;font-weight:800;line-height:1;box-shadow:var(--shadow);cursor:pointer;transition:transform .15s}
.visor-nav:active{transform:scale(.9)}
.visor-x{position:absolute;top:14px;right:14px;width:48px;height:48px;border-radius:50%;border:0;
  background:rgba(255,255,255,.94);color:var(--deep);font-size:1.15rem;font-weight:800;box-shadow:var(--shadow);cursor:pointer;z-index:2}
.visor-wrap{max-width:min(430px,86vw,64dvh);width:100%;max-height:92dvh;overflow:auto;scrollbar-width:none}
/* en el visor la carta llena su hueco (fuera el tope de 360px de .ccard): un poco más grande (Dave 2026-10-07) */
.visor .ccard{max-width:none}
/* sin sombra en el visor: .visor-wrap (overflow:auto) la recortaba y dejaba un recuadro alrededor de la carta */
.visor .ccard{filter:none}
.visor .vc{box-shadow:none}
.vc{background:var(--surface);border:1.5px solid #DDD6FE;border-radius:22px;padding:18px 16px;
  display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.35);animation:appear .25s ease}
.vc-top{display:flex;align-items:center;justify-content:space-between;width:100%}
.vc-top .alb-num{position:static;width:30px;height:30px;font-size:.82rem}
.vc-top .alb-rare{font-size:.74rem}
.vc .bigword{font-size:clamp(1.7rem,6.5vw,2.2rem)}
.vc-scene{width:62%;max-width:220px;aspect-ratio:1/1;border-radius:16px;overflow:hidden;background:#F5F3FF;margin:2px auto}
.vc-scene img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s}
.vc-scene img.ready{opacity:1}
.vc-es{font-size:1.45rem;font-weight:800;color:var(--text)}
.vc .story{margin-top:4px;font-size:1.05rem}
.vc .btn{margin-top:8px;max-width:240px;min-height:48px}
.visor-count{text-align:center;color:#fff;font-weight:700;font-size:.9rem;margin-top:10px}
@media (max-width:560px){ .visor{gap:6px;padding:10px} .visor-nav{width:44px;height:44px} }

/* ═══ carta coleccionable (visor del álbum): plantillas de la app teñidas por tipo,
   colocación de CardView.kt, 100% fluida con unidades de contenedor (cqw/cqh) ═══ */
.ccard{position:relative;width:100%;max-width:360px;margin:0 auto;aspect-ratio:1355/1861;
  container-type:size;--type:#6280ED;filter:drop-shadow(0 18px 36px rgba(10,6,32,.5))}
.ccard .cc-clip{position:absolute;inset:0;border-radius:6cqw;overflow:hidden}
/* CARGANDO la ilustración: brillo (skeleton) del COLOR DE SU TIPO (--type: adjetivo morado,
   verbo azul…) SOLO en el hueco de la ilustración (mismo recuadro que .cc-ilus, por debajo del
   marco); desaparece del todo en cuanto llega la imagen (.cc-ilus.ready) */
.ccard .cc-clip::before{content:"";position:absolute;top:2.5%;left:3.5%;width:93%;height:95%;border-radius:3.8cqh;   /* dentro del marco: sus esquinas son redondas (comprobado sobre plantilla_marco) */
  
  background:linear-gradient(100deg,color-mix(in srgb,var(--type) 45%,#fff) 30%,color-mix(in srgb,var(--type) 18%,#fff) 50%,color-mix(in srgb,var(--type) 45%,#fff) 70%) 0 0/300% 100%;
  animation:ccCarga 1.3s linear infinite}
.ccard:has(.cc-ilus.ready) .cc-clip::before{content:none}
@keyframes ccCarga{to{background-position:-150% 0}}
@media (prefers-reduced-motion:reduce){ .ccard .cc-clip::before{animation:none} }
.ccard .cc-lyr,.ccard .cc-tint{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ccard .cc-lyr{object-fit:fill}
.ccard .cc-ilus{position:absolute;top:1.5%;left:2%;width:96%;height:97%;object-fit:cover;
  border-radius:2cqh;background:transparent;opacity:0;transition:opacity .3s;pointer-events:none}
.ccard .cc-ilus.ready{opacity:1}
/* capa teñida = plantilla en escala de grises × color del tipo (Modulate: conserva el bisel) */
.ccard .cc-tint{background:var(--type);
  -webkit-mask:var(--src) center/100% 100% no-repeat;mask:var(--src) center/100% 100% no-repeat}
.ccard .cc-tint::before{content:"";position:absolute;inset:0;
  background:var(--src) center/100% 100% no-repeat;mix-blend-mode:multiply}
.ccard .cc-audio{position:absolute;width:6.5cqh;height:6.5cqh;
  left:calc(93.51cqw - 6.5cqh - 2cqw);top:calc(9.95cqh - 3.25cqh);
  background:none;border:0;padding:0;cursor:pointer;z-index:6}
.ccard .cc-audio img{width:100%;height:100%}
.ccard .cc-t{position:absolute;display:flex}
.ccard .cc-en{left:8.54cqw;top:5.5cqh;width:65cqw;height:9.3cqh;align-items:center;justify-content:flex-start;
  font-family:'Cormorant Garamond',serif;font-weight:700;font-size:var(--fs-en,7cqh);color:#fff;white-space:nowrap;line-height:1}
.ccard .cc-pron{left:7.68cqw;top:14.5cqh;width:60cqw;height:9cqh;flex-direction:column;justify-content:center;
  align-items:flex-start;cursor:pointer}
/* verde de la pronunciación oficial: GreenPronunciation (Android Color.kt) = #0FA35B, en negrita (iOS) */
.ccard .cc-pron .cc-p{font-family:'Kumbh Sans';font-size:3.4cqh;color:#0FA35B;font-weight:700;line-height:1}
.ccard .cc-pron .cc-ipa{margin-top:.8cqh;font-size:2.4cqh;color:#fff;font-weight:600;
  background:var(--type);border-radius:1.2cqh;padding:.4cqh 1.2cqh;display:none;white-space:nowrap}
.ccard .cc-pron.open .cc-ipa{display:inline-block}
/* cartas sin pronunciación (p. ej. las pequeñas de La Arena): fuera el texto fonético Y su
   panel de fondo (las dos capas plantilla_panel_pronu*) */
.ccard--sin-pron .cc-pron,
.ccard--sin-pron .cc-l-panel_pronu,
.ccard--sin-pron .cc-l-panel_pronu_marco{display:none}
/* FICHA de combate (.ccard--token): SOLO ilustración + marco + palabra en inglés. Fuera el
   resto de textos y sus paneles (español, historia, tipo, nivel y pronunciación). */
.ccard--token .cc-pron,.ccard--token .cc-es,.ccard--token .cc-story,
.ccard--token .cc-type,.ccard--token .cc-level,
.ccard--token .cc-l-panel_historia,.ccard--token .cc-l-panel_pronu,.ccard--token .cc-l-panel_pronu_marco,
.ccard--token .cc-l-palabra_esp,.ccard--token .cc-l-palabra_esp_marc,
.ccard--token .cc-l-sombra_tipo_palabra,.ccard--token .cc-l-tipo_palabra,.ccard--token .cc-l-nivel_palabra{display:none}
/* significado en español: Cormorant bold. Las apps usan #A835D4; las cartas oficiales de referencia
   (assets/car-card.webp, happy-card.webp) lo pintan en morado más oscuro → se sigue la referencia. */
.ccard .cc-es{left:12.5cqw;top:65.5cqh;width:75cqw;height:9.19cqh;align-items:center;justify-content:center;
  font-family:'Cormorant Garamond',serif;font-weight:700;font-size:var(--fs-es,7cqh);color:#72279D;line-height:1;text-align:center}
.ccard .cc-story{left:7.5cqw;top:72.16cqh;width:85cqw;height:24.45cqh;align-items:center;justify-content:center}
/* historia: más grande que en las apps (3.6 % del alto) para igualar la carta oficial de referencia;
   el tamaño baja solo con historias largas (--fs-st, cartavisual.js) */
.ccard .cc-story span{font-family:'Kumbh Sans';font-size:var(--fs-st,4.3cqh);line-height:1.2;color:#111;text-align:center}
/* keyword / significado: formato único .st-kw/.st-sig (base.css). La regla «.cc-story span» de arriba
   pisaría su color, así que se repiten aquí los colores con la especificidad de la carta. */
.ccard .cc-story .st-kw{color:#08A256}
.ccard .cc-story .st-sig{color:#7437E8}
/* chips de tipo y nivel: tamaños de CardView.kt / CardFaceView.swift (0.016 y 0.018 del alto),
   un pelín más grandes para igualar la carta oficial de referencia */
.ccard .cc-type{left:76.8cqw;top:18.5cqh;transform:translateY(-50%);width:10cqw;justify-content:center;
  font-family:'Kumbh Sans';font-weight:600;font-size:2.2cqh;line-height:1;color:#fff}
.ccard .cc-level{right:3.3cqw;top:18.5cqh;transform:translateY(-50%);width:15cqw;justify-content:center;
  font-family:'Kumbh Sans';font-weight:600;font-size:2.2cqh;line-height:1;color:#fff}

/* MINIATURA de la carta oficial (.ccard--mini, álbum): la carta de la app ESCALADA. Tamaños en
   cqh (alto de la carta) con las proporciones de CardView.kt / CardFaceView.swift: inglés 5,8 %,
   español 4,8 %, historia 3,6 % (interlínea 4,2 %) → escala igual en móvil y escritorio.
   Fuera solo lo que no aporta a ese tamaño: pronunciación, chips de tipo/nivel y audio. */
.ccard--mini{filter:drop-shadow(0 4px 10px rgba(10,6,32,.28))}
.ccard--mini .cc-pron,.ccard--mini .cc-type,.ccard--mini .cc-level,
.ccard--mini .cc-l-panel_pronu,.ccard--mini .cc-l-panel_pronu_marco,
.ccard--mini .cc-l-sombra_tipo_palabra,.ccard--mini .cc-l-tipo_palabra,.ccard--mini .cc-l-nivel_palabra{display:none}
/* textos largos: una línea con elipsis (el tamaño ya encoge algo en cartavisual.js) */
.ccard--mini .cc-en{display:block;width:78cqw;text-align:left;line-height:9.3cqh;overflow:hidden;text-overflow:ellipsis}
.ccard--mini .cc-es{display:block;left:10cqw;width:80cqw;line-height:9.19cqh;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* historia: hasta 4 líneas dentro de su panel; deja libre el borde inferior para las estrellas */
.ccard--mini .cc-story{top:72.5cqh;height:21.5cqh}
.ccard--mini .cc-story>span{line-height:4.2cqh;display:-webkit-box;-webkit-box-orient:vertical;
  -webkit-line-clamp:4;line-clamp:4;overflow:hidden;overflow-wrap:anywhere}

/* tesela del álbum con la carta oficial: la carta ES la tesela (fuera fondo, borde y sombra
   del contenedor antiguo); número arriba a la derecha y estrellas en pastilla sobre el borde inferior */
:is(#albumGrid,#expGroups) .alb-card.alb-oficial{display:block;padding:0;border:0;background:none;box-shadow:none;overflow:visible;
  aspect-ratio:1355/1861;border-radius:6%/4.4%}
:is(#albumGrid,#expGroups) .alb-card.alb-oficial::after{content:none}
:is(#albumGrid,#expGroups) .alb-card.alb-oficial .ccard{max-width:none}
/* número arriba a la DERECHA: en la miniatura no hay botón de audio y así no tapa la palabra */
:is(#albumGrid,#expGroups) .alb-card.alb-oficial .alb-num{top:-8px;left:auto;right:-8px;z-index:7}
/* teselas algo más anchas en tablet/escritorio para que la carta oficial se lea bien; hueco
   vertical extra para la pastilla de estrellas que asoma bajo cada carta */
#albumGrid:has(.alb-oficial),.exp-grid:has(.alb-oficial){row-gap:26px}
@media (min-width:600px){ #albumGrid,.exp-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))} }
/* ESTRELLAS: pastilla compacta centrada SOBRE el borde inferior del marco (mitad fuera de la
   carta) → se leen bien y no tapan ni la historia ni el español */
:is(#albumGrid,#expGroups) .alb-card.alb-oficial .alb-stars{left:50%;right:auto;bottom:-10px;transform:translateX(-50%);z-index:7;
  display:inline-flex;gap:1px;padding:3px 8px 4px;border-radius:99px;background:#fff;border:1px solid #E4DEFA;
  box-shadow:0 2px 6px rgba(46,16,101,.18);font-size:12px;letter-spacing:0;white-space:nowrap;filter:none}
:is(#albumGrid,#expGroups) .alb-card.alb-oficial .alb-stars i{color:#CFC8EC;text-shadow:none}
:is(#albumGrid,#expGroups) .alb-card.alb-oficial .alb-stars i.on{color:#F5B400;text-shadow:0 0 2px rgba(180,120,0,.3)}
/* DORADA (3 estrellas) en la miniatura: el box-shadow de .dom-dominada no aplica (la tesela no
   lleva sombra) → filo y halo oro sobre la propia carta, y pastilla dorada */
:is(#albumGrid,#expGroups) .alb-card.alb-oficial.dom-dominada .cc-clip::after{content:'';position:absolute;inset:0;border-radius:inherit;
  box-shadow:inset 0 0 0 2px #f0b429;pointer-events:none;z-index:8}
:is(#albumGrid,#expGroups) .alb-card.alb-oficial.dom-dominada .ccard{filter:drop-shadow(0 0 2px #f0b429) drop-shadow(0 0 9px rgba(240,180,41,.65))}
:is(#albumGrid,#expGroups) .alb-card.alb-oficial.dom-dominada .alb-stars{background:linear-gradient(135deg,#FFF6D6,#FDE68A);border-color:#f0b429}
:is(#albumGrid,#expGroups) .alb-card.alb-oficial.dom-dominada .alb-stars i.on{color:#E09A00}

/* ═══ apertura de sobres (Cartas Especiales) ═══ */
/* ── overlay de apertura de sobres (Cartas Especiales) ── */
#sobreOv{display:none;position:fixed;inset:0;z-index:70;align-items:center;justify-content:center;flex-direction:column;
  background:radial-gradient(circle at 50% 38%,rgba(109,40,217,.55),rgba(46,16,101,.92));backdrop-filter:blur(7px)}
#sobreOv.on{display:flex;animation:appear .3s ease}
.sobre-pick{text-align:center;padding:20px}
.sobre-pick h2{color:#fff;font-size:clamp(1.3rem,4vw,1.7rem);margin-bottom:18px}
.sobre-grid{display:flex;gap:clamp(10px,2.5vw,22px);justify-content:center;flex-wrap:wrap}
.sobre-opt{background:none;border:0;cursor:pointer;border-radius:16px;padding:10px;transition:transform .18s}
.sobre-opt:hover{transform:translateY(-6px) scale(1.04)}
.sobre-opt img{width:clamp(90px,17vw,150px);height:auto;border-radius:10px;filter:drop-shadow(0 12px 26px rgba(0,0,0,.45))}
.sobre-opt b{display:block;color:#fff;margin-top:8px;font-size:.95rem}
.sobre-scene{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;width:100%;height:100%}
.sobre-img{height:min(58vh,470px);width:auto;cursor:pointer;filter:drop-shadow(0 18px 40px rgba(0,0,0,.5));
  animation:sobre-float 3s ease-in-out infinite;transition:transform .3s ease}
@keyframes sobre-float{0%,100%{transform:rotate(-2.5deg) translateY(0)}50%{transform:rotate(2.5deg) translateY(-14px)}}
.sobre-img.endereza{animation:none;transform:rotate(0) translateY(0)}
.sobre-img.zoom{animation:none;transform:scale(1.42);transition:transform .45s cubic-bezier(.2,1.2,.4,1);cursor:default}
.sobre-img.pop{animation:sobre-pop .5s cubic-bezier(.2,1.5,.4,1)}
@keyframes sobre-pop{0%{transform:scale(1.42)}45%{transform:scale(1.56)}100%{transform:scale(1.42)}}
.sobre-flash{position:absolute;inset:0;background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.95),rgba(255,255,255,0) 55%);
  opacity:0;pointer-events:none}
.sobre-flash.on{animation:sobre-flash .55s ease-out}
@keyframes sobre-flash{0%{opacity:0}25%{opacity:1}100%{opacity:0}}
.sobre-hint{color:#EDE9FE;font-weight:800;font-size:1.05rem;text-align:center;animation:prepy-in .4s ease both}
.sobre-btns{display:flex;gap:12px;justify-content:center}
.sobre-btns .btn{margin:0}
.sobre-btns .btn.ghost{background:rgba(255,255,255,.12);color:#fff;box-shadow:none}
.mini-sobres{display:flex;gap:5px;align-items:center}
.mini-sobres img{width:38px;height:auto;border-radius:5px;box-shadow:0 4px 10px rgba(46,16,101,.25)}
.mini-sobres img:nth-child(odd){transform:rotate(-7deg)}
.mini-sobres img:nth-child(even){transform:rotate(7deg)}
@media (prefers-reduced-motion:reduce){.sobre-img{animation:none}}

/* ═══ Vocabulario: dos caras — Colección (álbum) y Explorar (buscador/filtros) ═══ */
/* selector de modo: segmented pill, reutiliza el lenguaje visual de las alb-tabs */
.voc-modes{display:inline-flex;gap:4px;margin:16px 0 4px;padding:4px;background:#F1EEFC;border-radius:99px}
.voc-mode{padding:10px 22px;border:0;border-radius:99px;background:none;font-weight:800;font-size:.95rem;
  color:var(--text2);min-height:48px;cursor:pointer;transition:background .15s,color .15s}
.voc-mode:hover:not(.on){color:var(--purple)}
.voc-mode.on{background:#fff;color:var(--purple);box-shadow:0 2px 8px rgba(124,58,237,.16)}

/* Fundas: bloque plegable y discreto dentro de la Colección */
/* oculto mientras FUNDAS_ACTIVAS = false (js/screens/recompensas.js) */
.fundas-det[hidden]{display:none}
.fundas-det{margin:14px 0;border:1px solid var(--border);border-radius:14px;background:#FBFAFF;overflow:hidden}
.fundas-sum{list-style:none;cursor:pointer;padding:12px 16px;min-height:48px;display:flex;align-items:center;gap:8px;
  font-weight:800;font-size:.9rem;color:var(--text2);user-select:none}
.fundas-sum::-webkit-details-marker{display:none}
.fundas-sum::after{content:'▾';margin-left:auto;transition:transform .2s;color:var(--purple)}
.fundas-det[open] .fundas-sum::after{transform:rotate(180deg)}
.fundas-det[open] .fundas-sum{border-bottom:1px solid var(--border)}
.fundas-det .marcos-row{margin:0;padding:14px 16px}
.fundas-det .marcos-lbl{display:none}

/* ── Explorar: buscador ── */
.exp-search{display:flex;align-items:center;gap:10px;background:#FBFAFF;border:1.5px solid var(--border);
  border-radius:14px;padding:0 16px;min-height:52px;margin-bottom:16px;transition:border-color .15s}
.exp-search:focus-within{border-color:var(--purple)}
.exp-search svg{width:20px;height:20px;color:var(--text2);flex:0 0 auto}
.exp-search input{flex:1;border:0;background:none;font-size:1rem;font-weight:600;color:var(--text);min-height:48px;outline:none}
.exp-tabs{margin-top:0}

/* ── Explorar: chips de filtro por categoría (color por tipo/contexto/nivel) ── */
.exp-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.exp-chip{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:99px;
  border:1.5px solid var(--border);background:#fff;font-weight:800;font-size:.84rem;color:var(--text);
  min-height:42px;cursor:pointer;transition:.15s}
.exp-chip small{font-weight:700;color:var(--text2)}
.exp-cdot{width:11px;height:11px;border-radius:50%;flex:0 0 auto}
.exp-chip:hover:not(.on){border-color:var(--c)}
.exp-chip.on{border-color:var(--c);background:color-mix(in srgb,var(--c) 14%,#fff)}
.exp-chip.on small{color:var(--c)}

/* ── Explorar: grupos con cabecera de color + rejilla de cartas ── */
.exp-group{margin-bottom:26px}
.exp-ghead{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.exp-ghead b{font-size:1.02rem;color:var(--deep)}
.exp-ghead small{font-weight:700;color:var(--text2)}
.exp-dot{width:12px;height:12px;border-radius:50%;flex:0 0 auto}
.exp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:16px}
@media (min-width:600px){ .exp-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))} }
.exp-empty{text-align:center;color:var(--text2);font-weight:600;padding:30px 0}

/* carta del explorador: conseguida = ilustración a sangre; pendiente = tarjeta del color del tipo */
.exp-card{position:relative;aspect-ratio:3/4;border-radius:14px;overflow:hidden;border:1.5px solid #DDD6FE;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:2px;padding:0 8px 10px;
  background:#EDE9FE;cursor:pointer;box-shadow:0 4px 14px rgba(46,16,101,.06);transition:transform .15s,box-shadow .15s}
.exp-card:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(124,58,237,.16)}
.exp-card:active{transform:scale(.95)}
.exp-img{position:absolute;inset:0}
.exp-img img{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .4s}
.exp-img img.ready{opacity:1}
.exp-card .exp-en{position:relative;font-size:.86rem;font-weight:800;color:var(--text);line-height:1.15;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.exp-card .exp-es{position:relative;font-size:.7rem;font-weight:700;color:var(--text2);line-height:1.1;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* sombra inferior para que el texto sea legible sobre la ilustración */
.exp-card.got::after{content:'';position:absolute;inset:auto 0 0 0;height:52%;pointer-events:none;
  background:linear-gradient(to top,rgba(20,8,50,.82),rgba(20,8,50,.34) 55%,transparent)}
.exp-card.got .exp-en{color:#fff;z-index:1}
.exp-card.got .exp-es{color:rgba(255,255,255,.85);z-index:1}
/* pendiente: plano con el color del tipo, candado y texto oscurecido */
.exp-card.locked{aspect-ratio:1355/1861;border-radius:6%/4.4%;background:color-mix(in srgb,var(--tc) 16%,#F8F7FE);border-color:color-mix(in srgb,var(--tc) 40%,#DDD6FE);
  justify-content:center;gap:5px;box-shadow:none}
.exp-card.locked .exp-en{color:var(--tc)}
.exp-lock{font-size:1.1rem;opacity:.7}

@media (max-width:520px){
  /* misma rejilla que la Colección también en móvil */
  .voc-mode{padding:10px 18px}
}
@media (prefers-reduced-motion:reduce){
  .exp-card,.voc-mode,.exp-chip,.fundas-sum::after{transition:none}
}

/* Cartas Especiales (sobres): solo admin — el display:flex de .reward-card anularía [hidden] */
#rcSobres[hidden]{display:none}

/* ═══ escenas de la HISTORIA ANIMADA del álbum (screens/recompensas.js abreIntroAlbum) ═══ */
.vh-carta{display:block;width:clamp(78px,20vw,104px)}
.vh-carta .ccard{max-width:none}
.vh-carta.grande{width:clamp(110px,28vw,140px)}
.vh-abanico{display:flex;align-items:flex-end}
.vh-abanico .vh-carta{margin:0 -10px;transform:rotate(var(--r));animation:vhAbanico .6s cubic-bezier(.3,1.5,.5,1) both;animation-delay:calc(var(--i) * .2s)}
.vh-truco{display:flex;align-items:center;gap:16px}
.vh-flechas{display:flex;flex-direction:column;align-items:center;gap:4px}
.vh-chip{padding:6px 14px;border-radius:99px;font-weight:900;font-size:1.1rem;background:#fff;box-shadow:0 3px 10px rgba(30,27,75,.12);
  animation:ciPop .45s cubic-bezier(.3,1.6,.5,1) both}
.vh-chip.en{color:var(--deep);animation-delay:.6s}
.vh-chip.es{color:#08A256;animation-delay:2.2s}
.vh-chip.es u{text-decoration-thickness:3px;text-underline-offset:4px}
.vh-igual{font-size:1.4rem;color:var(--purple-light);font-weight:900;animation:ciPop .3s 1.6s both}
.vh-album{display:grid;grid-template-columns:repeat(3,auto);gap:8px}
.vh-hueco{display:grid;place-items:center;width:clamp(58px,15vw,74px);aspect-ratio:1355/1861;border-radius:10px;border:2px dashed #D9D3F2;background:#fff8}
.vh-hueco .vh-carta{width:100%}
.vh-carta.vuela{animation:vhVuela .7s cubic-bezier(.3,1.3,.5,1) both;animation-delay:calc(var(--i) * .5s + .3s)}
.vh-dominio{display:flex;flex-direction:column;align-items:center;gap:8px}
.vh-carta.dorada .ccard{animation:vhDorada .8s 2.6s both}
.vh-estrellas{display:flex;gap:4px;padding:4px 12px;border-radius:99px;background:#fff;box-shadow:0 3px 10px rgba(30,27,75,.15);font-size:1.4rem}
.vh-estrellas i{font-style:normal;color:#CFC8EC;animation:vhEstrella .4s both;animation-delay:calc(var(--i) * .8s + .4s)}
.vh-explora{display:flex;flex-direction:column;align-items:center;gap:10px}
.vh-busca{display:inline-flex;align-items:center;gap:8px;min-width:180px;padding:10px 16px;border-radius:99px;background:#fff;
  box-shadow:0 3px 10px rgba(30,27,75,.12);font-weight:800;color:var(--deep)}
.vh-teclea{display:inline-block;overflow:hidden;white-space:nowrap;width:0;border-right:2px solid var(--purple);animation:vhTeclea 1s .5s steps(3) forwards}
.vh-carta.aparece{animation:ciPop .5s 1.7s cubic-bezier(.3,1.6,.5,1) both}
@keyframes vhAbanico{from{transform:translateY(120px) rotate(0)}to{transform:translateY(0) rotate(var(--r))}}
@keyframes vhVuela{from{transform:translateY(-180px) scale(1.3) rotate(-12deg);opacity:0}to{transform:none;opacity:1}}
@keyframes vhEstrella{to{color:#F5B400;transform:scale(1.25)}}
@keyframes vhDorada{to{filter:drop-shadow(0 0 3px #f0b429) drop-shadow(0 0 16px rgba(240,180,41,.8))}}
@keyframes vhTeclea{to{width:3ch}}
@media (prefers-reduced-motion:reduce){
  .vh-abanico .vh-carta,.vh-chip,.vh-igual,.vh-carta.vuela,.vh-estrellas i,.vh-carta.dorada .ccard,.vh-carta.aparece{animation:none!important}
  .vh-teclea{animation:none;width:3ch}
}

/* carta SIN ilustración aún (flashcard): sello SUTIL «🎨 Muy pronto, con dibujo» (docs/CARTAS-SIN-ILUSTRACION.md):
   pequeño, translúcido, CENTRADO abajo en la zona del dibujo (la palabra va más arriba: variante 'palabraCarta') */
.ccard .cc-pronto{position:absolute;left:50%;transform:translateX(-50%);top:57%;z-index:4;white-space:nowrap;
  padding:.45cqh 1.6cqw;border-radius:99px;background:rgba(255,255,255,.62);color:#5B21B6;font-weight:700;font-size:1.85cqh;opacity:.9;
  pointer-events:none}
.scene .cc-pronto.en-escena{position:absolute;right:10px;bottom:10px;z-index:3;white-space:nowrap;
  padding:2px 8px;border-radius:99px;background:rgba(255,255,255,.65);color:#5B21B6;font-weight:700;font-size:.68rem;opacity:.9}
/* en la MINIATURA del álbum, el sello aún más pequeño y discreto (Dave 2026-10-07) */
.ccard--mini .cc-pronto{font-size:1.45cqh;padding:.3cqh 1.2cqw;background:rgba(255,255,255,.55);opacity:.85}