/* ============================================
   RAKION REMAKE - TIENDA DE EVENTO
   Professional Dark Theme - Final Version
   ============================================ */
:root {
    --bg-base: #0a0a0a;
    --bg-primary: #0f0f0f;
    --bg-secondary: #1a1a1a;
    --bg-card: #242424;
    --bg-card-hover: #2a2a2a;
    --bg-input: #1a1a1a;
    --text-primary: #e0e0e0;
    --text-secondary: #a0a0a0;
    --text-muted: #707070;
    --accent: #8c8c8c;
    --accent-hover: #a0a0a0;
    --accent-subtle: rgba(140,140,140,0.08);
    --gold: #c0a060;
    --gold-subtle: rgba(192,160,96,0.08);
    --points-purple: #8b5cf6;
    --points-purple-subtle: rgba(139,92,246,0.10);
    --cells-accent: #6b4fa0;
    --cells-accent-hover: #7b5fb0;
    --cells-border: rgba(107,79,160,0.4);
    --cells-subtle: rgba(107,79,160,0.1);
    --success: #4a9a6a;
    --success-subtle: rgba(74,154,106,0.08);
    --danger: #c04040;
    --danger-subtle: rgba(192,64,64,0.08);
    --warning: #c0a060;
    --border: #2a2a2a;
    --border-light: #3a3a3a;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.5);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.6);
    --shadow-lg: 0 10px 25px rgba(0,0,0,0.7);
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; background: var(--bg-base); color: var(--text-primary); line-height: 1.6; min-height: 100vh; overflow-x: hidden; }
.scanlines { position: fixed; inset: 0; pointer-events: none; z-index: 9999; background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.02) 2px, rgba(0,0,0,0.02) 4px); opacity: 0.3; }
.bg-ambient, .bg-particles { position: fixed; inset: 0; pointer-events: none; z-index: 0; }

@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(100px); } to { opacity: 1; transform: translateX(0); } }
@keyframes pulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.05)} }
@keyframes spin { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
@keyframes bounce { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(10px)} }
@keyframes cellsGlow { 0%,100%{box-shadow:0 0 20px rgba(107,79,160,0.2)} 50%{box-shadow:0 0 40px rgba(107,79,160,0.4)} }
@keyframes kenBurns { 0%{transform:scale(1)} 100%{transform:scale(1.1)} }
@keyframes cardShine { 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }

