@layer vsg-universal {
/* Vanilla Sky: navigation and authentication experience */
:root {
    --sidebar-width: clamp(220px, 14.5vw, 252px);
    --vsg-cyan: #38bdf8;
    --vsg-blue: #2563eb;
    --vsg-violet: #8b5cf6;
    --vsg-panel: rgba(8, 13, 31, 0.92);
    --vsg-line: rgba(148, 163, 184, 0.16);
}

.sidebar {
    isolation: isolate;
    justify-content: flex-start;
    gap: 7px;
    padding: clamp(9px, .8vw, 14px) clamp(10px, .85vw, 15px);
    overflow-x: hidden;
    overflow-y: auto;
    border-right: 1px solid rgba(125, 211, 252, 0.18);
    border-radius: 0 24px 24px 0;
    background:
        radial-gradient(circle at 20% 5%, rgba(56, 189, 248, 0.18), transparent 27%),
        radial-gradient(circle at 85% 90%, rgba(139, 92, 246, 0.14), transparent 28%),
        linear-gradient(180deg, rgba(12, 19, 42, 0.98), rgba(5, 9, 24, 0.98));
    box-shadow: 18px 0 60px rgba(1, 4, 16, 0.42), inset -1px 0 rgba(255, 255, 255, 0.025);
    scrollbar-width: none;
}

.sidebar::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
    background-size: 28px 28px;
    mask-image: linear-gradient(to bottom, #000, transparent 72%);
}

.sidebar::-webkit-scrollbar { width: 0; height: 0; display: none; }
.control-only { display: none; }
.sidebar-top { flex: 0 0 auto; }
.sidebar-bottom { margin-top: auto; flex: 0 0 auto; }

/* Cartel permanente bajo la navegación: no entra ni sale del lateral. */
a.sidebar-panda-slot,
.sidebar-panda-slot,
.sidebar-panda-slot.is-ready {
    position: relative;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    width: calc(100% + 20px) !important;
    height: auto;
    min-height: 120px;
    margin-top: 22px !important;
    margin-left: -15px !important;
    margin-right: 0 !important;
    padding: 8px 0 !important;
    box-sizing: border-box;
    overflow: visible;
    cursor: pointer;
    text-decoration: none;
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
    animation: none;
    transition: transform 0.2s ease, filter 0.2s ease;
    text-align: left !important;
}

a.sidebar-panda-slot:hover {
    transform: translateY(-2px);
    filter: brightness(1.12);
}

.panda-slot-badge {
    position: absolute;
    top: -4px;
    right: 15px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid rgba(254, 160, 197, 0.55);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(26, 12, 35, 0.94) 0%, rgba(9, 22, 45, 0.96) 100%);
    color: #ffffff;
    font-family: var(--vsg-font-family, 'Inter', sans-serif);
    font-size: 0.64rem;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 0 14px rgba(254, 160, 197, 0.35), 0 4px 14px rgba(0, 0, 0, 0.6);
    
    transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.panda-slot-badge::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fea0c5;
    box-shadow: 0 0 8px #fea0c5, 0 0 12px #38bdf8;
}

a.sidebar-panda-slot:hover .panda-slot-badge {
    border-color: rgba(254, 160, 197, 0.85);
    box-shadow: 0 0 18px rgba(254, 160, 197, 0.55), 0 6px 18px rgba(0, 0, 0, 0.7);
    color: #38bdf8;
}

.sidebar-panda-video {
    display: block !important;
    width: 180px !important;
    max-width: 95% !important;
    height: auto !important;
    max-height: 145px !important;
    object-fit: contain !important;
    object-position: left center !important;
    margin-top: 10px !important;
    margin-left: -8px !important;
    margin-right: auto !important;
    background: transparent !important;
    background-color: transparent !important;
    mix-blend-mode: normal !important;
    filter: none !important;
    align-self: flex-start !important;
    pointer-events: none;
}
@media (max-width: 900px) {
    .sidebar-panda-slot { display: none; }
}

.logo-container {
    position: relative;
    gap: 5px;
    margin: 0 4px 8px;
    padding: 3px 6px 9px;
}

.logo-container::after {
    content: '';
    position: absolute;
    right: 14%;
    bottom: 0;
    left: 14%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(125, 211, 252, .65), transparent);
    box-shadow: 0 0 14px rgba(56, 189, 248, .35);
}

.main-logo {
    width: clamp(44px, 3.6vw, 60px);
    max-height: 60px;
    filter: drop-shadow(0 8px 16px rgba(0,0,0,.4)) drop-shadow(0 0 14px rgba(56,189,248,.22));
    transition: transform .45s cubic-bezier(.2,.8,.2,1), filter .45s ease;
}

.brand-home-link {
    position: relative;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    line-height: 0;
    text-decoration: none;
    outline: none;
}

.brand-home-link::before,
.brand-home-link::after {
    content: '';
    position: absolute;
    inset: -7px;
    pointer-events: none;
    border: 1px solid transparent;
    border-radius: 50%;
    opacity: 0;
}

.brand-home-link:hover::before,
.brand-home-link:focus-visible::before {
    border-color: rgba(56,189,248,.85);
    border-top-color: rgba(167,139,250,.95);
    opacity: 1;
    animation: vsg-logo-orbit 1.15s linear infinite;
    box-shadow: 0 0 18px rgba(56,189,248,.34), inset 0 0 14px rgba(139,92,246,.16);
}

.brand-home-link:hover::after,
.brand-home-link:focus-visible::after {
    inset: -12px;
    border-color: rgba(125,211,252,.22);
    opacity: 1;
    animation: vsg-logo-pulse 1.15s ease-in-out infinite;
}

.brand-home-link:hover .main-logo,
.brand-home-link:focus-visible .main-logo { transform: translateY(-2px) scale(1.055); filter: drop-shadow(0 10px 18px rgba(0,0,0,.42)) drop-shadow(0 0 20px rgba(56,189,248,.48)); }
.brand-home-link-mobile::before { inset:-4px; }
.brand-home-link-mobile::after { inset:-7px; }

@keyframes vsg-logo-orbit { to { transform: rotate(360deg); } }
@keyframes vsg-logo-pulse { 50% { transform: scale(1.08); opacity:.45; } }

