/* ==========================================================================
   Sprites FF · Diseño nuevo (v2)
   Capa visual sobre script.js. Los colores de cada perfil viven en temas.css
   y el Save Image conserva sus reglas en export.css.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

:root {
    --font-ui: 'Nunito', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-display: 'Russo One', var(--font-ui);
    --ease-out: cubic-bezier(.16, 1, .3, 1);
    --ease-soft: cubic-bezier(.22, .61, .36, 1);
    --ease-back: cubic-bezier(.34, 1.56, .64, 1);
    --radio: 22px;
    --gutter: clamp(16px, 4vw, 40px);
    --ancho: 1180px;
    --header-h: 72px;

    /* Rarezas (SPECIAL usa el color del perfil) */
    --r-mythic: #ffc53d;
    --r-legendary: #ff8a3d;
    --r-epic: #b868ff;
    --r-rare: #4ca6ff;
    --oro: #ffcf4a;
    --oro-2: #e6a514;
}

html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }

body.v2 {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-ui);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
    overflow-x: hidden;
}

/* --- Capas de fondo ---------------------------------------------------- */
#fondo {
    position: fixed;
    inset: 0;
    z-index: 0;
    background: var(--fondo);
    transition: background .6s var(--ease-soft);
}

#mundo {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100lvh; /* estable cuando la barra del navegador del celular aparece/desaparece */
    z-index: 0;
    display: block;
    opacity: 0;
    transition: opacity .9s var(--ease-soft);
    pointer-events: none;
}
body.gl-listo #mundo { opacity: 1; }
body.sin-fx #mundo { display: none; }

/* Bandas 2D: solo cuando no hay WebGL o los efectos están apagados */
#bandas-2d {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    display: none;
}
body.sin-fx #bandas-2d { display: block; }
#bandas-2d > * { position: absolute; }
#bandas-2d img, #bandas-2d svg { opacity: .5 !important; }
@media (max-width: 899px) { #bandas-2d { display: none !important; } }

/* Velo de transición entre vistas */
#velo {
    position: fixed;
    inset: 0;
    z-index: 50;
    pointer-events: none;
    background: var(--velo, #0b0b1a);
    clip-path: circle(0 at 50% 50%);
}

/* Intro 3D de un perfil (v2/js/escena/intro.js): encima del velo */
.intro {
    position: fixed;
    inset: 0;
    z-index: 70;
    opacity: 0;
    background: #03142e;
    cursor: pointer;
}
.intro canvas {
    display: block;
    width: 100%;
    height: 100%;
}
.intro-destello {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(circle at 50% 45%, #ffffff 0%, #d9fbff 35%, #7fe9ff 75%, #2bb8ff 100%);
}
.intro-saltar {
    position: absolute;
    right: max(16px, env(safe-area-inset-right));
    bottom: max(16px, env(safe-area-inset-bottom));
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 999px;
    background: rgba(3, 20, 46, .55);
    color: #e6f7ff;
    font: 600 14px/1 Inter, system-ui, sans-serif;
    letter-spacing: .04em;
    cursor: pointer;
}
.intro-saltar:focus-visible { outline: 2px solid #7fe9ff; outline-offset: 2px; }

/* --- Vistas ---------------------------------------------------------------- */
.view {
    position: relative;
    z-index: 1;
    display: none;
    min-height: 100vh;
}
.view.active { display: block; }

.tenue { opacity: .62; }

:focus-visible { outline: 3px solid var(--c); outline-offset: 3px; border-radius: 10px; }

/* ==========================================================================
   VISTA 1 · ¿KIEN ANDA AHÍ?
   ========================================================================== */
#user-selection-view {
    display: none;
    min-height: 100vh;
    min-height: 100svh;
    padding: max(28px, env(safe-area-inset-top)) var(--gutter) max(24px, env(safe-area-inset-bottom));
}
#user-selection-view.active { display: flex; flex-direction: column; }

.menu-centro {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(10px, 2vh, 18px);
    text-align: center;
}

.menu-eyebrow {
    margin: 0;
    font-weight: 800;
    font-size: .78rem;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--ink-dim);
}

.view-title {
    margin: 0 0 clamp(20px, 5vh, 56px);
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2.6rem, 8vw, 6rem);
    line-height: 1;
    letter-spacing: .01em;
    color: var(--ink);
    text-shadow: 0 8px 40px rgba(0, 0, 0, .45);
}
.view-title .palabra {
    display: inline-block;
    opacity: 0;
    transform: translateY(.45em) rotate(4deg);
    animation: palabraEntra .9s var(--ease-out) forwards;
}
.view-title .palabra:nth-child(2) { animation-delay: .12s; }
.view-title .palabra:nth-child(3) { animation-delay: .24s; }
@keyframes palabraEntra { to { opacity: 1; transform: none; } }