/* Landing */
.landing-screen { position: fixed; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; }
.bg-slider { position: absolute; inset: 0; z-index: 0; }
.bg-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.5s ease; }
.bg-slide.active { opacity: 1; animation: kenBurns 20s ease-in-out infinite alternate; }
.bg-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.7) 100%); z-index: 1; }
.landing-nav { position: absolute; top: 0; left: 0; right: 0; z-index: 10; padding: 1.5rem 2rem 0 2rem; }
.landing-nav-inner { max-width: 1400px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; }
.nav-logo { display: flex; align-items: center; gap: 0.75rem; }
.nav-logo-img { width: 48px; height: 48px; object-fit: contain; }
.nav-logo-text { font-family: 'Cinzel', serif; font-size: 1.5rem; font-weight: 700; color: #fff; letter-spacing: 2px; }
.text-accent { color: #8b5cf6; }
.nav-menu { display: flex; gap: 0.25rem; align-items: center; }
.nav-item { position: relative; }
.nav-link { display: block; padding: 0.6rem 1rem; color: #aaa; font-size: 0.8rem; font-weight: 600; letter-spacing: 1px; cursor: pointer; transition: var(--transition-fast); white-space: nowrap; border-radius: var(--radius-xs); text-decoration: none; }

.nav-link:link, .nav-link:visited { color: #aaa; text-decoration: none; }
.nav-link:hover { color: #fff; }
.nav-link.highlight { color: #8b5cf6; }
.nav-dropdown { position: absolute; top: 100%; left: 0; min-width: 200px; background: rgba(10,10,10,0.95); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.5rem 0; opacity: 0; visibility: hidden; transform: translateY(10px); transition: all 0.2s ease; z-index: 20; backdrop-filter: blur(10px); }
.nav-item:hover .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown-inner { display: flex; flex-direction: column; }
.dropdown-inner a { padding: 0.5rem 1.25rem; color: #aaa; font-size: 0.8rem; text-decoration: none; transition: var(--transition-fast); white-space: nowrap; }
.dropdown-inner a:hover { color: #fff; background: rgba(255,255,255,0.05); }
.scroll-indicator { position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); z-index: 5; animation: bounce 2s infinite; }
.scroll-indicator svg { width: 24px; height: 24px; color: #fff; opacity: 0.6; }

/* Login */
.login-screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 1000; }
.login-wrapper { width: 100%; max-width: 440px; padding: 1rem; }
.login-card { position: relative; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-2xl); overflow: hidden; animation: fadeInUp 0.6s ease-out; }
.login-glow { position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: conic-gradient(from 0deg, transparent, rgba(140,140,140,0.08), transparent, rgba(192,160,96,0.08), transparent); animation: spin 10s linear infinite; pointer-events: none; }
.login-content { position: relative; padding: 2.5rem 2rem; z-index: 1; }
.login-back { position: absolute; top: 1rem; right: 1rem; background: none; border: none; color: #999; cursor: pointer; }
.login-back:hover { color: #fff; }
.login-back svg { width: 20px; height: 20px; }
.login-logo-container { width: 80px; height: 80px; margin: 0 auto 1.5rem; border-radius: var(--radius-lg); overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--bg-secondary); border: 1px solid var(--border-light); }
.login-logo-img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.login-title { font-size: 1.75rem; font-weight: 800; text-align: center; background: linear-gradient(135deg, var(--text-primary), var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.login-subtitle { text-align: center; color: var(--text-muted); font-size: 0.875rem; margin-top: 0.5rem; margin-bottom: 2rem; }
.login-form { display: flex; flex-direction: column; gap: 1.25rem; }
.input-group { display: flex; flex-direction: column; gap: 0.5rem; }
.input-label { font-size: 0.8125rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 1px; }
.input-wrapper { position: relative; display: flex; align-items: center; }
.input-icon { position: absolute; left: 0.875rem; width: 18px; height: 18px; color: var(--text-muted); pointer-events: none; }
.input-field { width: 100%; padding: 0.75rem 1rem 0.75rem 2.75rem; background: var(--bg-input); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-primary); font-size: 0.9375rem; font-family: 'Inter', sans-serif; transition: var(--transition-base); outline: none; }
.input-field:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-subtle); }
.input-field::placeholder { color: var(--text-muted); }
.toggle-password { position: absolute; right: 0.5rem; background: none; border: none; color: var(--text-muted); cursor: pointer; }
.toggle-password svg { width: 18px; height: 18px; }
.error-message { display: none; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; background: var(--danger-subtle); border: 1px solid rgba(192,64,64,0.3); border-radius: var(--radius-sm); color: var(--danger); font-size: 0.8125rem; }
.error-message svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn-login { display: flex; align-items: center; justify-content: center; gap: 0.75rem; width: 100%; padding: 0.875rem 1.5rem; background: linear-gradient(135deg, #555, #3a3a3a); color: #fff; border: 1px solid var(--border-light); border-radius: var(--radius-sm); font-size: 1rem; font-weight: 600; cursor: pointer; transition: var(--transition-base); }
.btn-login:hover { box-shadow: 0 0 30px rgba(140,140,140,0.15); transform: translateY(-1px); }
.btn-login svg { width: 18px; height: 18px; }

/* Tabs */
.tab-navigation { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--border); }
.tab-btn { padding: 0.75rem 1.5rem; background: transparent; border: none; color: var(--text-muted); font-family: 'Inter', sans-serif; font-size: 0.9375rem; font-weight: 600; cursor: pointer; transition: var(--transition-base); position: relative; white-space: nowrap; }
.tab-btn:hover { color: var(--text-primary); }
.tab-btn.active { color: #8b5cf6; }
.tab-btn.active::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background: #8b5cf6; }
.tab-content { display: none; animation: fadeIn 0.3s ease-out; }
.tab-content.active { display: block; }

/* Main */
.main-screen { position: relative; z-index: 1; min-height: 100vh; background: var(--bg-base); }
.navbar { position: sticky; top: 0; z-index: 100; background: rgba(26,26,26,0.95); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); }
.nav-inner { max-width: 1500px; margin: 0 auto; padding: 0.75rem 2rem; display: flex; align-items: center; justify-content: space-between; }
.nav-brand { display: flex; align-items: center; gap: 0.75rem; font-size: 1.05rem; font-weight: 700; }
.nav-brand .nav-logo-img { width: 36px; height: 36px; object-fit: contain; border-radius: var(--radius-sm); }
.nav-actions { display: flex; align-items: center; gap: 0.75rem; }
.user-badge { display: flex; align-items: center; gap: 0.625rem; padding: 0.375rem 1rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: 50px; font-size: 0.8125rem; font-weight: 500; }
.user-avatar { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #555, #3a3a3a); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.75rem; color: #fff; }
.points-badge { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 1rem; background: var(--points-purple-subtle); border: 1px solid rgba(139,92,246,0.38); border-radius: 50px; color: var(--points-purple); font-weight: 700; font-size: 0.875rem; }
.points-icon { width: 20px; height: 20px; color: var(--points-purple); }
.points-badge.pulse { animation: pulse 0.4s ease; }
.btn-orders, .btn-landing { background: transparent; border: 1px solid #333; color: #999; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; transition: var(--transition-base); display: flex; align-items: center; justify-content: center; position: relative; }
.btn-orders:hover, .btn-landing:hover { border-color: #f59e0b; color: #f59e0b; }
.btn-orders svg, .btn-landing svg { width: 18px; height: 18px; }
.order-count-badge { position: absolute; top: -6px; right: -6px; background: #ef4444; color: #fff; font-size: 0.6rem; font-weight: 700; width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.btn-logout { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; background: transparent; border: 1px solid var(--border-light); color: var(--text-muted); border-radius: 50%; cursor: pointer; }
.btn-logout:hover { border-color: var(--danger); color: var(--danger); background: var(--danger-subtle); }
.btn-logout svg { width: 18px; height: 18px; }
.main-content { max-width: 1500px; margin: 0 auto; padding: 2rem; }
.section-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; }
.section-title { font-size: 1.125rem; font-weight: 700; white-space: nowrap; }
.section-line { flex: 1; height: 1px; background: var(--border); position: relative; }
.section-line::after { content: ''; position: absolute; left: 0; top: 0; width: 60px; height: 100%; background: #8b5cf6; }

/* Characters */
.character-section { margin-bottom: 2.5rem; }
.character-tabs { display: flex; gap: 0.625rem; overflow-x: auto; padding: 0.25rem; scrollbar-width: none; }
.character-tabs::-webkit-scrollbar { display: none; }
.char-tab { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1.25rem; background: rgba(30,30,40,0.8); border: 1px solid rgba(107,79,160,0.2); border-radius: var(--radius-lg); cursor: pointer; transition: var(--transition-base); white-space: nowrap; backdrop-filter: blur(5px); }
.char-tab:hover { border-color: rgba(107,79,160,0.5); transform: translateY(-2px); box-shadow: 0 4px 15px rgba(107,79,160,0.2); }
.char-tab.active { background: linear-gradient(135deg, rgba(107,79,160,0.4), rgba(139,92,246,0.3)); border-color: #8b5cf6; color: #fff; transform: translateY(-2px); box-shadow: 0 4px 20px rgba(139,92,246,0.3); }
.char-tab-icon { width: 38px; height: 38px; border-radius: 50%; background: rgba(0,0,0,0.3); display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); }
.char-tab-icon img { width: 100%; height: 100%; object-fit: cover; }
.char-tab-info { display: flex; flex-direction: column; }
.char-tab-name { font-weight: 600; font-size: 0.875rem; }
.char-tab-class { font-size: 0.75rem; opacity: 0.7; }

/* Store */
.store-section { margin-bottom: 2.5rem; }
.equipment-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 1.25rem; }
.equipment-card { background: rgba(20,20,30,0.9); border: 1px solid rgba(107,79,160,0.15); border-radius: var(--radius-lg); overflow: hidden; transition: var(--transition-base); position: relative; backdrop-filter: blur(5px); }
.equipment-card:hover { border-color: rgba(107,79,160,0.4); box-shadow: 0 8px 30px rgba(107,79,160,0.2); transform: translateY(-2px); }
.equipment-card::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(139,92,246,0.02) 0%, transparent 70%); pointer-events: none; z-index: 0; animation: cardShine 8s linear infinite; }
.equipment-card-header { padding: 1rem 1.25rem; background: rgba(107,79,160,0.08); border-bottom: 1px solid rgba(107,79,160,0.15); display: flex; align-items: center; gap: 0.75rem; position: relative; z-index: 1; }
.equipment-card-icon { width: 34px; height: 34px; border-radius: var(--radius-sm); background: rgba(107,79,160,0.15); display: flex; align-items: center; justify-content: center; }
.equipment-card-icon svg { width: 18px; height: 18px; color: #8b5cf6; }
.equipment-card-title { font-weight: 600; font-size: 0.9375rem; color: #b8a0e0; }
.equipment-items { padding: 0.625rem; display: flex; flex-direction: column; gap: 0.375rem; max-height: 380px; overflow-y: auto; position: relative; z-index: 1; }
.item-row { display: flex; align-items: center; gap: 0.875rem; padding: 0.75rem; background: rgba(0,0,0,0.2); border: 1px solid transparent; border-radius: var(--radius-md); transition: var(--transition-base); position: relative; }
.item-row:hover { border-color: rgba(107,79,160,0.3); transform: translateX(4px); background: rgba(107,79,160,0.08); }
.item-row.equipped { border-color: var(--success); background: var(--success-subtle); }
.item-row.equipped::after { content: 'EQUIPADO'; position: absolute; top: 0.5rem; right: 0.75rem; font-size: 0.6rem; font-weight: 700; color: var(--success); background: rgba(74,154,106,0.15); padding: 2px 8px; border-radius: 50px; }
.item-image { width: 50px; height: 50px; border-radius: var(--radius-sm); background: rgba(0,0,0,0.4); border: 1px solid rgba(107,79,160,0.2); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.item-image img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.item-details { flex: 1; min-width: 0; }
.item-name { font-weight: 600; font-size: 0.8125rem; }
.item-price { font-weight: 700; font-size: 0.78125rem; color: var(--points-purple); margin-top: 0.25rem; }
.item-actions { display: flex; gap: 0.375rem; }
.btn-sm { padding: 0.375rem 0.875rem; border-radius: 50px; font-size: 0.71875rem; font-weight: 600; cursor: pointer; transition: var(--transition-base); border: none; white-space: nowrap; font-family: 'Inter', sans-serif; }
.btn-buy { background: rgba(107,79,160,0.5); color: #fff; border: 1px solid rgba(107,79,160,0.4); }
.btn-buy:hover { background: rgba(139,92,246,0.6); transform: translateY(-1px); }
.btn-equip { background: var(--success); color: #fff; }
.btn-equip:hover { background: #3a8a5a; transform: translateY(-1px); }
.btn-unequip { background: transparent; color: var(--text-secondary); border: 1px solid var(--border-light); }
.btn-unequip:hover { border-color: var(--danger); color: var(--danger); }

/* Cells */
.cells-section { margin-bottom: 2.5rem; }
.cells-title { color: #b8a0e0; display: flex; align-items: center; gap: 0.5rem; }
.cells-line::after { background: var(--cells-accent) !important; width: 80px !important; }
.cells-container { background: linear-gradient(145deg, rgba(26,26,46,0.9), rgba(36,36,64,0.9)); border: 1px solid var(--cells-border); border-radius: var(--radius-lg); overflow: hidden; animation: cellsGlow 3s infinite; position: relative; backdrop-filter: blur(5px); }
.cells-container::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(107,79,160,0.04) 0%, transparent 70%); pointer-events: none; z-index: 0; animation: cardShine 8s linear infinite; }
.cells-container-header { padding: 1rem 1.25rem; background: rgba(107,79,160,0.1); border-bottom: 1px solid var(--cells-border); display: flex; align-items: center; gap: 0.75rem; position: relative; z-index: 1; }
.cells-container-icon { width: 34px; height: 34px; border-radius: var(--radius-sm); background: var(--cells-subtle); display: flex; align-items: center; justify-content: center; border: 1px solid var(--cells-border); }
.cells-container-icon svg { width: 18px; height: 18px; color: var(--cells-accent); }
.cells-container-title { font-weight: 600; font-size: 0.9375rem; color: #b8a0e0; }
.cells-grid-inner { padding: 1rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 0.75rem; position: relative; z-index: 1; }
.cell-item { display: flex; align-items: center; gap: 0.875rem; padding: 0.875rem 1rem; background: rgba(0,0,0,0.3); border: 1px solid rgba(107,79,160,0.2); border-radius: var(--radius-md); transition: var(--transition-base); }
.cell-item:hover { border-color: var(--cells-border); transform: translateX(4px); background: rgba(107,79,160,0.1); }
.cell-item.equipped { border-color: var(--cells-accent); background: rgba(107,79,160,0.15); }
.cell-item.equipped::after { content: 'EQUIPADO'; position: absolute; top: 0.5rem; right: 0.75rem; font-size: 0.6rem; font-weight: 700; color: #b8a0e0; background: rgba(107,79,160,0.3); padding: 2px 8px; border-radius: 50px; }
.cell-item-image { width: 52px; height: 52px; border-radius: var(--radius-sm); background: rgba(0,0,0,0.5); border: 1px solid var(--cells-border); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.cell-item-image img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.cell-item-info { flex: 1; }
.cell-item-name { font-weight: 600; font-size: 0.875rem; color: #d0c0f0; }
.cell-item-price { font-weight: 700; font-size: 0.8125rem; color: var(--gold); margin-top: 0.25rem; }
.cell-item-actions { display: flex; gap: 0.375rem; }
.btn-cells-buy { background: var(--cells-accent); color: #fff; border: 1px solid var(--cells-border); }
.btn-cells-buy:hover { background: var(--cells-accent-hover); transform: translateY(-1px); }
.btn-cells-equip { background: #4a9a6a; color: #fff; }
.btn-cells-equip:hover { background: #3a8a5a; transform: translateY(-1px); }
.btn-cells-unequip { background: transparent; color: var(--text-secondary); border: 1px solid var(--border-light); }
.btn-cells-unequip:hover { border-color: var(--danger); color: var(--danger); }

/* ============================================
   COUPON - PANTALLA COMPLETA CON FONDO
   ============================================ */
#tab-coupon { position: relative; min-height: 100vh; margin: -2rem; padding: 2rem; }
.coupon-bg-slider { position: absolute; inset: 0; z-index: 0; }
.coupon-bg-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1.5s ease; }
.coupon-bg-slide.active { opacity: 1; animation: kenBurns 20s ease-in-out infinite alternate; }
.coupon-bg-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.75); z-index: 0; }
.coupon-section-full { max-width: 600px; margin: 0 auto; padding: 1rem; position: relative; z-index: 1; }
.coupon-panel { background: rgba(20,20,35,0.8); border: 1px solid rgba(107,79,160,0.4); border-radius: var(--radius-xl); padding: 2.5rem; backdrop-filter: blur(15px); box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 40px rgba(107,79,160,0.15); position: relative; overflow: hidden; }
.coupon-panel::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(139,92,246,0.04) 0%, transparent 70%); pointer-events: none; z-index: 0; animation: cardShine 8s linear infinite; }
.coupon-panel-header { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-bottom: 1.5rem; position: relative; z-index: 1; }
.coupon-panel-icon { width: 44px; height: 44px; border-radius: var(--radius-sm); background: rgba(107,79,160,0.25); display: flex; align-items: center; justify-content: center; border: 1px solid rgba(107,79,160,0.5); }
.coupon-panel-icon svg { width: 24px; height: 24px; color: #8b5cf6; }
.coupon-panel-title { font-family: 'Cinzel', serif; font-size: 1.4rem; font-weight: 700; color: #8b5cf6; letter-spacing: 3px; }
.coupon-resources { display: flex; align-items: center; justify-content: center; gap: 2rem; padding: 1.25rem; background: rgba(0,0,0,0.4); border-radius: var(--radius-sm); margin-bottom: 1.5rem; border: 1px solid rgba(107,79,160,0.2); position: relative; z-index: 1; }
.resource-item { display: flex; align-items: center; gap: 0.5rem; }
.resource-icon { font-size: 1.3rem; }
.resource-value { font-weight: 700; font-size: 1rem; color: #fff; }
.resource-label { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; }
.resource-divider { width: 1px; height: 30px; background: rgba(107,79,160,0.3); }
.coupon-alert { display: flex; align-items: flex-start; gap: 0.75rem; padding: 1rem 1.25rem; background: rgba(245,158,11,0.06); border: 1px solid rgba(245,158,11,0.25); border-left: 3px solid #f59e0b; border-radius: var(--radius-sm); margin-bottom: 1.5rem; position: relative; z-index: 1; }
.coupon-alert-icon { font-size: 1.3rem; flex-shrink: 0; }
.coupon-alert-text { font-size: 0.85rem; color: #ccc; line-height: 1.5; }
.coupon-alert-highlight { color: #f59e0b; font-weight: 600; }
.coupon-code-section { margin-bottom: 1.5rem; position: relative; z-index: 1; }
.coupon-code-label { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; color: #aaa; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.5px; }
.coupon-code-label svg { color: #8b5cf6; }
.coupon-code-inputs { display: flex; align-items: center; justify-content: center; gap: 0.35rem; margin-bottom: 0.5rem; }
.coupon-code-part { width: 90px; height: 55px; background: rgba(0,0,0,0.5); border: 2px solid rgba(107,79,160,0.3); border-radius: var(--radius-sm); color: #fff; text-align: center; font-size: 1.2rem; font-family: 'Courier New', monospace; letter-spacing: 3px; text-transform: uppercase; outline: none; transition: var(--transition-fast); }
.coupon-code-part:focus { border-color: #8b5cf6; box-shadow: 0 0 15px rgba(139,92,246,0.4); background: rgba(0,0,0,0.6); }
.coupon-code-part::placeholder { color: #444; font-size: 0.8rem; letter-spacing: 1px; }
.coupon-code-dash { color: #8b5cf6; font-size: 1.8rem; font-weight: 700; user-select: none; }
.coupon-code-format { text-align: center; font-size: 0.75rem; color: #666; margin-top: 0.5rem; }
.coupon-redeem-btn { width: 100%; padding: 1.1rem; background: linear-gradient(135deg, #7c3aed, #6d28d9); color: #fff; border: 1px solid rgba(139,92,246,0.5); border-radius: var(--radius-sm); font-family: 'Cinzel', serif; font-size: 1.1rem; font-weight: 700; letter-spacing: 3px; cursor: pointer; transition: var(--transition-base); text-transform: uppercase; position: relative; z-index: 1; }
.coupon-redeem-btn:hover { background: linear-gradient(135deg, #8b5cf6, #7c3aed); box-shadow: 0 10px 30px rgba(139,92,246,0.5); transform: translateY(-3px); }
.coupon-redeem-btn:active { transform: translateY(0); }
.coupon-redeem-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.coupon-message { margin-top: 1rem; padding: 0.75rem 1rem; border-radius: var(--radius-sm); font-size: 0.85rem; font-weight: 500; display: none; position: relative; z-index: 1; }
.coupon-message.success { display: block; background: rgba(16,185,129,0.15); border: 1px solid rgba(16,185,129,0.3); color: #10b981; }
.coupon-message.error { display: block; background: rgba(239,68,68,0.15); border: 1px solid rgba(239,68,68,0.3); color: #ef4444; }

/* Inventory */
.inventory-section { background: rgba(20,20,30,0.8); border: 1px solid rgba(107,79,160,0.15); border-radius: var(--radius-lg); padding: 1.5rem; backdrop-filter: blur(5px); }
.inventory-count { font-size: 0.78125rem; color: var(--text-muted); background: var(--bg-secondary); padding: 0.25rem 0.75rem; border-radius: 50px; }
.inventory-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0.75rem; }
.inventory-item { background: rgba(0,0,0,0.3); border: 1px solid rgba(107,79,160,0.15); border-radius: var(--radius-md); padding: 1rem; text-align: center; transition: var(--transition-base); }
.inventory-item:hover { border-color: rgba(107,79,160,0.4); transform: translateY(-3px); box-shadow: 0 4px 15px rgba(107,79,160,0.2); }
.inventory-item-image { width: 46px; height: 46px; margin: 0 auto 0.75rem; background: rgba(0,0,0,0.3); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; border: 1px solid rgba(107,79,160,0.2); }
.inventory-item-image img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.inventory-item-name { font-weight: 600; font-size: 0.78125rem; }
.empty-state { grid-column: 1/-1; text-align: center; padding: 3rem 1rem; color: var(--text-muted); }
.empty-state svg { width: 48px; height: 48px; margin-bottom: 1rem; opacity: 0.3; }

/* Modal */
.modal-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,0.85); backdrop-filter: blur(8px); display: none; align-items: center; justify-content: center; }
.modal-overlay.active { display: flex; }
.modal-card { position: relative; background: rgba(30,30,45,0.95); border: 1px solid rgba(107,79,160,0.4); border-radius: var(--radius-xl); width: 90%; max-width: 440px; overflow: hidden; animation: fadeInUp 0.3s ease-out; backdrop-filter: blur(10px); }
.modal-glow { position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: conic-gradient(from 0deg, transparent, rgba(139,92,246,0.08), transparent, rgba(192,160,96,0.08), transparent); animation: spin 8s linear infinite; pointer-events: none; }
.modal-content { position: relative; padding: 2rem; text-align: center; z-index: 1; }
.modal-icon { width: 56px; height: 56px; margin: 0 auto 1rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(107,79,160,0.2); border: 1px solid rgba(107,79,160,0.4); }
.modal-icon svg { width: 28px; height: 28px; color: #8b5cf6; }
.modal-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.5rem; }
.modal-description { color: var(--text-secondary); font-size: 0.875rem; margin-bottom: 1.5rem; }
.modal-actions { display: flex; gap: 0.75rem; justify-content: center; }
.btn-cancel, .btn-confirm { padding: 0.625rem 1.5rem; border-radius: var(--radius-sm); font-weight: 600; font-size: 0.875rem; cursor: pointer; font-family: 'Inter', sans-serif; }
.btn-cancel { background: transparent; border: 1px solid var(--border-light); color: var(--text-secondary); }
.btn-cancel:hover { border-color: var(--text-muted); color: var(--text-primary); }
.btn-confirm { background: linear-gradient(135deg, #7c3aed, #6d28d9); border: 1px solid rgba(139,92,246,0.4); color: #fff; }
.btn-confirm:hover { background: linear-gradient(135deg, #8b5cf6, #7c3aed); box-shadow: 0 4px 15px rgba(139,92,246,0.4); }

/* Toast */
.toast-container { position: fixed; top: 1rem; right: 1rem; z-index: 9999; display: flex; flex-direction: column; gap: 0.5rem; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 0.625rem; padding: 0.75rem 1.25rem; background: rgba(30,30,40,0.95); border: 1px solid rgba(107,79,160,0.3); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); font-size: 0.8125rem; font-weight: 500; animation: slideInRight 0.3s ease-out; pointer-events: auto; min-width: 280px; backdrop-filter: blur(10px); }
.toast.success { border-left: 3px solid var(--success); }
.toast.error { border-left: 3px solid var(--danger); }
.toast.warning { border-left: 3px solid var(--warning); }

/* Orders */
.orders-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 9998; display: none; }
.orders-overlay.open { display: block; }
.orders-panel { position: fixed; top: 0; right: 0; width: 480px; max-width: 95vw; height: 100vh; background: #1a1a1a; border-left: 1px solid #333; z-index: 9999; transform: translateX(100%); transition: transform 0.3s ease; display: flex; flex-direction: column; }
.orders-panel.open { transform: translateX(0); }
.orders-panel-header { padding: 1rem; background: #242424; border-bottom: 1px solid #333; display: flex; justify-content: space-between; align-items: center; }
.orders-panel-title { font-weight: 700; font-size: 0.9rem; }
.orders-panel-close { background: none; border: none; color: #999; cursor: pointer; font-size: 1.2rem; }
.orders-panel-content { flex: 1; overflow-y: auto; padding: 1rem; }
.orders-panel-footer { padding: 1rem; border-top: 1px solid #333; display: flex; gap: 0.5rem; }
.btn-export, .btn-clear-history { flex: 1; padding: 0.5rem; border-radius: 8px; font-size: 0.75rem; font-weight: 600; cursor: pointer; border: 1px solid #333; font-family: 'Inter', sans-serif; }
.btn-export { background: #3a3a3a; color: #fff; }
.btn-clear-history { background: transparent; color: #999; }
.order-card { background: #242424; border: 1px solid #333; border-radius: 12px; margin-bottom: 0.75rem; }
.order-header { padding: 0.5rem 0.875rem; background: rgba(0,0,0,0.3); display: flex; justify-content: space-between; font-size: 0.65rem; }
.order-id { font-weight: 600; color: #aaa; font-family: monospace; }
.order-time { color: #666; }
.order-body { padding: 0.75rem 0.875rem; display: flex; gap: 1rem; justify-content: space-between; }
.order-info { flex: 1; display: flex; flex-direction: column; gap: 0.25rem; }
.order-info>div { display: flex; gap: 0.5rem; font-size: 0.75rem; }
.order-label { color: #666; min-width: 55px; }
.order-value { font-weight: 500; }
.order-value.highlight { color: #60a5fa; font-weight: 600; }
.order-value.gold { color: #f59e0b; font-weight: 700; }
.order-actions { display: flex; flex-direction: column; gap: 0.375rem; }
.btn-deliver { padding: 0.4rem 0.75rem; border-radius: 8px; font-size: 0.65rem; font-weight: 600; cursor: pointer; border: 1px solid; background: rgba(16,185,129,0.15); border-color: rgba(16,185,129,0.3); color: #10b981; }
.orders-empty { text-align: center; padding: 3rem 1rem; color: #666; }
.orders-empty svg { margin-bottom: 1rem; opacity: 0.5; }
.orders-empty p { font-weight: 600; }

@media (max-width: 768px) {
    .nav-inner { padding: 0.5rem 1rem; }
    .main-content { padding: 1rem; }
    .equipment-grid { grid-template-columns: 1fr; }
    .cells-grid-inner { grid-template-columns: 1fr; }
    .orders-panel { width: 100vw; }
    .coupon-code-part { width: 65px; height: 45px; font-size: 0.9rem; }
    #tab-coupon { margin: -1rem; padding: 1rem; }
}
@media (max-width: 480px) {
    .login-content { padding: 1.5rem 1.25rem; }
    .login-title { font-size: 1.5rem; }
    .item-actions, .cell-item-actions { flex-direction: column; }
    .coupon-code-part { width: 55px; height: 40px; font-size: 0.8rem; }
    .coupon-panel { padding: 1.5rem; }
}

/* ============================================
   WAVE UPDATE - FULL SCREEN EVENT SHOP + COUPON GLASS + PARTICLES
   ============================================ */
body {
    background:
        radial-gradient(circle at 12% 10%, rgba(139,92,246,0.18), transparent 28%),
        radial-gradient(circle at 88% 16%, rgba(192,160,96,0.14), transparent 25%),
        #050505;
}
.bg-particles {
    z-index: 2;
    overflow: hidden;
    mix-blend-mode: screen;
}
.rz-particle {
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
    filter: drop-shadow(0 0 8px currentColor);
    animation-name: floatParticle, particlePulse;
    animation-timing-function: linear, ease-in-out;
    animation-iteration-count: infinite, infinite;
}
.rz-particle::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1px;
    height: 34px;
    transform: translate(-50%, -18%) rotate(18deg);
    background: linear-gradient(to bottom, currentColor, transparent);
    opacity: .28;
}
@keyframes floatParticle {
    0% { transform: translate3d(0, 0, 0) scale(.85); }
    50% { transform: translate3d(var(--drift-x, 26px), var(--drift-y, -48px), 0) scale(1.12); }
    100% { transform: translate3d(calc(var(--drift-x, 26px) * -1), -120vh, 0) scale(.75); }
}
@keyframes particlePulse {
    0%, 100% { opacity: .18; box-shadow: 0 0 8px currentColor; }
    50% { opacity: .78; box-shadow: 0 0 18px currentColor, 0 0 32px currentColor; }
}
.main-screen {
    position: relative;
    min-height: 100vh;
    background: #050508;
    isolation: isolate;
    overflow-x: hidden;
}
.main-screen::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgba(5,5,8,.92) 0%, rgba(5,5,8,.44) 45%, rgba(5,5,8,.88) 100%),
        linear-gradient(180deg, rgba(0,0,0,.62), rgba(0,0,0,.88)),
        url('../assets/backgrounds/bg-warrior.webp') center/cover no-repeat;
    opacity: .94;
    transform: scale(1.03);
}
.main-screen::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 16%, rgba(139,92,246,.26), transparent 30%),
        radial-gradient(circle at 82% 28%, rgba(245,158,11,.16), transparent 26%),
        linear-gradient(180deg, transparent 0%, rgba(0,0,0,.42) 100%);
}
.main-screen > .navbar,
.main-screen > .main-content {
    position: relative;
    z-index: 3;
}
.navbar {
    background: linear-gradient(90deg, rgba(6,6,10,.92), rgba(24,15,38,.84), rgba(6,6,10,.92));
    border-bottom: 1px solid rgba(139,92,246,.32);
    box-shadow: 0 8px 30px rgba(0,0,0,.45), 0 0 30px rgba(139,92,246,.08);
}
.nav-inner {
    width: 100%;
    max-width: none;
    padding-left: clamp(1rem, 2vw, 2.4rem);
    padding-right: clamp(1rem, 2vw, 2.4rem);
}
.main-content {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: clamp(1rem, 2vw, 2.25rem);
    min-height: calc(100vh - 64px);
}
.main-content > .tab-navigation {
    width: 100%;
    margin: 0 0 1.35rem;
    padding: .55rem;
    border: 1px solid rgba(139,92,246,.24);
    border-radius: var(--radius-xl);
    background: linear-gradient(135deg, rgba(18,18,28,.72), rgba(40,24,64,.42));
    box-shadow: 0 14px 40px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.05);
    backdrop-filter: blur(14px);
}
.main-content > .tab-navigation .tab-btn {
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.main-content > .tab-navigation .tab-btn.active {
    color: #fff;
    background: linear-gradient(135deg, rgba(139,92,246,.34), rgba(192,160,96,.16));
    box-shadow: inset 0 0 0 1px rgba(139,92,246,.38), 0 0 22px rgba(139,92,246,.18);
}
.main-content > .tab-navigation .tab-btn.active::after { display: none; }
#tab-shop.active {
    min-height: calc(100vh - 154px);
}
.character-section,
.store-section,
.cells-section,
.inventory-section {
    position: relative;
    overflow: hidden;
    padding: clamp(1rem, 1.45vw, 1.55rem);
    border-radius: var(--radius-2xl);
    border: 1px solid rgba(139,92,246,.20);
    background:
        linear-gradient(145deg, rgba(13,13,18,.76), rgba(33,22,54,.44)),
        radial-gradient(circle at 12% 0%, rgba(139,92,246,.18), transparent 34%);
    box-shadow: 0 18px 50px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.035);
    backdrop-filter: blur(10px);
}
.character-section::before,
.store-section::before,
.inventory-section::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(115deg, transparent 0%, rgba(255,255,255,.04) 42%, transparent 58%),
        radial-gradient(circle at 90% 10%, rgba(245,158,11,.10), transparent 28%);
    opacity: .8;
}
.section-header,
.character-tabs,
.equipment-grid,
.inventory-grid,
.cells-container {
    position: relative;
    z-index: 1;
}
.section-title {
    font-family: 'Cinzel', serif;
    letter-spacing: 1.2px;
    color: #f3d384;
    text-shadow: 0 0 18px rgba(192,160,96,.18);
}
.section-line {
    background: linear-gradient(90deg, rgba(139,92,246,.45), rgba(192,160,96,.18), transparent);
}
.section-line::after {
    width: 110px;
    background: linear-gradient(90deg, #8b5cf6, #f3d384);
    box-shadow: 0 0 18px rgba(139,92,246,.38);
}
.equipment-grid {
    grid-template-columns: repeat(auto-fill, minmax(315px, 1fr));
    gap: clamp(.9rem, 1vw, 1.25rem);
}
.equipment-card {
    background:
        linear-gradient(145deg, rgba(15,12,22,.78), rgba(37,25,58,.56)),
        radial-gradient(circle at 20% 0%, rgba(139,92,246,.14), transparent 38%);
    border: 1px solid rgba(139,92,246,.28);
    box-shadow: 0 14px 34px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.04);
    backdrop-filter: blur(8px);
}
.equipment-card:hover {
    border-color: rgba(243,211,132,.42);
    box-shadow: 0 18px 44px rgba(0,0,0,.48), 0 0 32px rgba(139,92,246,.24);
    transform: translateY(-4px) scale(1.005);
}
.equipment-card::before {
    background: conic-gradient(from 180deg, transparent, rgba(139,92,246,.09), transparent, rgba(245,158,11,.08), transparent);
    opacity: .85;
}
.equipment-card-header {
    background: linear-gradient(90deg, rgba(139,92,246,.20), rgba(245,158,11,.07));
    border-bottom: 1px solid rgba(139,92,246,.28);
}
.equipment-card-icon {
    background: radial-gradient(circle, rgba(245,158,11,.16), rgba(139,92,246,.18));
    border: 1px solid rgba(243,211,132,.24);
    box-shadow: 0 0 18px rgba(139,92,246,.20);
}
.equipment-card-title {
    color: #f3d384;
    letter-spacing: .8px;
    text-transform: uppercase;
}
.equipment-items { max-height: 440px; padding: .8rem; }
.item-row {
    background: linear-gradient(90deg, rgba(0,0,0,.32), rgba(139,92,246,.055));
    border: 1px solid rgba(139,92,246,.10);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
}
.item-row:hover {
    background: linear-gradient(90deg, rgba(139,92,246,.16), rgba(245,158,11,.07));
    border-color: rgba(243,211,132,.30);
    transform: translateX(6px);
}
.item-image,
.cell-item-image,
.inventory-item-image {
    background: radial-gradient(circle, rgba(139,92,246,.20), rgba(0,0,0,.48));
    border-color: rgba(243,211,132,.22);
    box-shadow: inset 0 0 18px rgba(0,0,0,.42), 0 0 14px rgba(139,92,246,.14);
}
.item-name,
.cell-item-name,
.inventory-item-name { color: #f4f0ff; }
.item-price,
.cell-item-price { color: #a78bfa; text-shadow: 0 0 12px rgba(139,92,246,.24); }
.btn-buy,
.btn-cells-buy,
.btn-confirm,
.coupon-redeem-btn {
    background: linear-gradient(135deg, #7c3aed, #4c1d95 48%, #b8862c);
    border-color: rgba(243,211,132,.35);
}
.btn-buy:hover,
.btn-cells-buy:hover,
.btn-confirm:hover,
.coupon-redeem-btn:hover {
    background: linear-gradient(135deg, #9f6bff, #6d28d9 50%, #d09b33);
    box-shadow: 0 8px 24px rgba(139,92,246,.34), 0 0 18px rgba(245,158,11,.18);
}
.cells-container {
    background:
        linear-gradient(145deg, rgba(16,12,24,.78), rgba(48,29,77,.54)),
        radial-gradient(circle at 84% 4%, rgba(139,92,246,.18), transparent 36%);
    border-color: rgba(139,92,246,.36);
}
.cell-item {
    position: relative;
    background: linear-gradient(90deg, rgba(0,0,0,.32), rgba(107,79,160,.12));
    border-color: rgba(107,79,160,.24);
}
.inventory-section {
    background:
        linear-gradient(145deg, rgba(15,15,22,.74), rgba(31,22,44,.50)),
        radial-gradient(circle at 85% 0%, rgba(192,160,96,.12), transparent 35%);
}
.inventory-item {
    background: linear-gradient(145deg, rgba(0,0,0,.34), rgba(139,92,246,.07));
    border-color: rgba(139,92,246,.20);
}
#tab-coupon {
    position: relative;
    min-height: calc(100vh - 142px);
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-radius: var(--radius-2xl);
    border: 1px solid rgba(139,92,246,.18);
    box-shadow: 0 20px 60px rgba(0,0,0,.40);
}
.coupon-bg-slider {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}
.coupon-bg-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    animation: couponBgCycle 18s infinite, kenBurns 22s ease-in-out infinite alternate;
    transform: scale(1.04);
}
.coupon-bg-slide:nth-child(1) { animation-delay: 0s, 0s; }
.coupon-bg-slide:nth-child(2) { animation-delay: 6s, 0s; }
.coupon-bg-slide:nth-child(3) { animation-delay: 12s, 0s; }
@keyframes couponBgCycle {
    0%, 30% { opacity: 1; }
    36%, 100% { opacity: 0; }
}
.coupon-bg-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        radial-gradient(circle at 50% 36%, rgba(139,92,246,.20), transparent 30%),
        linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,.34), rgba(0,0,0,.72)),
        linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.70));
}
.coupon-section-full {
    width: 100%;
    max-width: none;
    min-height: calc(100vh - 142px);
    margin: 0;
    padding: clamp(1.25rem, 3vw, 3.2rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}
.coupon-panel {
    width: min(720px, 94vw);
    background:
        linear-gradient(145deg, rgba(20,12,38,.54), rgba(4,4,8,.34)),
        radial-gradient(circle at 20% 0%, rgba(139,92,246,.16), transparent 42%);
    border: 1px solid rgba(169,128,255,.54);
    border-radius: 28px;
    padding: clamp(1.45rem, 3vw, 2.8rem);
    backdrop-filter: blur(8px) saturate(1.25);
    -webkit-backdrop-filter: blur(8px) saturate(1.25);
    box-shadow:
        0 24px 75px rgba(0,0,0,.58),
        0 0 55px rgba(139,92,246,.22),
        inset 0 1px 0 rgba(255,255,255,.08),
        inset 0 0 35px rgba(139,92,246,.08);
}
.coupon-panel::before {
    background: conic-gradient(from 0deg, transparent, rgba(139,92,246,.11), transparent, rgba(245,158,11,.09), transparent);
    opacity: .8;
}
.coupon-panel::after {
    content: '';
    position: absolute;
    inset: 10px;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.055);
    pointer-events: none;
}
.coupon-panel-title {
    color: #d8c2ff;
    text-shadow: 0 0 18px rgba(139,92,246,.54), 0 0 34px rgba(139,92,246,.22);
}
.coupon-panel-icon {
    background: rgba(139,92,246,.18);
    border-color: rgba(216,194,255,.36);
    box-shadow: 0 0 20px rgba(139,92,246,.24);
}
.coupon-resources,
.coupon-alert,
.coupon-code-part {
    background: rgba(0,0,0,.28);
    backdrop-filter: blur(5px);
}
.coupon-resources {
    border-color: rgba(216,194,255,.18);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.coupon-alert {
    border-color: rgba(245,158,11,.24);
    background: rgba(245,158,11,.055);
}
.coupon-code-part {
    border-color: rgba(169,128,255,.34);
    box-shadow: inset 0 0 16px rgba(0,0,0,.36);
}
.coupon-code-part:focus {
    background: rgba(20,10,38,.40);
    border-color: rgba(216,194,255,.70);
    box-shadow: 0 0 18px rgba(139,92,246,.45), inset 0 0 18px rgba(139,92,246,.10);
}
.coupon-code-dash { text-shadow: 0 0 18px rgba(139,92,246,.58); }
.coupon-redeem-btn {
    box-shadow: 0 12px 32px rgba(0,0,0,.26), 0 0 18px rgba(139,92,246,.20);
}
@media (min-width: 1600px) {
    .equipment-grid { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
}
@media (max-width: 768px) {
    .main-content { padding: .85rem; }
    .main-content > .tab-navigation { overflow-x: auto; }
    #tab-coupon { min-height: calc(100vh - 118px); border-radius: var(--radius-xl); }
    .coupon-section-full { min-height: calc(100vh - 118px); padding: 1rem; }
    .coupon-resources { gap: .75rem; flex-wrap: wrap; }
}


/* ============================================
   RANKING
   ============================================ */
#tab-ranking {
    position: relative;
    min-height: 100vh;
    margin: -2rem;
    padding: 2rem;
    background:
        radial-gradient(circle at top center, rgba(139,92,246,0.14), transparent 35%),
        linear-gradient(180deg, rgba(12,12,18,0.96), rgba(8,8,12,0.98)),
        url('../assets/backgrounds/bg-warrior.webp') center/cover no-repeat;
}
#tab-ranking::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(5,5,8,0.72), rgba(5,5,8,0.92));
    pointer-events: none;
}
.ranking-section {
    position: relative;
    z-index: 1;
    max-width: 1440px;
    margin: 0 auto;
}
.ranking-hero {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 2rem;
    padding: 1.5rem 1.75rem;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(20,20,28,0.9), rgba(11,11,16,0.82));
    box-shadow: 0 18px 40px rgba(0,0,0,0.35);
    backdrop-filter: blur(10px);
}
.ranking-kicker {
    display: inline-block;
    margin-bottom: 0.5rem;
    color: #8b5cf6;
    letter-spacing: 2px;
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 700;
}
.ranking-title {
    font-family: 'Cinzel', serif;
    font-size: 2rem;
    line-height: 1.1;
    margin-bottom: 0.4rem;
    color: #fff;
}
.ranking-subtitle {
    max-width: 720px;
    color: #9ca3af;
    font-size: 0.95rem;
}
.ranking-hero-badges {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
.ranking-badge-card {
    min-width: 155px;
    padding: 1rem 1.1rem;
    border-radius: 16px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(139,92,246,0.18);
    text-align: center;
}
.ranking-badge-value {
    display: block;
    font-size: 1.2rem;
    font-weight: 800;
    color: #fff;
}
.ranking-badge-label {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #9ca3af;
}
.ranking-podium {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    margin-bottom: 2rem;
}
.ranking-podium-card {
    position: relative;
    overflow: hidden;
    min-height: 325px;
    border-radius: 24px;
    padding: 1.6rem 1.3rem 1.35rem;
    border: 1px solid rgba(255,255,255,0.08);
    background: linear-gradient(180deg, rgba(25,25,34,0.95), rgba(10,10,14,0.95));
    box-shadow: 0 20px 35px rgba(0,0,0,0.28);
}
.ranking-podium-card::before {
    content: '';
    position: absolute;
    inset: auto -20% -45% -20%;
    height: 220px;
    background: radial-gradient(circle, var(--podium-glow, rgba(255,215,0,0.18)), transparent 65%);
    pointer-events: none;
}
.ranking-podium-card.rank-1 { --podium-glow: rgba(240,192,64,0.30); border-color: rgba(240,192,64,0.35); }
.ranking-podium-card.rank-2 { --podium-glow: rgba(170,184,199,0.24); border-color: rgba(170,184,199,0.28); margin-top: 1.4rem; }
.ranking-podium-card.rank-3 { --podium-glow: rgba(171,101,62,0.24); border-color: rgba(171,101,62,0.28); margin-top: 1.8rem; }
.ranking-podium-top {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .8rem;
}
.ranking-laurel {
    position: relative;
    width: 168px;
    height: 168px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06), 0 0 40px rgba(0,0,0,0.2);
}
.ranking-laurel::before,
.ranking-laurel::after {
    content: '❦';
    position: absolute;
    top: 50%;
    transform: translateY(-50%) rotate(-90deg);
    font-size: 3.2rem;
    letter-spacing: 0.25rem;
    opacity: 0.85;
}
.ranking-laurel::before { left: 12px; }
.ranking-laurel::after { right: 12px; transform: translateY(-50%) rotate(90deg); }
.ranking-laurel.gold { background: radial-gradient(circle, rgba(240,192,64,0.18), rgba(240,192,64,0.05) 60%, transparent 75%); color: #f0c040; }
.ranking-laurel.silver { background: radial-gradient(circle, rgba(179,187,198,0.18), rgba(179,187,198,0.05) 60%, transparent 75%); color: #b3bbc6; }
.ranking-laurel.bronze { background: radial-gradient(circle, rgba(171,101,62,0.18), rgba(171,101,62,0.05) 60%, transparent 75%); color: #ab653e; }
.ranking-laurel-number {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 98px;
    height: 98px;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    border: 1px solid currentColor;
    font-size: 3rem;
    font-family: 'Cinzel', serif;
    font-weight: 900;
    text-shadow: 0 0 15px rgba(255,255,255,0.08);
}
.ranking-laurel-label {
    margin-top: -0.45rem;
    font-size: 0.65rem;
    letter-spacing: 2px;
    font-weight: 700;
}
.ranking-podium-player {
    text-align: center;
    position: relative;
    z-index: 1;
}
.ranking-podium-name {
    color: #fff;
    font-size: 1.2rem;
    font-weight: 800;
    letter-spacing: 0.5px;
    margin-bottom: 1rem;
}
.ranking-podium-stats {
    display: grid;
    gap: 0.5rem;
}
.ranking-stat-line {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 0.9rem;
    border-radius: 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    font-size: 0.85rem;
}
.ranking-stat-label {
    color: #9ca3af;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.72rem;
}
.ranking-stat-value {
    font-weight: 800;
}
.value-name,
.value-winrate { color: #fff; }
.value-level { color: #f0c040; }
.value-exp { color: #34d9ff; }
.value-win { color: #34d9ff; }
.value-loss { color: #ff4d5e; }
.ranking-board {
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.08);
    background: linear-gradient(180deg, rgba(15,15,20,0.96), rgba(9,9,12,0.96));
    box-shadow: 0 18px 35px rgba(0,0,0,0.28);
}
.ranking-board-header,
.ranking-row {
    display: grid;
    grid-template-columns: 110px minmax(240px, 1.7fr) 110px 1.2fr 1.3fr 140px;
    gap: 0;
    align-items: center;
}
.ranking-board-header {
    padding: 1rem 1.25rem;
    background: linear-gradient(180deg, #2a2c31, #202228);
    color: #c4c8ce;
    font-size: 0.77rem;
    font-weight: 800;
    letter-spacing: 1.35px;
    text-transform: uppercase;
}
.ranking-board-body {
    display: flex;
    flex-direction: column;
}
.ranking-row {
    padding: 0.95rem 1.25rem;
    border-top: 1px solid rgba(255,255,255,0.05);
    transition: background 0.2s ease, transform 0.2s ease;
}
.ranking-row:nth-child(odd) { background: rgba(255,255,255,0.02); }
.ranking-row:nth-child(even) { background: rgba(255,255,255,0.04); }
.ranking-row:hover {
    background: rgba(139,92,246,0.08);
}
.ranking-cell-rank,
.ranking-cell-level {
    text-align: center;
    color: #f0c040;
    font-weight: 800;
}
.ranking-player {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: 0;
}
.ranking-player-avatar {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(145deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    border: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ranking-player-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ranking-player-meta {
    min-width: 0;
}
.ranking-player-name {
    color: #fff;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ranking-player-class {
    color: #8f97a3;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.ranking-cell-exp { color: #34d9ff; font-weight: 800; }
.ranking-cell-record { font-weight: 800; }
.ranking-cell-winrate {
    text-align: right;
    color: #fff;
    font-weight: 800;
}
@media (max-width: 1100px) {
    .ranking-podium { grid-template-columns: 1fr; }
    .ranking-podium-card.rank-2,
    .ranking-podium-card.rank-3 { margin-top: 0; }
    .ranking-board-header,
    .ranking-row {
        grid-template-columns: 90px minmax(220px, 1.5fr) 90px 1fr 1.2fr 120px;
    }
}
@media (max-width: 860px) {
    .ranking-hero { flex-direction: column; align-items: flex-start; }
    .ranking-board { overflow-x: auto; }
    .ranking-board-header,
    .ranking-row {
        min-width: 920px;
    }
}
@media (max-width: 640px) {
    #tab-ranking { margin: -1rem; padding: 1rem; }
    .ranking-title { font-size: 1.55rem; }
    .ranking-laurel { width: 144px; height: 144px; }
    .ranking-laurel-number { width: 86px; height: 86px; font-size: 2.45rem; }
    .ranking-podium-card { padding: 1.2rem 1rem; }
}


/* ============================================
   RANKING PLUS - Full Screen Competitive Polish
   ============================================ */
#tab-ranking {
    margin: calc(clamp(1rem, 2vw, 2.25rem) * -1);
    padding: clamp(1rem, 2vw, 2.25rem);
    min-height: calc(100vh - 64px);
    overflow: hidden;
}
#tab-ranking::after {
    content: 'RZ';
    position: absolute;
    right: clamp(1.5rem, 6vw, 6rem);
    top: clamp(4rem, 10vw, 8rem);
    z-index: 0;
    font-family: 'Cinzel', serif;
    font-size: clamp(5rem, 18vw, 18rem);
    font-weight: 900;
    color: rgba(255,255,255,0.022);
    letter-spacing: -0.08em;
    pointer-events: none;
}
.ranking-section {
    width: 100%;
    max-width: none;
}
.ranking-hero {
    border-color: rgba(52,217,255,0.10);
    background:
        linear-gradient(145deg, rgba(12,12,18,0.86), rgba(15,10,22,0.74)),
        radial-gradient(circle at 14% 0%, rgba(52,217,255,0.10), transparent 36%),
        radial-gradient(circle at 92% 0%, rgba(240,192,64,0.11), transparent 34%);
}
.ranking-title {
    text-transform: uppercase;
    letter-spacing: 1.4px;
    text-shadow: 0 0 22px rgba(52,217,255,0.12), 0 0 36px rgba(139,92,246,0.14);
}
.ranking-podium-card {
    backdrop-filter: blur(10px);
    animation: fadeInUp .45s ease-out both;
}
.ranking-podium-card.rank-1 {
    transform: translateY(-12px);
    box-shadow: 0 24px 52px rgba(0,0,0,0.36), 0 0 46px rgba(240,192,64,0.12);
}
.ranking-laurel-number {
    background: linear-gradient(145deg, rgba(0,0,0,0.62), rgba(255,255,255,0.035));
    box-shadow: inset 0 0 18px rgba(255,255,255,0.045), 0 0 24px currentColor;
}
.ranking-stat-line {
    background: linear-gradient(90deg, rgba(255,255,255,0.035), rgba(255,255,255,0.012));
}
.ranking-board {
    width: 100%;
    border-color: rgba(52,217,255,0.10);
    box-shadow: 0 22px 48px rgba(0,0,0,0.34), 0 0 38px rgba(52,217,255,0.045);
}
.ranking-board-header {
    background: linear-gradient(180deg, rgba(52,55,63,0.96), rgba(28,30,36,0.98));
    border-bottom: 1px solid rgba(52,217,255,0.12);
}
.ranking-row {
    position: relative;
}
.ranking-row::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 0;
    background: linear-gradient(180deg, #34d9ff, #ff4d5e);
    transform: translateY(-50%);
    transition: height .2s ease;
}
.ranking-row:hover::before { height: 62%; }
.ranking-player-avatar {
    box-shadow: inset 0 0 18px rgba(0,0,0,0.45), 0 0 18px rgba(52,217,255,0.08);
}
.ranking-cell-exp,
.value-exp,
.value-win {
    text-shadow: 0 0 12px rgba(52,217,255,0.34);
}
.value-loss {
    text-shadow: 0 0 12px rgba(255,77,94,0.34);
}
@media (max-width: 640px) {
    #tab-ranking { margin: -.85rem; padding: .85rem; }
    .ranking-podium-card.rank-1 { transform: none; }
}


/* ============================================
   RANKING GENERAL PUBLICO - Responsive Fix
   ============================================ */
.ranking-screen {
    position: relative;
    z-index: 2;
    min-height: 100vh;
    background: #07070b;
    overflow-x: hidden;
    color: var(--text-primary);
}
.ranking-bg-slider,
.ranking-bg-slide,
.ranking-bg-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
}
.ranking-bg-slider { z-index: 0; }
.ranking-bg-slide {
    background-size: cover;
    background-position: center;
    opacity: .42;
    filter: saturate(.96) contrast(1.06) brightness(.74);
}
.ranking-bg-overlay {
    z-index: 1;
    background:
        radial-gradient(circle at 18% 10%, rgba(139,92,246,.20), transparent 32%),
        radial-gradient(circle at 84% 16%, rgba(52,217,255,.12), transparent 28%),
        linear-gradient(180deg, rgba(5,5,10,.68), rgba(7,7,11,.84) 42%, rgba(5,5,8,.92));
}
.ranking-public-nav {
    position: fixed;
    padding-top: 1rem;
}
.ranking-public-content {
    position: relative;
    z-index: 2;
    width: min(1120px, calc(100% - 32px));
    margin: 0 auto;
    padding: 6.2rem 0 2.5rem;
}
#ranking-screen .ranking-section {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto;
}
#ranking-screen .ranking-hero {
    padding: clamp(1rem, 2.2vw, 1.6rem);
    margin-bottom: 1.25rem;
    border-radius: 18px;
    border-color: rgba(139,92,246,.22);
    background:
        linear-gradient(145deg, rgba(12,12,18,.78), rgba(15,10,22,.72)),
        radial-gradient(circle at 12% 0%, rgba(139,92,246,.18), transparent 34%),
        radial-gradient(circle at 92% 0%, rgba(52,217,255,.10), transparent 32%);
    box-shadow: 0 18px 38px rgba(0,0,0,.28);
}
#ranking-screen .ranking-kicker { font-size: .72rem; }
#ranking-screen .ranking-title {
    font-size: clamp(1.6rem, 3.4vw, 2.55rem);
    line-height: 1.05;
}
#ranking-screen .ranking-subtitle {
    max-width: 560px;
    font-size: clamp(.85rem, 1.4vw, .98rem);
}
#ranking-screen .ranking-hero-badges { gap: .7rem; }
#ranking-screen .ranking-badge-card {
    min-width: 118px;
    padding: .75rem .9rem;
    border-radius: 14px;
}
#ranking-screen .ranking-badge-value { font-size: 1rem; }
#ranking-screen .ranking-podium {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .85rem;
    margin: 0 auto 1.25rem;
}
#ranking-screen .ranking-podium-card {
    min-height: 0;
    padding: 1rem .9rem;
    border-radius: 18px;
    background: linear-gradient(180deg, rgba(20,20,28,.82), rgba(8,8,12,.9));
}
#ranking-screen .ranking-podium-card.rank-1,
#ranking-screen .ranking-podium-card.rank-2,
#ranking-screen .ranking-podium-card.rank-3 {
    margin-top: 0;
    transform: none;
}
#ranking-screen .ranking-laurel {
    width: 112px;
    height: 112px;
}
#ranking-screen .ranking-laurel::before,
#ranking-screen .ranking-laurel::after {
    font-size: 2.1rem;
}
#ranking-screen .ranking-laurel::before { left: 8px; }
#ranking-screen .ranking-laurel::after { right: 8px; }
#ranking-screen .ranking-laurel-number {
    width: 68px;
    height: 68px;
    font-size: 2rem;
}
#ranking-screen .ranking-laurel-label {
    font-size: .52rem;
    letter-spacing: 1.5px;
}
#ranking-screen .ranking-podium-name {
    font-size: 1rem;
    margin-bottom: .65rem;
}
#ranking-screen .ranking-podium-stats { gap: .35rem; }
#ranking-screen .ranking-stat-line {
    padding: .5rem .62rem;
    border-radius: 10px;
    font-size: .78rem;
}
#ranking-screen .ranking-stat-label { font-size: .62rem; }
#ranking-screen .ranking-board {
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
}
#ranking-screen .ranking-board-header,
#ranking-screen .ranking-row {
    min-width: 0;
    grid-template-columns: 76px minmax(150px, 1.35fr) 68px minmax(118px, .9fr) minmax(138px, 1fr) 88px;
}
#ranking-screen .ranking-board-header {
    padding: .78rem .9rem;
    font-size: .66rem;
    letter-spacing: .9px;
}
#ranking-screen .ranking-row {
    padding: .65rem .9rem;
    font-size: .88rem;
}
#ranking-screen .ranking-player { gap: .62rem; }
#ranking-screen .ranking-player-avatar {
    width: 36px;
    height: 36px;
    border-radius: 10px;
}
#ranking-screen .ranking-player-name { font-size: .9rem; }
#ranking-screen .ranking-player-class { font-size: .62rem; }
#ranking-screen .ranking-cell-exp,
#ranking-screen .ranking-cell-record,
#ranking-screen .ranking-cell-winrate {
    white-space: nowrap;
}
@media (max-width: 980px) {
    .ranking-public-content { width: min(760px, calc(100% - 28px)); }
    .ranking-public-nav .landing-nav-inner { align-items: flex-start; gap: .85rem; }
    .ranking-public-nav .nav-logo-text { font-size: 1.1rem; }
    .ranking-public-nav .nav-logo-img { width: 38px; height: 38px; }
    .ranking-nav-menu { gap: .1rem; flex-wrap: wrap; justify-content: flex-end; }
    .ranking-nav-menu .nav-link { padding: .45rem .55rem; font-size: .68rem; }
    #ranking-screen .ranking-hero { flex-direction: column; align-items: flex-start; }
    #ranking-screen .ranking-podium { grid-template-columns: 1fr; max-width: 460px; }
    #ranking-screen .ranking-podium-card { display: grid; grid-template-columns: 104px 1fr; gap: .75rem; align-items: center; }
    #ranking-screen .ranking-podium-top { margin-bottom: 0; }
    #ranking-screen .ranking-laurel { width: 96px; height: 96px; }
    #ranking-screen .ranking-laurel-number { width: 76px; height: 58px; font-size: 1.65rem; }
    #ranking-screen .ranking-podium-player { text-align: left; }
    #ranking-screen .ranking-board { overflow: visible; }
    #ranking-screen .ranking-board-header { display: none; }
    #ranking-screen .ranking-board-body { gap: .55rem; padding: .55rem; }
    #ranking-screen .ranking-row {
        display: grid;
        min-width: 0;
        grid-template-columns: 48px 1fr;
        grid-template-areas:
            "rank player"
            "level exp"
            "record winrate";
        gap: .42rem .75rem;
        padding: .75rem;
        border: 1px solid rgba(255,255,255,.06);
        border-radius: 14px;
        background: rgba(255,255,255,.035);
    }
    #ranking-screen .ranking-cell-rank { grid-area: rank; align-self: center; font-size: .95rem; }
    #ranking-screen .ranking-player { grid-area: player; min-width: 0; }
    #ranking-screen .ranking-cell-level { grid-area: level; text-align: left; }
    #ranking-screen .ranking-cell-exp { grid-area: exp; text-align: right; overflow: hidden; text-overflow: ellipsis; }
    #ranking-screen .ranking-cell-record { grid-area: record; }
    #ranking-screen .ranking-cell-winrate { grid-area: winrate; text-align: right; }
    #ranking-screen .ranking-cell-level::before { content: 'Nivel '; color: #8f97a3; font-weight: 700; }
    #ranking-screen .ranking-cell-exp::before { content: 'EXP '; color: #8f97a3; font-weight: 700; text-shadow: none; }
    #ranking-screen .ranking-cell-record::before { content: 'V/D '; color: #8f97a3; font-weight: 700; }
    #ranking-screen .ranking-cell-winrate::before { content: 'WR '; color: #8f97a3; font-weight: 700; }
}
@media (max-width: 560px) {
    .ranking-public-content { width: min(100% - 20px, 460px); padding-top: 5.4rem; }
    .ranking-public-nav { padding: .65rem .75rem 0; }
    .ranking-public-nav .landing-nav-inner { display: block; }
    .ranking-public-nav .nav-logo { margin-bottom: .35rem; }
    .ranking-public-nav .nav-menu { justify-content: flex-start; }
    .ranking-public-nav .nav-link { padding: .35rem .48rem; font-size: .62rem; }
    #ranking-screen .ranking-hero { padding: .9rem; margin-bottom: .9rem; }
    #ranking-screen .ranking-hero-badges { width: 100%; }
    #ranking-screen .ranking-badge-card { flex: 1; min-width: 0; }
    #ranking-screen .ranking-podium-card {
        grid-template-columns: 78px 1fr;
        padding: .75rem;
    }
    #ranking-screen .ranking-laurel { width: 76px; height: 76px; }
    #ranking-screen .ranking-laurel::before,
    #ranking-screen .ranking-laurel::after { font-size: 1.55rem; }
    #ranking-screen .ranking-laurel-number { width: 48px; height: 48px; font-size: 1.35rem; }
    #ranking-screen .ranking-stat-line { padding: .42rem .5rem; font-size: .7rem; }
    #ranking-screen .ranking-row {
        grid-template-columns: 40px 1fr;
        gap: .35rem .55rem;
        padding: .65rem;
        font-size: .78rem;
    }
    #ranking-screen .ranking-player-avatar { width: 32px; height: 32px; }
    #ranking-screen .ranking-player-name { font-size: .82rem; }
    #ranking-screen .ranking-player-class { display: none; }
}


/* Estado de conexion del ranking MySQL */
.ranking-status {
    margin: .75rem .75rem 0;
    padding: .7rem .9rem;
    border: 1px solid rgba(139, 92, 246, .25);
    border-radius: 14px;
    background: rgba(10, 10, 18, .72);
    color: #cfd5df;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    backdrop-filter: blur(10px);
}
.ranking-status.success {
    border-color: rgba(34, 197, 94, .32);
    color: #86efac;
    box-shadow: 0 0 20px rgba(34, 197, 94, .08);
}
.ranking-status.error {
    border-color: rgba(244, 63, 94, .35);
    color: #fda4af;
    box-shadow: 0 0 20px rgba(244, 63, 94, .08);
}
.ranking-status.info {
    border-color: rgba(52, 217, 255, .32);
    color: #7dd3fc;
    box-shadow: 0 0 20px rgba(52, 217, 255, .08);
}


/* ============================================
   FIX VISUAL 2026-05-24 - Restaurar estilos + efectos ranking
   ============================================ */
@keyframes float {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-10px) scale(1.035); }
}
@keyframes rankingAurora {
    0%, 100% { transform: translate3d(-2%, -1%, 0) scale(1); opacity: .55; }
    50% { transform: translate3d(2%, 1%, 0) scale(1.04); opacity: .82; }
}
@keyframes rankingSweep {
    0% { transform: translateX(-120%) rotate(8deg); opacity: 0; }
    20% { opacity: .18; }
    55% { opacity: .08; }
    100% { transform: translateX(120%) rotate(8deg); opacity: 0; }
}
@keyframes cardPulseGlow {
    0%, 100% { box-shadow: 0 16px 42px rgba(0,0,0,.42), 0 0 18px rgba(139,92,246,.10); }
    50% { box-shadow: 0 18px 52px rgba(0,0,0,.48), 0 0 30px rgba(139,92,246,.22), 0 0 18px rgba(245,158,11,.09); }
}
body {
    background: #050508 !important;
    color: var(--text-primary, #e7e7ef) !important;
}
#landing-screen,
#login-screen,
#main-screen,
#ranking-screen {
    color: var(--text-primary, #e7e7ef);
}
#ranking-screen {
    isolation: isolate;
    min-height: 100vh;
}
#ranking-screen .ranking-bg-slide.active {
    opacity: .42 !important;
    filter: saturate(1.1) contrast(1.08) brightness(.75);
}
#ranking-screen::before,
#ranking-screen::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}
#ranking-screen::before {
    background:
        radial-gradient(circle at 18% 18%, rgba(139,92,246,.26), transparent 28%),
        radial-gradient(circle at 82% 20%, rgba(52,217,255,.16), transparent 26%),
        radial-gradient(circle at 50% 88%, rgba(245,158,11,.12), transparent 32%);
    mix-blend-mode: screen;
    animation: rankingAurora 8s ease-in-out infinite;
}
#ranking-screen::after {
    width: 42%;
    background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.055) 48%, transparent 100%);
    filter: blur(1px);
    animation: rankingSweep 7.5s ease-in-out infinite;
}
#ranking-screen .ranking-public-nav { z-index: 20; }
#ranking-screen .ranking-public-content { z-index: 6; }
#ranking-screen .ranking-hero,
#ranking-screen .ranking-podium-card,
#ranking-screen .ranking-board {
    animation: cardPulseGlow 4.8s ease-in-out infinite;
}
#ranking-screen .ranking-podium-card {
    position: relative;
    overflow: hidden;
}
#ranking-screen .ranking-podium-card::before {
    content: '';
    position: absolute;
    inset: -60%;
    background: conic-gradient(from 0deg, transparent, rgba(139,92,246,.12), transparent, rgba(245,158,11,.10), transparent);
    animation: spin 9s linear infinite;
    opacity: .8;
    pointer-events: none;
}
#ranking-screen .ranking-podium-card > * { position: relative; z-index: 1; }
#ranking-screen .ranking-row {
    background: linear-gradient(90deg, rgba(255,255,255,.025), rgba(139,92,246,.035));
}
#ranking-screen .ranking-row:nth-child(even) {
    background: linear-gradient(90deg, rgba(255,255,255,.012), rgba(52,217,255,.025));
}
#ranking-screen .ranking-row:hover {
    background: linear-gradient(90deg, rgba(139,92,246,.18), rgba(52,217,255,.06));
    box-shadow: inset 3px 0 0 rgba(243,211,132,.72), 0 0 20px rgba(139,92,246,.14);
}
#ranking-screen .ranking-cell-exp,
#ranking-screen .ranking-cell-record span:first-child {
    text-shadow: 0 0 10px rgba(52,217,255,.35);
}
#ranking-screen .ranking-cell-record span:last-child {
    text-shadow: 0 0 10px rgba(255,77,94,.35);
}
#ranking-screen .ranking-cell-level,
#ranking-screen .ranking-cell-rank {
    text-shadow: 0 0 10px rgba(240,192,64,.30);
}
.bg-particles {
    z-index: 4;
}
.main-screen > .navbar,
.main-screen > .main-content,
.landing-screen > *,
.login-screen > * {
    position: relative;
}
.main-screen > .navbar,
.main-screen > .main-content { z-index: 6; }
.landing-screen .landing-nav,
.login-screen .login-wrapper { z-index: 8; }
@media (max-width: 560px) {
    #ranking-screen .ranking-public-content { padding-top: 6.4rem; }
    #ranking-screen .ranking-title { font-size: 1.45rem; }
    #ranking-screen .ranking-subtitle { font-size: .82rem; }
}

/* ============================================
   FIX INICIO / LANDING - restaurar portada full screen
   Evita que el arreglo visual global mueva el menú al centro.
   ============================================ */
#landing-screen.landing-screen {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    background: #050508 !important;
    isolation: isolate !important;
}

#landing-screen .bg-slider {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 0 !important;
    overflow: hidden !important;
}

#landing-screen .bg-slide {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    opacity: 0 !important;
    transform-origin: center !important;
    transition: opacity 1.5s ease !important;
}

#landing-screen .bg-slide.active {
    opacity: 1 !important;
    animation: kenBurns 20s ease-in-out infinite alternate !important;
}

#landing-screen .bg-overlay {
    position: fixed !important;
    inset: 0 !important;
    z-index: 1 !important;
    background:
        radial-gradient(circle at 72% 18%, rgba(139,92,246,.18), transparent 28%),
        radial-gradient(circle at 14% 50%, rgba(168,85,247,.12), transparent 24%),
        linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.22) 48%, rgba(0,0,0,.62) 100%) !important;
    pointer-events: none !important;
}

