/* ================================================================
   SPORTA v4 — Layout System
   ================================================================ */

/* ── Auth Layout ── */
.auth-layout{min-height:100vh;display:flex;align-items:stretch;}
.auth-panel{width:100%;max-width:480px;min-height:100vh;background:white;display:flex;flex-direction:column;padding:var(--s8);overflow-y:auto;border-right:1px solid var(--border);}
.auth-hero{flex:1;display:none;position:relative;background:var(--text-900);overflow:hidden;}
.auth-hero-inner{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--s12);text-align:center;color:white;}
.auth-hero-bg{position:absolute;inset:0;background:radial-gradient(circle at 25% 25%,rgba(203,255,0,0.15) 0%,transparent 50%),radial-gradient(circle at 75% 75%,rgba(124,58,237,0.1) 0%,transparent 50%);}
@media(min-width:1024px){.auth-hero{display:flex;}}

.auth-logo-mark{width:40px;height:40px;background:var(--text-900);border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-family:var(--font-ui);font-size:22px;font-weight:800;color:var(--lime);}
.auth-logo-name{font-family:var(--font-ui);font-size:24px;font-weight:800;color:var(--text-900);letter-spacing:-0.02em;}
.auth-heading{font-family:var(--font-ui);font-size:28px;font-weight:800;line-height:1.2;margin-bottom:var(--s2);}
.auth-subhead{font-size:15px;color:var(--text-500);margin-bottom:var(--s6);}
.auth-form{display:flex;flex-direction:column;gap:var(--s4);}
.auth-divider{display:flex;align-items:center;gap:var(--s3);color:var(--text-400);font-size:13px;margin:var(--s1) 0;}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--border);}
.auth-footer{text-align:center;margin-top:var(--s5);font-size:14px;color:var(--text-500);}
.auth-footer a{color:var(--text-900);font-weight:700;}

.role-selector{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);}
.role-option{border:2px solid var(--border);border-radius:var(--r-lg);padding:var(--s4);cursor:pointer;transition:all var(--t-base);text-align:center;}
.role-option:hover{border-color:var(--border-md);}
.role-option.selected{border-color:var(--text-900);background:var(--text-900);color:white;}
.role-option.selected .role-desc{color:rgba(255,255,255,0.55);}
.role-icon{font-size:26px;margin-bottom:var(--s2);}
.role-label{font-family:var(--font-ui);font-size:14px;font-weight:700;}
.role-desc{font-size:11px;color:var(--text-500);margin-top:2px;}

/* ── App Shell ── */
#app{min-height:100vh;background:var(--bg);}
.app-layout{display:flex;min-height:100vh;}

/* ── Sidebar ── */
.sidebar{width:var(--sidebar-w);height:100vh;background:white;border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;left:0;top:0;z-index:200;transform:translateX(-100%);transition:transform var(--t-base) var(--ease);}
.sidebar.open{transform:translateX(0);}
@media(min-width:1024px){.sidebar{transform:translateX(0);box-shadow:none;} .app-main{margin-left:var(--sidebar-w);}}

.sidebar-header{padding:var(--s4) var(--s5);border-bottom:1px solid var(--border);height:var(--topbar-h);display:flex;align-items:center;}
.sidebar-logo-wrap{display:flex;align-items:center;gap:var(--s3);}
.sidebar-logo-mark{width:32px;height:32px;background:var(--text-900);border-radius:8px;display:flex;align-items:center;justify-content:center;font-family:var(--font-ui);font-size:17px;font-weight:800;color:var(--lime);}
.sidebar-logo-name{font-family:var(--font-ui);font-size:18px;font-weight:800;color:var(--text-900);letter-spacing:-0.02em;}

.sidebar-nav{flex:1;overflow-y:auto;padding:var(--s3) var(--s3);}
.nav-section-label{font-family:var(--font-ui);font-size:10px;font-weight:700;color:var(--text-400);text-transform:uppercase;letter-spacing:0.1em;padding:var(--s3) var(--s3) var(--s2);margin-top:var(--s2);}
.nav-item{display:flex;align-items:center;gap:var(--s3);padding:10px var(--s3);border-radius:var(--r-md);font-family:var(--font-ui);font-size:14px;font-weight:500;color:var(--text-500);cursor:pointer;transition:all var(--t-fast);margin-bottom:2px;}
.nav-item:hover{background:var(--bg-hover);color:var(--text-900);}
.nav-item.active{background:var(--text-900);color:white;font-weight:600;}
.nav-item.active .nav-badge{background:var(--lime);color:var(--text-900);}
.nav-icon{width:20px;text-align:center;flex-shrink:0;font-size:16px;}
.nav-badge{margin-left:auto;background:var(--red);color:white;font-size:10px;font-weight:700;font-family:var(--font-ui);padding:2px 6px;border-radius:99px;min-width:18px;text-align:center;}