.users-container {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(28px, 6vh, 64px) clamp(28px, 7vw, 96px);
    width: min(100%, 860px);
}

.perfil-btn {
    --tam: clamp(96px, 11vw, 148px);
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 6px;
    border: 0;
    background: none;
    color: var(--c);
    font: inherit;
    cursor: pointer;
    opacity: 0;
    transform: translateY(24px) scale(.9);
    animation: perfilEntra .8s var(--ease-out) forwards;
    animation-delay: calc(.35s + var(--i, 0) * .07s);
}
@keyframes perfilEntra { to { opacity: 1; transform: none; } }

.perfil-avatar {
    position: relative;
    width: var(--tam);
    height: var(--tam);
    border-radius: 50%;
    transition: transform .5s var(--ease-back);
}
.perfil-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    display: block;
    border: 3px solid var(--c);
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--c) 18%, transparent), 0 18px 40px rgba(0, 0, 0, .45);
    transition: box-shadow .5s var(--ease-soft);
}
/* Halo CSS (se ve también sin WebGL) */
.perfil-avatar::before {
    content: "";
    position: absolute;
    inset: -22%;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--c) 45%, transparent) 0%, transparent 62%);
    opacity: .35;
    transition: opacity .5s var(--ease-soft), transform .6s var(--ease-out);
    z-index: -1;
}
.perfil-nombre {
    font-family: var(--font-display);
    font-size: clamp(1.05rem, 1.6vw, 1.35rem);
    letter-spacing: .03em;
    color: var(--c);
    text-shadow: 0 2px 18px color-mix(in srgb, var(--c) 45%, transparent);
    transition: transform .5s var(--ease-out);
}
.perfil-btn:hover .perfil-avatar,
.perfil-btn:focus-visible .perfil-avatar,
.perfil-btn.activo .perfil-avatar { transform: translateY(-8px) scale(1.07); }
.perfil-btn:hover .perfil-avatar::before,
.perfil-btn:focus-visible .perfil-avatar::before,
.perfil-btn.activo .perfil-avatar::before { opacity: 1; transform: scale(1.12); }
.perfil-btn:hover .perfil-avatar img,
.perfil-btn.activo .perfil-avatar img { box-shadow: 0 0 0 8px color-mix(in srgb, var(--c) 30%, transparent), 0 0 46px color-mix(in srgb, var(--c) 70%, transparent), 0 22px 46px rgba(0, 0, 0, .5); }
.perfil-btn:hover .perfil-nombre { transform: translateY(-4px); }
.perfil-btn:focus-visible { outline: none; }
.perfil-btn:focus-visible .perfil-avatar img { outline: 3px solid var(--ink); outline-offset: 6px; }
.perfil-btn:active .perfil-avatar { transform: translateY(-4px) scale(.98); }

.user-selection-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: var(--ink-dim);
    font-size: .88rem;
    font-weight: 600;
    text-align: center;
    padding-top: 12px;
}

/* Enlace al diseño clásico (clasico.html), por si alguien lo prefiere */
.ver-clasico {
    flex-basis: 100%;
    color: var(--ink-dim);
    font-size: .76rem;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    opacity: .75;
}
.ver-clasico:hover { opacity: 1; color: var(--ink); }

/* ==========================================================================
   VISTA 2 · COLECCIÓN
   ========================================================================== */
/* script.js le pone un fondo inline (profileBg) al abrir un perfil: aquí manda el mundo 3D */
#collection-view { padding: 0 var(--gutter) 80px; background: transparent !important; overflow-x: clip; }

/* --- Header flotante -------------------------------------------------------- */
.collection-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    max-width: var(--ancho);
    margin: 0 auto;
    padding: max(14px, env(safe-area-inset-top)) 0 14px;
}
/* Franja de vidrio esmerilado de borde a borde de la pantalla (el overflow-x: clip de
   #collection-view la recorta al ancho visible), solo a la altura de la fila de botones.
   Lo que pasa por debajo se ve desenfocado y el borde de abajo se difumina justo bajo los
   botones, sin líneas duras. */
.collection-header::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(50% - 50vw);
    right: calc(50% - 50vw);
    z-index: -1;
    pointer-events: none;
    background: color-mix(in srgb, var(--surface-strong) 58%, transparent);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
    backdrop-filter: blur(18px) saturate(1.3);
    -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 13px), transparent);
    mask-image: linear-gradient(180deg, #000 calc(100% - 13px), transparent);
    opacity: 0;
    transition: opacity .35s var(--ease-soft);
}
.collection-header.pegado::before { opacity: 1; }

