/* =========================================================================
   MTC Brawl Stars v3 - Frontend Redesign (FASE 2 + FASE 3)
   Battle cards estilo oficial · sin emojis · animaciones · rank glow
   ========================================================================= */

.bs-clan-page{
    --bs-accent:#FFB300;
    --bs-accent-2:#7C3AED;
    --bs-bg:#0A0E27;
    --bs-panel:#12173A;
    --bs-panel-2:#1B2154;
    --bs-text:#F5F7FF;
    --bs-muted:#9BA3C7;
    --bs-glass:rgba(255,255,255,.06);
    --bs-border:rgba(255,255,255,.09);
    color:var(--bs-text);
    font-family:"Titillium Web","Segoe UI",system-ui,sans-serif;
}

/* ---------- ICON SPRITES (FASE 3: sustituyen emojis) ---------- */
.bs-ic{display:inline-block;width:1em;height:1em;vertical-align:-.15em;background-repeat:no-repeat;background-position:center;background-size:contain}
.bs-ic-trophy{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23FFC94A' d='M18 2H6v3H2v3a5 5 0 0 0 5 5h.6A5 5 0 0 0 11 15v3H8v2h8v-2h-3v-3a5 5 0 0 0 3.4-2H17a5 5 0 0 0 5-5V5h-4V2Zm-14 6V4h2v6a3 3 0 0 1-2-2Zm16 0a3 3 0 0 1-2 2V4h2v4Z'/></svg>")}
.bs-ic-users{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%237C90FF' d='M16 11a4 4 0 1 0-4-4 4 4 0 0 0 4 4Zm-8 0a4 4 0 1 0-4-4 4 4 0 0 0 4 4Zm0 2c-2.7 0-8 1.3-8 4v3h10v-3c0-.9.4-2.1 1.1-3.2A17 17 0 0 0 8 13Zm8 0a17 17 0 0 0-3.1.3A8 8 0 0 1 14 17v3h10v-3c0-2.7-5.3-4-8-4Z'/></svg>")}
.bs-ic-target{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23FF7A59' d='M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2Zm0 4a6 6 0 1 1-6 6 6 6 0 0 1 6-6Zm0 3a3 3 0 1 0 3 3 3 3 0 0 0-3-3Z'/></svg>")}
.bs-ic-crown{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23FFD54A' d='M3 18h18l2-10-6 4-5-8-5 8-6-4 2 10Zm0 2h18v2H3v-2Z'/></svg>")}
.bs-ic-star{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23FFC94A' d='M12 2 15 9l7 .8-5.4 4.7L18.2 22 12 18 5.8 22l1.6-7.5L2 9.8 9 9Z'/></svg>")}
.bs-ic-flame{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23FF6B35' d='M13 2a15 15 0 0 1-4 8c-2 2-4 4-4 7a7 7 0 0 0 14 0c0-4-2-6-3-9a10 10 0 0 1-3-6Z'/></svg>")}
.bs-ic-shield{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%2350C4FF' d='M12 2 4 5v6c0 5 3.5 9.7 8 11 4.5-1.3 8-6 8-11V5Z'/></svg>")}

/* ---------- HERO ---------- */
.bs-hero-section{position:relative;padding:80px 24px 60px;text-align:center;background:radial-gradient(1200px 500px at 50% -20%,rgba(124,58,237,.35),transparent 60%),linear-gradient(180deg,var(--bs-bg),#0d123c);border-radius:24px;overflow:hidden;margin-bottom:40px}
.bs-hero-bg::before{content:"";position:absolute;inset:0;background:conic-gradient(from 45deg,transparent,rgba(255,179,0,.08) 25%,transparent 50%);animation:bs-spin 24s linear infinite}
@keyframes bs-spin{to{transform:rotate(1turn)}}
.bs-hero-particles{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.bs-hero-particles span{position:absolute;width:6px;height:6px;background:var(--bs-accent);border-radius:50%;opacity:.7;filter:blur(1px);animation:bs-float 8s ease-in-out infinite}
.bs-hero-particles span:nth-child(1){left:10%;top:30%;animation-delay:.2s}
.bs-hero-particles span:nth-child(2){left:80%;top:20%;background:#7C3AED;animation-delay:1s}
.bs-hero-particles span:nth-child(3){left:25%;top:70%;animation-delay:2s}
.bs-hero-particles span:nth-child(4){left:60%;top:60%;background:#F43F5E;animation-delay:3s}
.bs-hero-particles span:nth-child(5){left:90%;top:80%;animation-delay:4s}
.bs-hero-particles span:nth-child(6){left:40%;top:15%;background:#22D3EE;animation-delay:5s}
.bs-hero-particles span:nth-child(7){left:15%;top:85%;animation-delay:6s}
.bs-hero-particles span:nth-child(8){left:70%;top:40%;background:#F97316;animation-delay:7s}
@keyframes bs-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-24px)}}

.bs-hero-content{position:relative;z-index:2}
.bs-hero-badge{display:inline-block;padding:6px 18px;border-radius:999px;background:linear-gradient(135deg,var(--bs-accent),#FF6B35);color:#0A0E27;font-weight:800;letter-spacing:.15em;font-size:12px}
.bs-hero-title{margin:14px 0 6px;font-size:clamp(38px,6vw,72px);font-weight:900;letter-spacing:-.02em;text-shadow:0 4px 30px rgba(255,179,0,.25);color:#fff}
.bs-hero-desc{color:var(--bs-muted);max-width:640px;margin:0 auto 30px;font-size:17px}
.bs-hero-stats{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-top:20px}
.bs-hero-stat{background:var(--bs-glass);backdrop-filter:blur(18px);border:1px solid var(--bs-border);border-radius:16px;padding:14px 22px;min-width:150px;transition:transform .3s}
.bs-hero-stat:hover{transform:translateY(-4px)}
.bs-hero-stat-icon{display:block;font-size:26px;margin-bottom:6px}
.bs-hero-stat-value{display:block;font-size:26px;font-weight:800;color:#fff}
.bs-hero-stat-label{display:block;color:var(--bs-muted);font-size:12px;text-transform:uppercase;letter-spacing:.1em}

.bs-hero-roles{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:26px}
.bs-hero-role-tag{padding:6px 14px;border-radius:999px;font-size:12px;font-weight:700;border:1px solid var(--bs-border)}
.bs-role-president-tag{background:linear-gradient(135deg,#FFB300,#FF6B35);color:#0A0E27}
.bs-role-vp-tag{background:linear-gradient(135deg,#E91E63,#FF6B35);color:#fff}
.bs-role-senior-tag{background:linear-gradient(135deg,#9C27B0,#E91E63);color:#fff}
.bs-role-member-tag{background:rgba(255,255,255,.08);color:var(--bs-text)}

/* ---------- SECTIONS ---------- */
.bs-clan-section{margin:56px 0;background:linear-gradient(180deg,var(--bs-panel),var(--bs-panel-2));border:1px solid var(--bs-border);border-radius:24px;padding:36px 28px;position:relative;overflow:hidden}
.bs-clan-section h2{margin:0 0 6px;font-size:28px;font-weight:800;color:#fff;letter-spacing:-.01em}
.bs-clan-section-sub{color:var(--bs-muted);margin:0 0 22px}
.fade-in{opacity:0;transform:translateY(20px);animation:bs-in .6s ease-out forwards}
@keyframes bs-in{to{opacity:1;transform:none}}

/* ---------- BATTLE CARDS (FASE 2) ---------- */
.bs-player-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:22px}

.bs-battle-card{
    --card-accent:#FFB300;
    position:relative;
    border-radius:22px;
    padding:22px 18px 18px;
    text-align:center;
    cursor:pointer;
    color:#fff;
    isolation:isolate;
    background:
        radial-gradient(120% 80% at 50% 0%, color-mix(in srgb,var(--card-accent) 45%, transparent) 0%, transparent 55%),
        linear-gradient(180deg,#1a2050,#0d1233);
    border:1px solid color-mix(in srgb,var(--card-accent) 40%, var(--bs-border));
    box-shadow:0 20px 40px -20px color-mix(in srgb,var(--card-accent) 55%,transparent), inset 0 1px 0 rgba(255,255,255,.08);
    transition:transform .3s ease, box-shadow .3s ease;
    overflow:hidden;
}
.bs-battle-card:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 30px 60px -20px color-mix(in srgb,var(--card-accent) 70%,transparent)}

/* Rayos decorativos rotativos */
.bs-battle-card-rays{
    position:absolute;inset:-40%;
    background:conic-gradient(from 0deg,transparent 0deg,color-mix(in srgb,var(--card-accent) 40%,transparent) 60deg,transparent 120deg,transparent 240deg,color-mix(in srgb,var(--card-accent) 30%,transparent) 300deg,transparent 360deg);
    animation:bs-spin 12s linear infinite;opacity:.35;z-index:-1;
    mask-image:radial-gradient(closest-side,black 40%,transparent 70%);
    -webkit-mask-image:radial-gradient(closest-side,black 40%,transparent 70%);
}

.bs-battle-card-role-tag{position:absolute;top:12px;right:12px;background:rgba(0,0,0,.35);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.15);padding:4px 10px;border-radius:999px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em}
.bs-role-president{background:linear-gradient(135deg,#FFB300,#FF6B35);color:#0A0E27}
.bs-role-vicePresident{background:linear-gradient(135deg,#E91E63,#FF6B35);color:#fff}
.bs-role-senior{background:linear-gradient(135deg,#9C27B0,#E91E63);color:#fff}
.bs-role-member{background:rgba(0,0,0,.4);color:#fff}

.bs-battle-card-avatar-wrap{position:relative;width:96px;height:96px;margin:6px auto 14px}
.bs-battle-card-avatar{width:100%;height:100%;border-radius:50%;overflow:hidden;background:rgba(0,0,0,.35);border:3px solid var(--card-accent);box-shadow:0 0 0 4px rgba(0,0,0,.35), 0 0 24px color-mix(in srgb,var(--card-accent) 50%,transparent);animation:bs-glow 3s ease-in-out infinite}
@keyframes bs-glow{0%,100%{box-shadow:0 0 0 4px rgba(0,0,0,.35),0 0 24px color-mix(in srgb,var(--card-accent) 50%,transparent)}50%{box-shadow:0 0 0 4px rgba(0,0,0,.35),0 0 40px color-mix(in srgb,var(--card-accent) 80%,transparent)}}
.bs-battle-card-avatar img{width:100%;height:100%;object-fit:cover}
.bs-battle-card-avatar-fallback{font-size:38px}
.bs-battle-card-rank-icon{position:absolute;bottom:-8px;right:-8px;width:44px;height:44px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5))}

.bs-battle-card-name{margin:6px 0 2px;font-size:20px;font-weight:800;letter-spacing:-.01em}
.bs-battle-card-tag{color:rgba(255,255,255,.55);font-size:12px;letter-spacing:.08em}
.bs-battle-card-title{display:block;color:var(--card-accent);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;margin-top:6px;text-shadow:0 0 12px color-mix(in srgb,var(--card-accent) 60%,transparent)}
.bs-battle-card-brawler{display:block;color:#fff;background:rgba(0,0,0,.3);border-radius:8px;padding:4px 10px;font-size:12px;margin-top:8px;font-weight:600}
.bs-battle-card-divider{height:1px;margin:14px 0 12px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent)}
.bs-battle-card-footer{display:flex;justify-content:space-between;align-items:center;font-weight:700}
.bs-battle-card-trophies{display:inline-flex;align-items:center;gap:6px;font-size:16px}
.bs-battle-card-rankname{color:var(--card-accent);text-shadow:0 0 12px color-mix(in srgb,var(--card-accent) 60%,transparent);font-size:13px;text-transform:uppercase;letter-spacing:.1em}

/* ---------- STATS TABLE ---------- */
.bs-clan-stats-table-wrap{overflow-x:auto;border-radius:16px;background:rgba(0,0,0,.2)}
.bs-clan-stats-table{width:100%;border-collapse:collapse;color:var(--bs-text)}
.bs-clan-stats-table th,.bs-clan-stats-table td{padding:14px 18px;text-align:left}
.bs-clan-stats-table thead{background:rgba(0,0,0,.4)}
.bs-clan-stats-table th{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--bs-muted);font-weight:700;border-bottom:1px solid var(--bs-border)}
.bs-clan-stats-table tbody tr{transition:background .2s;border-bottom:1px solid rgba(255,255,255,.05)}
.bs-clan-stats-table tbody tr:hover{background:rgba(255,255,255,.04)}
.bs-stats-medal{font-size:20px}
.bs-role-badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:11px;font-weight:700}
.bs-ranked-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;color:#fff;font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.08em;text-shadow:0 1px 2px rgba(0,0,0,.5)}
.bs-rank-icon{width:20px;height:20px;object-fit:contain}
.bs-rank-icon-lg{width:36px;height:36px}
.bs-player-avatar-sm{width:32px;height:32px;border-radius:50%;object-fit:cover;margin-right:8px;vertical-align:middle;border:2px solid var(--bs-accent)}

/* ---------- NEWS ---------- */
.bs-news-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.bs-news-card{background:var(--bs-panel-2);border:1px solid var(--bs-border);border-radius:16px;overflow:hidden;transition:transform .3s}
.bs-news-card:hover{transform:translateY(-4px)}
.bs-news-thumb{aspect-ratio:16/9;background:linear-gradient(135deg,#7C3AED,#0d1233) center/cover;position:relative}
.bs-news-thumb-overlay{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.7))}
.bs-news-content{padding:18px}
.bs-news-date{color:var(--bs-accent);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.bs-news-title a{color:#fff;text-decoration:none}
.bs-news-excerpt{color:var(--bs-muted);font-size:14px}
.bs-news-readmore{color:var(--bs-accent);font-weight:700;text-decoration:none}

/* ---------- MVP CARD ---------- */
.bs-mvp-card{--card-accent:#FFB300;position:relative;padding:24px;border-radius:20px;background:linear-gradient(135deg,#12173A 0%,#1B2154 100%);border:2px solid var(--card-accent);box-shadow:0 20px 40px -12px color-mix(in srgb,var(--card-accent) 50%,transparent);color:#fff;overflow:hidden}
.bs-mvp-badge{position:absolute;top:14px;right:14px;padding:5px 12px;border-radius:8px;background:var(--card-accent);color:#0A0E27;font-size:11px;font-weight:900;letter-spacing:.15em}
.bs-mvp-body{display:flex;align-items:center;gap:18px;margin-top:22px}
.bs-mvp-avatar{width:88px;height:88px;border-radius:50%;object-fit:cover;border:3px solid var(--card-accent)}
.bs-mvp-name{margin:0;font-size:22px}
.bs-mvp-brawler{margin:2px 0;color:var(--card-accent);font-weight:700}
.bs-mvp-trophies{margin:0;color:#fff;font-size:18px;font-weight:800}

/* ---------- MINI CARD + SEARCH ---------- */
.bs-mini-card{display:flex;gap:12px;align-items:center;padding:12px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--bs-border);cursor:pointer;transition:background .2s}
.bs-mini-card:hover{background:rgba(255,255,255,.08)}
.bs-mini-card img{width:48px;height:48px;border-radius:50%;object-fit:cover}
.bs-mini-label{position:absolute;font-size:10px;color:var(--bs-accent);letter-spacing:.1em;text-transform:uppercase}
.bs-mini-trophies{color:var(--bs-muted);font-size:13px;display:inline-flex;align-items:center;gap:4px}

.bs-search-widget{background:var(--bs-panel);border:1px solid var(--bs-border);border-radius:16px;padding:16px}
.bs-search-bar{display:flex;gap:8px;align-items:center;background:rgba(0,0,0,.3);border-radius:12px;padding:6px 12px}
.bs-search-input{flex:1;background:transparent;border:0;color:#fff;padding:12px 6px;font-size:15px;outline:none}
.bs-search-clear{background:transparent;color:var(--bs-muted);border:0;font-size:22px;cursor:pointer;padding:0 8px}
.bs-search-results{margin-top:16px}
.bs-search-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}

/* ---------- RANKING WIDGET ---------- */
.bs-ranking-widget{margin:20px 0;background:linear-gradient(180deg,var(--bs-panel),var(--bs-panel-2));border:1px solid var(--bs-border);border-radius:20px;padding:22px}
.bs-ranking-title{margin:0 0 14px;font-size:22px;color:#fff}

/* ---------- OVERLAY (existente) ---------- */
.bs-overlay-player-header{padding:16px;border-bottom:1px solid var(--bs-border)}
.bs-overlay-player-ranked{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;color:#fff;font-weight:700;font-size:12px;margin-left:6px}
.bs-overlay-quick-stats,.bs-overlay-victories{display:flex;gap:12px;padding:14px 16px}
.bs-overlay-stat,.bs-overlay-victory{flex:1;text-align:center;background:rgba(255,255,255,.05);padding:10px;border-radius:10px}
.bs-overlay-stat-value,.bs-overlay-victory-count{display:block;font-size:22px;font-weight:800;color:#fff}
.bs-overlay-stat-label,.bs-overlay-victory-label{display:block;color:var(--bs-muted);font-size:11px;text-transform:uppercase;letter-spacing:.1em}
.bs-overlay-section{padding:14px 16px;border-top:1px solid var(--bs-border)}
.bs-overlay-brawlers{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.bs-overlay-brawler{background:rgba(255,255,255,.05);padding:8px;border-radius:8px;font-size:13px}
.bs-overlay-brawler-name{display:block;color:#fff;font-weight:700}
.bs-overlay-brawler-detail{display:block;color:var(--bs-muted);font-size:11px}

/* ---------- RESPONSIVE ---------- */
/* ---------- FASE 1: Perfil de jugador 2.0 ---------- */
.bs-level-bar-wrap{ margin:14px 0 18px; }
.bs-level-bar-head{ display:flex; justify-content:space-between; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--bs-muted,#9BA3C7); margin-bottom:6px; }
.bs-level-bar-track{ height:10px; border-radius:999px; background:rgba(255,255,255,.08); overflow:hidden; border:1px solid var(--bs-border,rgba(255,255,255,.09)); }
.bs-level-bar-fill{ height:100%; border-radius:999px; background:linear-gradient(90deg,#FFB300,#FF7A00); transition:width .6s ease-out; }

.bs-overlay-meta-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.bs-overlay-meta-item{ font-size:12px; color:var(--bs-muted,#9BA3C7); background:rgba(255,255,255,.05); padding:3px 9px; border-radius:999px; }
.bs-estado-badge{ font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:3px 10px; border-radius:999px; color:#0A0E27; }
.bs-estado-activo{ background:#3DDC84; }
.bs-estado-inactivo{ background:#9BA3C7; }
.bs-estado-suplente{ background:#FFC94A; }
.bs-estado-capitan{ background:#FF6B35; color:#fff; }
.bs-battle-card-estado{ position:absolute; top:14px; left:14px; z-index:2; }

.bs-overlay-name-history{ margin-top:8px; font-size:12px; color:var(--bs-muted,#9BA3C7); }
.bs-overlay-name-history strong{ color:var(--bs-text,#F5F7FF); text-decoration:line-through; text-decoration-color:rgba(255,107,53,.6); }
.bs-tooltip{ position:relative; cursor:help; margin-left:4px; background:rgba(255,255,255,.08); border-radius:999px; padding:1px 7px; font-size:11px; }
.bs-tooltip::after{
    content:attr(data-tooltip); position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%);
    background:#12173A; color:#F5F7FF; font-size:11px; white-space:nowrap; padding:5px 9px; border-radius:8px;
    border:1px solid rgba(255,255,255,.09); opacity:0; pointer-events:none; transition:opacity .15s ease-out; z-index:20;
}
.bs-tooltip:hover::after{ opacity:1; }

@media(max-width:640px){
    .bs-hero-title{font-size:38px}
    .bs-player-cards-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}
    .bs-battle-card{padding:16px 14px 14px}
    .bs-battle-card-avatar-wrap{width:78px;height:78px}
}

/* ---------- ACCESSIBILITY / MOTION ---------- */
@media(prefers-reduced-motion:reduce){
    .bs-hero-particles span,.bs-hero-bg::before,.bs-battle-card-rays,.bs-battle-card-avatar{animation:none!important}
    .fade-in{opacity:1;transform:none;animation:none}
}