#landing-screen .landing-nav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 30 !important;
    width: 100% !important;
    padding: 1.5rem 2rem 0 2rem !important;
    transform: none !important;
}

#landing-screen .landing-nav-inner {
    position: relative !important;
    z-index: 31 !important;
    width: min(1400px, calc(100vw - 4rem)) !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 1.5rem !important;
}

#landing-screen .nav-logo,
#landing-screen .nav-menu,
#landing-screen .nav-item,
#landing-screen .nav-dropdown,
#landing-screen .dropdown-inner {
    position: relative !important;
}

#landing-screen .nav-dropdown {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    z-index: 60 !important;
}

#landing-screen .nav-item:last-child .nav-dropdown {
    left: auto !important;
    right: 0 !important;
}

#landing-screen .landing-bottom-logo {
    position: absolute !important;
    left: 50% !important;
    bottom: 13% !important;
    z-index: 12 !important;
    transform: translateX(-50%) !important;
}

#landing-screen .landing-logo-big {
    width: clamp(120px, 10vw, 180px) !important;
    height: auto !important;
}

#landing-screen .scroll-indicator {
    position: absolute !important;
    left: 50% !important;
    bottom: 1.5rem !important;
    z-index: 12 !important;
    transform: translateX(-50%) !important;
}

#landing-screen .scroll-indicator svg {
    width: 24px !important;
    height: 24px !important;
}

@media (max-width: 980px) {
    #landing-screen .landing-nav {
        padding: 1rem 1rem 0 1rem !important;
    }
    #landing-screen .landing-nav-inner {
        width: calc(100vw - 2rem) !important;
        align-items: flex-start !important;
        gap: .85rem !important;
    }
    #landing-screen .nav-logo-text {
        font-size: 1.1rem !important;
        letter-spacing: 1px !important;
    }
    #landing-screen .nav-logo-img {
        width: 34px !important;
        height: 34px !important;
    }
    #landing-screen .nav-menu {
        justify-content: flex-end !important;
        flex-wrap: wrap !important;
        gap: .1rem !important;
    }
    #landing-screen .nav-link {
        padding: .45rem .55rem !important;
        font-size: .68rem !important;
        letter-spacing: .7px !important;
    }
}

@media (max-width: 640px) {
    #landing-screen .landing-nav-inner {
        display: block !important;
    }
    #landing-screen .nav-logo {
        margin-bottom: .55rem !important;
    }
    #landing-screen .nav-menu {
        justify-content: flex-start !important;
    }
    #landing-screen .nav-dropdown {
        left: 0 !important;
        right: auto !important;
        min-width: 170px !important;
    }
    #landing-screen .landing-bottom-logo {
        bottom: 16% !important;
    }
}


/* ============================================
   FIX RANKING 2026-05-25 - Sin corte + imagen de clase en podio
   ============================================ */
html,
body {
    min-height: 100%;
}
body.ranking-open {
    overflow-y: auto !important;
    background: #050508 !important;
}
body.ranking-open #ranking-screen.ranking-screen {
    display: block;
    position: relative !important;
    min-height: 100dvh !important;
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    padding-bottom: 2.75rem !important;
}
body.ranking-open #landing-screen,
body.ranking-open #login-screen,
body.ranking-open #main-screen {
    display: none !important;
}
#ranking-screen .ranking-public-content {
    width: min(1020px, calc(100% - 32px)) !important;
    max-width: 1020px !important;
    padding-top: clamp(4.8rem, 7.2vh, 5.65rem) !important;
    padding-bottom: 3rem !important;
}
#ranking-screen .ranking-section {
    max-width: 1020px !important;
}
#ranking-screen .ranking-hero {
    min-height: auto !important;
    padding: .95rem 1.15rem !important;
    margin-bottom: .85rem !important;
    align-items: center !important;
}
#ranking-screen .ranking-title {
    font-size: clamp(1.55rem, 2.35vw, 2.25rem) !important;
}
#ranking-screen .ranking-subtitle {
    font-size: .9rem !important;
}
#ranking-screen .ranking-podium {
    gap: .7rem !important;
    margin-bottom: .85rem !important;
}
#ranking-screen .ranking-podium-card {
    min-height: 0 !important;
    padding: .72rem .72rem .78rem !important;
    border-radius: 16px !important;
}
#ranking-screen .ranking-podium-top {
    margin-bottom: .48rem !important;
}
#ranking-screen .ranking-laurel {
    width: 100px !important;
    height: 100px !important;
    margin: 0 auto !important;
    position: relative !important;
    overflow: visible !important;
}
#ranking-screen .ranking-laurel-number {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 42px !important;
    height: 42px !important;
    font-size: 1.22rem !important;
    z-index: 3 !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    background: radial-gradient(circle, rgba(0,0,0,.70), rgba(0,0,0,.42)) !important;
    box-shadow: 0 0 18px rgba(0,0,0,.5) !important;
}
#ranking-screen .ranking-podium-class-img {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 82px;
    height: 82px;
    transform: translate(-50%, -50%);
    object-fit: cover;
    border-radius: 50%;
    padding: 4px;
    background: rgba(4,4,7,.64);
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: inset 0 0 22px rgba(0,0,0,.75), 0 0 22px rgba(139,92,246,.24);
    z-index: 2;
}
#ranking-screen .ranking-podium-class-name {
    margin-top: .28rem;
    text-align: center;
    color: #b8beca;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}
#ranking-screen .ranking-laurel.gold .ranking-podium-class-img { box-shadow: inset 0 0 22px rgba(0,0,0,.75), 0 0 24px rgba(240,192,64,.28); }
#ranking-screen .ranking-laurel.silver .ranking-podium-class-img { box-shadow: inset 0 0 22px rgba(0,0,0,.75), 0 0 24px rgba(179,187,198,.23); }
#ranking-screen .ranking-laurel.bronze .ranking-podium-class-img { box-shadow: inset 0 0 22px rgba(0,0,0,.75), 0 0 24px rgba(171,101,62,.24); }
#ranking-screen .ranking-laurel-label,
#ranking-screen .ranking-trophy-emoji {
    display: none !important;
}
#ranking-screen .ranking-podium-name {
    font-size: .95rem !important;
    margin-bottom: .45rem !important;
    line-height: 1.15 !important;
}
#ranking-screen .ranking-podium-stats {
    gap: .26rem !important;
}
#ranking-screen .ranking-stat-line {
    padding: .34rem .52rem !important;
    border-radius: 9px !important;
    font-size: .72rem !important;
    line-height: 1.15 !important;
}
#ranking-screen .ranking-stat-label {
    font-size: .58rem !important;
}
#ranking-screen .ranking-board {
    overflow: visible !important;
}
#ranking-screen .ranking-board-body {
    max-height: none !important;
    overflow: visible !important;
}
#ranking-screen .ranking-board-header,
#ranking-screen .ranking-row {
    grid-template-columns: 66px minmax(170px,1.35fr) 62px minmax(108px,.85fr) minmax(120px,.9fr) 78px !important;
}
#ranking-screen .ranking-board-header {
    padding: .55rem .8rem !important;
    font-size: .62rem !important;
}
#ranking-screen .ranking-row {
    min-height: 44px !important;
    padding: .48rem .8rem !important;
    font-size: .82rem !important;
}
#ranking-screen .ranking-player-avatar {
    width: 32px !important;
    height: 32px !important;
}
#ranking-screen .ranking-player-name {
    font-size: .84rem !important;
}
#ranking-screen .ranking-player-class {
    font-size: .58rem !important;
}
@media (max-width: 980px) {
    #ranking-screen .ranking-public-content {
        width: min(720px, calc(100% - 24px)) !important;
        padding-top: 6rem !important;
    }
    #ranking-screen .ranking-podium {
        max-width: 520px !important;
    }
    #ranking-screen .ranking-podium-card {
        grid-template-columns: 106px minmax(0, 1fr) !important;
        padding: .72rem !important;
    }
    #ranking-screen .ranking-laurel {
        width: 94px !important;
        height: 94px !important;
    }
    #ranking-screen .ranking-podium-class-img {
        width: 76px !important;
        height: 76px !important;
    }
    #ranking-screen .ranking-laurel-number {
        width: 38px !important;
        height: 38px !important;
        font-size: 1.05rem !important;
    }
}
@media (max-width: 560px) {
    #ranking-screen .ranking-public-content {
        width: min(100% - 16px, 440px) !important;
        padding-top: 6.6rem !important;
    }
    #ranking-screen .ranking-hero {
        padding: .75rem !important;
    }
    #ranking-screen .ranking-podium-card {
        grid-template-columns: 86px minmax(0, 1fr) !important;
    }
    #ranking-screen .ranking-laurel {
        width: 78px !important;
        height: 78px !important;
    }
    #ranking-screen .ranking-podium-class-img {
        width: 62px !important;
        height: 62px !important;
    }
    #ranking-screen .ranking-laurel-number {
        width: 32px !important;
        height: 32px !important;
        font-size: .9rem !important;
    }
    #ranking-screen .ranking-podium-class-name {
        font-size: .52rem !important;
    }
}


/* ============================================
   RANKING GENERAL PUBLICO - Podio estilo ganador
   ============================================ */
