* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: #0a0a0f;
    color: #e0e0e0;
    min-height: 100vh;
}

.vault-loader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: radial-gradient(ellipse at center, #12081f 0%, #0a0510 50%, #050208 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.vault-loader.vault-loader-done {
    animation: vl-dismiss 0.7s ease-out forwards;
}
@keyframes vl-dismiss {
    0% { opacity: 1; transform: scale(1); }
    60% { opacity: 0.5; transform: scale(1.05); }
    100% { opacity: 0; transform: scale(1.15); visibility: hidden; pointer-events: none; }
}
.vault-loader-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    position: relative;
}
.vault-loader-rune-ring {
    position: absolute;
    width: 140px;
    height: 140px;
    top: -30px;
    border: 1px solid rgba(255,215,0,0.12);
    border-radius: 50%;
    animation: vl-spin 6s linear infinite;
    box-shadow: 0 0 30px rgba(255,215,0,0.05);
}
.vault-loader-rune-ring::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    border: 1px dashed rgba(168,123,250,0.15);
    animation: vl-spin-reverse 8s linear infinite;
}
.vault-loader-rune-ring::after {
    content: '';
    position: absolute;
    inset: 8px;
    border-radius: 50%;
    border: 1px solid rgba(255,215,0,0.06);
    animation: vl-spin 4s linear infinite;
}
@keyframes vl-spin { to { transform: rotate(360deg); } }
@keyframes vl-spin-reverse { to { transform: rotate(-360deg); } }
.vault-loader-icon {
    font-size: 2.5rem;
    animation: vl-pulse 1.5s ease-in-out infinite;
    filter: drop-shadow(0 0 12px rgba(255,215,0,0.4));
}
@keyframes vl-pulse { 0%,100%{transform:scale(1);opacity:0.8} 50%{transform:scale(1.1);opacity:1} }
.vault-loader-title {
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 4px;
    color: #ffd700;
    text-shadow: 0 0 20px rgba(255,215,0,0.3);
    margin-top: 8px;
}
.vault-loader-bar-wrap {
    width: 200px;
    height: 3px;
    background: rgba(255,215,0,0.08);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 4px;
    position: relative;
}
.vault-loader-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #a78bfa, #ffd700, #ffaa00);
    border-radius: 3px;
    transition: width 0.3s ease;
    box-shadow: 0 0 8px rgba(255,215,0,0.6);
}
.vault-loader-status {
    font-family: 'Cinzel', serif;
    font-size: 0.6rem;
    color: rgba(255,215,0,0.4);
    letter-spacing: 2px;
    text-transform: uppercase;
}
.vault-loader-spark {
    position: absolute;
    width: 2px;
    height: 2px;
    background: #ffd700;
    border-radius: 50%;
    opacity: 0;
    animation: vl-float 3s ease-in-out infinite;
    box-shadow: 0 0 4px rgba(255,215,0,0.6);
}
@keyframes vl-float {
    0% { opacity: 0; transform: translateY(0) scale(0); }
    20% { opacity: 1; transform: translateY(-20px) scale(1); }
    100% { opacity: 0; transform: translateY(-80px) scale(0.3); }
}

a {
    color: #c084fc;
    text-decoration: none;
}
a:hover {
    color: #e9d5ff;
}

nav {
    background: linear-gradient(135deg, #1a0a2e 0%, #16082a 100%);
    border-bottom: 2px solid #2d1b4e;
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-brand {
    font-family: 'Cinzel', serif;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-decoration: none;
    text-transform: uppercase;
    background: linear-gradient(90deg, #ffd700 0%, #ff8c00 20%, #ffd700 40%, #fff5cc 50%, #ffd700 60%, #ff8c00 80%, #ffd700 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: navBrandShimmer 4s ease-in-out infinite;
    position: relative;
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.4));
    transition: filter 0.3s;
}
.nav-brand::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #ffd700, #ff8c00, #ffd700, transparent);
    transition: width 0.4s ease;
    border-radius: 2px;
}
.nav-brand:hover {
    filter: drop-shadow(0 0 16px rgba(255, 215, 0, 0.7)) drop-shadow(0 0 30px rgba(255, 140, 0, 0.3));
    -webkit-text-fill-color: transparent;
}
.nav-brand:hover::after {
    width: 100%;
}
@keyframes navBrandShimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.nav-links {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}

.nav-links a {
    color: #c084fc;
    font-weight: 500;
    transition: color 0.2s;
}

.nav-links a:hover {
    color: #ffd700;
}


.btn {
    display: inline-block;
    padding: 0.6rem 1.4rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    transition: all 0.2s;
    text-align: center;
}

.btn-primary {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    color: #fff;
}
.btn-primary:hover {
    background: linear-gradient(135deg, #6d28d9, #9333ea);
    transform: translateY(-1px);
}

.btn-gold {
    background: linear-gradient(135deg, #b8860b, #ffd700);
    color: #1a0a2e;
}
.btn-gold:hover {
    background: linear-gradient(135deg, #daa520, #ffe44d);
    transform: translateY(-1px);
}

.btn-danger {
    background: linear-gradient(135deg, #dc2626, #ef4444);
    color: #fff;
}

.btn-sm {
    padding: 0.4rem 0.9rem;
    font-size: 0.85rem;
}

.container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 2rem;
}

.flash-messages {
    max-width: 800px;
    margin: 1rem auto;
    padding: 0 2rem;
}

.flash {
    padding: 0.8rem 1.2rem;
    border-radius: 6px;
    margin-bottom: 0.5rem;
    font-weight: 500;
}
.flash-success {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid #22c55e;
    color: #4ade80;
}
.flash-error {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid #ef4444;
    color: #f87171;
}
.flash-warning {
    background: rgba(234, 179, 8, 0.15);
    border: 1px solid #eab308;
    color: #facc15;
}

.hero {
    text-align: center;
    padding: 6rem 2rem;
    background: radial-gradient(ellipse at center, #1a0a2e 0%, #0a0a0f 70%);
}

.hero h1 {
    font-size: 3rem;
    color: #ffd700;
    margin-bottom: 1rem;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
}

.hero p {
    font-size: 1.2rem;
    color: #a78bfa;
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.hero-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.auth-form {
    max-width: 420px;
    margin: 3rem auto;
    background: linear-gradient(135deg, #1a0a2e 0%, #120824 100%);
    border: 1px solid #2d1b4e;
    border-radius: 12px;
    padding: 2.5rem;
}

.auth-form h2 {
    color: #ffd700;
    margin-bottom: 1.5rem;
    text-align: center;
    font-size: 1.8rem;
}

.form-group {
    margin-bottom: 1.2rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.4rem;
    color: #c084fc;
    font-weight: 500;
    font-size: 0.9rem;
}

.form-group input,
.form-group select {
    width: 100%;
    padding: 0.7rem 1rem;
    background: #0f0a1a;
    border: 1px solid #2d1b4e;
    border-radius: 6px;
    color: #e0e0e0;
    font-size: 1rem;
    transition: border-color 0.2s;
}

.form-group input[type="file"] {
    padding: 0.5rem;
    font-size: 0.9rem;
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: #a855f7;
    box-shadow: 0 0 0 2px rgba(168, 85, 247, 0.2);
}

.auth-form .btn {
    width: 100%;
    margin-top: 0.5rem;
}

.auth-form p {
    text-align: center;
    margin-top: 1rem;
    color: #9ca3af;
}

.page-title {
    font-size: 2rem;
    color: #ffd700;
    margin-bottom: 0.5rem;
}

.page-subtitle {
    color: #a78bfa;
    margin-bottom: 2rem;
}

.dashboard-hero {
    text-align: center;
    padding: 3.5rem 2rem 2rem;
    background: radial-gradient(ellipse at 50% 0%, rgba(45, 20, 80, 0.6) 0%, transparent 55%),
                radial-gradient(ellipse at 20% 80%, rgba(139, 92, 246, 0.08) 0%, transparent 50%),
                radial-gradient(ellipse at 80% 80%, rgba(255, 215, 0, 0.05) 0%, transparent 50%),
                #0a0a0f;
    border-bottom: 1px solid rgba(139, 92, 246, 0.2);
    position: relative;
    overflow: hidden;
}
.dash-hero-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.dash-particle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: rgba(167, 139, 250, 0.5);
    border-radius: 50%;
    left: calc(var(--dx) * 100%);
    top: calc(var(--dy) * 100%);
    animation: dashParticleFloat var(--dd) ease-in-out infinite var(--dl);
    box-shadow: 0 0 6px rgba(167, 139, 250, 0.4);
}
@keyframes dashParticleFloat {
    0%, 100% { transform: translateY(0) scale(1); opacity: 0.3; }
    50% { transform: translateY(-20px) scale(1.5); opacity: 0.8; }
}
.dash-hero-sigil {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 300px;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(167, 139, 250, 0.06);
    border-radius: 50%;
    pointer-events: none;
    animation: dashSigilSpin 60s linear infinite;
}
.dash-hero-sigil::before,
.dash-hero-sigil::after {
    content: '';
    position: absolute;
    border: 1px solid rgba(167, 139, 250, 0.04);
    border-radius: 50%;
}
.dash-hero-sigil::before {
    inset: -30px;
    animation: dashSigilSpin 45s linear infinite reverse;
}
.dash-hero-sigil::after {
    inset: 20px;
    border-color: rgba(255, 215, 0, 0.04);
}
@keyframes dashSigilSpin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}
.dash-hero-content {
    position: relative;
    z-index: 1;
}
.dash-hero-title-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 0.3rem;
}
.dash-hero-line {
    width: 80px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.4), transparent);
}
.dashboard-title {
    font-size: 2.5rem;
    color: #ffd700;
    margin-bottom: 0.5rem;
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.2);
}
.dashboard-subtitle {
    color: #a78bfa;
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}
.dashboard-hero .dashboard-title {
    font-size: 2.8rem;
    margin-bottom: 0;
    text-shadow: 0 0 30px rgba(255, 215, 0, 0.25), 0 0 60px rgba(255, 215, 0, 0.1);
    letter-spacing: 4px;
}
.dashboard-hero .dashboard-subtitle {
    color: rgba(167, 139, 250, 0.7);
    font-size: 0.85rem;
    font-family: 'Cinzel', serif;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 1.8rem;
}
.dash-hero-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    background: rgba(5, 0, 20, 0.5);
    border: 1px solid rgba(139, 92, 246, 0.15);
    border-radius: 16px;
    padding: 0.8rem 0.4rem;
    backdrop-filter: blur(10px);
    max-width: 600px;
    margin: 0 auto 1.5rem;
}
.dash-hero-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    padding: 0.3rem 0.8rem;
}
.dash-hero-stat-value {
    font-family: 'Cinzel', serif;
    font-size: 1.6rem;
    font-weight: 800;
    color: #ffd700;
    text-shadow: 0 0 12px rgba(255, 215, 0, 0.2);
    line-height: 1.2;
}
.dash-hero-stat-small {
    font-size: 0.85rem;
    color: rgba(255, 215, 0, 0.5);
    font-weight: 600;
}
.dash-hero-stat-label {
    font-family: 'Cinzel', serif;
    font-size: 0.6rem;
    font-weight: 600;
    color: rgba(167, 139, 250, 0.6);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-top: 0.15rem;
}
.dash-hero-stat-divider {
    width: 1px;
    height: 36px;
    background: linear-gradient(180deg, transparent, rgba(139, 92, 246, 0.25), transparent);
}

.vault-overview {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 2rem;
    align-items: start;
    max-width: 1400px;
    margin: 0 auto 1.5rem;
}

.vault-treasury {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.vault-gauge {
    background: rgba(15, 10, 25, 0.7);
    border: 1px solid rgba(45, 27, 78, 0.8);
    border-radius: 16px;
    padding: 1rem 1.2rem;
    position: relative;
    overflow: hidden;
}

.vault-gauge::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    pointer-events: none;
}

.vault-gauge-flames::before {
    background: radial-gradient(ellipse at bottom center, rgba(255, 107, 0, 0.08) 0%, transparent 70%);
}

.vault-gauge-sparks::before {
    background: radial-gradient(ellipse at bottom center, rgba(139, 92, 246, 0.08) 0%, transparent 70%);
}

.vault-gauge-flames {
    border-color: rgba(255, 107, 0, 0.3);
}

.vault-gauge-sparks {
    border-color: rgba(139, 92, 246, 0.3);
}

.vault-gauge-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.3rem;
}

.vault-gauge-icon {
    font-size: 1.1rem;
}

.vault-gauge-title {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #8a7ca8;
    font-weight: 600;
}

.vault-gauge-value {
    font-size: 1.6rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    position: relative;
    z-index: 1;
}

.vault-gauge-flames .vault-gauge-value {
    color: #ff6b00;
    text-shadow: 0 0 20px rgba(255, 107, 0, 0.4);
    animation: flameGlow 2s ease-in-out infinite;
}

.vault-gauge-sparks .vault-gauge-value {
    color: #a78bfa;
    text-shadow: 0 0 20px rgba(167, 139, 250, 0.4);
    animation: sparkShimmer 2.5s ease-in-out infinite;
}

.vault-gauge-bar {
    height: 8px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.vault-gauge-fill {
    height: 100%;
    border-radius: 4px;
    width: 0;
    transition: width 1.5s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
}

.vault-gauge-fill-flames {
    background: linear-gradient(90deg, #ff4500, #ff6b00, #ffa500);
    box-shadow: 0 0 12px rgba(255, 107, 0, 0.5);
}

.vault-gauge-fill-sparks {
    background: linear-gradient(90deg, #7c3aed, #8b5cf6, #a78bfa);
    box-shadow: 0 0 12px rgba(139, 92, 246, 0.5);
}

.vault-gauge-fill::after {
    content: '';
    position: absolute;
    right: 0;
    top: -2px;
    bottom: -2px;
    width: 12px;
    border-radius: 50%;
    filter: blur(4px);
}

.vault-gauge-fill-flames::after {
    background: #ffa500;
    box-shadow: 0 0 8px #ff6b00, 0 0 16px #ff4500;
}

.vault-gauge-fill-sparks::after {
    background: #a78bfa;
    box-shadow: 0 0 8px #8b5cf6, 0 0 16px #7c3aed;
}

.vault-gauge-sub {
    font-size: 0.65rem;
    color: #5a4d6e;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 0.4rem;
    text-align: right;
}

.vault-progress-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
}

.vault-progress-ring-wrap {
    position: relative;
    width: 140px;
    height: 140px;
}

.vault-progress-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.vault-ring-bg {
    fill: none;
    stroke: rgba(45, 27, 78, 0.5);
    stroke-width: 8;
}

.vault-ring-fill {
    fill: none;
    stroke: url(#vaultGradient);
    stroke-width: 8;
    stroke-linecap: round;
    filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.4));
}

.vault-progress-svg defs {
    display: block;
}

.vault-ring-fill {
    stroke: #ffd700;
}

.vault-progress-inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.vault-progress-pct {
    font-size: 1.8rem;
    font-weight: 800;
    color: #ffd700;
    text-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
    line-height: 1;
}

.vault-progress-label {
    font-size: 0.65rem;
    color: #8a7ca8;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-top: 0.2rem;
}

.vault-progress-detail {
    text-align: center;
}

.vault-progress-fraction {
    font-size: 1.1rem;
    font-weight: 700;
    color: #e2d9f3;
}

.vault-frac-sep {
    color: #5a4d6e;
    margin: 0 0.15rem;
}

.vault-progress-detail-label {
    display: block;
    font-size: 0.65rem;
    color: #5a4d6e;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 0.2rem;
}

.vault-rarity-tracker {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.vrt-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 0.7rem;
    background: rgba(15, 10, 25, 0.5);
    border: 1px solid rgba(45, 27, 78, 0.4);
    border-radius: 10px;
    transition: border-color 0.3s;
}
.vrt-row:hover {
    border-color: var(--rarity-clr, rgba(167,139,250,0.4));
}
.vrt-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 95px;
    flex-shrink: 0;
}
.vrt-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.vrt-name {
    font-size: 0.75rem;
    font-weight: 600;
    color: #c4b5fd;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.vrt-bar-wrap {
    flex: 1;
    min-width: 0;
}
.vrt-bar-bg {
    height: 8px;
    background: rgba(30, 20, 50, 0.8);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid rgba(60, 40, 90, 0.3);
}
.vrt-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.6s ease;
    min-width: 0;
}
.vrt-bar-fill.vrt-complete {
    box-shadow: 0 0 8px var(--rarity-clr, #a78bfa);
}
.vrt-count {
    font-size: 0.8rem;
    font-weight: 700;
    color: #e2d9f3;
    min-width: 50px;
    text-align: right;
    flex-shrink: 0;
    white-space: nowrap;
}
.vrt-owned {
    color: #e2d9f3;
}
.vrt-sep {
    color: #5a4d6e;
    margin: 0 1px;
}
.vrt-total {
    color: #7c6f93;
    font-weight: 500;
}

.global-tracker-section {
    margin: 0.75rem 0;
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, rgba(15,10,30,0.9) 0%, rgba(30,15,50,0.75) 100%);
    border: 1px solid rgba(168,139,250,0.12);
    border-radius: 10px;
    position: relative;
    overflow: hidden;
}
.global-tracker-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, #a78bfa 20%, #f59e0b 50%, #ff4500 80%, transparent);
    opacity: 0.6;
}
.global-tracker-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}
.global-tracker-icon {
    font-size: 0.9rem;
    line-height: 1;
}
.global-tracker-text {
    flex: 1;
}
.global-tracker-title {
    font-family: 'Cinzel', serif;
    font-size: 0.7rem;
    color: #c0b0e0;
    letter-spacing: 0.08em;
    margin: 0;
}
.global-tracker-sub {
    display: none;
}
.global-tracker-live {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.55rem;
    font-weight: 700;
    color: #4ade80;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 2px 8px;
    background: rgba(74,222,128,0.06);
    border: 1px solid rgba(74,222,128,0.15);
    border-radius: 10px;
}
.gt-live-dot {
    width: 5px;
    height: 5px;
    background: #4ade80;
    border-radius: 50%;
    display: inline-block;
    animation: gtLiveBlink 1.5s ease-in-out infinite;
    box-shadow: 0 0 4px #4ade80;
}
@keyframes gtLiveBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}
.gt-admin-reset {
    background: none;
    border: 1px solid rgba(239,68,68,0.25);
    color: #ef4444;
    font-size: 0.55rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    cursor: pointer;
    letter-spacing: 0.05em;
    transition: all 0.2s;
}
.gt-admin-reset:hover {
    background: rgba(239,68,68,0.15);
    border-color: rgba(239,68,68,0.5);
}

.rarity-tracker-bar {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
}

.rt-card {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-radius: 8px;
    overflow: hidden;
    min-width: 0;
    padding: 0.35rem 0.5rem;
}

.rt-glow {
    position: absolute;
    inset: 0;
    opacity: 0.1;
    pointer-events: none;
    border-radius: 8px;
}

.rt-mythical {
    background: rgba(15, 8, 20, 0.7);
    border: 1px solid rgba(255, 60, 120, 0.25);
}
.rt-mythical .rt-glow {
    background: radial-gradient(ellipse at 30% 0%, rgba(255, 0, 100, 0.3), transparent 70%);
}

.rt-legendary {
    background: rgba(20, 16, 8, 0.7);
    border: 1px solid rgba(255, 215, 0, 0.2);
}
.rt-legendary .rt-glow {
    background: radial-gradient(ellipse at 30% 0%, rgba(255, 200, 0, 0.25), transparent 70%);
}