.sidebar-footer{padding:var(--s3);border-top:1px solid var(--border);}
.sidebar-user{display:flex;align-items:center;gap:var(--s3);padding:var(--s3);border-radius:var(--r-md);cursor:pointer;transition:background var(--t-fast);}
.sidebar-user:hover{background:var(--bg-hover);}
.sidebar-user-name{font-family:var(--font-ui);font-size:14px;font-weight:600;color:var(--text-900);}
.sidebar-user-role{font-size:12px;color:var(--text-500);margin-top:1px;}

/* ── Topbar ── */
.topbar{height:var(--topbar-h);background:white;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:0 var(--s5);position:sticky;top:0;z-index:100;}
.topbar-left{display:flex;align-items:center;gap:var(--s4);}
.topbar-right{display:flex;align-items:center;gap:var(--s2);}
.menu-btn{width:36px;height:36px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer;border-radius:var(--r-md);padding:8px;transition:background var(--t-fast);}
.menu-btn:hover{background:var(--bg-input);}
.menu-btn span{display:block;width:18px;height:2px;background:var(--text-900);border-radius:2px;}
@media(min-width:1024px){.menu-btn{display:none;}}

.topbar-search{display:none;position:relative;}
@media(min-width:640px){.topbar-search{display:block;}}
.topbar-search-input{width:260px;padding:9px 14px 9px 36px;background:var(--bg-input);border:1.5px solid transparent;border-radius:var(--r-full);color:var(--text-900);font-size:14px;font-family:var(--font-body);transition:all var(--t-fast);outline:none;}
.topbar-search-input:focus{border-color:var(--purple);background:white;width:300px;box-shadow:0 0 0 3px rgba(124,58,237,0.1);}
.topbar-search-input::placeholder{color:var(--text-400);}
.topbar-search-icon{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--text-400);font-size:14px;}
.topbar-icon-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-md);color:var(--text-500);cursor:pointer;transition:all var(--t-fast);position:relative;border:none;background:none;font-size:17px;}
.topbar-icon-btn:hover{background:var(--bg-input);color:var(--text-900);}
.notif-dot{position:absolute;top:5px;right:5px;width:8px;height:8px;background:var(--red);border-radius:50%;border:2px solid white;}

/* ── Main Content ── */
.app-main{flex:1;min-height:100vh;display:flex;flex-direction:column;}
.page-wrap{flex:1;padding:var(--s5) var(--s6);padding-bottom:calc(var(--bottom-nav-h)+var(--s4));max-width:1100px;margin:0 auto;width:100%;}
@media(min-width:1024px){.page-wrap{padding-bottom:var(--s6);}}
@media(max-width:640px){.page-wrap{padding:var(--s4) var(--s4);}}
#page-content{animation:slide-up 0.2s var(--ease) both;}

/* ── Overlay ── */
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.35);z-index:199;backdrop-filter:blur(2px);}
.sidebar-overlay.show{display:block;}

/* ── Bottom Nav ── */
.bottom-nav{position:fixed;bottom:0;left:0;right:0;height:var(--bottom-nav-h);background:white;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-around;padding:0 var(--s2) env(safe-area-inset-bottom);z-index:100;}
@media(min-width:1024px){.bottom-nav{display:none;}}
.bn-item{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 10px;cursor:pointer;flex:1;min-width:0;transition:all var(--t-fast);border-radius:var(--r-md);}
.bn-icon{font-size:20px;line-height:1;position:relative;}
.bn-label{font-family:var(--font-ui);font-size:10px;font-weight:600;color:var(--text-400);text-transform:uppercase;letter-spacing:0.02em;}
.bn-item.active .bn-label{color:var(--text-900);}
.bn-dot{display:none;position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);width:4px;height:4px;background:var(--lime-dark);border-radius:50%;}
.bn-item.active .bn-dot{display:block;}