#ranking-screen .ranking-public-content {
    width: min(1180px, calc(100% - 32px));
}
#ranking-screen .ranking-section {
    max-width: 1140px;
}
#ranking-screen .ranking-podium {
    gap: 1rem;
    align-items: stretch;
}
#ranking-screen .ranking-podium-card {
    min-height: 450px;
    padding: 1.1rem 1rem 1rem;
    border-radius: 22px;
    overflow: hidden;
    position: relative;
    isolation: isolate;
    background:
        linear-gradient(180deg, rgba(15,16,26,.90), rgba(7,8,13,.94)),
        radial-gradient(circle at 50% -10%, rgba(255,255,255,.08), transparent 40%);
    box-shadow: 0 16px 36px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.04);
}
#ranking-screen .ranking-podium-card::after {
    content: '';
    position: absolute;
    top: -14%;
    left: 34%;
    width: 36%;
    height: 78%;
    background: linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.01));
    transform: skewX(-9deg);
    opacity: .18;
    pointer-events: none;
    z-index: 0;
}
#ranking-screen .ranking-podium-card.rank-1 {
    margin-top: 0;
    box-shadow: 0 18px 42px rgba(0,0,0,.34), 0 0 30px rgba(240,192,64,.10);
}
#ranking-screen .ranking-podium-card.rank-2 {
    margin-top: .75rem;
    box-shadow: 0 18px 42px rgba(0,0,0,.30), 0 0 28px rgba(179,187,198,.08);
}
#ranking-screen .ranking-podium-card.rank-3 {
    max-width: 1180px;
    margin: .75rem auto 0;
    box-shadow: 0 18px 42px rgba(0,0,0,.30), 0 0 28px rgba(171,101,62,.08);
}
#ranking-screen .ranking-podium-top {
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: .15rem;
    margin-bottom: .55rem;
    z-index: 1;
}
#ranking-screen .ranking-laurel {
    width: 126px;
    height: 126px;
    z-index: 2;
}
#ranking-screen .ranking-laurel-number {
    width: 74px;
    height: 74px;
    font-size: 2.25rem;
}
#ranking-screen .ranking-podium-figure-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 126px;
    margin-top: -18px;
    margin-bottom: .15rem;
}
#ranking-screen .ranking-podium-aura {
    position: absolute;
    width: 132px;
    height: 132px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(139,92,246,.22), rgba(52,217,255,.08) 45%, transparent 72%);
    filter: blur(10px);
    opacity: .9;
    animation: podiumPulse 3s ease-in-out infinite;
}
#ranking-screen .ranking-podium-card.rank-1 .ranking-podium-aura {
    background: radial-gradient(circle, rgba(240,192,64,.26), rgba(255,255,255,.08) 42%, transparent 72%);
}
#ranking-screen .ranking-podium-card.rank-2 .ranking-podium-aura {
    background: radial-gradient(circle, rgba(179,187,198,.24), rgba(255,255,255,.08) 42%, transparent 72%);
}
#ranking-screen .ranking-podium-card.rank-3 .ranking-podium-aura {
    background: radial-gradient(circle, rgba(171,101,62,.24), rgba(255,255,255,.06) 42%, transparent 72%);
}
#ranking-screen .ranking-podium-figure {
    position: relative;
    z-index: 2;
    width: 118px;
    height: 118px;
    object-fit: contain;
    filter: drop-shadow(0 14px 20px rgba(0,0,0,.45));
    animation: podiumFloat 4.5s ease-in-out infinite;
}
#ranking-screen .ranking-podium-card.rank-2 .ranking-podium-figure { animation-delay: -.8s; }
#ranking-screen .ranking-podium-card.rank-3 .ranking-podium-figure { animation-delay: -1.6s; }
#ranking-screen .ranking-podium-player {
    position: relative;
    z-index: 1;
    text-align: center;
}
#ranking-screen .ranking-podium-place {
    margin-bottom: .35rem;
    font-size: .62rem;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: #b3bbc6;
    opacity: .9;
}
#ranking-screen .ranking-podium-card.rank-1 .ranking-podium-place { color: #f0c040; }
#ranking-screen .ranking-podium-card.rank-2 .ranking-podium-place { color: #d8dde5; }
#ranking-screen .ranking-podium-card.rank-3 .ranking-podium-place { color: #d79a74; }
#ranking-screen .ranking-podium-name {
    margin-bottom: .55rem;
    font-size: 1.05rem;
    font-weight: 800;
}
#ranking-screen .ranking-podium-class-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .7rem;
    padding: .34rem .78rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.04);
    color: #f3f4f6;
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .7px;
}
#ranking-screen .ranking-podium-stats {
    gap: .42rem;
}
#ranking-screen .ranking-stat-line {
    padding: .56rem .72rem;
}
#ranking-screen .ranking-stat-label { font-size: .64rem; }
#ranking-screen .ranking-stat-value { font-size: .84rem; }
@keyframes podiumFloat {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}
@keyframes podiumPulse {
    0%, 100% { transform: scale(.92); opacity: .72; }
    50% { transform: scale(1.05); opacity: 1; }
}
@media (max-width: 980px) {
    #ranking-screen .ranking-podium { grid-template-columns: 1fr; max-width: 520px; }
    #ranking-screen .ranking-podium-card,
    #ranking-screen .ranking-podium-card.rank-1,
    #ranking-screen .ranking-podium-card.rank-2,
    #ranking-screen .ranking-podium-card.rank-3 {
        margin-top: 0;
        min-height: 0;
    }
    #ranking-screen .ranking-podium-card {
        display: grid;
        grid-template-columns: 132px 1fr;
        gap: .75rem;
        align-items: center;
    }
    #ranking-screen .ranking-podium-top { margin-bottom: 0; }
    #ranking-screen .ranking-podium-player { text-align: left; }
    #ranking-screen .ranking-podium-class-chip { margin-left: 0; }
}
@media (max-width: 560px) {
    #ranking-screen .ranking-podium-card {
        grid-template-columns: 100px 1fr;
        padding: .8rem;
    }
    #ranking-screen .ranking-laurel { width: 92px; height: 92px; }
    #ranking-screen .ranking-laurel-number { width: 56px; height: 56px; font-size: 1.65rem; }
    #ranking-screen .ranking-podium-figure-wrap { min-height: 82px; margin-top: -14px; }
    #ranking-screen .ranking-podium-aura { width: 90px; height: 90px; }
    #ranking-screen .ranking-podium-figure { width: 78px; height: 78px; }
    #ranking-screen .ranking-podium-place { font-size: .56rem; }
    #ranking-screen .ranking-podium-name { font-size: .95rem; }
}

/* ============================================
   WAVE FIX - Ranking PNG medals + smaller class icons
   ============================================ */
#ranking-screen .ranking-podium-card {
    min-height: 410px;
}
#ranking-screen .ranking-laurel.has-trophy {
    width: 116px;
    height: 116px;
    background: transparent !important;
    border-radius: 0;
    box-shadow: none !important;
}
#ranking-screen .ranking-laurel.has-trophy::before,
#ranking-screen .ranking-laurel.has-trophy::after {
    display: none !important;
}
#ranking-screen .ranking-trophy-img {
    width: 110px;
    height: 110px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 8px 14px rgba(0,0,0,.55));
    animation: rankingTrophyFloat 4s ease-in-out infinite;
    transform-origin: center;
}
#ranking-screen .rank-1 .ranking-trophy-img {
    filter: drop-shadow(0 0 22px rgba(240,192,64,.45)) drop-shadow(0 8px 14px rgba(0,0,0,.55));
}
#ranking-screen .rank-2 .ranking-trophy-img {
    filter: drop-shadow(0 0 18px rgba(210,220,232,.32)) drop-shadow(0 8px 14px rgba(0,0,0,.55));
    animation-delay: -.7s;
}
#ranking-screen .rank-3 .ranking-trophy-img {
    filter: drop-shadow(0 0 18px rgba(205,127,50,.34)) drop-shadow(0 8px 14px rgba(0,0,0,.55));
    animation-delay: -1.3s;
}
#ranking-screen .ranking-podium-card:hover .ranking-trophy-img {
    transform: translateY(-5px) scale(1.05);
}
#ranking-screen .ranking-podium-figure-wrap {
    min-height: 82px;
    margin-top: -8px;
    margin-bottom: .25rem;
}
#ranking-screen .ranking-podium-aura {
    width: 78px;
    height: 78px;
    filter: blur(9px);
    opacity: .72;
}
#ranking-screen .ranking-podium-figure {
    width: 72px;
    height: 72px;
    object-fit: contain;
    border-radius: 12px;
    filter: drop-shadow(0 10px 15px rgba(0,0,0,.42));
}
#ranking-screen .ranking-podium-place {
    margin-top: .1rem;
}
#ranking-screen .ranking-podium-class-chip {
    padding: .28rem .72rem;
    font-size: .68rem;
}
@keyframes rankingTrophyFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
@media (max-width: 980px) {
    #ranking-screen .ranking-podium-card {
        grid-template-columns: 112px 1fr;
    }
    #ranking-screen .ranking-laurel.has-trophy {
        width: 96px;
        height: 96px;
    }
    #ranking-screen .ranking-trophy-img {
        width: 94px;
        height: 94px;
    }
    #ranking-screen .ranking-podium-figure-wrap {
        min-height: 68px;
    }
    #ranking-screen .ranking-podium-figure {
        width: 60px;
        height: 60px;
    }
}
@media (max-width: 560px) {
    #ranking-screen .ranking-podium-card {
        grid-template-columns: 88px 1fr;
    }
    #ranking-screen .ranking-laurel.has-trophy {
        width: 74px;
        height: 74px;
    }
    #ranking-screen .ranking-trophy-img {
        width: 72px;
        height: 72px;
    }
    #ranking-screen .ranking-podium-figure-wrap {
        min-height: 54px;
        margin-top: -5px;
    }
    #ranking-screen .ranking-podium-figure {
        width: 48px;
        height: 48px;
        border-radius: 9px;
    }
}


/* ============================================
   FIX FINAL - Fondo visible para Ranking General
   ============================================ */
#ranking-screen {
    background: #050508 url('../assets/ranking/fondos/ranking-bg-dark.jpg') center top / cover fixed no-repeat !important;
}
#ranking-screen .ranking-bg-slider {
    display: block !important;
    opacity: 1 !important;
    z-index: 0 !important;
}
#ranking-screen .ranking-bg-slide,
#ranking-screen .ranking-bg-slide.active {
    display: block !important;
    opacity: 1 !important;
    background-image: url('../assets/ranking/fondos/ranking-bg-dark.jpg') !important;
    background-size: cover !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;
    filter: saturate(1) contrast(1.08) brightness(.92) !important;
}
#ranking-screen .ranking-bg-overlay {
    z-index: 1 !important;
    background:
        radial-gradient(circle at 18% 12%, rgba(139,92,246,.12), transparent 34%),
        radial-gradient(circle at 86% 14%, rgba(52,217,255,.08), transparent 30%),
        linear-gradient(180deg, rgba(4,4,7,.28), rgba(4,4,7,.48) 48%, rgba(4,4,7,.70) 100%) !important;
}
#ranking-screen::before {
    z-index: 1 !important;
    opacity: .45 !important;
    background:
        radial-gradient(circle at 18% 18%, rgba(139,92,246,.18), transparent 28%),
        radial-gradient(circle at 82% 20%, rgba(52,217,255,.10), transparent 26%) !important;
}
#ranking-screen::after {
    z-index: 1 !important;
    opacity: .55 !important;
}
#ranking-screen .ranking-public-nav,
#ranking-screen .ranking-public-content {
    position: relative;
    z-index: 3 !important;
}
#ranking-screen .ranking-hero,
#ranking-screen .ranking-podium-card,
#ranking-screen .ranking-board {
    background-color: rgba(8, 9, 14, .72) !important;
    backdrop-filter: blur(8px);
}


/* ============================================
   NOTICIAS / EVENTOS - Rakion Remake
   ============================================ */
.news-screen {
    position: relative;
    z-index: 2;
    min-height: 100vh;
    background: #07070b;
    color: var(--text-primary);
    overflow-x: hidden;
}
.news-bg-slider,
.news-bg-slide,
.news-bg-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
}
.news-bg-slider { z-index: 0; }
.news-bg-slide {
    background-size: cover;
    background-position: center;
    opacity: .74;
    filter: saturate(.9) contrast(1.05) brightness(.82);
}
.news-bg-overlay {
    z-index: 1;
    background:
        radial-gradient(circle at 15% 8%, rgba(139,92,246,.24), transparent 30%),
        radial-gradient(circle at 85% 15%, rgba(52,217,255,.10), transparent 28%),
        linear-gradient(180deg, rgba(5,5,10,.70), rgba(7,7,11,.88) 45%, rgba(5,5,8,.95));
}
.news-public-nav { position: fixed; padding-top: 1rem; }
.news-public-content {
    position: relative;
    z-index: 2;
    width: min(1160px, calc(100% - 32px));
    margin: 0 auto;
    padding: 6.4rem 0 2.5rem;
}
.news-section { width: 100%; }
.news-view { display: none; animation: fadeInUp .35s ease both; }
.news-view.active { display: block; }
.news-hero,
.news-event-banner {
    position: relative;
    overflow: hidden;
    padding: clamp(1.35rem, 2.5vw, 2rem);
    border-radius: 22px;
    border: 1px solid rgba(139,92,246,.24);
    background:
        linear-gradient(145deg, rgba(12,12,18,.84), rgba(15,10,22,.78)),
        radial-gradient(circle at 12% 0%, rgba(139,92,246,.22), transparent 35%),
        radial-gradient(circle at 92% 0%, rgba(240,192,64,.12), transparent 32%);
    box-shadow: 0 20px 44px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.04);
    backdrop-filter: blur(10px);
}
.news-hero-center { text-align: center; margin-bottom: 1.3rem; }
.news-kicker {
    display: inline-block;
    color: #8b5cf6;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: .72rem;
    font-weight: 800;
    margin-bottom: .45rem;
}
.news-title {
    font-family: 'Cinzel', serif;
    font-size: clamp(2rem, 5vw, 4rem);
    line-height: 1.02;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #fff;
    text-shadow: 0 0 30px rgba(139,92,246,.18);
}
.news-subtitle {
    max-width: 760px;
    margin: .65rem auto 0;
    color: #b5bac4;
    font-size: clamp(.9rem, 1.6vw, 1.03rem);
}
.news-hub-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}
.news-hub-card {
    position: relative;
    min-height: 270px;
    overflow: hidden;
    padding: 1.6rem;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.08);
    background: linear-gradient(180deg, rgba(16,16,25,.88), rgba(8,8,12,.94));
    box-shadow: 0 18px 38px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.035);
    cursor: pointer;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.news-hub-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: .20;
    transition: opacity .25s ease, transform .45s ease;
}
.news-hub-card.monthly::before { background-image: url('../assets/backgrounds/bg-warrior.webp'); }
.news-hub-card.weekly::before { background-image: url('../assets/backgrounds/bg-mage.webp'); }
.news-hub-card:hover {
    transform: translateY(-5px);
    border-color: rgba(139,92,246,.45);
    box-shadow: 0 24px 52px rgba(0,0,0,.46), 0 0 34px rgba(139,92,246,.18);
}
.news-hub-card:hover::before { opacity: .32; transform: scale(1.05); }
.news-card-glow {
    position: absolute;
    inset: auto -20% -45% -20%;
    height: 200px;
    background: radial-gradient(circle, rgba(139,92,246,.22), transparent 62%);
    pointer-events: none;
}
.news-hub-card > *:not(.news-card-glow) { position: relative; z-index: 1; }
.news-card-tag {
    display: inline-flex;
    padding: .32rem .75rem;
    border-radius: 999px;
    border: 1px solid rgba(240,192,64,.25);
    color: #f0c040;
    background: rgba(240,192,64,.08);
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: 800;
}
.news-hub-card h3 {
    margin-top: 1.15rem;
    font-family: 'Cinzel', serif;
    font-size: clamp(1.6rem, 3vw, 2.25rem);
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.news-hub-card p { margin-top: .75rem; color: #b0b5bf; max-width: 520px; }
.news-read-btn,
.news-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1.2rem;
    padding: .72rem 1.05rem;
    border-radius: 999px;
    border: 1px solid rgba(139,92,246,.42);
    background: linear-gradient(135deg, rgba(139,92,246,.34), rgba(192,160,96,.14));
    color: #fff;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
}
.news-read-btn:hover,
.news-back-btn:hover { transform: translateY(-2px); box-shadow: 0 0 26px rgba(139,92,246,.22); }
.news-back-btn { margin: 0 0 1rem; background: rgba(12,12,18,.70); }
.news-event-banner { margin-bottom: 1rem; min-height: 210px; }
.news-event-banner::after {
    content: '';
    position: absolute;
    right: -4%;
    bottom: -18%;
    width: min(420px, 46%);
    height: 260px;
    background: url('../assets/logo/logo.png') center/contain no-repeat;
    opacity: .13;
    filter: drop-shadow(0 0 30px rgba(139,92,246,.35));
}
.news-rate-badges,
.news-mini-badges,
.news-time-row,
.news-goal-list {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin-top: .85rem;
}
.news-rate-badges span,
.news-mini-badges span,
.news-time-row span,
.news-goal-list span {
    padding: .55rem .75rem;
    border-radius: 12px;
    border: 1px solid rgba(52,217,255,.22);
    background: rgba(52,217,255,.08);
    color: #34d9ff;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .5px;
}
.news-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .9rem;
}
.news-info-card {
    padding: 1.15rem;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,.075);
    background: linear-gradient(180deg, rgba(17,18,27,.84), rgba(9,9,13,.92));
    box-shadow: 0 14px 30px rgba(0,0,0,.26), inset 0 1px 0 rgba(255,255,255,.03);
    backdrop-filter: blur(8px);
}
.news-info-card.wide { grid-column: 1 / -1; }
.news-info-card h3 {
    margin-bottom: .7rem;
    color: #fff;
    font-size: 1.05rem;
    letter-spacing: .4px;
}
.news-info-card p,
.news-info-card li { color: #b8bec8; font-size: .9rem; }
.news-info-card ul { margin-left: 1.05rem; display: grid; gap: .38rem; }
.news-info-card strong { color: #f0c040; }
.news-info-card code {
    padding: .12rem .38rem;
    border-radius: 6px;
    background: rgba(139,92,246,.16);
    color: #d7c5ff;
}
.news-info-card.anniversary,
.warning-card {
    border-color: rgba(240,192,64,.18);
    background: linear-gradient(180deg, rgba(30,22,12,.70), rgba(10,9,12,.92));
}
.news-goal-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) {
    .news-hub-grid,
    .news-info-grid { grid-template-columns: 1fr; }
    .news-goal-list { grid-template-columns: 1fr; }
    .news-public-nav .landing-nav-inner { align-items: flex-start; gap: .75rem; }
    .news-nav-menu { flex-wrap: wrap; justify-content: flex-end; }
    .news-nav-menu .nav-link { padding: .45rem .55rem; font-size: .68rem; }
}
@media (max-width: 560px) {
    .news-public-content { width: min(100% - 20px, 460px); padding-top: 5.6rem; }
    .news-public-nav { padding: .65rem .75rem 0; }
    .news-public-nav .landing-nav-inner { display: block; }
    .news-public-nav .nav-logo { margin-bottom: .35rem; }
    .news-public-nav .nav-menu { justify-content: flex-start; }
    .news-title { font-size: 2rem; }
    .news-hub-card { min-height: 230px; padding: 1.1rem; }
    .news-info-card { padding: .9rem; }
    .news-time-row span,
    .news-rate-badges span,
    .news-mini-badges span { flex: 1; text-align: center; }
}


/* ============================================
   WAVE UPDATE - Fuente urbana + barra global + sesión
   ============================================ */
.nav-logo-text,
.nav-brand > span {
    font-family: 'Black Ops One', 'Teko', 'Inter', sans-serif !important;
    text-transform: uppercase;
    letter-spacing: 2.6px;
    font-weight: 400 !important;
    line-height: 1;
    color: #f4f4f5;
    text-shadow: 0 0 10px rgba(139,92,246,.35), 0 2px 0 rgba(0,0,0,.75);
}
.nav-logo-text .text-accent,
.nav-brand .text-accent {
    color: #9b6dff;
    text-shadow: 0 0 14px rgba(139,92,246,.7);
}
.shop-public-nav {
    position: sticky !important;
    top: 0;
    left: auto;
    right: auto;
    z-index: 250;
    padding: .65rem 1.4rem;
    background: linear-gradient(180deg, rgba(8,8,14,.92), rgba(8,8,14,.72));
    border-bottom: 1px solid rgba(139,92,246,.20);
    backdrop-filter: blur(18px);
    box-shadow: 0 14px 30px rgba(0,0,0,.24);
}
.shop-nav-inner {
    max-width: 1500px;
    gap: 1rem;
}
.shop-main-menu {
    flex: 1;
    justify-content: center;
}
.shop-session-actions {
    display: flex;
    align-items: center;
    gap: .55rem;
    flex-shrink: 0;
}
.shop-session-actions .user-badge,
.shop-session-actions .points-badge {
    background: rgba(20,20,28,.72);
    backdrop-filter: blur(12px);
}
.shop-session-actions .btn-orders,
.shop-session-actions .btn-landing,
.shop-session-actions .btn-logout {
    background: rgba(10,10,16,.55);
    backdrop-filter: blur(10px);
}
.main-screen .main-content {
    padding-top: 1.25rem;
}
@media (max-width: 1180px) {
    .shop-nav-inner { flex-wrap: wrap; justify-content: center; }
    .shop-main-menu { order: 3; width: 100%; flex-wrap: wrap; }
    .shop-session-actions { margin-left: auto; }
}
@media (max-width: 720px) {
    .shop-public-nav { padding: .55rem .75rem; }
    .nav-logo-text { font-size: 1.05rem; letter-spacing: 1.8px; }
    .shop-session-actions { gap: .35rem; flex-wrap: wrap; justify-content: flex-end; }
    .shop-session-actions .user-badge span,
    .shop-session-actions .points-badge span { font-size: .72rem; }
    .shop-main-menu .nav-link { padding: .38rem .48rem; font-size: .63rem; }
}

/* ============================================
   ASISTENCIA DIARIA - RAKION REMAKE
   ============================================ */
#tab-attendance {
    position: relative;
    min-height: auto;
    margin: 0;
    padding: clamp(.75rem, 1.5vw, 1.35rem) 0 clamp(1rem, 1.8vw, 1.6rem);
    overflow: visible;
}
.attendance-section {
    position: relative;
    z-index: 1;
    width: min(1260px, 100%);
    min-height: auto;
    margin: 0 auto;
    padding: clamp(.85rem, 1.5vw, 1.15rem);
    border-radius: 24px;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(5,5,8,.78), rgba(7,7,12,.94)),
        radial-gradient(circle at 12% 8%, rgba(139,92,246,.20), transparent 34%),
        radial-gradient(circle at 88% 5%, rgba(192,160,96,.12), transparent 30%);
    border: 1px solid rgba(139,92,246,.22);
    box-shadow: 0 20px 56px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.04);
}
.attendance-bg-layer {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,.25), rgba(0,0,0,.78)),
        url('../assets/ranking/fondos/ranking-bg-dark.jpg') center/cover no-repeat;
    opacity: .9;
    filter: saturate(.9) contrast(1.04) brightness(.74);
    transform: scale(1.02);
}
.attendance-section::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(115deg, transparent 0%, rgba(255,255,255,.055) 42%, transparent 58%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 70px);
    opacity: .45;
}
.attendance-header,
.attendance-calendar-panel,
.attendance-info-row {
    position: relative;
    z-index: 2;
}
.attendance-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1.25rem;
    align-items: center;
    margin-bottom: 1rem;
    padding: .85rem 1rem;
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(10,10,18,.78), rgba(25,15,36,.46));
    border: 1px solid rgba(139,92,246,.24);
    box-shadow: 0 15px 42px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.04);
    backdrop-filter: blur(12px);
}
.attendance-logo-side img {
    width: 62px;
    height: auto;
    filter: drop-shadow(0 0 18px rgba(139,92,246,.35));
}
.attendance-kicker {
    display: inline-block;
    margin-bottom: .25rem;
    color: #f3d384;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: 2.4px;
    font-weight: 800;
}
.attendance-title-box h2 {
    margin: 0;
    font-family: 'Cinzel', serif;
    font-size: clamp(1.15rem, 2.2vw, 1.85rem);
    line-height: 1.1;
    text-transform: uppercase;
    color: #f3d384;
    text-shadow: 0 0 20px rgba(243,211,132,.22), 0 0 34px rgba(139,92,246,.16);
}
.attendance-title-box p {
    margin-top: .35rem;
    color: #c4c8ce;
    font-size: .85rem;
}
.attendance-actions {
    display: flex;
    gap: .65rem;
}
.attendance-btn-home,
.attendance-btn-exit,
.attendance-modal-btn {
    border: 0;
    border-radius: 12px;
    padding: .62rem .9rem;
    font-family: 'Teko', 'Inter', sans-serif;
    font-weight: 700;
    letter-spacing: 1.4px;
    cursor: pointer;
    color: #fff;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.attendance-btn-home {
    background: linear-gradient(135deg, #5b3fd6, #8b5cf6);
    box-shadow: 0 0 20px rgba(139,92,246,.22);
}
.attendance-btn-exit {
    background: linear-gradient(135deg, #8f1d2a, #ef4444);
    box-shadow: 0 0 20px rgba(239,68,68,.18);
}
.attendance-btn-home:hover,
.attendance-btn-exit:hover,
.attendance-modal-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.12);
}
.attendance-calendar-panel {
    max-width: 1180px;
    margin: 0 auto;
    padding: clamp(.82rem, 1.25vw, 1.05rem);
    border-radius: 24px;
    background: rgba(5,5,10,.72);
    border: 1px solid rgba(139,92,246,.38);
    box-shadow: 0 0 38px rgba(139,92,246,.14), 0 22px 54px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.04);
    backdrop-filter: blur(12px);
}
.attendance-calendar-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.attendance-month-label {
    display: block;
    color: #8b5cf6;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 800;
}
.attendance-calendar-top h3 {
    margin: .2rem 0 0;
    color: #fff;
    font-family: 'Cinzel', serif;
    font-size: 1.28rem;
    letter-spacing: 1.4px;
}
.attendance-status-mini {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .65rem .9rem;
    border-radius: 999px;
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.08);
    color: #d6d9df;
    font-size: .78rem;
}
#attendance-status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #f3d384;
    box-shadow: 0 0 14px rgba(243,211,132,.8);
}
#attendance-status-dot.claimed {
    background: #10b981;
    box-shadow: 0 0 14px rgba(16,185,129,.8);
}
.attendance-weekdays,
.attendance-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: .55rem;
}
.attendance-weekdays {
    margin-bottom: .55rem;
}
.attendance-weekdays span {
    padding: .55rem .35rem;
    text-align: center;
    color: #aeb4bf;
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-radius: 10px;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.045);
}
.attendance-day,
.attendance-empty-day {
    min-height: 84px;
    border-radius: 16px;
}
.attendance-empty-day {
    background: rgba(255,255,255,.018);
    border: 1px solid rgba(255,255,255,.025);
}
.attendance-day {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .34rem;
    padding: .42rem .34rem .46rem;
    background: linear-gradient(180deg, rgba(17,18,25,.88), rgba(7,8,12,.92));
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
    overflow: hidden;
}
.attendance-day::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 12%, rgba(139,92,246,.14), transparent 42%);
    opacity: .8;
    pointer-events: none;
}
.attendance-day:hover {
    transform: translateY(-3px);
    border-color: rgba(139,92,246,.36);
    box-shadow: 0 12px 25px rgba(0,0,0,.35), 0 0 20px rgba(139,92,246,.16);
}
.attendance-day-number {
    position: absolute;
    top: .45rem;
    left: .55rem;
    z-index: 1;
    color: #f3d384;
    font-weight: 900;
    font-size: .74rem;
}
.attendance-reward-icon {
    position: relative;
    z-index: 1;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    border-radius: 14px;
    background: radial-gradient(circle, rgba(139,92,246,.22), rgba(0,0,0,.45));
    border: 1px solid rgba(139,92,246,.22);
    box-shadow: 0 0 18px rgba(139,92,246,.12);
}