.back-btn,
.save-btn,
.current-user-info {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    border-radius: 999px;
    font-family: var(--font-ui);
    font-weight: 800;
    font-size: .95rem;
}
.back-btn {
    padding: 0 18px 0 14px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
    transition: transform .3s var(--ease-back), background .3s, border-color .3s;
}
.back-btn:hover { transform: translateX(-3px); border-color: color-mix(in srgb, var(--c) 60%, transparent); }
.back-btn svg { transition: transform .3s var(--ease-back); }
.back-btn:hover svg { transform: translateX(-3px); }

.header-actions { display: flex; align-items: center; gap: 10px; min-width: 0; }

.current-user-info {
    padding: 0 16px 0 6px;
    border: 1px solid var(--line);
    background: var(--surface);
    min-width: 0;
    white-space: nowrap;
}
.current-user-info > span:first-child { color: var(--ink-dim) !important; font-weight: 700; font-size: .85rem; padding-left: 8px; }
.current-user-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid;
    flex: none;
}
.current-user-name { font-family: var(--font-display); font-weight: 400; font-size: 1.05rem; letter-spacing: .02em; }

.save-btn {
    position: relative;
    padding: 0 22px 0 46px;
    border: 0;
    background: var(--c);
    color: var(--on-c);
    letter-spacing: .06em;
    font-size: .85rem;
    cursor: pointer;
    box-shadow: 0 10px 30px color-mix(in srgb, var(--c) 40%, transparent);
    transition: transform .3s var(--ease-back), box-shadow .3s, filter .3s;
    white-space: nowrap;
}
.save-btn::before {
    content: "";
    position: absolute;
    left: 18px;
    top: 50%;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M7 10l5 5 5-5M5 21h14'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M7 10l5 5 5-5M5 21h14'/%3E%3C/svg%3E") center / contain no-repeat;
}
.save-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 36px color-mix(in srgb, var(--c) 55%, transparent); }
.save-btn:active { transform: translateY(0) scale(.97); }
.save-btn:disabled { filter: saturate(.4) brightness(.9); cursor: progress; }
.save-btn:disabled::before { animation: girar 1s linear infinite; -webkit-mask: none; mask: none; border-radius: 50%; background: none; border: 2.5px solid currentColor; border-right-color: transparent; }
@keyframes girar { to { transform: rotate(360deg); } }

/* --- Hero del perfil ----------------------------------------------------------- */
.perfil-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: calc(78vh - var(--header-h));
    min-height: calc(78svh - var(--header-h));
    max-width: var(--ancho);
    margin: 0 auto;
    padding: 24px 0 40px;
}
.perfil-hero::before {
    content: "";
    position: absolute;
    inset: 4% 8% 10%;
    z-index: -1;
    background: radial-gradient(closest-side, var(--penumbra, rgba(0, 0, 0, .38)), transparent);
    pointer-events: none;
}
.hero-eyebrow {
    margin: 0;
    font-weight: 800;
    font-size: .8rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--ink-dim);
}
.hero-nombre {
    margin: 6px 0 clamp(26px, 5vh, 46px);
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(3.4rem, 13vw, 9rem);
    line-height: .95;
    letter-spacing: var(--display-tracking, .01em);
    color: var(--ink);
    text-shadow: 0 0 60px color-mix(in srgb, var(--c) 55%, transparent), 0 10px 40px rgba(0, 0, 0, .35);
}
.hero-nombre .letra {
    display: inline-block;
    opacity: 0;
    transform: translateY(.5em) scale(.8);
    animation: letraEntra .8s var(--ease-back) forwards;
    animation-delay: calc(.15s + var(--i) * .055s);
}
@keyframes letraEntra { to { opacity: 1; transform: none; } }