.rt-epic {
    background: rgba(14, 8, 22, 0.7);
    border: 1px solid rgba(168, 85, 247, 0.2);
}
.rt-epic .rt-glow {
    background: radial-gradient(ellipse at 30% 0%, rgba(168, 85, 247, 0.25), transparent 70%);
}
.rt-epic .rt-title { color: #a855f7; }
.rt-epic .rt-num { color: #c084fc; }
.rt-epic .rt-window {
    background: rgba(168, 85, 247, 0.12);
    border-color: rgba(168, 85, 247, 0.25);
    color: #c084fc;
}
.rt-thumb-epic {
    border-color: rgba(168, 85, 247, 0.4) !important;
}
.rt-popup-epic { color: #c084fc; }

.rt-info {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
    z-index: 1;
    padding: 0;
}

.rt-header {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    margin: 0;
    flex-shrink: 0;
}

.rt-icon-wrap {
    font-size: 0.7rem;
    line-height: 1;
}

.rt-title {
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.rt-mythical .rt-title { color: #ff6090; }
.rt-legendary .rt-title { color: #ffd700; }

.rt-window {
    font-size: 0.42rem;
    background: rgba(255, 215, 0, 0.12);
    border: 1px solid rgba(255, 215, 0, 0.25);
    color: #ffd700;
    padding: 0 0.2rem;
    border-radius: 3px;
    margin-left: 0.1rem;
    vertical-align: middle;
    font-weight: 600;
}

.rt-count {
    display: flex;
    align-items: baseline;
    gap: 0.15rem;
    line-height: 1;
    flex-shrink: 0;
}

.rt-num {
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: -0.5px;
}

.rt-mythical .rt-num { color: #ff7aa8; }
.rt-legendary .rt-num { color: #ffd700; }

.rt-label {
    font-size: 0.5rem;
    color: #7a7a90;
    font-weight: 500;
    letter-spacing: 0.3px;
}

.rt-last-pull {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
    flex: 1;
}

.rt-card-name {
    color: #e8ddf5;
    font-size: 0.7rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    display: block;
    letter-spacing: 0.3px;
}

.rt-mythical .rt-card-name {
    color: #ff7ab8;
    text-shadow: 0 0 8px rgba(255, 60, 140, 0.5), 0 0 2px rgba(255, 120, 180, 0.3);
}
.rt-legendary .rt-card-name {
    color: #ffd866;
    text-shadow: 0 0 8px rgba(255, 200, 0, 0.45), 0 0 2px rgba(255, 215, 80, 0.3);
}
.rt-epic .rt-card-name {
    color: #c084fc;
    text-shadow: 0 0 8px rgba(192, 132, 252, 0.45), 0 0 2px rgba(168, 100, 240, 0.3);
}

.rt-hidden-nsfw {
    color: #665;
    font-style: italic;
}

.rt-pulled-by {
    font-size: 0.5rem;
    color: #6a6a80;
    white-space: nowrap;
}
.rt-pulled-by strong {
    color: #a0a0b8;
    font-weight: 600;
}

.rt-none-yet {
    font-size: 0.55rem;
    color: #555;
    font-style: italic;
}

.rt-thumb-area {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    margin-left: 0.25rem;
}

.rt-thumb {
    width: 32px;
    height: 42px;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    transition: transform 0.2s, box-shadow 0.2s;
}

.rt-thumb:hover {
    transform: scale(1.12);
}

.rt-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.rt-thumb-myth {
    border: 1.5px solid rgba(255, 60, 120, 0.5);
    box-shadow: 0 0 6px rgba(255, 0, 80, 0.2);
}
.rt-thumb-myth:hover {
    box-shadow: 0 0 12px rgba(255, 0, 80, 0.4);
}

.rt-thumb-leg {
    border: 1.5px solid rgba(255, 215, 0, 0.5);
    box-shadow: 0 0 6px rgba(255, 200, 0, 0.15);
}
.rt-thumb-leg:hover {
    box-shadow: 0 0 12px rgba(255, 200, 0, 0.35);
}

.rt-thumb-empty, .rt-thumb-hidden {
    background: rgba(30, 20, 40, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    opacity: 0.5;
}
.rt-thumb-empty:hover, .rt-thumb-hidden:hover {
    transform: none;
    box-shadow: none;
}
.rt-thumb-empty span, .rt-thumb-hidden span {
    font-size: 1.2rem;
    color: #555;
}

.rt-popup-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
}
.rt-popup-overlay.active {
    display: flex;
}

.rt-popup-card {
    position: relative;
    width: 260px;
    max-width: 90vw;
    background: #12101e;
    border: 1px solid rgba(160, 120, 255, 0.3);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 40px rgba(160, 100, 255, 0.1);
    animation: rtPopupIn 0.3s ease-out;
}

@keyframes rtPopupIn {
    from { opacity: 0; transform: scale(0.9) translateY(20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.rt-popup-close {
    position: absolute;
    top: 8px;
    right: 10px;
    background: rgba(0,0,0,0.5);
    border: none;
    color: #aaa;
    font-size: 1.3rem;
    cursor: pointer;
    z-index: 2;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.rt-popup-close:hover { color: #fff; background: rgba(255,60,60,0.4); }

.rt-popup-media {
    width: 100%;
    aspect-ratio: 3/4;
    background: #0a0a14;
}
.rt-popup-img, .rt-popup-vid {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.rt-popup-details {
    padding: 0.7rem 0.9rem;
    text-align: center;
}

.rt-popup-name {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    font-family: 'Cinzel', serif;
    margin-bottom: 0.2rem;
}
.rt-popup-mythical { color: #ff7aa8; text-shadow: 0 0 10px rgba(255,60,140,0.4); }
.rt-popup-legendary { color: #ffd700; text-shadow: 0 0 10px rgba(255,200,0,0.35); }
.rt-popup-epic { color: #c084fc; text-shadow: 0 0 10px rgba(192,132,252,0.35); }

.rt-popup-pack {
    display: block;
    font-size: 0.68rem;
    color: #9090a8;
    margin-bottom: 0.5rem;
    font-style: italic;
    letter-spacing: 0.3px;
}

.rt-popup-stats {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    margin-bottom: 0.45rem;
    padding: 0.35rem 0;
    border-top: 1px solid rgba(255,255,255,0.06);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.rt-popup-stat {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.3px;
}
.rt-popup-stat-atk { color: #f87171; }
.rt-popup-stat-def { color: #60a5fa; }
.rt-popup-stat-hp { color: #4ade80; }
.rt-popup-stat-tp { color: #fbbf24; }

.rt-popup-by {
    font-size: 0.72rem;
    color: #8888a0;
    display: block;
    margin-top: 0.15rem;
}
.rt-popup-by strong {
    color: #c0c0d0;
}

.rt-flash {
    animation: rtFlashIn 0.6s ease-out;
}
@keyframes rtFlashIn {
    0% { opacity: 0; transform: translateY(-4px); }
    50% { opacity: 1; transform: translateY(1px); }
    100% { transform: translateY(0); }
}

@media (max-width: 600px) {
    .global-tracker-section { padding: 0.4rem 0.6rem; margin: 0.5rem 0; }
    .global-tracker-header { gap: 0.3rem; margin-bottom: 0.3rem; }
    .global-tracker-title { font-size: 0.6rem; }
    .rarity-tracker-bar {
        flex-direction: column;
        gap: 0.3rem;
    }
    .rt-card { padding: 0.3rem 0.4rem; }
    .rt-num { font-size: 0.85rem; }
    .rt-thumb { width: 28px; height: 36px; }
    .rt-card-name { font-size: 0.62rem; }
    .rt-pulled-by { font-size: 0.45rem; }
    .rt-popup-card { width: 220px; }
    .gt-admin-reset { font-size: 0.5rem; padding: 1px 6px; }
}

.vault-rarity-chip {
    display: none;
}

.vault-rarity-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.vault-rarity-count {
    font-weight: 700;
    color: var(--rarity-clr);
}

.vault-rarity-name {
    color: #8a7ca8;
    font-size: 0.7rem;
}

.collection-stats {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

.stat-pill {
    background: rgba(10, 5, 25, 0.6);
    border: 1px solid rgba(45, 27, 78, 0.8);
    border-radius: 20px;
    padding: 0.5rem 1.2rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    backdrop-filter: blur(6px);
}

.stat-pill-value {
    color: #ffd700;
    font-weight: 700;
    font-size: 1.2rem;
}

.stat-pill-label {
    color: #a78bfa;
    font-size: 0.85rem;
}

.empty-state {
    text-align: center;
    padding: 4rem 2rem;
}

.empty-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.empty-state h2 {
    color: #ffd700;
    margin-bottom: 0.5rem;
}

.empty-state p {
    color: #9ca3af;
}

.empty-collection-prompt {
    text-align: center;
    padding: 4rem 2rem 5rem;
    max-width: 500px;
    margin: 0 auto;
}

.empty-collection-icon {
    font-size: 5rem;
    margin-bottom: 1rem;
    display: block;
}

.empty-collection-title {
    color: #ffd700;
    font-size: 1.6rem;
    margin-bottom: 0.75rem;
}

.empty-collection-text {
    color: #9ca3af;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.empty-collection-btn {
    display: inline-block;
    padding: 14px 36px;
    font-size: 1.1rem;
    font-weight: 700;
}

.empty-collection-alt {
    color: #6b6b7b;
    font-size: 0.9rem;
    margin-top: 1rem;
}

.packs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 2rem;
    padding-top: 1rem;
}

.pack-card {
    background: linear-gradient(135deg, #1a0a2e 0%, #120824 100%);
    border: 1px solid #2d1b4e;
    border-radius: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
    display: block;
    color: inherit;
}

.pack-card:hover {
    transform: translateY(-4px);
    border-color: #a855f7;
    box-shadow: 0 8px 30px rgba(168, 85, 247, 0.2);
    color: inherit;
}

.pack-cover {
    position: relative;
    width: 100%;
    padding-top: 133.33%;
    overflow: hidden;
}

.pack-cover-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.4s ease;
}

.pack-cover-default {
    z-index: 1;
}

.pack-cover-hover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 2;
}

video.pack-cover-hover {
    object-fit: cover;
}

.pack-card:hover .pack-cover-img.pack-cover-default {
    transform: scale(1.05);
}

.pack-cover-placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #2d1b4e 0%, #1a0a2e 50%, #0f0a1a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pack-cover-icon {
    font-size: 4rem;
    opacity: 0.4;
}

.pack-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 15, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 3;
}

.pack-card:hover .pack-overlay {
    opacity: 1;
}

.pack-view-btn {
    background: linear-gradient(135deg, #b8860b, #ffd700);
    color: #1a0a2e;
    padding: 0.6rem 1.5rem;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.5px;
}

.pack-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(10, 10, 15, 0.8);
    border: 1px solid #2d1b4e;
    color: #c084fc;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.6rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 4;
}
.pack-nsfw-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(20, 5, 5, 0.85);
    border: 1px solid rgba(239, 68, 68, 0.5);
    color: #ef4444;
    font-family: 'Cinzel', serif;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    z-index: 5;
}

.pack-fusable-badge {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 0.7rem;
    padding: 0.45rem 0.75rem;
    background: linear-gradient(135deg, rgba(5, 30, 15, 0.85), rgba(10, 40, 20, 0.9));
    border: 1px solid rgba(34, 197, 94, 0.35);
    border-radius: 8px;
    color: #4ade80;
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    animation: fusable-pulse 2.5s ease-in-out infinite;
}
.pack-fusable-badge .fusable-icon {
    font-size: 0.85rem;
    filter: drop-shadow(0 0 4px rgba(34, 197, 94, 0.5));
}
.pack-fusable-badge .fusable-count {
    color: #22c55e;
    font-size: 0.8rem;
    font-weight: 800;
}
.pack-fusable-badge .fusable-label {
    color: rgba(74, 222, 128, 0.7);
    font-size: 0.62rem;
    letter-spacing: 1.2px;
}
@keyframes fusable-pulse {
    0%, 100% { box-shadow: 0 0 6px rgba(34, 197, 94, 0.15), inset 0 0 8px rgba(34, 197, 94, 0.05); }
    50% { box-shadow: 0 0 14px rgba(34, 197, 94, 0.3), inset 0 0 12px rgba(34, 197, 94, 0.08); }
}

.pack-info {
    padding: 1.2rem;
}

.pack-title {
    font-size: 1.3rem;
    color: #ffd700;
    margin-bottom: 0.4rem;
}

.pack-desc {
    font-size: 0.85rem;
    color: #9ca3af;
    margin-bottom: 0.8rem;
    line-height: 1.4;
}

.pack-progress-section {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 0.8rem;
}

.pack-progress-bar {
    flex: 1;
    height: 6px;
    background: #2d1b4e;
    border-radius: 3px;
    overflow: hidden;
}

.pack-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #7c3aed, #ffd700);
    border-radius: 3px;
    transition: width 0.5s ease;
}

.pack-progress-text {
    color: #a78bfa;
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
}

.pack-rarity-pills {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.rarity-pill {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.15rem 0.5rem;
    border: 1px solid;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.pack-detail-hero {
    position: relative;
    text-align: center;
    overflow: hidden;
    background: #0a0a0f;
    border-bottom: 1px solid #2d1b4e;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pack-hero-arcane-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.pack-detail-bg {
    position: absolute;
    inset: -5%;
    width: 110%;
    height: 110%;
    background-size: cover;
    background-position: center;
    opacity: 0.7;
    z-index: 1;
}

.pack-detail-bg-poster {
    position: absolute;
    inset: -5%;
    width: 110%;
    height: 110%;
    object-fit: cover;
    opacity: 0.7;
    z-index: 1;
    transition: opacity 0.6s ease;
}
.pack-detail-bg-poster.poster-fade {
    opacity: 0;
    pointer-events: none;
}

.pack-detail-bg-video {
    position: absolute;
    inset: -5%;
    width: 110%;
    height: 110%;
    object-fit: cover;
    opacity: 0;
    will-change: transform;
    transform: translateZ(0);
    z-index: 1;
    transition: opacity 0.6s ease;
}
.pack-detail-bg-video.video-ready {
    opacity: 0.7;
}

.pack-detail-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 10, 15, 0.15) 0%, rgba(10, 10, 15, 0.35) 60%, rgba(10, 10, 15, 0.8) 100%);
    pointer-events: none;
    z-index: 0;
}

.pack-detail-hero-content {
    position: relative;
    z-index: 1;
}

.back-link {
    display: inline-block;
    margin-bottom: 1rem;
    color: #c084fc;
    font-weight: 500;
}

.back-link:hover {
    color: #ffd700;
}

.pack-detail-title {
    font-size: 2.5rem;
    color: #ffd700;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6), 0 0 20px rgba(255, 215, 0, 0.25);
}

.pack-detail-desc {
    color: #c4b5fd;
    font-size: 1.05rem;
    max-width: 600px;
    margin: 0 auto 1.5rem;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.pack-detail-stats {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.pack-detail-progress {
    max-width: 400px;
    margin: 0 auto;
}

.pack-filter-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #1a1a2e;
}

.filter-label {
    color: #a78bfa;
    font-weight: 600;
}

.nsfw-toggle-btn {
    transition: all 0.3s ease;
    border-radius: 6px;
    font-size: 0.8rem;
    padding: 6px 14px;
}
.nsfw-toggle-btn:hover {
    transform: scale(1.05);
    filter: brightness(1.2);
}

.progress-bar {
    width: 100%;
    height: 6px;
    background: #2d1b4e;
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #7c3aed, #ffd700);
    border-radius: 3px;
    transition: width 0.5s ease;
}

.asset-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(265px, 1fr));
    gap: 1rem;
}
.asset-grid-mythical {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
}
.mythical-row-wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 0.5rem;
}
.mythical-sep {
    margin: 0.2rem 0 0.8rem;
}

.asset-card {
    background: transparent;
    border: none;
    border-radius: 0;
    text-align: center;
    transition: all 0.3s;
    position: relative;
    overflow: visible;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.asset-card.has-media,
.asset-card.unlocked {
    overflow: visible;
    background: transparent;
    border-radius: 0;
}

.asset-rarity-stripe {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 2;
}

.asset-card.locked {
    border-color: #1a1025;
}

.asset-card.unlocked {
    position: relative;
    border: none !important;
    z-index: 1;
}

.asset-card.unlocked:hover {
    transform: none;
}

.asset-card.unlocked[data-rarity="Mythical"]:hover::after,
.asset-card.unlocked[data-rarity="Legendary"]:hover::after {
    filter: blur(14px) brightness(1.8);
    opacity: 0.8;
}

.asset-card.unlocked[data-rarity="Epic"]::before {
    background: linear-gradient(270deg, #a855f7, #c084fc, #7c3aed, #a855f7);
    background-size: 400% 100%;
    animation: laser-border-flow 4s linear infinite;
}

.asset-card.unlocked[data-rarity="Epic"]::after {
    background: linear-gradient(270deg, #a855f7, #c084fc, #7c3aed, #a855f7);
    background-size: 400% 100%;
    animation: laser-border-flow 4s linear infinite;
    filter: blur(8px) brightness(1.4);
    opacity: 0.45;
}

.asset-card.unlocked[data-rarity="Rare"]::before {
    background: linear-gradient(270deg, #3b82f6, #60a5fa, #2563eb, #3b82f6);
    background-size: 400% 100%;
    animation: laser-border-flow 5s linear infinite;
}

.asset-card.unlocked[data-rarity="Rare"]::after {
    background: linear-gradient(270deg, #3b82f6, #60a5fa, #2563eb, #3b82f6);
    background-size: 400% 100%;
    animation: laser-border-flow 5s linear infinite;
    filter: blur(6px) brightness(1.3);
    opacity: 0.35;
}

.asset-card.has-media.unlocked::before {
    background: linear-gradient(270deg, var(--rarity-color, #a855f7), #ec4899, #f59e0b, var(--rarity-color, #a855f7), #3b82f6, var(--rarity-color, #a855f7)) !important;
    background-size: 600% 100% !important;
    animation: laser-border-flow 3s linear infinite !important;
    filter: brightness(1.3) saturate(1.2) !important;
}

.asset-card.has-media.unlocked::after {
    background: linear-gradient(270deg, var(--rarity-color, #a855f7), #ec4899, #f59e0b, var(--rarity-color, #a855f7), #3b82f6, var(--rarity-color, #a855f7)) !important;
    background-size: 600% 100% !important;
    animation: laser-border-flow 3s linear infinite !important;
    filter: blur(10px) brightness(1.5) !important;
    opacity: 0.5 !important;
}

.asset-card.has-media.unlocked:hover::after {
    filter: blur(14px) brightness(1.8) !important;
    opacity: 0.8 !important;
}

.asset-card.has-media.locked {
    position: relative;
    border: 1px solid #2d1b4e !important;
    z-index: 1;
}

.asset-card.unlocked[data-asset-type="audio"]::before {
    background: linear-gradient(270deg, #22d3ee, #06b6d4, #67e8f9, #0891b2, #22d3ee) !important;
    background-size: 500% 100% !important;
    animation: audio-border-pulse 2.5s ease-in-out infinite !important;
    filter: brightness(1.4) saturate(1.3) !important;
    top: -3px !important;
    left: -3px !important;
    right: -3px !important;
    bottom: -3px !important;
    border-radius: 10px !important;
}

.asset-card.unlocked[data-asset-type="audio"]::after {
    background: linear-gradient(270deg, #22d3ee, #06b6d4, #67e8f9, #0891b2, #22d3ee) !important;
    background-size: 500% 100% !important;
    animation: audio-border-pulse 2.5s ease-in-out infinite !important;
    filter: blur(12px) brightness(1.6) !important;
    opacity: 0.55 !important;
    top: -6px !important;
    left: -6px !important;
    right: -6px !important;
    bottom: -6px !important;
}

.asset-card.unlocked[data-asset-type="audio"]:hover::after {
    filter: blur(16px) brightness(2) !important;
    opacity: 0.85 !important;
}

.asset-card.unlocked[data-asset-type="document"]::before {
    background: linear-gradient(270deg, #f59e0b, #fbbf24, #d97706, #fcd34d, #f59e0b) !important;
    background-size: 500% 100% !important;
    animation: doc-border-pulse 3s ease-in-out infinite !important;
    filter: brightness(1.3) saturate(1.2) !important;
    top: -3px !important;
    left: -3px !important;
    right: -3px !important;
    bottom: -3px !important;
    border-radius: 10px !important;
}

.asset-card.unlocked[data-asset-type="document"]::after {
    background: linear-gradient(270deg, #f59e0b, #fbbf24, #d97706, #fcd34d, #f59e0b) !important;
    background-size: 500% 100% !important;
    animation: doc-border-pulse 3s ease-in-out infinite !important;
    filter: blur(12px) brightness(1.5) !important;
    opacity: 0.5 !important;
    top: -6px !important;
    left: -6px !important;
    right: -6px !important;
    bottom: -6px !important;
}

.asset-card.unlocked[data-asset-type="document"]:hover::after {
    filter: blur(16px) brightness(1.9) !important;
    opacity: 0.8 !important;
}

.asset-card.locked[data-asset-type="audio"],
.asset-card.locked[data-asset-type="document"] {
    border: 2px dashed rgba(34, 211, 238, 0.3) !important;
}

.asset-card.locked[data-asset-type="document"] {
    border-color: rgba(245, 158, 11, 0.3) !important;
}

@keyframes audio-border-pulse {
    0%, 100% {
        background-position: 0% 50%;
        filter: brightness(1.4) saturate(1.3);
    }
    50% {
        background-position: 100% 50%;
        filter: brightness(1.8) saturate(1.5);
    }
}

@keyframes doc-border-pulse {
    0%, 100% {
        background-position: 0% 50%;
        filter: brightness(1.3) saturate(1.2);
    }
    50% {
        background-position: 100% 50%;
        filter: brightness(1.7) saturate(1.4);
    }
}

@keyframes laser-border-flow {
    0% { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

.asset-image-wrap {
    position: relative;
    width: 100%;
    padding-top: 100%;
    overflow: hidden;
    background: #1a1a2e;
}

.asset-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.asset-card.locked .asset-image {
    filter: grayscale(100%) brightness(0.3);
}

.asset-card.unlocked .asset-image {
    filter: none;
}

.asset-card-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.asset-lock-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 10, 15, 0.5);
}

.asset-lock-icon {
    font-size: 2rem;
    opacity: 0.7;
}

.asset-placeholder-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: bold;
    color: #4a4a5a;
    background: #1a1a2e;
}

.asset-card.unlocked .asset-placeholder-icon {
    color: #ffd700;
    background: linear-gradient(135deg, #2d1b4e, #1a0a2e);
}

.asset-name {
    font-size: 0.9rem;
    font-weight: 700;
    margin-bottom: 0.3rem;
    line-height: 1.3;
    padding: 0.6rem 0.5rem 0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.asset-rarity {
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

.asset-status {
    font-size: 0.8rem;
    margin-top: 0.3rem;
    padding-bottom: 0.6rem;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.asset-card.locked .asset-name {
    color: #8a8a9b;
}

.asset-card.unlocked .asset-name {
    color: #ffffff;
}

.asset-card.unlocked:hover {
    box-shadow: none;
}

.asset-video-badge {
    background: #a855f7;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 3px;
    display: inline-block;
    margin: 2px auto 4px;
}

.asset-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.asset-modal-overlay.active {
    display: flex;
}

.asset-modal {
    background: #0f0a1a;
    border: 1px solid #2d1b4e;
    border-radius: 12px;
    width: auto;
    max-width: min(95vw, 520px);
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    position: relative;
    animation: modalAppear 0.3s ease-out;
    overflow: hidden;
}

@keyframes modalAppear {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.asset-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;
    background: rgba(0, 0, 0, 0.7);
    color: #e5e5e5;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.asset-modal-close:hover {
    background: rgba(239, 68, 68, 0.8);
}

.asset-modal-rarity-stripe {
    height: 4px;
    flex-shrink: 0;
    border-radius: 12px 12px 0 0;
}

.asset-modal-media {
    width: 100%;
    background: #0a0a14;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    height: 50vh;
    flex-shrink: 0;
}

.asset-modal-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.asset-modal-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.asset-modal-no-media {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5rem;
    color: #ffd700;
}

.asset-modal-media-toggle {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 5;
    background: rgba(0, 0, 0, 0.7);
    color: #e5e5e5;
    border: 1px solid rgba(168, 85, 247, 0.5);
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background 0.2s;
}

.asset-modal-media-toggle:hover {
    background: rgba(168, 85, 247, 0.4);
}

.asset-modal-media-toggle .toggle-arrow {
    font-size: 1.1rem;
}

.asset-modal-downloads {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.asset-modal-dl-link {
    color: #94a3b8;
    font-size: 0.78rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 6px;
    transition: all 0.2s;
}

.asset-modal-dl-link:hover {
    color: #c084fc;
    border-color: rgba(167, 139, 250, 0.3);
    background: rgba(167, 139, 250, 0.08);
}

.asset-modal-slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.asset-modal-slide.hidden {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.95);
}

.asset-modal-info {
    padding: 1rem 1.5rem 1.2rem;
    border-top: 1px solid #2d1b4e;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.modal-info-header {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
}

.asset-modal-name {
    color: #f0e6ff;
    font-size: 1.6rem;
    margin: 0;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 8px rgba(167, 139, 250, 0.3);
}

.asset-modal-rarity {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 2px 10px;
    border-radius: 4px;
    background: rgba(255,255,255,0.05);
    border: 1px solid currentColor;
    white-space: nowrap;
}

.asset-modal-desc {
    color: #d4cde6;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.8;
    margin: 0;
    padding: 14px 18px;
    background: linear-gradient(135deg, rgba(12, 8, 24, 0.7), rgba(25, 14, 56, 0.5));
    border: 1px solid rgba(167, 139, 250, 0.12);
    border-left: 3px solid rgba(167, 139, 250, 0.5);
    border-radius: 0 10px 10px 0;
    letter-spacing: 0.3px;
    position: relative;
}
.asset-modal-desc::before {
    content: '\201C';
    position: absolute;
    top: 4px;
    left: 8px;
    font-size: 2.2rem;
    color: rgba(167, 139, 250, 0.2);
    font-family: 'Cinzel', serif;
    line-height: 1;
}
.asset-modal-desc:empty {
    display: none;
}

.modal-actions-bar {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.3rem;
    border-top: 1px solid rgba(45, 27, 78, 0.6);
    padding-top: 0.75rem;
}
.modal-action-group {
    flex: 1;
    min-width: 0;
}

@media (max-width: 768px) {
    .asset-modal {
        width: 100vw;
        max-width: 100vw;
        max-height: 100vh;
        border-radius: 0;
    }
    .asset-modal-media {
        height: 40vh;
    }
    .asset-modal-info {
        padding: 0.8rem 1rem;
    }
    .modal-actions-bar {
        flex-direction: column;
    }
}

.asset-upload-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.asset-upload-card {
    background: #0f0a1a;
    border: 1px solid #2d1b4e;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    text-align: center;
}

.asset-delete-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 10;
    background: rgba(239, 68, 68, 0.8);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
}

.asset-upload-card:hover .asset-delete-btn {
    opacity: 1;
}

.asset-delete-btn:hover {
    background: #ef4444;
}

.add-asset-form {
    background: rgba(45, 27, 78, 0.3);
    border: 1px solid #2d1b4e;
    border-radius: 8px;
    padding: 1.2rem;
    margin-bottom: 1.5rem;
}

.asset-rarity-select select {
    width: 100%;
}

.asset-edit-name {
    width: 100%;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    color: #e5e5e5;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 3px 5px;
    margin-bottom: 3px;
    transition: border-color 0.2s;
}

.asset-edit-name:hover,
.asset-edit-name:focus {
    border-color: #2d1b4e;
    background: #1a1025;
    outline: none;
}

.asset-edit-desc {
    width: 100%;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    color: #9ca3af;
    font-size: 0.7rem;
    padding: 2px 5px;
    margin-bottom: 3px;
    transition: border-color 0.2s;
}

.asset-edit-desc:hover,
.asset-edit-desc:focus {
    border-color: #2d1b4e;
    background: #1a1025;
    outline: none;
}

.asset-upload-preview {
    width: 100%;
    height: 160px;
    overflow: hidden;
    background: #1a1a2e;
    display: flex;
    align-items: center;
    justify-content: center;
}

.asset-upload-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.asset-upload-placeholder {
    font-size: 3rem;
    color: #4a4a5a;
}

.asset-upload-info {
    padding: 0.5rem;
}

.asset-upload-controls {
    padding: 0 0.5rem 0.5rem;
}

.asset-upload-status {
    font-size: 0.75rem;
    padding: 0 0.5rem 0.5rem;
    min-height: 1.2em;
}

.redeem-section {
    max-width: 500px;
    margin: 3rem auto;
    text-align: center;
}

.redeem-section .auth-form {
    margin: 2rem auto;
}

.admin-section {
    margin-bottom: 2rem;
}

.admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.admin-card {
    background: linear-gradient(135deg, #1a0a2e 0%, #120824 100%);
    border: 1px solid #2d1b4e;
    border-radius: 12px;
    padding: 1.5rem;
}

.admin-card-header {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1rem;
}

.admin-card-header h3 {
    color: #ffd700;
    margin: 0;
}

.admin-cover-thumb {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid #2d1b4e;
    flex-shrink: 0;
}

.admin-cover-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0f0a1a;
    font-size: 0.65rem;
    color: #4a4a5a;
}

.admin-section-title {
    color: #a78bfa;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.admin-inline-form {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.admin-inline-form input[type="text"] {
    flex: 1;
    padding: 0.5rem 0.8rem;
    background: #0f0a1a;
    border: 1px solid #2d1b4e;
    border-radius: 6px;
    color: #e0e0e0;
    font-size: 0.85rem;
}

.admin-inline-form input[type="file"] {
    flex: 1;
    font-size: 0.8rem;
    color: #9ca3af;
}

.admin-inline-form input:focus {
    outline: none;
    border-color: #a855f7;
}

.stat {
    display: flex;
    justify-content: space-between;
    padding: 0.4rem 0;
    border-bottom: 1px solid #1a1a2e;
}

.stat-label {
    color: #9ca3af;
}

.stat-value {
    color: #e0e0e0;
    font-weight: 600;
}

.admin-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.add-pack-form {
    background: linear-gradient(135deg, #1a0a2e 0%, #120824 100%);
    border: 1px solid #2d1b4e;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 2rem;
}

.add-pack-form h3 {
    color: #ffd700;
    margin-bottom: 1rem;
}

.form-row {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.form-row .form-group {
    flex: 1;
    min-width: 180px;
}

.codes-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}

.codes-table th,
.codes-table td {
    padding: 0.7rem 1rem;
    text-align: left;
    border-bottom: 1px solid #2d1b4e;
}

.codes-table th {
    color: #ffd700;
    font-weight: 600;
    background: #1a0a2e;
}

.codes-table tr:hover {
    background: rgba(168, 85, 247, 0.05);
}

.code-text {
    font-family: 'Courier New', monospace;
    font-weight: 600;
    color: #c084fc;
}

.badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.badge-redeemed {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
}

.badge-available {
    background: rgba(34, 197, 94, 0.15);
    color: #4ade80;
}

.section-heading-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 0.5rem;
}
.section-heading-row .section-heading {
    margin-bottom: 0.2rem;
}
.section-heading-row .section-sub {
    margin-bottom: 0;
}
.section-heading-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
}
.btn-fuse-all {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1.2rem;
    font-size: 0.85rem;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    color: #22c55e;
    background: rgba(5, 30, 15, 0.85);
    border: 1px solid rgba(34, 197, 94, 0.5);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.btn-fuse-all:hover {
    background: rgba(10, 50, 25, 0.95);
    border-color: rgba(34, 197, 94, 0.8);
    box-shadow: 0 0 16px rgba(34, 197, 94, 0.3);
    transform: translateY(-1px);
}
.btn-fuse-all:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}
.fuse-all-icon { font-size: 1rem; }
.fuse-all-count { opacity: 0.7; font-size: 0.75rem; }
.view-all-btn {
    white-space: nowrap;
    padding: 0.5rem 1.2rem !important;
    font-size: 0.85rem !important;
    border-radius: 8px !important;
}
.btn-outline {
    background: transparent;
    border: 1px solid #7c3aed;
    color: #c084fc;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
}
.btn-outline:hover {
    background: rgba(124,58,237,0.2);
    border-color: #a855f7;
    color: #e9d5ff;
}

.section-heading {
    color: #ffd700;
    font-size: 1.4rem;
    margin-bottom: 0.3rem;
}

.section-sub {
    color: #9ca3af;
    font-size: 0.9rem;
    margin-bottom: 1.2rem;
}

.store-hero {
    text-align: center;
    padding: 2rem 1rem;
    background: radial-gradient(ellipse at top, #1a0a2e 0%, #0a0a0f 70%);
    border-bottom: 1px solid #2d1b4e;
}

.store-odds-section {
    margin-bottom: 2.5rem;
}

.odds-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.8rem;
}

.odds-card {
    background: #0f0a1a;
    border: 1px solid #2d1b4e;
    border-radius: 8px;
    padding: 1rem;
    text-align: center;
}

.odds-rarity {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.3rem;
}

.odds-pct {
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
}

.odds-bar {
    height: 4px;
    background: #1a1a2e;
    border-radius: 2px;
    overflow: hidden;
}

.odds-bar-fill {
    height: 100%;
    border-radius: 2px;
}

.store-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.store-card {
    background: #0f0a1a;
    border: 1px solid #2d1b4e;
    border-radius: 12px;
    padding: 1.5rem;
    transition: border-color 0.3s;
}

.store-card:hover {
    border-color: #a855f7;
}

.store-card-premium {
    border-color: #ffd700;
    background: linear-gradient(135deg, #0f0a1a 0%, #1a0a2e 100%);
}

.store-card-premium:hover {
    border-color: #ffd700;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.15);
}

.store-card-header {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 0.8rem;
}

.store-card-icon {
    font-size: 2rem;
}

.store-card-header h3 {
    color: #e5e5e5;
    font-size: 1.2rem;
}

.store-card-desc {
    color: #9ca3af;
    font-size: 0.9rem;
    margin-bottom: 1rem;
    line-height: 1.5;
}

.store-card-price {
    font-size: 2rem;
    font-weight: 800;
    color: #ffd700;
    margin-bottom: 0.8rem;
}

.store-card-details {
    display: flex;
    gap: 1rem;
    color: #9ca3af;
    font-size: 0.85rem;
    margin-bottom: 1rem;
}

.store-pack-select {
    margin-bottom: 1rem;
}

.store-pack-select select {
    width: 100%;
    background: #1a1025;
    color: #e5e5e5;
    border: 1px solid #2d1b4e;
    border-radius: 6px;
    padding: 0.6rem;
    font-size: 0.9rem;
}

.store-buy-btn {
    width: 100%;
    padding: 0.8rem;
    font-size: 1rem;
    font-weight: 700;
}

.admin-test-notice {
    background: rgba(255, 165, 0, 0.1);
    border: 1px solid #f59e0b;
    color: #fbbf24;
    padding: 0.8rem 1rem;
    border-radius: 8px;
    text-align: center;
    font-size: 0.9rem;
    margin-top: 1.5rem;
}

.store-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1.2rem;
    margin-top: 1.5rem;
}

.store-result-card {
    background: #0f0a1a;
    border: 1px solid #2d1b4e;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    text-align: center;
    animation: cardReveal 0.5s ease-out;
}

@keyframes cardReveal {
    from { transform: scale(0.8) rotateY(90deg); opacity: 0; }
    to { transform: scale(1) rotateY(0deg); opacity: 1; }
}

.store-result-card:nth-child(2) { animation-delay: 0.1s; }
.store-result-card:nth-child(3) { animation-delay: 0.2s; }
.store-result-card:nth-child(4) { animation-delay: 0.3s; }
.store-result-card:nth-child(5) { animation-delay: 0.4s; }

.store-result-image {
    width: 100%;
    height: 180px;
    overflow: hidden;
    background: #1a1a2e;
    display: flex;
    align-items: center;
    justify-content: center;
}

.store-result-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.store-result-placeholder {
    font-size: 3rem;
    color: #ffd700;
}

.store-result-info {
    padding: 0.8rem;
}

.store-result-pack {
    color: #6b6b7b;
    font-size: 0.75rem;
    margin-top: 0.3rem;
}

@media (max-width: 768px) {
    .hero h1 {
        font-size: 2rem;
    }
    .dashboard-title {
        font-size: 1.8rem;
    }
    .dashboard-hero .dashboard-title {
        letter-spacing: 2px;
    }
    .dash-hero-line {
        width: 40px;
    }
    .dash-hero-stats {
        flex-wrap: wrap;
        max-width: 100%;
        gap: 0.5rem;
        padding: 0.6rem;
    }
    .dash-hero-stat-divider {
        display: none;
    }
    .dash-hero-stat {
        min-width: 40%;
        padding: 0.4rem;
    }
    .dash-hero-stat-value {
        font-size: 1.3rem;
    }
    .vault-overview {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        max-width: 400px;
    }
    .vault-progress-section {
        order: -1;
    }
    .vrt-label {
        min-width: 80px;
    }
    .vault-gauge-value {
        font-size: 1.3rem;
    }
    .vault-progress-ring-wrap {
        width: 120px;
        height: 120px;
    }
    .vault-progress-pct {
        font-size: 1.5rem;
    }
    .pack-detail-title {
        font-size: 1.8rem;
    }
    .packs-grid {
        grid-template-columns: 1fr;
    }
    .asset-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
    nav {
        flex-wrap: wrap;
        padding: 0.75rem 1rem;
        position: relative;
    }
    .nav-hamburger {
        display: flex;
    }
    .nav-links {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 0;
        padding-top: 0;
        margin-top: 0;
        order: 3;
        border-top: none;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transition: max-height 0.35s ease, padding-top 0.35s ease, margin-top 0.35s ease, opacity 0.25s ease;
    }
    .nav-links.nav-open {
        max-height: 700px;
        opacity: 1;
        padding-top: 0.5rem;
        margin-top: 0.5rem;
        border-top: 1px solid rgba(167, 139, 250, 0.15);
        overflow: visible;
    }
    .nav-links a {
        padding: 12px 8px;
        border-bottom: 1px solid rgba(167, 139, 250, 0.08);
        font-size: 0.95rem;
        display: block;
    }
    .nav-links a:last-child {
        border-bottom: none;
    }
    .nav-user-identity {
        padding: 12px 8px;
        border-bottom: 1px solid rgba(167, 139, 250, 0.08);
        width: 100%;
    }
    .nav-wallet {
        padding: 10px 8px;
        border-bottom: 1px solid rgba(167, 139, 250, 0.08);
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 8px;
    }
    .nw-tooltip {
        display: none !important;
    }
    .admin-grid {
        grid-template-columns: 1fr;
    }
}

.asset-premium-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #1a1a2e;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 10px;
    z-index: 5;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
}

.premium-media-paywall {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(217, 119, 6, 0.15));
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    margin-top: 16px;
}

.premium-paywall-icon {
    font-size: 2.5rem;
    margin-bottom: 8px;
}

.premium-paywall-text {
    color: #e5e5e5;
    font-size: 0.95rem;
    margin-bottom: 16px;
}

.premium-unlock-btn {
    font-size: 1rem;
    padding: 12px 32px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border: none;
    color: #1a1a2e;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3);
}

.premium-unlock-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(245, 158, 11, 0.5);
}

.premium-toggle-btn {
    margin-top: 4px;
    background: #1a1a2e;
    color: #9ca3af;
    border: 1px solid #2d1b4e;
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.premium-toggle-btn.active {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #1a1a2e;
    border-color: #f59e0b;
    font-weight: 700;
}

.asset-warnings {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px 8px;
}

.asset-warning {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.asset-warning-error {
    background: rgba(239, 68, 68, 0.15);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.asset-warning-warn {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.admin-rarity-breakdown {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 8px 0;
    border-bottom: 1px solid #2d1b4e;
    margin-bottom: 4px;
}

.admin-warnings-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 14px;
    background: rgba(239, 68, 68, 0.06);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 8px;
    margin-bottom: 1rem;
}

.extra-media-section {
    border-top: 1px solid #2d1b4e;
    margin-top: 8px;
    padding-top: 6px;
}

.extra-media-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.extra-media-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.extra-media-item {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #1a1025;
    padding: 4px 6px;
    border-radius: 6px;
    font-size: 0.7rem;
}

.extra-media-preview {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0f0a1a;
    border-radius: 4px;
    overflow: hidden;
}

.extra-media-type {
    color: #9ca3af;
    font-size: 0.65rem;
    text-transform: uppercase;
    flex: 1;
}

.extra-media-delete {
    background: none;
    border: none;
    color: #ef4444;
    font-size: 1rem;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}

.modal-slide-content {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-nav-left,
.modal-nav-right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 48px;
    height: 48px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 50%;
    color: #e5e5e5;
    font-size: 1.4rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s, background 0.2s;
}

.asset-modal-media:hover .modal-nav-left,
.asset-modal-media:hover .modal-nav-right {
    opacity: 1;
}

.modal-nav-left { left: 12px; }
.modal-nav-right { right: 12px; }

.modal-nav-left:hover,
.modal-nav-right:hover {
    background: rgba(168, 85, 247, 0.5);
    border-color: #a855f7;
}

.modal-media-counter {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    background: rgba(0, 0, 0, 0.65);
    color: #c084fc;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: 12px;
    letter-spacing: 1px;
    pointer-events: none;
}

.modal-thumbstrip {
    display: flex;
    gap: 6px;
    padding: 8px 12px;
    background: #0a0a14;
    border-top: 1px solid #1a1a2e;
    overflow-x: auto;
    flex-shrink: 0;
    scrollbar-width: thin;
    scrollbar-color: #2d1b4e transparent;
}

.modal-thumb {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    position: relative;
    background: #1a1025;
    transition: border-color 0.2s, transform 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.modal-thumb.active {
    border-color: #a855f7;
    transform: scale(1.08);
    box-shadow: 0 0 8px rgba(168, 85, 247, 0.4);
}

.modal-thumb:hover:not(.active) {
    border-color: #c084fc;
    transform: scale(1.05);
}

.modal-thumb.locked {
    opacity: 0.5;
}

.modal-thumb.locked::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

.thumb-locked-icon {
    font-size: 1.1rem;
    color: #f59e0b;
    z-index: 1;
}

.thumb-video-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.2rem;
    color: #fff;
    text-shadow: 0 1px 4px rgba(0,0,0,0.7);
    pointer-events: none;
    z-index: 1;
}

.thumb-vid-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.thumb-premium-dot {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 8px;
    height: 8px;
    background: #f59e0b;
    border-radius: 50%;
    z-index: 2;
}

.gallery-locked-overlay {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: rgba(10, 5, 20, 0.6);
    gap: 16px;
    overflow: hidden;
}
.gallery-locked-bg {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-size: cover;
    background-position: center;
    filter: blur(20px) brightness(0.4);
    transform: scale(1.15);
    z-index: 0;
}
.gallery-locked-bg-video {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(1.15);
    min-width: 100%; min-height: 100%;
    width: auto; height: auto;
    object-fit: cover;
    filter: blur(20px) brightness(0.4);
    z-index: 0;
    pointer-events: none;
}
.gallery-locked-fg {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.gallery-locked-icon-wrap {
    width: 72px; height: 72px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(245,158,11,0.2) 0%, transparent 70%);
    display: flex; align-items: center; justify-content: center;
    animation: lockPulse 2.5s ease-in-out infinite;
    backdrop-filter: blur(4px);
}
@keyframes lockPulse {
    0%, 100% { box-shadow: 0 0 20px rgba(245,158,11,0.2); }
    50% { box-shadow: 0 0 40px rgba(245,158,11,0.4); }
}
.gallery-locked-icon {
    font-size: 2.5rem;
    filter: drop-shadow(0 0 10px rgba(245,158,11,0.5));
}
.gallery-locked-text {
    color: #f59e0b;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-shadow: 0 0 16px rgba(245,158,11,0.4), 0 2px 4px rgba(0,0,0,0.8);
}
.gallery-nsfw-badge {
    background: linear-gradient(135deg, #dc2626, #991b1b);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 2px;
    padding: 4px 16px;
    border-radius: 4px;
    text-transform: uppercase;
    box-shadow: 0 0 16px rgba(220,38,38,0.5), 0 2px 6px rgba(0,0,0,0.4);
    animation: nsfwBadgePulse 2s ease-in-out infinite;
}
@keyframes nsfwBadgePulse {
    0%, 100% { box-shadow: 0 0 16px rgba(220,38,38,0.5); }
    50% { box-shadow: 0 0 28px rgba(220,38,38,0.8); }
}
.gallery-locked-nsfw {
    background: rgba(30, 5, 10, 0.6);
}
.gallery-locked-nsfw .gallery-locked-bg {
    filter: blur(24px) brightness(0.3) saturate(0.6);
}
.gallery-locked-nsfw .gallery-locked-bg-video {
    filter: blur(24px) brightness(0.3) saturate(0.6);
}
.gallery-locked-nsfw .gallery-locked-icon-wrap {
    background: radial-gradient(circle, rgba(220,38,38,0.2) 0%, transparent 70%);
    animation: lockPulseNsfw 2.5s ease-in-out infinite;
}
.gallery-locked-nsfw .gallery-locked-icon {
    filter: drop-shadow(0 0 10px rgba(220,38,38,0.5));
}
@keyframes lockPulseNsfw {
    0%, 100% { box-shadow: 0 0 20px rgba(220,38,38,0.2); }
    50% { box-shadow: 0 0 40px rgba(220,38,38,0.4); }
}
.thumb-nsfw-dot {
    position: absolute;
    bottom: 1px; right: 1px;
    background: #dc2626;
    color: #fff;
    font-size: 0.45rem;
    font-weight: 800;
    padding: 1px 3px;
    border-radius: 2px;
    line-height: 1;
    box-shadow: 0 0 6px rgba(220,38,38,0.6);
}
.gallery-buy-btn {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border: none;
    color: #1a1a2e;
    font-weight: 700;
    font-size: 1rem;
    padding: 12px 32px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 16px rgba(245,158,11,0.3);
    letter-spacing: 0.5px;
}
.gallery-buy-btn:hover {
    filter: brightness(1.15);
    transform: scale(1.05);
    box-shadow: 0 6px 24px rgba(245,158,11,0.5);
}

.asset-type-badge {
    position: absolute;
    top: 4px;
    left: 4px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #fff;
    z-index: 3;
    letter-spacing: 0.5px;
}
.asset-id-badge {
    position: absolute;
    top: 4px;
    right: 34px;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    color: rgba(255,215,0,0.9);
    background: rgba(15,10,26,0.85);
    border: 1px solid rgba(255,215,0,0.3);
    z-index: 3;
    font-family: 'Cinzel', serif;
    letter-spacing: 0.5px;
}
.file-selected-name {
    display: block;
    font-size: 0.6rem;
    color: #a78bfa;
    margin-top: 2px;
    word-break: break-all;
    line-height: 1.3;
    max-height: 3.9em;
    overflow-y: auto;
    text-align: left;
    padding: 2px 4px;
    background: rgba(45,27,78,0.3);
    border-radius: 3px;
}

.asset-type-icon {
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 1.1rem;
    z-index: 3;
    text-shadow: 0 0 8px currentColor;
}

.asset-card-meta {
    display: flex;
    justify-content: center;
    gap: 6px;
    align-items: center;
    font-size: 0.75rem;
    margin-top: 2px;
}

.asset-type-label {
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.65rem;
    letter-spacing: 0.5px;
}

.asset-file-badge {
    position: absolute;
    bottom: 82px;
    right: 4px;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.55rem;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    z-index: 3;
}

.modal-audio-player {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 300px;
    background: radial-gradient(ellipse at center, #1a1040 0%, #0a0a1a 70%);
    padding: 2rem;
    position: relative;
}

.modal-audio-player.has-cover {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.modal-audio-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 5, 25, 0.55);
    backdrop-filter: blur(4px);
    z-index: 0;
}

.modal-audio-player.has-cover .modal-audio-label,
.modal-audio-player.has-cover .asset-modal-audio {
    position: relative;
    z-index: 1;
}

.modal-audio-icon {
    font-size: 5rem;
    margin-bottom: 1rem;
    animation: audioPulse 2s ease-in-out infinite;
}

@keyframes audioPulse {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.1); opacity: 1; }
}

.modal-audio-label {
    font-size: 1.3rem;
    color: #fff;
    margin-bottom: 1.5rem;
    font-weight: 700;
    text-shadow: 0 2px 12px rgba(0,0,0,0.8);
}

.asset-modal-audio {
    width: 80%;
    max-width: 400px;
    position: relative;
    z-index: 1;
}

.modal-document-viewer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 300px;
    background: radial-gradient(ellipse at center, #1a2040 0%, #0a0a1a 70%);
    padding: 2rem;
}

.modal-document-icon {
    font-size: 5rem;
    margin-bottom: 1rem;
}

.modal-document-label {
    font-size: 1.1rem;
    color: #60a5fa;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.asset-type-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 10, 40, 0.6);
}

.stat-pill-arcane {
    border: 1px solid rgba(255, 215, 0, 0.4) !important;
    background: rgba(255, 215, 0, 0.08) !important;
}

.stat-pill-arcane .stat-pill-value {
    color: #ffd700 !important;
}

.stat-pill-arcane .stat-pill-label {
    color: #fbbf24 !important;
}

.arcane-balance-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(139, 92, 246, 0.08) 100%);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 12px;
    padding: 1rem 2rem;
    margin-bottom: 1.5rem;
}

.arcane-balance-icon {
    font-size: 1.8rem;
}

.arcane-balance-amount {
    font-size: 1.6rem;
    font-weight: 800;
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
}

.arcane-balance-label {
    font-size: 0.85rem;
    color: #a78bfa;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.store-card-arcane {
    border-color: rgba(255, 215, 0, 0.3) !important;
    background: linear-gradient(180deg, rgba(255, 215, 0, 0.06) 0%, #110a1f 100%) !important;
}

.arcane-price {
    color: #ffd700 !important;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.3);
}

.store-arcane-btn {
    background: linear-gradient(135deg, #b8860b 0%, #8b6914 100%) !important;
    color: #fff !important;
}

.store-arcane-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #daa520 0%, #b8860b 100%) !important;
}

.store-arcane-btn:disabled {
    background: #2d1b4e !important;
    color: #666 !important;
    cursor: not-allowed;
}

.arcane-info-section {
    margin-top: 2.5rem;
    padding: 2rem;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.06) 0%, rgba(255, 215, 0, 0.04) 100%);
    border: 1px solid #2d1b4e;
    border-radius: 12px;
}

.arcane-info-section h3 {
    color: #ffd700;
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
}

.arcane-info-section > p {
    color: #a0a0b0;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
}

.arcane-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

@media (max-width: 700px) {
    .arcane-info-grid {
        grid-template-columns: 1fr;
    }
}

.arcane-info-card {
    background: rgba(10, 10, 20, 0.5);
    border: 1px solid #2d1b4e;
    border-radius: 8px;
    padding: 1.2rem;
}

.arcane-info-card h4 {
    color: #c084fc;
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

.arcane-info-card p {
    color: #a0a0b0;
    font-size: 0.85rem;
    margin-bottom: 0.8rem;
}

.arcane-value-list {
    list-style: none;
    padding: 0;
}

.arcane-value-list li {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    border-bottom: 1px solid rgba(45, 27, 78, 0.5);
    font-size: 0.85rem;
}

.arcane-val {
    color: #ffd700;
    font-weight: 700;
}

.sell-asset-btn {
    background: linear-gradient(135deg, #7c2d12 0%, #9a3412 100%);
    color: #fbbf24;
    font-weight: 600;
    padding: 10px 16px;
    border-radius: 8px;
    border: 1px solid rgba(251, 191, 36, 0.25);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.82rem;
    width: 100%;
    text-align: center;
    display: block;
}

.sell-asset-btn:hover {
    background: linear-gradient(135deg, #9a3412 0%, #c2410c 100%);
    border-color: rgba(251, 191, 36, 0.6);
    box-shadow: 0 0 12px rgba(251, 191, 36, 0.15);
}

.asset-modal-sell {
}

.minigames-info-banner {
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.08) 0%, rgba(139, 92, 246, 0.06) 100%);
    border: 1px solid rgba(34, 211, 238, 0.25);
    border-radius: 12px;
    padding: 1.5rem 2rem;
    margin-bottom: 2rem;
}

.minigames-info-icon {
    font-size: 2.5rem;
    flex-shrink: 0;
}

.minigames-info-text h3 {
    color: #22d3ee;
    font-size: 1.2rem;
    margin-bottom: 0.4rem;
}

.minigames-info-text p {
    color: #a0a0b0;
    font-size: 0.95rem;
    line-height: 1.5;
}

.mg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.2rem;
    padding-top: 0.5rem;
}

.mg-card {
    background: linear-gradient(135deg, #1a0a2e 0%, #120824 100%);
    border: 1px solid rgba(34, 211, 238, 0.2);
    border-radius: 14px;
    overflow: hidden;
    transition: all 0.3s ease;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
}

.mg-card:hover {
    transform: translateY(-4px);
    border-color: rgba(34, 211, 238, 0.5);
    box-shadow: 0 8px 25px rgba(34, 211, 238, 0.15);
    color: inherit;
}

.mg-cover {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.mg-cover-media {
    display: block;
    width: 100%;
    height: auto;
    transition: opacity 0.3s ease, transform 0.4s ease;
}

.mg-cover-default { z-index: 1; position: relative; }

.mg-cover-hover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    z-index: 2;
    transition: opacity 0.3s ease;
}

.mg-cover-placeholder {
    width: 100%;
    padding-top: 56%;
    position: relative;
    background: linear-gradient(135deg, #2d1b4e 0%, #1a0a2e 50%, #0f0a1a 100%);
}

.mg-cover-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    opacity: 0.4;
}

.mg-card:hover .mg-cover-default {
    transform: scale(1.03);
}

.mg-play-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 3;
}

.mg-card:hover .mg-play-overlay { opacity: 1; }

.mg-play-btn {
    background: linear-gradient(135deg, #0e7490, #06b6d4);
    color: #fff;
    padding: 0.5rem 1.4rem;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.mg-info {
    padding: 0.8rem 1rem;
}

.mg-title {
    font-size: 1.1rem;
    color: #22d3ee;
    margin: 0 0 0.35rem;
    font-weight: 700;
}

.mg-desc {
    font-size: 0.82rem;
    color: #9ca3af;
    margin: 0.35rem 0 0;
    line-height: 1.4;
}

.mg-reward-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.3rem;
}

.mg-reward-tag {
    display: inline-flex;
    align-items: center;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.mg-reward-sparks {
    background: rgba(167, 139, 250, 0.15);
    border: 1px solid rgba(167, 139, 250, 0.4);
    color: #c4b5fd;
}

.mg-reward-flames {
    background: rgba(251, 146, 60, 0.15);
    border: 1px solid rgba(251, 146, 60, 0.4);
    color: #fdba74;
}

.mg-reward-cards {
    background: rgba(34, 211, 238, 0.12);
    border: 1px solid rgba(34, 211, 238, 0.35);
    color: #67e8f9;
}

.mg-reward-energy {
    background: rgba(250, 204, 21, 0.12);
    border: 1px solid rgba(250, 204, 21, 0.35);
    color: #fde047;
}

@media (max-width: 600px) {
    .mg-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

.minigame-play-header {
    display: flex;
    align-items: center;
    margin-bottom: 0.75rem;
}

.minigame-iframe-wrapper {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid #2d1b4e;
    background: #000;
}

.minigame-iframe {
    width: 100%;
    height: 70vh;
    border: none;
    display: block;
}

/* Arcane Flames - Premium Currency */
@keyframes flameGlow {
    0%, 100% { text-shadow: 0 0 8px rgba(255, 100, 0, 0.6), 0 0 16px rgba(255, 165, 0, 0.3); }
    50% { text-shadow: 0 0 12px rgba(255, 100, 0, 0.9), 0 0 24px rgba(255, 165, 0, 0.5), 0 0 36px rgba(255, 69, 0, 0.2); }
}

@keyframes flamePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

@keyframes sparkShimmer {
    0%, 100% { text-shadow: 0 0 4px rgba(139, 92, 246, 0.4); }
    50% { text-shadow: 0 0 8px rgba(139, 92, 246, 0.7), 0 0 12px rgba(99, 102, 241, 0.3); }
}

@keyframes sparksFloat {
    0% { transform: translateY(0) rotate(0deg); opacity: 1; }
    100% { transform: translateY(-20px) rotate(180deg); opacity: 0; }
}

.nav-wallet {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-right: 6px;
}
.nw-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px 4px 4px;
    border-radius: 24px;
    cursor: pointer;
    overflow: visible;
    transition: transform 0.25s cubic-bezier(.4,0,.2,1), box-shadow 0.3s;
    z-index: 10;
}
.nw-item:hover { transform: translateY(-1px) scale(1.04); }
.nw-item:active { transform: scale(0.97); }
.nw-item-bg {
    position: absolute;
    inset: 0;
    border-radius: 24px;
    z-index: 0;
    transition: all 0.3s;
}
.nw-item-shine {
    position: absolute;
    inset: 0;
    border-radius: 24px;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
}
.nw-item-shine::after {
    content: '';
    position: absolute;
    top: -50%; left: -60%;
    width: 40%;
    height: 200%;
    background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.1) 45%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0.1) 55%, transparent 60%);
    animation: nwShineSweep 5s ease-in-out infinite;
}
@keyframes nwShineSweep {
    0%, 100% { left: -60%; }
    50% { left: 120%; }
}
.nw-item-flames .nw-item-bg {
    background: linear-gradient(135deg, rgba(40,15,5,0.85) 0%, rgba(60,20,5,0.75) 100%);
    border: 1.5px solid rgba(255,120,30,0.5);
    box-shadow: 0 0 10px rgba(255,100,0,0.15), inset 0 1px 0 rgba(255,160,60,0.1);
}
.nw-item-flames:hover .nw-item-bg {
    box-shadow: 0 0 18px rgba(255,100,0,0.4), inset 0 1px 0 rgba(255,160,60,0.15);
    border-color: rgba(255,140,40,0.7);
}
.nw-item-sparks .nw-item-bg {
    background: linear-gradient(135deg, rgba(20,10,50,0.85) 0%, rgba(35,20,80,0.75) 100%);
    border: 1.5px solid rgba(139,92,246,0.5);
    box-shadow: 0 0 10px rgba(139,92,246,0.15), inset 0 1px 0 rgba(180,140,255,0.1);
}
.nw-item-sparks:hover .nw-item-bg {
    box-shadow: 0 0 18px rgba(139,92,246,0.4), inset 0 1px 0 rgba(180,140,255,0.15);
    border-color: rgba(160,110,255,0.7);
}
.nw-item-tickets .nw-item-bg {
    background: linear-gradient(135deg, rgba(40,30,5,0.85) 0%, rgba(60,45,10,0.75) 100%);
    border: 1.5px solid rgba(255,215,0,0.45);
    box-shadow: 0 0 10px rgba(255,215,0,0.12), inset 0 1px 0 rgba(255,230,80,0.08);
}
.nw-item-tickets:hover .nw-item-bg {
    box-shadow: 0 0 18px rgba(255,215,0,0.35), inset 0 1px 0 rgba(255,230,80,0.12);
    border-color: rgba(255,225,50,0.65);
}
.nw-icon-wrap {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    flex-shrink: 0;
    overflow: hidden;
}
.nw-item-flames .nw-icon-wrap {
    background: radial-gradient(circle, rgba(255,120,30,0.35) 0%, rgba(180,60,0,0.5) 100%);
    box-shadow: 0 0 8px rgba(255,100,0,0.4), inset 0 0 6px rgba(255,140,40,0.2);
    border: 1px solid rgba(255,120,30,0.4);
}
.nw-item-sparks .nw-icon-wrap {
    background: radial-gradient(circle, rgba(160,110,255,0.35) 0%, rgba(90,50,180,0.5) 100%);
    box-shadow: 0 0 8px rgba(139,92,246,0.4), inset 0 0 6px rgba(180,140,255,0.2);
    border: 1px solid rgba(139,92,246,0.4);
}
.nw-item-tickets .nw-icon-wrap {
    background: radial-gradient(circle, rgba(255,220,50,0.3) 0%, rgba(180,140,0,0.45) 100%);
    box-shadow: 0 0 8px rgba(255,215,0,0.35), inset 0 0 6px rgba(255,230,80,0.15);
    border: 1px solid rgba(255,215,0,0.35);
}
.nw-icon {
    font-size: 1rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nw-currency-img {
    width: 22px;
    height: 22px;
    object-fit: cover;
    display: block;
    border-radius: 50%;
    pointer-events: none;
}
video.nw-currency-img {
    clip-path: circle(50%);
    border-radius: 50%;
    filter: brightness(1.4) contrast(1.1) saturate(1.2);
}
.nw-item-flames .nw-currency-img {
    filter: brightness(1.5) contrast(1.15) saturate(1.3) drop-shadow(0 0 3px rgba(255,150,50,0.8));
}
.nw-item-sparks .nw-currency-img {
    filter: brightness(1.5) contrast(1.15) saturate(1.3) drop-shadow(0 0 3px rgba(180,140,255,0.8));
}
.nw-item-tickets .nw-currency-img {
    filter: brightness(1.4) contrast(1.1) saturate(1.2) drop-shadow(0 0 3px rgba(255,230,80,0.8));
}
.nw-tt-icon {
    width: 18px;
    height: 18px;
    object-fit: cover;
    vertical-align: middle;
    margin-right: 3px;
    border-radius: 50%;
    pointer-events: none;
}
video.nw-tt-icon {
    clip-path: circle(50%);
}
.currency-icon {
    object-fit: cover;
    vertical-align: middle;
    display: inline-block;
    border-radius: 50%;
    pointer-events: none;
}
video.currency-icon {
    object-fit: cover;
    clip-path: circle(50%);
}
.nw-item-flames .nw-icon { animation: nwFireAnim 3s ease-in-out infinite; }
.nw-item-sparks .nw-icon { animation: nwSparkAnim 3.5s ease-in-out infinite; }
.nw-item-tickets .nw-icon { animation: nwTicketAnim 4s ease-in-out infinite; }
@keyframes nwFireAnim {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); filter: drop-shadow(0 0 6px rgba(255,100,0,0.6)); }
}
@keyframes nwSparkAnim {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); filter: drop-shadow(0 0 6px rgba(180,130,255,0.6)); }
}
@keyframes nwTicketAnim {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); filter: drop-shadow(0 0 5px rgba(255,215,0,0.5)); }
}
.nw-val {
    position: relative;
    z-index: 2;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.3px;
}
.nw-item-flames .nw-val {
    color: #ffc880;
    text-shadow: 0 0 8px rgba(255,120,20,0.5), 0 1px 2px rgba(0,0,0,0.6);
}
.nw-item-sparks .nw-val {
    color: #d0c0ff;
    text-shadow: 0 0 8px rgba(160,110,255,0.5), 0 1px 2px rgba(0,0,0,0.6);
}
.nw-item-tickets .nw-val {
    color: #ffe87a;
    text-shadow: 0 0 8px rgba(255,215,0,0.5), 0 1px 2px rgba(0,0,0,0.6);
}
.nw-tooltip {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    width: 220px;
    background: linear-gradient(145deg, rgba(20,10,35,0.97), rgba(30,15,50,0.98));
    border: 1px solid rgba(168,85,247,0.4);
    border-radius: 12px;
    padding: 14px 16px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
    z-index: 100;
    box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 20px rgba(168,85,247,0.15);
}
.nw-tooltip::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 12px;
    height: 12px;
    background: rgba(20,10,35,0.97);
    border-left: 1px solid rgba(168,85,247,0.4);
    border-top: 1px solid rgba(168,85,247,0.4);
}
.nw-item.nw-open .nw-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}
.nw-item-flames.nw-open .nw-tooltip { border-color: rgba(255,120,30,0.5); }
.nw-item-flames.nw-open .nw-tooltip::before { border-color: rgba(255,120,30,0.5); }
.nw-item-sparks.nw-open .nw-tooltip { border-color: rgba(139,92,246,0.5); }
.nw-item-sparks.nw-open .nw-tooltip::before { border-color: rgba(139,92,246,0.5); }
.nw-item-tickets.nw-open .nw-tooltip { border-color: rgba(255,215,0,0.45); }
.nw-item-tickets.nw-open .nw-tooltip::before { border-color: rgba(255,215,0,0.45); }
.nw-tt-title {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 0.85rem;
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}
.nw-item-flames .nw-tt-title { color: #ffad5c; }
.nw-item-sparks .nw-tt-title { color: #c4b0ff; }
.nw-item-tickets .nw-tt-title { color: #ffe566; }
.nw-tt-desc {
    color: rgba(200,200,220,0.85);
    font-size: 0.75rem;
    line-height: 1.5;
}

/* Flames stat pill */
.stat-pill-flames {
    border: 1px solid rgba(255, 107, 0, 0.5) !important;
    background: rgba(255, 107, 0, 0.08) !important;
    position: relative;
    overflow: hidden;
}

.stat-pill-flames::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, #ff4500, #ff6b00, #ffa500, #ff6b00, #ff4500);
    background-size: 200% 100%;
    animation: fireBar 2s linear infinite;
}

@keyframes fireBar {
    0% { background-position: 0% 0%; }
    100% { background-position: 200% 0%; }
}

.stat-pill-flames .stat-pill-value {
    color: #ff6b00 !important;
    animation: flameGlow 2s ease-in-out infinite;
}

.stat-pill-flames .stat-pill-label {
    color: #ff8c00 !important;
}

/* Sparks stat pill */
.stat-pill-sparks {
    border: 1px solid rgba(139, 92, 246, 0.4) !important;
    background: rgba(139, 92, 246, 0.08) !important;
}

.stat-pill-sparks .stat-pill-value {
    color: #a78bfa !important;
    animation: sparkShimmer 2.5s ease-in-out infinite;
}

.stat-pill-sparks .stat-pill-label {
    color: #8b5cf6 !important;
}

/* Flames balance banner (store) */
.flames-balance-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: linear-gradient(135deg, rgba(255, 107, 0, 0.12) 0%, rgba(255, 69, 0, 0.06) 50%, rgba(139, 92, 246, 0.04) 100%);
    border: 1px solid rgba(255, 107, 0, 0.4);
    border-radius: 12px;
    padding: 1rem 2rem;
    margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden;
}

.flames-balance-banner::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #ff4500, #ff6b00, #ffa500, #ff6b00, #ff4500);
    background-size: 200% 100%;
    animation: fireBar 2s linear infinite;
}

.flames-balance-icon {
    font-size: 1.8rem;
    animation: flamePulse 2s ease-in-out infinite;
}

.flames-balance-amount {
    font-size: 1.6rem;
    font-weight: 800;
    color: #ff6b00;
    animation: flameGlow 2s ease-in-out infinite;
}

.flames-balance-label {
    font-size: 0.85rem;
    color: #ff8c00;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Sparks balance banner */
.sparks-balance-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(99, 102, 241, 0.05) 100%);
    border: 1px solid rgba(139, 92, 246, 0.4);
    border-radius: 12px;
    padding: 1rem 2rem;
    margin-bottom: 1.5rem;
}

.sparks-balance-icon {
    font-size: 1.5rem;
    animation: sparkShimmer 2.5s ease-in-out infinite;
}

.sparks-balance-amount {
    font-size: 1.4rem;
    font-weight: 700;
    color: #a78bfa;
}

.sparks-balance-label {
    font-size: 0.85rem;
    color: #8b5cf6;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Exchange section */
.exchange-section {
    margin-top: 2.5rem;
    padding: 2rem;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.08) 0%, rgba(255, 107, 0, 0.06) 100%);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 12px;
    text-align: center;
}

.exchange-section h2 {
    color: #a78bfa;
    margin-bottom: 0.5rem;
}

.exchange-rate {
    color: #a0a0b0;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
}

.exchange-rate strong {
    color: #a78bfa;
}

.exchange-rate .flame-text {
    color: #ff6b00;
}

.exchange-form {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.exchange-form select {
    background: #1a0a2e;
    color: #e0e0e0;
    border: 1px solid #2d1b4e;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 1rem;
}

.exchange-btn {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%) !important;
    color: #fff !important;
    font-weight: 700;
    padding: 8px 24px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.3s;
}

.exchange-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.4);
}

.exchange-btn:disabled {
    background: #2d1b4e !important;
    color: #666 !important;
    cursor: not-allowed;
}

.exchange-slider-container {
    width: 100%;
    max-width: 450px;
    margin: 1rem auto;
}
.exchange-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 0.8rem;
}
.exchange-preview-sparks {
    color: #fbbf24;
    text-shadow: 0 0 8px rgba(251,191,36,0.3);
}
.exchange-preview-flames {
    color: #ef4444;
    text-shadow: 0 0 8px rgba(239,68,68,0.3);
}
.exchange-arrow {
    color: #666;
    font-size: 1.4rem;
}
.exchange-range {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 8px;
    background: linear-gradient(90deg, #7c3aed, #ef4444);
    border-radius: 4px;
    outline: none;
    cursor: pointer;
}
.exchange-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fbbf24, #ef4444);
    border: 2px solid #fff;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(251,191,36,0.5);
}
.exchange-range::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fbbf24, #ef4444);
    border: 2px solid #fff;
    cursor: pointer;
    box-shadow: 0 0 10px rgba(251,191,36,0.5);
}
.exchange-slider-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: #888;
    margin-top: 0.3rem;
}
.exchange-quick-btns {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin: 0.8rem 0;
    flex-wrap: wrap;
}
.exchange-quick-btn {
    background: rgba(124,58,237,0.2);
    border: 1px solid rgba(124,58,237,0.4);
    color: #c084fc;
    padding: 6px 16px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.2s;
}
.exchange-quick-btn:hover {
    background: rgba(124,58,237,0.4);
    border-color: #a855f7;
    color: #e0e0e0;
}

.exchange-manual-input {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.exchange-manual-input label {
    color: #a0a0b0;
    font-size: 0.8rem;
}
.exchange-manual-field {
    width: 100px;
    padding: 0.4rem 0.6rem;
    border-radius: 6px;
    border: 1px solid #3d2b5e;
    background: rgba(10,5,20,0.6);
    color: #fff;
    font-size: 0.85rem;
    text-align: center;
}

/* Store flames cards */
.store-card-flames {
    border-color: rgba(255, 107, 0, 0.3) !important;
    background: linear-gradient(180deg, rgba(255, 107, 0, 0.06) 0%, #110a1f 100%) !important;
}

.flames-price {
    color: #ff6b00 !important;
    animation: flameGlow 2s ease-in-out infinite;
}

.store-flames-btn {
    background: linear-gradient(135deg, #cc5500 0%, #993d00 100%) !important;
    color: #fff !important;
}

.store-flames-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, #ff6b00 0%, #cc5500 100%) !important;
}

.store-flames-btn:disabled {
    background: #2d1b4e !important;
    color: #666 !important;
    cursor: not-allowed;
}

/* Difficulty Selection */
.difficulty-select-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.difficulty-select-panel {
    background: linear-gradient(135deg, #1a0a2e, #2d1b4e);
    border: 2px solid #3d2b5e;
    border-radius: 16px;
    padding: 2rem 2.5rem;
    max-width: 800px;
    width: 90%;
}

.difficulty-select-panel h2 {
    color: #ffd700;
    text-align: center;
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
}

.difficulty-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

@media (max-width: 600px) {
    .difficulty-cards {
        grid-template-columns: 1fr;
    }
}

.difficulty-card {
    background: rgba(10, 5, 20, 0.6);
    border: 2px solid #3d2b5e;
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    overflow: hidden;
}

.difficulty-card.has-image {
    padding: 0;
    display: flex;
    flex-direction: column;
}

.diff-card-image {
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.diff-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.difficulty-card.has-image:hover .diff-card-image img {
    transform: scale(1.05);
}

.diff-card-info {
    padding: 1rem 1.2rem 1.2rem;
}

.difficulty-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.difficulty-card.diff-easy {
    border-color: rgba(34, 197, 94, 0.4);
}
.difficulty-card.diff-easy:hover {
    border-color: #22c55e;
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.2);
}

.difficulty-card.diff-medium {
    border-color: rgba(251, 191, 36, 0.4);
}
.difficulty-card.diff-medium:hover {
    border-color: #fbbf24;
    box-shadow: 0 0 20px rgba(251, 191, 36, 0.2);
}

.difficulty-card.diff-hard {
    border-color: rgba(239, 68, 68, 0.4);
}
.difficulty-card.diff-hard:hover {
    border-color: #ef4444;
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.2);
}

.difficulty-card h3 {
    font-size: 1.2rem;
    margin-bottom: 0.8rem;
}

.diff-easy h3 { color: #22c55e; }
.diff-medium h3 { color: #fbbf24; }
.diff-hard h3 { color: #ef4444; }

.difficulty-card .diff-detail {
    color: #a0a0b0;
    font-size: 0.8rem;
    margin: 0.3rem 0;
}

.difficulty-card .diff-reward {
    color: #a78bfa;
    font-size: 0.8rem;
    font-weight: 600;
    margin-top: 0.5rem;
}

.difficulty-card .diff-plays {
    color: #666;
    font-size: 0.75rem;
    margin-top: 0.3rem;
}

/* Sparks earned animation */
@keyframes sparkEarned {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); color: #c084fc; }
    100% { transform: scale(1); }
}

.sparks-earned-flash {
    animation: sparkEarned 0.5s ease;
}

/* Game reward display during play */
.game-sparks-display {
    color: #a78bfa;
    font-weight: 700;
    font-size: 0.95rem;
    background: rgba(139, 92, 246, 0.1);
    padding: 4px 12px;
    border-radius: 6px;
    border: 1px solid rgba(139, 92, 246, 0.3);
    transition: all 0.3s;
}

/* Admin tabs */
.admin-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 2rem;
    border-bottom: 2px solid #2d1b4e;
    flex-wrap: wrap;
}

.admin-tab-group {
    display: flex;
    align-items: stretch;
    position: relative;
    border-right: 1px solid rgba(45,27,78,0.5);
    padding-right: 2px;
    margin-right: 2px;
}

.admin-tab-group:last-child {
    border-right: none;
    padding-right: 0;
    margin-right: 0;
}

.admin-tab-group-label {
    position: absolute;
    top: -10px;
    left: 8px;
    font-size: 0.5rem;
    color: rgba(192,132,252,0.4);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: 'Cinzel', serif;
    pointer-events: none;
}

.admin-tab {
    padding: 10px 16px;
    color: #a0a0b0;
    font-weight: 600;
    font-size: 0.82rem;
    cursor: pointer;
    border: none;
    background: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.3s;
    text-decoration: none;
    white-space: nowrap;
}

.admin-tab:hover {
    color: #c084fc;
}

.admin-tab.active {
    color: #ffd700;
    border-bottom-color: #ffd700;
}

/* Game settings form */
.game-settings-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 1rem;
}

@media (max-width: 800px) {
    .game-settings-grid {
        grid-template-columns: 1fr;
    }
}

.game-settings-card {
    background: rgba(10, 5, 20, 0.6);
    border: 1px solid #2d1b4e;
    border-radius: 12px;
    padding: 1.5rem;
}

.game-settings-card h3 {
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

.game-settings-card .form-group {
    margin-bottom: 0.8rem;
}

.game-settings-card label {
    display: block;
    font-size: 0.8rem;
    color: #a0a0b0;
    margin-bottom: 0.3rem;
}

.game-settings-card input[type="number"] {
    width: 100%;
    background: #1a0a2e;
    color: #e0e0e0;
    border: 1px solid #2d1b4e;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.9rem;
}

/* Asset Stats */
.asset-stats-row {
    display: flex;
    gap: 4px;
    padding: 4px 8px;
    align-items: center;
    background: rgba(10, 10, 15, 0.6);
    border-top: 1px solid #2d1b4e;
}
.asset-stat-input {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    flex: 1;
}
.stat-input {
    width: 44px;
    background: #1a0a2e;
    border: 1px solid #2d1b4e;
    color: #e0e0e0;
    border-radius: 4px;
    padding: 2px 4px;
    font-size: 0.75rem;
    text-align: center;
    font-weight: 700;
}
.stat-input:focus {
    border-color: #a78bfa;
    outline: none;
}
.asset-stat-total {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    min-width: 36px;
}
.asset-flavor-row {
    padding: 0 8px 4px;
    background: rgba(10, 10, 15, 0.6);
}
.asset-card-stats {
    display: flex;
    gap: 6px;
    justify-content: center;
    padding: 4px 6px 2px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.3px;
    background: rgba(0, 0, 0, 0.65);
}
.asset-card-stats .stat-atk { color: #ff6b6b; text-shadow: 0 1px 3px rgba(0,0,0,0.9); }
.asset-card-stats .stat-def { color: #6db3f8; text-shadow: 0 1px 3px rgba(0,0,0,0.9); }
.asset-card-stats .stat-hp { color: #5ee8a0; text-shadow: 0 1px 3px rgba(0,0,0,0.9); }
.asset-card-stats .stat-total { color: #ffd700; text-shadow: 0 1px 3px rgba(0,0,0,0.9); }

.asset-total-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 4px 0;
    font-weight: 800;
    background: rgba(0, 0, 0, 0.7);
    border-top: 1px solid rgba(255,255,255,0.08);
}
.asset-total-badge .total-number {
    font-size: 1.1rem;
    line-height: 1;
}
.asset-total-badge .total-label {
    font-size: 0.5rem;
    letter-spacing: 1.5px;
    opacity: 0.8;
    font-weight: 700;
}
.total-common .total-number { color: #c0c7d0; font-size: 0.95rem; text-shadow: 0 1px 4px rgba(0,0,0,0.9); }
.total-common .total-label { color: #c0c7d0; text-shadow: 0 1px 3px rgba(0,0,0,0.9); }
.total-uncommon .total-number { color: #6feda4; font-size: 1rem; text-shadow: 0 1px 4px rgba(0,0,0,0.9), 0 0 6px rgba(111,237,164,0.3); }
.total-uncommon .total-label { color: #6feda4; text-shadow: 0 1px 3px rgba(0,0,0,0.9); }
.total-rare .total-number { color: #7dc4ff; font-size: 1.05rem; text-shadow: 0 1px 4px rgba(0,0,0,0.9), 0 0 8px rgba(96,165,250,0.5); }
.total-rare .total-label { color: #7dc4ff; text-shadow: 0 1px 3px rgba(0,0,0,0.9); }
.total-epic .total-number { color: #d4a5ff; font-size: 1.1rem; text-shadow: 0 1px 4px rgba(0,0,0,0.9), 0 0 10px rgba(192,132,252,0.6); }
.total-epic .total-label { color: #d4a5ff; text-shadow: 0 1px 3px rgba(0,0,0,0.9); }
.total-legendary .total-number {
    color: #ffcf44;
    font-size: 1.2rem;
    text-shadow: 0 1px 4px rgba(0,0,0,0.9), 0 0 12px rgba(251,191,36,0.7), 0 0 24px rgba(251,191,36,0.3);
}
.total-legendary .total-label { color: #ffcf44; text-shadow: 0 1px 3px rgba(0,0,0,0.9); }
.total-mythical .total-number {
    font-size: 1.35rem;
    background: linear-gradient(135deg, #ff6b6b, #ffd700, #ff6b6b);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: mythicalShimmer 2s ease-in-out infinite;
    filter: drop-shadow(0 0 6px rgba(255,107,107,0.5));
}
.total-mythical .total-label {
    color: #ff6b6b;
    text-shadow: 0 0 6px rgba(255,107,107,0.4);
}
@keyframes mythicalShimmer {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

.asset-modal-stats {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 10px 0 4px;
    width: 100%;
}
.modal-stats-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}
.modal-stat-block {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: linear-gradient(135deg, rgba(15,10,30,0.8), rgba(25,18,50,0.6));
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    position: relative;
    overflow: hidden;
    transition: border-color 0.3s, box-shadow 0.3s;
}
.modal-stat-block:hover {
    border-color: rgba(167,139,250,0.2);
    box-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
.modal-stat-block::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    border-radius: 3px 0 0 3px;
}
.modal-stat-block.stat-atk::before { background: linear-gradient(180deg, #ef4444, #f97316); }
.modal-stat-block.stat-def::before { background: linear-gradient(180deg, #3b82f6, #06b6d4); }
.modal-stat-block.stat-hp::before { background: linear-gradient(180deg, #22c55e, #84cc16); }
.modal-stat-icon-wrap {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
}
.stat-atk .modal-stat-icon-wrap { background: rgba(239,68,68,0.15); color: #ef4444; }
.stat-def .modal-stat-icon-wrap { background: rgba(59,130,246,0.15); color: #3b82f6; }
.stat-hp .modal-stat-icon-wrap { background: rgba(34,197,94,0.15); color: #22c55e; }
.modal-stat-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.modal-stat-label-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}
.modal-stat-label {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #cbd5e1;
}
.modal-stat-value {
    font-size: 1.3rem;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.5px;
}
.modal-stat-bar {
    width: 100%;
    height: 6px;
    background: rgba(255,255,255,0.06);
    border-radius: 3px;
    overflow: hidden;
}
.modal-stat-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}
.modal-stat-bar-fill.bar-atk { background: linear-gradient(90deg, #ef4444, #f97316); box-shadow: 0 0 8px rgba(239,68,68,0.3); }
.modal-stat-bar-fill.bar-def { background: linear-gradient(90deg, #3b82f6, #06b6d4); box-shadow: 0 0 8px rgba(59,130,246,0.3); }
.modal-stat-bar-fill.bar-hp { background: linear-gradient(90deg, #22c55e, #84cc16); box-shadow: 0 0 8px rgba(34,197,94,0.3); }
.modal-stat-boost {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    margin-top: 1px;
    padding: 3px 0;
}
.stat-base-val {
    color: #6b7280;
    text-decoration: line-through;
    font-weight: 500;
    font-size: 0.8rem;
}
.stat-boost-arrow {
    color: #fbbf24;
    font-size: 0.75rem;
}
.stat-boosted-val {
    color: #fbbf24;
    font-weight: 800;
    font-size: 0.88rem;
    text-shadow: 0 0 6px rgba(250,204,21,0.3);
}
.stat-boost-diff {
    color: #4ade80;
    font-weight: 800;
    font-size: 0.78rem;
    background: linear-gradient(135deg, rgba(34,197,94,0.15), rgba(34,197,94,0.08));
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px solid rgba(34,197,94,0.25);
    text-shadow: 0 0 6px rgba(34,197,94,0.3);
    animation: fusionDiffGlow 2s ease-in-out infinite;
}
.modal-level-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.modal-level-inline {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: linear-gradient(135deg, rgba(250,204,21,0.08), rgba(245,158,11,0.05));
    border: 1px solid rgba(250,204,21,0.2);
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 800;
    color: #fbbf24;
    letter-spacing: 0.5px;
    flex: 1;
}
.modal-level-icon {
    font-size: 0.9rem;
    filter: drop-shadow(0 0 4px rgba(250,204,21,0.4));
}
.modal-level-boost {
    font-weight: 500;
    font-size: 0.75rem;
    color: #4ade80;
    margin-left: auto;
}
.modal-fusion-inline {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    background: linear-gradient(135deg, rgba(168,85,247,0.08), rgba(139,92,246,0.05));
    border: 1px solid rgba(168,85,247,0.25);
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 800;
    color: #c084fc;
    letter-spacing: 0.5px;
    flex: 1;
}
.modal-fusion-icon {
    font-size: 0.9rem;
    filter: drop-shadow(0 0 4px rgba(168,85,247,0.4));
}
.modal-fusion-boost {
    font-weight: 500;
    font-size: 0.75rem;
    color: #4ade80;
    margin-left: auto;
}
.modal-stat-fusion-preview {
    margin-top: 5px;
    padding: 6px 8px;
    background: linear-gradient(135deg, rgba(168,85,247,0.06), rgba(139,92,246,0.03));
    border: 1px solid rgba(168,85,247,0.15);
    border-radius: 6px;
    position: relative;
}
.stat-fusion-arrow-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    margin-bottom: 4px;
}
.stat-fusion-label {
    color: #a78bfa;
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}
.stat-fusion-next {
    color: #f0e6ff;
    font-weight: 800;
    font-size: 0.88rem;
    margin-left: auto;
    text-shadow: 0 0 8px rgba(168,85,247,0.3);
}
.stat-fusion-diff {
    color: #4ade80;
    font-weight: 800;
    font-size: 0.78rem;
    background: linear-gradient(135deg, rgba(34,197,94,0.15), rgba(34,197,94,0.08));
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px solid rgba(34,197,94,0.25);
    text-shadow: 0 0 6px rgba(34,197,94,0.3);
    animation: fusionDiffGlow 2s ease-in-out infinite;
}
@keyframes fusionDiffGlow {
    0%, 100% { box-shadow: 0 0 4px rgba(34,197,94,0.1); }
    50% { box-shadow: 0 0 10px rgba(34,197,94,0.25); }
}
.stat-bar-fusion {
    height: 4px !important;
    opacity: 0.6;
    border-radius: 2px !important;
}
.bar-fusion-ghost {
    opacity: 0.7;
    animation: fusionBarPulse 2s ease-in-out infinite;
}
@keyframes fusionBarPulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.9; }
}
.modal-power-fusion {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    padding-left: 12px;
    border-left: 2px solid rgba(168,85,247,0.2);
}
.power-fusion-arrow {
    color: #a78bfa;
    font-size: 1rem;
}
.power-fusion-next {
    font-size: 1.3rem;
    font-weight: 900;
    color: #e9d5ff;
    text-shadow: 0 0 12px rgba(168,85,247,0.4);
}
.power-fusion-diff {
    color: #4ade80;
    font-weight: 800;
    font-size: 0.85rem;
    background: linear-gradient(135deg, rgba(34,197,94,0.15), rgba(34,197,94,0.08));
    padding: 3px 10px;
    border-radius: 8px;
    border: 1px solid rgba(34,197,94,0.25);
    text-shadow: 0 0 6px rgba(34,197,94,0.3);
    animation: fusionDiffGlow 2s ease-in-out infinite;
}
.base-stat-hint {
    font-size: 0.65rem;
    color: #9ca3af;
    font-weight: 400;
}
.modal-total-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(15,10,30,0.8), rgba(25,18,50,0.6));
    border: 1px solid rgba(255,255,255,0.08);
}
.modal-total-badge .modal-total-number {
    font-weight: 900;
    line-height: 1;
}
.modal-total-badge .modal-total-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2px;
    opacity: 0.8;
}
.modal-total-badge.total-common .modal-total-number { color: #9ca3af; font-size: 1.6rem; }
.modal-total-badge.total-common .modal-total-label { color: #9ca3af; }
.modal-total-badge.total-uncommon .modal-total-number { color: #4ade80; font-size: 1.7rem; }
.modal-total-badge.total-uncommon .modal-total-label { color: #4ade80; }
.modal-total-badge.total-rare .modal-total-number { color: #60a5fa; font-size: 1.8rem; text-shadow: 0 0 8px rgba(96,165,250,0.4); }
.modal-total-badge.total-rare .modal-total-label { color: #60a5fa; }
.modal-total-badge.total-rare { border-color: rgba(96,165,250,0.2); }
.modal-total-badge.total-epic .modal-total-number { color: #c084fc; font-size: 1.9rem; text-shadow: 0 0 12px rgba(192,132,252,0.5); }
.modal-total-badge.total-epic .modal-total-label { color: #c084fc; }
.modal-total-badge.total-epic { border-color: rgba(192,132,252,0.25); background: rgba(192,132,252,0.05); }
.modal-total-badge.total-legendary .modal-total-number {
    color: #fbbf24;
    font-size: 2.1rem;
    text-shadow: 0 0 14px rgba(251,191,36,0.6), 0 0 28px rgba(251,191,36,0.3);
}
.modal-total-badge.total-legendary .modal-total-label { color: #fbbf24; }
.modal-total-badge.total-legendary { border-color: rgba(251,191,36,0.3); background: rgba(251,191,36,0.06); }
.modal-total-badge.total-mythical .modal-total-number {
    font-size: 2.4rem;
    background: linear-gradient(135deg, #ff6b6b, #ffd700, #ff6b6b);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: mythicalShimmer 2s ease-in-out infinite;
    filter: drop-shadow(0 0 8px rgba(255,107,107,0.6));
}
.modal-total-badge.total-mythical .modal-total-label {
    color: #ff6b6b;
    text-shadow: 0 0 8px rgba(255,107,107,0.4);
}
.modal-total-badge.total-mythical {
    border-color: rgba(255,107,107,0.3);
    background: rgba(255,107,107,0.06);
    box-shadow: 0 0 20px rgba(255,107,107,0.15);
}
.modal-flavor-text {
    text-align: center;
    font-style: italic;
    color: #c4b5e0;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1rem;
    font-weight: 500;
    padding: 6px 16px;
    line-height: 1.6;
    opacity: 0.9;
}
.modal-flavor-text:empty {
    display: none;
}

/* Timer warning animation */
@keyframes timerUrgent {
    0%, 100% { color: #ef4444; }
    50% { color: #fbbf24; text-shadow: 0 0 8px rgba(239, 68, 68, 0.5); }
}

.timer-urgent {
    animation: timerUrgent 0.5s ease-in-out infinite;
}

.nav-user-identity {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 10px;
}
.nav-avatar {
    display: inline-flex;
    align-items: center;
    border-radius: 50%;
    overflow: hidden;
    width: 40px;
    height: 40px;
    border: 2px solid #a78bfa;
    flex-shrink: 0;
    transition: box-shadow 0.3s ease;
}
.rarity-avatar-mythical {
    animation: avatar-mythical-pulse 2s ease-in-out infinite;
}
.rarity-avatar-legendary {
    animation: avatar-legendary-pulse 2.5s ease-in-out infinite;
}
.rarity-avatar-epic {
    animation: avatar-epic-pulse 3s ease-in-out infinite;
}
@keyframes avatar-mythical-pulse {
    0%, 100% { box-shadow: 0 0 8px #ff450080, 0 0 16px #ff450040; }
    50% { box-shadow: 0 0 14px #ff4500b0, 0 0 28px #ff450060, 0 0 4px #ffd70050; }
}
@keyframes avatar-legendary-pulse {
    0%, 100% { box-shadow: 0 0 8px #ffd70080, 0 0 16px #ffd70040; }
    50% { box-shadow: 0 0 12px #ffd700a0, 0 0 24px #ffd70050; }
}
@keyframes avatar-epic-pulse {
    0%, 100% { box-shadow: 0 0 6px #a855f780, 0 0 12px #a855f740; }
    50% { box-shadow: 0 0 10px #a855f790, 0 0 20px #a855f750; }
}
.nav-avatar-media {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.nav-username {
    color: #e2e8f0;
    font-size: 0.9rem;
    font-weight: 500;
    white-space: nowrap;
}

@keyframes vd-shimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}
@keyframes vd-glow-pulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}
@keyframes vd-border-flow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.vd {
    max-width: 1480px;
    margin: 0 auto;
    padding: 0 1.2rem 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
}

.vd-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 16px;
    margin-bottom: 2px;
    background: linear-gradient(135deg, rgba(30,15,60,0.7) 0%, rgba(15,8,35,0.5) 50%, rgba(30,15,60,0.7) 100%);
    border-radius: 12px;
    border: 1px solid rgba(139,92,246,0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 24px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.03);
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
}
.vd-topbar::after {
    content: '';
    position: absolute;
    bottom: 0; left: 10%; right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(168,85,247,0.4), rgba(245,158,11,0.3), rgba(168,85,247,0.4), transparent);
    animation: vd-border-flow 4s ease infinite;
    background-size: 200% 100%;
}
.vd-nav { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.vd-nav-link {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 12px; text-decoration: none;
    color: rgba(180,165,220,0.65); font-size: 0.73rem;
    border-radius: 8px; transition: all 0.2s; white-space: nowrap;
    position: relative;
}
.vd-nav-link em { font-style: normal; font-weight: 600; letter-spacing: 0.02em; }
.vd-nav-link:hover {
    color: #e8d5ff;
    background: linear-gradient(135deg, rgba(139,92,246,0.15), rgba(139,92,246,0.05));
    box-shadow: 0 0 12px rgba(139,92,246,0.1);
}
.vd-nav-link span { font-size: 0.95rem; }
.vd-nav-kingdom { color: #d4a017; }
.vd-nav-kingdom:hover { color: #fde68a; background: linear-gradient(135deg, rgba(250,204,21,0.12), rgba(250,204,21,0.04)); box-shadow: 0 0 12px rgba(250,204,21,0.08); }
.vd-wallet { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.vd-cur {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.78rem; white-space: nowrap;
    padding: 4px 10px; border-radius: 20px;
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.04);
    color: rgba(180,170,210,0.6);
}
.vd-cur img { width: 16px; height: 16px; object-fit: contain; }
.vd-cur b { font-weight: 800; letter-spacing: -0.02em; }
.vd-cur-flames { border-color: rgba(249,115,22,0.12); }
.vd-cur-flames b { color: #fb923c; text-shadow: 0 0 8px rgba(249,115,22,0.3); }
.vd-cur-sparks { border-color: rgba(234,179,8,0.12); }
.vd-cur-sparks b { color: #fbbf24; text-shadow: 0 0 8px rgba(234,179,8,0.3); }
.vd-cur-tickets { border-color: rgba(56,189,248,0.12); }
.vd-cur-tickets b { color: #38bdf8; text-shadow: 0 0 8px rgba(56,189,248,0.3); }
.vd-cur-energy { border-color: rgba(167,139,250,0.12); }
.vd-cur-energy b { color: #a78bfa; text-shadow: 0 0 8px rgba(167,139,250,0.3); }

.vd-kpi-strip {
    display: flex; align-items: stretch; justify-content: center;
    gap: 6px; padding: 14px 16px 10px;
    flex-wrap: wrap;
    position: relative; z-index: 1;
    border-bottom: 1px solid rgba(139,92,246,0.06);
}
.vd-kpi {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center;
    padding: 8px 20px;
    background: rgba(15,8,30,0.5);
    border: 1px solid rgba(139,92,246,0.1);
    border-radius: 10px;
    position: relative;
    min-width: 72px;
    transition: all 0.25s;
}
.vd-kpi:hover {
    border-color: rgba(139,92,246,0.25);
    box-shadow: 0 0 16px rgba(139,92,246,0.08);
    transform: translateY(-1px);
}
.vd-kpi::before {
    content: '';
    position: absolute; top: 0; left: 20%; right: 20%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(168,85,247,0.3), transparent);
}
.vd-kpi-val {
    font-size: 1.3rem; font-weight: 900; line-height: 1.15;
    background: linear-gradient(135deg, #e8d5ff 0%, #c084fc 50%, #f59e0b 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.03em;
}
.vd-kpi-rank .vd-kpi-val {
    background: linear-gradient(135deg, #fde68a, #f59e0b, #d97706);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.vd-kpi-label {
    font-size: 0.52rem; color: rgba(180,160,220,0.4);
    text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700;
    margin-top: 2px;
}

.vd-recent-strip {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 16px; margin-bottom: 12px;
    background: linear-gradient(135deg, rgba(20,10,40,0.6), rgba(10,5,25,0.4));
    border: 1px solid rgba(139,92,246,0.08);
    border-radius: 12px;
    overflow: hidden;
    backdrop-filter: blur(8px);
    position: relative;
}
.vd-recent-strip::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(168,85,247,0.2), rgba(245,158,11,0.15), rgba(168,85,247,0.2), transparent);
}
.vd-recent-label {
    font-size: 0.6rem; font-weight: 800; white-space: nowrap;
    text-transform: uppercase; letter-spacing: 0.12em;
    background: linear-gradient(135deg, #c084fc, #818cf8);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.vd-recent-scroll {
    display: flex; gap: 8px; overflow-x: auto; flex: 1;
    min-width: 0; scrollbar-width: none; padding: 2px 0;
}
.vd-recent-scroll::-webkit-scrollbar { display: none; }
.vd-rp {
    flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
    text-decoration: none; padding: 4px 10px 4px 4px;
    border-radius: 10px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(139,92,246,0.08);
    transition: all 0.25s;
    position: relative;
    overflow: hidden;
}
.vd-rp::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(135deg, transparent 40%, rgba(139,92,246,0.05));
    pointer-events: none;
    opacity: 0; transition: opacity 0.25s;
}
.vd-rp:hover::before { opacity: 1; }
.vd-rp:hover {
    border-color: var(--rc, rgba(139,92,246,0.25));
    box-shadow: 0 0 14px rgba(139,92,246,0.08), 0 0 4px var(--rc, rgba(139,92,246,0.1));
    transform: translateY(-2px);
}
.vd-rp-thumb {
    width: 36px; height: 36px; border-radius: 6px; overflow: hidden;
    position: relative; flex-shrink: 0;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 2px 6px rgba(0,0,0,0.3);
}
.vd-rp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vd-rp-rar {
    position: absolute; bottom: 0; left: 0; right: 0; text-align: center;
    font-size: 0.4rem; font-weight: 800; padding: 1px 2px 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.85)); line-height: 1.5;
    letter-spacing: 0.04em;
}
.vd-rp-lv {
    position: absolute; top: 1px; right: 1px; font-size: 0.4rem;
    font-weight: 800; color: #fbbf24; background: rgba(0,0,0,0.8);
    padding: 0 3px; border-radius: 3px; line-height: 1.4;
}
.vd-rp-name {
    font-size: 0.65rem; font-weight: 600; color: rgba(220,210,240,0.8);
    white-space: nowrap; max-width: 76px; overflow: hidden; text-overflow: ellipsis;
}
.vd-rp-pwr {
    font-size: 0.58rem; color: rgba(251,191,36,0.65); font-weight: 700; white-space: nowrap;
}

.vd-collection-bar {
    display: flex;
    gap: 0;
    align-items: stretch;
}
.vd-collbar-left {
    flex: 0 0 auto;
    padding-right: 20px;
    border-right: 1px solid rgba(139,92,246,0.08);
}
.vd-collbar-left .vd-card-head {
    margin-bottom: 10px; padding-bottom: 8px;
}
.vd-collbar-body {
    display: flex;
    align-items: flex-start;
    gap: 18px;
}
.vd-collbar-right {
    flex: 1;
    padding-left: 20px;
    display: flex;
    flex-direction: column;
}
.vd-collbar-right .vd-card-head {
    margin-bottom: 10px; padding-bottom: 8px;
}
.vd-collbar-right .vm-chests {
    justify-content: flex-start;
}
.vd-collection-bar .vd-card-head::after,
.vd-collection-bar .vd-card-head span {
    position: relative; z-index: 1;
}

.vd-champion-section {
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 0;
    border-radius: 14px;
    background: linear-gradient(165deg, rgba(22,12,45,0.85) 0%, rgba(12,6,28,0.75) 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid transparent;
    background-clip: padding-box;
    box-shadow:
        0 4px 30px rgba(0,0,0,0.4),
        0 0 0 1px rgba(139,92,246,0.08),
        inset 0 1px 0 rgba(255,255,255,0.04),
        inset 0 0 30px rgba(139,92,246,0.03);
    overflow: hidden;
}
.vd-champion-section::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(168,85,247,0.5), rgba(139,92,246,0.3), rgba(245,158,11,0.3), transparent);
    animation: vd-border-flow 6s ease infinite;
    background-size: 200% 100%;
    z-index: 1;
}
.vd-champion-section::after {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(ellipse at top, rgba(139,92,246,0.05) 0%, transparent 60%);
    pointer-events: none;
}

.vd-daily-top {
    position: relative; z-index: 1;
    padding: 0;
}
.vd-daily-top-inner {
    position: relative;
    padding: 0;
    overflow: hidden;
    border-radius: 14px;
    margin: 0 16px 12px;
    border: 1px solid rgba(245,158,11,0.2);
    background: linear-gradient(135deg, rgba(15,8,28,0.95), rgba(30,15,50,0.9));
}
.vd-daily-glow {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(245,158,11,0.12) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 50%, rgba(168,85,247,0.1) 0%, transparent 60%);
    pointer-events: none;
}
.vd-daily-glow::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(245,158,11,0.06) 30%, rgba(168,85,247,0.06) 70%, transparent 100%);
    background-size: 200% 100%;
    animation: vd-daily-sweep 6s ease-in-out infinite;
}
@keyframes vd-daily-sweep {
    0%, 100% { background-position: -100% 0; }
    50% { background-position: 200% 0; }
}
.vd-daily-top-inner::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(245,158,11,0.5), rgba(168,85,247,0.5), transparent);
}
.vd-daily-top-inner::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(245,158,11,0.3), rgba(168,85,247,0.3), transparent);
}
.vd-daily-content {
    display: flex; align-items: center; justify-content: space-between; gap: 20px;
    position: relative; z-index: 1;
    padding: 18px 24px;
}
.vd-daily-info { flex: 1; }
.vd-daily-title {
    font-size: 1.15rem; font-weight: 900; color: #fbbf24;
    font-family: 'Cinzel', serif;
    display: flex; align-items: center; gap: 10px;
    text-shadow: 0 0 20px rgba(245,158,11,0.3);
    letter-spacing: 0.02em;
}
.vd-daily-title span { font-size: 1.3rem; filter: drop-shadow(0 0 6px rgba(245,158,11,0.5)); }
.vd-daily-sub {
    font-size: 0.78rem; color: rgba(232,213,255,0.6); margin-top: 4px;
    letter-spacing: 0.03em;
}
.vd-daily-sub-done { color: rgba(74,222,128,0.8); font-weight: 600; }
.vd-daily-draw-btn {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 32px; border-radius: 12px; border: none;
    background: linear-gradient(135deg, #f59e0b, #d97706, #b45309);
    color: #fff; font-size: 0.95rem; font-weight: 800;
    cursor: pointer; transition: all 0.3s ease;
    box-shadow: 0 2px 16px rgba(245,158,11,0.3), inset 0 1px 0 rgba(255,255,255,0.2);
    white-space: nowrap;
    text-transform: uppercase; letter-spacing: 0.08em;
    position: relative; overflow: hidden;
}
.vd-daily-draw-btn::before {
    content: '';
    position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    animation: vd-btn-shine 3s ease-in-out infinite;
}
@keyframes vd-btn-shine {
    0%, 100% { left: -100%; }
    50% { left: 100%; }
}
.vd-daily-draw-btn:hover {
    background: linear-gradient(135deg, #fbbf24, #f59e0b, #d97706);
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 6px 28px rgba(245,158,11,0.45), inset 0 1px 0 rgba(255,255,255,0.3);
}
.vd-daily-draw-icon { font-size: 1.2rem; animation: vd-daily-icon-pulse 2s ease-in-out infinite; }
@keyframes vd-daily-icon-pulse {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 4px rgba(245,158,11,0.5)); }
    50% { transform: scale(1.15); filter: drop-shadow(0 0 10px rgba(245,158,11,0.8)); }
}
.vd-daily-done .vd-daily-draw-btn { display: none; }
.vd-daily-done .vd-daily-title { color: #c4b5fd; text-shadow: none; }
.vd-daily-done .vd-daily-title span { filter: none; opacity: 0.6; }
.vd-daily-countdown {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 10px 20px; border-radius: 10px;
    background: rgba(139,92,246,0.08);
    border: 1px solid rgba(139,92,246,0.15);
}
.vd-daily-particles {
    position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden;
}
.vd-daily-spark {
    position: absolute; width: 3px; height: 3px; border-radius: 50%;
    background: #fbbf24;
    box-shadow: 0 0 6px rgba(245,158,11,0.6), 0 0 12px rgba(245,158,11,0.3);
    animation: vd-spark-float var(--dur, 3s) ease-in-out var(--del, 0s) infinite;
}
@keyframes vd-spark-float {
    0%, 100% { transform: translate(0, 0) scale(0.6); opacity: 0; }
    20% { opacity: 1; }
    50% { transform: translate(calc(var(--dx, 1) * 30px), calc(var(--dy, -1) * 40px)) scale(1); opacity: 0.8; }
    80% { opacity: 0.3; }
}
.vd-daily-countdown-label { font-size: 0.6rem; color: rgba(200,180,240,0.5); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; }
.vd-daily-countdown-val { font-size: 1rem; font-weight: 800; color: #c4b5fd; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }

.vd-equip-arena {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 28px;
    padding: 10px 0;
    position: relative; z-index: 1;
}
.vd-equip-col {
    display: flex; flex-direction: column; gap: 4px;
    justify-content: flex-start; align-items: center;
    align-self: center;
    padding: 0;
    flex-shrink: 0;
    min-width: 116px;
}
.vd-equip-col .equip-slot-fw {
    width: 110px;
}
.vd-equip-col-btn {
    display: flex; align-items: center; justify-content: center; gap: 5px;
    padding: 5px 14px; border-radius: 8px;
    border: 1px solid rgba(139,92,246,0.18);
    background: rgba(139,92,246,0.08);
    color: #c4b5fd;
    font-size: 0.68rem; font-weight: 700;
    cursor: pointer; text-decoration: none;
    transition: all 0.2s ease;
    width: 110px; box-sizing: border-box;
    margin-bottom: 2px;
    white-space: nowrap;
}
.vd-equip-col-btn:hover {
    background: rgba(139,92,246,0.15);
    border-color: rgba(139,92,246,0.3);
    color: #e8d5ff;
    transform: translateY(-1px);
}
.vd-equip-col-btn-optimize { position: relative; }
.vd-equip-col-btn-spacer { height: 28px; }

.vd-champion-center {
    display: flex; flex-direction: column; align-items: center;
    min-width: 0;
    padding: 0;
    flex-shrink: 0;
}

.vd-equip-totals {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 6px 14px; margin-top: -2px;
    border-radius: 0 0 10px 10px;
    background: linear-gradient(180deg, rgba(139,92,246,0.08), rgba(15,8,30,0.6));
    border: 1px solid rgba(139,92,246,0.1);
    border-top: none;
    width: 100%; box-sizing: border-box;
}
.vd-equip-totals-label {
    font-size: 0.6rem; font-weight: 800; color: #fbbf24;
    font-family: 'Cinzel', serif;
    text-transform: uppercase; letter-spacing: 0.06em;
    white-space: nowrap;
}
.vd-equip-totals-stats {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    justify-content: center;
}
.vd-et-stat {
    font-size: 0.62rem; color: rgba(200,180,240,0.7); white-space: nowrap;
}
.vd-et-atk strong { color: #f87171; }
.vd-et-def strong { color: #60a5fa; }
.vd-et-hp strong { color: #4ade80; }
.vd-et-total {
    font-size: 0.68rem; color: #fbbf24; padding-left: 10px;
    border-left: 1px solid rgba(139,92,246,0.15); white-space: nowrap;
}
.vd-et-total strong { font-weight: 900; }

.vd-card {
    position: relative;
    padding: 18px;
    border-radius: 14px;
    background: linear-gradient(165deg, rgba(22,12,45,0.85) 0%, rgba(12,6,28,0.75) 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid transparent;
    background-clip: padding-box;
    box-shadow:
        0 4px 30px rgba(0,0,0,0.4),
        0 0 0 1px rgba(139,92,246,0.08),
        inset 0 1px 0 rgba(255,255,255,0.04),
        inset 0 0 30px rgba(139,92,246,0.03);
    overflow: hidden;
}
.vd-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(168,85,247,0.5), rgba(139,92,246,0.3), rgba(245,158,11,0.3), transparent);
    animation: vd-border-flow 6s ease infinite;
    background-size: 200% 100%;
}
.vd-card::after {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(ellipse at top, rgba(139,92,246,0.05) 0%, transparent 60%);
    pointer-events: none;
}

.vd-head-link {
    margin-left: auto; font-size: 0.65rem; font-weight: 700;
    color: #fbbf24; text-decoration: none; text-transform: uppercase;
    letter-spacing: 0.06em; transition: all 0.25s;
    background: linear-gradient(135deg, rgba(251,191,36,0.12), rgba(245,158,11,0.08));
    -webkit-text-fill-color: #fbbf24;
    padding: 4px 12px; border-radius: 6px;
    border: 1px solid rgba(251,191,36,0.25);
}
.vd-head-link:hover {
    color: #fde68a; -webkit-text-fill-color: #fde68a;
    background: linear-gradient(135deg, rgba(251,191,36,0.22), rgba(245,158,11,0.15));
    border-color: rgba(251,191,36,0.4);
    box-shadow: 0 0 12px rgba(251,191,36,0.15);
}
.vd-card-head {
    display: flex; align-items: center; gap: 6px;
    font-size: 0.72rem; font-weight: 700;
    margin-bottom: 14px; padding-bottom: 10px;
    text-transform: uppercase; letter-spacing: 0.08em;
    position: relative; z-index: 1;
    border: none;
    color: transparent;
    background: linear-gradient(135deg, #c4b5fd, #a78bfa, #818cf8);
    -webkit-background-clip: text; background-clip: text;
}
.vd-card-head::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, rgba(139,92,246,0.2), rgba(139,92,246,0.05), transparent);
}
.vd-card-head span {
    font-size: 0.9rem;
    -webkit-text-fill-color: initial;
    background: none; -webkit-background-clip: initial; background-clip: initial;
    color: rgba(168,85,247,0.7);
}
.vd-head-badge {
    font-style: normal; margin-left: auto;
    background: linear-gradient(135deg, rgba(139,92,246,0.25), rgba(99,102,241,0.15));
    -webkit-text-fill-color: initial;
    background-clip: initial; -webkit-background-clip: initial;
    color: #c4b5fd;
    padding: 2px 10px; border-radius: 12px;
    font-size: 0.62rem; font-weight: 800;
    border: 1px solid rgba(139,92,246,0.2);
    box-shadow: 0 0 8px rgba(139,92,246,0.1);
}

.vd-coll-ring-row { display: flex; justify-content: center; margin-bottom: 14px; position: relative; z-index: 1; }
.vd-coll-ring {
    position: relative; width: 110px; height: 110px;
    filter: drop-shadow(0 0 12px rgba(139,92,246,0.2)) drop-shadow(0 0 24px rgba(139,92,246,0.08));
}
.vd-coll-ring svg { width: 100%; height: 100%; }
.vd-coll-ring-inner {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.vd-coll-ring-inner strong {
    font-size: 1.3rem; font-weight: 900; line-height: 1;
    background: linear-gradient(135deg, #e8d5ff, #c084fc);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.vd-coll-ring-inner small {
    font-size: 0.58rem; color: rgba(180,160,220,0.45); font-weight: 600;
    margin-top: 2px;
}

.vd-rarity-list { display: flex; flex-direction: column; gap: 6px; position: relative; z-index: 1; }
.vd-rar-row {
    display: grid; grid-template-columns: 10px 72px 1fr 46px;
    align-items: center; gap: 6px;
    padding: 3px 6px;
    border-radius: 6px;
    transition: background 0.2s;
}
.vd-rar-row:hover { background: rgba(139,92,246,0.04); }
.vd-rar-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--c);
    box-shadow: 0 0 6px var(--c), 0 0 12px color-mix(in srgb, var(--c) 30%, transparent);
    animation: vd-glow-pulse 3s ease-in-out infinite;
}
.vd-rar-name {
    font-size: 0.62rem; font-weight: 700; color: rgba(200,180,240,0.55);
    letter-spacing: 0.03em;
}
.vd-rar-bar {
    height: 7px; border-radius: 4px;
    background: rgba(255,255,255,0.03); overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.4);
}
.vd-rar-fill {
    height: 100%; border-radius: 4px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--c) 40%, transparent), var(--c));
    transition: width 0.8s cubic-bezier(0.4,0,0.2,1);
    box-shadow: 0 0 6px color-mix(in srgb, var(--c) 40%, transparent);
    position: relative;
}
.vd-rar-fill::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    background-size: 200% 100%;
    animation: vd-shimmer 3s ease-in-out infinite;
}
.vd-rar-max {
    box-shadow: 0 0 10px var(--c), 0 0 20px color-mix(in srgb, var(--c) 20%, transparent);
}
.vd-rar-ct {
    font-size: 0.6rem; color: rgba(200,180,240,0.4);
    text-align: right; font-weight: 600; font-variant-numeric: tabular-nums;
}

.equip-grid-full {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 8px;
}
.equip-slot-fw {
    display: flex; flex-direction: column; align-items: center;
    padding: 8px 4px; border-radius: 10px;
    background: linear-gradient(145deg, rgba(25,12,50,0.6), rgba(15,8,30,0.4));
    border: 1px solid rgba(139,92,246,0.08);
    transition: all 0.3s cubic-bezier(.4,0,.2,1); cursor: pointer;
    position: relative; overflow: hidden;
}
.equip-slot-fw::after {
    content: ''; position: absolute; inset: 0; border-radius: 10px;
    background: radial-gradient(ellipse at 50% 0%, rgba(139,92,246,0.06), transparent 70%);
    opacity: 0; transition: opacity 0.3s;
    pointer-events: none;
}
.equip-slot-fw:hover::after { opacity: 1; }
.equip-slot-fw:hover {
    border-color: rgba(139,92,246,0.25);
    box-shadow: 0 0 14px rgba(139,92,246,0.08);
    transform: translateY(-2px);
}
.equip-slot-fw-filled {
    border-color: color-mix(in srgb, var(--slot-rc, rgba(139,92,246,1)) 18%, transparent);
}
.equip-slot-fw-filled::after {
    background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--slot-rc, rgba(139,92,246,1)) 8%, transparent), transparent 70%);
}
.equip-slot-fw-filled:hover {
    border-color: color-mix(in srgb, var(--slot-rc, rgba(139,92,246,1)) 40%, transparent);
    box-shadow: 0 0 18px color-mix(in srgb, var(--slot-rc, rgba(139,92,246,1)) 12%, transparent);
}
.eslot-r-common {
    border-color: rgba(156,163,175,0.2);
}
.eslot-r-common:hover { border-color: rgba(156,163,175,0.4); box-shadow: 0 0 10px rgba(156,163,175,0.1); }
.eslot-r-uncommon {
    border-color: rgba(34,197,94,0.25);
    animation: eslotGlowUncommon 3s ease-in-out infinite;
}
.eslot-r-uncommon:hover { border-color: rgba(34,197,94,0.5); box-shadow: 0 0 14px rgba(34,197,94,0.2); }
@keyframes eslotGlowUncommon {
    0%, 100% { box-shadow: 0 0 6px rgba(34,197,94,0.08); }
    50% { box-shadow: 0 0 12px rgba(34,197,94,0.18); }
}
.eslot-r-rare {
    border-color: rgba(59,130,246,0.3);
    animation: eslotGlowRare 2.5s ease-in-out infinite;
}
.eslot-r-rare:hover { border-color: rgba(59,130,246,0.6); box-shadow: 0 0 18px rgba(59,130,246,0.25); }
@keyframes eslotGlowRare {
    0%, 100% { box-shadow: 0 0 8px rgba(59,130,246,0.1); border-color: rgba(59,130,246,0.25); }
    50% { box-shadow: 0 0 16px rgba(59,130,246,0.25); border-color: rgba(59,130,246,0.4); }
}
.eslot-r-epic {
    border-color: rgba(168,85,247,0.35);
    animation: eslotGlowEpic 2.2s ease-in-out infinite;
}
.eslot-r-epic:hover { border-color: rgba(168,85,247,0.65); box-shadow: 0 0 22px rgba(168,85,247,0.3); }
@keyframes eslotGlowEpic {
    0%, 100% { box-shadow: 0 0 8px rgba(168,85,247,0.1), 0 0 2px rgba(168,85,247,0.05) inset; border-color: rgba(168,85,247,0.3); }
    50% { box-shadow: 0 0 18px rgba(168,85,247,0.3), 0 0 4px rgba(168,85,247,0.1) inset; border-color: rgba(168,85,247,0.5); }
}
.eslot-r-legendary {
    border-color: rgba(255,215,0,0.35);
    animation: eslotGlowLegendary 2s ease-in-out infinite;
}
.eslot-r-legendary:hover { border-color: rgba(255,215,0,0.7); box-shadow: 0 0 26px rgba(255,215,0,0.35); }
@keyframes eslotGlowLegendary {
    0%, 100% { box-shadow: 0 0 8px rgba(255,215,0,0.1), 0 0 3px rgba(255,215,0,0.08) inset; border-color: rgba(255,215,0,0.3); }
    33% { box-shadow: 0 0 20px rgba(255,215,0,0.3), 0 0 6px rgba(255,215,0,0.12) inset; border-color: rgba(255,215,0,0.5); }
    66% { box-shadow: 0 0 14px rgba(255,180,0,0.25), 0 0 4px rgba(255,180,0,0.1) inset; border-color: rgba(255,180,0,0.45); }
}
.eslot-r-mythical {
    border-color: rgba(255,69,0,0.4);
    animation: eslotGlowMythical 1.8s ease-in-out infinite;
    border-width: 2px;
}
.eslot-r-mythical:hover { border-color: rgba(255,69,0,0.8); box-shadow: 0 0 30px rgba(255,69,0,0.4), 0 0 8px rgba(255,140,0,0.2) inset; }
@keyframes eslotGlowMythical {
    0%, 100% { box-shadow: 0 0 10px rgba(255,69,0,0.15), 0 0 4px rgba(255,69,0,0.1) inset; border-color: rgba(255,69,0,0.35); }
    25% { box-shadow: 0 0 22px rgba(255,100,0,0.35), 0 0 8px rgba(255,140,0,0.15) inset; border-color: rgba(255,100,0,0.55); }
    50% { box-shadow: 0 0 28px rgba(255,140,0,0.4), 0 0 10px rgba(255,180,0,0.2) inset; border-color: rgba(255,140,0,0.6); }
    75% { box-shadow: 0 0 20px rgba(255,69,0,0.3), 0 0 6px rgba(255,100,0,0.12) inset; border-color: rgba(255,69,0,0.5); }
}
.eslot-fw-type {
    font-size: 0.55rem; font-weight: 600; color: rgba(200,180,240,0.5);
    text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px;
}
.eslot-fw-img {
    width: 100%; aspect-ratio: 1; border-radius: 8px; overflow: hidden;
    position: relative; margin-bottom: 6px;
}
.eslot-fw-img img {
    width: 100%; height: 100%; object-fit: cover; border-radius: 8px;
}
.eslot-fw-lvl {
    position: absolute; bottom: 3px; left: 3px;
    font-size: 0.55rem; font-weight: 700; color: #fff;
    padding: 1px 5px; border-radius: 4px;
}
.eslot-fw-info { text-align: center; width: 100%; }
.eslot-fw-name {
    font-size: 0.65rem; font-weight: 700; color: rgba(255,255,255,0.9);
    line-height: 1.2; margin-bottom: 3px;
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.eslot-ms-stats {
    display: flex; flex-direction: column; gap: 1px; width: 100%;
}
.ms-stat-line {
    display: flex; align-items: baseline; gap: 3px; font-size: 0.55rem;
    font-weight: 600; line-height: 1.3; justify-content: center;
}
.ms-stat-icon { font-size: 0.5rem; flex-shrink: 0; }
.ms-icon-atk { color: #f87171; }
.ms-icon-def { color: #60a5fa; }
.ms-icon-hp { color: #4ade80; }
.ms-stat-total { font-weight: 800; }
.ms-total-atk { color: #f87171; }
.ms-total-def { color: #60a5fa; }
.ms-total-hp { color: #4ade80; }
.ms-stat-breakdown {
    font-size: 0.48rem; color: rgba(255,255,255,0.5); font-weight: 600;
}
.ms-fuse { color: #4ade80; font-weight: 700; }
.ms-pct { color: #fbbf24; font-weight: 700; }
.ms-pct-inline { color: #fbbf24; font-weight: 800; font-size: 0.9em; }
.ms-potential {
    margin-top: 3px; padding-top: 3px;
    border-top: 1px solid rgba(251,191,36,0.15);
    width: 100%;
}
.ms-potential-label {
    font-size: 0.4rem; font-weight: 800; color: rgba(251,191,36,0.6);
    text-transform: uppercase; letter-spacing: 0.08em; text-align: center;
    margin-bottom: 1px;
}
.ms-pot-line {
    font-size: 0.5rem; font-weight: 700; text-align: center; line-height: 1.3;
}
.ms-pot-atk { color: #fbbf24; }
.ms-pot-def { color: #38bdf8; }
.ms-pot-hp { color: #4ade80; }

.eslot-fw-empty {
    width: 100%; aspect-ratio: 1;
    display: flex; align-items: center; justify-content: center;
    border-radius: 8px;
    background: rgba(139,92,246,0.04);
    border: 1px dashed rgba(139,92,246,0.12);
}
.eslot-fw-icon { font-size: 1.4rem; opacity: 0.4; }

.vd-daily-draw-card {
    grid-column: 1 / -1;
    border-top: 1px solid rgba(139,92,246,0.08);
    padding-top: 14px !important;
    margin-top: 14px;
}
.vd-daily-inline {
    border-radius: 10px; overflow: hidden; position: relative;
    background: linear-gradient(135deg, rgba(139,92,246,0.08), rgba(15,8,30,0.3));
}
.vd-daily-inline .daily-draw-bg-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(135deg, rgba(139,92,246,0.12), rgba(15,8,30,0.6));
    z-index: 0;
}
.vd-daily-inline .daily-draw-inner { position: relative; z-index: 1; padding: 16px 20px; }
.vd-daily-inline .daily-draw-header { margin-bottom: 10px; }
.vd-daily-inline .daily-draw-title { font-size: 1rem; margin: 0; }
.vd-daily-inline .daily-draw-subtitle { font-size: 0.7rem; margin: 2px 0 0; }

.vd-listings-card {
    width: 100%;
}

.deck-card-remove {
    position: absolute; top: 2px; right: 2px; z-index: 10;
    width: 20px; height: 20px; border-radius: 50%;
    background: rgba(239,68,68,0.85); color: #fff;
    border: 1px solid rgba(239,68,68,0.5);
    font-size: 0.65rem; font-weight: 700; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; opacity: 0; transition: opacity 0.2s;
}
.deck-card-slot:hover .deck-card-remove { opacity: 1; }
.deck-card-remove:hover { background: rgba(239,68,68,1); transform: scale(1.15); }

@media (max-width: 1100px) {
    .vd-equip-col .equip-slot-fw { width: 90px; }
    .vd-equip-col-btn { width: 90px; font-size: 0.62rem; padding: 4px 8px; }
    .vd-collection-bar { flex-direction: column; }
    .vd-collbar-left { border-right: none; padding-right: 0; border-bottom: 1px solid rgba(139,92,246,0.08); padding-bottom: 14px; margin-bottom: 14px; }
    .vd-collbar-right { padding-left: 0; }
    .deck-card-slot { transform: scale(0.75); margin: 0 -16px; }
    .deck-card-slot:hover { transform: scale(0.82); }
    .deck-slot-empty.deck-slot-lg { transform: scale(0.75); margin: 0 -16px; }
}
@media (max-width: 700px) {
    .vd { padding: 0 0.6rem 2rem; }
    .vd-equip-arena { flex-direction: column; align-items: center; }
    .vd-equip-col { flex-direction: row; flex-wrap: wrap; width: 100%; justify-content: center; padding: 0; gap: 6px; }
    .vd-equip-col .equip-slot-fw { width: 75px; }
    .vd-equip-col-btn { width: auto; order: -1; }
    .vd-equip-col-btn-spacer { display: none; }
    .vd-equip-left { order: 2; padding-top: 10px; }
    .vd-equip-right { order: 3; }
    .vd-champion-center { order: 1; }
    .vd-daily-content { flex-direction: column; text-align: center; gap: 12px; }
    .vd-daily-draw-btn { width: 100%; justify-content: center; }
    .vd-daily-top-inner { margin: 0 8px 10px; border-radius: 10px; }
    .vd-daily-content { padding: 14px 16px; }
    .vd-topbar { padding: 8px 10px; border-radius: 10px; }
    .vd-nav-link { padding: 5px 8px; font-size: 0.68rem; }
    .vd-nav-link span { font-size: 0.85rem; }
    .vd-wallet { gap: 4px; }
    .vd-cur { font-size: 0.7rem; padding: 3px 8px; }
    .vd-kpi-strip { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 8px 8px 6px; }
    .vd-kpi-strip::-webkit-scrollbar { display: none; }
    .vd-kpi { padding: 6px 14px; flex-shrink: 0; min-width: 60px; }
    .vd-kpi-val { font-size: 1rem; }
    .vd-equip-arena { gap: 14px; }
    .vd-recent-strip { padding: 8px 10px; border-radius: 10px; }
    .vd-rp-name { max-width: 60px; }
    .vd-card { padding: 14px; }
    .vd-topbar, .vd-card { backdrop-filter: none; -webkit-backdrop-filter: none; }
    .vd-champion-section { backdrop-filter: none; -webkit-backdrop-filter: none; }
    .vd-collbar-body { flex-direction: column; align-items: center; }
    .deck-card-slot { transform: scale(0.7); margin: 0 -18px; }
    .deck-card-slot:hover { transform: scale(0.76); }
    .deck-slot-empty.deck-slot-lg { transform: scale(0.7); margin: 0 -18px; }
}
@media (prefers-reduced-motion: reduce) {
    .vd-topbar::after, .vd-card::before, .vd-rar-fill::after, .vd-rar-dot { animation: none !important; }
    .vd-rp:hover, .vd-kpi:hover, .equip-slot-fw:hover { transform: none !important; }
}

.vault-dash {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.vault-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: rgba(10,5,20,0.6);
    border: 1px solid rgba(168,85,247,0.12);
    border-radius: 12px;
    padding: 10px 20px;
    backdrop-filter: blur(8px);
    flex-wrap: wrap;
}
.vault-toolbar-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.vt-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    text-decoration: none;
    color: #b0a0c8;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.2s;
    white-space: nowrap;
}
.vt-link:hover {
    color: #e2d5f0;
    background: rgba(124,58,237,0.15);
}
.vt-link span { font-size: 1rem; }
.vt-kingdom { color: #fbbf24; }
.vt-kingdom:hover { background: rgba(250,204,21,0.1); color: #fde68a; }

.vault-toolbar-wallet {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.vt-coin {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    color: #a0a0b0;
    white-space: nowrap;
}
.vt-coin img { width: 18px; height: 18px; object-fit: contain; vertical-align: middle; }
.vt-coin b { font-weight: 800; }
.vt-flames b { color: #f97316; }
.vt-sparks b { color: #facc15; }
.vt-tickets b { color: #38bdf8; }
.vt-energy b { color: #c084fc; }

.vault-main-grid {
    display: grid;
    grid-template-columns: 420px 1fr;
    gap: 24px;
    align-items: start;
}
.vault-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}
.vault-panel {
    background: linear-gradient(160deg, rgba(12,6,24,0.92), rgba(20,10,38,0.75));
    border: 1px solid rgba(168,85,247,0.14);
    border-radius: 16px;
    padding: 22px;
    position: relative;
    overflow: hidden;
}
.vault-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 10%, rgba(168,85,247,0.25) 50%, transparent 90%);
}
.vault-panel-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(168,85,247,0.08);
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    font-weight: 700;
    color: #d4c5e8;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
.vault-panel-header-icon {
    font-size: 1rem;
    color: #c084fc;
}

.vault-collection-compact {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.vault-collection-compact .vault-progress-ring-wrap {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
}
.vault-collection-compact .vault-progress-pct {
    font-size: 0.8rem;
}
.vault-compact-stats {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.vault-compact-fraction {
    font-size: 0.9rem;
    font-weight: 800;
    color: #e2d5f0;
    font-family: 'Cinzel', serif;
}
.vault-rank-inline {
    font-size: 0.7rem;
    color: #fbbf24;
    font-weight: 600;
}
.vault-rarity-compact .vrt-row {
    padding: 2px 0;
}
.vault-rarity-compact .vrt-name {
    font-size: 0.62rem;
    min-width: 28px;
}
.vault-rarity-compact .vrt-bar-bg {
    height: 5px;
}
.vault-rarity-compact .vrt-count {
    font-size: 0.6rem;
}

.mc-champion-column {
    width: 420px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.vault-milestone-sidebar .vm-track-compact .vm-chests {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}
.vault-milestone-sidebar .vm-chest-node {
    flex: 0 0 auto;
}

.vault-equip-section {
    width: 100%;
}
.vault-equip-section .equip-section {
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
}
.vault-equip-section .equip-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0 20px;
    align-items: start;
}
.vault-equip-section .equip-col {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.vault-equip-section .equip-divider {
    width: 1px;
    height: 100%;
    min-height: 80px;
    background: linear-gradient(180deg, transparent, rgba(168,85,247,0.2), transparent);
}
.vault-equip-section .equip-slot {
    flex-direction: column;
    padding: 10px;
}
.vault-equip-section .eslot-img-wrap {
    width: 100%;
    aspect-ratio: 1;
    max-width: 72px;
    margin: 0 auto 6px;
}
.vault-equip-section .eslot-info {
    text-align: center;
}
.vault-equip-section .eslot-name {
    font-size: 0.65rem;
}
.vault-equip-section .eslot-stats-row {
    justify-content: center;
    gap: 4px;
}

.vault-listings-integrated { margin-top: 0; }

.vault-recent-pulls {
    width: 100%;
}
.vault-pulls-grid {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 6px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(168,85,247,0.3) transparent;
}
.vault-pulls-grid::-webkit-scrollbar { height: 4px; }
.vault-pulls-grid::-webkit-scrollbar-track { background: transparent; }
.vault-pulls-grid::-webkit-scrollbar-thumb { background: rgba(168,85,247,0.3); border-radius: 4px; }
.vault-pull-card {
    flex: 0 0 150px;
    scroll-snap-align: start;
    background: linear-gradient(160deg, rgba(12,6,24,0.9), rgba(20,10,38,0.7));
    border: 1px solid rgba(168,85,247,0.12);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    transition: all 0.25s;
    display: flex;
    flex-direction: column;
}
.vault-pull-card:hover {
    border-color: var(--rc, rgba(168,85,247,0.4));
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 12px color-mix(in srgb, var(--rc) 25%, transparent);
}
.vault-pull-img {
    position: relative;
    aspect-ratio: 3/4;
    overflow: hidden;
    background: rgba(0,0,0,0.3);
}
.vault-pull-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.vault-pull-rarity {
    position: absolute;
    top: 6px;
    left: 6px;
    font-size: 0.52rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 6px;
    text-transform: uppercase;
}
.vault-pull-level {
    position: absolute;
    top: 6px;
    right: 6px;
    font-size: 0.58rem;
    font-weight: 700;
    color: #fbbf24;
    background: rgba(0,0,0,0.65);
    padding: 2px 6px;
    border-radius: 6px;
}
.vault-pull-info {
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.vault-pull-name {
    font-size: 0.7rem;
    font-weight: 700;
    color: #d8cce8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vault-pull-power {
    font-size: 0.62rem;
    color: #fbbf24;
    font-weight: 600;
}

.vault-listings-section {
    width: 100%;
}

@media (max-width: 900px) {
    .vault-main-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .mc-champion-column {
        width: 100%;
        max-width: 400px;
        margin: 0 auto;
    }
    .vault-equip-section .equip-col {
        grid-template-columns: repeat(4, 1fr);
    }
}
@media (max-width: 768px) {
    .vault-dash {
        gap: 16px;
        padding: 0 0.75rem;
    }
    .vault-toolbar {
        flex-direction: column;
        align-items: stretch;
        padding: 10px 14px;
    }
    .vault-toolbar-nav {
        justify-content: center;
    }
    .vault-toolbar-wallet {
        justify-content: center;
        gap: 12px;
    }
    .vault-main-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .mc-champion-column {
        max-width: 340px;
        margin: 0 auto;
    }
    .vault-equip-section .equip-grid {
        grid-template-columns: 1fr;
    }
    .vault-equip-section .equip-divider {
        width: 100%;
        height: 1px;
        min-height: 0;
    }
    .vault-pulls-grid {
        gap: 10px;
    }
    .vault-pull-card {
        flex: 0 0 120px;
    }
}

.equip-section {
    background: linear-gradient(135deg, rgba(15,8,30,0.8), rgba(25,12,45,0.6));
    border: 1px solid rgba(168,85,247,0.15);
    border-radius: 12px;
    padding: 14px 16px;
}
.equip-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(168,85,247,0.12);
}
.equip-header-icon {
    font-size: 1rem;
    color: #c084fc;
}
.equip-header-title {
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    font-weight: 700;
    color: #e2d5f0;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.equip-optimize-btn {
    margin-left: auto;
    position: relative;
    background: linear-gradient(135deg, rgba(251,191,36,0.2), rgba(245,158,11,0.15));
    border: 1px solid rgba(251,191,36,0.4);
    color: #fbbf24;
    padding: 0.3rem 0.75rem;
    border-radius: 6px;
    font-size: 0.72rem;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.5px;
    transition: all 0.25s ease;
    white-space: nowrap;
}
.equip-optimize-btn:hover {
    background: linear-gradient(135deg, rgba(251,191,36,0.35), rgba(245,158,11,0.25));
    border-color: #fbbf24;
    color: #fef3c7;
    transform: translateY(-1px);
    box-shadow: 0 3px 12px rgba(251,191,36,0.25);
}
.equip-optimize-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}
.equip-optimize-icon {
    font-size: 0.85rem;
}
.equip-optimize-loading {
    animation: equip-opt-pulse 0.8s ease-in-out infinite;
}
@keyframes equip-opt-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
.equip-optimize-indicator {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ef4444;
    border: 2px solid #1a0a2e;
    animation: equip-new-pulse 1.5s ease-in-out infinite;
    box-shadow: 0 0 6px rgba(239,68,68,0.6);
}
@keyframes equip-new-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 6px rgba(239,68,68,0.6); }
    50% { transform: scale(1.3); box-shadow: 0 0 12px rgba(239,68,68,0.9); }
}
.equip-view-all-btn {
    margin-left: 6px;
    background: linear-gradient(135deg, rgba(167,139,250,0.2), rgba(139,92,246,0.15));
    border: 1px solid rgba(167,139,250,0.35);
    color: #c4b5fd;
    padding: 0.3rem 0.7rem;
    border-radius: 6px;
    font-size: 0.72rem;
    font-family: 'Cinzel', serif;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 0.5px;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.equip-view-all-btn:hover {
    background: linear-gradient(135deg, rgba(167,139,250,0.35), rgba(139,92,246,0.25));
    border-color: #a78bfa;
    color: #e2d9f3;
}
.equip-grid {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.equip-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    flex: 1;
}
.equip-divider {
    width: 1px;
    align-self: stretch;
    background: linear-gradient(to bottom, transparent, rgba(168,85,247,0.25), transparent);
    flex-shrink: 0;
}
.equip-slot {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    max-width: 90px;
    background: rgba(10,5,20,0.6);
    border: 1.5px dashed rgba(168,85,247,0.25);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    padding: 4px 4px 2px;
}
.equip-slot:hover {
    border-color: rgba(168,85,247,0.6);
    background: rgba(168,85,247,0.08);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(168,85,247,0.2);
}
.equip-slot:active { transform: translateY(0); }
.equip-slot-icon {
    font-size: 1.4rem;
    line-height: 1;
    opacity: 0.35;
    transition: opacity 0.25s;
    padding: 12px 0;
}
.equip-slot:hover .equip-slot-icon { opacity: 0.6; }
.equip-slot-label {
    font-size: 0.5rem;
    font-weight: 700;
    color: rgba(255,255,255,0.25);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-bottom: 2px;
}
@media (max-width: 600px) {
    .equip-grid { gap: 6px; }
    .equip-slot { max-width: 70px; }
    .equip-slot-icon { font-size: 1.1rem; }
}
.equip-slot-filled {
    border-style: solid;
    border-width: 2px;
    border-color: var(--slot-rc);
    background: rgba(10,5,20,0.85);
    padding: 3px;
    gap: 0;
    box-shadow: 0 0 8px rgba(0,0,0,0.4);
}
.equip-slot-filled:hover {
    transform: translateY(-2px);
    border-color: var(--slot-rc);
    background: rgba(15,8,28,0.9);
}
.eslot-img-wrap {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 7px;
    overflow: hidden;
    position: relative;
}
.equip-slot-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.eslot-shine { display: none; }
.eslot-info {
    width: 100%;
    padding: 2px 0 1px;
    min-width: 0;
    cursor: pointer;
}
.eslot-name {
    font-family: 'Cinzel', serif;
    font-size: 0.42rem;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    padding: 0 1px;
}
.eslot-level-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    font-size: 0.42rem;
    font-weight: 800;
    padding: 0px 4px;
    border-radius: 4px;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
    z-index: 1;
    line-height: 1.4;
}
.eslot-img-wrap {
    position: relative;
    cursor: pointer;
}
.equip-slot-empty-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    cursor: pointer;
}
.equip-detail-panel {
    position: relative;
    background: linear-gradient(145deg, rgba(15,5,30,0.98), rgba(10,2,20,0.95));
    border: 1px solid rgba(168,85,247,0.3);
    border-radius: 16px;
    padding: 24px 20px;
    max-width: 400px;
    width: 92vw;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 0 40px rgba(168,85,247,0.15), inset 0 0 30px rgba(168,85,247,0.03);
    scrollbar-width: thin;
    scrollbar-color: rgba(139,92,246,0.3) transparent;
}
.equip-detail-panel::-webkit-scrollbar { width: 4px; }
.equip-detail-panel::-webkit-scrollbar-track { background: transparent; }
.equip-detail-panel::-webkit-scrollbar-thumb { background: rgba(139,92,246,0.3); border-radius: 4px; }
.ed-tags {
    display: flex; justify-content: center; gap: 6px; margin-bottom: 8px; flex-wrap: wrap;
}
.ed-tag {
    padding: 3px 12px; border-radius: 8px; font-size: 0.75rem; font-weight: 600;
    border: 1px solid transparent;
}
.ed-desc {
    text-align: center; color: rgba(255,255,255,0.7); font-size: 0.8rem; margin-bottom: 6px; line-height: 1.4;
}
.ed-flavor {
    text-align: center; color: rgba(196,181,253,0.6); font-size: 0.75rem; font-style: italic; margin-bottom: 10px;
}
.ed-stats-grid {
    display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin: 10px 0;
}
.ed-stat {
    text-align: center; border-radius: 10px; padding: 8px 6px;
}
.ed-stat-atk { background: rgba(248,113,113,0.08); border: 1px solid rgba(248,113,113,0.15); }
.ed-ms-stats {
    display: flex; flex-direction: column; gap: 4px;
    background: rgba(0,0,0,0.3); border-radius: 8px; padding: 10px 14px;
    border: 1px solid rgba(139,92,246,0.12); margin: 8px 0;
}
.ed-ms-line {
    display: flex; align-items: baseline; gap: 6px; font-size: 0.82rem;
    font-weight: 600; line-height: 1.4;
}
.ed-ms-label { font-weight: 700; width: 32px; text-align: right; flex-shrink: 0; }
.ed-ms-atk .ed-ms-label { color: #f87171; }
.ed-ms-def .ed-ms-label { color: #60a5fa; }
.ed-ms-hp .ed-ms-label { color: #4ade80; }
.ed-ms-total { font-weight: 800; font-size: 0.95rem; }
.ed-ms-atk .ed-ms-total { color: #f87171; }
.ed-ms-def .ed-ms-total { color: #60a5fa; }
.ed-ms-hp .ed-ms-total { color: #4ade80; }
.ed-ms-breakdown {
    font-size: 0.72rem; color: rgba(255,255,255,0.45); font-weight: 600;
}
.ed-ms-base { color: rgba(255,255,255,0.7); }
.ed-ms-fuse { color: #4ade80; font-weight: 700; }
.ed-ms-pct { color: #fbbf24; font-weight: 700; }
.ed-ms-potential {
    margin-top: 6px; padding: 8px 12px;
    background: rgba(251,191,36,0.06);
    border: 1px solid rgba(251,191,36,0.15);
    border-radius: 8px;
}
.ed-ms-pot-label {
    font-size: 0.55rem; font-weight: 800; color: rgba(251,191,36,0.7);
    text-transform: uppercase; letter-spacing: 0.1em; text-align: center;
    margin-bottom: 4px;
}
.ed-ms-pot-line {
    font-size: 0.78rem; font-weight: 700; text-align: center;
    line-height: 1.5;
}
.ed-ms-pot-atk { color: #fbbf24; }
.ed-ms-pot-def { color: #38bdf8; }
.ed-ms-pot-hp { color: #4ade80; }
.ed-pct-atk { color: #fbbf24; background: rgba(251,191,36,0.15); }
.ed-pct-def { color: #60a5fa; background: rgba(96,165,250,0.15); }
.ed-pct-hp { color: #4ade80; background: rgba(74,222,128,0.15); }
.ed-bonus-list {
    display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 8px 0;
}
.ed-bonus-badge {
    font-size: 0.72rem; font-weight: 700; padding: 3px 10px; border-radius: 8px;
}
.ed-power {
    text-align: center; margin-top: 8px;
    color: #fbbf24; font-weight: 800; font-size: 1.15rem;
    text-shadow: 0 0 12px rgba(251,191,36,0.3);
}
.eslot-stat-row {
    display: flex;
    justify-content: center;
    gap: 2px;
    flex-wrap: wrap;
}
.eslot-s {
    font-size: 0.55rem;
    font-weight: 800;
    font-family: 'Cinzel', serif;
    line-height: 1.3;
    white-space: nowrap;
}
.eslot-s i {
    font-style: italic;
    font-size: 0.42rem;
    opacity: 0.75;
    margin-left: 1px;
}
.eslot-atk { color: #f87171; }
.eslot-def { color: #60a5fa; }
.eslot-hp { color: #4ade80; }
.equip-summary-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    padding: 10px 14px;
    background: linear-gradient(135deg, rgba(10,5,20,0.8), rgba(20,10,35,0.6));
    border: 1px solid rgba(168,85,247,0.15);
    border-radius: 10px;
    flex-wrap: wrap;
    justify-content: center;
}
.equip-summary-power {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 8px;
    border: 1px solid rgba(255,215,0,0.35);
    background: linear-gradient(135deg, rgba(255,215,0,0.12), rgba(255,215,0,0.04));
}
.equip-summary-star {
    color: #ffd700;
    font-size: 1rem;
}
.equip-summary-power-val {
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #fde68a;
    letter-spacing: 0.5px;
}
.equip-summary-power-label {
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(255,215,0,0.5);
    font-weight: 700;
}
.equip-summary-stats {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}
.equip-summary-stat {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 6px;
    font-weight: 700;
    border: 1px solid;
}
.equip-summary-atk {
    border-color: rgba(239,68,68,0.3);
    background: linear-gradient(135deg, rgba(239,68,68,0.1), rgba(239,68,68,0.03));
}
.equip-summary-def {
    border-color: rgba(59,130,246,0.3);
    background: linear-gradient(135deg, rgba(59,130,246,0.1), rgba(59,130,246,0.03));
}
.equip-summary-hp {
    border-color: rgba(34,197,94,0.3);
    background: linear-gradient(135deg, rgba(34,197,94,0.1), rgba(34,197,94,0.03));
}
.equip-summary-stat-val {
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
}
.equip-summary-atk .equip-summary-stat-val { color: #fca5a5; }
.equip-summary-def .equip-summary-stat-val { color: #93c5fd; }
.equip-summary-hp .equip-summary-stat-val { color: #86efac; }
.equip-summary-stat-label {
    font-size: 0.55rem;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    font-weight: 800;
}
.equip-summary-atk .equip-summary-stat-label { color: rgba(239,68,68,0.55); }
.equip-summary-def .equip-summary-stat-label { color: rgba(59,130,246,0.55); }
.equip-summary-hp .equip-summary-stat-label { color: rgba(34,197,94,0.55); }
.equip-summary-pct {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(255,255,255,0.06);
}
.equip-summary-atk .equip-summary-pct { color: #f87171; }
.equip-summary-def .equip-summary-pct { color: #60a5fa; }
.equip-summary-hp .equip-summary-pct { color: #4ade80; }
.eslot-stats-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 2px;
}
.eslot-stat {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.3px;
}
.eslot-stat-atk { color: #f87171; }
.eslot-stat-def { color: #60a5fa; }
.eslot-stat-hp { color: #4ade80; }
.equip-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.75);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.equip-modal {
    background: linear-gradient(135deg, #1a0a2e, #0f051e);
    border: 1px solid rgba(192,132,252,0.3);
    border-radius: 16px;
    width: 94%;
    max-width: 720px;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0,0,0,0.6);
}
.equip-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(192,132,252,0.15);
}
.equip-modal-title {
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    color: #ffd700;
    font-weight: 700;
}
.equip-modal-close {
    background: none;
    border: none;
    color: #a0a0b0;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0 4px;
    line-height: 1;
}
.equip-modal-close:hover {
    color: #ef4444;
}
.equip-modal-body {
    padding: 16px 20px;
    overflow-y: auto;
    max-height: calc(90vh - 70px);
    scrollbar-width: thin;
    scrollbar-color: rgba(139,92,246,0.3) transparent;
}
.equip-modal-body::-webkit-scrollbar { width: 4px; }
.equip-modal-body::-webkit-scrollbar-track { background: transparent; }
.equip-modal-body::-webkit-scrollbar-thumb { background: rgba(139,92,246,0.3); border-radius: 4px; }
.equip-modal-loading, .equip-modal-empty {
    text-align: center;
    color: #a0a0b0;
    padding: 30px 0;
    font-size: 0.85rem;
}
.equip-modal-unequip {
    margin-bottom: 12px;
    text-align: center;
}
.eq-unequip-btn {
    background: rgba(239,68,68,0.15);
    border: 1px solid rgba(239,68,68,0.3);
    color: #ef4444;
    padding: 6px 16px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}
.eq-unequip-btn:hover {
    background: rgba(239,68,68,0.25);
}
.equip-sort-controls {
    display: flex;
    gap: 4px;
}
.equip-sort-btn {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: #a0a0b0;
    padding: 4px 12px;
    border-radius: 6px;
    font-family: 'Cinzel', serif;
    font-size: 0.65rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
}
.equip-sort-btn:hover {
    border-color: rgba(192,132,252,0.3);
    color: #c084fc;
}
.equip-sort-active {
    background: rgba(192,132,252,0.15);
    border-color: rgba(192,132,252,0.4);
    color: #c084fc;
}
.equip-item-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}
.equip-item-card-atc {
    cursor: pointer;
    transition: transform 0.25s;
    position: relative;
    border-radius: 12px;
    overflow: visible;
    display: flex; flex-direction: column; align-items: center;
}
.equip-item-card-atc:hover {
    transform: translateY(-4px) scale(1.02);
}
.equip-item-card-atc.equip-item-active {
    outline: 2px solid #ffd700;
    outline-offset: 2px;
    border-radius: 12px;
}
.equip-equipped-badge {
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    color: #000;
    font-family: 'Cinzel', serif;
    font-size: 0.55rem;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.equip-qty-badge {
    position: absolute;
    top: 6px;
    right: 8px;
    z-index: 5;
    background: rgba(0,0,0,0.7);
    color: #ffd700;
    font-family: 'Cinzel', serif;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 6px;
}
.equip-pct-badges {
    display: flex; flex-direction: column; gap: 2px; align-items: center;
    margin-top: 4px; width: 100%;
}
.equip-pct-badge {
    font-size: 0.58rem; font-weight: 700; padding: 2px 8px; border-radius: 4px;
    text-align: center; width: fit-content;
}
.equip-pct-atk { color: #fbbf24; background: rgba(251,191,36,0.15); }
.equip-pct-def { color: #60a5fa; background: rgba(96,165,250,0.15); }
.equip-pct-hp { color: #4ade80; background: rgba(74,222,128,0.15); }
.equip-boost-badge {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    background: linear-gradient(135deg, rgba(251,191,36,0.9), rgba(245,158,11,0.9));
    color: #1a0a2e;
    font-family: 'Cinzel', serif;
    font-size: 0.5rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 8px;
    white-space: nowrap;
    letter-spacing: 0.3px;
    box-shadow: 0 0 8px rgba(251,191,36,0.4);
}
.equip-item-card {
    background: rgba(26,10,46,0.6);
    border: 1px solid rgba(192,132,252,0.15);
    border-radius: 10px;
    padding: 10px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    position: relative;
}
.equip-item-card:hover {
    border-color: rgba(192,132,252,0.4);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(168,85,247,0.15);
}
.equip-item-active {
    border-color: rgba(255,215,0,0.5);
    background: rgba(255,215,0,0.05);
}
.equip-item-img {
    width: 100%;
    height: 80px;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 6px;
}
.equip-item-name {
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    font-weight: 700;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.equip-item-rarity {
    font-size: 0.6rem;
    font-weight: 600;
    margin-bottom: 4px;
}
.equip-item-stats {
    font-size: 0.6rem;
    font-weight: 600;
    display: flex;
    gap: 4px;
    justify-content: center;
    flex-wrap: wrap;
}
.equip-item-qty {
    position: absolute;
    top: 4px;
    right: 6px;
    font-size: 0.6rem;
    color: #a0a0b0;
    background: rgba(0,0,0,0.5);
    padding: 1px 5px;
    border-radius: 4px;
}
.equip-item-equipped-badge {
    position: absolute;
    top: 4px;
    left: 6px;
    font-size: 0.5rem;
    color: #ffd700;
    background: rgba(0,0,0,0.6);
    padding: 1px 5px;
    border-radius: 3px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.eq-draw-bundles {
    margin-bottom: 1.5rem;
}
.eq-bundle-row {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
.eq-bundle-btn {
    cursor: pointer;
    border: 1px solid rgba(96,165,250,0.25);
    background: linear-gradient(135deg, rgba(26,10,46,0.9), rgba(15,5,30,0.9));
    padding: 18px 24px;
    border-radius: 12px;
    min-width: 140px;
    text-align: center;
    transition: all 0.25s;
    font-family: inherit;
}
.eq-bundle-btn:hover {
    border-color: rgba(96,165,250,0.5);
    transform: translateY(-3px);
    box-shadow: 0 6px 25px rgba(59,130,246,0.15);
}
.eq-bundle-qty {
    font-family: 'Cinzel', serif;
    font-size: 1.3rem;
    color: #60a5fa;
    font-weight: 700;
}
.eq-bundle-label {
    font-size: 0.7rem;
    color: #a0a0b0;
    margin: 4px 0;
}
.eq-bundle-price {
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    font-weight: 700;
}
.eq-bundle-price-cash {
    color: #22c55e;
}
.eq-bundle-price-flames {
    color: #ef4444;
}
.eq-filter-bar {
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 1.2rem;
}
.eq-filter-btn {
    background: rgba(26,10,46,0.6);
    border: 1px solid rgba(192,132,252,0.15);
    color: #a0a0b0;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-family: 'Cinzel', serif;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.eq-filter-btn:hover {
    border-color: rgba(192,132,252,0.4);
    color: #e0d0ff;
}
.eq-filter-active {
    background: rgba(168,85,247,0.2);
    border-color: rgba(168,85,247,0.5);
    color: #e0d0ff;
}
.eq-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
    gap: 12px;
    margin-bottom: 2rem;
}
.eq-gallery-card {
    cursor: pointer;
    transition: transform 0.25s;
    border-radius: 12px;
}
.eq-gallery-card:hover {
    transform: translateY(-4px) scale(1.02);
}
.eq-detail-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.eq-detail-modal {
    background: #0f0a1a;
    border: 1px solid #2d1b4e;
    border-radius: 12px;
    width: auto;
    max-width: min(95vw, 440px);
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    position: relative;
    animation: modalAppear 0.3s ease-out;
    overflow: hidden;
}
.eq-detail-rarity-stripe {
    height: 4px;
    flex-shrink: 0;
    border-radius: 12px 12px 0 0;
}
.eq-detail-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;
    background: rgba(0, 0, 0, 0.7);
    color: #e5e5e5;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.eq-detail-close:hover {
    background: rgba(239, 68, 68, 0.8);
}
.eq-detail-body {
    overflow-y: auto;
    padding: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.eq-detail-body::-webkit-scrollbar {
    display: none;
}
.eq-detail-card {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 16px 16px 0;
    box-sizing: border-box;
}
.eq-detail-card .atc-card {
    width: 100%;
    max-width: 380px;
}
.eq-detail-info {
    padding: 16px 20px 20px;
    text-align: center;
}
.eq-detail-slot-badge {
    font-family: 'Cinzel', serif;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 4px 16px;
    border: 1px solid;
    border-radius: 20px;
    display: inline-block;
    margin-bottom: 10px;
}
.eq-detail-stats {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-bottom: 10px;
}
.eq-detail-stat {
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    font-weight: 700;
}
.eq-detail-desc {
    color: #c0b0d0;
    font-size: 0.8rem;
    line-height: 1.5;
    margin-bottom: 8px;
}
.eq-detail-flavor {
    color: #8a7a9a;
    font-size: 0.75rem;
    font-style: italic;
    line-height: 1.4;
}
@media (max-width: 600px) {
    .eq-gallery-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 8px;
    }
    .eq-detail-modal {
        max-width: 98vw;
    }
}

.mc-showcase {
    position: relative;
    flex-shrink: 0;
    width: 400px;
    background: linear-gradient(145deg, rgba(15,10,40,0.95), rgba(25,15,50,0.9));
    border: 1px solid rgba(167,139,250,0.15);
    border-radius: 18px;
    padding: 0;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    align-self: flex-start;
}
.mc-showcase:hover {
    transform: translateY(-3px);
}
.mc-showcase-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    opacity: 0.12;
    pointer-events: none;
    filter: saturate(0.5) brightness(0.7);
}
.mc-showcase-bg-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(180deg, rgba(15,10,30,0.3) 0%, rgba(15,10,30,0.7) 50%, rgba(15,10,30,0.92) 100%);
    pointer-events: none;
}
.mc-showcase-glow {
    position: absolute;
    inset: -2px;
    border-radius: 20px;
    background: conic-gradient(from 0deg, transparent, var(--mc-clr) 25%, transparent 50%, var(--mc-clr) 75%, transparent);
    opacity: 0.12;
    animation: mc-glow-spin 8s linear infinite;
    z-index: 0;
    pointer-events: none;
}
@keyframes mc-glow-spin {
    to { transform: rotate(360deg); }
}
.rarity-card-mythical .mc-showcase-glow { opacity: 0.25; animation-duration: 4s; }
.rarity-card-legendary .mc-showcase-glow { opacity: 0.2; animation-duration: 5s; }
.rarity-card-epic .mc-showcase-glow { opacity: 0.16; animation-duration: 6s; }
.mc-showcase-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 20px;
    gap: 12px;
}
.mc-champion-label {
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: rgba(167,139,250,0.7);
    text-align: center;
}
.mc-showcase-art {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: 12px;
    overflow: hidden;
    border: 2.5px solid #a78bfa;
    box-shadow: 0 4px 30px rgba(0,0,0,0.5);
    flex-shrink: 0;
}
.rarity-card-mythical .mc-showcase-art { animation: mc-art-mythical 2.5s ease-in-out infinite; }
.rarity-card-legendary .mc-showcase-art { animation: mc-art-legendary 3s ease-in-out infinite; }
.rarity-card-epic .mc-showcase-art { animation: mc-art-epic 3.5s ease-in-out infinite; }
@keyframes mc-art-mythical {
    0%, 100% { box-shadow: 0 4px 30px rgba(255,69,0,0.3), 0 0 50px rgba(255,69,0,0.15); }
    50% { box-shadow: 0 4px 40px rgba(255,69,0,0.5), 0 0 70px rgba(255,69,0,0.25), 0 0 10px rgba(255,215,0,0.15); }
}
@keyframes mc-art-legendary {
    0%, 100% { box-shadow: 0 4px 30px rgba(255,215,0,0.25), 0 0 40px rgba(255,215,0,0.1); }
    50% { box-shadow: 0 4px 35px rgba(255,215,0,0.4), 0 0 55px rgba(255,215,0,0.2); }
}
@keyframes mc-art-epic {
    0%, 100% { box-shadow: 0 4px 25px rgba(168,85,247,0.2), 0 0 35px rgba(168,85,247,0.1); }
    50% { box-shadow: 0 4px 30px rgba(168,85,247,0.35), 0 0 45px rgba(168,85,247,0.18); }
}
.mc-showcase-media {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mc-showcase-level {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.mc-showcase-qty {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #fff;
    background: rgba(0,0,0,0.7);
    backdrop-filter: blur(4px);
}
.mc-showcase-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    text-align: center;
}
.mc-showcase-label {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: #a78bfa;
    font-weight: 600;
    opacity: 0.7;
}
.mc-showcase-name {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    line-height: 1.2;
    text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
.mc-showcase-rarity-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}
.mc-showcase-rarity-badge {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 2px 8px;
    border-radius: 20px;
}
.mc-showcase-level-badge {
    font-size: 0.6rem;
    font-weight: 700;
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.15);
    border: 1px solid rgba(251, 191, 36, 0.4);
    padding: 2px 8px;
    border-radius: 20px;
    letter-spacing: 0.5px;
}
.mc-showcase-pack-name {
    font-size: 0.65rem;
    color: #9ca3af;
    font-style: italic;
}
.mc-showcase-power-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 2px;
    padding: 5px 10px;
    background: rgba(0,0,0,0.3);
    border-radius: 8px;
    border: 1px solid rgba(167,139,250,0.1);
}
.mc-showcase-power-icon {
    font-size: 1rem;
    filter: drop-shadow(0 0 4px rgba(255,215,0,0.4));
}
.mc-showcase-power-val {
    font-size: 1.1rem;
    font-weight: 900;
    letter-spacing: 1px;
}
.mc-showcase-power-label {
    font-size: 0.55rem;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 600;
}
.mc-showcase-stats {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}
.mc-stat-item {
    display: flex;
    align-items: center;
    gap: 6px;
}
.mc-stat-icon {
    font-size: 0.75rem;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}
.mc-stat-bar-wrap {
    flex: 1;
    height: 8px;
    background: rgba(255,255,255,0.06);
    border-radius: 4px;
    overflow: hidden;
    max-width: 160px;
}
.mc-stat-bar {
    height: 100%;
    border-radius: 4px;
    width: var(--stat-pct, 0%);
    transition: width 1s ease;
}
.mc-stat-bar-atk { background: linear-gradient(90deg, #ef4444, #f97316); }
.mc-stat-bar-def { background: linear-gradient(90deg, #3b82f6, #06b6d4); }
.mc-stat-bar-hp { background: linear-gradient(90deg, #22c55e, #84cc16); }
.mc-stat-val {
    font-size: 0.75rem;
    font-weight: 700;
    color: #e2e8f0;
    min-width: 40px;
    text-align: right;
}
.mc-showcase-flavor {
    font-size: 0.65rem;
    color: #9ca3af;
    font-style: italic;
    line-height: 1.3;
    opacity: 0.8;
    max-height: 2.6em;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (max-width: 900px) {
    .vault-overview-with-champion {
        flex-direction: column !important;
        align-items: center;
    }
    .mc-showcase {
        width: 100%;
        max-width: 400px;
        align-self: center;
    }
    .mc-champion-column {
        width: 100%;
        max-width: 400px;
        align-self: center;
    }
}
@media (max-width: 480px) {
    .mc-showcase { max-width: 100%; }
}

.mc-champion-column {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    align-items: stretch;
}
.mc-action-btns {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.mc-download-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.55rem 1rem;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #c4b5fd;
    background: rgba(124, 58, 237, 0.12);
    border: 1px solid rgba(124, 58, 237, 0.3);
    text-decoration: none;
    transition: all 0.2s ease;
    letter-spacing: 0.5px;
}
.mc-download-btn:hover {
    background: rgba(124, 58, 237, 0.25);
    border-color: rgba(168, 85, 247, 0.5);
    color: #e9d5ff;
    transform: translateY(-1px);
}
.mc-share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.55rem 1rem;
    border-radius: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #e2e8f0;
    background: rgba(29, 155, 240, 0.15);
    border: 1px solid rgba(29, 155, 240, 0.35);
    cursor: pointer;
    transition: all 0.2s ease;
    letter-spacing: 0.5px;
}
.mc-share-btn:hover {
    background: rgba(29, 155, 240, 0.3);
    border-color: rgba(29, 155, 240, 0.6);
    color: #fff;
    transform: translateY(-1px);
}
.champion-abilities-panel {
    background: linear-gradient(160deg, rgba(12,4,24,0.9), rgba(22,8,42,0.85));
    border: 1px solid rgba(168,85,247,0.2);
    border-top: none;
    border-radius: 0 0 14px 14px;
    padding: 0.8rem 1rem;
    margin-top: -4px;
    position: relative;
    overflow: hidden;
}
.champion-abilities-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(168,85,247,0.25), transparent);
}
.champion-abilities-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.85rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid rgba(168,85,247,0.12);
    cursor: pointer;
    transition: opacity 0.2s;
}
.champion-abilities-header:hover { opacity: 0.85; }
.cab-panel-chevron {
    margin-left: 6px; font-size: 0.7rem; color: rgba(192,132,252,0.5);
    transition: transform 0.3s ease;
}
.cab-collapsed .cab-panel-chevron { transform: rotate(-90deg); }
.cab-collapsed .champion-abilities-header {
    margin-bottom: 0; padding-bottom: 0; border-bottom: none;
}
.cab-list-collapsible {
    max-height: 600px; overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease;
    opacity: 1;
}
.cab-collapsed .cab-list-collapsible {
    max-height: 0; opacity: 0;
}
.champion-abilities-icon {
    font-size: 1.1rem;
    color: #c084fc;
    filter: drop-shadow(0 0 4px rgba(192,132,252,0.4));
}
.champion-abilities-title {
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    font-weight: 800;
    color: #e8ddf5;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-shadow: 0 0 12px rgba(168,85,247,0.25);
}
.champion-abilities-count {
    margin-left: auto;
    font-size: 0.7rem;
    font-weight: 800;
    color: #c084fc;
    background: rgba(168,85,247,0.12);
    border: 1px solid rgba(168,85,247,0.35);
    border-radius: 50%;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 8px rgba(168,85,247,0.15);
}
.champion-abilities-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.champion-ability-row {
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(18,6,36,0.7), rgba(28,12,48,0.6));
    border: 1px solid rgba(168,85,247,0.1);
    border-left: 3px solid var(--ab-color, #a855f7);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    position: relative;
}
.champion-ability-row::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, color-mix(in srgb, var(--ab-color) 6%, transparent), transparent 60%);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}
.champion-ability-row:hover {
    border-color: color-mix(in srgb, var(--ab-color) 50%, transparent);
    background: linear-gradient(135deg, rgba(22,8,46,0.85), rgba(32,15,56,0.75));
    box-shadow: 0 2px 16px color-mix(in srgb, var(--ab-color) 15%, transparent),
                inset 0 0 20px color-mix(in srgb, var(--ab-color) 5%, transparent);
    transform: translateX(2px);
}
.champion-ability-row:hover::before {
    opacity: 1;
}
.cab-summary {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 0.75rem;
    position: relative;
    z-index: 1;
}
.cab-icon {
    font-size: 1.1rem;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, color-mix(in srgb, var(--ab-color) 18%, transparent), color-mix(in srgb, var(--ab-color) 8%, transparent));
    border: 1px solid color-mix(in srgb, var(--ab-color) 25%, transparent);
    border-radius: 8px;
    flex-shrink: 0;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--ab-color) 12%, transparent);
}
.cab-icon-img {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid color-mix(in srgb, var(--ab-color) 30%, transparent);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--ab-color) 15%, transparent);
}
.cab-name {
    font-family: 'Cinzel', serif;
    font-size: 0.82rem;
    font-weight: 700;
    color: #f0eaf8;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.02em;
}
.cab-chevron {
    font-size: 0.6rem;
    color: #7c6f99;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s;
    flex-shrink: 0;
}
.champion-ability-row:hover .cab-chevron {
    color: #a78bfa;
}
.champion-ability-row.expanded .cab-chevron {
    transform: rotate(180deg);
    color: #c084fc;
}
.cab-details {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), padding 0.4s ease;
    padding: 0 0.75rem;
    position: relative;
    z-index: 1;
}
.champion-ability-row.expanded .cab-details {
    max-height: 250px;
    padding: 0 0.75rem 0.65rem;
}
.cab-desc {
    font-size: 0.75rem;
    color: #b8aed0;
    line-height: 1.5;
    margin: 0 0 0.5rem 0;
    border-top: 1px solid rgba(168,85,247,0.1);
    padding-top: 0.5rem;
}
.cab-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 0.45rem;
}
.cab-tag {
    font-size: 0.6rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    white-space: nowrap;
    letter-spacing: 0.02em;
}
.cab-tag-cd { background: rgba(148,163,184,0.1); color: #94a3b8; border: 1px solid rgba(148,163,184,0.18); }
.cab-tag-enemy { background: rgba(239,68,68,0.1); color: #fca5a5; border: 1px solid rgba(239,68,68,0.18); }
.cab-tag-self { background: rgba(34,211,238,0.1); color: #67e8f9; border: 1px solid rgba(34,211,238,0.18); }
.cab-tag-champ { background: rgba(245,158,11,0.1); color: #fcd34d; border: 1px solid rgba(245,158,11,0.18); }
.cab-effects {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.cab-eff {
    font-size: 0.6rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    white-space: nowrap;
    letter-spacing: 0.02em;
}
.cab-eff-damage, .cab-eff-damage_raw, .cab-eff-aoe_damage { background: rgba(239,68,68,0.1); color: #fca5a5; border: 1px solid rgba(239,68,68,0.18); }
.cab-eff-heal, .cab-eff-champion_heal, .cab-eff-champion_regen { background: rgba(34,197,94,0.1); color: #86efac; border: 1px solid rgba(34,197,94,0.18); }
.cab-eff-shield { background: rgba(34,211,238,0.1); color: #67e8f9; border: 1px solid rgba(34,211,238,0.18); }
.cab-eff-burn, .cab-eff-aoe_burn { background: rgba(249,115,22,0.1); color: #fdba74; border: 1px solid rgba(249,115,22,0.18); }
.cab-eff-poison { background: rgba(132,204,22,0.1); color: #bef264; border: 1px solid rgba(132,204,22,0.18); }
.cab-eff-stun { background: rgba(234,179,8,0.1); color: #fde047; border: 1px solid rgba(234,179,8,0.18); }
.cab-eff-buff_atk, .cab-eff-buff_def { background: rgba(59,130,246,0.1); color: #93c5fd; border: 1px solid rgba(59,130,246,0.18); }
.cab-eff-debuff_atk, .cab-eff-debuff_def { background: rgba(168,85,247,0.1); color: #c4b5fd; border: 1px solid rgba(168,85,247,0.18); }
.cab-eff-lifesteal { background: rgba(236,72,153,0.1); color: #f9a8d4; border: 1px solid rgba(236,72,153,0.18); }
.cab-eff-cleanse { background: rgba(255,255,255,0.06); color: #e2e8f0; border: 1px solid rgba(255,255,255,0.1); }
.cab-eff-champion_strike { background: rgba(245,158,11,0.1); color: #fcd34d; border: 1px solid rgba(245,158,11,0.18); }
.cab-eff-extra_turn { background: rgba(234,179,8,0.1); color: #fde047; border: 1px solid rgba(234,179,8,0.18); }
.cab-eff-misc { background: rgba(148,163,184,0.08); color: #cbd5e1; border: 1px solid rgba(148,163,184,0.12); }
.ab-rarity {
    font-size: 0.58rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 2px 8px;
    border-radius: 5px;
    flex-shrink: 0;
}
.ab-rarity-common { color: #9ca3af; background: rgba(156,163,175,0.1); border: 1px solid rgba(156,163,175,0.2); }
.ab-rarity-uncommon { color: #22c55e; background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.2); }
.ab-rarity-rare { color: #3b82f6; background: rgba(59,130,246,0.1); border: 1px solid rgba(59,130,246,0.2); }
.ab-rarity-epic { color: #a855f7; background: rgba(168,85,247,0.1); border: 1px solid rgba(168,85,247,0.2); }
.ab-rarity-legendary { color: #f59e0b; background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.25); }
.ab-rarity-mythical { color: #ef4444; background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.25); }

.mc-showcase-empty {
    cursor: default;
}
.mc-showcase-empty .atc-back {
    opacity: 0.45;
    filter: saturate(0.5);
    transition: opacity 0.4s ease, filter 0.4s ease;
}
.mc-showcase-empty:hover .atc-back {
    opacity: 0.6;
    filter: saturate(0.7);
}
.mc-empty-prompt {
    text-align: center;
    padding: 0 0.5rem 0.5rem;
}
.mc-empty-title {
    font-family: 'Cinzel', serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: #e2d5f0;
    margin: 0 0 0.4rem;
    letter-spacing: 0.04em;
}
.mc-empty-text {
    font-family: 'Cormorant Garamond', serif;
    font-size: 0.95rem;
    color: #a89cc8;
    margin: 0 0 0.9rem;
    line-height: 1.45;
}
.mc-empty-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
}
.mc-empty-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.5rem 1.2rem;
    border-radius: 8px;
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-decoration: none;
    color: #e2d5f0;
    background: linear-gradient(135deg, rgba(124,58,237,0.3), rgba(99,40,200,0.25));
    border: 1px solid rgba(167,139,250,0.3);
    transition: all 0.25s ease;
}
.mc-empty-btn:hover {
    background: linear-gradient(135deg, rgba(124,58,237,0.5), rgba(99,40,200,0.4));
    border-color: rgba(167,139,250,0.5);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(124,58,237,0.25);
    color: #fff;
}
.mc-empty-btn-primary {
    background: linear-gradient(135deg, rgba(249,115,22,0.35), rgba(234,88,12,0.3));
    border-color: rgba(249,115,22,0.4);
    color: #ffd5a8;
}
.mc-empty-btn-primary:hover {
    background: linear-gradient(135deg, rgba(249,115,22,0.55), rgba(234,88,12,0.45));
    border-color: rgba(249,115,22,0.6);
    box-shadow: 0 4px 14px rgba(249,115,22,0.25);
    color: #fff;
}

.main-card-display {
    text-align: center;
    margin-top: 1rem;
}
.main-card-label {
    color: #a78bfa;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 0.5rem;
}
.main-card-preview {
    display: inline-block;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid #a78bfa;
    box-shadow: 0 0 20px rgba(167, 139, 250, 0.3);
    width: 120px;
}
.main-card-media {
    width: 100%;
    height: 160px;
    object-fit: cover;
    display: block;
}
.main-card-rarity-tag {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding: 2px 8px 4px;
    background: rgba(0,0,0,0.7);
    text-align: center;
}
.rarity-card-mythical .main-card-preview {
    animation: maincard-mythical-glow 2s ease-in-out infinite;
}
.rarity-card-legendary .main-card-preview {
    animation: maincard-legendary-glow 2.5s ease-in-out infinite;
}
.rarity-card-epic .main-card-preview {
    animation: maincard-epic-glow 3s ease-in-out infinite;
}
@keyframes maincard-mythical-glow {
    0%, 100% { box-shadow: 0 0 20px #ff450050, 0 0 40px #ff450025; }
    50% { box-shadow: 0 0 30px #ff450080, 0 0 60px #ff450040, 0 0 8px #ffd70030; }
}
@keyframes maincard-legendary-glow {
    0%, 100% { box-shadow: 0 0 20px #ffd70050, 0 0 40px #ffd70025; }
    50% { box-shadow: 0 0 28px #ffd70070, 0 0 50px #ffd70035; }
}
@keyframes maincard-epic-glow {
    0%, 100% { box-shadow: 0 0 16px #a855f740, 0 0 30px #a855f720; }
    50% { box-shadow: 0 0 22px #a855f760, 0 0 40px #a855f730; }
}
.main-card-name {
    padding: 4px 8px;
    background: rgba(0,0,0,0.7);
    color: #e2e8f0;
    font-size: 0.75rem;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.main-card-form {
    margin-top: 0;
}
.main-card-form + .main-card-form {
    margin-top: 0.4rem;
}
.main-card-picker {
    margin-bottom: 0.5rem;
}
.main-card-picker-label {
    display: block;
    color: #a78bfa;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}
.main-card-picker-select {
    width: 100%;
    padding: 7px 10px;
    background: #1a1a2e;
    color: #e2e8f0;
    border: 1px solid rgba(167, 139, 250, 0.3);
    border-radius: 6px;
    font-size: 0.82rem;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.main-card-picker-select:focus {
    outline: none;
    border-color: #a78bfa;
    box-shadow: 0 0 8px rgba(167, 139, 250, 0.2);
}
.main-card-btn {
    background: linear-gradient(135deg, #1e1145, #2d1b69);
    border: 1px solid rgba(167, 139, 250, 0.3);
    color: #c4b5fd;
    width: 100%;
    padding: 10px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    transition: all 0.2s ease;
    text-align: center;
    display: block;
}
.main-card-btn:hover {
    background: linear-gradient(135deg, #2d1b69, #4c1d95);
    border-color: rgba(167, 139, 250, 0.6);
    box-shadow: 0 0 12px rgba(167, 139, 250, 0.2);
}
.main-card-btn.active {
    background: linear-gradient(135deg, #4c1d95, #6d28d9);
    color: #fbbf24;
    border-color: rgba(251, 191, 36, 0.4);
    font-size: 0.78rem;
}

.arena-main-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 1.2rem;
    text-shadow: 0 0 8px rgba(251, 191, 36, 0.8);
    z-index: 2;
}

.settings-section {
    background: rgba(15, 10, 30, 0.6);
    border: 1px solid #2d1b4e;
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}
.settings-section-title {
    color: #ffd700;
    font-size: 1.15rem;
    margin: 0 0 0.3rem;
}
.settings-section-desc {
    color: #9ca3af;
    font-size: 0.85rem;
    margin: 0 0 1rem;
}
.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}
.settings-grid-3 {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.settings-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.settings-field label {
    color: #c084fc;
    font-size: 0.82rem;
    font-weight: 600;
}
.settings-field input[type="number"] {
    background: #1a1a2e;
    border: 1px solid #2d1b4e;
    color: #e2e8f0;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 0.9rem;
    width: 100%;
    transition: border-color 0.2s;
}
.settings-field input[type="number"]:focus {
    outline: none;
    border-color: #a78bfa;
    box-shadow: 0 0 8px rgba(167, 139, 250, 0.2);
}
.settings-hint {
    color: #6b7280;
    font-size: 0.72rem;
}
.settings-toggles {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.toggle-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    padding: 0.6rem 0.8rem;
    border-radius: 8px;
    background: rgba(30, 17, 69, 0.3);
    border: 1px solid rgba(45, 27, 78, 0.5);
    transition: background 0.2s;
}
.toggle-row:hover {
    background: rgba(30, 17, 69, 0.6);
}
.toggle-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #a78bfa;
    cursor: pointer;
    flex-shrink: 0;
}
.toggle-label {
    color: #e2e8f0;
    font-weight: 600;
    font-size: 0.9rem;
    min-width: 180px;
}
.settings-save-bar {
    padding: 1.5rem 0;
    text-align: center;
}

.admin-asset-media-list {
    max-height: 300px;
    overflow-y: auto;
    background: rgba(10, 5, 20, 0.4);
    border-radius: 8px;
    padding: 0.5rem;
    margin-top: 0.4rem;
}
.admin-asset-media-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 3px 6px;
    border-bottom: 1px solid rgba(45, 27, 78, 0.3);
    flex-wrap: wrap;
}
.admin-asset-media-row:last-child {
    border-bottom: none;
}
.admin-asset-name {
    font-size: 0.78rem;
    font-weight: 600;
    min-width: 100px;
    flex-shrink: 0;
}
.admin-asset-extras {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.admin-extra-tag {
    font-size: 0.65rem;
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 600;
}
.admin-extra-tag.tag-video {
    background: rgba(249, 115, 22, 0.2);
    color: #f97316;
    border: 1px solid rgba(249, 115, 22, 0.3);
}
.admin-extra-tag.tag-image {
    background: rgba(34, 197, 94, 0.2);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

.asset-card-video-locked {
    pointer-events: none;
    filter: brightness(0.55) grayscale(0.3);
}

.mc-modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.92);
    z-index: 10000;
    justify-content: center;
    align-items: center;
    padding: 1rem;
}
.mc-modal-overlay.active {
    display: flex;
}
.mc-modal {
    background: linear-gradient(145deg, #1a0a2e, #0f0a1e);
    border: 1px solid #2d1b4e;
    border-radius: 16px;
    max-width: 520px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 0 60px rgba(124, 58, 237, 0.3), 0 0 120px rgba(124, 58, 237, 0.1);
}
.mc-modal-close {
    position: absolute;
    top: 10px;
    right: 14px;
    background: none;
    border: none;
    color: #9ca3af;
    font-size: 1.8rem;
    cursor: pointer;
    z-index: 2;
    line-height: 1;
    transition: color 0.2s;
}
.mc-modal-close:hover {
    color: #fff;
}
.mc-modal-media {
    width: 100%;
    aspect-ratio: 1/1;
    overflow: hidden;
    border-radius: 16px 16px 0 0;
    background: #0a0510;
}
.mc-modal-video, .mc-modal-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.mc-modal-info {
    padding: 1.2rem 1.5rem 1.5rem;
}
.mc-modal-rarity {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    border: 1px solid;
    display: inline-block;
    padding: 2px 10px;
    border-radius: 4px;
    margin-bottom: 0.4rem;
}
.mc-modal-name {
    font-family: 'Cinzel', serif;
    font-size: 1.5rem;
    margin: 0 0 0.8rem;
    text-shadow: 0 0 12px rgba(167, 139, 250, 0.3);
}
.mc-modal-stats {
    margin-bottom: 1rem;
}
.mc-stat {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.mc-stat-label {
    color: #9ca3af;
    font-size: 0.72rem;
    font-weight: 700;
    width: 32px;
    flex-shrink: 0;
}
.mc-modal-stats .mc-stat-bar {
    flex: 1;
    height: 8px;
    background: rgba(30, 17, 69, 0.6);
    border-radius: 4px;
    overflow: hidden;
    width: auto;
}
.mc-stat-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.6s ease;
}
.mc-modal-stats .mc-stat-val {
    color: #e2e8f0;
    font-size: 0.78rem;
    font-weight: 700;
    width: 28px;
    text-align: right;
    flex-shrink: 0;
}
.mc-total-power {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    padding: 6px 10px;
    background: rgba(124, 58, 237, 0.15);
    border: 1px solid rgba(124, 58, 237, 0.3);
    border-radius: 8px;
    color: #c084fc;
    font-size: 0.78rem;
    font-weight: 700;
}
.mc-power-num {
    color: #ffd700;
    font-size: 1rem;
}
.mc-modal-desc {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.05rem;
    line-height: 1.5;
    color: #c4b5d4;
    background: linear-gradient(135deg, rgba(15, 10, 30, 0.5), rgba(30, 17, 60, 0.3));
    border-left: 3px solid #7c3aed;
    padding: 0.8rem 1rem;
    border-radius: 0 8px 8px 0;
    margin-bottom: 1rem;
}
.mc-modal-pack-link {
    display: inline-block;
    color: #a78bfa;
    font-size: 0.82rem;
    text-decoration: none;
    border: 1px solid rgba(167, 139, 250, 0.3);
    padding: 6px 16px;
    border-radius: 6px;
    transition: all 0.2s;
}
.mc-modal-pack-link:hover {
    background: rgba(167, 139, 250, 0.1);
    border-color: rgba(167, 139, 250, 0.6);
    color: #c4b5fd;
}

.all-collected-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    margin-top: 1.2rem;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, rgba(250, 204, 21, 0.15), rgba(234, 179, 8, 0.08));
    border: 1px solid rgba(250, 204, 21, 0.4);
    border-radius: 12px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}
.all-collected-icon {
    font-size: 1.8rem;
    color: #facc15;
    text-shadow: 0 0 12px rgba(250, 204, 21, 0.5);
}
.all-collected-text {
    font-family: 'Cinzel', serif;
    color: #fde68a;
    font-size: 0.95rem;
    letter-spacing: 0.5px;
}

.pack-opening-container {
    min-height: 100vh;
    position: relative;
}

.opening-video-bg {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 8999;
    background: #000;
    overflow: hidden;
}
.opening-video-fullscreen {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #000;
}
.video-darken-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.35);
    pointer-events: none;
}
.opening-video-bg.video-fade-out {
    animation: videoFadeAway 1.5s ease forwards;
}
@keyframes videoFadeAway {
    0% { opacity: 1; }
    100% { opacity: 0; pointer-events: none; }
}

.opening-tap-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 9001;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.6s ease;
}
.opening-tap-overlay.tap-fade {
    opacity: 0;
    pointer-events: none;
}
.tap-prompt {
    text-align: center;
    animation: tapFloat 3s ease-in-out infinite;
}
@keyframes tapFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
.tap-pack-name {
    font-family: 'Cinzel', serif;
    font-size: 2.2rem;
    color: #e2e8f0;
    margin-bottom: 1.5rem;
    text-shadow: 0 0 30px rgba(124, 58, 237, 0.6), 0 2px 12px rgba(0,0,0,0.8);
    letter-spacing: 2px;
}
.tap-icon {
    font-size: 4rem;
    color: #7c3aed;
    text-shadow: 0 0 30px rgba(124, 58, 237, 0.8);
    margin-bottom: 1.5rem;
    animation: tapIconPulse 2s ease-in-out infinite;
}
@keyframes tapIconPulse {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.15); opacity: 1; }
}
.tap-text {
    font-family: 'Cinzel', serif;
    font-size: 1.3rem;
    color: #a78bfa;
    text-shadow: 0 0 15px rgba(124, 58, 237, 0.5);
    letter-spacing: 3px;
    text-transform: uppercase;
}
.tap-text.pulse {
    animation: hintPulse 2s ease-in-out infinite;
}
@keyframes hintPulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
}

.reveal-phase {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    padding: 2rem 1rem;
    text-align: center;
    pointer-events: none;
}
.reveal-phase.reveal-active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.reveal-phase.reveal-over-video {
    position: relative;
    z-index: 9000;
}
.reveal-progress-bar {
    width: 260px;
    height: 4px;
    background: rgba(255,255,255,0.1);
    border-radius: 2px;
    margin: 0.4rem auto 0.9rem;
    overflow: hidden;
}
.reveal-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #7c3aed, #ffd700);
    border-radius: 2px;
    transition: width 0.2s ease;
}
.reveal-counter {
    font-family: 'Cinzel', serif;
    font-size: 0.8rem;
    color: #a78bfa;
    letter-spacing: 2px;
    margin-bottom: 1rem;
    min-height: 1.2em;
}
.tap-loading-dot {
    display: inline-block;
    animation: tapDotPulse 1s ease-in-out infinite;
}
.tap-loading-dot:nth-child(2) { animation-delay: 0.2s; }
.tap-loading-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes tapDotPulse {
    0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
    40% { opacity: 1; transform: scale(1.2); }
}

.reveal-title {
    font-family: 'Cinzel', serif;
    font-size: 2rem;
    color: #e2e8f0;
    margin: 0 0 0.3rem;
    text-shadow: 0 0 20px rgba(124, 58, 237, 0.4), 0 2px 8px rgba(0,0,0,0.6);
}
.reveal-subtitle {
    color: #a78bfa;
    font-size: 1rem;
    margin: 0 0 2rem;
    text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}

.reveal-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.2rem;
    max-width: 1100px;
    margin: 0 auto 2rem;
    perspective: 1200px;
}

.reveal-card {
    width: 200px;
    height: 420px;
    perspective: 800px;
    cursor: default;
    position: relative;
    overflow: visible;
    justify-self: center;
}
.reveal-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    transform: rotateY(180deg);
}
.reveal-card.flipped .reveal-card-inner {
    transform: rotateY(0deg);
}

.reveal-card-back, .reveal-card-front {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 12px;
    overflow: visible;
}
.reveal-card-back {
    transform: rotateY(180deg);
    background: transparent;
    border: none;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    overflow: visible;
}
.reveal-card-back .atc-back,
.reveal-card-back .atc-back-frame {
    width: 100% !important;
    height: 100% !important;
}

.reveal-card-front {
    background: transparent;
    border: none;
    display: flex;
    flex-direction: column;
    overflow: visible;
}
.reveal-card-front .atc {
    width: 100% !important;
    height: 100% !important;
}
.reveal-rarity-glow {
    display: none;
}

/* ========== EPIC RARITY ========== */
.reveal-card.rarity-epic .reveal-rarity-glow {
    display: block;
    position: absolute;
    inset: -35px;
    border-radius: 26px;
    z-index: -1;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.95) 0%, rgba(139, 92, 246, 0.6) 35%, rgba(109, 40, 217, 0.25) 65%, transparent 85%);
    opacity: 0;
    filter: blur(18px);
    animation: epicGlow 2s ease-out forwards;
}
.reveal-card.rarity-epic .reveal-card-front .atc-frame {
    border-color: #a855f7;
    box-shadow:
        0 0 25px rgba(168, 85, 247, 0.7),
        0 0 50px rgba(168, 85, 247, 0.4),
        0 0 80px rgba(139, 92, 246, 0.3);
    animation: epicPulseGlow 2s ease-in-out infinite;
}
.reveal-card.flipped.rarity-epic {
    animation: epicEntrance 0.8s ease-out 0.15s, epicFloat 3s ease-in-out 1s infinite;
}
@keyframes epicGlow {
    0% { opacity: 0; transform: scale(0.5); }
    30% { opacity: 1; transform: scale(1.15); }
    60% { opacity: 0.85; transform: scale(1.05); }
    100% { opacity: 0.7; transform: scale(1); }
}
@keyframes epicEntrance {
    0% { transform: scale(0.85); filter: brightness(3); }
    30% { transform: scale(1.12); filter: brightness(2); }
    60% { transform: scale(1.03); filter: brightness(1.3); }
    100% { transform: scale(1); filter: brightness(1); }
}
@keyframes epicFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-4px) scale(1.02); }
}
@keyframes epicPulseGlow {
    0%, 100% { box-shadow: 0 0 25px rgba(168, 85, 247, 0.7), 0 0 50px rgba(168, 85, 247, 0.4), 0 0 80px rgba(139, 92, 246, 0.3); }
    50% { box-shadow: 0 0 35px rgba(168, 85, 247, 0.9), 0 0 70px rgba(168, 85, 247, 0.6), 0 0 110px rgba(139, 92, 246, 0.45); }
}

/* ========== LEGENDARY RARITY ========== */
.reveal-card.rarity-legendary .reveal-rarity-glow {
    display: block;
    position: absolute;
    inset: -55px;
    border-radius: 32px;
    z-index: -1;
    background: radial-gradient(circle, rgba(251, 191, 36, 1) 0%, rgba(245, 158, 11, 0.7) 30%, rgba(217, 119, 6, 0.35) 55%, transparent 80%);
    opacity: 0;
    filter: blur(20px);
    animation: legendaryGlow 2.5s ease-out forwards, legendaryGlowPulse 2s ease-in-out 2.5s infinite;
}
.reveal-card.rarity-legendary .reveal-card-front .atc-frame {
    border-color: #fbbf24;
    box-shadow:
        0 0 30px rgba(251, 191, 36, 0.8),
        0 0 60px rgba(251, 191, 36, 0.5),
        0 0 100px rgba(245, 158, 11, 0.35),
        0 0 140px rgba(217, 119, 6, 0.15);
    animation: legendaryPulseGlow 1.8s ease-in-out infinite;
}
.reveal-card.flipped.rarity-legendary {
    animation: legendaryEntrance 1.1s ease-out 0.15s, legendaryFloat 2.5s ease-in-out 1.2s infinite;
}
.reveal-card.rarity-legendary .reveal-card-name {
    color: #fde68a;
    text-shadow: 0 0 8px rgba(251, 191, 36, 0.6);
}
.reveal-card.rarity-legendary .reveal-card-rarity {
    text-shadow: 0 0 10px rgba(251, 191, 36, 0.8);
}
@keyframes legendaryGlow {
    0% { opacity: 0; transform: scale(0.3); }
    25% { opacity: 1; transform: scale(1.3); }
    50% { opacity: 0.95; transform: scale(1.1); }
    100% { opacity: 0.8; transform: scale(1); }
}
@keyframes legendaryGlowPulse {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50% { opacity: 0.95; transform: scale(1.08); }
}
@keyframes legendaryEntrance {
    0% { transform: scale(0.6) rotate(0deg); filter: brightness(5); }
    20% { transform: scale(1.2) rotate(-3deg); filter: brightness(3); }
    40% { transform: scale(1.08) rotate(2deg); filter: brightness(2); }
    60% { transform: scale(1.1) rotate(-1deg); filter: brightness(1.4); }
    80% { transform: scale(1.03) rotate(0.5deg); filter: brightness(1.15); }
    100% { transform: scale(1) rotate(0deg); filter: brightness(1); }
}
@keyframes legendaryFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-6px) scale(1.03); }
}
@keyframes legendaryPulseGlow {
    0%, 100% {
        box-shadow: 0 0 30px rgba(251, 191, 36, 0.8), 0 0 60px rgba(251, 191, 36, 0.5), 0 0 100px rgba(245, 158, 11, 0.35), 0 0 140px rgba(217, 119, 6, 0.15);
    }
    50% {
        box-shadow: 0 0 45px rgba(251, 191, 36, 1), 0 0 90px rgba(251, 191, 36, 0.7), 0 0 140px rgba(245, 158, 11, 0.5), 0 0 190px rgba(217, 119, 6, 0.25);
    }
}

/* ========== MYTHICAL RARITY ========== */
.reveal-card.rarity-mythical .reveal-rarity-glow {
    display: block;
    position: absolute;
    inset: -75px;
    border-radius: 42px;
    z-index: -1;
    background: radial-gradient(circle, rgba(255, 0, 128, 1) 0%, rgba(121, 40, 202, 0.8) 25%, rgba(0, 212, 255, 0.55) 50%, rgba(255, 0, 128, 0.25) 70%, transparent 90%);
    opacity: 0;
    filter: blur(22px);
    animation: mythicalGlow 3s ease-out forwards, mythicalGlowPulse 1.8s ease-in-out 3s infinite;
}
.reveal-card.rarity-mythical .reveal-card-front .atc-frame {
    border-color: #ff0080;
    box-shadow:
        0 0 40px rgba(255, 0, 128, 0.8),
        0 0 80px rgba(121, 40, 202, 0.5),
        0 0 130px rgba(0, 212, 255, 0.4),
        0 0 200px rgba(255, 0, 128, 0.25);
    animation: mythicalPulseGlow 1.5s ease-in-out infinite, mythicalBorderColor 2s linear infinite;
}
.reveal-card.flipped.rarity-mythical {
    animation: mythicalEntrance 1.4s ease-out 0.1s, mythicalFloat 2s ease-in-out 1.5s infinite;
}
.reveal-card.rarity-mythical .reveal-card-inner {
    position: relative;
}
.reveal-card.rarity-mythical .reveal-card-info {
    background: linear-gradient(180deg, rgba(30, 5, 40, 0.9), rgba(20, 0, 30, 0.95));
}
.reveal-card.rarity-mythical .reveal-card-name {
    background: linear-gradient(90deg, #ff0080, #ff6ec7, #7928ca, #00d4ff, #00ff88, #ff0080);
    background-size: 300% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: mythicalTextShift 2s linear infinite;
    font-weight: 800;
    font-size: 0.9rem;
}
.reveal-card.rarity-mythical .reveal-card-rarity {
    text-shadow: 0 0 12px rgba(255, 0, 128, 0.8), 0 0 25px rgba(0, 212, 255, 0.6);
}
@keyframes mythicalGlow {
    0% { opacity: 0; transform: scale(0.2); }
    15% { opacity: 1; transform: scale(1.5); }
    30% { opacity: 0.95; transform: scale(1.2); }
    50% { opacity: 0.9; transform: scale(1.1); }
    100% { opacity: 0.85; transform: scale(1); }
}
@keyframes mythicalGlowPulse {
    0%, 100% { opacity: 0.75; transform: scale(1); filter: blur(22px); }
    50% { opacity: 1; transform: scale(1.12); filter: blur(18px); }
}
@keyframes mythicalEntrance {
    0% { transform: scale(0.3) rotate(0deg); filter: brightness(8) saturate(3); }
    10% { transform: scale(1.35) rotate(-8deg); filter: brightness(5) saturate(2.5); }
    25% { transform: scale(1.15) rotate(6deg); filter: brightness(3) saturate(2); }
    40% { transform: scale(1.2) rotate(-4deg); filter: brightness(2) saturate(1.5); }
    60% { transform: scale(1.1) rotate(2deg); filter: brightness(1.5) saturate(1.2); }
    80% { transform: scale(1.03) rotate(-1deg); filter: brightness(1.2); }
    100% { transform: scale(1) rotate(0deg); filter: brightness(1); }
}
@keyframes mythicalFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-8px) scale(1.04); }
}
@keyframes mythicalBorderColor {
    0% { border-color: #ff0080; }
    33% { border-color: #7928ca; }
    66% { border-color: #00d4ff; }
    100% { border-color: #ff0080; }
}
@keyframes mythicalPulseGlow {
    0%, 100% {
        box-shadow: 0 0 40px rgba(255, 0, 128, 0.8), 0 0 80px rgba(121, 40, 202, 0.5), 0 0 130px rgba(0, 212, 255, 0.4), 0 0 200px rgba(255, 0, 128, 0.25);
    }
    50% {
        box-shadow: 0 0 60px rgba(255, 0, 128, 1), 0 0 120px rgba(121, 40, 202, 0.7), 0 0 190px rgba(0, 212, 255, 0.6), 0 0 270px rgba(255, 0, 128, 0.4);
    }
}
@keyframes mythicalTextShift {
    0% { background-position: 0% center; }
    100% { background-position: 300% center; }
}

/* ========== RARITY BANNER ========== */
.rarity-banner {
    position: absolute;
    top: -32px;
    left: 50%;
    transform: translateX(-50%) scale(0);
    z-index: 20;
    padding: 4px 14px;
    border-radius: 6px;
    font-family: 'Cinzel', serif;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
    animation: bannerAppear 0.5s ease-out 0.4s forwards;
}
.rarity-banner.banner-epic {
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    color: #f3e8ff;
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.6), 0 2px 8px rgba(0,0,0,0.5);
    text-shadow: 0 0 6px rgba(168, 85, 247, 0.8);
}
.rarity-banner.banner-legendary {
    background: linear-gradient(135deg, #d97706, #fbbf24);
    color: #451a03;
    box-shadow: 0 0 20px rgba(251, 191, 36, 0.7), 0 2px 8px rgba(0,0,0,0.5);
    text-shadow: 0 0 4px rgba(251, 191, 36, 0.4);
    animation: bannerAppear 0.5s ease-out 0.4s forwards, bannerGoldShine 3s ease-in-out 1s infinite;
}
.rarity-banner.banner-mythical {
    background: linear-gradient(90deg, #ff0080, #7928ca, #00d4ff, #ff0080);
    background-size: 300% 100%;
    color: #fff;
    box-shadow: 0 0 25px rgba(255, 0, 128, 0.7), 0 0 40px rgba(0, 212, 255, 0.4), 0 2px 8px rgba(0,0,0,0.5);
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
    animation: bannerAppear 0.5s ease-out 0.4s forwards, bannerRainbow 2s linear 1s infinite;
}
@keyframes bannerAppear {
    0% { transform: translateX(-50%) scale(0) translateY(10px); opacity: 0; }
    60% { transform: translateX(-50%) scale(1.15) translateY(-3px); opacity: 1; }
    100% { transform: translateX(-50%) scale(1) translateY(0); opacity: 1; }
}
@keyframes bannerGoldShine {
    0%, 100% { box-shadow: 0 0 20px rgba(251, 191, 36, 0.7), 0 2px 8px rgba(0,0,0,0.5); }
    50% { box-shadow: 0 0 30px rgba(251, 191, 36, 1), 0 0 50px rgba(251, 191, 36, 0.4), 0 2px 8px rgba(0,0,0,0.5); }
}
@keyframes bannerRainbow {
    0% { background-position: 0% center; }
    100% { background-position: 300% center; }
}

/* ========== PARTICLES ========== */
.rarity-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 10;
    overflow: visible;
}
.rarity-particle {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    animation: particleFloat var(--dur) ease-out forwards;
}
@keyframes particleFloat {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    60% { opacity: 0.8; }
    100% { transform: translate(var(--tx), var(--ty)) scale(0); opacity: 0; }
}

/* ========== SCREEN FLASH ========== */
.rarity-flash-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
}
.rarity-flash-overlay.flash-epic {
    background: radial-gradient(circle at 50% 50%, rgba(168, 85, 247, 0.9) 0%, rgba(139, 92, 246, 0.5) 40%, transparent 75%);
    animation: flashBurstEpic 0.7s ease-out forwards;
}
.rarity-flash-overlay.flash-legendary {
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.9) 0%, rgba(251, 191, 36, 0.8) 25%, rgba(245, 158, 11, 0.4) 50%, transparent 80%);
    animation: flashBurstLeg 1s ease-out forwards;
}
.rarity-flash-overlay.flash-mythical {
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 1) 0%, rgba(255, 0, 128, 0.8) 20%, rgba(121, 40, 202, 0.6) 40%, rgba(0, 212, 255, 0.4) 60%, transparent 85%);
    animation: flashBurstMythical 1.5s ease-out forwards;
}
@keyframes flashBurstEpic {
    0% { opacity: 1; transform: scale(0.3); }
    20% { opacity: 0.9; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.5); }
}
@keyframes flashBurstLeg {
    0% { opacity: 1; transform: scale(0.2); }
    15% { opacity: 1; transform: scale(1); }
    40% { opacity: 0.7; transform: scale(1.1); }
    100% { opacity: 0; transform: scale(1.3); }
}
@keyframes flashBurstMythical {
    0% { opacity: 1; transform: scale(0.1); }
    10% { opacity: 1; transform: scale(0.8); }
    20% { opacity: 1; transform: scale(1); }
    30% { opacity: 0.9; transform: scale(1.05); }
    50% { opacity: 0.6; transform: scale(1.1); }
    100% { opacity: 0; transform: scale(1.4); }
}

/* ========== LIGHT RAYS (behind card) ========== */
.rarity-rays {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    z-index: 12;
    pointer-events: none;
    mix-blend-mode: screen;
}
.rarity-ray {
    position: absolute;
    top: 0;
    left: -2px;
    transform-origin: center top;
    opacity: 0;
}
.rarity-ray.ray-active {
    animation: rayShoot var(--ray-dur, 1.5s) ease-out forwards;
}
@keyframes rayShoot {
    0% { opacity: 0; transform: rotate(var(--ray-angle)) scaleY(0); }
    15% { opacity: 1; transform: rotate(var(--ray-angle)) scaleY(1); }
    100% { opacity: 0; transform: rotate(var(--ray-angle)) scaleY(1.2); }
}

/* ========== LIGHTNING ========== */
.mythical-lightning {
    position: absolute;
    pointer-events: none;
    z-index: 11;
    opacity: 0;
}
.mythical-lightning.bolt-active {
    animation: lightningStrike 0.4s ease-out forwards;
}
@keyframes lightningStrike {
    0% { opacity: 0; filter: blur(0px); }
    10% { opacity: 1; filter: blur(0px); }
    40% { opacity: 1; filter: blur(1px); }
    100% { opacity: 0; filter: blur(3px); }
}

/* ========== SCREEN SHAKE ========== */
@keyframes screenShake {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-6px, 4px); }
    20% { transform: translate(6px, -4px); }
    30% { transform: translate(-4px, -6px); }
    40% { transform: translate(4px, 6px); }
    50% { transform: translate(-3px, 3px); }
    60% { transform: translate(3px, -3px); }
    70% { transform: translate(-2px, 2px); }
    80% { transform: translate(2px, -2px); }
    90% { transform: translate(-1px, 1px); }
}
.screen-shake {
    animation: screenShake 0.6s ease-out;
}

.reveal-card-media {
    flex: 1;
    overflow: hidden;
    position: relative;
}
.reveal-card-media img, .reveal-card-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.reveal-card-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    color: #4a4a5a;
    background: rgba(10, 5, 20, 0.6);
}

.reveal-card-info {
    padding: 0.5rem 0.6rem;
    text-align: center;
    background: rgba(10, 5, 20, 0.8);
}
.reveal-card-name {
    font-family: 'Cinzel', serif;
    font-size: 0.82rem;
    color: #e2e8f0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}
.reveal-card-rarity {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.reveal-card-pack {
    font-size: 0.6rem;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.reveal-card-power-badge {
    font-size: 0.7rem;
    color: #c084fc;
    font-weight: 700;
    margin: 2px 0;
}
.reveal-card.flipped {
    cursor: pointer;
}

.reveal-new-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 15;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    padding: 3px 10px;
    border-radius: 4px;
    text-transform: uppercase;
    box-shadow: 0 0 12px rgba(34,197,94,0.6), 0 2px 6px rgba(0,0,0,0.4);
    animation: newBadgePulse 1.5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes newBadgePulse {
    0%, 100% { box-shadow: 0 0 12px rgba(34,197,94,0.6), 0 2px 6px rgba(0,0,0,0.4); transform: scale(1); }
    50% { box-shadow: 0 0 20px rgba(34,197,94,0.9), 0 2px 8px rgba(0,0,0,0.5); transform: scale(1.05); }
}

.reveal-modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.88);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.reveal-modal-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    max-height: 90vh;
    overflow-y: auto;
    padding: 0.25rem 0.5rem 1rem;
}
.reveal-modal-topbar {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}
.reveal-modal-close {
    background: rgba(20,12,40,0.95);
    border: 1px solid rgba(168, 85, 247, 0.4);
    border-radius: 50%;
    width: 34px;
    height: 34px;
    color: #ccc;
    font-size: 1.3rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: color 0.2s, border-color 0.2s;
}
.reveal-modal-close:hover {
    color: #fff;
    border-color: rgba(168, 85, 247, 0.8);
}
.reveal-modal-desc-text {
    max-width: 360px;
    width: 100%;
    font-size: 0.85rem;
    color: #b0b0c0;
    line-height: 1.5;
    text-align: center;
    background: rgba(0,0,0,0.35);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(168, 85, 247, 0.15);
}

.reveal-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.5s, transform 0.5s;
}
.reveal-actions.actions-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 600px) {
    .reveal-card {
        width: 140px;
        height: 210px;
    }
    .reveal-title {
        font-size: 1.5rem;
    }
    .tap-pack-name {
        font-size: 1.5rem;
    }
    .tap-icon {
        font-size: 3rem;
    }
}

.marketplace-coming-soon {
    text-align: center;
    padding: 4rem 2rem;
    max-width: 600px;
    margin: 2rem auto;
}
.coming-soon-icon {
    font-size: 5rem;
    margin-bottom: 1rem;
    filter: drop-shadow(0 0 20px rgba(255, 140, 0, 0.5));
}
.marketplace-coming-soon h1 {
    font-size: 2.5rem;
    color: #f5c542;
    margin-bottom: 0.5rem;
}
.coming-soon-subtitle {
    color: #aaa;
    font-size: 1.1rem;
    margin-bottom: 1.5rem;
}
.coming-soon-badge {
    display: inline-block;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #1a1a2e;
    font-weight: 700;
    padding: 0.5rem 2rem;
    border-radius: 2rem;
    font-size: 1.2rem;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 2px;
}
.coming-soon-desc {
    color: #bbb;
    line-height: 1.6;
    margin-bottom: 2rem;
}
.coming-soon-features {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
}
.csf-item {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    padding: 1rem 1.5rem;
    color: #ccc;
    font-size: 0.95rem;
}
.csf-icon {
    margin-right: 0.4rem;
}

.marketplace-container {
    max-width: 1600px;
    margin: 1.5rem auto;
    padding: 0 1rem;
}
.marketplace-title {
    font-size: 2rem;
    color: #f5c542;
    text-align: center;
    margin-bottom: 0.3rem;
}
.marketplace-subtitle {
    text-align: center;
    color: #888;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.marketplace-tabs {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
.mp-tab {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    color: #ccc;
    padding: 0.6rem 1.4rem;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.95rem;
    transition: all 0.2s;
}
.mp-tab:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
}
.mp-tab.active {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #1a1a2e;
    font-weight: 600;
    border-color: #f59e0b;
}

.mp-panel {
    display: none;
}
.mp-panel.active {
    display: block;
}

.dashboard-hero-row {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-top: 1.5rem;
    min-height: 220px;
}

.dashboard-hero-row .main-card-display {
    z-index: 1;
}

.listing-wheel-section {
    position: absolute;
    left: 0;
    top: 0;
    max-width: 300px;
}
.listing-wheel-section.vault-listings-integrated {
    position: relative;
    left: auto;
    top: auto;
    max-width: 100%;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(245,197,66,0.1);
}
.listing-wheel-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.7rem;
    padding-left: 0.3rem;
}
.listing-wheel-title {
    font-size: 0.95rem;
    color: #f5c542;
    font-weight: 700;
    text-shadow: 0 0 12px rgba(245, 197, 66, 0.3);
    letter-spacing: 0.5px;
}
.listing-wheel-count {
    background: linear-gradient(135deg, rgba(245,158,11,0.25), rgba(245,197,66,0.15));
    color: #f5c542;
    font-size: 0.7rem;
    padding: 0.15rem 0.55rem;
    border-radius: 12px;
    font-weight: 700;
    border: 1px solid rgba(245, 158, 11, 0.25);
}

.lw-carousel-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0;
}

.lw-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid rgba(245, 197, 66, 0.3);
    background: rgba(20, 10, 30, 0.85);
    color: #f5c542;
    font-size: 0.7rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.4);
    opacity: 0;
    pointer-events: none;
    padding: 0;
    line-height: 1;
}
.lw-nav:hover {
    background: rgba(245, 197, 66, 0.15);
    border-color: rgba(245, 197, 66, 0.6);
    box-shadow: 0 0 15px rgba(245, 197, 66, 0.2);
    transform: translateY(-50%) scale(1.1);
}
.lw-nav-left { left: -10px; }
.lw-nav-right { right: -10px; }
.lw-carousel-wrap:hover .lw-nav {
    opacity: 1;
    pointer-events: auto;
}

.lw-carousel-mask {
    position: relative;
    overflow: hidden;
    flex: 1;
    border-radius: 12px;
}
.lw-carousel-mask::before,
.lw-carousel-mask::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 20px;
    z-index: 3;
    pointer-events: none;
    transition: opacity 0.3s;
}
.lw-carousel-mask::before {
    left: 0;
    background: linear-gradient(to right, rgba(15,10,25,0.9), transparent);
    opacity: 0;
}
.lw-carousel-mask::after {
    right: 0;
    background: linear-gradient(to left, rgba(15,10,25,0.9), transparent);
}
.lw-carousel-mask.scrolled-start::before { opacity: 0; }
.lw-carousel-mask.scrolled-end::after { opacity: 0; }

.listing-wheel {
    display: flex;
    gap: 0.6rem;
    overflow-x: auto;
    padding: 0.4rem 0.3rem 0.5rem;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    cursor: grab;
    user-select: none;
}
.listing-wheel::-webkit-scrollbar { display: none; }
.listing-wheel.dragging { cursor: grabbing; scroll-behavior: auto; }

@keyframes lwcSlideIn {
    from { opacity: 0; transform: translateX(15px) scale(0.92); }
    to { opacity: 1; transform: translateX(0) scale(1); }
}

.listing-wheel-card {
    flex-shrink: 0;
    width: 105px;
    background: linear-gradient(165deg, rgba(30,20,50,0.9), rgba(15,10,25,0.95));
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    overflow: hidden;
    scroll-snap-align: start;
    transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s ease, border-color 0.3s ease;
    animation: lwcSlideIn 0.4s ease-out both;
    position: relative;
}
.listing-wheel-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 10px;
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 1;
    pointer-events: none;
}
.listing-wheel-card:hover {
    transform: translateY(-4px) scale(1.03);
    z-index: 2;
}
.listing-wheel-card.sold {
    border-color: rgba(34, 197, 94, 0.35);
}
.listing-wheel-card.sold::before {
    background: linear-gradient(135deg, rgba(34,197,94,0.08), transparent 60%);
    opacity: 1;
}
.listing-wheel-card.sold:hover {
    box-shadow: 0 6px 25px rgba(34, 197, 94, 0.2), 0 0 15px rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.5);
}
.listing-wheel-card.active {
    border-color: rgba(245, 197, 66, 0.12);
}
.listing-wheel-card.active::before {
    background: linear-gradient(135deg, rgba(245,197,66,0.05), transparent 60%);
}
.listing-wheel-card.active:hover {
    box-shadow: 0 6px 25px rgba(245, 197, 66, 0.12), 0 0 10px rgba(245, 197, 66, 0.06);
    border-color: rgba(245, 197, 66, 0.3);
}
.listing-wheel-card.active:hover::before { opacity: 1; }

.lwc-img {
    position: relative;
    width: 100%;
    aspect-ratio: 3/4;
    overflow: hidden;
    background: rgba(0,0,0,0.4);
}
.lwc-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), filter 0.3s;
}
.listing-wheel-card:hover .lwc-img img {
    transform: scale(1.08);
}
.lwc-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 2rem;
    color: #555;
}

.lwc-sold-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 3px 0;
    text-align: center;
    background: linear-gradient(135deg, rgba(34,197,94,0.85), rgba(16,163,74,0.85));
    color: #fff;
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    z-index: 2;
    backdrop-filter: blur(4px);
}

.lwc-rarity {
    position: absolute;
    bottom: 4px;
    right: 4px;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    backdrop-filter: blur(6px);
    z-index: 2;
}
.lwc-rarity.rarity-common { background: rgba(85,85,85,0.8); color: #ddd; }
.lwc-rarity.rarity-uncommon { background: rgba(45,106,46,0.8); color: #7df47e; }
.lwc-rarity.rarity-rare { background: rgba(26,79,138,0.8); color: #6db3f8; }
.lwc-rarity.rarity-epic { background: rgba(92,29,138,0.8); color: #c77dff; }
.lwc-rarity.rarity-legendary { background: rgba(138,109,29,0.8); color: #ffd700; box-shadow: 0 0 6px rgba(255,215,0,0.3); }
.lwc-rarity.rarity-mythical { background: rgba(138,29,74,0.8); color: #ff69b4; box-shadow: 0 0 6px rgba(255,105,180,0.3); }

.lwc-info {
    padding: 0.4rem 0.35rem;
    text-align: center;
    position: relative;
    z-index: 2;
}
.lwc-name {
    display: block;
    font-size: 0.68rem;
    color: #d4d0e0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.15rem;
    font-weight: 500;
}
.lwc-price {
    display: block;
    font-size: 0.72rem;
    color: #f5c542;
    font-weight: 700;
    margin-bottom: 0.3rem;
    text-shadow: 0 0 8px rgba(245, 197, 66, 0.25);
}

.lwc-collect-btn {
    width: 100%;
    padding: 0.3rem 0.3rem;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.62rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
    letter-spacing: 0.2px;
}
.lwc-collect-btn::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -100%;
    width: 60%;
    height: 200%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    animation: lwcShimmer 2.5s ease-in-out infinite;
}
@keyframes lwcShimmer {
    0% { left: -100%; }
    50%, 100% { left: 150%; }
}
.lwc-collect-btn:hover {
    background: linear-gradient(135deg, #4ade80, #22c55e);
    transform: scale(1.04);
    box-shadow: 0 3px 12px rgba(34, 197, 94, 0.35);
}

@keyframes collectPulse {
    0%, 100% { box-shadow: 0 0 4px rgba(34, 197, 94, 0.3); }
    50% { box-shadow: 0 0 12px rgba(34, 197, 94, 0.6); }
}

.lwc-status-badge {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    background: linear-gradient(135deg, rgba(245,197,66,0.08), rgba(245,197,66,0.04));
    border: 1px solid rgba(245,197,66,0.15);
    border-radius: 5px;
    font-size: 0.6rem;
    color: rgba(245,197,66,0.7);
    font-weight: 600;
    letter-spacing: 0.3px;
}

@media (max-width: 700px) {
    .dashboard-hero-row {
        flex-direction: column;
        align-items: center;
    }
    .listing-wheel-section {
        position: static;
        max-width: 100%;
        order: 1;
    }
    .listing-wheel-card {
        width: 90px;
    }
    .lw-nav { display: none; }
}

.card-qty-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.9), rgba(109, 40, 217, 0.9));
    color: #fff;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 0.15rem 0.45rem;
    border-radius: 6px;
    z-index: 4;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.4);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.15);
}

.card-level-badge {
    position: absolute;
    bottom: 6px;
    left: 6px;
    background: linear-gradient(135deg, rgba(15, 15, 30, 0.9), rgba(30, 20, 50, 0.9));
    color: #fbbf24;
    font-size: 0.75rem;
    font-weight: 800;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
    z-index: 4;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(234, 179, 8, 0.4);
    text-shadow: 0 0 6px rgba(234, 179, 8, 0.5), 0 1px 2px rgba(0,0,0,0.3);
}

.card-fuse-banner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.92), rgba(168, 85, 247, 0.92));
    color: #fff;
    font-size: 0.72rem;
    font-weight: 800;
    padding: 0.35rem 0.7rem;
    border-radius: 8px;
    z-index: 8;
    text-align: center;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.5), 0 4px 15px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(196, 140, 255, 0.5);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    animation: fuseBannerPulse 2s ease-in-out infinite;
    pointer-events: none;
}
@keyframes fuseBannerPulse {
    0%, 100% {
        box-shadow: 0 0 20px rgba(168, 85, 247, 0.5), 0 4px 15px rgba(0, 0, 0, 0.4);
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        box-shadow: 0 0 30px rgba(168, 85, 247, 0.8), 0 4px 20px rgba(0, 0, 0, 0.5);
        transform: translate(-50%, -50%) scale(1.05);
    }
}

.leveling-panel {
    background: linear-gradient(135deg, rgba(30, 20, 50, 0.8), rgba(20, 15, 35, 0.9));
    border: 1px solid rgba(234, 179, 8, 0.3);
    border-radius: 12px;
    padding: 0.8rem 1rem;
    margin-top: 0.5rem;
}
.leveling-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}
.leveling-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: #eab308;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.leveling-level-display {
    font-size: 0.85rem;
    font-weight: 800;
    color: #fbbf24;
    text-shadow: 0 0 8px rgba(234, 179, 8, 0.4);
}
.leveling-xp-bar {
    width: 100%;
    height: 6px;
    background: rgba(255,255,255,0.08);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}
.leveling-xp-fill {
    height: 100%;
    background: linear-gradient(90deg, #eab308, #f59e0b, #fbbf24);
    border-radius: 3px;
    transition: width 0.5s ease;
    box-shadow: 0 0 6px rgba(234, 179, 8, 0.5);
}
.leveling-boost-info {
    font-size: 0.75rem;
    color: #34d399;
    font-weight: 600;
    margin-bottom: 0.4rem;
}
.leveling-copies-info {
    font-size: 0.72rem;
    color: #9ca3af;
    margin-bottom: 0.5rem;
}
.leveling-btn {
    width: 100%;
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}
.leveling-btn-ready {
    background: linear-gradient(135deg, #eab308, #d97706);
    color: #1a0a2e;
    box-shadow: 0 0 15px rgba(234, 179, 8, 0.3);
    animation: levelPulse 2s ease-in-out infinite;
}
.leveling-btn-ready:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 25px rgba(234, 179, 8, 0.5);
}
@keyframes levelPulse {
    0%, 100% { box-shadow: 0 0 15px rgba(234, 179, 8, 0.3); }
    50% { box-shadow: 0 0 25px rgba(234, 179, 8, 0.6); }
}
.leveling-not-ready {
    font-size: 0.75rem;
    color: #6b7280;
    text-align: center;
    padding: 0.3rem;
    font-style: italic;
}
.leveling-maxed {
    font-size: 0.85rem;
    color: #fbbf24;
    text-align: center;
    font-weight: 700;
    padding: 0.3rem;
    text-shadow: 0 0 8px rgba(234, 179, 8, 0.4);
}
.base-stat-hint {
    font-size: 0.6rem;
    color: #6b7280;
    font-weight: 400;
}
.modal-level-tag {
    font-size: 0.65rem;
    color: #fbbf24;
    font-weight: 600;
}

.leveling-xp-label {
    font-size: 0.7rem;
    color: #d4a017;
    font-weight: 600;
    text-align: center;
    margin-bottom: 0.4rem;
    margin-top: -0.25rem;
}
.fuse-all-summary {
    background: linear-gradient(135deg, rgba(30, 20, 50, 0.95), rgba(20, 15, 35, 0.95));
    border: 1px solid rgba(168, 85, 247, 0.4);
    border-radius: 12px;
    padding: 1rem 1.2rem;
    margin-bottom: 1rem;
    animation: fuseAllFadeIn 0.4s ease;
}
@keyframes fuseAllFadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
.fuse-all-header {
    font-size: 1rem;
    font-weight: 700;
    color: #a855f7;
    text-align: center;
    margin-bottom: 0.8rem;
    text-shadow: 0 0 10px rgba(168, 85, 247, 0.4);
}
.fuse-all-cards {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.fuse-all-card-result {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.6rem;
    background: rgba(255,255,255,0.04);
    border-radius: 8px;
    font-size: 0.8rem;
}
.fuse-result-name {
    color: #e2e8f0;
    font-weight: 600;
}
.fuse-result-rarity {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
}
.rarity-common { color: #9ca3af; }
.rarity-uncommon { color: #22c55e; }
.rarity-rare { color: #3b82f6; }
.rarity-epic { color: #a855f7; }
.rarity-legendary { color: #f59e0b; }
.rarity-mythical { color: #ef4444; }
.fuse-result-level {
    color: #fbbf24;
    font-weight: 700;
}
.fuse-result-gained {
    color: #34d399;
    font-weight: 700;
    animation: gainPulse 0.6s ease;
}
@keyframes gainPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}
.fuse-result-xp {
    color: #9ca3af;
    font-size: 0.7rem;
    margin-left: auto;
}

.display-toggle-panel {
    background: linear-gradient(135deg, rgba(30, 20, 50, 0.8), rgba(20, 15, 35, 0.9));
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 10px;
    padding: 0.6rem 0.8rem;
    margin-top: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.display-toggle-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: #c4b5fd;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.display-thumbs {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.display-thumb {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    border: 2px solid rgba(139, 92, 246, 0.2);
    overflow: hidden;
    cursor: pointer;
    position: relative;
    transition: all 0.2s;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
}
.display-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.display-thumb:hover {
    border-color: rgba(139, 92, 246, 0.6);
    transform: scale(1.05);
}
.display-thumb.active {
    border-color: #7c3aed;
    box-shadow: 0 0 12px rgba(139, 92, 246, 0.5);
}
.display-thumb-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    font-size: 0.5rem;
    text-align: center;
    background: rgba(0,0,0,0.7);
    color: #e5e7eb;
    padding: 1px 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.thumb-video-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.2rem;
    color: rgba(255,255,255,0.8);
    text-shadow: 0 0 6px rgba(0,0,0,0.8);
    pointer-events: none;
}
.thumb-video-icon {
    font-size: 1.5rem;
    color: rgba(139, 92, 246, 0.6);
}

.cover-btn-overlay {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: rgba(0, 0, 0, 0.75);
    border: 1px solid rgba(234, 179, 8, 0.6);
    color: #fbbf24;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    cursor: pointer;
    z-index: 10;
    backdrop-filter: blur(4px);
    transition: all 0.2s ease;
}
.cover-btn-overlay:hover:not(:disabled) {
    background: rgba(234, 179, 8, 0.25);
    border-color: #fbbf24;
    transform: scale(1.05);
}
.cover-btn-overlay:disabled {
    cursor: default;
    opacity: 0.7;
}
.cover-btn-overlay.is-current {
    background: rgba(34, 197, 94, 0.2);
    border-color: rgba(34, 197, 94, 0.6);
    color: #4ade80;
}

.mc-overlay-btn {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: rgba(0, 0, 0, 0.75);
    border: 1px solid rgba(167, 139, 250, 0.6);
    color: #c4b5fd;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    cursor: pointer;
    z-index: 10;
    backdrop-filter: blur(4px);
    transition: all 0.2s ease;
}
.mc-overlay-btn:hover:not(:disabled) {
    background: rgba(167, 139, 250, 0.25);
    border-color: #c4b5fd;
    transform: scale(1.05);
}
.mc-overlay-btn:disabled {
    cursor: default;
    opacity: 0.7;
}
.mc-overlay-btn.mc-overlay-success {
    background: rgba(34, 197, 94, 0.2);
    border-color: rgba(34, 197, 94, 0.6);
    color: #4ade80;
}

.fusion-preview {
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.08), rgba(245, 158, 11, 0.05));
    border: 1px solid rgba(234, 179, 8, 0.25);
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
    margin-top: 0.5rem;
}
.fusion-preview-title {
    font-size: 0.7rem;
    font-weight: 700;
    color: #fbbf24;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.4rem;
}
.fusion-preview-stats {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.fusion-stat {
    font-size: 0.8rem;
    color: #e5e7eb;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
.fusion-stat-icon {
    font-size: 0.85rem;
    width: 1.2rem;
    text-align: center;
}
.fusion-arrow {
    color: #6b7280;
    margin: 0 0.1rem;
}
.fusion-new-val {
    color: #fbbf24;
    font-weight: 700;
}
.fusion-diff {
    font-size: 0.7rem;
    color: #22c55e;
    font-weight: 600;
    background: rgba(34, 197, 94, 0.15);
    padding: 0.1rem 0.3rem;
    border-radius: 4px;
    margin-left: 0.2rem;
}
.fusion-boost-change {
    font-size: 0.7rem;
    color: #a78bfa;
    margin-top: 0.4rem;
    padding-top: 0.3rem;
    border-top: 1px solid rgba(139, 92, 246, 0.15);
}

.leveling-config-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}
.leveling-config-card {
    background: rgba(30, 20, 50, 0.7);
    border: 1px solid;
    border-radius: 12px;
    padding: 1rem;
}
.leveling-config-rarity {
    font-size: 1rem;
    font-weight: 800;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.leveling-config-fields {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.leveling-config-field label {
    font-size: 0.75rem;
    color: #d1d5db;
    font-weight: 600;
    display: block;
    margin-bottom: 0.2rem;
}
.leveling-config-field input {
    width: 100%;
    padding: 0.4rem 0.6rem;
    background: rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    color: #fff;
    font-size: 0.85rem;
}
.leveling-config-field .field-hint {
    font-size: 0.65rem;
    color: #6b7280;
    display: block;
    margin-top: 0.15rem;
}
.leveling-config-preview {
    margin-top: 0.6rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.preview-label {
    font-size: 0.7rem;
    color: #9ca3af;
    font-weight: 600;
}
.preview-text {
    font-size: 0.72rem;
    color: #fbbf24;
    display: block;
    margin-top: 0.2rem;
}
.leveling-formula-info {
    background: rgba(30, 20, 50, 0.5);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 1rem 1.2rem;
    margin-top: 1.5rem;
}
.leveling-formula-info h3 {
    color: #eab308;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}
.leveling-formula-info ul {
    list-style: disc;
    padding-left: 1.2rem;
    color: #d1d5db;
    font-size: 0.8rem;
    line-height: 1.7;
}
.leveling-formula-info strong {
    color: #fbbf24;
}

.listed-on-market-badge {
    text-align: center;
    padding: 0.5rem 1rem;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 8px;
    color: #f59e0b;
    font-weight: 600;
    font-size: 0.9rem;
}

.mp-filters {
    display: flex;
    gap: 0.6rem;
    margin-bottom: 1.2rem;
    flex-wrap: wrap;
    align-items: center;
}
.mp-filters-compact {
    margin-bottom: 0.8rem;
}
.mp-search {
    flex: 1;
    min-width: 160px;
    padding: 0.5rem 0.8rem;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    color: #fff;
    font-size: 0.9rem;
}
.mp-search::placeholder {
    color: #777;
}
.mp-search:focus {
    outline: none;
    border-color: rgba(245, 197, 66, 0.4);
}
.mp-filter-select {
    padding: 0.5rem 0.8rem;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    color: #ccc;
    font-size: 0.85rem;
    cursor: pointer;
}
.mp-filter-select:focus {
    outline: none;
    border-color: rgba(245, 197, 66, 0.4);
}
.mp-filter-select option {
    background: #1a1a2e;
    color: #ccc;
}
.mp-no-results {
    text-align: center;
    padding: 2rem;
    color: #888;
    font-size: 0.95rem;
}

.mp-empty {
    text-align: center;
    padding: 3rem;
    color: #888;
}
.mp-empty-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    opacity: 0.5;
}

.mp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(265px, 1fr));
    gap: 1.2rem;
}
.mp-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
}
.mp-card-buy-section {
    width: 265px;
    background: rgba(10,5,20,0.7);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    padding: 0.7rem;
    text-align: center;
}
.mp-buy-stats-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.mp-buy-level {
    font-size: 0.85rem;
    font-weight: 800;
    color: #fbbf24;
    background: rgba(251,191,36,0.12);
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid rgba(251,191,36,0.25);
}
.mp-buy-power {
    font-size: 0.85rem;
    font-weight: 800;
    color: #c084fc;
    background: rgba(192,132,252,0.12);
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid rgba(192,132,252,0.25);
}
.mp-buy-stats-detail {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 8px;
}
.mp-bs {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
}
.mp-bs-atk {
    background: rgba(239,68,68,0.15);
    color: #f87171;
}
.mp-bs-def {
    background: rgba(59,130,246,0.15);
    color: #60a5fa;
}
.mp-bs-hp {
    background: rgba(34,197,94,0.15);
    color: #4ade80;
}
.mp-merge-hint {
    font-size: 0.65rem;
    color: #fbbf24;
    background: rgba(251,191,36,0.08);
    border: 1px solid rgba(251,191,36,0.2);
    border-radius: 6px;
    padding: 5px 8px;
    margin-bottom: 6px;
    line-height: 1.3;
}

.mp-card-img {
    position: relative;
    width: 100%;
    aspect-ratio: 3/4;
    overflow: hidden;
    background: rgba(0,0,0,0.3);
}
.mp-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mp-card-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 3rem;
    color: #555;
}
.mp-rarity-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.mp-rarity-badge.rarity-common { background: #555; color: #ddd; }
.mp-rarity-badge.rarity-uncommon { background: #2d6a2e; color: #7df47e; }
.mp-rarity-badge.rarity-rare { background: #1a4f8a; color: #6db3f8; }
.mp-rarity-badge.rarity-epic { background: #5c1d8a; color: #c77dff; }
.mp-rarity-badge.rarity-legendary { background: #8a6d1d; color: #ffd700; }
.mp-rarity-badge.rarity-mythical { background: #8a1d4a; color: #ff69b4; }

.mp-card-img .mp-rarity-badge {
    position: absolute;
    top: 8px;
    right: 8px;
}

.mp-card-info {
    padding: 0.8rem;
}
.mp-card-name {
    font-size: 1rem;
    color: #eee;
    margin-bottom: 0.2rem;
}
.mp-card-pack {
    font-size: 0.75rem;
    color: #888;
    display: block;
    margin-bottom: 0.4rem;
}
.mp-card-level {
    font-size: 0.8rem;
    color: #fbbf24;
    font-weight: 700;
    margin-bottom: 0.2rem;
}
.mp-card-power {
    font-size: 0.85rem;
    color: #c084fc;
    font-weight: 600;
    margin-bottom: 0.3rem;
}
.mp-type-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.mp-type-base {
    background: rgba(239, 68, 68, 0.85);
    color: #fff;
}
.mp-type-dupe {
    background: rgba(59, 130, 246, 0.85);
    color: #fff;
}
.mp-card-stats {
    display: flex;
    gap: 0.8rem;
    font-size: 0.8rem;
    color: #aaa;
    margin-bottom: 0.4rem;
}
.mp-card-seller {
    font-size: 0.8rem;
    color: #999;
    margin-bottom: 0.3rem;
}
.mp-card-price {
    font-size: 1.1rem;
    color: #f5c542;
    font-weight: 700;
    margin-bottom: 0.2rem;
}
.mp-card-fee {
    font-size: 0.7rem;
    color: #777;
    margin-bottom: 0.5rem;
}
.mp-buy-btn {
    width: 100%;
    padding: 0.6rem;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #1a1a2e;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s;
}
.mp-buy-btn:hover {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    transform: scale(1.02);
}
.mp-own-badge {
    display: block;
    text-align: center;
    padding: 0.5rem;
    color: #888;
    font-size: 0.85rem;
    border: 1px dashed rgba(255,255,255,0.15);
    border-radius: 8px;
}
.mp-cancel-btn {
    width: 100%;
    padding: 0.5rem;
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.2s;
}
.mp-cancel-btn:hover {
    background: rgba(239, 68, 68, 0.25);
}

.mp-card-sold {
    border-color: rgba(34, 197, 94, 0.4) !important;
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.15);
}

.mp-sold-tag {
    position: absolute;
    top: 8px;
    left: 8px;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    letter-spacing: 1px;
    z-index: 2;
}

.mp-collect-btn {
    width: 100%;
    padding: 0.5rem;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    animation: collectPulse 1.5s ease-in-out infinite;
}
.mp-collect-btn:hover {
    background: linear-gradient(135deg, #4ade80, #22c55e);
    transform: scale(1.03);
}

.mp-sell-form {
    max-width: 700px;
    margin: 0 auto;
}
.mp-sell-form h2 {
    color: #f5c542;
    margin-bottom: 0.5rem;
}
.mp-sell-hint {
    color: #888;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}
.mp-sell-select label, .mp-sell-price label {
    display: block;
    color: #ccc;
    font-weight: 600;
    margin-bottom: 0.5rem;
}
.mp-asset-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 0.6rem;
    max-height: 400px;
    overflow-y: auto;
    padding: 0.5rem;
    background: rgba(0,0,0,0.2);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 1.5rem;
}
.mp-pick-card {
    border: 2px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s;
    background: rgba(255,255,255,0.03);
}
.mp-pick-card:hover {
    border-color: rgba(245, 197, 66, 0.4);
}
.mp-pick-card.selected {
    border-color: #f5c542;
    box-shadow: 0 0 12px rgba(245, 197, 66, 0.3);
}
.mp-pick-card img {
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
    display: block;
}
.mp-pick-placeholder {
    width: 100%;
    aspect-ratio: 3/4;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
    font-size: 2rem;
}
.mp-pick-info {
    padding: 0.3rem 0.4rem;
    text-align: center;
}
.mp-pick-name {
    display: block;
    font-size: 0.7rem;
    color: #ccc;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.2rem;
}

.mp-pick-qty {
    position: absolute;
    top: 4px;
    right: 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.mp-qty-badge {
    background: rgba(124,58,237,0.85);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 3px;
}
.mp-level-badge {
    background: rgba(255,215,0,0.85);
    color: #000;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 3px;
}
.mp-pick-stats {
    display: flex;
    gap: 4px;
    margin-top: 3px;
    flex-wrap: wrap;
}
.mp-stat {
    font-size: 0.55rem;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    gap: 1px;
    line-height: 1;
}
.mp-stat-atk {
    background: rgba(239,68,68,0.2);
    color: #f87171;
}
.mp-stat-def {
    background: rgba(59,130,246,0.2);
    color: #60a5fa;
}
.mp-stat-hp {
    background: rgba(34,197,94,0.2);
    color: #4ade80;
}
.mp-stat-pwr {
    background: rgba(255,215,0,0.2);
    color: #ffd700;
}

.mp-listing-type {
    margin-bottom: 1.5rem;
}
.mp-listing-type > label {
    display: block;
    color: #c0c0d0;
    font-weight: 600;
    margin-bottom: 0.5rem;
}
.mp-lt-options {
    display: flex;
    gap: 0.8rem;
    margin-bottom: 0.5rem;
}
.mp-lt-option {
    flex: 1;
    cursor: pointer;
}
.mp-lt-option input[type="radio"] {
    display: none;
}
.mp-lt-card {
    padding: 0.8rem;
    border-radius: 8px;
    border: 1px solid #3d2b5e;
    background: rgba(30,15,50,0.5);
    transition: all 0.2s;
}
.mp-lt-card strong {
    display: block;
    color: #fff;
    font-size: 0.9rem;
    margin-bottom: 0.3rem;
}
.mp-lt-card span {
    color: #a0a0b0;
    font-size: 0.75rem;
}
.mp-lt-option.selected .mp-lt-card {
    border-color: #7c3aed;
    background: rgba(124,58,237,0.15);
}
.mp-lt-option.selected .mp-lt-card.mp-lt-danger {
    border-color: #ef4444;
    background: rgba(239,68,68,0.15);
}
.mp-lt-disabled {
    opacity: 0.4;
    pointer-events: none;
}
.mp-lt-warning {
    background: rgba(239,68,68,0.15);
    border: 1px solid #ef4444;
    border-radius: 6px;
    padding: 0.6rem 0.8rem;
    color: #fca5a5;
    font-size: 0.8rem;
    margin-top: 0.5rem;
}
.mp-lt-info {
    color: #a0a0b0;
    font-size: 0.8rem;
    margin-top: 0.4rem;
}

@media(max-width:600px) {
    .mp-lt-options { flex-direction: column; }
}

.mp-sell-price {
    margin-bottom: 1.5rem;
}
.mp-price-input-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.8rem;
}
.mp-price-icon {
    font-size: 1.5rem;
}
.mp-price-input-wrap input {
    flex: 1;
    max-width: 200px;
    padding: 0.6rem 1rem;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 8px;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 600;
}
.mp-price-quick {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 0.8rem;
}
.mp-price-quick button {
    padding: 0.3rem 0.8rem;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    color: #ccc;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s;
}
.mp-price-quick button:hover {
    background: rgba(245, 197, 66, 0.15);
    border-color: rgba(245, 197, 66, 0.3);
    color: #f5c542;
}
.mp-fee-preview {
    font-size: 0.85rem;
    color: #999;
    padding: 0.6rem 1rem;
    background: rgba(0,0,0,0.2);
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.06);
}
.mp-fee-preview strong {
    color: #f5c542;
}

.mp-list-btn {
    padding: 0.7rem 2rem;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #1a1a2e;
    border: none;
    border-radius: 10px;
    font-weight: 700;
    font-size: 1.05rem;
    cursor: pointer;
    transition: all 0.2s;
}
.mp-list-btn:hover {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    transform: scale(1.02);
}

.mp-history-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.mp-history-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.8rem 1rem;
    background: rgba(255,255,255,0.04);
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.08);
}
.mp-history-item.sold {
    border-left: 3px solid #22c55e;
}
.mp-history-item.cancelled {
    border-left: 3px solid #888;
}
.mp-history-img {
    width: 50px;
    height: 65px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    background: rgba(0,0,0,0.3);
}
.mp-history-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mp-history-info {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    font-size: 0.9rem;
    color: #ccc;
}
.mp-history-action {
    color: #22c55e;
    font-size: 0.85rem;
}
.mp-history-action.cancelled {
    color: #888;
}

@media (max-width: 600px) {
    .mp-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
    .mp-asset-picker {
        grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    }
    .marketplace-tabs {
        gap: 0.3rem;
    }
    .mp-tab {
        padding: 0.4rem 0.8rem;
        font-size: 0.85rem;
    }
}

.bundle-selector {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    justify-content: center;
}
.bundle-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.6rem 0.8rem;
    border: 2px solid #333;
    border-radius: 10px;
    background: rgba(30, 30, 40, 0.8);
    color: #ccc;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    min-width: 80px;
    font-family: inherit;
}
.bundle-btn:hover {
    border-color: #c9a43e;
    background: rgba(40, 35, 20, 0.9);
}
.bundle-btn.active {
    border-color: #c9a43e;
    background: linear-gradient(135deg, rgba(60, 50, 20, 0.9), rgba(40, 30, 15, 0.95));
    box-shadow: 0 0 12px rgba(201, 164, 62, 0.3);
    color: #fff;
}
.bundle-qty {
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 0.2rem;
}
.bundle-price {
    font-size: 0.85rem;
    color: #c9a43e;
    font-weight: 600;
}
.bundle-cards {
    font-size: 0.7rem;
    opacity: 0.7;
    margin-top: 0.15rem;
}
.bundle-badge {
    position: absolute;
    top: -8px;
    right: -5px;
    background: linear-gradient(135deg, #e74c3c, #c0392b);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}
.bundle-best .bundle-badge {
    background: linear-gradient(135deg, #f39c12, #e67e22);
}
.bundle-flames .bundle-btn.active {
    border-color: #e74c3c;
    background: linear-gradient(135deg, rgba(80, 20, 15, 0.9), rgba(50, 15, 10, 0.95));
    box-shadow: 0 0 12px rgba(231, 76, 60, 0.3);
}
.bundle-flames .bundle-btn:hover {
    border-color: #e74c3c;
}
@media (max-width: 500px) {
    .bundle-selector {
        gap: 0.3rem;
    }
    .bundle-btn {
        padding: 0.4rem 0.5rem;
        min-width: 65px;
    }
    .bundle-qty { font-size: 0.8rem; }
    .bundle-price { font-size: 0.75rem; }
}

.vault-milestone-widget {
    background: linear-gradient(135deg, rgba(10,5,25,0.97), rgba(20,10,35,0.95));
    border: 1px solid rgba(124,58,237,0.3);
    border-radius: 16px;
    padding: 1rem 1rem 0.8rem;
    margin-bottom: 0.8rem;
    position: relative;
    overflow: hidden;
}
.vault-milestone-widget::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 120% 60% at 50% 0%, rgba(124,58,237,0.08) 0%, transparent 70%),
        radial-gradient(ellipse 80% 40% at 20% 100%, rgba(255,215,0,0.04) 0%, transparent 60%),
        radial-gradient(ellipse 80% 40% at 80% 100%, rgba(168,85,247,0.04) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}
.vault-milestone-widget > * { position: relative; z-index: 1; }
.vm-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.7rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(124,58,237,0.15);
}
.vm-title {
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    color: #ffd700;
    letter-spacing: 1px;
    text-shadow: 0 0 12px rgba(255,215,0,0.3);
}
.vm-earned {
    color: #c8b8e8;
    font-size: 0.75rem;
    font-family: 'Cinzel', serif;
    background: rgba(124,58,237,0.12);
    padding: 2px 8px;
    border-radius: 10px;
    border: 1px solid rgba(124,58,237,0.2);
}
.vm-track {
    position: relative;
}
.vm-chests {
    display: flex;
    justify-content: space-around;
    gap: 0.15rem;
}
.vm-chest-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    transition: transform 0.3s, filter 0.3s;
    cursor: default;
    flex: 1;
    min-width: 0;
    padding: 0.2rem 0;
}
.vm-chest-node:hover:not(.claimable) {
    transform: translateY(-2px);
}
.vm-ring-wrap {
    position: relative;
    width: 80px;
    height: 80px;
}
.vm-ring-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
.vm-ring-bg {
    fill: none;
    stroke: rgba(124,58,237,0.1);
    stroke-width: 3.5;
}
.vm-ring-fill {
    fill: none;
    stroke-width: 3.5;
    stroke-linecap: round;
    transition: stroke-dashoffset 1.5s cubic-bezier(0.4,0,0.2,1);
    filter: drop-shadow(0 0 2px var(--chest-clr));
}
.vm-chest-node.unlocked .vm-ring-bg {
    stroke: rgba(124,58,237,0.06);
}
.vm-chest-node.unlocked .vm-ring-fill {
    stroke-width: 4;
    filter: drop-shadow(0 0 5px var(--chest-clr)) drop-shadow(0 0 10px var(--chest-clr));
}
.vm-chest-gfx {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.vm-chest-body {
    position: relative;
    width: 36px;
    height: 30px;
    transition: all 0.3s;
}
.vm-chest-base {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 20px;
    background: linear-gradient(180deg, #5a3d1a 0%, #3d2810 100%);
    border-radius: 3px 3px 5px 5px;
    border: 1.5px solid rgba(255,215,0,0.2);
    box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
.vm-chest-lid {
    position: absolute;
    top: 0;
    left: -1px;
    width: calc(100% + 2px);
    height: 15px;
    background: linear-gradient(180deg, #7a5522 0%, #5a3d1a 100%);
    border-radius: 4px 4px 1px 1px;
    border: 1.5px solid rgba(255,215,0,0.25);
    transform-origin: bottom center;
    transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
    box-shadow: 0 -1px 4px rgba(0,0,0,0.3);
}
.vm-chest-clasp {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 10px;
    border: 1.5px solid var(--chest-clr, #9ca3af);
    border-radius: 50%;
    background: radial-gradient(circle, var(--chest-clr, #9ca3af) 30%, transparent 70%);
    box-shadow: 0 0 4px var(--chest-clr, #9ca3af);
    z-index: 2;
    transition: all 0.3s;
}
.vm-chest-node:not(.unlocked) .vm-chest-base {
    filter: brightness(0.5) saturate(0.4);
}
.vm-chest-node:not(.unlocked) .vm-chest-lid {
    filter: brightness(0.5) saturate(0.4);
}
.vm-chest-node:not(.unlocked) .vm-chest-clasp {
    opacity: 0.35;
    box-shadow: none;
}
.vm-chest-node.unlocked .vm-chest-clasp {
    box-shadow: 0 0 6px var(--chest-clr), 0 0 12px var(--chest-clr);
}
.vm-chest-node.unlocked .vm-chest-lid {
    transform: rotateX(-25deg);
}
.vm-chest-node.unlocked .vm-chest-base {
    border-color: rgba(255,215,0,0.3);
}
.vm-chest-glow {
    position: absolute;
    top: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 8px;
    background: radial-gradient(ellipse, var(--chest-clr) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
}
.vm-chest-node.unlocked .vm-chest-glow {
    opacity: 0.6;
}
.vm-chest-node.claimable {
    cursor: pointer;
}
.vm-chest-node.claimable .vm-ring-wrap {
    animation: chestBounce 1.4s ease-in-out infinite;
}
.vm-chest-node.claimable .vm-chest-clasp {
    animation: claspGlow 1s ease-in-out infinite;
}
.vm-chest-node.claimable .vm-chest-lid {
    animation: lidWiggle 2s ease-in-out infinite;
    filter: none;
}
.vm-chest-node.claimable .vm-chest-base {
    filter: none;
    border-color: rgba(255,215,0,0.4);
}
.vm-chest-node.claimable .vm-chest-glow {
    opacity: 0.9;
    animation: glowPulse 1.5s ease-in-out infinite;
}
.vm-chest-node.claimable .vm-ring-fill {
    animation: ringPulseGlow 1.5s ease-in-out infinite;
}
@keyframes chestBounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06) translateY(-2px); }
}
@keyframes claspGlow {
    0%, 100% { box-shadow: 0 0 4px var(--chest-clr), 0 0 8px var(--chest-clr); }
    50% { box-shadow: 0 0 8px var(--chest-clr), 0 0 16px var(--chest-clr), 0 0 4px #fff; }
}
@keyframes lidWiggle {
    0%, 100% { transform: rotateX(-15deg); }
    25% { transform: rotateX(-25deg); }
    75% { transform: rotateX(-10deg); }
}
@keyframes glowPulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}
@keyframes ringPulseGlow {
    0%, 100% { filter: drop-shadow(0 0 4px var(--chest-clr)) drop-shadow(0 0 8px var(--chest-clr)); }
    50% { filter: drop-shadow(0 0 6px var(--chest-clr)) drop-shadow(0 0 14px var(--chest-clr)) drop-shadow(0 0 3px #fff); }
}
.vm-chest-claim-badge {
    position: absolute;
    top: -4px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #7c3aed, #a855f7);
    color: #fff;
    font-size: 0.5rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    border: 1px solid #ffd700;
    box-shadow: 0 0 8px rgba(255,215,0,0.4);
    animation: claimPulse 1.5s ease-in-out infinite;
    white-space: nowrap;
    z-index: 5;
    font-family: 'Cinzel', serif;
}
@keyframes claimPulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 6px rgba(255,215,0,0.4); }
    50% { opacity: 0.85; box-shadow: 0 0 12px rgba(255,215,0,0.7), 0 0 20px rgba(168,85,247,0.3); }
}
.vm-chest-threshold {
    font-family: 'Cinzel', serif;
    font-size: 0.7rem;
    color: #6b5a8a;
    font-weight: 600;
    line-height: 1.2;
    margin-top: 0.2rem;
    transition: color 0.3s;
}
.vm-chest-node.unlocked .vm-chest-threshold {
    color: #e0d0f0;
    text-shadow: 0 0 6px rgba(168,85,247,0.3);
}
.vm-chest-rarity {
    font-size: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.4;
    transition: opacity 0.3s;
    font-family: 'Cinzel', serif;
}
.vm-chest-node.unlocked .vm-chest-rarity { opacity: 1; }
.vm-chest-count-badge {
    font-size: 0.55rem;
    font-weight: 700;
    font-family: 'Cinzel', serif;
    opacity: 0.7;
    margin-top: -1px;
}
.vm-chest-node.unlocked .vm-chest-count-badge { opacity: 1; }
.vm-milestone-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(8px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    animation: vmModalFadeIn 0.4s ease-out forwards;
}
@keyframes vmModalFadeIn {
    to { opacity: 1; }
}
.vm-milestone-modal {
    background: linear-gradient(145deg, rgba(15,8,30,0.98), rgba(26,12,42,0.98));
    border: 1px solid rgba(124,58,237,0.4);
    border-radius: 20px;
    padding: 2rem;
    max-width: 600px;
    width: 94vw;
    text-align: center;
    position: relative;
    overflow: visible;
    box-shadow: 0 0 60px rgba(124,58,237,0.2), 0 0 120px rgba(124,58,237,0.1);
    animation: vmModalSlideUp 0.5s cubic-bezier(0.34,1.56,0.64,1) forwards;
    transform: translateY(40px) scale(0.9);
}
@keyframes vmModalSlideUp {
    to { transform: translateY(0) scale(1); }
}
.vm-modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: none;
    border: none;
    color: #a78bfa;
    font-size: 1.5rem;
    cursor: pointer;
    transition: color 0.2s, transform 0.2s;
    z-index: 5;
    line-height: 1;
}
.vm-modal-close:hover {
    color: #fff;
    transform: scale(1.2);
}
.vm-modal-title {
    font-family: 'Cinzel', serif;
    font-size: 1.3rem;
    color: #ffd700;
    text-shadow: 0 0 20px rgba(255,215,0,0.4);
    margin-bottom: 0.3rem;
}
.vm-modal-subtitle {
    color: #a78bfa;
    font-size: 0.85rem;
    margin-bottom: 1.2rem;
}
.vm-modal-chest-anim {
    position: relative;
    width: 100px;
    height: 80px;
    margin: 0 auto 1rem;
}
.vm-modal-chest-wrap {
    position: relative;
    width: 80px;
    height: 65px;
    margin: 0 auto;
}
.vm-modal-chest-base-lg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 42px;
    background: linear-gradient(180deg, #6b4c1e 0%, #4a3012 100%);
    border-radius: 5px 5px 7px 7px;
    border: 2px solid rgba(255,215,0,0.3);
    box-shadow: 0 4px 16px rgba(0,0,0,0.6);
}
.vm-modal-chest-lid-lg {
    position: absolute;
    top: 0;
    left: -3px;
    width: calc(100% + 6px);
    height: 30px;
    background: linear-gradient(180deg, #8a6328 0%, #6b4c1e 100%);
    border-radius: 6px 6px 2px 2px;
    border: 2px solid rgba(255,215,0,0.35);
    transform-origin: bottom center;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.4);
    transition: transform 0.6s cubic-bezier(0.34,1.56,0.64,1);
}
.vm-modal-chest-anim.opened .vm-modal-chest-lid-lg {
    transform: rotateX(-110deg) translateY(-5px);
}
.vm-modal-chest-clasp-lg {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 16px;
    border: 2px solid var(--modal-chest-clr, #a855f7);
    border-radius: 50%;
    background: radial-gradient(circle, var(--modal-chest-clr, #a855f7) 30%, transparent 70%);
    box-shadow: 0 0 10px var(--modal-chest-clr, #a855f7);
    z-index: 3;
}
.vm-modal-chest-burst {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 40px;
    background: radial-gradient(ellipse, var(--modal-chest-clr, #a855f7) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s;
    filter: blur(8px);
    pointer-events: none;
}
.vm-modal-chest-anim.opened .vm-modal-chest-burst {
    opacity: 0.8;
    animation: burstPulse 1s ease-out forwards;
}
@keyframes burstPulse {
    0% { opacity: 0.8; transform: translateX(-50%) scale(1); }
    100% { opacity: 0; transform: translateX(-50%) scale(2.5); }
}
.vm-modal-card-area {
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 800px;
    margin-bottom: 1rem;
}
.vm-modal-card-flipper {
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(0.4,0,0.2,1);
    flex-shrink: 0;
    display: inline-block;
}
.vm-modal-card-flipper.flipped {
    transform: rotateY(180deg);
}
.vm-modal-card-back-face {
    backface-visibility: hidden;
    border-radius: 12px;
}
.vm-modal-card-front {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    border-radius: 12px;
    transform: rotateY(180deg);
}
.vm-modal-reward-info {
    color: #c8b8e8;
    font-size: 0.9rem;
    margin-top: 0.5rem;
    font-family: 'Cinzel', serif;
}
.vm-modal-reward-info .rarity-name {
    font-weight: bold;
}
.vm-modal-next-info {
    color: #7c6b9e;
    font-size: 0.75rem;
    margin-top: 0.4rem;
}
.vm-modal-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    border-radius: 20px;
}
.vm-modal-particle {
    position: absolute;
    border-radius: 50%;
    animation: vmParticleFloat var(--p-dur, 3s) ease-out forwards;
    opacity: 0;
}
@keyframes vmParticleFloat {
    0% { opacity: 0; transform: translate(0,0) scale(0); }
    15% { opacity: 1; transform: translate(calc(var(--p-tx) * 0.3), calc(var(--p-ty) * 0.3)) scale(1); }
    100% { opacity: 0; transform: translate(var(--p-tx), var(--p-ty)) scale(0.3); }
}
.vm-modal-ray {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 3px;
    height: 0;
    transform-origin: top center;
    transform: rotate(var(--ray-angle)) translateX(-50%);
    opacity: 0;
    transition: height 0.5s ease-out, opacity 0.3s;
    border-radius: 2px;
}
.vm-modal-ray.active {
    height: var(--ray-h, 100px);
    opacity: 0.6;
}
@media (max-width: 600px) {
    .vm-ring-wrap { width: 60px; height: 60px; }
    .vm-chest-body { width: 28px; height: 24px; }
    .vm-chest-base { height: 16px; }
    .vm-chest-lid { height: 12px; }
    .vm-chest-clasp { width: 8px; height: 8px; top: 6px; }
    .vm-chest-threshold { font-size: 0.6rem; }
    .vm-chest-rarity { font-size: 0.42rem; }
    .vm-chests { gap: 0.05rem; }
    .vm-milestone-modal { padding: 1.5rem 1rem; max-width: 340px; }
    .vm-modal-card-flipper .atc.atc-sm { transform: scale(0.85); transform-origin: top left; }
}

.daily-draw-section {
    background: transparent;
    border: none;
    border-radius: 20px;
    padding: 0;
    margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden;
}
.daily-draw-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    opacity: 0.7;
    pointer-events: none;
}
.daily-draw-bg-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(180deg,
        rgba(0,0,0,0.15) 0%,
        rgba(10,5,25,0.5) 50%,
        rgba(10,5,25,0.75) 100%);
    pointer-events: none;
}
.daily-draw-inner {
    position: relative;
    z-index: 1;
    padding: 1.8rem 2rem;
}
.daily-draw-header,
.daily-draw-body,
.daily-draw-results {
    position: relative;
    z-index: 1;
}
.daily-draw-section::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 2px;
    background: linear-gradient(135deg, #7c3aed, #c084fc, #f0abfc, #c084fc, #7c3aed);
    background-size: 300% 100%;
    animation: dailyDrawBorder 4s linear infinite;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    z-index: 1;
    pointer-events: none;
}
@keyframes dailyDrawBorder {
    0% { background-position: 300% 0; }
    100% { background-position: -300% 0; }
}
.daily-draw-section::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(ellipse at center, rgba(168,85,247,0.08) 0%, transparent 50%);
    animation: dailyDrawGlow 5s ease-in-out infinite;
    z-index: 0;
    pointer-events: none;
}
@keyframes dailyDrawGlow {
    0%, 100% { opacity: 0.4; transform: scale(0.9); }
    50% { opacity: 1; transform: scale(1.1); }
}
.daily-draw-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.2rem;
}
.daily-draw-title {
    font-size: 1.8rem;
    font-weight: 900;
    color: #f0f0ff;
    margin: 0;
    text-shadow: 0 0 25px rgba(168,85,247,0.4), 0 2px 4px rgba(0,0,0,0.5);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-family: 'Cinzel', serif;
}
.daily-draw-title-accent {
    background: linear-gradient(135deg, #c084fc, #f0abfc, #e879f9);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 8px rgba(192,132,252,0.5));
}
.daily-draw-subtitle {
    font-size: 0.85rem;
    color: rgba(192,132,252,0.6);
    margin: 0.4rem 0 0;
    font-weight: 500;
    letter-spacing: 0.5px;
    font-style: italic;
}
.daily-draw-body {
    text-align: center;
    padding: 0.5rem 0;
}
.daily-draw-card-count {
    font-size: 1.15rem;
    font-weight: 700;
    color: #e9d5ff;
    margin-bottom: 1rem;
    text-shadow: 0 0 10px rgba(168,85,247,0.3);
}
.daily-draw-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    padding: 1rem 3rem;
    font-size: 1.15rem;
    font-weight: 900;
    background: linear-gradient(135deg, #7c3aed, #a855f7, #c084fc);
    background-size: 200% 100%;
    color: #fff;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow:
        0 0 25px rgba(168, 85, 247, 0.5),
        0 4px 20px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255,255,255,0.15);
    animation: dailyDrawBtnPulse 3s ease-in-out infinite;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    position: relative;
    overflow: hidden;
}
.daily-draw-btn::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -100%;
    width: 60%;
    height: 200%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    transform: skewX(-20deg);
    animation: dailyDrawBtnSheen 4s ease-in-out infinite;
}
@keyframes dailyDrawBtnSheen {
    0%, 100% { left: -100%; }
    50% { left: 150%; }
}
.daily-draw-btn:hover {
    transform: translateY(-3px) scale(1.04);
    box-shadow:
        0 0 45px rgba(168, 85, 247, 0.8),
        0 8px 30px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255,255,255,0.2);
    background-position: 100% 0;
}
@keyframes dailyDrawBtnPulse {
    0%, 100% {
        box-shadow: 0 0 25px rgba(168, 85, 247, 0.5), 0 4px 20px rgba(0, 0, 0, 0.4);
    }
    50% {
        box-shadow: 0 0 40px rgba(168, 85, 247, 0.8), 0 6px 25px rgba(0, 0, 0, 0.5);
    }
}
.daily-draw-btn-icon {
    font-size: 1.4rem;
    animation: dailyDrawIconSpin 3s ease-in-out infinite;
}
@keyframes dailyDrawIconSpin {
    0%, 100% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(15deg) scale(1.1); }
    75% { transform: rotate(-15deg) scale(1.1); }
}
.daily-draw-claimed {
    padding: 0.8rem 0;
}
.daily-draw-claimed-icon {
    font-size: 2.4rem;
    color: #4ade80;
    margin-bottom: 0.5rem;
    filter: drop-shadow(0 0 10px rgba(74,222,128,0.4));
}
.daily-draw-claimed-text {
    font-size: 1rem;
    font-weight: 700;
    color: #d1d5db;
    margin-bottom: 0.6rem;
}
.daily-draw-timer {
    font-size: 0.9rem;
    color: #9ca3af;
    background: rgba(0,0,0,0.3);
    display: inline-block;
    padding: 6px 16px;
    border-radius: 10px;
    border: 1px solid rgba(168,85,247,0.15);
}
.daily-draw-timer #dailyDrawCountdown {
    font-weight: 800;
    color: #c084fc;
    font-size: 1.15rem;
    font-family: 'Courier New', monospace;
    text-shadow: 0 0 8px rgba(168,85,247,0.4);
}
.daily-draw-results {
    margin-top: 1.4rem;
    padding-top: 1.2rem;
    border-top: 1px solid rgba(168, 85, 247, 0.15);
}
.daily-draw-results-title {
    font-size: 1.3rem;
    font-weight: 900;
    color: #e9d5ff;
    text-align: center;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0 0 15px rgba(168, 85, 247, 0.6);
}
.daily-draw-reveal-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

.dd-modal-overlay {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(0,0,0,0.92);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.35s ease;
    backdrop-filter: blur(6px);
}
.dd-modal-overlay.dd-modal-visible { opacity: 1; }
.dd-modal {
    background: linear-gradient(165deg, rgba(22,10,48,0.98), rgba(10,4,24,0.96));
    border: 1px solid rgba(168,85,247,0.3);
    border-radius: 20px;
    padding: 20px 18px 16px;
    max-width: 680px; width: 94vw;
    max-height: 88vh; overflow-y: auto;
    box-shadow: 0 0 60px rgba(139,92,246,0.15), 0 8px 40px rgba(0,0,0,0.5);
    scrollbar-width: none;
}
.dd-modal .reveal-card {
    width: 140px; height: 280px;
}
.dd-modal .dd-modal-grid {
    gap: 0.6rem;
}
.dd-modal::-webkit-scrollbar { display: none; }
.dd-modal-header {
    text-align: center; margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(168,85,247,0.15);
}
.dd-modal-title {
    font-family: 'Cinzel', serif;
    font-size: 1.3rem; font-weight: 800;
    background: linear-gradient(135deg, #fde68a, #f59e0b, #fbbf24);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 0.1em; text-transform: uppercase;
}
.dd-modal-grid {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 1rem; min-height: 120px;
}
.dd-modal-footer {
    display: flex; flex-wrap: wrap; gap: 10px;
    justify-content: center; align-items: center;
    margin-top: 20px; padding-top: 14px;
    border-top: 1px solid rgba(168,85,247,0.12);
    animation: ddFooterFadeIn 0.5s ease forwards;
}
@keyframes ddFooterFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.dd-modal-btn {
    padding: 10px 22px; border-radius: 10px;
    font-family: 'Cinzel', serif; font-size: 0.8rem; font-weight: 700;
    text-decoration: none; cursor: pointer; transition: all 0.25s;
    border: 1px solid transparent; text-align: center;
}
.dd-btn-store {
    background: linear-gradient(135deg, rgba(139,92,246,0.25), rgba(168,85,247,0.15));
    color: #c4b5fd; border-color: rgba(139,92,246,0.35);
}
.dd-btn-store:hover {
    background: linear-gradient(135deg, rgba(139,92,246,0.4), rgba(168,85,247,0.25));
    color: #e8d5ff; box-shadow: 0 0 16px rgba(139,92,246,0.2);
}
.dd-btn-close {
    background: linear-gradient(135deg, rgba(251,191,36,0.2), rgba(245,158,11,0.15));
    color: #fbbf24; border-color: rgba(251,191,36,0.3);
}
.dd-btn-close:hover {
    background: linear-gradient(135deg, rgba(251,191,36,0.35), rgba(245,158,11,0.25));
    color: #fde68a; box-shadow: 0 0 16px rgba(251,191,36,0.15);
}
.dd-btn-again {
    background: rgba(74,222,128,0.15); color: #4ade80;
    border-color: rgba(74,222,128,0.3);
}
.dd-btn-again:hover {
    background: rgba(74,222,128,0.25); color: #86efac;
}

.deck-showcase-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    margin: 0.5rem 0;
}

.deck-panel {
    background: rgba(15, 10, 25, 0.7);
    border: 1px solid rgba(45, 27, 78, 0.8);
    border-radius: 14px;
    padding: 1rem 1.2rem;
    transition: border-color 0.3s;
}
.deck-panel:hover {
    border-color: rgba(255, 215, 0, 0.4);
}

.deck-panel-header {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 0.8rem;
}
.deck-panel-name {
    font-family: 'Cinzel', serif;
    font-size: 1rem;
    font-weight: 700;
    color: #ffd700;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.3);
}
.deck-panel-count {
    font-size: 0.75rem;
    color: #8a7ca8;
    font-weight: 600;
}
.deck-panel-header .deck-panel-actions {
    margin-left: auto;
}

.deck-cards-wrapper {
    position: relative; overflow: hidden;
}
.deck-cards-row {
    display: flex; flex-wrap: nowrap;
    gap: 0; align-items: flex-start;
    justify-content: center;
}
.deck-card-slot {
    position: relative; display: inline-block;
    transform: scale(0.85);
    transform-origin: top center;
    margin: 0 -12px;
    transition: transform 0.2s;
}
.deck-card-slot:hover {
    transform: scale(0.92);
    z-index: 5;
}
.deck-slot-empty.deck-slot-lg {
    flex-shrink: 0;
    transform: scale(0.85);
    transform-origin: top center;
    margin: 0 -12px;
    width: 160px; height: 240px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; text-decoration: none;
    border: 2px dashed rgba(139,92,246,0.2);
    border-radius: 10px;
    transition: border-color 0.2s, background 0.2s;
    color: rgba(139,92,246,0.4); font-size: 1.5rem;
}
.deck-slot-empty.deck-slot-lg::after { content: '+'; }
.deck-slot-empty.deck-slot-lg:hover {
    border-color: rgba(139,92,246,0.5);
    background: rgba(139,92,246,0.06);
    color: rgba(139,92,246,0.7);
}
.deck-card-link {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
.deck-card-link:hover .atc {
    box-shadow: 0 0 16px rgba(139,92,246,0.4);
}

.deck-mini-card {
    width: 40px;
    height: 56px;
    border-radius: 4px;
    border: 2px solid #9ca3af;
    overflow: hidden;
    background: #0a0612;
    flex-shrink: 0;
    transition: transform 0.2s, box-shadow 0.2s;
}
.deck-mini-card:hover {
    transform: scale(1.1);
    box-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
    z-index: 2;
}
.deck-mini-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.deck-mini-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #5a4d6e;
    font-size: 0.8rem;
}

.deck-slot-empty {
    width: 40px;
    height: 56px;
    border-radius: 4px;
    border: 2px dashed rgba(100, 80, 140, 0.4);
    background: rgba(15, 10, 25, 0.3);
    flex-shrink: 0;
}

.deck-panel-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.deck-panel-power {
    font-family: 'Cinzel', serif;
    font-size: 0.8rem;
    font-weight: 700;
    color: #e2d9f3;
    text-shadow: 0 0 6px rgba(255, 215, 0, 0.2);
}
.deck-panel-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
.deck-edit-link {
    font-size: 0.75rem;
    font-weight: 600;
    color: #c084fc;
    text-decoration: none;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid rgba(192, 132, 252, 0.3);
    transition: all 0.2s;
}
.deck-edit-link:hover {
    color: #ffd700;
    border-color: rgba(255, 215, 0, 0.5);
    background: rgba(255, 215, 0, 0.08);
}
.deck-delete-btn {
    background: none;
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #ef4444;
    font-size: 0.7rem;
    padding: 2px 6px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}
.deck-delete-btn:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: #ef4444;
}

.deck-new-btn {
    background: rgba(15, 10, 25, 0.5);
    border: 2px dashed rgba(255, 215, 0, 0.3);
    color: #ffd700;
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0.6rem 1rem;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s;
    width: 100%;
}
.deck-new-btn:hover {
    border-color: rgba(255, 215, 0, 0.6);
    background: rgba(255, 215, 0, 0.08);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.15);
}

.deck-prompt-banner {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(15, 10, 25, 0.7);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 14px;
    padding: 0.9rem 1.4rem;
    margin-top: 0.8rem;
    box-sizing: border-box;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.08);
    animation: deckPromptGlow 3s ease-in-out infinite;
}
@keyframes deckPromptGlow {
    0%, 100% { box-shadow: 0 0 15px rgba(255, 215, 0, 0.06); border-color: rgba(255, 215, 0, 0.25); }
    50% { box-shadow: 0 0 25px rgba(255, 215, 0, 0.12); border-color: rgba(255, 215, 0, 0.45); }
}
.deck-prompt-banner .deck-prompt-icon {
    font-size: 1.6rem;
    flex-shrink: 0;
}
.deck-prompt-banner .deck-prompt-content {
    flex: 1;
    min-width: 0;
}
.deck-prompt-banner .deck-prompt-title {
    font-family: 'Cinzel', serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: #ffd700;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}
.deck-prompt-banner .deck-prompt-text {
    font-size: 0.78rem;
    color: #8a7ca8;
    line-height: 1.3;
    margin-top: 0.2rem;
}
.deck-prompt-banner .deck-prompt-btn {
    font-size: 0.85rem;
    padding: 0.55rem 1.4rem;
    flex-shrink: 0;
    white-space: nowrap;
}
@media (max-width: 600px) {
    .deck-prompt-banner {
        flex-direction: column;
        text-align: center;
        gap: 0.6rem;
        padding: 1rem;
    }
}

.fuse-ready-glow {
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.35), inset 0 0 6px rgba(34, 197, 94, 0.1);
    border-color: rgba(34, 197, 94, 0.5) !important;
}
.fuse-ready-glow .atc-frame {
    border-color: rgba(34, 197, 94, 0.4) !important;
}

.fuse-divider {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    width: 100%;
    grid-column: 1 / -1;
    margin: 1rem 0 0.5rem;
}
.fuse-divider-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.4), transparent);
}
.fuse-divider-label {
    font-family: 'Cinzel', serif;
    font-size: 0.75rem;
    color: #8a7ca8;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
}
.fuse-line-green {
    background: linear-gradient(90deg, transparent, rgba(34, 197, 94, 0.4), transparent);
}
.fuse-label-green {
    color: #22c55e;
    text-shadow: 0 0 8px rgba(34, 197, 94, 0.3);
}
.fuse-all-inline-btn {
    padding: 4px 14px;
    border: 1px solid rgba(34, 197, 94, 0.5);
    border-radius: 20px;
    background: rgba(34, 197, 94, 0.12);
    color: #22c55e;
    font-family: 'Cinzel', serif;
    font-size: 0.7rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
    letter-spacing: 0.05em;
    white-space: nowrap;
}
.fuse-all-inline-btn:hover {
    background: rgba(34, 197, 94, 0.25);
    box-shadow: 0 0 12px rgba(34, 197, 94, 0.3);
    transform: scale(1.05);
}

.nsfw-banner {
    margin: 0.8rem 0;
}
.nsfw-toggle-premium {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 20px;
    background: linear-gradient(135deg, rgba(30, 10, 20, 0.9), rgba(60, 15, 30, 0.9));
    border: 1px solid rgba(220, 38, 38, 0.3);
    border-radius: 12px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.4s;
}
.nsfw-toggle-premium:hover {
    border-color: rgba(239, 68, 68, 0.6);
    box-shadow: 0 0 20px rgba(220, 38, 38, 0.2);
}
.nsfw-toggle-premium.nsfw-active {
    border-color: rgba(239, 68, 68, 0.7);
    background: linear-gradient(135deg, rgba(60, 15, 20, 0.95), rgba(100, 20, 40, 0.9));
    box-shadow: 0 0 30px rgba(220, 38, 38, 0.3), inset 0 0 20px rgba(220, 38, 38, 0.1);
}
.nsfw-toggle-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 30% 50%, rgba(220, 38, 38, 0.08), transparent 60%);
    pointer-events: none;
}
.nsfw-toggle-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(220, 38, 38, 0.15);
    border: 1px solid rgba(220, 38, 38, 0.3);
    flex-shrink: 0;
    transition: all 0.3s;
}
.nsfw-active .nsfw-toggle-icon-wrap {
    background: rgba(239, 68, 68, 0.3);
    border-color: rgba(239, 68, 68, 0.6);
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.4);
}
.nsfw-eye-icon {
    width: 20px;
    height: 20px;
    color: #ef4444;
    transition: all 0.3s;
}
.nsfw-active .nsfw-eye-icon {
    color: #fca5a5;
    filter: drop-shadow(0 0 4px rgba(239, 68, 68, 0.6));
}
.nsfw-toggle-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    flex: 1;
}
.nsfw-toggle-label {
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    font-weight: 700;
    color: #fca5a5;
    letter-spacing: 0.08em;
}
.nsfw-toggle-status {
    font-size: 0.65rem;
    color: rgba(252, 165, 165, 0.5);
    letter-spacing: 0.05em;
}
.nsfw-active .nsfw-toggle-status { color: rgba(252, 165, 165, 0.8); }
.nsfw-toggle-switch {
    width: 44px;
    height: 24px;
    background: rgba(100, 30, 50, 0.5);
    border-radius: 12px;
    border: 1px solid rgba(220, 38, 38, 0.3);
    position: relative;
    flex-shrink: 0;
    transition: all 0.3s;
}
.nsfw-active .nsfw-toggle-switch {
    background: rgba(220, 38, 38, 0.4);
    border-color: rgba(239, 68, 68, 0.6);
}
.nsfw-toggle-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #dc2626;
    transition: transform 0.3s;
    box-shadow: 0 0 6px rgba(220, 38, 38, 0.5);
}
.nsfw-active .nsfw-toggle-knob {
    background: #ef4444;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.7);
}

.fuse-all-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(8px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    animation: fuseOverlayIn 0.4s ease forwards;
}
@keyframes fuseOverlayIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.fuse-all-modal {
    background: linear-gradient(160deg, rgba(16, 8, 32, 0.98), rgba(25, 14, 48, 0.98));
    border: 1px solid rgba(139, 92, 246, 0.35);
    border-radius: 20px;
    padding: 2rem;
    max-width: 700px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 0 60px rgba(139, 92, 246, 0.2), 0 0 120px rgba(139, 92, 246, 0.05), inset 0 1px 0 rgba(255,255,255,0.05);
    transform: scale(0.9) translateY(20px);
    animation: fuseModalIn 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.1s forwards;
}
@keyframes fuseModalIn {
    from { transform: scale(0.9) translateY(20px); opacity: 0; }
    to { transform: scale(1) translateY(0); opacity: 1; }
}
.fuse-modal-header {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    justify-content: center;
    margin-bottom: 0.3rem;
}
.fuse-modal-icon {
    font-size: 2rem;
    color: #22c55e;
    text-shadow: 0 0 15px rgba(34, 197, 94, 0.5);
    animation: fuseIconPulse 2s ease-in-out infinite;
}
@keyframes fuseIconPulse {
    0%, 100% { transform: scale(1); text-shadow: 0 0 15px rgba(34,197,94,0.5); }
    50% { transform: scale(1.1); text-shadow: 0 0 25px rgba(34,197,94,0.8); }
}
.fuse-modal-title {
    font-family: 'Cinzel', serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffd700;
    text-shadow: 0 0 12px rgba(255, 215, 0, 0.4);
    letter-spacing: 0.05em;
}
.fuse-modal-stats-row {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin: 0.8rem 0 1.2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(139, 92, 246, 0.15);
}
.fuse-stat-box {
    text-align: center;
    padding: 0.6rem 1rem;
    background: rgba(139, 92, 246, 0.08);
    border: 1px solid rgba(139, 92, 246, 0.15);
    border-radius: 10px;
    min-width: 80px;
}
.fuse-stat-num {
    font-family: 'Cinzel', serif;
    font-size: 1.4rem;
    font-weight: 700;
    color: #ffd700;
    display: block;
    text-shadow: 0 0 6px rgba(255,215,0,0.3);
}
.fuse-stat-label {
    font-size: 0.6rem;
    color: #8a7ca8;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.fuse-section-label {
    font-family: 'Cinzel', serif;
    font-size: 0.8rem;
    color: #ffd700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 1rem 0 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.fuse-section-label::before,
.fuse-section-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,215,0,0.25), transparent);
}
.fuse-modal-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.fuse-result-card {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.7rem 0.9rem;
    background: rgba(15, 10, 28, 0.5);
    border: 1px solid color-mix(in srgb, var(--frc) 20%, transparent);
    border-radius: 12px;
    opacity: 0;
    transform: translateX(-30px);
    animation: fuseCardSlideIn 0.4s ease forwards;
    position: relative;
    overflow: hidden;
    margin-bottom: 0.5rem;
}
.fuse-result-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--frc, #9ca3af);
    border-radius: 3px 0 0 3px;
}
@keyframes fuseCardSlideIn {
    from { opacity: 0; transform: translateX(-30px); }
    to { opacity: 1; transform: translateX(0); }
}
.fuse-result-card.fuse-levelup {
    border-color: color-mix(in srgb, var(--frc) 40%, transparent);
    background: linear-gradient(90deg, rgba(34,197,94,0.06), rgba(15,10,28,0.5));
}
.fuse-result-card.fuse-maxed {
    border-color: rgba(255,215,0,0.4);
    background: linear-gradient(90deg, rgba(255,215,0,0.06), rgba(15,10,28,0.5));
}
.fuse-result-card.fuse-maxed::before {
    background: linear-gradient(180deg, #ffd700, #ff8c00);
}
.fuse-result-card:hover {
    border-color: color-mix(in srgb, var(--frc) 55%, transparent);
    background: rgba(15, 10, 28, 0.7);
}
.fuse-result-img-wrap {
    width: 52px;
    height: 68px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid var(--frc, #9ca3af);
    flex-shrink: 0;
    background: #0a0612;
    box-shadow: 0 0 10px color-mix(in srgb, var(--frc) 20%, transparent);
}
.fuse-result-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.fuse-result-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5a4d6e;
    font-size: 1.2rem;
}
.fuse-result-info {
    flex: 1;
    min-width: 0;
}
.fuse-result-card .fuse-result-name {
    font-family: 'Cinzel', serif;
    font-size: 0.82rem;
    font-weight: 700;
    color: #e2daf0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}
.fuse-result-card .fuse-result-rarity {
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.fuse-result-lvl-wrap {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 3px;
}
.fuse-lvl-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    font-family: 'Cinzel', serif;
}
.fuse-lvl-old {
    background: rgba(100,80,140,0.2);
    color: #8a7ca8;
    border: 1px solid rgba(100,80,140,0.2);
}
.fuse-lvl-arrow {
    color: #22c55e;
    font-size: 0.8rem;
    font-weight: 700;
}
.fuse-lvl-new {
    background: rgba(34,197,94,0.15);
    color: #22c55e;
    border: 1px solid rgba(34,197,94,0.25);
}
.fuse-lvl-max {
    background: linear-gradient(135deg, rgba(255,215,0,0.2), rgba(255,140,0,0.2));
    color: #ffd700;
    border: 1px solid rgba(255,215,0,0.3);
    text-shadow: 0 0 6px rgba(255,215,0,0.4);
}
.fuse-result-xp-bar {
    width: 100%;
    height: 5px;
    background: rgba(60,40,90,0.4);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 3px;
}
.fuse-result-xp-fill {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, #7c3aed, #a855f7);
    transition: width 0.8s cubic-bezier(0.34,1.56,0.64,1);
    box-shadow: 0 0 6px rgba(139,92,246,0.5);
}
.fuse-result-xp-fill.xp-max {
    background: linear-gradient(90deg, #ffd700, #ff8c00);
    box-shadow: 0 0 8px rgba(255,215,0,0.5);
}
.fuse-result-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex-shrink: 0;
}
.fuse-consumed-badge {
    font-size: 0.6rem;
    color: #ef4444;
    background: rgba(239,68,68,0.1);
    border: 1px solid rgba(239,68,68,0.2);
    padding: 1px 5px;
    border-radius: 4px;
    font-weight: 600;
}
.fuse-xp-text {
    font-size: 0.6rem;
    color: #8a7ca8;
    text-align: right;
}
.fuse-levelup-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.6rem;
    font-weight: 700;
    color: #22c55e;
    background: rgba(34,197,94,0.12);
    border: 1px solid rgba(34,197,94,0.25);
    padding: 1px 6px;
    border-radius: 4px;
    animation: fuseTagGlow 1.5s ease-in-out infinite;
}
.fuse-max-tag {
    color: #ffd700;
    background: rgba(255,215,0,0.12);
    border-color: rgba(255,215,0,0.3);
}
@keyframes fuseTagGlow {
    0%, 100% { box-shadow: none; }
    50% { box-shadow: 0 0 8px rgba(34,197,94,0.3); }
}
.fuse-modal-close {
    display: flex;
    justify-content: center;
    margin-top: 1.2rem;
}
.fuse-close-btn {
    padding: 0.5rem 2rem;
    border: 1px solid rgba(139,92,246,0.3);
    background: rgba(139,92,246,0.1);
    color: #c4b5fd;
    border-radius: 8px;
    font-family: 'Cinzel', serif;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}
.fuse-close-btn:hover {
    background: rgba(139,92,246,0.2);
    border-color: rgba(139,92,246,0.5);
    color: #e2daf0;
}
@media (max-width: 600px) {
    .fuse-all-modal { padding: 1.2rem; }
    .fuse-modal-stats-row { gap: 0.8rem; }
    .fuse-stat-box { min-width: 60px; padding: 0.4rem 0.6rem; }
    .fuse-stat-num { font-size: 1.1rem; }
}

.nav-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    background: rgba(167, 139, 250, 0.1);
    border: 1px solid rgba(167, 139, 250, 0.25);
    border-radius: 8px;
    cursor: pointer;
    padding: 8px 10px;
    z-index: 10;
    transition: background 0.3s, border-color 0.3s;
    -webkit-tap-highlight-color: transparent;
}
.nav-hamburger:hover,
.nav-hamburger:active {
    background: rgba(167, 139, 250, 0.2);
    border-color: rgba(167, 139, 250, 0.4);
}
.nav-hamburger span {
    display: block;
    width: 22px;
    height: 2.5px;
    background: #c084fc;
    border-radius: 2px;
    transition: all 0.3s ease;
    transform-origin: center;
}
.nav-hamburger-active {
    background: rgba(167, 139, 250, 0.2);
}
.nav-hamburger-active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}
.nav-hamburger-active span:nth-child(2) {
    opacity: 0;
}
.nav-hamburger-active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

@media (max-width: 1100px) {
    .deck-card-slot { transform: scale(0.75); margin: 0 -16px; }
    .deck-card-slot:hover { transform: scale(0.82); }
    .deck-slot-empty.deck-slot-lg { transform: scale(0.75); margin: 0 -16px; }
}
@media (max-width: 700px) {
    .deck-card-slot { transform: scale(0.7); margin: 0 -18px; }
    .deck-card-slot:hover { transform: scale(0.76); }
    .deck-slot-empty.deck-slot-lg { transform: scale(0.7); margin: 0 -18px; }
}