@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800;900&family=Barlow:wght@400;500;600&display=swap');
:root {
  --verde:#00A651;--amarelo:#FFD700;--azul:#003087;
  --fundo:#0a0e1a;--fundo2:#111827;--card:#1a2235;
  --borda:#2a3550;--texto:#e8edf5;--texto2:#8a9bbf;--live:#ff3b3b;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Barlow',sans-serif;background:var(--fundo);color:var(--texto);min-height:100vh;overflow-x:hidden}
/* HEADER */
header{background:linear-gradient(135deg,#0a0e1a,#0d1a3a,#0a1628);border-bottom:3px solid var(--amarelo);padding:0 24px;position:sticky;top:0;z-index:100;box-shadow:0 4px 30px rgba(0,0,0,.5)}
.header-inner{max-width:1400px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo-icon{font-size:28px;filter:drop-shadow(0 0 8px var(--amarelo))}
.logo-text{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:22px;letter-spacing:1px;color:#fff;line-height:1}
.logo-text span{color:var(--amarelo)}
nav{display:flex;gap:4px}
.nav-btn{background:none;border:none;color:var(--texto2);font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:15px;letter-spacing:.5px;padding:8px 16px;border-radius:6px;cursor:pointer;transition:all .2s;text-transform:uppercase}
.nav-btn:hover{color:#fff;background:rgba(255,255,255,.07)}
.nav-btn.active{color:var(--amarelo);background:rgba(255,215,0,.1);border-bottom:2px solid var(--amarelo)}
.header-right{display:flex;align-items:center;gap:10px}
.btn-entrar{background:linear-gradient(135deg,var(--verde),#007a3d);border:none;color:#fff;font-family:'Barlow',sans-serif;font-weight:600;font-size:13px;padding:8px 18px;border-radius:6px;cursor:pointer;transition:all .2s}
.btn-entrar:hover{transform:translateY(-1px);box-shadow:0 4px 15px rgba(0,166,81,.4)}
.user-pill{display:none;align-items:center;gap:8px;background:rgba(255,215,0,.08);border:1px solid rgba(255,215,0,.25);padding:6px 14px 6px 8px;border-radius:20px}
.user-avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--verde),var(--azul));display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;overflow:hidden}
.user-name{font-size:13px;font-weight:600;color:var(--amarelo)}
.btn-logout{background:none;border:none;color:var(--texto2);cursor:pointer;font-size:14px;margin-left:4px}
/* MAIN */
main{max-width:1400px;margin:0 auto;padding:24px}
.tab-content{display:none}
.tab-content.active{display:block}
/* HERO */
.hero{background:linear-gradient(135deg,#001a5e,#003087 40%,#004a1a);border-radius:16px;padding:32px;margin-bottom:24px;position:relative;overflow:hidden;border:1px solid rgba(255,215,0,.2)}
.hero::before{content:'⚽';position:absolute;right:-20px;top:-20px;font-size:180px;opacity:.05;transform:rotate(-20deg)}
.hero-tag{display:inline-block;background:var(--amarelo);color:#000;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:11px;letter-spacing:2px;text-transform:uppercase;padding:3px 10px;border-radius:4px;margin-bottom:10px}
.hero h1{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:42px;line-height:1;margin-bottom:8px}
.hero h1 span{color:var(--amarelo)}
.hero-sub{color:rgba(255,255,255,.7);font-size:15px;margin-bottom:20px}
.hero-stats{display:flex;gap:24px;flex-wrap:wrap}
.stat-num{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:28px;color:var(--amarelo);line-height:1}
.stat-label{font-size:11px;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.5px}
/* COUNTDOWN */
.countdown-bar{display:flex;gap:12px;background:var(--card);border:1px solid var(--borda);border-radius:10px;padding:12px 16px;margin-bottom:20px;align-items:center;flex-wrap:wrap}
.countdown-label{font-size:12px;color:var(--texto2);text-transform:uppercase;letter-spacing:.5px}
.countdown-units{display:flex;gap:8px}
.count-unit{text-align:center}
.count-num{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:24px;color:var(--amarelo);display:block;line-height:1;background:rgba(255,215,0,.08);padding:4px 10px;border-radius:6px;min-width:44px}
.count-lbl{font-size:9px;color:var(--texto2);text-transform:uppercase;letter-spacing:.5px;margin-top:3px}
.next-info{margin-left:auto;font-size:13px;color:var(--texto2)}
.next-info strong{color:var(--verde)}
/* FILTERS */
.filters{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap;align-items:center}
.filter-btn{background:var(--card);border:1.5px solid var(--borda);color:var(--texto2);font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:13px;padding:7px 14px;border-radius:6px;cursor:pointer;transition:all .2s;text-transform:uppercase;letter-spacing:.5px}
.filter-btn:hover{border-color:var(--verde);color:var(--verde)}
.filter-btn.active{background:var(--verde);border-color:var(--verde);color:#fff}
.filter-btn.brasil.active{background:#009c3b;border-color:#009c3b}
.search-box{margin-left:auto;position:relative}
.search-box input{background:var(--card);border:1.5px solid var(--borda);color:var(--texto);font-family:'Barlow',sans-serif;font-size:13px;padding:7px 14px 7px 36px;border-radius:6px;outline:none;width:200px;transition:border-color .2s}
.search-box input:focus{border-color:var(--verde)}
.search-box input::placeholder{color:var(--texto2)}
.search-box::before{content:'🔍';position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:13px}
/* DAY GROUP */
.day-group{margin-bottom:28px}
.day-header{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.day-badge{background:linear-gradient(135deg,var(--azul),#0052cc);color:#fff;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:14px;padding:4px 12px;border-radius:6px;text-transform:uppercase;white-space:nowrap}
.day-line{flex:1;height:1px;background:var(--borda)}
/* MATCH CARD */
.matches-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:12px}
.match-card{background:var(--card);border:1.5px solid var(--borda);border-radius:12px;padding:16px;transition:all .2s;position:relative;overflow:hidden}
.match-card:hover{border-color:var(--verde);transform:translateY(-2px);box-shadow:0 8px 30px rgba(0,0,0,.3)}
.match-card.brasil-game{border-color:rgba(0,156,59,.5);background:linear-gradient(135deg,#1a2235,#0d2218)}
.match-card.live-game{border-color:var(--live);animation:pulseBorder 2s infinite}
@keyframes pulseBorder{0%,100%{border-color:var(--live)}50%{border-color:#ff8888}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.4}}
.match-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.match-group-tag{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--texto2);background:rgba(255,255,255,.06);padding:2px 8px;border-radius:4px}
.match-time-display{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:20px;color:var(--amarelo)}
.live-pill{background:var(--live);color:#fff;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:10px;padding:2px 7px;border-radius:4px;letter-spacing:1px;animation:blink 1.5s infinite}
.finished-pill{background:#2a3550;color:var(--texto2);font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:10px;padding:2px 7px;border-radius:4px;letter-spacing:1px}
.match-teams{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
.team{display:flex;flex-direction:column;align-items:center;gap:4px;flex:1}
.team-flag-img{width:44px;height:30px;object-fit:cover;border-radius:3px;box-shadow:0 2px 6px rgba(0,0,0,.4);display:block}
.team-flag-emoji{font-size:34px;line-height:1}
.team-name{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px;text-align:center;text-transform:uppercase;letter-spacing:.5px}
.team-tla{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:11px;color:var(--texto2);letter-spacing:1px}
.score-center{display:flex;flex-direction:column;align-items:center;flex-shrink:0;gap:2px}
.score-nums{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:30px;color:var(--amarelo);letter-spacing:4px;line-height:1}
.vs-txt{font-family:'Barlow Condensed',sans-serif;font-weight:900;font-size:18px;color:var(--borda)}
.score-minute{font-size:11px;color:var(--live);font-weight:700;margin-top:2px}
.match-footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px}
.match-venue{font-size:11px;color:var(--texto2)}
.channels{display:flex;gap:5px;align-items:center}
.ch-tag{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:11px;padding:3px 8px;border-radius:4px;text-decoration:none;transition:all .2s;text-transform:uppercase;letter-spacing:.5px}
.ch-tag:hover{transform:translateY(-1px);opacity:.85}
.ch-globo{background:rgba(230,57,70,.2);color:#ff6b74;border:1px solid rgba(230,57,70,.4)}
.ch-sbt{background:rgba(0,87,183,.2);color:#5fa8ff;border:1px solid rgba(0,87,183,.4)}
.ch-caze{background:rgba(124,58,237,.2);color:#a78bfa;border:1px solid rgba(124,58,237,.4)}
.ch-sportv{background:rgba(0,180,100,.2);color:#00e676;border:1px solid rgba(0,180,100,.4)}
.notify-btn{background:none;border:none;cursor:pointer;font-size:16px;opacity:.5;transition:all .2s;padding:2px}
.notify-btn:hover,.notify-btn.active{opacity:1;transform:scale(1.2)}
.notify-btn.active{filter:drop-shadow(0 0 4px var(--amarelo))}
.live-update-bar{display:flex;align-items:center;gap:8px;background:rgba(255,59,59,.08);border:1px solid rgba(255,59,59,.25);border-radius:8px;padding:8px 14px;margin-bottom:16px;font-size:13px}
.live-dot{width:8px;height:8px;border-radius:50%;background:var(--live);animation:blink 1s infinite}
/* SECTION TITLE */
.section-title{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:24px;margin-bottom:16px;display:flex;align-items:center;gap:10px}
.section-title::after{content:'';flex:1;height:1px;background:var(--borda)}
/* STANDINGS */
.group-standings{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px}
.group-card{background:var(--card);border:1.5px solid var(--borda);border-radius:12px;overflow:hidden}
.group-title-bar{background:linear-gradient(135deg,var(--azul),#0052cc);padding:12px 16px;font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:16px;letter-spacing:1px;text-transform:uppercase}
.standings-table{width:100%;border-collapse:collapse}
.standings-table th{padding:8px 10px;text-align:center;font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--texto2);border-bottom:1px solid var(--borda)}
.standings-table th:first-child{text-align:left}
.standings-table td{padding:10px;text-align:center;font-size:13px;border-bottom:1px solid rgba(42,53,80,.5)}
.standings-table td:first-child{text-align:left}
.standings-table tr:last-child td{border-bottom:none}
.standings-table tr:hover td{background:rgba(255,255,255,.03)}
.tc{display:flex;align-items:center;gap:8px}
.tn{font-family:'Barlow Condensed',sans-serif;font-weight:600;font-size:14px;text-transform:uppercase}
.pts-cell{font-weight:700;color:var(--amarelo)}
.q1{border-left:3px solid var(--verde)}
.q2{border-left:3px solid #4a90d9}
.q3-top{border-left:3px solid var(--amarelo)}
.q3-out{opacity:.6}
/* THIRDS */
.thirds-card{background:var(--card);border:1.5px solid var(--borda);border-radius:12px;overflow:hidden;margin-top:8px}
.thirds-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;padding:12px 16px;border-bottom:1px solid var(--borda);font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:15px;letter-spacing:.5px}
.thirds-note{font-size:11px;font-weight:400;color:var(--texto2);font-family:'Barlow',sans-serif;letter-spacing:0}
.thirds-legend{display:flex;gap:20px;padding:10px 16px;border-top:1px solid var(--borda);font-size:11px}
.thirds-leg-item.advances{color:var(--verde)}
.thirds-leg-item.out{color:var(--texto2)}
/* ═══════════════════════════════════════════
   BRACKET — layout horizontal de pirâmide
   ═══════════════════════════════════════════ */
.bracket-wrap{overflow-x:auto;padding-bottom:20px}
.bracket-info{background:linear-gradient(135deg,rgba(255,215,0,.08),rgba(0,48,135,.1));border:1px solid rgba(255,215,0,.2);border-radius:10px;padding:12px 16px;margin-bottom:20px;font-size:13px;color:var(--texto2)}
.bracket-info strong{color:var(--amarelo)}
/* tabela de fases — cada coluna é uma fase */
.bk{display:flex;align-items:flex-start;gap:0;min-width:1280px}
/* coluna de jogos */
.bk-col{display:flex;flex-direction:column;flex-shrink:0}
.bk-col-r32{width:170px}
.bk-col-o{width:130px}
.bk-col-q{width:110px}
.bk-col-s{width:90px}
.bk-col-center{width:150px;display:flex;flex-direction:column;align-items:stretch}
/* fio conector entre fases */
.bk-wire{width:14px;flex-shrink:0;align-self:stretch;display:flex;flex-direction:column;justify-content:space-around}
.bk-wire div{height:1px;background:var(--borda);width:100%}
/* cabeçalho da fase */
.bk-phase-lbl{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:11px;text-transform:uppercase;letter-spacing:.8px;color:var(--texto2);text-align:center;padding:4px 4px 8px;border-bottom:1px solid var(--borda);margin-bottom:6px}
.bk-side-lbl{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.8px;color:#5fa8ff;text-align:center;padding:3px 6px;margin-bottom:4px;background:rgba(0,87,183,.12);border-radius:4px;margin:0 4px 6px}
/* card de jogo individual */
.bk-match{background:var(--card);border:1.5px solid var(--borda);border-radius:8px;overflow:hidden;margin:2px 4px;flex-shrink:0}
.bk-match.final{border-color:var(--amarelo)}
.bk-match.terceiro{border-color:rgba(200,140,0,.4)}
.bk-match-date{font-size:9px;color:var(--texto2);text-align:center;padding:2px 6px;background:rgba(0,0,0,.25);letter-spacing:.3px}
.bk-team{padding:6px 8px;display:flex;align-items:center;font-family:'Barlow Condensed',sans-serif;font-weight:500;font-size:12px;text-transform:uppercase;border-bottom:.5px solid var(--borda);color:var(--texto2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-team:last-child{border-bottom:none}
/* campeão */
.bk-champion{background:rgba(255,215,0,.07);border:1.5px solid var(--amarelo);border-radius:10px;padding:12px 8px;text-align:center;margin:4px}
.bk-champion-icon{font-size:26px;margin-bottom:4px}
.bk-champion-lbl{font-size:9px;text-transform:uppercase;letter-spacing:1px;color:var(--amarelo);margin-bottom:2px}
.bk-champion-name{font-size:12px;color:var(--texto2)}
/* CHANNELS */
.channels-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;margin-bottom:28px}
.channel-card{border-radius:12px;padding:20px;text-decoration:none;transition:all .2s;display:block;border:1.5px solid transparent}
.channel-card:hover{transform:translateY(-3px);box-shadow:0 8px 30px rgba(0,0,0,.3)}
.cg{background:linear-gradient(135deg,rgba(230,57,70,.15),rgba(180,20,30,.08));border-color:rgba(230,57,70,.3)}
.cs{background:linear-gradient(135deg,rgba(0,87,183,.15),rgba(0,50,130,.08));border-color:rgba(0,87,183,.3)}
.cc{background:linear-gradient(135deg,rgba(124,58,237,.15),rgba(90,20,200,.08));border-color:rgba(124,58,237,.3)}
.cv{background:linear-gradient(135deg,rgba(0,180,130,.12),rgba(0,120,90,.06));border-color:rgba(0,180,130,.25)}
.ch-icon{font-size:32px;margin-bottom:10px}
.ch-name{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:20px;margin-bottom:4px}
.ch-desc{font-size:12px;color:var(--texto2);margin-bottom:12px}
.ch-link{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}
.cg .ch-name,.cg .ch-link{color:#ff6b74}
.cs .ch-name,.cs .ch-link{color:#5fa8ff}
.cc .ch-name,.cc .ch-link{color:#a78bfa}
.cv .ch-name,.cv .ch-link{color:#4fd1b5}
/* NOTIF */
.notif-list{display:flex;flex-direction:column;gap:12px}
.notif-card{background:var(--card);border:1.5px solid var(--borda);border-radius:10px;padding:14px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.notif-info{flex:1}
.notif-match{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:16px}
.notif-detail{font-size:12px;color:var(--texto2);margin-top:2px}
.remove-btn{background:none;border:none;color:var(--texto2);cursor:pointer;font-size:16px;transition:color .2s}
.remove-btn:hover{color:#ff6b6b}
/* MODAL */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:1000;backdrop-filter:blur(5px);align-items:center;justify-content:center}
.modal-overlay.open{display:flex}
.modal{background:var(--fundo2);border:1.5px solid var(--borda);border-radius:16px;padding:32px;max-width:460px;width:92%;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.6);max-height:90vh;overflow-y:auto}
.modal-close{position:absolute;top:16px;right:16px;background:none;border:none;color:var(--texto2);font-size:22px;cursor:pointer;line-height:1}
.modal-close:hover{color:#fff}
.modal h2{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:26px;margin-bottom:4px}
.modal-sub{color:var(--texto2);font-size:13px;margin-bottom:22px}
.social-grid{display:grid;grid-template-columns:1fr;gap:8px;margin-bottom:16px}
.social-btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;border-radius:8px;border:1.5px solid var(--borda);background:var(--card);color:var(--texto);font-family:'Barlow',sans-serif;font-weight:600;font-size:13px;cursor:pointer;transition:all .2s}
.social-btn:hover{border-color:var(--texto2);background:rgba(255,255,255,.06)}
.divider{display:flex;align-items:center;gap:10px;margin:16px 0;color:var(--texto2);font-size:12px}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--borda)}
.auth-tabs{display:flex;background:rgba(255,255,255,.05);border-radius:8px;padding:3px;margin-bottom:22px}
.auth-tab{flex:1;text-align:center;padding:8px;border-radius:6px;cursor:pointer;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.5px;color:var(--texto2);transition:all .2s;border:none;background:none}
.auth-tab.active{background:var(--azul);color:#fff}
.form-group{margin-bottom:14px}
.form-group label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--texto2);margin-bottom:5px}
.form-group input{width:100%;background:var(--card);border:1.5px solid var(--borda);color:var(--texto);font-family:'Barlow',sans-serif;font-size:14px;padding:10px 14px;border-radius:8px;outline:none;transition:border-color .2s}
.form-group input:focus{border-color:var(--verde)}
.form-group input::placeholder{color:var(--texto2)}
.btn-primary{width:100%;background:linear-gradient(135deg,var(--verde),#007a3d);border:none;color:#fff;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:16px;padding:12px;border-radius:8px;cursor:pointer;transition:all .2s;letter-spacing:.5px;display:block}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 4px 20px rgba(0,166,81,.4)}
.btn-secondary{width:100%;background:none;border:1.5px solid var(--borda);color:var(--texto2);font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:16px;padding:12px;border-radius:8px;cursor:pointer;transition:all .2s;margin-top:8px;letter-spacing:.5px;display:block}
.btn-secondary:hover{border-color:var(--amarelo);color:var(--amarelo)}
.empty-state{text-align:center;padding:48px 24px;color:var(--texto2)}
.empty-icon{font-size:48px;margin-bottom:12px}
.empty-title{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:20px;color:var(--texto);margin-bottom:6px}
.toast{position:fixed;bottom:24px;right:24px;background:var(--card);border:1.5px solid var(--verde);border-radius:10px;padding:12px 20px;font-size:14px;z-index:2000;transform:translateY(80px);opacity:0;transition:all .3s;max-width:320px}
.toast.show{transform:translateY(0);opacity:1}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVIDADE — TABLET E CELULAR
   ═══════════════════════════════════════════════════════════════ */

/* Tablet */
@media (max-width: 900px) {
  .hero h1 { font-size: 32px; }
  .hero-stats { gap: 16px; }
  .header-right .btn-entrar { font-size: 12px; padding: 7px 12px; }
}

/* ─── NAV VIRA SCROLL HORIZONTAL NO CELULAR ─────────────────── */
@media (max-width: 820px) {
  header { padding: 0 12px; }
  .header-inner {
    height: auto;
    min-height: 56px;
    flex-wrap: wrap;
    padding: 8px 0;
    gap: 8px;
  }
  .logo { order: 1; }
  .header-right { order: 2; margin-left: auto; }
  /* nav vai para baixo, ocupando linha inteira, com scroll lateral */
  nav {
    order: 3;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    gap: 2px;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  nav::-webkit-scrollbar { display: none; }
  /* dica visual de que o menu rola para o lado */
  nav {
    -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent);
    mask-image: linear-gradient(90deg, #000 90%, transparent);
  }
  .nav-btn {
    flex-shrink: 0;
    font-size: 13px;
    padding: 7px 12px;
    white-space: nowrap;
  }
  /* o "Apoiar" do menu vira botão flutuante no celular */
  .nav-btn.nav-apoiar { display: none; }
}

/* ─── CELULAR ───────────────────────────────────────────────── */
@media (max-width: 640px) {
  main { padding: 14px; }

  /* Hero compacto */
  .hero { padding: 20px 16px; }
  .hero h1 { font-size: 26px; }
  .hero-sub { font-size: 13px; margin-bottom: 16px; }
  .hero-tag { font-size: 10px; }
  /* Estatísticas em 4 colunas iguais — não quebram de forma desalinhada */
  .hero-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .hero-stats > div { text-align: center; }
  .stat-num { font-size: 21px; }
  .stat-label { font-size: 9px; letter-spacing: .3px; }

  /* Countdown empilha */
  .countdown-bar { gap: 10px; padding: 10px 12px; }
  .next-info { margin-left: 0; width: 100%; font-size: 12px; order: 3; }

  /* Filtros viram scroll horizontal — não somem mais */
  .filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 6px;
    padding-bottom: 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .filters::-webkit-scrollbar { display: none; }
  .filter-btn { flex-shrink: 0; font-size: 11px; padding: 6px 10px; }

  /* Busca volta a aparecer, em linha separada e largura total */
  .search-box {
    margin-left: 0;
    order: 99;
    width: 100%;
    flex-shrink: 0;
  }
  .search-box input { width: 100%; }

  /* Jogos: 1 coluna */
  .matches-grid { grid-template-columns: 1fr; }

  /* Tabela de grupos: 1 coluna, agora aparece */
  .group-standings { grid-template-columns: 1fr; }

  /* Títulos de seção menores */
  .section-title { font-size: 20px; }

  /* Canais: 1 coluna */
  .channels-grid { grid-template-columns: 1fr; }

  /* Modais: login social 1 coluna */
  .social-grid { grid-template-columns: 1fr; }
  .modal { padding: 24px 20px; }

  /* Tabelas de classificação com fonte um pouco menor para caber */
  .standings-table th, .standings-table td { padding: 8px 6px; font-size: 12px; }
  .tn { font-size: 13px; }
  .team-flag-img { width: 40px; height: 27px; }
}

/* ─── BRACKET NO CELULAR — scroll horizontal com dica ───────── */
@media (max-width: 900px) {
  .bracket-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* sombra/gradiente nas bordas para indicar que há scroll */
    position: relative;
  }
  .bracket-wrap::after {
    content: '→ deslize para ver todo o chaveamento';
    display: block;
    text-align: center;
    font-size: 11px;
    color: var(--texto2);
    padding: 8px 0 0;
    font-family: 'Barlow', sans-serif;
  }
  /* o #bracketContainer mantém min-width, então o scroll funciona */
}

/* Garante que o bracket nunca seja escondido em telas pequenas */
@media (max-width: 640px) {
  #bracketContainer { min-width: 1180px; }
  .bracket-info { font-size: 12px; padding: 10px 12px; }
}

/* ═══ AÇÕES NO CARD (calendário + sino) ═══════════════════════ */
.card-actions { display: flex; align-items: center; gap: 4px; }
.cal-btn {
  background: none; border: none; cursor: pointer; font-size: 15px;
  opacity: .5; transition: all .2s; padding: 2px;
}
.cal-btn:hover { opacity: 1; transform: scale(1.2); }

/* ═══ ESTATÍSTICAS NA ABA ALERTAS ═════════════════════════════ */
.notif-stat {
  background: var(--card); border: 1.5px solid var(--borda);
  border-radius: 10px; padding: 12px 20px; text-align: center;
  flex: 1; min-width: 100px;
}
.notif-stat-num {
  display: block; font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800; font-size: 28px; color: var(--amarelo); line-height: 1;
}
.notif-stat-lbl {
  font-size: 11px; color: var(--texto2); text-transform: uppercase; letter-spacing: .5px;
}

/* ═══ INDICADOR DE HORÁRIO ALTERADO ═══════════════════════════ */
.time-changed {
  font-size: 11px;
  margin-left: 4px;
  vertical-align: middle;
  animation: pulse-clock 2s infinite;
  cursor: help;
}
@keyframes pulse-clock { 0%,100%{opacity:1} 50%{opacity:.4} }

/* ═══ LOCAL + ESTÁDIO ═════════════════════════════════════════ */
.match-location { display: flex; flex-direction: column; gap: 2px; }
.match-stadium {
  font-size: 11px;
  color: var(--amarelo);
  opacity: .85;
  font-weight: 600;
}

/* ═══ PLACAR NO BRACKET ═══════════════════════════════════════ */
.bk-score {
  color: var(--amarelo);
  font-weight: 800;
  margin-left: 4px;
}

/* ═══ PAINEL ADMIN ════════════════════════════════════════════ */
.admin-list { display: flex; flex-direction: column; gap: 8px; }
.admin-match {
  background: var(--card); border: 1.5px solid var(--borda);
  border-radius: 10px; padding: 12px 16px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
}
.admin-match-info { display: flex; flex-direction: column; gap: 2px; }
.admin-match-teams {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 15px;
  display: flex; align-items: center; gap: 6px;
}
.admin-match-teams .team-flag-img { width: 24px; height: 16px; }
.admin-match-teams .team-flag-emoji { font-size: 16px; }
.admin-match-meta { font-size: 11px; color: var(--texto2); }
.admin-ch-toggles { display: flex; gap: 6px; flex-wrap: wrap; }
.admin-ch-toggle {
  background: rgba(255,255,255,.04); border: 1.5px solid var(--borda);
  color: var(--texto2); font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600; font-size: 12px; padding: 6px 12px; border-radius: 6px;
  cursor: pointer; transition: all .15s; text-transform: uppercase; letter-spacing: .5px;
}
.admin-ch-toggle:hover { border-color: var(--texto2); color: var(--texto); }
.admin-ch-toggle.active {
  background: var(--verde); border-color: var(--verde); color: #fff;
}

/* ═══════════════════════════════════════════════════════════════
   BRACKET v2 — layout baseado no chaveamento oficial (estilo FIFA)
   Alinhamento automático: cada coluna distribui os jogos com
   space-around, centralizando cada par com o jogo da fase seguinte.
   ═══════════════════════════════════════════════════════════════ */
.bk2 {
  display: flex;
  align-items: stretch;
  min-width: 1240px;
  gap: 20px;
  padding: 8px 0 20px;
}
.bk2-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 130px;
}
.bk2-phase {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: 12px; text-transform: uppercase;
  letter-spacing: .8px; color: var(--texto2); text-align: center;
  padding-bottom: 10px; margin-bottom: 4px;
  border-bottom: 1px solid var(--borda);
}
/* O corpo distribui os jogos uniformemente — isso faz o alinhamento
   em pirâmide acontecer automaticamente entre as fases */
.bk2-col-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  gap: 8px;
}
/* Card de jogo */
.bk2-match {
  background: var(--card);
  border: 1.5px solid var(--borda);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}
.bk2-match:hover { border-color: var(--amarelo); }
.bk2-id {
  position: absolute; top: 0; left: 0;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  font-size: 9px; color: var(--texto2);
  background: rgba(0,0,0,.3); padding: 2px 6px;
  border-bottom-right-radius: 6px;
}
.bk2-date {
  font-size: 9px; color: var(--texto2); text-align: right;
  padding: 3px 8px 3px 0; background: rgba(0,0,0,.15);
}
.bk2-team {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 10px;
  font-family: 'Barlow Condensed', sans-serif; font-weight: 600;
  font-size: 12px; color: var(--texto);
  border-top: 1px solid var(--borda);
  gap: 6px;
}
.bk2-team span:first-child {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bk2-score {
  font-weight: 800; color: var(--amarelo); font-size: 13px;
  min-width: 16px; text-align: center;
}
/* Centro: campeão + final + 3º lugar */
.bk2-center { justify-content: center; min-width: 160px; }
.bk2-center .bk2-col-body { justify-content: center; gap: 10px; }
.bk2-champ {
  background: linear-gradient(135deg, rgba(255,215,0,.12), rgba(255,215,0,.04));
  border: 2px solid var(--amarelo); border-radius: 12px;
  padding: 16px 10px; text-align: center;
}
.bk2-champ-icon { font-size: 30px; margin-bottom: 4px; }
.bk2-champ-lbl {
  font-family: 'Barlow Condensed', sans-serif; font-size: 10px;
  text-transform: uppercase; letter-spacing: 1px; color: var(--amarelo); margin-bottom: 2px;
}
.bk2-champ-name {
  font-family: 'Barlow Condensed', sans-serif; font-weight: 700;
  font-size: 14px; color: var(--texto2);
}
.bk2-match.bk2-final { border-color: var(--amarelo); }
.bk2-match.bk2-third { border-color: rgba(200,140,0,.4); }

/* Responsivo — scroll horizontal no celular */
@media (max-width: 1280px) {
  .bracket-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ═══ DESCRIÇÃO DA PÁGINA ═════════════════════════════════════ */
.page-desc {
  font-size: 13px;
  color: var(--texto2);
  line-height: 1.5;
  margin: 14px 2px 0;
  padding: 10px 14px;
  background: rgba(255,255,255,.02);
  border-left: 3px solid var(--verde);
  border-radius: 6px;
}
@media (max-width: 640px) {
  .page-desc { font-size: 12px; padding: 8px 12px; }
}

/* ── Botão "Apoiar" e Modal Pix ─────────────────────────────── */
.nav-btn.nav-apoiar{color:var(--verde)}
.nav-btn.nav-apoiar:hover{color:#fff;background:var(--verde)}
.pix-qr{display:flex;justify-content:center;padding:16px;background:#fff;border-radius:12px;width:fit-content;margin:4px auto 0}
.pix-qr img,.pix-qr canvas{display:block}
.pix-code{background:var(--card);border:1.5px solid var(--borda);border-radius:8px;padding:12px 14px;font-family:monospace;font-size:12px;color:var(--texto2);word-break:break-all;line-height:1.5;max-height:96px;overflow-y:auto;margin-bottom:14px}

/* Botão flutuante "Apoiar" (oculto no desktop, visível no celular) */
.pix-fab{display:none}
@media (max-width: 820px){
  .pix-fab{
    display:inline-flex;align-items:center;gap:6px;
    position:fixed;right:14px;bottom:16px;z-index:90;
    background:linear-gradient(135deg,var(--verde),#007a3d);color:#fff;
    border:none;border-radius:30px;padding:11px 18px;cursor:pointer;
    font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:15px;
    letter-spacing:.5px;text-transform:uppercase;
    box-shadow:0 6px 20px rgba(0,166,81,.45);
  }
  .pix-fab:active{transform:scale(.96)}
  .pix-fab-icon{font-size:16px;line-height:1}
}

/* Polimento dos cards de jogos no celular */
@media (max-width: 640px){
  .match-card{padding:14px}
  .match-teams{gap:6px}
  .team-name{font-size:12px}
  /* alvos de toque maiores nos ícones de notificar/calendário */
  .notify-btn,.cal-btn{font-size:19px;padding:4px}
}