.stats-mini-wrapper {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    width: min(100%, 520px);
}
.stat-mini-card {
    padding: 16px 20px 18px;
    border-radius: var(--radio);
    border: 1px solid var(--line);
    background: var(--surface);
    text-align: left;
}
.stat-mini-num {
    font-family: var(--font-display);
    font-size: clamp(1.9rem, 4.4vw, 2.6rem);
    line-height: 1;
    color: var(--ink);
}
.stat-mini-num.salta { animation: salta .5s var(--ease-back); }
@keyframes salta { 40% { transform: scale(1.12); } }
.stat-mini-num span:first-child { color: var(--c-texto, var(--c)); }
.stat-slash, #stat-total-num, #stat-total-mastered-num { color: var(--ink-dim); font-size: .55em; }
.stat-slash { margin: 0 4px; }
.stat-mini-label {
    margin-top: 6px;
    font-weight: 900;
    font-size: .72rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ink-dim);
}
.stat-bar {
    margin-top: 12px;
    height: 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ink) 10%, transparent);
    overflow: hidden;
}
.stat-bar i {
    display: block;
    height: 100%;
    width: var(--p, 0%);
    border-radius: inherit;
    background: linear-gradient(90deg, color-mix(in srgb, var(--c) 70%, #fff), var(--c));
    box-shadow: 0 0 16px color-mix(in srgb, var(--c) 70%, transparent);
    transition: width 1.1s var(--ease-out);
}
.stat-mastered .stat-mini-num span:first-child { color: var(--oro-texto, var(--oro)); }
.stat-mastered .stat-bar i { background: linear-gradient(90deg, #fff1a8, var(--oro), var(--oro-2)); box-shadow: 0 0 16px rgba(255, 207, 74, .6); }

.hero-bajar {
    position: absolute;
    bottom: 6px;
    left: 50%;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-left: -22px;
    border-radius: 50%;
    color: var(--ink);
    border: 1px solid var(--line);
    background: var(--surface);
    animation: flota 2.4s ease-in-out infinite;
}
@keyframes flota { 50% { transform: translateY(6px); } }
.hero-bajar { transition: opacity .3s; }
.collection-header.pegado ~ .perfil-hero .hero-bajar { opacity: 0; pointer-events: none; }

/* --- Barra de controles --------------------------------------------------------- */
.controls-bar {
    position: relative;
    z-index: 15;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: var(--ancho);
    margin: 0 auto 22px;
    padding: 14px;
    border-radius: 26px;
    border: 1px solid var(--line);
    background: var(--surface-strong);
    /* Las tarjetas que pasan por detrás cuando queda pegada se ven desenfocadas, no "fantasma" */
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .18);
}
@media (min-width: 900px) {
    .controls-bar { position: sticky; top: calc(var(--header-h) + 2px); }   /* justo bajo el header (74px): sin rendija */
}
.controls-row-top { display: flex; gap: 12px; align-items: center; }
.controls-row-bottom { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }

.main-filters {
    position: relative;
    display: flex;
    flex: none;
    padding: 4px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--ink) 7%, transparent);
    overflow-x: auto;
    scrollbar-width: none;
}
.main-filters::-webkit-scrollbar { display: none; }
.tab-indicador {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 0;
    width: 0;
    border-radius: 999px;
    background: var(--c);
    box-shadow: 0 6px 20px color-mix(in srgb, var(--c) 45%, transparent);
    transition: transform .45s var(--ease-out), width .45s var(--ease-out);
    pointer-events: none;
}
.filter-tab {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--ink-dim);
    font-family: var(--font-ui);
    font-weight: 800;
    font-size: .9rem;
    cursor: pointer;
    white-space: nowrap;
    transition: color .3s;
}
.filter-tab * { pointer-events: none; }
.filter-tab:hover { color: var(--ink); }
.filter-tab.active { color: var(--on-c); }
/* Sin JS del indicador (o antes de medirlo) la pestaña activa igual se nota */
.main-filters:not(.con-indicador) .filter-tab.active { background: var(--c); }
.filter-crown { padding: 0 13px; }

.search-box {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
}
.search-box svg { position: absolute; left: 16px; color: var(--ink-dim); pointer-events: none; }
#search-input,
.custom-select {
    width: 100%;
    min-height: 48px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--ink) 6%, transparent);
    color: var(--ink);
    font-family: var(--font-ui);
    font-weight: 800;
    font-size: .9rem;
    transition: border-color .3s, background .3s, box-shadow .3s;
}
#search-input { padding: 0 18px 0 44px; }
#search-input::placeholder { color: var(--ink-dim); font-weight: 700; }
#search-input:focus,
.custom-select:focus { outline: none; border-color: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 22%, transparent); }
.custom-select {
    appearance: none;
    -webkit-appearance: none;
    padding: 0 40px 0 18px;
    letter-spacing: .04em;
    cursor: pointer;
    text-overflow: ellipsis;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
}
.custom-select.elegido { border-color: color-mix(in srgb, var(--c) 70%, transparent); color: var(--c-texto, var(--c)); }
.custom-select option { background: var(--opcion-bg, #15151f); color: var(--opcion-ink, #fff); }

/* --- Grilla y tarjetas ------------------------------------------------------------- */
.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
    gap: 18px;
    max-width: var(--ancho);
    margin: 0 auto;
}
.creditos {
    max-width: var(--ancho);
    margin: 36px auto 0;
    text-align: center;
    font-size: .74rem;
    font-weight: 600;
    color: var(--ink-dim);
}
.grid-vacio {
    max-width: var(--ancho);
    margin: 40px auto;
    text-align: center;
    font-weight: 800;
    color: var(--ink-dim);
}

.card {
    --rar: var(--c);
    --rx: 0deg;
    --ry: 0deg;
    position: relative;
    display: flex;
    flex-direction: column;
    border-radius: var(--radio);
    border: 1px solid var(--card-line);
    background: var(--card-bg);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .16);
    transition: transform .5s var(--ease-out), border-color .35s, box-shadow .35s;
    isolation: isolate;
}
.card:has(.bg-1) { --rar: var(--r-mythic); }
.card:has(.bg-2) { --rar: var(--r-legendary); }
.card:has(.bg-3) { --rar: var(--r-epic); }
.card:has(.bg-4) { --rar: var(--r-rare); }