@media (prefers-reduced-motion: reduce) {
    .brand-home-link:hover::before,
    .brand-home-link:focus-visible::before,
    .brand-home-link:hover::after,
    .brand-home-link:focus-visible::after { animation:none; }
}
.logo-text { font-size: clamp(.72rem, .7vw, .84rem); letter-spacing: .15em; color: #e8f5ff; text-shadow: 0 0 18px rgba(56,189,248,.28); }

.main-nav,
.admin-menu,
#guestControls,
#userControls { gap: 2px; }

.nav-btn {
    --nav-accent: 56, 189, 248;
    position: relative;
    display: grid;
    grid-template-columns: 25px minmax(0, 1fr) 5px;
    align-items: center;
    width: 100%;
    min-height: 24px;
    margin: 0;
    padding: 3px 8px 3px 5px;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 9px;
    background: linear-gradient(90deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
    color: #aebbd1;
    font-size: clamp(.7rem, .63vw, .8rem);
    font-weight: 650;
    letter-spacing: .015em;
    line-height: 1.15;
    text-align: left;
    transition: color .22s ease, border-color .22s ease, background .22s ease, transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease;
}

.nav-btn::before {
    content: '';
    display: block;
    justify-self: center;
    width: 1.15em;
    height: 1.15em;
    border: 0;
    border-radius: 0;
    background: url('/uploads/crop.png') center / contain no-repeat;
    box-shadow: none;
    transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .22s ease;
}

.nav-btn::after {
    content: '';
    width: 5px;
    height: 5px;
    justify-self: end;
    border-radius: 50%;
    background: rgb(var(--nav-accent));
    box-shadow: 0 0 10px rgba(var(--nav-accent), .85);
    opacity: 0;
    transform: scale(.4);
    transition: opacity .2s ease, transform .2s ease;
}

.nav-btn:hover {
    color: #f5fbff;
    border-color: rgba(var(--nav-accent), .22);
    background: linear-gradient(90deg, rgba(var(--nav-accent), .14), rgba(var(--nav-accent), .035));
    box-shadow: 0 10px 24px rgba(1, 6, 20, .24), inset 0 1px rgba(255,255,255,.035);
    transform: translateX(3px);
}

.nav-btn[data-target="news"]::before { background-image: url('/img/iconpa/noticias.webp'); }
.nav-btn[data-target="roster"]::before { background-image: url('/img/iconpa/roster.webp'); }
.nav-btn[data-target="raids"]::before { background-image: url('/img/iconpa/raidpro.webp'); }
.nav-btn[data-target="progression"]::before { background-image: url('/img/iconpa/progreso.webp'); }
.nav-btn[data-target="rules"]::before { background-image: url('/img/iconpa/reglas.webp'); }
.nav-btn[data-target="guides"]::before { background-image: url('/img/iconpa/guias.webp'); }
.nav-btn[data-target="calculadora"]::before { background-image: url('/img/iconpa/calculadora.webp'); }
.nav-btn[data-target="attendance"]::before { background-image: url('/img/iconpa/estadisticas.webp'); }
.nav-btn[data-target="calendar"]::before { background-image: url('/img/iconpa/calendario.webp'); }
.nav-btn[data-target="consumibles"]::before { background-image: url('/img/iconpa/clasesyconsu.webp'); }
.nav-btn[data-target="store"]::before { background-image: url('/img/iconpa/compras.webp'); }

.nav-btn:hover::before { transform: translateX(2px) scale(1.08); }
.nav-btn.active { color: #fff; border-color: rgba(var(--nav-accent), .38); background: linear-gradient(90deg, rgba(var(--nav-accent), .24), rgba(var(--nav-accent), .055)); box-shadow: 0 10px 28px rgba(2, 8, 23, .32), inset 3px 0 rgb(var(--nav-accent)); }
.nav-btn.active::after { opacity: 1; transform: scale(1); }
.nav-btn.active::before { filter: drop-shadow(0 0 6px rgba(var(--nav-accent), .8)); }
.nav-btn:focus-visible { outline: none; border-color: rgba(var(--nav-accent), .72); box-shadow: 0 0 0 3px rgba(var(--nav-accent), .16); }

.menu-divider {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 7px 5px 4px;
    color: #6f809c;
    font-size: .55rem;
    letter-spacing: .16em;
    opacity: 1;
}

.menu-divider::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(148,163,184,.2), transparent); }
#openLoginBtn { --nav-accent: 139, 92, 246; }

#userAccountBtn {
    --nav-accent: 56, 189, 248;
    grid-template-columns: 34px minmax(0, 1fr) 6px;
    grid-template-areas: "logo label dot" "logo name dot" "logo role dot";
    min-height: 49px;
    padding: 5px 7px;
    border-radius: 13px;
    background: linear-gradient(135deg, rgba(56,189,248,.16), rgba(99,102,241,.11));
}

#userAccountBtn::before { grid-area: logo; width: 34px; height: 34px; border: 1px solid rgba(186,230,253,.5); border-radius: 10px; }
#userAccountBtn::after { grid-area: dot; }

/* Modal shell: only login/account variants are widened and restyled. */
#universalModal.auth-modal,
#universalModal.account-modal { padding: clamp(10px, 2vw, 28px); background: rgba(1, 5, 18, .82);  }
#universalModal.auth-modal { padding: 8px; }

#universalModal.auth-modal .modal-content,
#universalModal.account-modal .modal-content {
    width: min(980px, 96vw);
    min-width: 0;
    max-width: 980px;
    max-height: min(92dvh, 900px);
    margin: auto;
    border: 1px solid rgba(125, 211, 252, .22);
    border-radius: 24px;
    background: linear-gradient(145deg, rgba(11, 18, 41, .98), rgba(5, 9, 24, .985));
    box-shadow: 0 40px 100px rgba(0,0,0,.62), 0 0 0 1px rgba(255,255,255,.025), 0 0 60px rgba(37,99,235,.1);
}
#universalModal.auth-modal .modal-content { max-height: min(96dvh, 900px); }

#universalModal.auth-modal .modal-content::before,
#universalModal.account-modal .modal-content::before { opacity: .11; filter: saturate(.75) contrast(1.1); }
#universalModal.auth-modal .modal-header,
#universalModal.account-modal .modal-header { min-height: 68px; padding: 13px 20px; border-color: var(--vsg-line); background: rgba(4,9,24,.76);  filter: drop-shadow(0 0 12px rgba(56,189,248,.28)); }
#universalModal.auth-modal .modal-guild-name,
#universalModal.account-modal .modal-guild-name { color: #7f91ad; letter-spacing: .18em; }
#universalModal.auth-modal .modal-title,
#universalModal.account-modal .modal-title { font-size: 1.1rem; font-weight: 750; color: #f2f8ff; }
#universalModal.auth-modal .close-modal-x,
#universalModal.account-modal .close-modal-x { width: 38px; height: 38px; border-radius: 11px; }
#universalModal.auth-modal .modal-body,
#universalModal.account-modal .modal-body { padding: 0; overflow-x: hidden; }

.login-layout-shell {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.25fr);
    align-items: stretch;
    width: 100%;
    /* El shell general mantiene el modal alto; este layout debe ocupar el
       cuerpo completo para que la ilustración se centre, no quede arriba. */
    height: 100%;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

.login-visual-shell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 0;
    padding: clamp(22px, 3vw, 42px);
    overflow: hidden;
    border-right: 1px solid var(--vsg-line);
    background: radial-gradient(circle at 50% 40%, rgba(56,189,248,.16), transparent 42%), linear-gradient(155deg, rgba(37,99,235,.09), rgba(139,92,246,.08));
}

.login-visual-shell::before { content: 'VANILLA SKY'; position: absolute; bottom: 25px; left: 50%; transform: translateX(-50%); color: rgba(226,240,255,.5); font-size: .65rem; font-weight: 800; letter-spacing: .32em; white-space: nowrap; }
.login-visual-shell::after { content: ''; position: absolute; width: 220px; height: 220px; border: 1px solid rgba(125,211,252,.12); border-radius: 50%; box-shadow: 0 0 0 28px rgba(125,211,252,.025), 0 0 0 58px rgba(125,211,252,.018); }
.warlock-img-shell {
    position: relative;
    z-index: 1;
    width: min(100%, 380px);
    height: auto;
    max-height: min(560px, calc(100% - 60px));
    object-fit: contain;
    image-rendering: auto;
    opacity: 1;
    filter: brightness(1.08) contrast(1.16) saturate(1.12) drop-shadow(0 22px 34px rgba(0,0,0,.58)) drop-shadow(0 0 20px rgba(56,189,248,.22));
    transform: translateZ(0);
    backface-visibility: hidden;
}

.login-form-shell { width: auto; min-width: 0; min-height: 0; padding: clamp(14px, 1.4vw, 18px); background: linear-gradient(160deg, rgba(255,255,255,.025), transparent 48%); }
.login-form-shell #formRegisterArea .auth-grid-2 { gap: 9px 14px; }
.login-form-shell #formRegisterArea .auth-grid-2 .inl-15,
.login-form-shell #formRegisterArea .auth-grid-2 .inl-18 { grid-column: auto; }
.login-form-shell #formRegisterArea .np-form-group { margin-bottom: 7px; }
.login-form-shell #formRegisterArea .auth-social-btn { min-height: 42px; padding: 10px 6px; font-size: .74rem; }
.login-form-shell #formRegisterArea .inl-27 { min-height: 38px; margin-top: 7px; padding: 6px; }
.login-form-shell #formRegisterArea .inl-31 { min-height: 38px; margin-top: 7px; padding: 7px 12px; }
.login-form-shell #formRegisterArea .inl-32 { margin: 9px 0 7px; }
.login-form-shell #formRegisterArea p { font-size: .72rem; margin-top: 6px; line-height: 1.3; }
.login-form-shell .hidden-inline { display: none; }
.login-tab-row,
.account-tabs { gap: 7px; padding: 5px; margin-bottom: 28px; border: 1px solid rgba(148,163,184,.13); border-radius: 13px; background: rgba(2,6,23,.48); width: fit-content; max-width: 100%; }
/* Declarada DESPUÉS de la regla compartida de arriba a propósito: gana por
   orden de fuente (misma especificidad) sin necesitar, y así
   .account-tabs conserva su margin-bottom:28px mientras .login-tab-row
   queda en 8px. Antes esto dependía de; el orden ya lo resuelve. */