/* ── Page Header ── */
.page-hd{margin-bottom:var(--s6);}
.page-hd-title{font-family:var(--font-ui);font-size:26px;font-weight:800;letter-spacing:-0.02em;}
.page-hd-sub{font-size:14px;color:var(--text-500);margin-top:4px;}

/* ── Feed Layout ── */
.feed-layout{display:grid;grid-template-columns:1fr;gap:var(--s5);max-width:680px;margin:0 auto;width:100%;}

/* ── Stats grid ── */
.stats-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3);}
@media(min-width:640px){.stats-grid{grid-template-columns:repeat(4,1fr);}}
.stat-box{background:white;border-radius:var(--r-lg);padding:var(--s4) var(--s5);box-shadow:var(--shadow-sm);display:flex;align-items:center;gap:var(--s4);}
.stat-box-icon{width:44px;height:44px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;}
.stat-box-val{font-family:var(--font-ui);font-size:22px;font-weight:800;line-height:1;}
.stat-box-lbl{font-size:12px;color:var(--text-500);}
.stat-box-sub{font-size:11px;font-weight:600;margin-top:2px;}
.stat-box-sub.up{color:var(--green);}

/* ── Hero banner (org dashboard) ── */
.hero-banner{background:var(--text-900);border-radius:var(--r-xl);padding:var(--s8) var(--s8);position:relative;overflow:hidden;color:white;}
.hero-banner-bg{position:absolute;right:0;top:0;bottom:0;width:45%;background:linear-gradient(135deg,transparent,rgba(203,255,0,0.15));pointer-events:none;}
.hero-banner-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,0.15);border-radius:var(--r-full);padding:5px 12px;font-family:var(--font-ui);font-size:12px;font-weight:700;color:white;margin-bottom:var(--s3);}
.hero-banner-title{font-family:var(--font-ui);font-size:28px;font-weight:900;line-height:1.15;margin-bottom:var(--s2);letter-spacing:-0.02em;}
.hero-banner-sub{font-size:14px;color:rgba(255,255,255,0.65);margin-bottom:var(--s5);}

/* ── Tournament card (Mis Torneos) ── */
.tournament-card{background:white;border-radius:var(--r-xl);box-shadow:var(--shadow-sm);padding:var(--s5);border:1px solid var(--border);}
.tournament-card-header{display:flex;align-items:flex-start;gap:var(--s3);margin-bottom:var(--s4);}
.tournament-sport-icon{width:44px;height:44px;background:var(--bg-input);border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0;}
.tournament-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s2);padding:var(--s4) 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);margin-bottom:var(--s4);}
.t-stat{text-align:center;}
.t-stat-val{font-family:var(--font-ui);font-size:18px;font-weight:800;display:block;}
.t-stat-lbl{font-size:11px;color:var(--text-500);}
.tournament-actions{display:flex;gap:var(--s3);}
.tournament-actions .btn{flex:1;justify-content:center;}

/* ── Live Control ── */
.live-section-label{font-family:var(--font-ui);font-size:11px;font-weight:800;color:var(--text-400);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:var(--s3);}
.match-control-card{background:white;border-radius:var(--r-xl);border:1.5px solid var(--border);overflow:hidden;margin-bottom:var(--s4);}
.match-control-card.is-live{border-color:rgba(124,58,237,0.3);background:linear-gradient(to bottom,rgba(124,58,237,0.03),white);}
.match-control-card.is-penales{border-color:rgba(124,58,237,0.4);background:linear-gradient(to bottom,rgba(124,58,237,0.05),white);}
.match-control-header{padding:var(--s3) var(--s5);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.match-control-body{padding:var(--s5);}
.match-control-teams{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);margin-bottom:var(--s5);}
.mct-side{text-align:center;flex:1;}
.mct-icon{width:48px;height:48px;border-radius:var(--r-xl);background:var(--bg-input);display:flex;align-items:center;justify-content:center;font-size:26px;margin:0 auto var(--s2);}
.mct-name{font-family:var(--font-ui);font-size:14px;font-weight:700;}
.mct-score-center{text-align:center;}
.mct-score{font-family:var(--font-ui);font-size:52px;font-weight:900;letter-spacing:-0.04em;line-height:1;}
.mct-minute{font-family:var(--font-ui);font-size:13px;font-weight:600;color:var(--purple);background:var(--lime);padding:3px 10px;border-radius:var(--r-full);display:inline-block;margin-top:var(--s2);}
.mct-minute.green{background:var(--lime);}
.match-control-btns{display:flex;flex-wrap:wrap;gap:var(--s2);justify-content:center;padding:var(--s4) var(--s5);border-top:1px solid var(--border);}