/* Entrada escalonada (la activa ui.js) */
.card.pre { opacity: 0; transform: translateY(26px) scale(.95); }
.card.entra { animation: cartaEntra .7s var(--ease-out) both; animation-delay: var(--d, 0s); }
@keyframes cartaEntra { from { opacity: 0; transform: translateY(26px) scale(.95); } to { opacity: 1; transform: none; } }

/* Brillo que sigue al puntero */
.card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), rgba(255, 255, 255, .16), transparent 60%);
    opacity: 0;
    transition: opacity .35s;
    pointer-events: none;
}
.card.inclinada::before { opacity: 1; }
.card.inclinada {
    transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-4px);
    transition: transform .12s linear, border-color .35s, box-shadow .35s;
    box-shadow: 0 24px 50px rgba(0, 0, 0, .28), 0 0 0 1px color-mix(in srgb, var(--rar) 40%, transparent);
}

.card-image-wrapper {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 1 / .92;
    border-radius: var(--radio) var(--radio) 0 0;
    overflow: hidden;
    background:
        radial-gradient(60% 55% at 50% 58%, color-mix(in srgb, var(--rar) 55%, transparent) 0%, transparent 70%),
        linear-gradient(180deg, color-mix(in srgb, var(--rar) 14%, transparent), transparent 80%);
}
/* Rayos suaves detrás del sprite */
.card-image-wrapper::before {
    content: "";
    position: absolute;
    inset: -30%;
    background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--rar) 16%, transparent) 0deg 8deg, transparent 8deg 22deg);
    -webkit-mask: radial-gradient(circle, #000 0%, transparent 62%);
            mask: radial-gradient(circle, #000 0%, transparent 62%);
    opacity: .7;
}
.card.en-vista .card-image-wrapper::before { animation: rayos 24s linear infinite; }
@keyframes rayos { to { transform: rotate(360deg); } }

.sprite-image {
    position: relative;
    width: 78%;
    height: 78%;
    object-fit: contain;
    filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .35));
    transition: filter .4s, transform .5s var(--ease-back);
}
.card.en-vista .sprite-image { animation: spriteFlota 4.6s ease-in-out infinite; animation-delay: var(--fd, 0s); }
@keyframes spriteFlota { 50% { translate: 0 -6px; } }
.card:hover .sprite-image { transform: scale(1.06); }

/* Lo que falta se ve algo apagado */
.card:not(.owned) .sprite-image { filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .35)) var(--apagado, saturate(.4) brightness(.8)); opacity: var(--apagado-op, .85); }
.card:not(.owned):hover .sprite-image { filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .35)); opacity: 1; }

.card.owned { border-color: color-mix(in srgb, var(--c) 55%, transparent); box-shadow: 0 14px 34px rgba(0, 0, 0, .16), 0 0 26px color-mix(in srgb, var(--c) 18%, transparent); }

/* Masterizado: corona dorada */
.card:has(.cb-mastered:checked) { border-color: color-mix(in srgb, var(--oro) 75%, transparent); box-shadow: 0 14px 34px rgba(0, 0, 0, .16), 0 0 30px rgba(255, 207, 74, .28); }
.card:has(.cb-mastered:checked)::after {
    content: "";
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 5l3.2 11h13.6L22 5l-5 4-5-7-5 7z' fill='%235a3b00'/%3E%3Crect x='5' y='17.5' width='14' height='2.2' rx='1.1' fill='%235a3b00'/%3E%3C/svg%3E") center / 18px no-repeat,
        linear-gradient(135deg, #fff1a8, var(--oro) 45%, var(--oro-2));
    box-shadow: 0 4px 14px rgba(230, 165, 20, .55);
}

.card-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 10px;
    padding: 12px 14px 14px;
}
.character-name {
    margin: 0;
    font-family: var(--font-ui);
    font-weight: 900;
    font-size: 1rem;
    line-height: 1.15;
    color: var(--ink);
    min-height: 2.3em;
}
.badges { display: flex; flex-wrap: wrap; gap: 6px; }
.badge {
    padding: 4px 9px;
    border-radius: 999px;
    font-weight: 900;
    font-size: .62rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink);
    border: 1px solid color-mix(in srgb, var(--rar) 60%, transparent);
    background: color-mix(in srgb, var(--rar) 20%, transparent);
}
.badge-percent { display: none; }