.attendance-reward-icon {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}
.attendance-reward-icon::after {
    content: '';
    position: absolute;
    inset: 12%;
    border-radius: 12px;
    background: radial-gradient(circle, rgba(255,233,130,.42) 0%, rgba(139,92,246,.26) 38%, rgba(255,255,255,0) 72%);
    filter: blur(8px);
    opacity: .55;
    animation: attendancePrizeBlink 1.9s ease-in-out infinite alternate;
    z-index: 0;
    pointer-events: none;
}
.attendance-reward-icon > span,
.attendance-reward-icon > img {
    position: relative;
    z-index: 1;
    animation: attendancePrizeFloat 2.7s ease-in-out infinite;
}
.attendance-reward-icon > img {
    width: 82%;
    height: 82%;
    object-fit: contain;
    filter: drop-shadow(0 0 8px rgba(255,235,160,.36));
}
.attendance-day.active .attendance-reward-icon::after {
    opacity: .88;
    animation-duration: 1.15s;
}
.attendance-day.claimed .attendance-reward-icon::after {
    opacity: .35;
}
@keyframes attendancePrizeFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-3px) scale(1.04); }
}
@keyframes attendancePrizeBlink {
    0% { opacity: .35; transform: scale(.88); }
    100% { opacity: .96; transform: scale(1.08); }
}
.attendance-reward-name {
    position: relative;
    z-index: 1;
    color: #e8eaf0;
    font-size: .72rem;
    font-weight: 800;
    text-align: center;
    line-height: 1.15;
    min-height: 1.15rem;
}
.attendance-claim-label {
    position: relative;
    z-index: 1;
    margin-top: .08rem;
    padding: .16rem .42rem;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    color: #8f97a3;
    font-size: .52rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 900;
}
.attendance-day.active {
    cursor: pointer;
    border-color: rgba(243,211,132,.82);
    box-shadow: 0 0 0 1px rgba(243,211,132,.25), 0 0 30px rgba(243,211,132,.20), inset 0 1px 0 rgba(255,255,255,.08);
    background: linear-gradient(180deg, rgba(45,34,12,.70), rgba(12,10,7,.93));
}
.attendance-day.active .attendance-claim-label {
    color: #15100b;
    background: linear-gradient(135deg, #f3d384, #c0a060);
    box-shadow: 0 0 18px rgba(243,211,132,.28);
}
.attendance-day.claimed {
    border-color: rgba(16,185,129,.45);
    opacity: .78;
}
.attendance-day.claimed::after {
    content: 'RECLAMADO';
    position: absolute;
    right: .45rem;
    top: .45rem;
    z-index: 2;
    padding: .16rem .38rem;
    border-radius: 999px;
    background: rgba(16,185,129,.16);
    border: 1px solid rgba(16,185,129,.34);
    color: #10b981;
    font-size: .48rem;
    font-weight: 900;
    letter-spacing: .8px;
}
.attendance-day.locked {
    opacity: .58;
}
.attendance-info-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .85rem;
    margin-top: 1rem;
}
.attendance-info-card {
    padding: .75rem .85rem;
    border-radius: 16px;
    background: rgba(5,5,10,.62);
    border: 1px solid rgba(139,92,246,.18);
    backdrop-filter: blur(10px);
}
.attendance-info-card strong {
    display: block;
    color: #f3d384;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.attendance-info-card span {
    display: block;
    margin-top: .25rem;
    color: #aeb4bf;
    font-size: .82rem;
}
.attendance-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0,0,0,.72);
    backdrop-filter: blur(8px);
}
.attendance-modal-overlay.active { display: flex; }
.attendance-modal-card {
    position: relative;
    width: min(420px, 94vw);
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(239,68,68,.56);
    background: linear-gradient(180deg, rgba(25,25,33,.96), rgba(8,8,12,.98));
    box-shadow: 0 28px 70px rgba(0,0,0,.65), 0 0 42px rgba(239,68,68,.22);
    animation: fadeInUp .26s ease-out;
}
.attendance-modal-glow {
    position: absolute;
    inset: -40%;
    background: conic-gradient(from 180deg, transparent, rgba(239,68,68,.18), transparent, rgba(139,92,246,.14), transparent);
    animation: spin 8s linear infinite;
    opacity: .8;
}
.attendance-modal-close {
    position: absolute;
    top: .7rem;
    right: .85rem;
    z-index: 2;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 50%;
    background: rgba(0,0,0,.35);
    color: #fff;
    font-size: 1.25rem;
    cursor: pointer;
}
.attendance-modal-content {
    position: relative;
    z-index: 1;
    padding: 2.1rem 1.5rem 1.45rem;
    text-align: center;
}
.attendance-modal-title {
    margin-bottom: 1rem;
    color: #ff6b76;
    font-family: 'Cinzel', serif;
    font-size: 1.35rem;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-shadow: 0 0 18px rgba(239,68,68,.32);
}
.attendance-modal-icon {
    width: 92px;
    height: 92px;
    margin: 0 auto .9rem;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.2rem;
    background: radial-gradient(circle, rgba(239,68,68,.18), rgba(0,0,0,.44));
    border: 1px solid rgba(239,68,68,.36);
    box-shadow: 0 0 30px rgba(239,68,68,.16);
}
.attendance-modal-icon img { width: 80%; height: 80%; object-fit: contain; filter: drop-shadow(0 0 14px rgba(255,235,160,.38)); animation: attendancePrizeFloat 2.8s ease-in-out infinite; }
.attendance-modal-content h3 {
    color: #fff;
    font-size: 1.05rem;
    margin-bottom: .4rem;
}
.attendance-modal-content p {
    color: #b8bec8;
    font-size: .9rem;
    margin-bottom: 1.1rem;
}
.attendance-modal-btn {
    background: linear-gradient(135deg, #b91c1c, #ef4444);
    min-width: 160px;
    box-shadow: 0 0 26px rgba(239,68,68,.24);
}
@media (max-width: 980px) {
    .attendance-header { grid-template-columns: 1fr; text-align: center; }
    .attendance-logo-side { display: none; }
    .attendance-actions { justify-content: center; }
    .attendance-weekdays span { font-size: .58rem; padding: .45rem .15rem; }
    .attendance-day, .attendance-empty-day { min-height: 96px; }
    .attendance-info-row { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
    #tab-attendance { margin: 0; padding: .75rem 0 1rem; }
    .attendance-section { width: 100%; padding: .75rem; border-radius: 18px; }
    .attendance-calendar-panel { padding: .75rem; border-radius: 18px; }
    .attendance-calendar-top { flex-direction: column; align-items: flex-start; }
    .attendance-weekdays { display: none; }
    .attendance-calendar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
    .attendance-empty-day { display: none; }
    .attendance-day { min-height: 105px; }
}

/* ============================================
   ELIMINAR PERSONAJE - Panel Dark Control
   ============================================ */
#tab-delete-character {
    position: relative;
    padding: clamp(.75rem, 1.6vw, 1.35rem) 0 clamp(1rem, 1.8vw, 1.6rem);
}
.delete-character-section {
    position: relative;
    width: min(1060px, 100%);
    margin: 0 auto;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(139,92,246,.22);
    background: linear-gradient(145deg, rgba(9,13,20,.88), rgba(8,9,14,.96));
    box-shadow: 0 24px 70px rgba(0,0,0,.48), inset 0 1px 0 rgba(255,255,255,.045);
}
.delete-character-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 0%, rgba(139,92,246,.18), transparent 34%),
        radial-gradient(circle at 86% 12%, rgba(16,185,129,.10), transparent 30%),
        linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,.18), rgba(0,0,0,.76)),
        url('../assets/ranking/fondos/ranking-bg-dark.jpg') center/cover no-repeat;
    opacity: .78;
    filter: saturate(.86) contrast(1.06) brightness(.62);
    transform: scale(1.02);
}
.delete-character-section::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(115deg, transparent 0%, rgba(255,255,255,.045) 43%, transparent 58%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 1px, transparent 1px 66px);
    z-index: 1;
    opacity: .38;
}
.delete-character-shell {
    position: relative;
    z-index: 2;
    padding: clamp(1rem, 1.8vw, 1.55rem);
}
.delete-character-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 1rem 1.1rem;
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(7,10,16,.82), rgba(18,22,32,.56));
    border: 1px solid rgba(255,255,255,.07);
    backdrop-filter: blur(12px);
}
.delete-character-kicker {
    display: inline-block;
    margin-bottom: .3rem;
    color: #10b981;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: 2.2px;
    font-weight: 900;
}
.delete-character-header h2 {
    margin: 0;
    font-family: 'Teko', 'Inter', sans-serif;
    font-size: clamp(1.9rem, 4vw, 3.2rem);
    line-height: .9;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #fff;
    text-shadow: 0 0 22px rgba(139,92,246,.22);
}
.delete-character-header p {
    margin-top: .45rem;
    color: #aeb4bf;
    font-size: .9rem;
}
.delete-character-alert {
    padding: .55rem .9rem;
    border-radius: 999px;
    color: #ff6b76;
    background: rgba(239,68,68,.11);
    border: 1px solid rgba(239,68,68,.30);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: 900;
    white-space: nowrap;
}
.delete-rules-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .75rem;
    margin-bottom: 1rem;
}
.delete-rule-card {
    padding: 1rem;
    min-height: 116px;
    border-radius: 18px;
    background: rgba(7,10,16,.76);
    border: 1px solid rgba(255,255,255,.07);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035), 0 12px 26px rgba(0,0,0,.22);
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}
.delete-rule-card::after {
    content: '';
    position: absolute;
    right: -20px;
    top: -20px;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--rule-glow, rgba(139,92,246,.25)), transparent 72%);
    opacity: .72;
}
.delete-rule-card span {
    display: block;
    color: #8f97a3;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-weight: 900;
}
.delete-rule-card strong {
    display: block;
    margin-top: .38rem;
    font-size: clamp(1.1rem, 2.2vw, 1.45rem);
    line-height: 1;
    font-weight: 900;
}
.delete-rule-card small {
    display: block;
    margin-top: .55rem;
    color: #aeb4bf;
    font-size: .76rem;
}
.delete-rule-card.gold { --rule-glow: rgba(243,211,132,.28); border-color: rgba(243,211,132,.18); }
.delete-rule-card.gold strong { color: #f3d384; text-shadow: 0 0 16px rgba(243,211,132,.22); }
.delete-rule-card.green { --rule-glow: rgba(16,185,129,.28); border-color: rgba(16,185,129,.18); }
.delete-rule-card.green strong { color: #10b981; text-shadow: 0 0 16px rgba(16,185,129,.22); }
.delete-rule-card.blue { --rule-glow: rgba(52,217,255,.26); border-color: rgba(52,217,255,.16); }
.delete-rule-card.blue strong { color: #34d9ff; text-shadow: 0 0 16px rgba(52,217,255,.20); }
.delete-character-list-wrap {
    padding: 1rem;
    border-radius: 20px;
    background: rgba(5,7,12,.66);
    border: 1px solid rgba(139,92,246,.18);
    backdrop-filter: blur(12px);
}
.delete-list-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .75rem;
    color: #fff;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.1px;
    font-size: .78rem;
}
.delete-refresh-btn {
    border: 1px solid rgba(139,92,246,.28);
    background: rgba(139,92,246,.12);
    color: #c8b8ff;
    padding: .45rem .72rem;
    border-radius: 999px;
    cursor: pointer;
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .8px;
}
.delete-refresh-btn:hover { background: rgba(139,92,246,.20); color: #fff; }
.delete-character-list {
    display: grid;
    gap: .65rem;
}
.delete-loading {
    padding: 1rem;
    color: #aeb4bf;
    text-align: center;
}
.delete-character-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 1rem;
    align-items: center;
    padding: .85rem .9rem;
    border-radius: 18px;
    background: linear-gradient(90deg, rgba(15,18,26,.90), rgba(7,9,14,.94));
    border: 1px solid rgba(255,255,255,.07);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.delete-character-card:hover {
    transform: translateY(-2px);
    border-color: rgba(139,92,246,.30);
    box-shadow: 0 12px 30px rgba(0,0,0,.26), 0 0 20px rgba(139,92,246,.10);
}
.delete-character-avatar {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(139,92,246,.28);
    background: radial-gradient(circle, rgba(139,92,246,.22), rgba(0,0,0,.42));
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 20px rgba(0,0,0,.45), 0 0 18px rgba(139,92,246,.12);
}
.delete-character-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.delete-character-info { min-width: 0; }
.delete-character-name {
    color: #fff;
    font-size: 1.08rem;
    font-weight: 900;
    letter-spacing: .4px;
    margin-bottom: .35rem;
}
.delete-character-stats {
    display: flex;
    flex-wrap: wrap;
    gap: .42rem;
}
.delete-stat-pill {
    padding: .28rem .52rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.07);
    background: rgba(255,255,255,.04);
    color: #aeb4bf;
    font-size: .68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .55px;
}
.delete-stat-pill b { color: #fff; }
.delete-stat-pill.level b { color: #10b981; }
.delete-stat-pill.exp b { color: #34d9ff; }
.delete-character-action {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: .42rem;
}
.delete-character-btn {
    border: 0;
    min-width: 118px;
    padding: .7rem .95rem;
    border-radius: 12px;
    font-family: 'Teko', 'Inter', sans-serif;
    font-size: 1rem;
    letter-spacing: 1px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, #8f1d2a, #ef4444);
    box-shadow: 0 0 24px rgba(239,68,68,.18);
    cursor: pointer;
    transition: transform .18s ease, filter .18s ease, opacity .18s ease;
}
.delete-character-btn:hover { transform: translateY(-2px); filter: brightness(1.12); }
.delete-character-btn:disabled {
    cursor: not-allowed;
    opacity: .45;
    color: #9ca3af;
    background: linear-gradient(135deg, #272b34, #161920);
    box-shadow: none;
    transform: none;
}
.delete-character-lock-reason {
    color: #ff6b76;
    font-size: .7rem;
    text-align: right;
    font-weight: 800;
}
.delete-balance-panel {
    width: min(520px, 100%);
    margin: 1rem auto 0;
    padding: 1rem;
    text-align: center;
    border-radius: 18px;
    background: rgba(5,7,12,.74);
    border: 1px solid rgba(243,211,132,.18);
    backdrop-filter: blur(12px);
}
.delete-balance-panel span {
    display: block;
    color: #8f97a3;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    font-weight: 900;
}
.delete-balance-panel strong {
    display: block;
    margin-top: .25rem;
    font-size: 2rem;
    line-height: 1;
    color: #f3d384;
    text-shadow: 0 0 18px rgba(243,211,132,.24);
}
.delete-balance-panel strong.danger {
    color: #ff4d5e;
    text-shadow: 0 0 18px rgba(255,77,94,.28);
}
.delete-balance-panel small {
    display: block;
    margin-top: .35rem;
    color: #aeb4bf;
}
.delete-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0,0,0,.76);
    backdrop-filter: blur(8px);
}
.delete-modal-overlay.active { display: flex; }
.delete-modal-card {
    position: relative;
    width: min(440px, 94vw);
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(239,68,68,.56);
    background: linear-gradient(180deg, rgba(25,25,33,.97), rgba(8,8,12,.99));
    box-shadow: 0 28px 70px rgba(0,0,0,.68), 0 0 42px rgba(239,68,68,.22);
    animation: fadeInUp .24s ease-out;
}
.delete-modal-glow {
    position: absolute;
    inset: -45%;
    background: conic-gradient(from 180deg, transparent, rgba(239,68,68,.18), transparent, rgba(139,92,246,.14), transparent);
    animation: spin 8s linear infinite;
    opacity: .72;
}
.delete-modal-close {
    position: absolute;
    top: .75rem;
    right: .85rem;
    z-index: 2;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 50%;
    background: rgba(0,0,0,.38);
    color: #fff;
    font-size: 1.25rem;
    cursor: pointer;
}
.delete-modal-content {
    position: relative;
    z-index: 1;
    padding: 2.1rem 1.5rem 1.45rem;
    text-align: center;
}
.delete-modal-danger {
    display: inline-flex;
    margin-bottom: .7rem;
    padding: .28rem .72rem;
    border-radius: 999px;
    color: #ff6b76;
    background: rgba(239,68,68,.12);
    border: 1px solid rgba(239,68,68,.26);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 900;
}
.delete-modal-content h3 {
    margin: 0 0 .45rem;
    color: #fff;
    font-size: 1.45rem;
}
.delete-modal-content p {
    color: #b8bec8;
    font-size: .9rem;
    margin-bottom: 1rem;
}
.delete-modal-content p strong { color: #f3d384; }
.delete-confirm-box {
    text-align: left;
    padding: .9rem;
    border-radius: 16px;
    background: rgba(0,0,0,.32);
    border: 1px solid rgba(255,255,255,.07);
    margin-bottom: 1rem;
}
.delete-confirm-box label {
    display: block;
    margin-bottom: .45rem;
    color: #aeb4bf;
    font-size: .78rem;
}
.delete-confirm-box b { color: #ff6b76; }
.delete-confirm-box input {
    width: 100%;
    padding: .72rem .85rem;
    border-radius: 12px;
    border: 1px solid rgba(139,92,246,.24);
    background: rgba(0,0,0,.42);
    color: #fff;
    outline: none;
    text-transform: uppercase;
}
.delete-confirm-box input:focus { border-color: rgba(239,68,68,.5); box-shadow: 0 0 18px rgba(239,68,68,.12); }
.delete-modal-actions {
    display: flex;
    justify-content: center;
    gap: .65rem;
}
.delete-modal-cancel,
.delete-modal-confirm {
    border: 0;
    border-radius: 12px;
    padding: .72rem 1.1rem;
    cursor: pointer;
    font-weight: 800;
    letter-spacing: .8px;
}
.delete-modal-cancel { background: rgba(255,255,255,.08); color: #d6d9df; }
.delete-modal-confirm { background: linear-gradient(135deg, #8f1d2a, #ef4444); color: #fff; box-shadow: 0 0 22px rgba(239,68,68,.20); }
.delete-modal-confirm:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.5); box-shadow: none; }
@media (max-width: 820px) {
    .delete-character-header { align-items: flex-start; flex-direction: column; }
    .delete-rules-grid { grid-template-columns: 1fr; }
    .delete-character-card { grid-template-columns: auto 1fr; }
    .delete-character-action { grid-column: 1 / -1; align-items: stretch; }
    .delete-character-lock-reason { text-align: left; }
}

/* ============================================
   CLAN PANEL - Mini Panel Master Rakion Remake
   ============================================ */
#tab-clan-panel {
    position: relative;
    padding: clamp(.8rem, 1.6vw, 1.4rem) 0 clamp(1rem, 2vw, 1.8rem);
}
.clan-section {
    position: relative;
    width: min(1180px, 100%);
    margin: 0 auto;
    border-radius: 26px;
    overflow: hidden;
    border: 1px solid rgba(139,92,246,.24);
    background:
        linear-gradient(180deg, rgba(8,10,17,.88), rgba(4,5,9,.96)),
        radial-gradient(circle at 12% 0%, rgba(139,92,246,.22), transparent 34%),
        radial-gradient(circle at 86% 6%, rgba(52,217,255,.10), transparent 30%);
    box-shadow: 0 24px 70px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.045);
    isolation: isolate;
}
.clan-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        linear-gradient(115deg, rgba(0,0,0,.72), rgba(8,14,24,.38), rgba(0,0,0,.88)),
        url('../assets/ranking/fondos/ranking-bg-dark.jpg') center/cover no-repeat;
    opacity: .46;
    filter: saturate(.92) contrast(1.05) brightness(.78);
    transform: scale(1.02);
}
.clan-section::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(115deg, transparent 0%, rgba(255,255,255,.05) 42%, transparent 58%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.016) 0 1px, transparent 1px 66px);
    opacity: .42;
}
.clan-shell {
    position: relative;
    z-index: 2;
    padding: clamp(1rem, 1.7vw, 1.45rem);
}
.clan-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.15rem;
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(8,10,18,.78), rgba(25,18,38,.50));
    border: 1px solid rgba(139,92,246,.22);
    box-shadow: 0 16px 42px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.04);
    backdrop-filter: blur(12px);
    margin-bottom: 1rem;
}
.clan-kicker {
    display: inline-block;
    margin-bottom: .25rem;
    color: #34d9ff;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: 2.2px;
    font-weight: 900;
}
.clan-header h2 {
    margin: 0;
    font-family: 'Cinzel', serif;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    font-size: clamp(1.35rem, 2.8vw, 2.35rem);
    color: #fff;
    text-shadow: 0 0 24px rgba(52,217,255,.16), 0 0 30px rgba(139,92,246,.16);
}
.clan-header p {
    margin-top: .35rem;
    color: #aeb4bf;
    font-size: .9rem;
}
.clan-master-badge {
    min-width: 120px;
    padding: .72rem 1rem;
    border-radius: 999px;
    text-align: center;
    color: #15100b;
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: 1.3px;
    background: linear-gradient(135deg, #f3d384, #c0a060);
    box-shadow: 0 0 24px rgba(243,211,132,.18);
}
.clan-master-badge.member {
    color: #d9f7ff;
    background: linear-gradient(135deg, rgba(52,217,255,.18), rgba(139,92,246,.18));
    border: 1px solid rgba(52,217,255,.20);
}
.clan-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .85rem;
    margin-bottom: 1rem;
}
.clan-summary-card {
    padding: .95rem 1rem;
    border-radius: 18px;
    background: rgba(5,7,13,.68);
    border: 1px solid rgba(139,92,246,.16);
    backdrop-filter: blur(10px);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}
.clan-summary-card span {
    display: block;
    color: #8f97a3;
    font-size: .7rem;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    font-weight: 800;
}
.clan-summary-card strong {
    display: block;
    margin-top: .2rem;
    color: #fff;
    font-size: 1.35rem;
    font-weight: 900;
}
.clan-summary-card small {
    display: block;
    margin-top: .15rem;
    color: #aeb4bf;
    font-size: .78rem;
}
.clan-summary-card.green strong { color: #10b981; text-shadow: 0 0 14px rgba(16,185,129,.22); }
.clan-summary-card.gold strong { color: #f3d384; text-shadow: 0 0 14px rgba(243,211,132,.22); }
.clan-controls-bar {
    display: flex;
    gap: .55rem;
    margin-bottom: 1rem;
    padding: .45rem;
    border-radius: 18px;
    background: rgba(4,5,10,.55);
    border: 1px solid rgba(139,92,246,.16);
}
.clan-panel-tab {
    flex: 1;
    border: 0;
    border-radius: 14px;
    padding: .75rem 1rem;
    background: transparent;
    color: #8f97a3;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .2s ease;
}
.clan-panel-tab:hover { color: #fff; background: rgba(255,255,255,.04); }
.clan-panel-tab.active {
    color: #fff;
    background: linear-gradient(135deg, rgba(139,92,246,.34), rgba(52,217,255,.10));
    box-shadow: inset 0 0 0 1px rgba(139,92,246,.26), 0 0 20px rgba(139,92,246,.12);
}
.clan-panel-tab.locked {
    opacity: .45;
    cursor: not-allowed;
}
.clan-panel-body {
    padding: 1rem;
    border-radius: 20px;
    background: rgba(5,7,13,.72);
    border: 1px solid rgba(139,92,246,.16);
    box-shadow: 0 18px 46px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.03);
    backdrop-filter: blur(12px);
}
.clan-table-headline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .85rem;
}
.clan-table-headline strong,
.clan-invite-box strong,
.clan-request-box strong {
    display: block;
    color: #fff;
    font-size: .95rem;
    letter-spacing: .8px;
    text-transform: uppercase;
}
.clan-table-headline span,
.clan-invite-box span,
.clan-request-box span {
    display: block;
    margin-top: .18rem;
    color: #8f97a3;
    font-size: .82rem;
}
.clan-soft-btn {
    border: 1px solid rgba(52,217,255,.22);
    background: rgba(52,217,255,.08);
    color: #34d9ff;
    border-radius: 999px;
    padding: .55rem .9rem;
    cursor: pointer;
    font-weight: 800;
}
.clan-invite-box,
.clan-request-box {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1rem;
    padding: .95rem 1rem;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(52,217,255,.08), rgba(139,92,246,.09));
    border: 1px solid rgba(52,217,255,.16);
}