/* Penalties inline panel */
.pen-inline{background:rgba(124,58,237,0.04);border-top:1px solid rgba(124,58,237,0.15);padding:var(--s4) var(--s5);}
.pen-inline-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s3);}
.pen-inline-title{font-family:var(--font-ui);font-size:14px;font-weight:700;color:var(--purple);}
.pen-inline-score{font-family:var(--font-ui);font-size:28px;font-weight:900;color:var(--purple);letter-spacing:-0.02em;}
.pen-teams-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);}
.pen-team-col{display:flex;flex-direction:column;gap:var(--s2);}
.pen-team-hd{font-family:var(--font-ui);font-size:11px;font-weight:700;color:var(--text-400);text-transform:uppercase;letter-spacing:0.06em;text-align:center;margin-bottom:var(--s1);}
.pen-kick{display:flex;align-items:center;gap:var(--s2);padding:7px 10px;background:white;border-radius:var(--r-md);border:1px solid var(--border);}
.pen-kick-player{flex:1;font-family:var(--font-ui);font-size:12px;font-weight:600;color:var(--text-700);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pen-kick-result{font-size:16px;}
.pen-kick-result.goal{color:var(--green);}
.pen-kick-result.miss{color:var(--red);}
.pen-kick-result.pending{color:var(--text-300);}
.pen-kick-btn{width:26px;height:26px;border-radius:var(--r-sm);border:none;cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center;transition:all var(--t-fast);}
.pen-kick-btn.goal{background:#D1FAE5;color:var(--green);}
.pen-kick-btn.goal:hover{background:var(--green);color:white;}
.pen-kick-btn.miss{background:#FEE2E2;color:var(--red);}
.pen-kick-btn.miss:hover{background:var(--red);color:white;}
.pen-winner-bar{margin-top:var(--s3);padding:var(--s3) var(--s4);background:var(--lime-soft);border-radius:var(--r-md);text-align:center;font-family:var(--font-ui);font-size:14px;font-weight:700;color:#3A5000;}

/* Next/finished match cards */
.match-simple-card{background:white;border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;margin-bottom:var(--s3);}
.match-simple-header{padding:var(--s3) var(--s5);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.match-simple-htime{font-family:var(--font-ui);font-size:12px;color:var(--text-500);display:flex;align-items:center;gap:6px;}
.match-simple-body{padding:var(--s4) var(--s5);}
.match-simple-teams{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);}
.ms-team{display:flex;flex-direction:column;align-items:center;gap:var(--s2);flex:1;}
.ms-team-icon{width:44px;height:44px;border-radius:var(--r-xl);background:var(--bg-input);display:flex;align-items:center;justify-content:center;font-size:24px;}
.ms-team-name{font-family:var(--font-ui);font-size:13px;font-weight:700;text-align:center;}
.ms-score{font-family:var(--font-ui);font-size:40px;font-weight:900;letter-spacing:-0.04em;line-height:1;text-align:center;}
.ms-score-sep{font-size:28px;color:var(--text-300);margin:0 6px;}
.ms-score-small{font-size:28px;}
.match-simple-actions{display:flex;gap:var(--s3);padding:var(--s3) var(--s5);border-top:1px solid var(--border);}

/* Event items */
.event-item{display:flex;align-items:center;gap:var(--s3);padding:var(--s2) 0;}
.event-icon{font-size:16px;width:22px;text-align:center;}
.event-name{font-size:14px;font-weight:600;color:var(--text-900);}
.event-min{font-size:13px;color:var(--text-400);margin-left:auto;}

/* ── Championship management (Gestionar tabs) ── */
.champ-manage-header{background:white;border-radius:var(--r-xl);box-shadow:var(--shadow-sm);overflow:hidden;margin-bottom:var(--s5);}
.champ-manage-title-bar{display:flex;align-items:center;justify-content:space-between;padding:var(--s5) var(--s6);}
.champ-tab-bar{display:flex;border-top:1px solid var(--border);overflow-x:auto;scrollbar-width:none;}
.champ-tab-bar::-webkit-scrollbar{display:none;}
.champ-tab{flex-shrink:0;padding:12px 20px;font-family:var(--font-ui);font-size:13px;font-weight:600;color:var(--text-500);cursor:pointer;transition:all var(--t-fast);border-bottom:2px solid transparent;display:flex;align-items:center;gap:6px;}
.champ-tab:hover{color:var(--text-900);}
.champ-tab.active{color:var(--text-900);border-bottom-color:var(--text-900);}

/* Fixture cards */
.fixture-jornada{margin-bottom:var(--s5);}
.fixture-jornada-label{font-family:var(--font-ui);font-size:11px;font-weight:800;color:var(--text-400);text-transform:uppercase;letter-spacing:0.1em;margin-bottom:var(--s3);}
.fixture-match-row{background:white;border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;margin-bottom:var(--s3);}
.fmr-header{padding:var(--s3) var(--s5);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.fmr-time{font-family:var(--font-ui);font-size:12px;color:var(--text-500);display:flex;align-items:center;gap:6px;}
.fmr-body{padding:var(--s4) var(--s5);display:flex;align-items:center;justify-content:space-between;gap:var(--s4);}
.fmr-team{display:flex;flex-direction:column;align-items:center;gap:var(--s2);flex:1;}
.fmr-team-icon{width:40px;height:40px;border-radius:var(--r-lg);background:var(--bg-input);display:flex;align-items:center;justify-content:center;font-size:22px;}
.fmr-team-name{font-family:var(--font-ui);font-size:13px;font-weight:700;text-align:center;}
.fmr-team-name.winner{color:var(--text-900);}
.fmr-score-box{text-align:center;min-width:120px;}
.fmr-score{font-family:var(--font-ui);font-size:36px;font-weight:900;letter-spacing:-0.04em;line-height:1;}
.fmr-score-label{font-size:11px;font-family:var(--font-ui);font-weight:600;margin-top:3px;}
.fmr-score-pen{font-size:13px;color:var(--purple);font-family:var(--font-ui);font-weight:700;margin-top:2px;}
.fmr-score-wo{font-size:12px;color:var(--orange);font-family:var(--font-ui);font-weight:700;margin-top:2px;}
.fmr-footer{padding:var(--s2) var(--s5);border-top:1px solid var(--border);display:flex;align-items:center;justify-content:center;gap:var(--s2);}

/* Team inscription cards */
.team-inscription-card{background:white;border:1.5px solid var(--border);border-radius:var(--r-xl);padding:var(--s4) var(--s5);margin-bottom:var(--s3);display:inline-flex;flex-direction:column;vertical-align:top;width:calc(33.33% - 12px);min-width:220px;}
.team-inscription-cards-wrap{display:flex;flex-wrap:wrap;gap:var(--s3);}
@media(max-width:900px){.team-inscription-card{width:calc(50% - 8px);}}
@media(max-width:580px){.team-inscription-card{width:100%;}}
.tic-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s3);}
.tic-name{font-family:var(--font-ui);font-size:14px;font-weight:700;}
.tic-code{background:var(--lime);color:#3A5000;font-family:var(--font-ui);font-size:10px;font-weight:800;padding:3px 8px;border-radius:var(--r-full);}
.tic-player-row{display:flex;align-items:center;justify-content:space-between;padding:5px 0;border-bottom:1px solid var(--border);}
.tic-player-row:last-child{border-bottom:none;}
.tic-player-num{font-family:var(--font-ui);font-size:12px;font-weight:700;color:var(--text-400);min-width:20px;}
.tic-player-name{font-size:13px;font-weight:500;flex:1;padding:0 var(--s2);}
.tic-player-pos{font-size:11px;color:var(--text-500);font-family:var(--font-ui);}

/* Standings table */
.standings-wrap{overflow-x:auto;}
.standings-tbl{width:100%;border-collapse:collapse;min-width:480px;}
.standings-tbl th{font-family:var(--font-ui);font-size:11px;font-weight:700;color:var(--text-400);text-transform:uppercase;letter-spacing:0.06em;padding:8px var(--s3);text-align:center;border-bottom:1px solid var(--border);}
.standings-tbl th:nth-child(2){text-align:left;}
.standings-tbl td{padding:10px var(--s3);font-size:14px;text-align:center;border-bottom:1px solid var(--border);transition:background var(--t-fast);}
.standings-tbl td:nth-child(2){text-align:left;}
.standings-tbl tr:hover td{background:var(--bg-hover);}
.standings-tbl tr:last-child td{border-bottom:none;}
.s-pos{font-family:var(--font-ui);font-weight:700;color:var(--text-400);}
.s-pos.q1{color:var(--green);}
.s-pts{font-family:var(--font-ui);font-weight:800;font-size:15px;color:var(--text-900);}
.team-row-cell{display:flex;align-items:center;gap:var(--s3);}
.t-logo{width:28px;height:28px;border-radius:8px;background:var(--bg-input);display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;}
.t-name{font-family:var(--font-ui);font-size:14px;font-weight:600;}
.form-chip{width:18px;height:18px;border-radius:4px;font-family:var(--font-ui);font-size:10px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;}
.form-chip.W{background:#D1FAE5;color:#065F46;}
.form-chip.D{background:var(--bg-input);color:var(--text-500);}
.form-chip.L{background:#FEE2E2;color:var(--red);}

/* Scorers */
.scorer-row{display:flex;align-items:center;gap:var(--s4);padding:var(--s3) var(--s4);border-radius:var(--r-lg);transition:background var(--t-fast);cursor:pointer;}
.scorer-row:hover{background:var(--bg-hover);}
.scorer-rank{font-family:var(--font-ui);font-size:18px;font-weight:800;color:var(--text-400);min-width:26px;}
.scorer-rank.top{color:var(--text-900);}
.scorer-goals-num{font-family:var(--font-ui);font-size:24px;font-weight:900;color:var(--text-900);line-height:1;}
.scorer-goals-lbl{font-size:10px;color:var(--text-400);font-family:var(--font-ui);text-align:right;}

/* Post card */
.post-card{background:white;border-radius:var(--r-xl);box-shadow:var(--shadow-sm);overflow:hidden;transition:box-shadow var(--t-base);}
.post-card:hover{box-shadow:var(--shadow-md);}
.post-header{display:flex;align-items:center;gap:var(--s3);padding:var(--s4) var(--s5);}
.post-user-name{font-family:var(--font-ui);font-size:14px;font-weight:700;display:flex;align-items:center;gap:var(--s2);}
.post-meta{font-size:12px;color:var(--text-400);}
.post-more{margin-left:auto;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:var(--r-full);cursor:pointer;color:var(--text-400);transition:background var(--t-fast);}
.post-more:hover{background:var(--bg-input);}
.post-body{padding:0 var(--s5) var(--s4);font-size:15px;line-height:1.6;color:var(--text-700);}
.post-tag{color:var(--blue);font-weight:600;}
.post-actions{display:flex;align-items:center;padding:var(--s2) var(--s4);border-top:1px solid var(--border);}
.pa-btn{display:flex;align-items:center;gap:6px;padding:7px 12px;border-radius:var(--r-full);font-family:var(--font-ui);font-size:13px;font-weight:600;color:var(--text-500);cursor:pointer;transition:all var(--t-fast);border:none;background:none;}
.pa-btn:hover{background:var(--bg-input);color:var(--text-900);}
.pa-btn.liked{color:var(--red);}
.pa-btn.liked:hover{background:#FEE2E2;}
.verified{width:14px;height:14px;background:var(--blue);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:9px;color:white;}
.score-chip{margin:0 var(--s5) var(--s4);background:var(--bg-input);border-radius:var(--r-lg);padding:var(--s3) var(--s4);display:flex;align-items:center;gap:var(--s4);}

/* WO option */
.wo-option{border:2px solid var(--border);border-radius:var(--r-lg);padding:var(--s4);cursor:pointer;margin-bottom:var(--s3);transition:all var(--t-base);display:flex;gap:var(--s3);align-items:flex-start;}
.wo-option:hover{border-color:var(--border-md);}
.wo-option.selected{border-color:var(--text-900);background:var(--text-900);color:white;}
.wo-option.selected .wo-desc{color:rgba(255,255,255,0.55);}
.wo-title{font-family:var(--font-ui);font-size:14px;font-weight:700;}
.wo-desc{font-size:12px;color:var(--text-500);margin-top:2px;}

/* ── Champ list card ── */
.champ-list-card{background:white;border:1.5px solid var(--border);border-radius:var(--r-xl);padding:var(--s4) var(--s5);margin-bottom:var(--s3);display:flex;align-items:center;gap:var(--s4);transition:all var(--t-base);cursor:pointer;}
.champ-list-card:hover{box-shadow:var(--shadow-md);border-color:var(--border-md);}

/* Misc */
.mobile-only{display:block;}
.desktop-only{display:none;}
@media(min-width:1024px){.mobile-only{display:none;} .desktop-only{display:block;}}