.checkbox-group {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    margin-top: auto;
}
.custom-checkbox {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 9px;
    min-height: 38px;
    padding: 0 12px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--ink) 5%, transparent);
    color: var(--ink-dim);
    font-weight: 800;
    font-size: .78rem;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: background .3s, color .3s, border-color .3s, transform .25s var(--ease-back);
}
.custom-checkbox:hover { border-color: color-mix(in srgb, var(--c) 55%, transparent); color: var(--ink); }
.custom-checkbox:active { transform: scale(.95); }
.custom-checkbox input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    pointer-events: none;
}
.custom-checkbox:has(input:focus-visible) { outline: 3px solid var(--c); outline-offset: 2px; }
.checkmark {
    position: relative;
    flex: none;
    width: 16px;
    height: 16px;
    border-radius: 5px;
    border: 2px solid currentColor;
    opacity: .7;
    transition: background .3s, border-color .3s, opacity .3s;
}
.checkmark::after {
    content: "";
    position: absolute;
    left: 4px;
    top: 0;
    width: 4px;
    height: 8px;
    border: solid var(--on-c);
    border-width: 0 2.4px 2.4px 0;
    transform: rotate(45deg) scale(0);
    transition: transform .35s var(--ease-back);
}
.custom-checkbox.active {
    background: var(--c);
    border-color: var(--c);
    color: var(--on-c);
}
.custom-checkbox.active .checkmark { border-color: var(--on-c); opacity: 1; }
.custom-checkbox.active .checkmark::after { transform: rotate(45deg) scale(1); }
/* Mastered = dorado */
.custom-checkbox:has(.cb-mastered).active {
    background: linear-gradient(135deg, #fff1a8, var(--oro) 45%, var(--oro-2));
    border-color: var(--oro-2);
    color: #4a3000;
}
.custom-checkbox:has(.cb-mastered).active .checkmark { border-color: #4a3000; }
.custom-checkbox:has(.cb-mastered).active .checkmark::after { border-color: #4a3000; }

/* Celebración al marcar */
.chispa {
    position: fixed;
    z-index: 60;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    pointer-events: none;
    background: var(--chispa, var(--c));
}
.card.destello .card-image-wrapper::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .55) 48%, transparent 66%);
    transform: translateX(-100%);
    animation: barrido .9s var(--ease-soft) forwards;
}
.card.destello-oro .card-image-wrapper::after { background: linear-gradient(115deg, transparent 30%, rgba(255, 225, 120, .75) 48%, transparent 66%); }
@keyframes barrido { to { transform: translateX(100%); } }

/* --- Botón de efectos ------------------------------------------------------------ */
.fx-toggle {
    position: fixed;
    right: max(14px, env(safe-area-inset-right));
    bottom: max(14px, env(safe-area-inset-bottom));
    z-index: 40;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface-strong);
    color: var(--ink);
    font-family: var(--font-ui);
    font-weight: 800;
    font-size: .8rem;
    cursor: pointer;
    opacity: .8;
    transition: opacity .3s, transform .3s var(--ease-back);
}
.fx-toggle:hover { opacity: 1; transform: translateY(-2px); }
.fx-toggle[aria-pressed="false"] { color: var(--ink-dim); }
.fx-toggle[aria-pressed="false"] svg { opacity: .4; }
.fx-toggle.oculto { display: none; }

/* Mientras se genera el Save Image, el export (fuera de pantalla) no debe moverse */
body.exporting .card { transition: none; }

/* ==========================================================================
   FUNCIONES DEL DISEÑO NUEVO (ui.js)
   ========================================================================== */
/* --- Compartir: el chip "Colección de: …" es un botón ---------------------------- */
.current-user-info { cursor: pointer; transition: border-color .3s, transform .3s var(--ease-back); }
.current-user-info:hover { border-color: color-mix(in srgb, var(--c) 60%, transparent); transform: translateY(-1px); }
.current-user-info:focus-visible { outline: 3px solid var(--c); outline-offset: 2px; }

/* --- ¿Quién lo tiene? ---------------------------------------------------------- */
.duenos {
    position: absolute;
    left: 10px;
    bottom: 8px;
    z-index: 3;
    display: flex;
    padding-left: 6px;
}
.dueno {
    position: relative;
    width: 24px;
    height: 24px;
    margin-left: -6px;
    border-radius: 50%;
    border: 2px solid var(--c-dueno);
    background: var(--surface-strong);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}