.clan-request-box {
    background: linear-gradient(135deg, rgba(16,185,129,.08), rgba(52,217,255,.08));
    border-color: rgba(16,185,129,.20);
}
.clan-request-btn {
    border: 0;
    border-radius: 14px;
    padding: .78rem 1rem;
    background: linear-gradient(135deg, #059669, #2563eb);
    color: #fff;
    font-weight: 900;
    letter-spacing: .8px;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 0 22px rgba(16,185,129,.16);
}
.clan-request-btn:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.clan-invite-form {
    display: flex;
    gap: .55rem;
    min-width: min(430px, 100%);
}
.clan-invite-form input {
    width: 100%;
    min-width: 210px;
    border: 1px solid rgba(139,92,246,.28);
    border-radius: 14px;
    background: rgba(0,0,0,.42);
    color: #fff;
    padding: .78rem .9rem;
    outline: none;
    font-weight: 700;
}
.clan-invite-form input:focus {
    border-color: rgba(52,217,255,.44);
    box-shadow: 0 0 0 3px rgba(52,217,255,.08);
}
.clan-invite-form button {
    border: 0;
    border-radius: 14px;
    padding: .78rem 1rem;
    background: linear-gradient(135deg, #2563eb, #8b5cf6);
    color: #fff;
    font-weight: 900;
    letter-spacing: .8px;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 0 22px rgba(139,92,246,.16);
}
.clan-table-wrap {
    overflow-x: auto;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.06);
}
.clan-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 760px;
}
.clan-table th,
.clan-table td {
    padding: .82rem .9rem;
    border-bottom: 1px solid rgba(255,255,255,.055);
    text-align: left;
    font-size: .86rem;
}
.clan-table th {
    color: #c4c8ce;
    background: linear-gradient(180deg, rgba(45,48,56,.88), rgba(24,26,32,.94));
    font-size: .72rem;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    font-weight: 900;
}
.clan-table tr:nth-child(odd) td { background: rgba(255,255,255,.018); }
.clan-table tr:nth-child(even) td { background: rgba(255,255,255,.035); }
.clan-table tr:hover td { background: rgba(139,92,246,.07); }
.clan-id-pill,
.clan-rank-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: .26rem .62rem;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .7px;
}
.clan-id-pill {
    color: #34d9ff;
    background: rgba(52,217,255,.10);
    border: 1px solid rgba(52,217,255,.18);
}
.clan-rank-pill.master {
    color: #15100b;
    background: linear-gradient(135deg, #f3d384, #c0a060);
}
.clan-rank-pill.member {
    color: #d9e0ea;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
}
.clan-user-cell {
    display: flex;
    align-items: center;
    gap: .65rem;
}
.clan-user-avatar {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    overflow: hidden;
    background: rgba(0,0,0,.45);
    border: 1px solid rgba(139,92,246,.18);
    box-shadow: 0 0 14px rgba(139,92,246,.10);
    flex-shrink: 0;
}
.clan-user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.clan-action-btn {
    border: 0;
    border-radius: 999px;
    padding: .46rem .76rem;
    font-weight: 900;
    letter-spacing: .6px;
    cursor: pointer;
    font-size: .72rem;
}
.clan-action-btn.kick,
.clan-action-btn.reject {
    background: rgba(239,68,68,.14);
    color: #ff6b76;
    border: 1px solid rgba(239,68,68,.28);
}
.clan-action-btn.accept {
    background: rgba(16,185,129,.14);
    color: #10b981;
    border: 1px solid rgba(16,185,129,.28);
    margin-right: .4rem;
}
.clan-action-btn:disabled {
    opacity: .35;
    cursor: not-allowed;
}
.clan-empty {
    padding: 1.5rem;
    color: #8f97a3;
    text-align: center;
    background: rgba(255,255,255,.02);
}
.clan-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0,0,0,.68);
    backdrop-filter: blur(8px);
}
.clan-confirm-overlay.active { display: flex; }
.clan-confirm-card {
    position: relative;
    width: min(430px, 94vw);
    border-radius: 24px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(25,28,38,.98), rgba(7,8,12,.98));
    border: 1px solid rgba(139,92,246,.34);
    box-shadow: 0 28px 70px rgba(0,0,0,.68), 0 0 44px rgba(139,92,246,.18);
    animation: fadeInUp .24s ease-out;
}
.clan-confirm-glow {
    position: absolute;
    inset: -45%;
    background: conic-gradient(from 180deg, transparent, rgba(139,92,246,.16), transparent, rgba(52,217,255,.12), transparent);
    animation: spin 9s linear infinite;
}
.clan-confirm-content {
    position: relative;
    z-index: 1;
    padding: 2rem 1.35rem 1.35rem;
    text-align: center;
}
.clan-confirm-icon {
    width: 72px;
    height: 72px;
    margin: 0 auto 1rem;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    background: radial-gradient(circle, rgba(139,92,246,.20), rgba(0,0,0,.44));
    border: 1px solid rgba(139,92,246,.26);
}
.clan-confirm-content h3 {
    margin: 0 0 .45rem;
    color: #fff;
    font-size: 1.2rem;
    text-transform: uppercase;
    letter-spacing: .8px;
}
.clan-confirm-content p {
    margin: 0 0 1.15rem;
    color: #b8bec8;
    font-size: .92rem;
}
.clan-confirm-actions {
    display: flex;
    gap: .7rem;
    justify-content: center;
}
.clan-cancel-btn,
.clan-danger-btn {
    border-radius: 12px;
    padding: .72rem 1rem;
    font-weight: 900;
    letter-spacing: .7px;
    cursor: pointer;
}
.clan-cancel-btn {
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.05);
    color: #c4c8ce;
}
.clan-danger-btn {
    border: 0;
    background: linear-gradient(135deg, #b91c1c, #ef4444);
    color: #fff;
    box-shadow: 0 0 22px rgba(239,68,68,.20);
}
@media (max-width: 880px) {
    .clan-header,
    .clan-invite-box,
.clan-request-box { grid-template-columns: 1fr; display: grid; }
    .clan-summary-grid { grid-template-columns: 1fr; }
    
.clan-request-box {
    background: linear-gradient(135deg, rgba(16,185,129,.08), rgba(52,217,255,.08));
    border-color: rgba(16,185,129,.20);
}
.clan-request-btn {
    border: 0;
    border-radius: 14px;
    padding: .78rem 1rem;
    background: linear-gradient(135deg, #059669, #2563eb);
    color: #fff;
    font-weight: 900;
    letter-spacing: .8px;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 0 22px rgba(16,185,129,.16);
}
.clan-request-btn:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.clan-invite-form { min-width: 0; flex-direction: column; }
    .clan-controls-bar { flex-direction: column; }
    .clan-table { min-width: 620px; }
}


/* ============================================
   DAILY QUEST / BOTIN DE GUERRA DIARIO
   ============================================ */
.daily-quest-section {
    position: relative;
    padding: 1.1rem 0 1.4rem;
}
.daily-quest-bg {
    position: absolute;
    inset: 0;
    border-radius: 28px;
    background:
        radial-gradient(circle at 12% 10%, rgba(255,205,96,.12), transparent 30%),
        radial-gradient(circle at 82% 14%, rgba(52,217,255,.10), transparent 26%),
        linear-gradient(180deg, rgba(6,8,13,.94), rgba(10,12,18,.98));
    border: 1px solid rgba(255,255,255,.05);
    box-shadow: 0 30px 80px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04);
}
.daily-quest-shell {
    position: relative;
    z-index: 1;
    width: min(1160px, 100%);
    margin: 0 auto;
    padding: 1.35rem;
}
.daily-quest-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1.1rem;
}
.daily-quest-kicker {
    display: inline-block;
    margin-bottom: .35rem;
    font-size: .72rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #d4b16a;
}
.daily-quest-header h2 {
    margin: 0;
    font-size: clamp(1.45rem, 2vw, 2rem);
    color: #f0c040;
    letter-spacing: .8px;
}
.daily-quest-header p {
    margin: .35rem 0 0;
    color: #bcc7d8;
    max-width: 780px;
}
.daily-quest-reroll-btn {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 138px;
    padding: .78rem .95rem;
    border-radius: 18px;
    border: 1px solid rgba(255,95,86,.26);
    background: linear-gradient(180deg, rgba(44,17,20,.96), rgba(26,12,15,.98));
    color: #ffd0cd;
    box-shadow: 0 16px 32px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.04);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.daily-quest-reroll-btn span { font-size: 1.15rem; line-height: 1; }
.daily-quest-reroll-btn strong { margin-top: .1rem; font-size: .95rem; }
.daily-quest-reroll-btn small { margin-top: .18rem; color: #ff8f85; }
.daily-quest-reroll-btn:hover { transform: translateY(-2px); box-shadow: 0 18px 38px rgba(0,0,0,.34); border-color: rgba(255,95,86,.44); }
.daily-quest-reroll-btn.disabled { opacity: .55; }
.daily-quest-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, .95fr);
    gap: 1rem;
}
.daily-quest-main-card,
.daily-quest-side-card {
    display: flex;
    flex-direction: column;
    gap: .95rem;
}
.daily-quest-main-card {
    padding: 1rem;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(17,20,29,.92), rgba(11,13,20,.96));
    border: 1px solid rgba(255,255,255,.06);
}
.daily-quest-reward-box,
.daily-quest-mission-box,
.daily-quest-progress-block,
.daily-quest-balance-card,
.daily-quest-info-card {
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.06);
    background: linear-gradient(180deg, rgba(22,25,35,.90), rgba(10,12,18,.94));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.daily-quest-reward-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: 1rem 1.1rem;
}
.daily-quest-reward-label,
.daily-quest-mission-kicker {
    font-size: .72rem;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #93a0b5;
}
.daily-quest-reward-value {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    font-size: 1.25rem;
    color: #f7d56c;
}
.daily-quest-reward-value .coin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,226,122,.42), rgba(255,196,0,.14));
    color: #ffd86f;
    font-size: 1.2rem;
    box-shadow: 0 0 18px rgba(255,214,90,.18);
}
.daily-quest-mission-box { padding: 1rem 1.1rem; }
.daily-quest-mission-top {
    display: flex;
    justify-content: space-between;
    gap: .8rem;
    align-items: flex-start;
}
.daily-quest-mission-top h3 {
    margin: .22rem 0 0;
    font-size: 1.28rem;
    color: #f7f8fb;
}
.daily-quest-objective,
#daily-quest-objective {
    margin: .65rem 0 0;
    color: #c8d1df;
    line-height: 1.6;
}
.daily-quest-status {
    align-self: center;
    padding: .42rem .8rem;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.07);
    background: rgba(255,255,255,.04);
    color: #d5deeb;
    font-size: .78rem;
    font-weight: 700;
}
.daily-quest-status.ready { color: #f7d56c; border-color: rgba(247,213,108,.25); background: rgba(247,213,108,.08); }
.daily-quest-status.success { color: #58d68d; border-color: rgba(88,214,141,.25); background: rgba(88,214,141,.09); }
.daily-quest-progress-block { padding: 1rem 1.1rem; }
.daily-quest-progress-head,
.daily-quest-progress-foot {
    display: flex;
    justify-content: space-between;
    gap: .8rem;
    align-items: center;
}
.daily-quest-progress-head strong { color: #f4f7fb; }
.daily-quest-progress-head span,
.daily-quest-progress-foot span { color: #b7c4d8; }
.daily-quest-progress-bar {
    position: relative;
    height: 16px;
    margin: .85rem 0 .75rem;
    border-radius: 999px;
    background: rgba(255,255,255,.06);
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.05);
}
.daily-quest-progress-fill {
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #b48a1c, #ffd86f 42%, #66e0ff);
    box-shadow: 0 0 18px rgba(255,216,111,.25);
    transition: width .35s ease;
}
.daily-quest-actions {
    display: flex;
    justify-content: space-between;
    gap: .9rem;
}
.daily-quest-secondary-btn,
.daily-quest-claim-btn,
.daily-quest-modal-btn {
    border: none;
    border-radius: 16px;
    padding: .88rem 1.05rem;
    font-weight: 800;
    letter-spacing: .2px;
    transition: transform .2s ease, opacity .2s ease, box-shadow .2s ease;
}
.daily-quest-secondary-btn {
    background: rgba(255,255,255,.08);
    color: #e9eef7;
    border: 1px solid rgba(255,255,255,.08);
}
.daily-quest-secondary-btn:hover,
.daily-quest-claim-btn:hover,
.daily-quest-modal-btn:hover { transform: translateY(-1px); }
.daily-quest-claim-btn {
    flex: 1;
    background: linear-gradient(90deg, #6b7280, #4b5563);
    color: #e5e7eb;
}
.daily-quest-claim-btn:not(:disabled) {
    background: linear-gradient(90deg, #d7a828, #f0c040, #ffd86f);
    color: #201a08;
    box-shadow: 0 12px 24px rgba(240,192,64,.18);
}
.daily-quest-claim-btn.claimed {
    background: linear-gradient(90deg, #1f5638, #2e8b57);
    color: #eafff4;
}
.daily-quest-claim-btn:disabled { cursor: not-allowed; opacity: .92; }
.daily-quest-balance-card,
.daily-quest-info-card { padding: 1rem 1.05rem; }
.daily-quest-balance-card span {
    font-size: .78rem;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #97a4b9;
}
.daily-quest-balance-card strong {
    display: block;
    margin-top: .45rem;
    font-size: 2rem;
    color: #f7d56c;
}
.daily-quest-balance-card strong.danger { color: #ff7b72; }
.daily-quest-balance-card small,
.daily-quest-info-card p,
.daily-quest-info-card li { color: #c3cfdf; line-height: 1.6; }
.daily-quest-info-card strong { color: #f4f7fb; }
.daily-quest-info-card ul { margin: .75rem 0 0 1rem; padding: 0; }
.daily-quest-info-card.compact p { margin: .55rem 0 0; }
.daily-quest-modal-overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.72);
    backdrop-filter: blur(8px);
    z-index: 2400;
}
.daily-quest-modal-overlay.active { display: flex; }
.daily-quest-modal-card {
    position: relative;
    width: min(420px, calc(100% - 32px));
    border-radius: 24px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(16,18,25,.98), rgba(8,10,14,.99));
    border: 1px solid rgba(255,95,86,.24);
    box-shadow: 0 24px 60px rgba(0,0,0,.45);
}
.daily-quest-modal-glow {
    position: absolute;
    inset: -20% 15% auto;
    height: 120px;
    background: radial-gradient(circle, rgba(255,95,86,.25), transparent 70%);
    filter: blur(10px);
}
.daily-quest-modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    color: #f5f7fb;
    font-size: 1.2rem;
}
.daily-quest-modal-content {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 2rem 1.5rem 1.5rem;
}
.daily-quest-modal-title {
    font-size: .88rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #ff8f85;
}
.daily-quest-modal-icon {
    margin: .9rem auto .65rem;
    width: 82px;
    height: 82px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #ffd86f;
    background: radial-gradient(circle, rgba(255,216,111,.28), rgba(255,255,255,.05));
    box-shadow: 0 0 24px rgba(255,216,111,.14);
}
.daily-quest-modal-content h3 { margin: 0; color: #f6f8fb; font-size: 1.4rem; }
.daily-quest-modal-content p { margin: .65rem 0 1rem; color: #c8d3e2; }
.daily-quest-modal-btn {
    min-width: 160px;
    background: linear-gradient(90deg, #b82020, #ff5e5e);
    color: #fff;
}
@media (max-width: 960px) {
    .daily-quest-grid { grid-template-columns: 1fr; }
    .daily-quest-header { flex-direction: column; }
    .daily-quest-reroll-btn { width: 100%; flex-direction: row; gap: .65rem; justify-content: center; }
}
@media (max-width: 640px) {
    .daily-quest-shell { padding: .85rem; }
    .daily-quest-main-card,
    .daily-quest-reward-box,
    .daily-quest-mission-box,
    .daily-quest-progress-block,
    .daily-quest-balance-card,
    .daily-quest-info-card { padding-left: .85rem; padding-right: .85rem; }
    .daily-quest-actions,
    .daily-quest-reward-box,
    .daily-quest-progress-head,
    .daily-quest-progress-foot,
    .daily-quest-mission-top { flex-direction: column; align-items: stretch; }
    .daily-quest-balance-card strong { font-size: 1.6rem; }
}


/* ============================================
   TRADES / MERCADO LIBRE DE JUGADORES
   ============================================ */
.trades-section { position: relative; padding: 1rem 0 1.4rem; }
.trades-bg {
    position: absolute;
    inset: 0;
    border-radius: 28px;
    background:
        radial-gradient(circle at 12% 8%, rgba(240,192,64,.12), transparent 30%),
        radial-gradient(circle at 86% 12%, rgba(52,217,255,.10), transparent 28%),
        linear-gradient(180deg, rgba(7,9,14,.95), rgba(9,10,16,.98));
    border: 1px solid rgba(255,255,255,.06);
    box-shadow: 0 30px 80px rgba(0,0,0,.46), inset 0 1px 0 rgba(255,255,255,.04);
}
.trades-shell { position: relative; z-index: 1; width: min(1280px, 100%); margin: 0 auto; padding: 1.25rem; }
.trades-header { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; margin-bottom: 1rem; }
.trades-kicker { display:inline-block; color:#34d9ff; font-size:.72rem; letter-spacing:2px; text-transform:uppercase; margin-bottom:.35rem; }
.trades-header h2 { margin:0; color:#f0c040; font-size:clamp(1.45rem,2.2vw,2.2rem); letter-spacing:1px; }
.trades-header p { margin:.35rem 0 0; color:#c5cfdf; max-width:760px; }
.trades-resource-panel { display:flex; align-items:stretch; gap:.65rem; flex-wrap:wrap; justify-content:flex-end; }
.trades-resource-panel div { min-width:120px; padding:.72rem .9rem; border-radius:16px; border:1px solid rgba(255,255,255,.07); background:linear-gradient(180deg,rgba(20,24,34,.9),rgba(10,12,18,.95)); }
.trades-resource-panel span { display:block; color:#9aa8bc; font-size:.66rem; text-transform:uppercase; letter-spacing:1.2px; }
.trades-resource-panel strong { display:block; margin-top:.15rem; color:#f7d56c; font-size:1.05rem; }
.trades-resource-panel button { border:1px solid rgba(52,217,255,.2); color:#eafaff; border-radius:16px; background:rgba(52,217,255,.08); padding:.72rem .9rem; font-weight:800; cursor:pointer; }
.trades-mode-tabs { display:flex; gap:.65rem; margin-bottom:1rem; }
.trades-mode-btn { border:1px solid rgba(255,255,255,.08); background:rgba(255,255,255,.04); color:#aab6c8; border-radius:14px; padding:.72rem 1.15rem; font-weight:800; cursor:pointer; }
.trades-mode-btn.active { color:#15100b; background:linear-gradient(90deg,#d7a828,#ffd86f); box-shadow:0 12px 24px rgba(240,192,64,.14); }
.trades-panel { border-radius:24px; border:1px solid rgba(255,255,255,.06); background:linear-gradient(180deg,rgba(17,20,29,.90),rgba(10,12,18,.96)); padding:1rem; }
.trades-filters { display:grid; grid-template-columns: minmax(220px,1.5fr) repeat(3,minmax(140px,.8fr)) auto; gap:.75rem; margin-bottom:1rem; align-items:end; }
.trades-filters div, .trades-mine-filter { display:flex; flex-direction:column; gap:.35rem; }
.trades-filters span, .trades-mine-filter span { color:#9aa8bc; font-size:.68rem; text-transform:uppercase; letter-spacing:1.1px; }
.trades-filters input, .trades-filters select, .trades-sell-controls input, .trades-sell-controls select { width:100%; border:1px solid rgba(255,255,255,.08); border-radius:13px; background:rgba(0,0,0,.28); color:#f5f7fb; padding:.72rem .85rem; outline:none; }
.trades-mine-filter { justify-content:center; align-items:center; flex-direction:row; padding:.72rem .85rem; border-radius:13px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); cursor:pointer; }
.trades-table-wrap { overflow-x:auto; border-radius:18px; border:1px solid rgba(255,255,255,.055); }
.trades-table { width:100%; border-collapse:collapse; min-width:980px; }
.trades-table th { text-align:left; padding:.85rem .9rem; color:#aeb8c8; background:rgba(255,255,255,.04); font-size:.72rem; text-transform:uppercase; letter-spacing:1px; }
.trades-table td { padding:.85rem .9rem; border-top:1px solid rgba(255,255,255,.055); color:#dce5f3; }
.trades-table tr:hover td { background:rgba(52,217,255,.035); }
.trades-item-cell { display:flex; align-items:center; gap:.75rem; }
.trades-item-avatar { width:50px; height:50px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:radial-gradient(circle,rgba(139,92,246,.20),rgba(0,0,0,.34)); border:1px solid rgba(139,92,246,.2); flex-shrink:0; }
.trades-item-avatar img { width:88%; height:88%; object-fit:contain; filter:drop-shadow(0 0 8px rgba(52,217,255,.16)); }
.trades-item-cell strong, .trades-seller strong { display:block; color:#fff; }
.trades-item-cell small { display:block; color:#93a0b4; margin-top:.1rem; }
.trades-stats { display:flex; flex-wrap:wrap; gap:.32rem; max-width:300px; }
.trades-stats span { padding:.22rem .42rem; border-radius:999px; background:rgba(255,255,255,.055); color:#b7c6d9; font-size:.7rem; }
.trades-seller span { display:inline-block; margin-top:.15rem; color:#ffd86f; font-size:.78rem; }
.trades-payment-pill { display:inline-flex; align-items:center; justify-content:center; min-width:74px; padding:.35rem .55rem; border-radius:999px; background:rgba(52,217,255,.08); border:1px solid rgba(52,217,255,.16); color:#b8f3ff; font-size:.74rem; font-weight:800; }
.trades-payment-pill.yape, .trades-payment-pill.plin { background:rgba(139,92,246,.12); border-color:rgba(139,92,246,.2); color:#d7c9ff; }
.trades-payment-pill.bcp, .trades-payment-pill.interbank, .trades-payment-pill.bbva { background:rgba(65,105,225,.12); border-color:rgba(65,105,225,.2); color:#c6d4ff; }
.trades-payment-pill.efectivo { background:rgba(16,185,129,.10); border-color:rgba(16,185,129,.20); color:#b8f8d7; }
.trades-price { color:#f7d56c; }
.trades-start-btn { border:none; border-radius:12px; background:linear-gradient(90deg,#d7a828,#ffd86f); color:#201a08; padding:.62rem .82rem; font-weight:900; cursor:pointer; }
.trades-empty { text-align:center; padding:2.2rem 1rem; color:#93a0b4; }
.trades-empty strong { display:block; color:#f3f6fb; font-size:1.05rem; }
.trades-empty span { display:block; margin-top:.35rem; }
.trades-sell-top { display:grid; grid-template-columns:240px 1fr; gap:.85rem; margin-bottom:.95rem; }
.trades-credit-card, .trades-sell-warning, .trades-inventory-card, .trades-sell-card { border-radius:20px; border:1px solid rgba(255,255,255,.06); background:linear-gradient(180deg,rgba(21,24,34,.92),rgba(10,12,18,.95)); }
.trades-credit-card { padding:1rem; }
.trades-credit-card span { color:#9aa8bc; font-size:.72rem; letter-spacing:1.2px; text-transform:uppercase; }
.trades-credit-card strong { display:block; color:#ff7b72; font-size:2rem; line-height:1.1; margin:.3rem 0; }
.trades-credit-card small { color:#c3cfdf; }
.trades-sell-warning { padding:1rem; color:#d5dde9; border-left:3px solid rgba(255,95,86,.45); }
.trades-sell-grid { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(330px,.8fr); gap:.95rem; }
.trades-inventory-card, .trades-sell-card { padding:1rem; }
.trades-inventory-header { display:flex; justify-content:space-between; gap:.7rem; margin-bottom:.75rem; }
.trades-inventory-header strong { color:#fff; }
.trades-inventory-header span { color:#9aa8bc; }
.trades-box-tabs { display:flex; gap:.45rem; margin-bottom:.8rem; flex-wrap:wrap; }
.trades-box-tab { border:1px solid rgba(255,255,255,.07); border-radius:12px; padding:.48rem .78rem; color:#94eaff; background:rgba(52,217,255,.06); font-weight:800; cursor:pointer; }
.trades-box-tab.active { background:rgba(52,217,255,.18); border-color:rgba(52,217,255,.35); }
.trades-box-tab:disabled { opacity:.35; cursor:not-allowed; }
.trades-slots-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.45rem; }
.trades-slot { position:relative; min-height:64px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.055); overflow:hidden; }
.trades-slot span { position:absolute; top:.28rem; left:.35rem; color:#69778b; font-size:.58rem; }
.trades-slot.filled { cursor:pointer; border-color:rgba(52,217,255,.18); background:radial-gradient(circle,rgba(52,217,255,.10),rgba(0,0,0,.25)); }
.trades-slot.filled:hover { transform:translateY(-2px); border-color:rgba(255,216,111,.28); }
.trades-slot img { width:78%; height:78%; object-fit:contain; filter:drop-shadow(0 0 8px rgba(52,217,255,.18)); }
.trades-drop-zone { min-height:230px; border:2px dashed rgba(52,217,255,.22); border-radius:20px; display:flex; align-items:center; justify-content:center; text-align:center; padding:1rem; background:rgba(0,0,0,.22); }
.trades-drop-zone strong { display:block; color:#fff; margin:.35rem 0; }
.trades-drop-zone span { color:#9aa8bc; }
.trades-drop-icon { font-size:2.8rem; color:#34d9ff; opacity:.7; }
.trades-selected-preview { display:flex; align-items:center; gap:.9rem; text-align:left; }
.trades-selected-preview img { width:70px; height:70px; object-fit:contain; border-radius:16px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08); padding:.35rem; }
.trades-selected-preview strong { color:#fff; }
.trades-sell-controls { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; margin-top:.9rem; }
.trades-sell-actions { display:flex; gap:.75rem; margin-top:.85rem; }
.trades-clear-btn, .trades-post-btn { flex:1; border:none; border-radius:14px; padding:.82rem 1rem; font-weight:900; cursor:pointer; }
.trades-clear-btn { background:rgba(255,255,255,.08); color:#e7eef9; }
.trades-post-btn { background:linear-gradient(90deg,#d7a828,#ffd86f); color:#201a08; }
.trades-post-btn:disabled { background:#374151; color:#9ca3af; cursor:not-allowed; }
.trades-post-hint { margin-top:.75rem; padding:.72rem .85rem; border-radius:13px; color:#ffb4ad; background:rgba(255,95,86,.08); border:1px solid rgba(255,95,86,.18); }
.trades-post-hint.ok { color:#b8f8d7; background:rgba(16,185,129,.08); border-color:rgba(16,185,129,.18); }
@media (max-width: 1100px) { .trades-filters { grid-template-columns:1fr 1fr; } .trades-sell-grid { grid-template-columns:1fr; } .trades-header { flex-direction:column; } .trades-resource-panel { justify-content:flex-start; } }
@media (max-width: 680px) { .trades-shell { padding:.8rem; } .trades-filters, .trades-sell-top, .trades-sell-controls { grid-template-columns:1fr; } .trades-slots-grid { grid-template-columns:repeat(5,minmax(0,1fr)); } .trades-slot { min-height:54px; } }

/* ============================================
   HOTFIX - Podio ranking tercer lugar no deformado
   ============================================ */
#ranking-screen .ranking-podium {
    align-items: stretch;
}
#ranking-screen .ranking-podium-card,
#ranking-screen .ranking-podium-card.rank-1,
#ranking-screen .ranking-podium-card.rank-2,
#ranking-screen .ranking-podium-card.rank-3 {
    width: 100%;
    max-width: none;
    justify-self: stretch;
    align-self: stretch;
}
#ranking-screen .ranking-podium-card.rank-3 {
    margin: .75rem 0 0 0 !important;
}
@media (max-width: 980px) {
    #ranking-screen .ranking-podium-card.rank-3 {
        margin: 0 !important;
    }
}

/* ============================================
   HOTFIX - Diferenciar altura del 3er lugar
   ============================================ */
#ranking-screen .ranking-podium-card.rank-2 {
    margin-top: .75rem !important;
}
#ranking-screen .ranking-podium-card.rank-3 {
    margin-top: 1.55rem !important;
}
@media (max-width: 980px) {
    #ranking-screen .ranking-podium-card.rank-2,
    #ranking-screen .ranking-podium-card.rank-3 {
        margin-top: 0 !important;
    }
}

/* ============================================
   HOTFIX - Dropdown visible directo sobre Ranking
   ============================================ */
.landing-nav,
.landing-nav-inner,
.nav-menu,
.nav-item,
.nav-dropdown,
.ranking-public-nav,
.ranking-public-nav .landing-nav-inner,
.ranking-public-nav .nav-menu {
    overflow: visible !important;
}
.nav-dropdown {
    top: calc(100% + 6px) !important;
    z-index: 9999 !important;
}
.ranking-public-nav {
    z-index: 5000 !important;
}
.ranking-public-nav .nav-item {
    z-index: 5001;
}
.ranking-public-nav .nav-item:hover .nav-dropdown,
.ranking-public-nav .nav-item:focus-within .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}


/* ITEMS.INI / ALLITEMS */
.trades-item-cell small { line-height: 1.35; }
.trades-stats span:last-child { color: #b8c7dd; border-color: rgba(52,217,255,.12); }


/* ============================================
   SEO + acceso a comunidad WhatsApp (2026-08)
   Mantiene la portada original y añade un CTA discreto bajo el logo.
   ============================================ */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

#landing-screen .landing-bottom-logo {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: .68rem !important;
}

#landing-screen .whatsapp-community-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .48rem;
    min-height: 40px;
    padding: .56rem .92rem;
    color: #fff;
    background: rgba(14, 116, 74, .84);
    border: 1px solid rgba(74, 222, 128, .44);
    border-radius: 999px;
    box-shadow: 0 9px 26px rgba(0, 0, 0, .38), 0 0 20px rgba(34, 197, 94, .18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    font-size: .73rem;
    font-weight: 700;
    letter-spacing: .55px;
    text-transform: uppercase;
    transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

#landing-screen .whatsapp-community-btn svg {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
}

#landing-screen .whatsapp-community-btn:hover,
#landing-screen .whatsapp-community-btn:focus-visible {
    color: #fff;
    background: rgba(22, 163, 74, .94);
    border-color: rgba(134, 239, 172, .76);
    box-shadow: 0 11px 30px rgba(0, 0, 0, .42), 0 0 28px rgba(34, 197, 94, .34);
    transform: translateY(-2px);
    outline: none;
}

#landing-screen .whatsapp-community-btn:active {
    transform: translateY(0) scale(.98);
}

@media (max-width: 640px) {
    #landing-screen .landing-bottom-logo {
        bottom: 13.5% !important;
        gap: .5rem !important;
    }
    #landing-screen .whatsapp-community-btn {
        min-height: 37px;
        padding: .48rem .78rem;
        font-size: .66rem;
    }
    #landing-screen .whatsapp-community-btn svg {
        width: 18px;
        height: 18px;
        flex-basis: 18px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #landing-screen .whatsapp-community-btn,
    #landing-screen .landing-logo-big {
        animation: none !important;
        transition: none !important;
    }
}

/* =========================================================
   CINEMA NATURAL V3 - SIN BARRAS NEGRAS LATERALES
   Solución robusta:
   - Imagen principal REAL en contain (sin zoom / sin estirar).
   - Segunda capa REAL de la misma imagen en cover y difuminada.
   - El cover SOLO funciona como relleno ambiental de los laterales.
   - Arriba y abajo conserva el difuminado cinematográfico aprobado.
   ========================================================= */
@keyframes remakeCinemaKenBurns {
    0%   { transform: scale(1); }
    100% { transform: scale(1.012); }
}

#landing-screen.landing-screen {
    background: #020203 !important;
}

#landing-screen .bg-slider {
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background: #020203 !important;
    overflow: hidden !important;
}

#landing-screen .bg-slide {
    position: absolute !important;
    inset: 0 !important;
    overflow: hidden !important;
    background: none !important;
}

/* Relleno ambiental: misma imagen, pero desenfocada y oscurecida. */
#landing-screen .bg-slide-fill {
    position: absolute;
    inset: -120px;
    z-index: 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    filter: blur(64px) brightness(.88) saturate(1.04);
    transform: scale(1.12);
    opacity: 1;
}

/* Imagen protagonista: completa, sin recortar ni estirar. */
#landing-screen .bg-slide-main {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    filter: drop-shadow(0 0 18px rgba(0,0,0,.12));
    -webkit-mask-image: linear-gradient(to right,
        rgba(0,0,0,0) 0px,
        rgba(0,0,0,.55) 28px,
        rgba(0,0,0,1) 92px,
        rgba(0,0,0,1) calc(100% - 92px),
        rgba(0,0,0,.55) calc(100% - 28px),
        rgba(0,0,0,0) 100%);
    mask-image: linear-gradient(to right,
        rgba(0,0,0,0) 0px,
        rgba(0,0,0,.55) 28px,
        rgba(0,0,0,1) 92px,
        rgba(0,0,0,1) calc(100% - 92px),
        rgba(0,0,0,.55) calc(100% - 28px),
        rgba(0,0,0,0) 100%);
}

#landing-screen .bg-slide.active {
    animation: remakeCinemaKenBurns 24s ease-in-out infinite alternate !important;
}

#landing-screen .bg-overlay {
    inset: 0 !important;
}

/* Arriba y abajo: mismo difuminado que ya estaba aprobado. */
#landing-screen.landing-screen::before,
#landing-screen.landing-screen::after {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    height: 74px;
    z-index: 8;
    pointer-events: none;
}

#landing-screen.landing-screen::before {
    top: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,.88) 0%,
        rgba(0,0,0,.58) 35%,
        rgba(0,0,0,.24) 70%,
        rgba(0,0,0,0) 100%
    );
}

#landing-screen.landing-screen::after {
    bottom: 0;
    background: linear-gradient(
        to top,
        rgba(0,0,0,.88) 0%,
        rgba(0,0,0,.58) 35%,
        rgba(0,0,0,.24) 70%,
        rgba(0,0,0,0) 100%
    );
}

/*
   Fusión lateral: no tapa los lados con negro.
   Solo suaviza la transición entre la imagen completa
   y la copia difuminada que rellena el espacio restante.
*/
#landing-screen .bg-slider::before,
#landing-screen .bg-slider::after {
    right: 0;
    background: linear-gradient(to left,
        rgba(0,0,0,.18) 0%,
        rgba(0,0,0,.10) 25%,
        rgba(0,0,0,.04) 55%,
        rgba(0,0,0,0) 100%);
    filter: blur(26px);
    opacity: .7;
}

#landing-screen .bg-slider::before {
    left: 0;
    background: linear-gradient(to right,
        rgba(0,0,0,.18) 0%,
        rgba(0,0,0,.10) 25%,
        rgba(0,0,0,.04) 55%,
        rgba(0,0,0,0) 100%);
    filter: blur(26px);
    opacity: .7;
}

#landing-screen .bg-slider::after {
    right: 0;
    background:
        radial-gradient(ellipse at right center,
            rgba(255,255,255,.22) 0%,
            rgba(215,228,255,.15) 18%,
            rgba(116,130,168,.10) 34%,
            rgba(25,28,42,0) 72%),
        radial-gradient(circle at 88% 32%,
            rgba(255,255,255,.14) 0%,
            rgba(255,255,255,.06) 18%,
            rgba(255,255,255,0) 44%),
        radial-gradient(circle at 82% 72%,
            rgba(255,255,255,.10) 0%,
            rgba(255,255,255,.04) 16%,
            rgba(255,255,255,0) 40%),
        linear-gradient(
            to left,
            rgba(0,0,0,.10) 0%,
            rgba(0,0,0,.04) 28%,
            rgba(0,0,0,.01) 48%,
            rgba(0,0,0,0) 100%
        );
    filter: blur(28px);
}

@media (max-width: 768px) {
    #landing-screen.landing-screen::before,
    #landing-screen.landing-screen::after {
        height: 52px;
    }

    #landing-screen .bg-slide-fill {
        inset: -18px;
        filter: blur(22px) brightness(.64) saturate(.98);
    }

    #landing-screen .bg-slider::before,
    #landing-screen .bg-slider::after {
        width: 110px;
    }
}



/* === AJUSTE FINAL: imagen completa sin zoom + laterales más fusionados === */
#landing-screen .bg-slider::before,
#landing-screen .bg-slider::after {
    display: none !important;
    content: none !important;
    background: none !important;
}

#landing-screen .bg-slide {
    overflow: hidden !important;
}

#landing-screen .bg-slide-fill {
    inset: -40px !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    filter: blur(34px) brightness(.80) saturate(1.02) !important;
    transform: scale(1.06) !important;
    opacity: 1 !important;
}

#landing-screen .bg-slide-main {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    filter: none !important;
    -webkit-mask-image: linear-gradient(to right,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,.18) 3%,
        rgba(0,0,0,.55) 7%,
        rgba(0,0,0,.88) 11%,
        rgba(0,0,0,1) 15%,
        rgba(0,0,0,1) 85%,
        rgba(0,0,0,.88) 89%,
        rgba(0,0,0,.55) 93%,
        rgba(0,0,0,.18) 97%,
        rgba(0,0,0,0) 100%) !important;
    mask-image: linear-gradient(to right,
        rgba(0,0,0,0) 0%,
        rgba(0,0,0,.18) 3%,
        rgba(0,0,0,.55) 7%,
        rgba(0,0,0,.88) 11%,
        rgba(0,0,0,1) 15%,
        rgba(0,0,0,1) 85%,
        rgba(0,0,0,.88) 89%,
        rgba(0,0,0,.55) 93%,
        rgba(0,0,0,.18) 97%,
        rgba(0,0,0,0) 100%) !important;
}

/* PANEL WEB V2 - balances reales y funciones deshabilitadas */
.real-balance-mini{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:72px;padding:.35rem .55rem;border:1px solid rgba(255,255,255,.12);border-radius:10px;background:rgba(8,8,14,.62);line-height:1}.real-balance-mini small{font-size:.55rem;letter-spacing:1px;color:#9499a8;margin-bottom:4px}.real-balance-mini strong{font-size:.75rem;color:#fff}.gold-mini strong{color:#f6c453}.cash-mini strong{color:#71b7ff}.feature-disabled,.feature-disabled:hover,.tab-btn:disabled{opacity:.38!important;cursor:not-allowed!important;filter:grayscale(.65)!important;pointer-events:none!important}@media(max-width:900px){.real-balance-mini{min-width:58px;padding:.28rem .38rem}.real-balance-mini small{font-size:.48rem}.real-balance-mini strong{font-size:.65rem}}


/* V2.2 - Oro y Cash con la misma forma visual que Puntos */
.shop-session-actions .gold-balance-badge {
    background: rgba(245,185,66,.10) !important;
    border-color: rgba(245,185,66,.34) !important;
    color: #f5b942 !important;
}
.shop-session-actions .gold-balance-badge .points-icon {
    color: #f5b942 !important;
}
.shop-session-actions .cash-balance-badge {
    background: rgba(96,165,250,.10) !important;
    border-color: rgba(96,165,250,.34) !important;
    color: #60a5fa !important;
}
.shop-session-actions .cash-balance-badge .points-icon {
    color: #60a5fa !important;
}
.shop-session-actions .gold-balance-badge,
.shop-session-actions .cash-balance-badge {
    border-radius: 50px !important;
    min-width: 0 !important;
    padding: .375rem .85rem !important;
    flex-direction: row !important;
    gap: .45rem !important;
}
.shop-session-actions .gold-balance-badge span,
.shop-session-actions .cash-balance-badge span {
    font-weight: 700 !important;
    font-size: .875rem !important;
}


/* ============================================================
   V2.3 - RANKING TOP 20 REAL
   ============================================================ */
#ranking-screen .ranking-board {
    overflow-x: auto !important;
}
#ranking-screen .ranking-board-header,
#ranking-screen .ranking-row {
    grid-template-columns:
        58px
        minmax(165px, 1.45fr)
        58px
        minmax(100px, .9fr)
        minmax(82px, .72fr)
        minmax(82px, .72fr)
        minmax(82px, .72fr)
        minmax(90px, .78fr) !important;
    min-width: 920px !important;
}
#ranking-screen .ranking-cell-battles,
#ranking-screen .ranking-cell-victories,
#ranking-screen .ranking-cell-defeats,
#ranking-screen .ranking-cell-winrate {
    text-align: center !important;
    font-weight: 700 !important;
}
#ranking-screen .ranking-cell-battles { color: #d7dbe7 !important; }
#ranking-screen .ranking-cell-victories { color: #34d9ff !important; }
#ranking-screen .ranking-cell-defeats { color: #ff4d5e !important; }
#ranking-screen .ranking-cell-winrate { color: #f7c65f !important; }
#ranking-screen .ranking-podium-stats {
    grid-template-columns: 1fr 1fr !important;
}
@media (max-width: 980px) {
    #ranking-screen .ranking-board {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    #ranking-screen .ranking-board-header,
    #ranking-screen .ranking-row {
        display: grid !important;
    }
}


/* ============================================================
   V2.5 - RANKING ORDENADO + PERFIL DE JUGADOR
   ============================================================ */

/* Devuelve la lista al formato compacto anterior. */
#ranking-screen .ranking-board-header,
#ranking-screen .ranking-row {
    grid-template-columns: 90px minmax(230px, 1.65fr) 100px 1.2fr 1.2fr 130px !important;
    min-width: 780px !important;
}
#ranking-screen .ranking-cell-record {
    text-align: center !important;
    font-weight: 800 !important;
    letter-spacing: .2px;
}
#ranking-screen .ranking-victory-number { color: #34d9ff; }
#ranking-screen .ranking-defeat-number { color: #ff4d5e; }
#ranking-screen .ranking-record-separator { color: rgba(255,255,255,.42); padding: 0 .28rem; }
#ranking-screen .ranking-cell-winrate { text-align: center !important; color: #f5c458 !important; }

#ranking-screen .ranking-row-profile {
    cursor: pointer;
}
#ranking-screen .ranking-row-profile:hover {
    background: linear-gradient(90deg, rgba(139,92,246,.10), rgba(52,217,255,.045)) !important;
}
#ranking-screen .ranking-podium-card[data-character-id] {
    cursor: pointer;
}
.ranking-profile-hint {
    padding: .85rem 1rem 0;
    text-align: center;
    color: rgba(255,255,255,.48);
    font-size: .76rem;
    letter-spacing: .35px;
}

/* Modal profesional de stats. */
.ranking-profile-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(2,4,10,.78);
    backdrop-filter: blur(12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
}
.ranking-profile-modal.active {
    opacity: 1;
    visibility: visible;
}
.ranking-profile-dialog {
    position: relative;
    width: min(820px, 96vw);
    max-height: 88vh;
    overflow-y: auto;
    padding: 28px;
    border-radius: 22px;
    border: 1px solid rgba(120,150,200,.24);
    background:
        radial-gradient(circle at 12% 0%, rgba(48,140,210,.14), transparent 34%),
        radial-gradient(circle at 100% 18%, rgba(139,92,246,.14), transparent 30%),
        linear-gradient(160deg, rgba(17,20,29,.985), rgba(8,10,16,.99));
    box-shadow: 0 30px 90px rgba(0,0,0,.62), inset 0 1px rgba(255,255,255,.035);
}
.ranking-profile-close {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 50%;
    background: rgba(255,255,255,.045);
    color: #dce4ef;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
}
.ranking-profile-close:hover {
    background: rgba(255,255,255,.09);
    color: #fff;
}
.ranking-profile-hero {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-right: 44px;
    margin-bottom: 22px;
}
.ranking-profile-avatar {
    width: 94px;
    height: 94px;
    flex: 0 0 94px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 22px;
    border: 1px solid rgba(78,194,255,.28);
    background: linear-gradient(145deg, rgba(55,103,145,.18), rgba(18,20,31,.78));
    box-shadow: 0 14px 35px rgba(0,0,0,.35), 0 0 30px rgba(52,217,255,.07);
}
.ranking-profile-avatar img {
    width: 84%;
    height: 84%;
    object-fit: contain;
}
.ranking-profile-rank {
    display: inline-block;
    margin-bottom: 5px;
    color: #f4c95f;
    font-weight: 900;
    font-size: .74rem;
    letter-spacing: 1.2px;
}
.ranking-profile-identity h2 {
    margin: 0;
    color: #fff;
    font-family: 'Cinzel', serif;
    font-size: clamp(1.45rem, 4vw, 2rem);
    line-height: 1.1;
}
.ranking-profile-class {
    margin-top: 7px;
    color: #8f9bad;
    font-size: .88rem;
}
.ranking-profile-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 10px;
    margin-bottom: 24px;
}
.ranking-profile-stat {
    min-width: 0;
    padding: 12px 13px;
    border-radius: 13px;
    border: 1px solid rgba(255,255,255,.065);
    background: rgba(255,255,255,.028);
}
.ranking-profile-stat-label {
    display: block;
    margin-bottom: 5px;
    color: #7f8b9d;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .65px;
    text-transform: uppercase;
}
.ranking-profile-stat-value {
    display: block;
    color: #edf3fa;
    font-size: 1.02rem;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ranking-profile-stat.accent-cyan .ranking-profile-stat-value { color: #34d9ff; }
.ranking-profile-stat.accent-win .ranking-profile-stat-value { color: #54e0a4; }
.ranking-profile-stat.accent-loss .ranking-profile-stat-value { color: #ff6170; }
.ranking-profile-stat.accent-gold .ranking-profile-stat-value { color: #f5c458; }
.ranking-profile-section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    padding-top: 4px;
    margin-bottom: 12px;
}
.ranking-profile-kicker {
    display: block;
    color: #6c7a90;
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: 1.2px;
}
.ranking-profile-section-head h3 {
    margin: 3px 0 0;
    color: #fff;
    font-size: 1.06rem;
}
.ranking-profile-point-totals {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.ranking-profile-point-totals span {
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.07);
    background: rgba(255,255,255,.03);
    color: #8c98aa;
    font-size: .72rem;
}
.ranking-profile-point-totals strong {
    color: #f4c95f;
    margin-left: 4px;
}
.ranking-profile-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 9px;
}
.ranking-profile-stats-grid .ranking-profile-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.ranking-profile-stats-grid .ranking-profile-stat-label {
    margin: 0;
}
.ranking-profile-stats-grid .ranking-profile-stat-value {
    flex: 0 0 auto;
    color: #cfe9ff;
}
body.ranking-profile-open {
    overflow: hidden;
}
@media (max-width: 680px) {
    .ranking-profile-dialog { padding: 22px 16px; }
    .ranking-profile-hero { gap: 13px; }
    .ranking-profile-avatar { width: 74px; height: 74px; flex-basis: 74px; border-radius: 18px; }
    .ranking-profile-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .ranking-profile-section-head { align-items: flex-start; flex-direction: column; }
    .ranking-profile-point-totals { justify-content: flex-start; }
    .ranking-profile-stats-grid { grid-template-columns: 1fr; }
}


/* V2.5.1 - Doble clic de perfil garantizado */
#ranking-screen .ranking-row-profile,
#ranking-screen .ranking-podium-card[data-player-name] {
    position: relative;
    cursor: pointer !important;
    user-select: none;
    -webkit-user-select: none;
}
#ranking-screen .ranking-row-profile::after,
#ranking-screen .ranking-podium-card[data-player-name]::after {
    content: "DOBLE CLIC · VER STATS";
    position: absolute;
    right: 12px;
    top: 7px;
    z-index: 4;
    padding: 4px 8px;
    border: 1px solid rgba(52,217,255,.18);
    border-radius: 999px;
    background: rgba(4,8,14,.72);
    color: rgba(120,220,255,.72);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .65px;
    opacity: 0;
    transform: translateY(-3px);
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease;
}
#ranking-screen .ranking-row-profile:hover::after,
#ranking-screen .ranking-podium-card[data-player-name]:hover::after {
    opacity: 1;
    transform: translateY(0);
}
#ranking-screen .ranking-row-profile:hover {
    outline: 1px solid rgba(52,217,255,.10);
    outline-offset: -1px;
}
@media (max-width: 720px) {
    #ranking-screen .ranking-row-profile::after,
    #ranking-screen .ranking-podium-card[data-player-name]::after {
        content: "DOBLE TOQUE · VER STATS";
    }
}