.login-tab-row { margin-bottom: 8px; }
.login-tab-btn,
.account-tabs .btn-outline { min-height: 36px; padding: 7px 12px; border: 0; border-radius: 9px; font-size: .84rem; letter-spacing: .02em; }
.login-tab-btn-active { background: linear-gradient(135deg, rgba(56,189,248,.2), rgba(37,99,235,.15)); box-shadow: inset 0 0 0 1px rgba(125,211,252,.2), 0 8px 18px rgba(2,8,23,.2); }

.login-form-shell label { display: block; margin-bottom: 7px; color: #aab8cd; font-size: .71rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.login-form-shell .form-control { width: 100%; min-height: 46px; padding: 11px 14px; border: 1px solid rgba(148,163,184,.18); border-radius: 11px; background: rgba(2,6,23,.62); color: #f8fbff; box-shadow: inset 0 1px 4px rgba(0,0,0,.22); transition: border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.login-form-shell #formRegisterArea .form-control { min-height: 40px; padding: 8px 12px; }
.login-form-shell .form-control:hover { border-color: rgba(125,211,252,.3); }
.login-form-shell .form-control:focus { outline: none; border-color: rgba(56,189,248,.7); background: rgba(4,11,30,.82); box-shadow: 0 0 0 3px rgba(56,189,248,.12), inset 0 1px 4px rgba(0,0,0,.2); }
.btn-auth-main,
#btnRegisterSubmit { min-height: 48px; border: 1px solid rgba(125,211,252,.35); border-radius: 11px; background: linear-gradient(135deg, #0284c7, #2563eb); box-shadow: 0 12px 26px rgba(37,99,235,.24), inset 0 1px rgba(255,255,255,.18); }

/* ── Acceso social (Ingresar / Registrarse): fila organizada Discord+Google,
   en vez de botones apilados con anchos y estilos inconsistentes. ── */
.auth-divider { display: flex; align-items: center; gap: 10px; margin: 18px 0 12px; }
.auth-divider--tight { margin: 12px 0 10px; }
.auth-divider-line { flex: 1; height: 1px; background: rgba(148,163,184,.16); }
.auth-divider-text { flex: 0 0 auto; color: #8fa3c0; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; text-align: center; white-space: nowrap; }
.auth-social-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.auth-social-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.auth-social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 48px;
    padding: 12px 8px;
    border: 1px solid transparent;
    border-radius: 11px;
    font-weight: 700;
    font-size: .78rem;
    letter-spacing: .01em;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.auth-social-btn:hover { transform: translateY(-1px); }
.auth-social-btn--discord { background: linear-gradient(135deg, #5865f2, #4752c4); border-color: rgba(125,211,252,.18); color: #fff; box-shadow: 0 10px 24px rgba(71,82,196,.22); }
.auth-social-btn--google { background: #fff; border-color: #dadce0; color: #3c4043; box-shadow: 0 10px 20px rgba(2,8,23,.14); }
.auth-social-btn--battlenet { background: linear-gradient(135deg, #148eff, #045fc4); border-color: rgba(125,211,252,.18); color: #fff; box-shadow: 0 10px 24px rgba(20,142,255,.22); }
.auth-social-icon { width: 18px; height: 18px; flex: 0 0 auto; object-fit: contain; }
.auth-social-btn--discord .auth-social-icon,
.auth-social-btn--battlenet .auth-social-icon { filter: brightness(0) invert(1); }
.auth-social-note { margin-top: 10px; color: var(--text-muted); font-size: .72rem; line-height: 1.4; text-align: center; }
/* En móviles conservamos botones compactos: dos proveedores por fila y el
   tercero centrado. Así siguen siendo fáciles de tocar sin ocupar el ancho
   entero del formulario. */
@media (max-width: 680px) {
    .auth-social-row,
    .auth-social-row--3 {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 9px;
    }

    .auth-social-row .auth-social-btn,
    .auth-social-row--3 .auth-social-btn,
    .login-form-shell #formRegisterArea .auth-social-btn {
        flex: 0 1 calc(50% - 6px);
        width: auto !important;
        min-width: 132px;
        max-width: 190px;
        min-height: 42px;
        padding: 9px 10px;
        font-size: .74rem;
    }

    .auth-social-row--3 .auth-social-btn--google {
        flex-basis: min(190px, 68%);
    }

    .auth-social-icon { width: 17px; height: 17px; }
    .reg-social-badge { margin-left: 2px; padding: 2px 4px; font-size: .54rem; }
}

@media (max-width: 380px) {
    .auth-social-row .auth-social-btn,
    .auth-social-row--3 .auth-social-btn,
    .login-form-shell #formRegisterArea .auth-social-btn {
        min-width: 122px;
        max-width: 154px;
        gap: 5px;
        padding-inline: 8px;
        font-size: .68rem;
    }

    .reg-social-badge { display: none; }
}

.auth-recaptcha { min-height: 78px; margin: 4px 0 10px; display: flex; align-items: center; justify-content: center; }
.auth-recaptcha-registration { margin: 5px 0 7px; }
.auth-recaptcha > div { max-width: 100%; }
.forgot-link { margin: 18px 0 0; }
.forgot-link a { color: #8fa3c0; text-decoration: none; }
.forgot-link a:hover { color: #7dd3fc; }

/* Account dashboard */
#universalModal.account-modal .modal-content { width: min(1100px, 96vw); max-width: 1100px; will-change: transform; transform: translateZ(0); }
#universalModal.account-modal .modal-body { padding: clamp(16px, 2.2vw, 28px); }
.account-modal-shell { width: 100%; color: #e9f2ff; }
.account-tabs { display: grid; grid-template-columns: repeat(7, minmax(112px, 1fr)); gap: 6px; margin: 0 0 18px; padding: 5px; overflow-x: auto; }
.account-tab { display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; min-height: 42px; padding: 8px; border: 0; border-radius: 9px; background: transparent; color: #8fa1bd; font: inherit; font-size: .79rem; font-weight: 750; white-space: nowrap; cursor: pointer; transition: color .2s ease, background .2s ease, transform .2s ease; }
.account-tab:hover { color: #dff5ff; background: rgba(56,189,248,.07); }
.account-tab.is-active { color: #75ddff; background: linear-gradient(135deg, rgba(14,165,233,.22), rgba(37,99,235,.14)); box-shadow: inset 0 0 0 1px rgba(125,211,252,.22); }
.account-panel { animation: accPanelIn .28s cubic-bezier(.22,.8,.26,1); }
@keyframes accPanelIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
.acc-character-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr); min-height: 300px; overflow: hidden; border: 1px solid rgba(90,200,255,.22); border-radius: 22px; background: radial-gradient(circle at 78% 45%, rgba(27,148,218,.2), transparent 31%), linear-gradient(115deg, rgba(7,15,38,.98), rgba(13,24,53,.87)); box-shadow: 0 20px 50px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.04); }
.acc-character-stage::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3,8,24,.3), transparent 55%), url('../img/oscuro.webp') center/cover; opacity: .15; pointer-events: none; }
.acc-stage-guild-logo { position:absolute; z-index:4; right:24px; bottom:20px; width:58px; height:58px; padding:4px; border:1px solid rgba(125,211,252,.24); border-radius:17px; background:rgba(3,8,24,.62); object-fit:contain; filter:drop-shadow(0 10px 18px rgba(0,0,0,.45)); }
.acc-stage-copy { position: relative; z-index: 3; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: clamp(30px, 4vw, 48px); }
.acc-eyebrow,.acc-panel-intro>span,.acc-section-heading span { color: #48caff; font-size: .65rem; font-weight: 850; letter-spacing: .16em; text-transform: uppercase; }
.acc-name { margin: 8px 0 4px; font-size: clamp(2rem, 4vw, 3.2rem); line-height: .95; letter-spacing: -.045em; }
.acc-game-data { color: #b8c8dd; font-size: .95rem; }
.acc-role-pill { position:relative; top:auto; right:auto; align-self:flex-start; display:inline-flex; align-items:center; gap:7px; margin:0 0 13px; padding:7px 12px; border:1px solid rgba(114,220,255,.32); border-radius:10px; background:linear-gradient(135deg,rgba(14,165,233,.18),rgba(37,99,235,.1)); color:#c9f3ff; font-size:.64rem; font-weight:850; letter-spacing:.075em; text-transform:uppercase; box-shadow:inset 0 1px rgba(255,255,255,.05),0 8px 24px rgba(14,165,233,.1); }
.acc-role-pill::before{content:'◆';color:#49d5ff;font-size:.55rem;filter:drop-shadow(0 0 6px #38bdf8)}
.acc-quick-stats { display: grid; grid-template-columns: repeat(4, minmax(78px,1fr)); gap: 9px; width: min(100%, 510px); margin-top: 26px; }
.acc-quick-stats>div { padding: 11px 13px; border: 1px solid rgba(148,163,184,.12); border-radius: 12px; background: rgba(255,255,255,.035); }
.acc-quick-stats small { display: block; color: #7f91ad; font-size: .62rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.acc-quick-stats strong { display: flex; align-items: center; gap: 4px; margin-top: 4px; color: #73dcff; font-size: 1.28rem; }
.acc-quick-stats .acc-discord-name{max-width:125px;overflow:hidden;color:#aebcff;font-size:.82rem;text-overflow:ellipsis;white-space:nowrap}
.acc-token-icon { width: 17px; height: 17px; object-fit: contain; }
.acc-main-character { position: relative; z-index: 2; min-height: 300px; }
.acc-main-render { position: absolute; z-index: 3; right:-4%; bottom:-17%; width:min(112%,460px); height:132%; object-fit:contain; object-position:center bottom; background:transparent; border-radius:0; filter:drop-shadow(0 24px 28px rgba(0,0,0,.7)) drop-shadow(0 0 18px var(--acc-character-color,rgba(56,189,248,.3))); transform: translateZ(0); transform-origin:50% 78%; }
.acc-main-render.has-character-render { right:-9%; bottom:-11%; width:min(132%,540px); height:154%; object-position:center 42%; }
.acc-main-render.is-generic-avatar{right:14%;bottom:20%;width:180px;height:180px;object-fit:cover;border-radius:38px;animation:none}
.acc-character-webgl{position:absolute;z-index:1;inset:4% 0 0;width:100%;height:96%;opacity:.52;mix-blend-mode:screen;pointer-events:none}
.acc-render-energy{position:absolute;z-index:2;left:18%;right:4%;bottom:2%;height:38%;background:radial-gradient(ellipse at center,var(--acc-character-soft,rgba(56,189,248,.22)),transparent 68%);filter:blur(10px);opacity: 0.75;pointer-events:none}
@keyframes accCharacterFloat{0%,100%{transform:translateY(0) scale(1.04)}50%{transform:translateY(-7px) scale(1.065)}}
@keyframes accEnergyPulse{0%,100%{opacity:.48;transform:scale(.92)}50%{opacity:.9;transform:scale(1.08)}}
.acc-main-badge { position: absolute; z-index: 4; right: 20px; top: 20px; padding: 6px 10px; border-radius: 8px; background: #38bdf8; color: #03111e; font-size: .66rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.acc-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 22px 2px 11px; }
.acc-section-heading h4,.acc-panel-intro h4 { margin: 3px 0 0; font-size: 1.15rem; }
.acc-section-heading p,.acc-panel-intro p { margin: 0; color: #8090aa; font-size: .8rem; }
.acc-character-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.acc-alt-card { position: relative; display: grid; grid-template-columns: 158px 1fr; min-height: 178px; overflow: hidden; border: 1px solid rgba(148,163,184,.13); border-radius: 17px; background: radial-gradient(circle at 18% 55%,rgba(56,189,248,.1),transparent 43%),linear-gradient(145deg,rgba(19,31,61,.7),rgba(4,10,27,.76)); box-shadow:inset 0 1px rgba(255,255,255,.035); }
.acc-alt-card img { align-self:end; width:178px; height:205px; margin-left:-9px; margin-bottom:-40px; object-fit:contain; object-position:center bottom; background:transparent; border-radius:0; filter:drop-shadow(0 14px 18px rgba(0,0,0,.66)); transform:scale(1.58); transform-origin:50% 61%; transition:transform .24s ease; }
.acc-alt-card:hover img{transform:scale(1.66) translateY(-2px)}
.acc-alt-card img.has-character-render { width:194px; height:226px; margin-left:-18px; margin-bottom:-45px; object-position:center 42%; transform:translateY(-9px) scale(1.98); transform-origin:50% 55%; }
.acc-alt-card:hover img.has-character-render { transform:translateY(-12px) scale(2.06); }
.acc-alt-card img.is-generic-avatar{width:118px;height:118px;margin:0 0 28px 18px;object-fit:cover;border-radius:26px;transform:none}
.acc-alt-info { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; align-items:flex-start; min-width: 0; padding: 15px 12px 15px 4px; }
.acc-alt-info small { color: #6f829e; font-size: .62rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.acc-alt-info strong { overflow: hidden; margin: 4px 0; font-size: 1rem; text-overflow: ellipsis; white-space: nowrap; }
.acc-alt-info span { color: #9cacbf; font-size: .73rem; }
.acc-character-action { margin-top:10px; padding:6px 9px; border:1px solid rgba(125,211,252,.22); border-radius:8px; background:rgba(56,189,248,.08); color:#83e2ff; font:inherit; font-size:.64rem; font-weight:800; cursor:pointer; }
.acc-character-action:hover { border-color:rgba(125,211,252,.5); background:rgba(56,189,248,.15); }
.acc-view-all { min-height:38px; padding:8px 13px; white-space:nowrap; }
.acc-all-characters-head { display:flex; align-items:center; gap:18px; margin:2px 2px 18px; }
.acc-all-characters-head>div>span { color:#48caff; font-size:.65rem; font-weight:850; letter-spacing:.15em; text-transform:uppercase; }
.acc-all-characters-head h4 { margin:3px 0; font-size:1.3rem; }
.acc-all-characters-head p { margin:0; color:#7f91ac; font-size:.8rem; }
.acc-all-character-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; }
.acc-character-profile { position:relative; display:grid; grid-template-rows:190px 1fr; min-width:0; overflow:hidden; border:1px solid rgba(148,163,184,.14); border-radius:18px; background:linear-gradient(155deg,rgba(18,31,61,.82),rgba(4,10,26,.9)); }
.acc-character-art { position:relative; display:grid; place-items:end center; overflow:hidden; background:radial-gradient(circle at 50% 65%,rgba(56,189,248,.15),transparent 48%); }
.acc-character-art::after { content:''; position:absolute; inset:auto 12% 6px; height:1px; background:linear-gradient(90deg,transparent,rgba(125,211,252,.35),transparent); }
.acc-character-art img { width:108%; height:225px; margin-bottom:-34px; object-fit:contain; object-position:center bottom; background:transparent; border-radius:0; filter:drop-shadow(0 14px 18px rgba(0,0,0,.65)); transform:scale(1.52); transform-origin:50% 62%; }
.acc-character-art img.has-character-render { width:122%; height:250px; margin-bottom:-44px; object-position:center 42%; transform:translateY(-8px) scale(1.82); transform-origin:50% 56%; }
.acc-character-art img.is-generic-avatar{width:126px;height:126px;margin:auto;object-fit:cover;border-radius:28px;transform:none}
.acc-character-type { position:absolute; z-index:3; top:12px; left:12px; padding:5px 8px; border-radius:7px; background:rgba(3,8,24,.72); color:#75ddff; font-size:.6rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.acc-character-details { padding:15px; }
.acc-character-details h5 { margin:0 0 4px; font-size:1.08rem; }
.acc-character-details>p { margin:0;color:#8ea0b9;font-size:.75rem; }
.acc-character-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; margin:13px 0; }
.acc-character-facts div { min-width:0; padding:7px 8px; border-radius:9px; background:rgba(255,255,255,.035); }
.acc-character-facts small,.acc-character-facts strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.acc-character-facts small { color:#667b98; font-size:.57rem; font-weight:800; text-transform:uppercase; }
.acc-character-facts strong { margin-top:2px; font-size:.72rem; }
.acc-character-profile .acc-character-action { width:100%; min-height:34px; }
.acc-empty-state { grid-column: 1/-1; padding: 30px; border: 1px dashed rgba(148,163,184,.17); border-radius: 14px; color: #8495af; text-align: center; }
.acc-panel-intro { margin: 4px 2px 18px; }
.acc-panel-intro p { margin-top: 7px; }
.acc-edit-layout { display: grid; grid-template-columns: minmax(210px,.7fr) minmax(340px,1.3fr); gap: 16px; }
.acc-card,.acc-connection-card { border: 1px solid rgba(148,163,184,.13); border-radius: 16px; background: linear-gradient(145deg,rgba(18,29,58,.68),rgba(4,10,27,.7)); }
.acc-avatar-editor { display: grid; place-items: center; min-height: 230px; padding: 24px; }
.acc-avatar-label { display: grid; place-items: center; gap: 10px; color: #75ddff; font-size: .75rem; font-weight: 750; cursor: pointer; }
.acc-avatar-img { width: 120px; height: 120px; padding: 4px; border: 1px solid #52d1ff; border-radius: 30px; object-fit: cover; box-shadow: 0 0 0 7px rgba(56,189,248,.07),0 20px 35px rgba(0,0,0,.35); }
.acc-avatar-input { display:none; }
.acc-profile-form { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(24px,4vw,42px); }
.acc-profile-form label { margin-bottom: 8px; color: #b8c7da; font-size: .72rem; font-weight: 800; letter-spacing:.08em; text-transform:uppercase; }
.acc-profile-form .form-control { width: min(100%,440px); min-height: 46px; }
.acc-profile-form small { margin: 8px 0 20px; color: #71839d; }
.acc-profile-form .btn-primary { min-height: 42px; }
.acc-card-sim { margin-top: 16px; padding: 16px; }
.acc-connections-grid { display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; }
.acc-connection-card { display:flex; flex-direction:column; justify-content:space-between; gap:20px; min-height:160px; padding:20px; }
.acc-connection-brand { display:flex; align-items:center; gap:12px; }
.acc-connection-brand img,.acc-rio-mark { width:48px; height:42px; padding:7px; border-radius:12px; background:rgba(255,255,255,.06); object-fit:contain; }
.acc-rio-mark { display:grid; place-items:center; color:#ff4655; font-size:.65rem; font-weight:950; }
.acc-connection-brand h5 { margin:0 0 4px; font-size:.95rem; }
.acc-connection-brand p { margin:0; color:#8495ad; font-size:.75rem; }
.acc-connection-state { color:#4ade80; font-size:.68rem; font-weight:850; letter-spacing:.08em; }
.acc-sync-warning{color:#f9b65e;font-weight:750}.acc-conn-btn.is-required{border-color:rgba(249,182,94,.48);color:#ffd08a;box-shadow:0 0 0 3px rgba(249,182,94,.08)}
.acc-session-security{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-top:16px;padding:18px 20px;border:1px solid rgba(251,113,133,.2);border-radius:16px;background:linear-gradient(135deg,rgba(127,29,29,.13),rgba(18,29,58,.55))}.acc-session-security div{min-width:0}.acc-session-security span{display:block;color:#fb8da1;font-size:.62rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}.acc-session-security strong{display:block;margin-top:4px;font-size:.9rem}.acc-session-security p{margin:4px 0 0;color:#7f91aa;font-size:.72rem}.acc-logout-prominent{flex:0 0 auto;min-height:42px;padding:10px 17px;border:1px solid rgba(251,113,133,.55);border-radius:10px;background:linear-gradient(135deg,#be123c,#7f1d1d);color:#fff;font:inherit;font-size:.78rem;font-weight:900;box-shadow:0 10px 24px rgba(190,18,60,.2);cursor:pointer}
.acc-modal-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:18px; padding-top:15px; border-top:1px solid rgba(148,163,184,.1); }

#alertModal .modal-content.fit-modal,
#universalModal.confirmation-modal .modal-content.fit-modal {
    width:min(460px,calc(100vw - 32px));
    max-width:460px;
    min-height:0;
    height:auto;
    max-height:min(82dvh,560px);
}
#alertModal .modal-content.fit-modal .modal-body,
#universalModal.confirmation-modal .modal-content.fit-modal .modal-body {
    padding:18px 20px;
    font-size:.88rem;
    line-height:1.55;
}
#universalModal.confirmation-modal .modal-header {
    min-height:0;
    padding:12px 16px;
}
.modal:not(.visible) *{animation-play-state:paused}

@media (max-width: 900px) {
    :root { --sidebar-width: 250px; }
    .sidebar { border-radius: 0 20px 20px 0; }
    #universalModal.auth-modal .modal-content,
    #universalModal.account-modal .modal-content { width: min(96vw, 680px); }
    .login-layout-shell { grid-template-columns: 1fr; min-height: 0; }
    .login-visual-shell { display: none; }
    .login-form-shell { min-height: 0; padding: clamp(24px, 6vw, 42px); }
    .acc-character-stage { grid-template-columns: 1fr minmax(250px,.75fr); }
    .acc-character-grid,.acc-connections-grid { grid-template-columns: 1fr; }
    .acc-all-character-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }

    /* Igual excepción que en el bloque de 560px más abajo: el registro sí
       necesita su ilustración por tarjeta en pantallas angostas (tablet en
       ventana, etc.), como franja compacta arriba del formulario. */
    #universalModal.auth-modal.is-registering .login-visual-shell {
        display: flex;
        height: auto;
        max-height: 140px;
        padding: 10px;
        border-right: 0;
        border-bottom: 1px solid var(--vsg-line);
    }
    #universalModal.auth-modal.is-registering .login-visual-shell::before,
    #universalModal.auth-modal.is-registering .login-visual-shell::after {
        display: none;
    }
    #universalModal.auth-modal.is-registering .warlock-img-shell {
        width: auto;
        height: 100%;
        max-height: 120px;
    }
}

@media (max-width: 560px) {
    #universalModal.auth-modal,
    #universalModal.account-modal { padding: 8px; }
    #universalModal.auth-modal .modal-content,
    #universalModal.account-modal .modal-content { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); border-radius: 17px; }
    #universalModal.auth-modal .modal-header,
    #universalModal.account-modal .modal-header { min-height: 58px; padding: 10px 13px; }
    #universalModal.auth-modal .modal-logo,
    #universalModal.account-modal .modal-logo { height: 30px; }
    .login-form-shell { padding: 22px 18px 26px; }
    .auth-grid-2 { grid-template-columns: 1fr; }
    .auth-grid-2 .inl-15,
    .auth-grid-2 .inl-18 { grid-column: auto; }
    #universalModal.account-modal .modal-body { padding: 15px; }
    .account-tabs { grid-template-columns: repeat(5,48px); justify-content:center; }
    .account-tab { min-height:44px; font-size:0; }
    .account-tab span { font-size:1rem; }
    .acc-character-stage { grid-template-columns:1fr; min-height:430px; }
    .acc-stage-copy { justify-content:flex-start; padding:55px 22px 0; }
    .acc-main-character { min-height:230px; }
    .acc-main-render { left:50%; right:auto; width:320px; height:285px; animation:none; transform:translateX(-50%) scale(1.08); }
    .acc-quick-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .acc-session-security{align-items:stretch;flex-direction:column}.acc-logout-prominent{width:100%}
    .acc-edit-layout { grid-template-columns:1fr; }
    .acc-section-heading { align-items:flex-start; flex-direction:column; gap:4px; }
    .acc-all-character-grid { grid-template-columns:1fr; }
    .acc-all-characters-head { align-items:flex-start; }
    .acc-modal-actions { flex-direction:column-reverse; }
    .acc-modal-actions .btn-outline { width:100%; }
}

@media (max-width: 560px) {
    #universalModal.confirmation-modal .modal-content.fit-modal {
        width:calc(100vw - 24px);
        max-width:calc(100vw - 24px);
        margin:12px auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar *,
    .login-layout-shell *,
    .account-modal-shell * { transition-duration: .01ms; animation-duration: .01ms; }
    .acc-character-webgl { display:none; }
}
.acc-onboarding-card{display:grid;gap:14px;margin-bottom:18px;padding:clamp(16px,2vw,22px);border:1px solid rgba(56,189,248,.28);border-radius:18px;background:linear-gradient(135deg,rgba(10,32,67,.92),rgba(5,12,31,.94));box-shadow:0 18px 50px rgba(0,0,0,.22)}
.acc-onboarding-head{display:flex;align-items:center;justify-content:space-between;gap:18px}.acc-onboarding-head span{color:#42c9ff;font-size:.7rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase}.acc-onboarding-head h4{margin:4px 0;font-size:clamp(1rem,1.6vw,1.28rem)}.acc-onboarding-head p{margin:0;color:#9dafc8;font-size:.82rem}.acc-onboarding-head>strong{display:grid;place-items:center;min-width:58px;aspect-ratio:1;border-radius:50%;border:2px solid #35c7fa;color:#73dcff;background:rgba(20,122,173,.14)}
.acc-onboarding-steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.acc-onboarding-steps span{display:flex;align-items:center;gap:7px;min-width:0;padding:9px 10px;border:1px solid rgba(148,163,184,.15);border-radius:10px;color:#8798b4;background:rgba(2,8,23,.45);font-size:.72rem;font-weight:800}.acc-onboarding-steps i{display:grid;place-items:center;width:18px;height:18px;flex:0 0 auto;border-radius:50%;background:#27344b;font-style:normal}.acc-onboarding-steps .is-done{color:#dffdf2;border-color:rgba(16,185,129,.3)}.acc-onboarding-steps .is-done i{background:#10b981;color:#04130e}
.acc-onboarding-action{display:flex;justify-content:flex-end}.acc-onboarding-complete{color:#65e6ad;font-weight:900}.acc-onboarding-form{display:grid;grid-template-columns:1.4fr 1fr 1fr auto;align-items:end;gap:10px}.acc-onboarding-form label{display:grid;gap:6px;color:#aebcd1;font-size:.72rem;font-weight:800}.acc-onboarding-form .form-control{margin:0}.acc-onboarding-form .btn-primary{white-space:nowrap}
@media(max-width:800px){.acc-onboarding-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.acc-onboarding-form{grid-template-columns:1fr 1fr}.acc-onboarding-form label:first-child,.acc-onboarding-form button{grid-column:1/-1}}
.acc-social-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:16px;padding:20px;border:1px solid rgba(125,168,218,.14);border-radius:17px;background:radial-gradient(circle at 82% 0,rgba(244,114,182,.12),transparent 38%),linear-gradient(145deg,rgba(11,25,51,.9),rgba(5,10,25,.94))}.acc-social-heading>div:first-child{min-width:0}.acc-social-heading>div:first-child>span{color:#f472b6;font-size:.62rem;font-weight:900;letter-spacing:.15em;text-transform:uppercase}.acc-social-heading h4{margin:5px 0 4px;color:#f5f9ff;font-size:1.28rem}.acc-social-heading p{max-width:68ch;margin:0;color:#91a2ba;font-size:.76rem;line-height:1.55}.acc-reward-meter{display:grid;place-items:center;flex:0 0 112px;min-height:82px;padding:12px;border:1px solid rgba(244,114,182,.24);border-radius:15px;background:rgba(244,114,182,.055)}.acc-reward-meter strong{color:#f695c2;font-size:1.45rem}.acc-reward-meter span{color:#8697af;font-size:.56rem;font-weight:800;text-align:center;text-transform:uppercase}.acc-reward-meter.is-wcl{border-color:rgba(249,115,22,.25);background:rgba(249,115,22,.055)}.acc-reward-meter.is-wcl strong{color:#fb923c}
.acc-world-composer{display:grid;gap:13px;padding:clamp(16px,2.5vw,24px);border:1px solid rgba(125,168,218,.16);border-radius:18px;background:linear-gradient(150deg,rgba(12,22,45,.92),rgba(4,9,23,.97));box-shadow:0 18px 42px rgba(1,5,18,.24)}.acc-world-title{display:grid;gap:6px}.acc-world-title>span,.acc-world-video-link>span,.acc-wcl-form label>span{color:#a7b6ca;font-size:.67rem;font-weight:850}.acc-editor-shell{overflow:hidden;border:1px solid rgba(125,168,218,.18);border-radius:13px;background:rgba(2,6,23,.58)}.acc-editor-shell:focus-within{border-color:rgba(56,189,248,.5);box-shadow:0 0 0 3px rgba(56,189,248,.08)}.acc-editor-toolbar{display:flex;align-items:center;gap:4px;padding:7px;border-bottom:1px solid rgba(148,163,184,.1);background:rgba(9,18,38,.76)}.acc-editor-toolbar button{display:grid;place-items:center;width:32px;height:30px;border:1px solid transparent;border-radius:7px;background:transparent;color:#9aabc2;cursor:pointer}.acc-editor-toolbar button:hover{border-color:rgba(56,189,248,.2);background:rgba(56,189,248,.08);color:#e4f7ff}.acc-world-editor{min-height:150px;max-height:280px;padding:15px;overflow-y:auto;outline:0;color:#d9e4f1;font-size:.86rem;line-height:1.65}.acc-world-editor:empty::before{content:attr(data-placeholder);color:#5f718d;pointer-events:none}.acc-world-editor blockquote{margin:10px 0;padding:9px 12px;border-left:3px solid #f472b6;background:rgba(244,114,182,.055)}
.acc-world-media-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.acc-world-drop,.acc-world-video-link{display:flex;flex-direction:column;justify-content:center;min-height:92px;padding:14px;border:1px dashed rgba(125,211,252,.23);border-radius:13px;background:rgba(56,189,248,.035)}.acc-world-drop{align-items:center;text-align:center;cursor:pointer}.acc-world-drop:hover{border-color:rgba(125,211,252,.5);background:rgba(56,189,248,.07)}.acc-world-drop strong{color:#c9f1ff;font-size:.76rem}.acc-world-drop span,.acc-world-video-link small{margin-top:5px;color:#687a95;font-size:.59rem}.acc-world-drop input{display:none}.acc-world-video-link{gap:6px;border-style:solid}.acc-world-video-link .form-control{margin:0}.acc-world-preview{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.acc-world-preview figure{position:relative;height:105px;margin:0;overflow:hidden;border:1px solid rgba(125,168,218,.15);border-radius:11px;background:#020617}.acc-world-preview img,.acc-world-preview video{width:100%;height:100%;object-fit:cover}.acc-world-preview em{position:absolute;right:5px;bottom:5px;padding:3px 5px;border-radius:5px;background:rgba(2,6,23,.82);color:#b7c8de;font-size:.5rem;font-style:normal}.acc-world-submit-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:4px}.acc-captcha-slot{min-height:78px}.acc-my-contributions{margin-top:18px}.acc-my-contributions h5{margin:0 0 10px;color:#dceaff}.acc-mini-history{display:grid;gap:7px}.acc-mini-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:11px 13px;border:1px solid rgba(125,168,218,.12);border-radius:10px;background:rgba(5,12,29,.62)}.acc-mini-item strong,.acc-mini-item span{display:block}.acc-mini-item strong{overflow:hidden;color:#cfe3f5;font-size:.72rem;text-overflow:ellipsis;white-space:nowrap}.acc-mini-item span{margin-top:3px;color:#667893;font-size:.58rem}.acc-mini-item em{align-self:center;color:#65e6ad;font-size:.62rem;font-style:normal;font-weight:850}
.acc-wcl-form{display:grid;grid-template-columns:70px minmax(0,1fr);gap:14px;padding:clamp(17px,2.5vw,24px);border:1px solid rgba(249,115,22,.18);border-radius:18px;background:linear-gradient(150deg,rgba(24,18,34,.92),rgba(5,9,22,.97));box-shadow:0 18px 42px rgba(1,5,18,.24)}.acc-wcl-icon{display:grid;place-items:center;width:70px;height:70px;border:1px solid rgba(251,146,60,.3);border-radius:16px;background:linear-gradient(145deg,rgba(249,115,22,.22),rgba(127,29,29,.14));color:#fb923c;font-size:1.05rem;font-weight:950;letter-spacing:.06em}.acc-wcl-form label{display:grid;gap:7px}.acc-wcl-form label small{color:#6e809a;font-size:.6rem}.acc-wcl-form .acc-captcha-slot{grid-column:2}.acc-wcl-form>.btn-primary{grid-column:2;justify-self:end}
@media(max-width:760px){.account-tabs{grid-template-columns:repeat(7,minmax(124px,1fr))}.acc-social-heading{align-items:flex-start;flex-direction:column}.acc-reward-meter{grid-template-columns:auto 1fr;place-items:center start;width:100%;min-height:0}.acc-world-media-grid{grid-template-columns:1fr}.acc-world-preview{grid-template-columns:repeat(2,minmax(0,1fr))}.acc-world-submit-row{align-items:stretch;flex-direction:column}.acc-world-submit-row .btn-primary{width:100%}.acc-wcl-form{grid-template-columns:1fr}.acc-wcl-icon{width:58px;height:58px}.acc-wcl-form .acc-captcha-slot,.acc-wcl-form>.btn-primary{grid-column:1}.acc-wcl-form>.btn-primary{width:100%}}

.nav-unread-badge { display: inline-block; width: 8px; height: 8px; background-color: #ef4444; border-radius: 50%; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); box-shadow: 0 0 4px rgba(239, 68, 68, 0.6); }
#userAccountBtn { position: relative; }
}

/* BUG DE CIERRE PREMATURO (encontrado y corregido): la línea de arriba
   cerraba acá el @layer vsg-universal abierto en la línea 1 del archivo,
   dejando TODO el resto del archivo (el tamaño del modal de Ingresar/
   Registrarse y todo lo que sigue, ~150 líneas) como CSS sin capa. Mismo
   bug que se encontró y corrigió antes en mobile.css: un !important sin
   capa pierde contra un !important CON capa sin importar la especificidad
   del selector, así que cualquier regla de acá que compitiera con una
   regla de design-system.css/global.css para la misma propiedad podía
   perder en silencio. Se reabre el layer acá mismo y se cierra al final
   real del archivo. */
@layer vsg-universal {

/* Talla estable para Ingresar / Registrarse. El panel interno es el único
   que se desplaza: no se atrapa el gesto de scroll ni se pierde el inicio al
   cambiar entre pestañas. */
#universalModal.auth-modal .modal-content {
    width: min(980px, calc(100vw - 16px)) !important;
    height: min(800px, calc(100dvh - 16px)) !important;
    min-height: min(800px, calc(100dvh - 16px)) !important;
    max-height: min(800px, calc(100dvh - 16px)) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}
#universalModal.auth-modal .modal-header { flex: 0 0 auto; }
#universalModal.auth-modal .modal-body {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: hidden !important;
}
#universalModal.auth-modal .login-layout-shell {
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
}
#universalModal.auth-modal .login-visual-shell {
    height: 100% !important;
    min-height: 0 !important;
}
#universalModal.auth-modal .login-form-shell {
    height: 100% !important;
    min-height: 0 !important;
    min-width: 0 !important;
    container-type: inline-size;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* El panel derecho puede ser estrecho aunque el viewport sea de escritorio
   (por ejemplo, una tablet en ventana o la vista reducida del navegador).
   La regla depende del ancho real del formulario, no del viewport. */
#universalModal.auth-modal .login-form-shell .auth-social-row--3 {
    width: 100%;
    min-width: 0;
}
#universalModal.auth-modal .login-form-shell .auth-social-row--3 > .auth-social-btn {
    min-width: 0;
    box-sizing: border-box;
}
@container (max-width: 640px) {
    #universalModal.auth-modal .login-form-shell .auth-social-row--3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }
    #universalModal.auth-modal .login-form-shell .auth-social-row--3 > .auth-social-btn {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 38px;
        gap: 4px;
        padding: 7px 4px;
        overflow: hidden;
        font-size: .68rem;
        text-overflow: ellipsis;
    }
    #universalModal.auth-modal .login-form-shell .auth-social-row--3 .auth-social-icon {
        width: 15px;
        height: 15px;
    }
    #universalModal.auth-modal .login-form-shell .auth-social-row--3 .reg-social-badge {
        display: none;
    }
}
@container (max-width: 430px) {
    #universalModal.auth-modal .login-form-shell .auth-social-row--3 > .auth-social-btn {
        min-height: 36px;
        gap: 3px;
        padding-inline: 3px;
        font-size: .61rem;
    }
    #universalModal.auth-modal .login-form-shell .auth-social-row--3 .auth-social-icon {
        width: 14px;
        height: 14px;
    }
}

@media (max-width: 560px) {
    #universalModal.auth-modal {
        align-items: stretch !important;
        padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)) !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    #universalModal.auth-modal .modal-content {
        width: calc(100vw - 16px) !important;
        height: calc(100dvh - 16px) !important;
        min-height: 0 !important;
        max-height: calc(100dvh - 16px) !important;
        margin: auto !important;
    }

    #universalModal.auth-modal .modal-header {
        min-height: 58px;
        padding: 10px 14px;
    }

    #universalModal.auth-modal .login-layout-shell { grid-template-columns: 1fr !important; }
    #universalModal.auth-modal .login-visual-shell { display: none !important; }
    #universalModal.auth-modal .login-form-shell {
        padding: 16px 14px calc(22px + env(safe-area-inset-bottom)) !important;
        overflow-x: hidden !important;
    }

    /* El registro (a diferencia de Ingresar) sí necesita su ilustración en
       móvil -- ahora es parte de cada tarjeta (pandareg1..6.webp, ver
       showRegCard en public/js/auth.js), no un simple adorno. En vez de
       ocultarla como en Ingresar, se muestra como una franja compacta
       arriba del formulario. `.is-registering` lo pone/saca
       #tabToggleRegister/#tabToggleLogin al cambiar de pestaña. Más
       específico que la regla de arriba (misma capa, mayor especificidad),
       así que gana sin tocarla. */
    #universalModal.auth-modal.is-registering .login-layout-shell {
        grid-template-rows: auto 1fr;
    }
    #universalModal.auth-modal.is-registering .login-visual-shell {
        display: flex !important;
        height: auto !important;
        max-height: 132px !important;
        padding: 10px !important;
        border-right: 0 !important;
        border-bottom: 1px solid var(--vsg-line);
    }
    #universalModal.auth-modal.is-registering .login-visual-shell::before,
    #universalModal.auth-modal.is-registering .login-visual-shell::after {
        display: none;
    }
    #universalModal.auth-modal.is-registering .warlock-img-shell {
        width: auto !important;
        height: 100% !important;
        max-height: 112px !important;
    }
}

@keyframes vsg-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.auth-social-btn.is-authenticating {
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95)) !important;
    border-color: rgba(56, 189, 248, 0.4) !important;
    color: #e2e8f0 !important;
    box-shadow: 0 0 15px rgba(56, 189, 248, 0.25) !important;
    cursor: wait !important;
}

.reg-social-badge {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 6px;
    background: rgba(255, 255, 255, 0.1);
    color: #cbd5e1;
    text-transform: uppercase;
}
.reg-social-badge.is-linked {
    background: #10b981 !important;
    color: #04130e !important;
}
.reg-step-tag.is-complete {
    background: rgba(16, 185, 129, 0.18) !important;
    color: #34d399 !important;
    border: 1px solid rgba(16, 185, 129, 0.3);
}
}

/* Asistente de registro en tarjetas: una visible a la vez (ver
   showRegCard en public/js/auth.js). Reemplaza el formulario único que
   mostraba los 4 pasos juntos. */
.reg-card {
    display: none;
}
.reg-card.is-active {
    display: block;
}
.reg-card-lead {
    margin: 0 0 14px;
    color: #cbd5e1;
    font-size: 0.9rem;
    line-height: 1.5;
}
/* A pedido explícito: los botones del asistente deben ocupar el tamaño de su
   contenido, no el 100% del ancho de la tarjeta. `display:flex` fuerza un
   contenedor de nivel bloque en los tres casos que usan esta clase
   (.auth-social-btn ya es flex; .btn-primary/.btn-outline "sueltos" son
   inline-block por defecto) para que `width:fit-content` + `margin-inline:
   auto` los centre sin estirarlos. */
.reg-card-fullbtn,
a.reg-card-fullbtn,
.reg-card a.btn-outline,
.reg-card a.btn-primary {
    display: flex;
    width: fit-content;
    margin-inline: auto;
    text-decoration: none !important;
    outline: none;
}
.reg-card-fullbtn:hover,
a.reg-card-fullbtn:hover,
.reg-card a.btn-outline:hover {
    text-decoration: none !important;
}
.reg-card-fullbtn + .reg-card-fullbtn {
    margin-top: 10px;
}
.reg-card-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
}
.reg-card-actions .btn-outline,
.reg-card-actions .btn-primary {
    flex: 0 0 auto;
}
/* "Continuar" en Battle.net/Discord queda `disabled` hasta vincular de
   verdad (ver public/js/auth.js) -- sin este estilo, el degradado propio de
   .btn-primary casi no se distingue del habilitado y parecía clickeable. */
.reg-card-actions .btn-primary:disabled {
    opacity: .38;
    filter: grayscale(.4);
    cursor: not-allowed;
    box-shadow: none;
}
.reg-card-actions .btn-primary:disabled:hover {
    transform: none;
}
.reg-card-error {
    margin: 10px 0 0;
    padding: 8px 10px;
    color: #fca5a5;
    border: 1px solid rgba(248, 113, 113, 0.28);
    border-radius: 8px;
    background: rgba(127, 29, 29, 0.18);
    font-size: 0.78rem;
    line-height: 1.4;
}
.reg-progress-card {
    margin-bottom: 15px;
    padding: 12px;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(56, 189, 248, 0.25);
    border-radius: 12px;
}
.reg-progress-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.reg-progress-title {
    font-size: 0.75rem;
    font-weight: 800;
    color: #38bdf8;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.reg-progress-pct {
    font-size: 0.8rem;
    font-weight: 900;
    color: #10b981;
}
.reg-progress-track {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    overflow: hidden;
}
.reg-progress-fill {
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, #38bdf8, #10b981);
    transition: width 0.3s ease;
}

/* Tarjetas de vinculación inmersiva (Battle.net/Discord/Google por ventana
   emergente) y bienvenida con personajes -- ver startRegOAuthPopup y
   renderBnetWelcome en public/js/auth.js. */
.reg-card-status {
    margin: 10px 0 0;
    min-height: 1.1em;
    color: #94a3b8;
    font-size: 0.82rem;
    line-height: 1.4;
}
/* Escape solo para la simulación de Top Gun (ver startRegOAuthPopup):
   aparece si la ventana emergente de Battle.net/Discord no confirma a
   tiempo, para no bloquear el resto de la prueba. */
.reg-skip-btn {
    display: block;
    width: fit-content;
    margin: 10px auto 0;
    padding: 8px 14px;
    font-size: 0.78rem;
    border-radius: 8px;
    border: 1px dashed rgba(148, 163, 184, 0.4);
    background: transparent;
    color: #cbd5e1;
    cursor: pointer;
}
.reg-skip-btn:hover {
    border-color: rgba(148, 163, 184, 0.7);
    color: #e2e8f0;
}
.reg-char-welcome {
    margin-top: 14px;
}
.reg-char-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.reg-char-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    padding: 12px;
    border: 1px solid rgba(56, 189, 248, 0.25);
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.85);
}
.reg-char-avatar {
    width: 100%;
    max-width: 160px;
    height: 180px;
    border-radius: 10px;
    object-fit: cover;
    object-position: top center;
    background: rgba(255, 255, 255, 0.05);
}
.reg-char-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 0;
    color: #e2e8f0;
    font-size: 0.85rem;
}
.reg-char-info strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.reg-char-info span {
    color: #94a3b8;
    font-size: 0.72rem;
}
.reg-whatsapp-code {
    margin-top: 12px;
    padding: 12px;
    border: 1px solid rgba(16, 185, 129, 0.28);
    border-radius: 10px;
    background: rgba(6, 78, 59, 0.18);
    color: #a9ebd2;
    font-size: 0.85rem;
    text-align: center;
}
.reg-whatsapp-code strong {
    display: block;
    margin-bottom: 6px;
    color: #34d399;
    font-size: 1rem;
    letter-spacing: 0.03em;
}
.reg-whatsapp-code p {
    margin: 0;
    color: #cbd5e1;
    font-size: 0.78rem;
    line-height: 1.4;
}
@media (max-width: 480px) {
    .reg-char-grid {
        grid-template-columns: 1fr;
    }
}

/* Salida de emergencia de la "Simulación de registro" de Top Gun -- solo
   visible cuando el usuario de la cuenta empieza con topgun-sim- (ver
   showRegCard en public/js/auth.js). */
.reg-sim-exit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 12px;
    padding: 8px 12px;
    border: 1px solid rgba(249, 115, 22, 0.3);
    border-radius: 10px;
    background: rgba(124, 45, 18, 0.18);
    color: #fdba74;
    font-size: 0.74rem;
    font-weight: 700;
}
.reg-sim-exit button {
    flex: 0 0 auto;
    padding: 6px 10px;
    border: 1px solid rgba(249, 115, 22, 0.4);
    border-radius: 8px;
    background: rgba(249, 115, 22, 0.12);
    color: #fed7aa;
    font-size: 0.72rem;
    font-weight: 800;
    cursor: pointer;
}
.reg-sim-exit button:hover {
    background: rgba(249, 115, 22, 0.22);
}


/* GPU Acceleration & Performance Optimization for Modals */
.modal, .modal-content, .auth-modal, .reg-card {
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: auto;
}
.modal-backdrop, .universalModal-backdrop {
    background: rgba(5, 10, 20, 0.82) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}