.dueno img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.dueno.maestro::after {
    content: "";
    position: absolute;
    right: -3px;
    top: -3px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fff1a8, var(--oro) 50%, var(--oro-2));
    box-shadow: 0 0 0 1.5px var(--surface-strong);
}
body.exporting .duenos { display: none; }

/* --- Aviso flotante (deshacer, enlace copiado) --------------------------------- */
.aviso {
    position: fixed;
    left: 50%;
    bottom: max(20px, env(safe-area-inset-bottom));
    z-index: 45;
    display: flex;
    align-items: center;
    gap: 14px;
    max-width: min(520px, calc(100vw - 32px));
    min-height: 48px;
    padding: 6px 6px 6px 18px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface-strong) 82%, transparent);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    backdrop-filter: blur(16px) saturate(1.3);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .3);
    color: var(--ink);
    font-weight: 800;
    font-size: .88rem;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 16px) scale(.98);
    transition: opacity .3s var(--ease-soft), transform .4s var(--ease-out), visibility 0s .4s;
}
.aviso.visible { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.aviso-texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 6px 0; }
.aviso:not(:has(.aviso-accion:not([hidden]))) { padding-right: 18px; }
.aviso-accion {
    flex: none;
    min-height: 36px;
    padding: 0 16px;
    border: 0;
    border-radius: 999px;
    background: var(--c);
    color: var(--on-c);
    font: inherit;
    font-weight: 900;
    cursor: pointer;
    transition: transform .25s var(--ease-back), filter .25s;
}
.aviso-accion:hover { transform: translateY(-1px); filter: brightness(1.08); }
.aviso-accion:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }

/* --- Botón del ranking en el menú ------------------------------------------------ */
.ranking-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: clamp(10px, 3vh, 30px);
    min-height: 44px;
    padding: 0 20px 0 16px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface-strong) 70%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: var(--ink);
    font: inherit;
    font-weight: 800;
    font-size: .92rem;
    letter-spacing: .02em;
    cursor: pointer;
    opacity: 0;
    animation: perfilEntra .8s var(--ease-out) .85s forwards;
    transition: border-color .3s, transform .3s var(--ease-back), background .3s;
}
.ranking-btn svg { color: var(--oro); }
.ranking-btn:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--oro) 60%, transparent); }
.ranking-btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* --- Ventana del ranking ------------------------------------------------------- */
.ranking {
    width: min(540px, calc(100vw - 32px));
    max-height: min(680px, calc(100svh - 48px));
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 28px;
    background: color-mix(in srgb, var(--surface-strong) 88%, transparent);
    -webkit-backdrop-filter: blur(22px) saturate(1.3);
    backdrop-filter: blur(22px) saturate(1.3);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
    color: var(--ink);
    font-family: var(--font-ui);
    overflow: auto;
}
.ranking[open] { animation: rankingEntra .45s var(--ease-out); }
.ranking::backdrop { background: rgba(4, 3, 14, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
@keyframes rankingEntra { from { opacity: 0; transform: translateY(18px) scale(.97); } }
.ranking-cabeza {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 16px 14px 22px;
    background: inherit;
}
.ranking-titulo { margin: 0; flex: 1; font-family: var(--font-display); font-weight: 400; font-size: 1.7rem; letter-spacing: .02em; }
.ranking-tabs { display: flex; padding: 3px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 8%, transparent); }
.ranking-tab {
    min-height: 34px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background: none;
    color: var(--ink-dim);
    font: inherit;
    font-weight: 800;
    font-size: .8rem;
    cursor: pointer;
    transition: background .3s, color .3s;
}
.ranking-tab[aria-pressed="true"] { background: var(--c); color: var(--on-c); }
.ranking-tab[data-orden="mastered"][aria-pressed="true"] { background: linear-gradient(135deg, #fff1a8, var(--oro) 45%, var(--oro-2)); color: #4a3000; }
.ranking-cerrar {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: none;
    color: var(--ink);
    cursor: pointer;
}
.ranking-cerrar:hover { border-color: var(--ink-dim); }
.ranking-lista { list-style: none; margin: 0; padding: 4px 12px 16px; display: grid; gap: 6px; }
.ranking-fila {
    display: grid;
    grid-template-columns: 34px 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid transparent;
    border-radius: 18px;
    background: color-mix(in srgb, var(--c) 7%, transparent);
    color: var(--ink);
    font: inherit;
    text-align: left;
    cursor: pointer;
    opacity: 0;
    animation: perfilEntra .6s var(--ease-out) forwards;
    animation-delay: calc(var(--i, 0) * .06s);
    transition: border-color .3s, background .3s, transform .3s var(--ease-back);
}
.ranking-fila:hover { border-color: color-mix(in srgb, var(--c) 55%, transparent); background: color-mix(in srgb, var(--c) 13%, transparent); transform: translateX(3px); }
.ranking-fila:focus-visible { outline: 3px solid var(--c); outline-offset: 2px; }
.ranking-pos { display: grid; place-items: center; }
.ranking-medalla { font-size: 1.6rem; line-height: 1; }
.ranking-num-pos { font-weight: 900; font-size: 1.05rem; color: var(--ink-dim); }
.ranking-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid var(--c); }
.ranking-info { display: grid; gap: 7px; min-width: 0; }
.ranking-nombre { font-family: var(--font-display); font-size: 1.12rem; letter-spacing: .02em; color: var(--c); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ranking-barra { display: block; height: 6px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 10%, transparent); overflow: hidden; }
.ranking-barra i { display: block; height: 100%; width: var(--p, 0%); border-radius: inherit; background: var(--c); box-shadow: 0 0 12px color-mix(in srgb, var(--c) 60%, transparent); }
.ranking-cuenta { display: grid; justify-items: end; gap: 2px; font-weight: 700; font-size: .85rem; color: var(--ink-dim); white-space: nowrap; }
.ranking-cuenta b { font-size: 1.15rem; font-weight: 900; color: var(--ink); }
.ranking-cuenta small { font-size: .72rem; font-weight: 800; }
.ranking-estado { margin: 8px 22px 22px; color: var(--ink-dim); font-weight: 700; text-align: center; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 899px) {
    :root { --header-h: 64px; --radio: 18px; }
    .controls-row-top { flex-direction: column; align-items: stretch; }
    .main-filters { justify-content: flex-start; }
    .filter-tab { flex: 1 0 auto; }
}

@media (max-width: 640px) {
    .users-container { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100%, 420px); }
    .perfil-btn { --tam: clamp(92px, 28vw, 124px); }
    .back-texto { display: none; }
    .back-btn { padding: 0 12px; }
    .current-user-info > span:first-child { display: none; }
    .current-user-info { padding: 0 12px 0 5px; gap: 8px; }
    .current-user-avatar { width: 30px; height: 30px; }
    .save-btn { padding: 0 14px 0 38px; font-size: .75rem; }
    .save-btn::before { left: 14px; width: 16px; height: 16px; margin-top: -8px; }
    .perfil-hero { min-height: calc(64svh - var(--header-h)); padding-bottom: 64px; }
    .stats-mini-wrapper { gap: 10px; }
    .stat-mini-card { padding: 14px 14px 16px; }
    .controls-bar { padding: 10px; border-radius: 22px; }
    .controls-row-bottom { grid-template-columns: 1fr 1fr; }
    .controls-row-bottom #sort-filter { grid-column: 1 / -1; }
    .custom-select, #search-input { min-height: 46px; font-size: .82rem; }
    .grid-container { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .card-content { padding: 10px 10px 12px; gap: 8px; }
    .character-name { font-size: .9rem; }
    .custom-checkbox { min-height: 36px; font-size: .74rem; gap: 7px; padding: 0 10px; }
    .checkmark { width: 14px; height: 14px; }
    .checkmark::after { left: 3px; top: -1px; }
    .fx-texto { display: none; }
    .fx-toggle { padding: 0 12px; }
    .ranking-btn { margin-top: 0; min-height: 40px; }
    /* El aviso queda por encima del botón de efectos */
    .aviso { bottom: calc(max(14px, env(safe-area-inset-bottom)) + 52px); }
    .dueno { width: 20px; height: 20px; margin-left: -5px; }
    .duenos { left: 8px; bottom: 6px; }
    /* Ranking como hoja que sube desde abajo */
    .ranking {
        width: 100%;
        max-width: none;
        margin: auto 0 0;
        border-radius: 26px 26px 0 0;
        max-height: 86svh;
        padding-bottom: env(safe-area-inset-bottom);
    }
    .ranking[open] { animation: rankingSube .45s var(--ease-out); }
    @keyframes rankingSube { from { transform: translateY(40%); opacity: .4; } }
    .ranking-cabeza { flex-wrap: wrap; padding: 16px 14px 12px 18px; }
    .ranking-titulo { font-size: 1.45rem; }
    .ranking-fila { grid-template-columns: 28px 40px minmax(0, 1fr) auto; gap: 10px; padding: 9px 10px; }
    .ranking-avatar { width: 40px; height: 40px; }
}


/* ==========================================================================
   MOVIMIENTO REDUCIDO
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-delay: 0s !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
    .card.pre { opacity: 1; transform: none; }
}