/* ============================================================
   V2.5.2 - RANKING LIMPIO Y CENTRADO
   ============================================================ */

/*
   El ::after del podio se usaba antes como brillo diagonal y luego
   como aviso "DOBLE CLIC". Se desactiva completamente.
   El doble clic sigue funcionando mediante JavaScript.
*/
#ranking-screen .ranking-podium-card::after,
#ranking-screen .ranking-podium-card[data-player-name]::after,
#ranking-screen .ranking-row-profile::after {
    content: none !important;
    display: none !important;
    background: none !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

/* Sin mancha/outline al seleccionar o pasar el mouse. */
#ranking-screen .ranking-podium-card[data-player-name],
#ranking-screen .ranking-row-profile {
    cursor: default !important;
    outline: none !important;
    -webkit-tap-highlight-color: transparent;
}
#ranking-screen .ranking-podium-card[data-player-name]:focus,
#ranking-screen .ranking-row-profile:focus,
#ranking-screen .ranking-podium-card[data-player-name]:active,
#ranking-screen .ranking-row-profile:active {
    outline: none !important;
}

/*
   Tabla perfectamente centrada.
   Las columnas de encabezado usan exactamente la misma alineación
   que sus valores.
*/
#ranking-screen .ranking-board {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

#ranking-screen .ranking-board-header,
#ranking-screen .ranking-row {
    width: 100% !important;
    box-sizing: border-box !important;
    grid-template-columns:
        76px
        minmax(230px, 1.65fr)
        90px
        minmax(150px, 1fr)
        minmax(155px, 1fr)
        110px !important;
    column-gap: 0 !important;
}

/* RANK */
#ranking-screen .ranking-board-header > div:nth-child(1),
#ranking-screen .ranking-cell-rank {
    text-align: center !important;
    justify-self: stretch !important;
}

/* JUGADOR */
#ranking-screen .ranking-board-header > div:nth-child(2),
#ranking-screen .ranking-player {
    text-align: left !important;
    justify-self: stretch !important;
}

/* NIVEL */
#ranking-screen .ranking-board-header > div:nth-child(3),
#ranking-screen .ranking-cell-level {
    text-align: center !important;
    justify-self: stretch !important;
}

/* EXP */
#ranking-screen .ranking-board-header > div:nth-child(4),
#ranking-screen .ranking-cell-exp {
    text-align: center !important;
    justify-self: stretch !important;
}

/* VICT / DERR */
#ranking-screen .ranking-board-header > div:nth-child(5),
#ranking-screen .ranking-cell-record {
    text-align: center !important;
    justify-self: stretch !important;
}

/* WINRATE */
#ranking-screen .ranking-board-header > div:nth-child(6),
#ranking-screen .ranking-cell-winrate {
    text-align: center !important;
    justify-self: stretch !important;
}

/* Evita desplazamientos visuales de los números. */
#ranking-screen .ranking-cell-level,
#ranking-screen .ranking-cell-exp,
#ranking-screen .ranking-cell-record,
#ranking-screen .ranking-cell-winrate {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0 !important;
}

/* Conserva jugador a la izquierda. */
#ranking-screen .ranking-player {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

/* El ranking completo queda centrado dentro del área disponible. */
#ranking-screen .ranking-public-content,
#ranking-screen .ranking-section {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* En desktop se aprovecha un poco mejor el ancho sin descentrarlo. */
@media (min-width: 981px) {
    #ranking-screen .ranking-public-content {
        width: min(1120px, calc(100% - 40px)) !important;
        max-width: 1120px !important;
    }
    #ranking-screen .ranking-section {
        width: 100% !important;
        max-width: 1120px !important;
    }
}

/* Mantener el diseño móvil previo. */
@media (max-width: 980px) {
    #ranking-screen .ranking-board-header,
    #ranking-screen .ranking-row {
        min-width: 780px !important;
    }
}


/* ============================================================
   V2.5.3 - PERFIL STATS COMPACTO + BARRAS AMARILLAS
   ============================================================ */

.ranking-profile-dialog {
    width: min(680px, 94vw) !important;
    max-height: 84vh !important;
    padding: 20px !important;
    border-radius: 17px !important;
}

.ranking-profile-hero {
    gap: 14px !important;
    margin-bottom: 14px !important;
}

.ranking-profile-avatar {
    width: 74px !important;
    height: 74px !important;
    flex-basis: 74px !important;
    border-radius: 16px !important;
}

.ranking-profile-identity h2 {
    font-size: clamp(1.22rem, 3vw, 1.58rem) !important;
}

.ranking-profile-summary {
    gap: 7px !important;
    margin-bottom: 15px !important;
}

.ranking-profile-summary .ranking-profile-stat {
    padding: 8px 9px !important;
    border-radius: 10px !important;
}

.ranking-profile-summary .ranking-profile-stat-label {
    font-size: .59rem !important;
}

.ranking-profile-summary .ranking-profile-stat-value {
    font-size: .89rem !important;
}

.ranking-profile-section-head {
    margin-bottom: 8px !important;
    gap: 10px !important;
}

.ranking-profile-section-head h3 {
    font-size: .94rem !important;
}

.ranking-profile-point-totals {
    display: flex !important;
    justify-content: flex-end !important;
}

.ranking-profile-point-totals span {
    padding: 5px 9px !important;
    font-size: .67rem !important;
    border-color: rgba(243,200,74,.20) !important;
    background: rgba(243,200,74,.045) !important;
}

.ranking-profile-point-totals strong {
    color: #f3c84a !important;
}

.ranking-profile-stats-grid {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 7px 9px !important;
}

.ranking-point-card {
    min-width: 0;
    padding: 8px 9px 9px;
    border: 1px solid rgba(255,255,255,.065);
    border-radius: 9px;
    background: linear-gradient(180deg, rgba(255,255,255,.026), rgba(255,255,255,.015));
}

.ranking-point-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.ranking-point-label {
    color: #aab3c1;
    font-size: .70rem;
    font-weight: 750;
    letter-spacing: .20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ranking-point-label em {
    color: #707a89;
    font-style: normal;
    font-weight: 600;
}

.ranking-point-number {
    color: #f4c94f;
    font-size: .79rem;
    font-weight: 900;
    flex: 0 0 auto;
}

.ranking-point-track {
    position: relative;
    height: 5px;
    overflow: hidden;
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.025));
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.035);
}

.ranking-point-fill {
    display: block;
    height: 100%;
    min-width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, #806620 0%, #c69d31 45%, #f0c74f 100%);
    box-shadow: 0 0 9px rgba(231,188,66,.23);
    transition: width .22s ease;
}

@media (max-width: 680px) {
    .ranking-profile-dialog {
        width: min(94vw, 560px) !important;
        padding: 17px 14px !important;
    }
    .ranking-profile-stats-grid {
        grid-template-columns: 1fr !important;
    }
    .ranking-profile-point-totals {
        justify-content: flex-start !important;
    }
}


/* ============================================================
   CLANES REALES V1 - MYSQL
   ============================================================ */
.clan-create-search-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 14px;
    margin-top: 14px;
}
.clan-web-card {
    padding: 18px;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 16px;
    background: linear-gradient(145deg,rgba(18,22,31,.92),rgba(9,11,17,.90));
}
.clan-web-kicker {
    display: block;
    margin-bottom: 5px;
    color: #9d7cff;
    font-size: .67rem;
    font-weight: 800;
    letter-spacing: 1.2px;
}
.clan-web-card h3 {
    margin: 0 0 5px;
    color: #fff;
    font-size: 1rem;
}
.clan-web-card p {
    margin: 0 0 13px;
    color: #808b9c;
    font-size: .78rem;
    line-height: 1.45;
}
.clan-web-input {
    width: 100%;
    min-height: 42px;
    box-sizing: border-box;
    padding: 0 12px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 10px;
    outline: none;
    background: rgba(4,7,12,.82);
    color: #fff;
}
.clan-web-input:focus { border-color: rgba(139,92,246,.55); }
.clan-payment-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px;
    margin: 10px 0 12px;
}
.clan-payment-option {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 52px;
    padding: 8px 10px;
    border: 1px solid rgba(255,255,255,.07);
    border-radius: 10px;
    background: rgba(255,255,255,.025);
    cursor: pointer;
}
.clan-payment-option input { accent-color: #d5ad3e; }
.clan-payment-option span { display:flex;flex-direction:column;gap:2px; }
.clan-payment-option strong { color:#f1f4f8;font-size:.78rem; }
.clan-payment-option small { color:#697386;font-size:.65rem; }
.clan-search-line {
    display:grid;
    grid-template-columns:1fr auto;
    gap:8px;
    margin-bottom:10px;
}
.clan-search-results {
    display:flex;
    flex-direction:column;
    gap:7px;
    max-height:310px;
    overflow:auto;
}
.clan-search-card {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:10px 11px;
    border:1px solid rgba(255,255,255,.06);
    border-radius:11px;
    background:rgba(255,255,255,.025);
}
.clan-search-card > div { min-width:0; }
.clan-search-card strong { display:block;color:#fff;font-size:.78rem; }
.clan-search-card span { display:block;margin-top:3px;color:#798598;font-size:.66rem;white-space:normal; }
.clan-my-requests-card { margin-top:14px; }
.clan-leave-btn {
    margin-left:auto;
    padding:9px 13px;
    border:1px solid rgba(244,85,103,.30);
    border-radius:10px;
    background:rgba(244,85,103,.08);
    color:#ff7687;
    font-weight:750;
    cursor:pointer;
}
.clan-master-lock {
    display:inline-block;
    padding:5px 8px;
    border-radius:999px;
    border:1px solid rgba(243,211,132,.20);
    color:#f3d384;
    font-size:.63rem;
    font-weight:800;
}
@media (max-width: 880px) {
    .clan-create-search-grid { grid-template-columns:1fr; }
    .clan-payment-grid { grid-template-columns:1fr; }
    .clan-search-card { align-items:flex-start;flex-direction:column; }
    .clan-search-line { grid-template-columns:1fr; }
}


/* ============================================================
   V1.3 - CUENTA CREADA + INVITACION WHATSAPP
   ============================================================ */
.account-created-whatsapp-modal {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 22px;
    background: rgba(4, 6, 10, .73);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s ease, visibility .22s ease;
}

.account-created-whatsapp-modal.active {
    opacity: 1;
    visibility: visible;
}

.account-created-whatsapp-card {
    position: relative;
    width: min(620px, 94vw);
    min-height: 470px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 52px 34px 46px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 20px;
    background:
        radial-gradient(circle at 72% 55%, rgba(168,119,32,.08), transparent 32%),
        linear-gradient(155deg, rgba(12,14,18,.985), rgba(4,5,7,.99));
    box-shadow:
        0 34px 90px rgba(0,0,0,.56),
        inset 0 1px rgba(255,255,255,.025);
    text-align: center;
    transform: translateY(10px) scale(.985);
    transition: transform .22s ease;
}

.account-created-whatsapp-modal.active .account-created-whatsapp-card {
    transform: translateY(0) scale(1);
}

.account-created-close {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 50%;
    background: rgba(255,255,255,.04);
    color: rgba(255,255,255,.68);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.account-created-close:hover {
    background: rgba(255,255,255,.09);
    color: #fff;
}

.account-created-check {
    width: 108px;
    height: 108px;
    margin-bottom: 30px;
}
.account-created-check svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}
.account-created-check circle {
    fill: #08c90a;
}
.account-created-check path {
    fill: none;
    stroke: #fff;
    stroke-width: 8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.account-created-whatsapp-card h2 {
    margin: 0;
    color: #f4f4f4;
    font-family: 'Cinzel', Georgia, serif;
    font-size: clamp(2rem, 5vw, 2.75rem);
    font-weight: 700;
    letter-spacing: -.5px;
    text-shadow: 0 2px 14px rgba(0,0,0,.42);
}

.account-created-whatsapp-card p {
    margin: 24px 0 34px;
    color: rgba(245,245,245,.87);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(1.02rem, 2.5vw, 1.26rem);
    line-height: 1.5;
}

.account-created-whatsapp-btn {
    min-width: 178px;
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 24px;
    border: 1px solid rgba(237,191,95,.85);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(35,35,39,.96), rgba(20,20,24,.98));
    color: #f2f2f2;
    font-size: .97rem;
    font-weight: 800;
    letter-spacing: .45px;
    cursor: pointer;
    box-shadow: 0 8px 25px rgba(0,0,0,.24);
    transition: transform .16s ease, border-color .16s ease, background .16s ease;
}
.account-created-whatsapp-btn svg {
    width: 21px;
    height: 21px;
    fill: #21d366;
}
.account-created-whatsapp-btn:hover {
    transform: translateY(-1px);
    border-color: #f3cd78;
    background: linear-gradient(180deg, rgba(42,42,47,.98), rgba(22,22,26,.99));
}

body.account-created-modal-open {
    overflow: hidden;
}

@media (max-width: 620px) {
    .account-created-whatsapp-card {
        min-height: 430px;
        padding: 50px 20px 38px;
        border-radius: 17px;
    }
    .account-created-check {
        width: 92px;
        height: 92px;
        margin-bottom: 24px;
    }
    .account-created-whatsapp-card p {
        margin: 20px 0 28px;
    }
    .account-created-desktop-break {
        display: none;
    }
}

/* ==========================================================
   ESCALA VISUAL GLOBAL V7 - 90% SIN RECORTES
   Emula una vista al 90% conservando el fondo y el ancho completo.
   ========================================================== */
html {
  background: #020207;
}
body {
  zoom: 0.90;
  width: 111.111111%;
  min-height: 111.111111vh;
}
@supports not (zoom: 1) {
  body {
    zoom: 1;
    transform: scale(0.90);
    transform-origin: 0 0;
    width: 111.111111%;
    min-height: 111.111111vh;
  }
}
@media print {
  body { zoom: 1; transform: none; width: auto; min-height: auto; }
}

/* V7: compensación de elementos full-screen bajo zoom 90%.
   Evita la franja negra/recorte que aparecía con la V6 al 80%. */
#landing-screen.landing-screen,
.login-screen,
.scanlines,
.bg-ambient,
.bg-particles,
.modal-overlay,
.orders-overlay,
#landing-screen .bg-slider,
#landing-screen .bg-overlay,
.login-bg-slider,
.login-bg-overlay,
.ranking-bg-slider,
.ranking-bg-slide,
.ranking-bg-overlay,
.news-bg-slider,
.news-bg-slide,
.news-bg-overlay {
  width: 111.111111vw !important;
  height: 111.111111vh !important;
  min-height: 111.111111vh !important;
  right: auto !important;
  bottom: auto !important;
}


/* ================= BAUL WEB V9 ================= */
.vault-section{padding:24px 0 54px;min-height:680px}.vault-shell{max-width:1500px;margin:0 auto;padding:0 22px}.vault-header{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:18px}.vault-kicker{font-size:12px;letter-spacing:2px;font-weight:800;color:#5fb7ff}.vault-header h2{margin:6px 0 5px;font-size:30px;line-height:1.05}.vault-header p{margin:0;color:#aab3c2;max-width:760px}.vault-counter{min-width:130px;text-align:center;padding:12px 16px;border:1px solid rgba(95,183,255,.3);background:rgba(17,25,40,.75);border-radius:12px}.vault-counter strong{display:block;font-size:24px}.vault-counter span{font-size:11px;color:#8f9bad}.vault-safety-banner{display:grid;grid-template-columns:42px 1fr auto;gap:14px;align-items:center;padding:14px 16px;border:1px solid rgba(61,210,139,.38);background:rgba(15,65,48,.25);border-radius:12px;margin-bottom:18px}.vault-safety-banner.blocked{border-color:rgba(255,87,87,.6);background:rgba(95,20,20,.28)}.vault-safety-icon{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:900;background:#ffb020;color:#171717}.vault-safety-banner strong{display:block;font-size:14px}.vault-safety-banner span{display:block;margin-top:3px;color:#bac2cf;font-size:12px}.vault-status-chip{padding:8px 12px;border-radius:999px;font-size:11px;font-weight:900;letter-spacing:1px}.vault-status-chip.safe{background:rgba(61,210,139,.15);color:#59e3a5;border:1px solid rgba(61,210,139,.4)}.vault-status-chip.blocked{background:rgba(255,87,87,.15);color:#ff7777;border:1px solid rgba(255,87,87,.45)}.vault-status-chip.checking{background:rgba(255,176,32,.12);color:#ffc45e}.vault-workspace{display:grid;grid-template-columns:minmax(360px,.8fr) minmax(620px,1.5fr);gap:18px}.vault-game-panel,.vault-main-panel{background:rgba(9,14,24,.82);border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:16px;box-shadow:0 18px 45px rgba(0,0,0,.22)}.vault-panel-title{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:12px}.vault-panel-title strong{display:block;font-size:14px;letter-spacing:.8px}.vault-panel-title span{display:block;color:#8e99aa;font-size:11px;margin-top:3px}.vault-refresh-btn,.vault-secondary-btn,.vault-primary-btn,.vault-withdraw-btn{border:0;border-radius:9px;font-weight:800;cursor:pointer}.vault-refresh-btn,.vault-secondary-btn{padding:9px 12px;background:#202a38;color:#d9e2ef}.vault-primary-btn{width:100%;margin-top:12px;padding:12px;background:linear-gradient(135deg,#2d8cff,#64baff);color:white}.vault-withdraw-btn{padding:11px 16px;background:linear-gradient(135deg,#d68b21,#ffbe55);color:#17120a}.vault-primary-btn:disabled,.vault-withdraw-btn:disabled{opacity:.4;cursor:not-allowed}.vault-box-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:9px}.vault-box-tab{padding:8px;border-radius:7px;border:1px solid rgba(255,255,255,.08);background:#121b29;color:#9aa7b8;cursor:pointer;font-weight:800}.vault-box-tab.active{border-color:#4da8ff;color:#fff;background:#183757}.vault-box-tab.locked{opacity:.35}.vault-box-grid{display:grid;grid-template-columns:repeat(5,minmax(48px,1fr));gap:7px}.vault-box-slot,.vault-slot{position:relative;aspect-ratio:1/1;border:1px solid rgba(255,255,255,.08);background:rgba(16,24,37,.85);border-radius:8px;display:flex;align-items:center;justify-content:center;overflow:hidden;cursor:pointer;transition:.15s transform,.15s border-color,.15s box-shadow}.vault-box-slot:hover,.vault-slot:hover{border-color:rgba(85,174,255,.55);transform:translateY(-1px)}.vault-box-slot.filled,.vault-slot.filled{background:linear-gradient(145deg,rgba(28,43,63,.95),rgba(11,18,29,.95))}.vault-box-slot.selected,.vault-slot.selected{border-color:#5db8ff;box-shadow:0 0 0 2px rgba(93,184,255,.18),0 0 18px rgba(36,139,255,.25)}.vault-box-slot img,.vault-slot img{width:82%;height:82%;object-fit:contain;image-rendering:auto}.vault-box-slot>span,.vault-slot-num{position:absolute;right:4px;bottom:3px;font-size:9px;color:#8995a6;background:rgba(5,8,14,.72);padding:1px 4px;border-radius:4px}.vault-source-card,.vault-selected-card{min-height:62px;margin-top:12px;border:1px dashed rgba(255,255,255,.13);border-radius:9px;padding:9px;display:flex;align-items:center;gap:10px;color:#8e99aa;font-size:12px}.vault-source-card img,.vault-selected-card img{width:45px;height:45px;object-fit:contain;background:#0d1622;border-radius:7px}.vault-source-card strong,.vault-selected-card strong{display:block;color:#eef4fb}.vault-source-card span,.vault-selected-card span{display:block;margin-top:3px}.vault-grid{display:grid;grid-template-columns:repeat(10,minmax(46px,1fr));gap:6px;max-height:610px;overflow:auto;padding-right:4px}.vault-mini-help{font-size:10px;color:#5fb7ff;border:1px solid rgba(95,183,255,.25);padding:6px 8px;border-radius:999px}.vault-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:12px}.vault-rules{margin-top:16px;padding:13px 15px;border-left:3px solid #ffad3d;background:rgba(255,173,61,.07);border-radius:7px}.vault-rules strong{display:block;color:#ffd18f;font-size:13px}.vault-rules span{display:block;color:#aeb7c6;font-size:11px;line-height:1.55;margin-top:4px}.vault-warning-overlay{position:fixed;inset:0;z-index:99999;background:rgba(0,0,0,.75);backdrop-filter:blur(5px);display:none;align-items:center;justify-content:center;padding:20px}.vault-warning-overlay.active{display:flex}.vault-warning-card{width:min(470px,95vw);background:#141923;border:1px solid rgba(255,83,83,.55);border-radius:16px;padding:25px;text-align:center;box-shadow:0 25px 90px rgba(0,0,0,.55)}.vault-warning-symbol{width:56px;height:56px;margin:0 auto 10px;border-radius:50%;display:grid;place-items:center;background:#ff4f4f;color:white;font-size:34px;font-weight:900}.vault-warning-card h3{margin:7px 0;color:#ff7777}.vault-warning-card p{color:#e5e9ef;line-height:1.5}.vault-warning-danger{margin:13px 0;padding:11px;background:rgba(255,64,64,.09);border:1px solid rgba(255,64,64,.25);border-radius:9px;color:#ffc2c2;font-size:12px;line-height:1.45}.vault-warning-card button{padding:11px 24px;border:0;border-radius:9px;background:#ff5757;color:white;font-weight:900;cursor:pointer}
@media(max-width:1100px){.vault-workspace{grid-template-columns:1fr}.vault-grid{grid-template-columns:repeat(9,minmax(44px,1fr));max-height:none}}
@media(max-width:720px){.vault-shell{padding:0 10px}.vault-header{align-items:flex-start;flex-direction:column}.vault-counter{width:100%}.vault-safety-banner{grid-template-columns:36px 1fr}.vault-status-chip{grid-column:1/-1;text-align:center}.vault-box-grid{grid-template-columns:repeat(5,1fr)}.vault-grid{grid-template-columns:repeat(6,1fr);gap:5px}.vault-game-panel,.vault-main-panel{padding:11px}.vault-actions{flex-direction:column}.vault-secondary-btn,.vault-withdraw-btn{width:100%}}
@media(max-width:430px){.vault-grid{grid-template-columns:repeat(5,1fr)}.vault-header h2{font-size:24px}}
/* ================= FIN BAUL WEB V9 ================= */

/* V9: evita recortes al agregar Baúl */
.main-content > .tab-navigation{flex-wrap:wrap;}
@media(max-width:768px){.main-content > .tab-navigation{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;}}

/* V10 - Baul status refresh + clan master actions */
.vault-safety-actions{display:flex;align-items:center;gap:.65rem;flex-wrap:wrap;justify-content:flex-end}
.vault-refresh-state-btn,.vault-warning-refresh{border:1px solid rgba(76,201,240,.45);background:rgba(10,28,38,.92);color:#6ee7ff;border-radius:10px;padding:.65rem .85rem;font-weight:800;font-size:.72rem;letter-spacing:.04em;cursor:pointer;white-space:nowrap}
.vault-refresh-state-btn:hover,.vault-warning-refresh:hover{background:rgba(14,48,62,.96)}
.vault-refresh-state-btn:disabled,.vault-warning-refresh:disabled{opacity:.55;cursor:wait}
.vault-warning-buttons{display:flex;gap:.65rem;justify-content:center;flex-wrap:wrap;margin-top:.35rem}
.vault-warning-buttons>button{min-width:145px}
.clan-master-actions{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(260px,.8fr);gap:1rem;margin:1rem 0}
.clan-master-action-block{border:1px solid rgba(90,80,150,.34);background:rgba(8,10,18,.72);border-radius:15px;padding:1rem 1.05rem;display:flex;flex-direction:column;gap:.7rem}
.clan-master-action-block>div:first-child{display:flex;flex-direction:column;gap:.15rem}
.clan-master-action-block>div:first-child strong{text-transform:uppercase;font-size:.83rem}
.clan-master-action-block>div:first-child span{font-size:.76rem;color:#a7abba}
.clan-master-action-block.danger{border-color:rgba(255,75,88,.32)}
.clan-rename-line{display:flex;gap:.65rem;align-items:center}
.clan-rename-line .clan-web-input{margin:0;min-width:0;flex:1}
.clan-rename-btn{white-space:nowrap}
.clan-disband-btn{margin-left:auto}
@media(max-width:820px){.clan-master-actions{grid-template-columns:1fr}.clan-rename-line{flex-direction:column;align-items:stretch}.clan-rename-btn,.clan-disband-btn{width:100%;margin:0}.vault-safety-actions{justify-content:flex-start}}

/* V10.5 - TRADES: DESCRIPCION + DETALLES */
.trades-table { min-width:1080px; }
.trades-description { color:#dce5f3; font-size:1rem; font-weight:700; }
.trades-details { display:flex; flex-direction:column; gap:.28rem; min-width:100px; color:#eef3fb; line-height:1.25; }
.trades-details span { display:block; white-space:nowrap; }
.trades-details b { color:#eef3fb; font-weight:800; }
.trades-item-cell small { display:block; margin-top:.34rem; }
.trades-condition-badge { display:inline-flex; align-items:center; min-height:24px; padding:.18rem .58rem; border-radius:999px; font-size:.72rem; font-weight:900; letter-spacing:.15px; border:1px solid rgba(255,255,255,.1); }
.trades-condition-badge.permanent { color:#ffe17a; background:rgba(255,197,56,.12); border-color:rgba(255,197,56,.32); box-shadow:0 0 14px rgba(255,197,56,.08); }
.trades-condition-badge.temporary { color:#9deaff; background:rgba(52,217,255,.10); border-color:rgba(52,217,255,.28); }


/* V15 - Puntos Evento en morado, separado visualmente de Oro */
.shop-session-actions .points-badge:not(.gold-balance-badge):not(.cash-balance-badge){background:rgba(139,92,246,.11)!important;border-color:rgba(139,92,246,.42)!important;color:#8b5cf6!important;}
.shop-session-actions .points-badge:not(.gold-balance-badge):not(.cash-balance-badge) .points-icon{color:#8b5cf6!important;}
#coupon-points,#trades-event-points{color:#a78bfa!important;}

/* ============================================================
   V18 - RANKING KILLS + MOBILE PERFORMANCE
   ============================================================ */
#ranking-screen .ranking-board-header,
#ranking-screen .ranking-row {
    grid-template-columns: 72px minmax(220px,1.55fr) 85px 1.15fr 1.08fr 90px 115px !important;
    min-width: 860px !important;
}
#ranking-screen .ranking-cell-kills {
    text-align:center !important;
    font-weight:900 !important;
    color:#a78bfa !important;
    letter-spacing:.2px;
}
#ranking-screen .value-kills { color:#a78bfa !important; }

/* Carga/pintado mas liviano en telefonos y tablets. */
@media (max-width: 900px) {
    html { scroll-behavior:auto !important; }
    .bg-slide:not(.active),
    .login-bg-slide:not(.active),
    .ranking-bg-slide:not(.active),
    .coupon-bg-slide:not(.active) { display:none !important; }
    .bg-slide.active,
    .login-bg-slide.active,
    .ranking-bg-slide.active,
    .coupon-bg-slide.active,
    .bg-slide-main,
    .bg-slide-fill {
        animation:none !important;
        transition:none !important;
        transform:none !important;
        filter:none !important;
    }
    .modal-overlay,
    .vault-warning-overlay,
    .clan-confirm-overlay,
    .ranking-profile-modal,
    .orders-overlay,
    .glass,
    [class*="glass"] {
        -webkit-backdrop-filter:none !important;
        backdrop-filter:none !important;
    }
    .ranking-podium-card,
    .ranking-board,
    .trades-shell,
    .vault-game-panel,
    .vault-main-panel,
    .clan-web-card,
    .coupon-card {
        box-shadow:none !important;
    }
    .ranking-podium-card,
    .ranking-row,
    .vault-slot,
    .vault-box-slot,
    .trades-item-card,
    .trades-row {
        transition:none !important;
    }
    .ranking-podium-card:hover,
    .ranking-row:hover,
    .vault-slot:hover,
    .vault-box-slot:hover { transform:none !important; }
    #ranking-screen .ranking-board { -webkit-overflow-scrolling:touch; }
    #ranking-screen .ranking-board-header,
    #ranking-screen .ranking-row {
        grid-template-columns: 54px 185px 62px 112px 105px 78px 100px !important;
        min-width: 696px !important;
    }
    .tab-content, .ranking-section, .trades-market-list, .vault-grid {
        content-visibility:auto;
        contain-intrinsic-size: 800px;
    }
}
@media (max-width: 520px) {
    #ranking-screen .ranking-board-header,
    #ranking-screen .ranking-row { min-width: 680px !important; }
    .ranking-podium { gap:8px !important; }
}


/* V18.2 - ranking 7 columnas fijo: KILLS antes de WINRATE */
#ranking-screen .ranking-board-header,
#ranking-screen .ranking-row {
  display:grid !important;
  grid-template-columns:72px minmax(220px,1.55fr) 85px minmax(150px,1.15fr) minmax(145px,1.08fr) 90px 115px !important;
  min-width:860px !important;
}
#ranking-screen .ranking-board-header > div:nth-child(6),
#ranking-screen .ranking-cell-kills { grid-column:6 !important; text-align:center !important; }
#ranking-screen .ranking-board-header > div:nth-child(7),
#ranking-screen .ranking-cell-winrate { grid-column:7 !important; text-align:center !important; }
@media (max-width:900px){
  #ranking-screen .ranking-board-header,
  #ranking-screen .ranking-row {
    grid-template-columns:54px 185px 62px 112px 105px 78px 100px !important;
    min-width:696px !important;
  }
}
@media (max-width:520px){
  #ranking-screen .ranking-board-header,
  #ranking-screen .ranking-row { min-width:696px !important; }
}


/* ===== EVENTO SETIEMBRE 2026 ===== */
.september-hero{min-height:245px!important;display:flex;flex-direction:column;justify-content:center}
.september-badges{position:relative;z-index:2;display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.1rem}
.september-badges span{padding:.48rem .7rem;border:1px solid rgba(139,92,246,.28);border-radius:999px;background:rgba(139,92,246,.09);color:#d8c8ff;font-size:.74rem;font-weight:800;letter-spacing:.2px}
.event-section-heading{margin:2.25rem 0 .9rem;padding-left:.15rem}
.event-section-heading h3{margin:.1rem 0 .35rem;font-family:'Cinzel',serif;color:#fff;font-size:clamp(1.35rem,2.4vw,2rem);letter-spacing:.4px}
.event-section-heading p{max-width:880px;color:#aeb4bf;font-size:.92rem;line-height:1.65}
.event-section-heading code,.event-shot-card code{padding:.12rem .4rem;border-radius:7px;background:rgba(139,92,246,.15);color:#d8c8ff;font-weight:800}
.event-section-kicker{display:block;color:#8b5cf6;text-transform:uppercase;letter-spacing:2.2px;font-size:.66rem;font-weight:900;margin-bottom:.18rem}
.september-grid{align-items:stretch}
.event-feature-card{position:relative;overflow:hidden}
.event-feature-card::after{content:'';position:absolute;right:-45px;top:-55px;width:130px;height:130px;border-radius:50%;background:radial-gradient(circle,rgba(139,92,246,.12),transparent 68%);pointer-events:none}
.event-highlight-card{border-color:rgba(139,92,246,.24)!important;background:linear-gradient(140deg,rgba(21,14,35,.88),rgba(10,10,16,.94))!important}
.event-stat-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem;margin-top:.2rem}
.event-stat-row span{display:flex;flex-direction:column;gap:.15rem;min-height:78px;justify-content:center;padding:.8rem 1rem;border-radius:14px;border:1px solid rgba(240,192,64,.18);background:rgba(240,192,64,.055);color:#c7ccd4;font-size:.82rem}
.event-stat-row b{color:#f0c040;font-size:1.06rem}
.event-note{margin-top:.75rem!important;font-size:.8rem!important;color:#9299a5!important}
.level-reward-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem}
.level-reward-card{padding:1rem;border-radius:16px;border:1px solid rgba(139,92,246,.16);background:linear-gradient(180deg,rgba(16,16,25,.88),rgba(8,8,13,.94));box-shadow:0 12px 28px rgba(0,0,0,.23)}
.level-reward-card h4{margin:.65rem 0 .3rem;color:#fff;font-size:.96rem}.level-reward-card p{color:#abb1bd;font-size:.8rem;line-height:1.55}
.level-pill{display:inline-flex;padding:.28rem .55rem;border-radius:8px;background:rgba(139,92,246,.13);border:1px solid rgba(139,92,246,.28);color:#c7adff;font-size:.66rem;font-weight:900;letter-spacing:1px}
.event-media-layout{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:.9rem;align-items:stretch}
.event-shot-card{margin:0;position:relative;display:flex;flex-direction:column;justify-content:center;padding:.75rem;border-radius:18px;border:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(12,13,19,.9),rgba(7,7,10,.95));box-shadow:0 14px 30px rgba(0,0,0,.26);overflow:hidden}
.event-shot-card a{display:block;border-radius:11px;overflow:hidden;background:#020205}
.event-shot-card img{display:block;width:100%;height:auto;object-fit:contain;transition:transform .25s ease,filter .25s ease}
.event-shot-card a:hover img{transform:scale(1.015);filter:brightness(1.06)}
.event-shot-card figcaption{padding:.7rem .25rem .05rem;color:#9fa6b2;font-size:.76rem;line-height:1.55}
.event-shot-card figcaption strong{color:#f0c040}
.event-steps{margin-left:1.2rem;display:grid;gap:.45rem;color:#b8bec8;font-size:.86rem;line-height:1.45}
.event-reward-box{display:flex;gap:.7rem;align-items:flex-start;margin-top:1rem;padding:.78rem;border-radius:13px;background:rgba(240,192,64,.07);border:1px solid rgba(240,192,64,.18)}
.event-reward-box>span{font-size:1.2rem}.event-reward-box strong{display:block;color:#f0c040;font-size:.88rem}.event-reward-box small{display:block;margin-top:.2rem;color:#aeb4bf;line-height:1.45}
.shot-image-wrap{position:relative}.gift-callout{position:absolute;right:8px;top:7px;padding:.28rem .45rem;border-radius:7px;background:rgba(5,5,8,.9);border:1px solid rgba(240,192,64,.55);color:#ffd966;font-size:.58rem;font-weight:900;letter-spacing:.5px;box-shadow:0 0 14px rgba(240,192,64,.16);pointer-events:none}
.event-claim-note{margin-top:.85rem;padding:.65rem .75rem;border-left:3px solid #8b5cf6;background:rgba(139,92,246,.07);color:#aeb4bf;font-size:.8rem;line-height:1.5}
.connection-timeline{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.45rem;margin-top:.75rem}
.connection-timeline span{display:flex;justify-content:space-between;align-items:center;gap:.35rem;padding:.5rem .6rem;border-radius:10px;background:rgba(52,217,255,.055);border:1px solid rgba(52,217,255,.14);color:#93dff0;font-size:.69rem}.connection-timeline b{color:#fff;font-size:.7rem}
.theme-reset-card{border-color:rgba(52,217,255,.18)!important;background:linear-gradient(150deg,rgba(8,24,29,.64),rgba(8,8,13,.94))!important}.theme-reset-card p{font-size:.87rem;line-height:1.6}
.ticket-gallery{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(260px,.7fr);gap:.9rem;margin-top:.9rem;align-items:start}.ticket-shop-shot img{max-height:540px;object-fit:contain}
.event-points-row{margin-bottom:.8rem}.event-live-note{border-color:rgba(139,92,246,.2)!important}.event-live-note p{line-height:1.65}
.event-footer-callout{margin-top:2rem;padding:1.15rem 1.25rem;border-radius:18px;border:1px solid rgba(240,192,64,.2);background:radial-gradient(circle at 10% 0%,rgba(240,192,64,.08),transparent 35%),linear-gradient(180deg,rgba(19,15,10,.8),rgba(8,8,12,.92));text-align:center}.event-footer-callout>div{display:flex;justify-content:center;gap:.55rem;align-items:center;color:#fff}.event-footer-callout strong{font-family:'Cinzel',serif;font-size:1.05rem}.event-footer-callout p{margin-top:.45rem;color:#aeb4bf;font-size:.82rem}
@media(max-width:980px){.level-reward-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.event-media-layout{grid-template-columns:1fr}.ticket-gallery{grid-template-columns:1fr}.ticket-shop-shot img{max-height:620px}.connection-timeline{grid-template-columns:repeat(2,minmax(0,1fr))}.event-stat-row{grid-template-columns:1fr}}
@media(max-width:560px){.september-badges span{width:100%;text-align:center}.level-reward-grid{grid-template-columns:1fr}.event-section-heading{margin-top:1.7rem}.connection-timeline{grid-template-columns:1fr}.gift-callout{font-size:.5rem;right:5px;top:5px}.event-footer-callout>div{align-items:flex-start;text-align:left}.event-footer-callout{text-align:left}}

/* V21 - Canjear cupón en una sola barra */
.coupon-code-single-wrap{display:flex;justify-content:center!important;width:100%;margin:8px auto 10px!important}
.coupon-code-single{width:min(100%,540px)!important;height:58px!important;padding:0 22px!important;background:rgba(0,0,0,.52)!important;border:2px solid rgba(139,92,246,.38)!important;border-radius:12px!important;color:#fff!important;text-align:center!important;font:700 1.12rem/1 'Courier New',monospace!important;letter-spacing:3px!important;text-transform:uppercase!important;outline:none!important;transition:.2s ease!important}
.coupon-code-single:focus{border-color:#8b5cf6!important;box-shadow:0 0 20px rgba(139,92,246,.32)!important;background:rgba(0,0,0,.64)!important}
.coupon-code-single::placeholder{color:#5d5868!important;letter-spacing:2px!important}
@media(max-width:640px){.coupon-code-single{height:52px!important;font-size:.92rem!important;letter-spacing:1.5px!important;padding:0 12px!important}}