/* ============================================================
   Copa 2026 — Design System
   Dark luxo (preto) · destaque verde-amarelo (Brasil) · dourado
   Tipografia geométrica: Sora (display) + Manrope (texto)
   ============================================================ */
:root{
  --bg:#0a0b0d; --bg-2:#0d0f12;
  --surface:#131519; --surface-2:#191c21; --elev:#20242b;
  --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.12);
  --txt:#f3f4f5; --txt-2:#a7adb6; --txt-3:#6b7280;

  --green:#19c37d; --green-d:#0e9b62; --green-soft:rgba(25,195,125,.14);
  --yellow:#f4c542; --gold:#e8c14a; --gold-soft:rgba(232,193,74,.14);
  --live:#ff3b46; --live-soft:rgba(255,59,70,.16);
  --brasil: linear-gradient(105deg,#19c37d 0%,#3fd07f 45%,#f4c542 100%);
  --gold-grad: linear-gradient(105deg,#e8c14a,#f6dd8a);

  --r-s:10px; --r-m:16px; --r-l:22px; --r-xl:28px;
  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 10px 30px -12px rgba(0,0,0,.7);
  --sh-glow:0 12px 40px -16px rgba(25,195,125,.45);
  --ff-d:'Sora',system-ui,sans-serif;
  --ff-b:'Manrope',system-ui,sans-serif;
  --app-w:1200px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --font-scale: 1.25;
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:var(--ff-b); color:var(--txt);
  background:
    radial-gradient(120% 60% at 20% 80%, rgba(25,195,125,.06), transparent 60%),
    radial-gradient(120% 55% at 80% 20%, rgba(232,193,74,.03), transparent 55%),
    #050608;
  font-size:15px; line-height:1.5; letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
a{color:inherit;text-decoration:none}
img{display:block}
::selection{background:var(--green-soft)}
input{font:inherit}
svg{ width:1.15em; height:1.15em; flex:none }

/* ---------- App shell (moldura mobile) ---------- */
#app{
  max-width:var(--app-w); margin:0 auto; min-height:100dvh; position:relative;
  background:
    radial-gradient(120% 60% at 12% 100%, rgba(14,155,98,.14), transparent 60%),
    radial-gradient(120% 55% at 90% 0%, rgba(232,193,74,.08), transparent 55%),
    var(--bg);
  background-attachment:fixed;
  overflow:hidden;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05), -10px 0 40px rgba(0,0,0,0.6), 10px 0 40px rgba(0,0,0,0.6);
}
#app::after{ /* grão */
  content:''; position:fixed; inset:0; pointer-events:none; z-index:1;
  background:url(../img/grain.png); opacity:.5; mix-blend-mode:overlay;
}
.view{ position:relative; z-index:2; padding:0 16px 110px; animation:viewIn .42s cubic-bezier(.2,.7,.2,1) both }
@keyframes viewIn{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} }
@media (prefers-reduced-motion:reduce){ *{animation-duration:.01ms!important; transition-duration:.01ms!important} }

/* ---------- Top bar ---------- */
.topbar{
  position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:12px;
  padding:14px 16px 12px; backdrop-filter:blur(16px);
  background:linear-gradient(var(--bg),rgba(10,11,13,.72) 70%,transparent);
}
.topbar .tb-back{ width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:var(--surface); border:1px solid var(--line); flex:none; transition:.2s }
.topbar .tb-back:active{transform:scale(.92)}
.topbar h1{ font-family:var(--ff-d); font-size:19px; font-weight:700; letter-spacing:-.02em; line-height:1.1 }
.topbar .sub{ color:var(--txt-2); font-size:12px; font-weight:600 }
.topbar .grow{flex:1}
.icon-btn{ width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:var(--surface); border:1px solid var(--line); flex:none; transition:.2s }
.icon-btn:active{transform:scale(.92)} .icon-btn.on{background:var(--green-soft);border-color:transparent;color:var(--green)}

/* ---------- Bottom nav ---------- */
.tabbar{
  position:fixed; left:50%; transform:translateX(-50%); bottom:0; z-index:40;
  width:100%; max-width:var(--app-w); padding:8px 14px calc(8px + var(--safe-b));
  display:grid; grid-template-columns:repeat(6,1fr); gap:2px;
  background:linear-gradient(transparent,rgba(8,9,11,.86) 24%); backdrop-filter:blur(18px);
  border-top:1px solid var(--line);
}
.tab{ display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 0 6px;
  color:var(--txt-3); font-size:10px; font-weight:700; letter-spacing:.01em; transition:.2s; position:relative }
.tab svg{width:22px;height:22px;stroke-width:1.9}
.tab.active{color:var(--txt)}
.tab.active svg{stroke:var(--green)}
.tab.active::before{ content:''; position:absolute; top:-1px; width:26px; height:3px; border-radius:3px;
  background:var(--brasil); box-shadow:0 0 12px rgba(25,195,125,.7) }
.tab-emoji{ font-size:20px; line-height:22px; height:22px; display:flex; align-items:center; justify-content:center; filter:drop-shadow(0 1px 2px rgba(0,0,0,.35)) }
.tab-brasil{ color:#18b85e }
.tab-brasil.active{ color:#18b85e }

/* ---------- Bandeiras ---------- */
.flag{ width:24px; height:16px; border-radius:3px; object-fit:cover; background:var(--surface-2);
  box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 2px 6px rgba(0,0,0,.4); flex:none }
.flag.circ{ border-radius:50%; object-fit:cover }
.flag.lg{ width:34px;height:34px } .flag.xl{ width:54px;height:54px }

/* ---------- Section headers / chips ---------- */
.sec-h{ display:flex; align-items:center; gap:8px; margin:22px 2px 12px }
.sec-h h2{ font-family:var(--ff-d); font-size:15px; font-weight:700; letter-spacing:.0em }
.sec-h .eyebrow{ font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; color:var(--green) }
.sec-h .grow{flex:1}
.sec-h .more{ font-size:12px; font-weight:700; color:var(--txt-2) }
.pill{ display:inline-flex;align-items:center;gap:6px; padding:6px 11px;border-radius:999px;
  background:var(--surface); border:1px solid var(--line); font-size:12px; font-weight:700; color:var(--txt-2); transition:.18s }
.pill.on{ background:var(--brasil); color:#06231a; border-color:transparent; box-shadow:var(--sh-glow) }
.pill:active{transform:scale(.95)}

/* ---------- Match card ---------- */
.mcard{ position:relative; display:block; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-m); padding:14px; margin-bottom:10px; transition:transform .18s, border-color .2s; overflow:hidden }
.mcard:active{transform:scale(.985)}
.mcard.live{ border-color:transparent; box-shadow:0 0 0 1px var(--live-soft), 0 10px 30px -16px rgba(255,59,70,.5) }
.mcard.live::before{ content:''; position:absolute; left:0;top:0;bottom:0; width:3px; background:var(--live) }
.mcard .mc-top{ display:flex; align-items:center; gap:8px; margin-bottom:12px; font-size:11px; font-weight:700; color:var(--txt-2) }
.mcard .mc-grp{ color:var(--gold); letter-spacing:.04em }
.mc-row{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px }
.mc-team{ display:flex; align-items:center; gap:9px; min-width:0 }
.mc-team.away{ flex-direction:row-reverse; text-align:right }
.mc-team .nm{ font-weight:700; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.mc-center{ display:flex; flex-direction:column; align-items:center; gap:2px; min-width:62px }
.mc-score{ font-family:var(--ff-d); font-weight:800; font-size:22px; letter-spacing:.02em; font-variant-numeric:tabular-nums }
.mc-time{ font-family:var(--ff-d); font-weight:700; font-size:17px }
.mc-x{ color:var(--txt-3); font-size:13px; font-weight:700 }
.mc-tag{ font-size:10px;font-weight:800;letter-spacing:.06em;padding:2px 7px;border-radius:6px; text-transform:uppercase }
.mc-tag.live{ background:var(--live); color:#fff; animation:pulseLive 1.6s infinite }
.mc-tag.ft{ background:var(--surface-2); color:var(--txt-2) }
.mc-tag.soon{ background:var(--gold-soft); color:var(--gold) }
@keyframes pulseLive{ 0%,100%{box-shadow:0 0 0 0 rgba(255,59,70,.5)} 50%{box-shadow:0 0 0 5px rgba(255,59,70,0)} }
.mc-bcast{ display:flex; gap:5px; margin-top:11px; padding-top:11px; border-top:1px solid var(--line); align-items:center }
.chl{ display:inline-flex;align-items:center;gap:5px; font-size:10.5px;font-weight:800; padding:3px 8px;border-radius:7px;
  background:var(--surface-2); color:var(--txt) }
.chl .dot{width:7px;height:7px;border-radius:50%}
.mc-bcast .ven{ margin-left:auto; font-size:10.5px;font-weight:700;color:var(--txt-3); display:flex;align-items:center;gap:4px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:48% }

/* ---------- Empty / countdown ---------- */
.empty{ text-align:center; color:var(--txt-2); padding:48px 16px; }
.empty .ico{ width:54px;height:54px;margin:0 auto 14px;border-radius:16px;display:grid;place-items:center;
  background:var(--surface); border:1px solid var(--line); color:var(--txt-3) }

/* ---------- Capa ---------- */
.cover{ position:relative; min-height:100dvh; display:flex; flex-direction:column; padding:0 22px 36px; z-index:2 }
.cover .bg{ position:absolute; inset:0; z-index:-1; background:#000;
  background-image:url(../img/cover.png); background-size:cover; background-position:center }
.cover .bg::after{content:'';position:absolute;inset:0;background:linear-gradient(transparent 30%,var(--bg) 96%)}
.cover .top{ padding-top:64px; flex:1; display:flex; flex-direction:column; justify-content:center }
.cover .kicker{ font-family:var(--ff-d); font-size:12px; font-weight:700; letter-spacing:.4em; text-transform:uppercase;
  color:var(--gold); margin-bottom:14px; opacity:0; animation:upIn .7s .1s both }
.cover h1{ font-family:var(--ff-d); font-weight:800; font-size:clamp(58px,21vw,96px); line-height:.86; letter-spacing:-.04em;
  background:var(--brasil); -webkit-background-clip:text; background-clip:text; color:transparent;
  opacity:0; animation:upIn .8s .2s both }
.cover .tline{ margin-top:16px; color:var(--txt-2); font-size:14px; font-weight:600; max-width:300px;
  opacity:0; animation:upIn .8s .35s both }
@keyframes upIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.countdown{ display:flex; gap:8px; margin-top:30px; opacity:0; animation:upIn .8s .5s both }
.cd-box{ flex:1; background:rgba(19,21,25,.6); border:1px solid var(--line); border-radius:var(--r-m);
  padding:14px 6px; text-align:center; backdrop-filter:blur(6px) }
.cd-box .n{ font-family:var(--ff-d); font-weight:800; font-size:30px; line-height:1; font-variant-numeric:tabular-nums }
.cd-box .l{ font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--txt-3); margin-top:6px }
.cover .cta{ margin-top:22px; display:flex; gap:10px; opacity:0; animation:upIn .8s .62s both }
.btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:14px 18px; border-radius:14px;
  font-family:var(--ff-d); font-weight:700; font-size:14px; transition:transform .15s, filter .2s }
.btn:active{transform:scale(.96)}
.btn.primary{ background:var(--brasil); color:#06231a; box-shadow:var(--sh-glow); flex:1 }
.btn.ghost{ background:var(--surface); border:1px solid var(--line-2); color:var(--txt) }
.cover .credit{ margin-top:18px; font-size:11px; color:var(--txt-3); text-align:center; opacity:0; animation:upIn .8s .72s both }
.cover .credit a{ color:var(--green); font-weight:700 }

/* ---------- Calendário (sheet) ---------- */
.daystrip{ display:flex; gap:8px; overflow-x:auto; padding:4px 0 8px; scrollbar-width:none; margin:0 -16px; padding-left:16px; padding-right:16px }
.daystrip::-webkit-scrollbar{display:none}
.dcell{ flex:none; width:54px; padding:10px 0; border-radius:14px; text-align:center; background:var(--surface);
  border:1px solid var(--line); transition:.18s }
.dcell .wd{ font-size:10px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--txt-3) }
.dcell .dd{ font-family:var(--ff-d); font-weight:800; font-size:19px; margin-top:2px }
.dcell .dot{ width:5px;height:5px;border-radius:50%;background:var(--gold);margin:5px auto 0; opacity:0 }
.dcell.has .dot{opacity:1}
.dcell.sel{ background:var(--brasil); color:#06231a; border-color:transparent; box-shadow:var(--sh-glow) }
.dcell.sel .wd,.dcell.sel .dd{color:#06231a}
.dcell.sel .dot{background:#06231a}
.dcell:active{transform:scale(.93)}

/* ---------- Busca / times ---------- */
.search-wrap{ position:relative; margin:4px 0 4px }
.search{ width:100%; background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:13px 14px 13px 42px; color:var(--txt); font-weight:600; font-size:14px; transition:.2s }
.search:focus{ outline:none; border-color:var(--green); box-shadow:0 0 0 4px var(--green-soft) }
.search-wrap svg{ position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--txt-3) }
.team-row{ display:flex; align-items:center; gap:12px; padding:12px 12px; background:var(--surface);
  border:1px solid var(--line); border-radius:14px; margin-bottom:8px; transition:.16s }
.team-row:active{transform:scale(.99); background:var(--surface-2)}
.team-row .nm{ font-weight:700; font-size:15px }
.team-row .meta{ font-size:11.5px; color:var(--txt-2); font-weight:600 }
.team-row .grp{ margin-left:auto; font-family:var(--ff-d); font-weight:800; font-size:12px; color:var(--gold);
  background:var(--gold-soft); padding:5px 9px; border-radius:8px }
.team-row.br{ border-color:transparent; box-shadow:0 0 0 1px var(--green-soft); background:linear-gradient(100deg,var(--green-soft),transparent 60%) }
.alpha{ font-family:var(--ff-d); font-weight:800; font-size:12px; color:var(--txt-3); margin:18px 4px 8px; letter-spacing:.1em }

/* ---------- Grupos (tabela) ---------- */
.grp-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-m); overflow:hidden; margin-bottom:12px }
.grp-head{ display:flex; align-items:center; gap:8px; padding:12px 14px; border-bottom:1px solid var(--line);
  background:linear-gradient(100deg,var(--gold-soft),transparent 70%) }
.grp-head .gl{ font-family:var(--ff-d); font-weight:800; font-size:15px; color:var(--gold);
  width:calc(30px * var(--font-scale, 1)); height:calc(30px * var(--font-scale, 1)); border-radius:9px; display:grid; place-items:center; background:var(--gold-soft) }
.grp-head .grp-title{ font-family:var(--ff-d); font-weight:700; font-size:15px; color:var(--txt) }
.grp-head .prov{ margin-left:auto; font-size:11px; font-weight:800; letter-spacing:.06em; color:var(--txt-3);
  border:1px solid var(--line-2); padding:3px 7px; border-radius:6px }
.stbl{ width:100% }
.stbl .hr{ display:grid; grid-template-columns:calc(18px * var(--font-scale, 1)) 1fr calc(26px * var(--font-scale, 1)) calc(26px * var(--font-scale, 1)) calc(26px * var(--font-scale, 1)) calc(26px * var(--font-scale, 1)) calc(30px * var(--font-scale, 1)); gap:calc(6px * var(--font-scale, 1)); padding:7px 14px;
  font-size:12px; font-weight:800; color:var(--txt-3); letter-spacing:.04em; border-bottom:1px solid var(--line) }
.strow{ display:grid; grid-template-columns:calc(18px * var(--font-scale, 1)) 1fr calc(26px * var(--font-scale, 1)) calc(26px * var(--font-scale, 1)) calc(26px * var(--font-scale, 1)) calc(26px * var(--font-scale, 1)) calc(30px * var(--font-scale, 1)); gap:calc(6px * var(--font-scale, 1)); padding:9px 14px;
  align-items:center; font-size:14px; font-weight:700; border-bottom:1px solid var(--line); transition:.15s }
.strow:last-child{border-bottom:none}
.strow:active{background:var(--surface-2)}
.strow .pos{ font-family:var(--ff-d); font-weight:800; color:var(--txt-3); text-align:center }
.strow.q .pos{ color:var(--green) } .strow.q3 .pos{ color:var(--gold) }
.strow .tm{ display:flex; align-items:center; gap:8px; min-width:0 }
.strow .tm span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.strow .c{ text-align:center; color:var(--txt-2); font-variant-numeric:tabular-nums }
.strow .pts{ text-align:center; font-family:var(--ff-d); font-weight:800 }
.qbar{ display:flex; gap:14px; padding:9px 14px; font-size:10.5px; font-weight:700; color:var(--txt-2) }
.qbar .k{ display:inline-flex;align-items:center;gap:5px }
.qbar .sw{ width:9px;height:9px;border-radius:3px }

/* ---------- Chaveamento ---------- */
.bracket-scroll{ overflow-x:auto; margin:0 -16px; padding:6px 16px 10px; scrollbar-width:none }
.bracket-scroll::-webkit-scrollbar{display:none}
.bracket{ display:flex; gap:14px; min-width:max-content }
.br-col{ display:flex; flex-direction:column; gap:10px; justify-content:space-around; min-width:172px }
.br-col .colh{ font-family:var(--ff-d); font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold); text-align:center; margin-bottom:2px }
.br-col .colh small{ display:block; color:var(--txt-3); font-weight:700; letter-spacing:.02em; text-transform:none; margin-top:2px }
.brm{ background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:8px 10px; opacity:0; transform:translateY(8px);
  animation:upIn .5s both }
.brm .br-t{ display:flex; align-items:center; gap:7px; padding:3px 0; font-size:12px; font-weight:700 }
.brm .br-t .s{ margin-left:auto; font-family:var(--ff-d); font-weight:800; color:var(--txt-2) }
.brm .vs{ height:1px; background:var(--line); margin:3px 0 }
.brm.final{ border-color:transparent; box-shadow:0 0 0 1px var(--gold-soft); background:linear-gradient(160deg,var(--gold-soft),var(--surface)) }
.brm .tbd{ color:var(--txt-3); font-style:italic; font-weight:600 }

/* ---------- Artilheiros ---------- */
.scorer{ display:flex; align-items:center; gap:12px; padding:12px 14px; background:var(--surface);
  border:1px solid var(--line); border-radius:14px; margin-bottom:8px; position:relative; overflow:hidden }
.scorer .rk{ font-family:var(--ff-d); font-weight:800; font-size:16px; width:24px; color:var(--txt-3); text-align:center }
.scorer.top1 .rk{ color:var(--gold) } .scorer.top1{ box-shadow:0 0 0 1px var(--gold-soft) }
.scorer .nm{ font-weight:700; font-size:14px } .scorer .tm{ font-size:11px; color:var(--txt-2); font-weight:600 }
.scorer .bar{ position:absolute; left:0; bottom:0; height:3px; background:var(--brasil); border-radius:3px; width:0; transition:width 1s cubic-bezier(.2,.7,.2,1) }
.scorer .goals{ margin-left:auto; text-align:right }
.scorer .goals b{ font-family:var(--ff-d); font-weight:800; font-size:20px } .scorer .goals span{ font-size:10px;color:var(--txt-3);font-weight:700;display:block }

/* ---------- Accordion (página do time) ---------- */
.acc{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-m); margin-bottom:10px; overflow:hidden }
.acc-h{ display:flex; align-items:center; gap:11px; padding:15px 14px; width:100%; text-align:left }
.acc-h .ico{ width:32px;height:32px;border-radius:9px;display:grid;place-items:center; background:var(--surface-2); color:var(--green); flex:none }
.acc-h .ttl{ font-family:var(--ff-d); font-weight:700; font-size:14px }
.acc-h .cnt{ font-size:11px; color:var(--txt-2); font-weight:600 }
.acc-h .chev{ margin-left:auto; color:var(--txt-3); transition:transform .3s }
.acc.open .acc-h .chev{ transform:rotate(180deg) }
.acc-body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .34s cubic-bezier(.3,.8,.3,1) }
.acc.open .acc-body{ grid-template-rows:1fr }
.acc-body > div{ overflow:hidden }
.acc-inner{ padding:2px 14px 14px }

.pline{ font-family:var(--ff-d); font-size:10px; font-weight:800; letter-spacing:.1em; color:var(--txt-3); margin:12px 0 6px }
.player{ display:flex; align-items:center; gap:11px; padding:8px 0; border-bottom:1px solid var(--line) }
.player:last-child{border:none}
.player .num{ font-family:var(--ff-d); font-weight:800; font-size:13px; color:var(--txt-3); width:22px; text-align:center }
.player .pn{ font-weight:700; font-size:13.5px } .player .pc{ font-size:11px;color:var(--txt-2);font-weight:600 }
.player .cap{ margin-left:auto; font-size:9px; font-weight:800; color:var(--gold); border:1px solid var(--gold-soft); padding:2px 5px; border-radius:5px }
.goal-player{ font-weight:700; font-size:13px }

/* ---------- Team hero ---------- */
.thero{ position:relative; margin:0 -16px 4px; padding:22px 18px 18px; overflow:hidden;
  background:linear-gradient(160deg,var(--surface-2),var(--bg)); border-bottom:1px solid var(--line) }
.thero .glow{ position:absolute; inset:0; z-index:0; opacity:.6 }
.thero .row{ position:relative; z-index:1; display:flex; align-items:center; gap:14px }
.thero h2{ font-family:var(--ff-d); font-weight:800; font-size:24px; letter-spacing:-.02em }
.thero .meta{ color:var(--txt-2); font-size:12.5px; font-weight:600; margin-top:3px }
.thero .grp-badge{ position:relative; z-index:1; display:inline-flex; gap:6px; margin-top:14px; flex-wrap:wrap }
.tag-soft{ font-size:11px;font-weight:700; padding:6px 10px;border-radius:9px; background:var(--surface); border:1px solid var(--line); color:var(--txt-2) }

/* ---------- Match detail ---------- */
.mhero{ position:relative; margin:0 -16px 0; padding:64px 18px 22px; overflow:hidden;
  background:#0b1410 url(../img/match-hero.png) center/cover }
.mhero::after{content:'';position:absolute;inset:0;background:linear-gradient(transparent,var(--bg))}
.mhero .in{ position:relative; z-index:1 }
.mhero .mtop{ text-align:center; font-size:11px; font-weight:800; color:var(--gold); letter-spacing:.06em; margin-bottom:16px }
.mhero .duel{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px }
.mhero .side{ display:flex; flex-direction:column; align-items:center; gap:9px; color:inherit; text-decoration:none }
.mhero .side .nm{ font-family:var(--ff-d); font-weight:700; font-size:15px; text-align:center }
.mhero .mid{ text-align:center; min-width:78px }
.mhero .mid .sc{ font-family:var(--ff-d); font-weight:800; font-size:38px; line-height:1; font-variant-numeric:tabular-nums }
.mhero .mid .vs{ font-family:var(--ff-d); font-weight:800; font-size:24px; color:var(--txt-3) }
.mhero .mid .st{ font-size:11px; font-weight:800; margin-top:8px; color:var(--txt-2) }
.mhero .mid .st.live{ color:var(--live) }
.info-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px }
.info-box{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-m); padding:13px 14px }
.info-box .k{ font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--txt-3); display:flex;align-items:center;gap:6px }
.info-box .v{ font-family:var(--ff-d); font-weight:700; font-size:15px; margin-top:7px } .info-box .v small{ font-weight:600;color:var(--txt-2);font-size:12px }
.wx{ display:flex; align-items:center; gap:12px; margin-top:8px }
.wx .tmp{ font-family:var(--ff-d); font-weight:800; font-size:24px } .wx .det{ font-size:11px; color:var(--txt-2); font-weight:600 }

.watch{ display:flex; gap:10px; align-items:center; padding:13px 14px; border-radius:var(--r-m); margin-bottom:9px;
  background:var(--surface); border:1px solid var(--line); transition:.16s }
.watch:active{transform:scale(.99)}
.watch .lg{ width:40px;height:40px;border-radius:11px;display:grid;place-items:center; font-family:var(--ff-d);font-weight:800;font-size:13px; color:#fff; flex:none }
.watch .nm{ font-family:var(--ff-d); font-weight:700; font-size:14px } .watch .tg{ font-size:11px;color:var(--txt-2);font-weight:600 }
.watch .go{ margin-left:auto; color:var(--txt-3) }
.watch.caze .lg{ background:linear-gradient(135deg,#ff0033,#ff5277) } .watch.caze{ box-shadow:0 0 0 1px rgba(255,0,51,.18) }

/* ---------- Floating "tá rolando" ---------- */
.live-fab{ display: none; position:fixed; left:50%; transform:translateX(-50%) translateY(120px); bottom:calc(72px + var(--safe-b)); z-index:60;
  width:calc(100% - 28px); max-width:calc(var(--app-w) - 28px);
  align-items:center; gap:10px; padding:10px 12px; border-radius:16px;
  background:linear-gradient(100deg,#1a1d22,#121419); border:1px solid var(--live-soft);
  box-shadow:0 16px 40px -12px rgba(255,59,70,.4), 0 0 0 1px var(--line); transition:transform .5s cubic-bezier(.2,.9,.2,1) }
.live-fab.show{ display: flex; transform:translateX(-50%) translateY(0) }
.live-fab .ld{ width:9px;height:9px;border-radius:50%;background:var(--live); box-shadow:0 0 0 0 rgba(255,59,70,.6); animation:pulseLive 1.4s infinite; flex:none }
.live-fab .txt{ min-width:0; flex:1 } .live-fab .txt .k{ font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--live) }
.live-fab .txt .m{ font-weight:700; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.live-fab .sc{ font-family:var(--ff-d); font-weight:800; font-size:16px; flex:none }
.live-fab .go{ width:30px;height:30px;border-radius:10px;background:var(--live);display:grid;place-items:center;color:#fff;flex:none }

/* ---------- Footer ---------- */
.foot{ text-align:center; padding:10px 0; color:var(--txt-3); font-size:11px; font-weight:600; border-top:1px solid var(--line); margin:15px 12px 10px }
.foot a{ color:var(--green); font-weight:800; text-decoration:none }
.foot a:hover{ text-decoration:underline }

/* ---------- Skeleton ---------- */
.skl{ background:linear-gradient(100deg,var(--surface) 30%,var(--surface-2) 50%,var(--surface) 70%); background-size:200% 100%;
  animation:shimmer 1.3s infinite; border-radius:10px }
@keyframes shimmer{ to{background-position:-200% 0} }

/* ---------- util ---------- */
.center-col{ display:flex; flex-direction:column; align-items:center }
.muted{color:var(--txt-2)} .gold{color:var(--gold)} .green{color:var(--green)}
.notice{ font-size:11px; color:var(--txt-3); background:var(--surface); border:1px dashed var(--line-2); border-radius:12px; padding:11px 13px; margin:10px 0; line-height:1.45 }
.stagger > *{ animation:upIn .5s both } 

/* ---------- Suporte a Font-Size Variável ---------- */
body {
  font-size: var(--body-fs, 15px) !important;
}

/* ---------- Modo Claro (Light Mode) ---------- */
body.light-mode {
  --bg: #f5f6f8;
  --bg-2: #ffffff;
  --surface: #ebeef2;
  --surface-2: #e2e6ea;
  --elev: #d5d9df;
  --line: rgba(0,0,0,.08);
  --line-2: rgba(0,0,0,.15);
  --txt: #121417;
  --txt-2: #4e5561;
  --txt-3: #7e8694;
  --green: #0e9b62;
  --green-soft: rgba(14,155,98,.1);
  --yellow: #e6b217;
  --gold: #d4a513;
  --gold-soft: rgba(212,165,19,.1);
  background: #f0f2f5;
}

body.light-mode #app {
  background: var(--bg);
  box-shadow: 0 0 0 1px var(--line), -10px 0 40px rgba(0,0,0,0.08), 10px 0 40px rgba(0,0,0,0.08);
}

body.light-mode .topbar {
  background: linear-gradient(var(--bg), rgba(245,246,248,.72) 70%, transparent);
}

body.light-mode .tabbar {
  background: linear-gradient(transparent, rgba(245,246,248,.86) 24%);
}

body.light-mode .watch.caze {
  box-shadow: 0 0 0 1px rgba(255,0,51,.1);
}

/* ---------- Destaques Premium do Brasil ---------- */
.mcard.br-highlight {
  border: 1.5px solid var(--yellow);
  background: linear-gradient(110deg, var(--gold-soft) 0%, var(--surface) 60%);
  box-shadow: 0 4px 20px -8px rgba(244, 197, 66, 0.2);
}

body.light-mode .mcard.br-highlight {
  border: 1.5px solid var(--yellow);
  background: linear-gradient(110deg, rgba(244, 197, 66, 0.08) 0%, var(--surface) 60%);
}

/* Dia com jogo do Brasil: contorno verde + anel amarelo interno (cores do BR) */
.dcell.br-day-highlight {
  border: 2px solid #009c3b !important;
  box-shadow: inset 0 0 0 2px #ffdf00 !important;
}
/* Mini-bandeira do Brasil em CSS (sem imagem, renderiza em qualquer SO) */
.brflag { display:inline-block; width:16px; height:11px; border-radius:2px; background:#009c3b;
  position:relative; margin-left:4px; vertical-align:middle; overflow:hidden; flex:none; }
.brflag::before { content:''; position:absolute; left:50%; top:50%; width:7.5px; height:7.5px;
  background:#ffdf00; transform:translate(-50%,-50%) rotate(45deg); }
.brflag::after { content:''; position:absolute; left:50%; top:50%; width:3.4px; height:3.4px;
  background:#002776; border-radius:50%; transform:translate(-50%,-50%); }

/* ---------- Gol Overlay Premium ---------- */
.gol-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(10, 11, 13, 0.96);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.gol-overlay.show {
  opacity: 1;
  pointer-events: auto;
}
.gol-content {
  text-align: center;
  transform: scale(0.75);
  transition: transform 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.gol-overlay.show .gol-content {
  transform: scale(1);
}
.gol-text {
  font-family: var(--ff-d);
  font-weight: 900;
  font-size: 76px;
  line-height: 1;
  letter-spacing: -2px;
  background: linear-gradient(135deg, #19c37d 0%, #f4c542 50%, #19c37d 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: golPulse 0.9s infinite alternate;
}
@keyframes golPulse {
  0% { transform: scale(1); filter: drop-shadow(0 0 10px rgba(244,197,66,0.4)); }
  100% { transform: scale(1.08); filter: drop-shadow(0 0 35px rgba(25,195,125,0.7)); }
}
.gol-sub {
  font-family: var(--ff-b);
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin-top: 15px;
  white-space: pre-line;
  line-height: 1.4;
}
.gol-ball {
  font-size: 72px;
  margin: 15px 0;
  animation: spinBall 2s linear infinite;
  display: inline-block;
}
@keyframes spinBall {
  100% { transform: rotate(360deg); }
}
.gol-btn {
  margin-top: 25px;
  background: var(--brasil);
  color: #06231a;
  padding: 10px 24px;
  border-radius: 999px;
  font-family: var(--ff-d);
  font-weight: 800;
  font-size: 13.5px;
  border: none;
  box-shadow: var(--sh-glow);
  cursor: pointer;
}

/* ---------- Adaptação 100% Mobile (Responsividade) ---------- */
@media (max-width: 1024px) {
  #app {
    max-width: 100%;
    width: 100%;
    min-height: 100dvh;
    border-radius: 0;
    box-shadow: none;
    border-left: none;
    border-right: none;
  }
  .tabbar {
    max-width: 100%;
  }
  .live-fab {
    max-width: calc(100% - 28px);
  }
} 

/* ---------- Redimensionamento Proporcional de Fontes (Acessibilidade) ---------- */
body { font-size: calc(15px * var(--font-scale, 1)) !important; }
.topbar h1 { font-size: calc(19px * var(--font-scale, 1)) !important; }
.topbar .sub { font-size: calc(12px * var(--font-scale, 1)) !important; }
.tab { font-size: calc(10px * var(--font-scale, 1)) !important; }
.mc-team .nm { font-size: calc(14px * var(--font-scale, 1)) !important; }
.mc-score { font-size: calc(22px * var(--font-scale, 1)) !important; }
.mc-time { font-size: calc(17px * var(--font-scale, 1)) !important; }
.btn { font-size: calc(14px * var(--font-scale, 1)) !important; }
.team-row .nm { font-size: calc(15px * var(--font-scale, 1)) !important; }
.team-row .meta { font-size: calc(11.5px * var(--font-scale, 1)) !important; }
.acc-h .ttl { font-size: calc(14px * var(--font-scale, 1)) !important; }
.acc-h .cnt { font-size: calc(11px * var(--font-scale, 1)) !important; }
.player .pn { font-size: calc(13.5px * var(--font-scale, 1)) !important; }
.player .pc { font-size: calc(11px * var(--font-scale, 1)) !important; }
.sec-h h2 { font-size: calc(15px * var(--font-scale, 1)) !important; }
.sec-h .eyebrow { font-size: calc(11px * var(--font-scale, 1)) !important; }
.info-box .v { font-size: calc(15px * var(--font-scale, 1)) !important; }
.info-box .v small { font-size: calc(12px * var(--font-scale, 1)) !important; }
.watch .nm { font-size: calc(14px * var(--font-scale, 1)) !important; }
.watch .tg { font-size: calc(11px * var(--font-scale, 1)) !important; }
.mhero .side .nm { font-size: calc(15px * var(--font-scale, 1)) !important; }
.mhero .mid .sc { font-size: calc(38px * var(--font-scale, 1)) !important; }
.mhero .mid .vs { font-size: calc(24px * var(--font-scale, 1)) !important; }
.mhero .mid .st { font-size: calc(11px * var(--font-scale, 1)) !important; }

/* Tabela de Grupos */
.grp-head .gl { font-size: calc(15px * var(--font-scale, 1)) !important; }
.grp-head .grp-title { font-size: calc(15px * var(--font-scale, 1)) !important; }
.grp-head .prov { font-size: calc(11px * var(--font-scale, 1)) !important; }
.stbl .hr { font-size: calc(12px * var(--font-scale, 1)) !important; }
.strow { font-size: calc(14px * var(--font-scale, 1)) !important; }
.qbar { font-size: calc(12px * var(--font-scale, 1)) !important; }

/* Calendário Horizontal e Mensal */
.dcell .wd { font-size: calc(11px * var(--font-scale, 1)) !important; }
.dcell .dd { font-size: calc(20px * var(--font-scale, 1)) !important; }

/* Busca/Lista de Seleções */
.team-row .grp { font-size: calc(12px * var(--font-scale, 1)) !important; }
.alpha { font-size: calc(12px * var(--font-scale, 1)) !important; }

/* Artilharia */
.scorer .rk { font-size: calc(16px * var(--font-scale, 1)) !important; }
.scorer .nm { font-size: calc(14px * var(--font-scale, 1)) !important; }
.scorer .tm { font-size: calc(11px * var(--font-scale, 1)) !important; }
.scorer .goals b { font-size: calc(20px * var(--font-scale, 1)) !important; }
.scorer .goals span { font-size: calc(10px * var(--font-scale, 1)) !important; }

/* Chaveamento */
.br-col .colh { font-size: calc(11px * var(--font-scale, 1)) !important; }
.br-col .colh small { font-size: calc(10px * var(--font-scale, 1)) !important; }
.brm .br-t { font-size: calc(12px * var(--font-scale, 1)) !important; }

/* Detalhe do Jogo / Eventos de Gols */
.goal-player { font-size: calc(13px * var(--font-scale, 1)) !important; }
.mcard .mc-top { font-size: calc(11px * var(--font-scale, 1)) !important; }
.mc-tag { font-size: calc(10px * var(--font-scale, 1)) !important; }
.chl { font-size: calc(10.5px * var(--font-scale, 1)) !important; }
.mc-bcast .ven { font-size: calc(10.5px * var(--font-scale, 1)) !important; }

/* Outros elementos adicionais */
.player .num { font-size: calc(13px * var(--font-scale, 1)) !important; }
.player .cap { font-size: calc(9px * var(--font-scale, 1)) !important; }
.tag-soft { font-size: calc(11px * var(--font-scale, 1)) !important; }
.notice { font-size: calc(11px * var(--font-scale, 1)) !important; }

/* Redimensionamento Dinâmico de Larguras e Espaçamentos Críticos */
.flag {
  width: calc(24px * var(--font-scale, 1)) !important;
  height: calc(16px * var(--font-scale, 1)) !important;
}
.flag.lg {
  width: calc(34px * var(--font-scale, 1)) !important;
  height: calc(34px * var(--font-scale, 1)) !important;
}
.flag.xl {
  width: calc(54px * var(--font-scale, 1)) !important;
  height: calc(54px * var(--font-scale, 1)) !important;
}
.grp-head .gl {
  width: calc(30px * var(--font-scale, 1)) !important;
  height: calc(30px * var(--font-scale, 1)) !important;
}
.dcell {
  width: calc(54px * var(--font-scale, 1)) !important;
}
.mc-center {
  min-width: calc(62px * var(--font-scale, 1)) !important;
}
.br-col {
  min-width: calc(172px * var(--font-scale, 1)) !important;
} 

/* ---------- Desktop Layout Grid Adapters (min-width: 1025px) ---------- */
@media (min-width: 1025px) {
  /* Layout grids for list items */
  .stagger {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
  }
  .teams-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
  }
  .groups-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
  }
  .scorers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
  }
  .watch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
  }
  .info-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  
  /* Centered and scaled-down match duel hero header */
  .mhero .duel {
    max-width: 620px;
    margin: 0 auto;
  }

  /* Centered cover text and elements */
  .cover {
    align-items: center;
    text-align: center;
  }
  .cover .top {
    align-items: center;
  }
  .cover .tline {
    max-width: 500px;
  }
  .cover .cta {
    justify-content: center;
  }

  /* Floating Dock styled Tabbar centered at the bottom */
  .tabbar {
    max-width: 580px;
    border-radius: 20px;
    bottom: 16px;
    box-shadow: var(--sh-2), 0 0 0 1px var(--line-2);
    background: rgba(8,9,11,.92) !important;
    border: 1px solid var(--line-2);
  }
}

/* ============================================================
   Copa 2026 — Bolão da Copa Styles
   ============================================================ */
.tab-bolao svg {
  box-sizing: content-box;
  width: 22px;
  height: 22px;
  background: rgba(255, 59, 70, 0.14);
  border-radius: 50%;
  padding: 4px;
  margin-top: -4px;
  margin-bottom: -4px;
  box-shadow: 0 0 8px rgba(255, 59, 70, 0.25);
  transition: all 0.2s ease;
}
.tab-bolao.active svg {
  background: var(--live) !important;
  color: #fff !important;
  stroke: #fff !important;
  box-shadow: 0 0 12px rgba(255, 59, 70, 0.5);
}
body.light-mode .tab-bolao svg {
  background: rgba(255, 59, 70, 0.12);
  box-shadow: 0 0 6px rgba(255, 59, 70, 0.15);
}
body.light-mode .tab-bolao.active svg {
  background: var(--live) !important;
  color: #fff !important;
  stroke: #fff !important;
}

.bolao-hero {
  position: relative;
  margin: 0 -16px 16px;
  padding: 24px 18px 20px;
  overflow: hidden;
  background: linear-gradient(160deg, var(--surface-2), var(--bg));
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.bolao-hero .glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.6;
}
.bolao-hero .kicker {
  font-family: var(--ff-d);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
  display: block;
}
.bolao-hero h2 {
  font-family: var(--ff-d);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
}
.bolao-hero .meta {
  color: var(--txt-2);
  font-size: 13px;
  font-weight: 600;
  margin-top: 6px;
}

/* User Card Dashboard */
.bolao-user-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  padding: 16px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.bolao-user-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.bolao-user-info .name {
  font-family: var(--ff-d);
  font-weight: 700;
  font-size: 16px;
}
.bolao-user-info .nickname {
  font-size: 13px;
  color: var(--green);
  font-weight: 800;
  margin-top: 2px;
}
.bolao-user-stats {
  display: flex;
  gap: 8px;
}
.bolao-stat-badge {
  padding: 6px 12px;
  border-radius: 10px;
  font-family: var(--ff-d);
  font-weight: 800;
  font-size: 13px;
  text-align: center;
}
.bolao-stat-badge.points {
  background: var(--gold-soft);
  color: var(--gold);
  border: 1px solid rgba(232, 193, 74, 0.2);
}
.bolao-stat-badge.rank {
  background: var(--green-soft);
  color: var(--green);
  border: 1px solid rgba(25, 195, 125, 0.2);
}
.bolao-user-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.bolao-user-actions button {
  flex: 1;
  padding: 8px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 8px;
  text-align: center;
  transition: 0.15s;
}
.bolao-user-actions .btn-edit {
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--txt-2);
}
.bolao-user-actions .btn-edit:active {
  background: var(--elev);
}
.bolao-user-actions .btn-logout {
  background: rgba(255, 59, 70, 0.08);
  border: 1px solid rgba(255, 59, 70, 0.15);
  color: var(--live);
}
.bolao-user-actions .btn-logout:active {
  background: rgba(255, 59, 70, 0.16);
}

/* Auth forms */
.bolao-auth-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  padding: 20px;
  margin-bottom: 16px;
}
.bolao-auth-card h3 {
  font-family: var(--ff-d);
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 12px;
}
.bolao-auth-card p {
  font-size: 13px;
  color: var(--txt-2);
  margin-bottom: 16px;
  line-height: 1.4;
}
.bolao-form-group {
  margin-bottom: 14px;
}
.bolao-form-group label {
  display: block;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--txt-3);
  margin-bottom: 6px;
  letter-spacing: 0.05em;
}
.bolao-form-group input {
  width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--txt);
  font-size: 14px;
  font-weight: 600;
  transition: 0.2s;
}
.bolao-form-group input:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-soft);
}
.bolao-btn-primary {
  width: 100%;
  background: var(--brasil);
  color: #06231a;
  padding: 12px;
  border-radius: 10px;
  font-family: var(--ff-d);
  font-weight: 800;
  font-size: 13.5px;
  text-align: center;
  box-shadow: var(--sh-glow);
  transition: transform 0.15s, opacity 0.15s;
}
.bolao-btn-primary:active {
  transform: scale(0.98);
}
.bolao-btn-primary:disabled {
  opacity: 0.6;
  pointer-events: none;
}
.bolao-auth-card .toggle-link {
  display: block;
  text-align: center;
  margin-top: 14px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--green);
  cursor: pointer;
}
.bolao-auth-card .toggle-link:hover {
  text-decoration: underline;
}

/* OTP fields */
.otp-input-wrap {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 18px 0;
}
.otp-digit-input {
  width: 50px;
  height: 54px;
  font-family: var(--ff-d);
  font-size: 26px;
  font-weight: 800;
  text-align: center;
  background: var(--surface-2);
  border: 1.5px solid var(--line-2);
  border-radius: 12px;
  color: var(--txt);
  transition: 0.18s;
}
.otp-digit-input:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-soft);
}

/* Navigation Tabs */
.bolao-tabs {
  display: flex;
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
  overflow-x: auto;
  scrollbar-width: none;
}
.bolao-tabs::-webkit-scrollbar {
  display: none;
}
.bolao-tab-btn {
  padding: 10px 14px;
  font-family: var(--ff-d);
  font-size: 13px;
  font-weight: 700;
  color: var(--txt-3);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: 0.15s;
}
.bolao-tab-btn.active {
  color: var(--txt);
  border-bottom-color: var(--green);
}

/* Sub-tabs / Filters */
.bolao-filters {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
}
.bolao-filter-btn {
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--txt-2);
  transition: 0.15s;
}
.bolao-filter-btn.active {
  background: var(--green-soft);
  color: var(--green);
  border-color: transparent;
}

/* Match guess row */
.guess-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  padding: 12px 14px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.guess-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  color: var(--txt-3);
}
.guess-card-top .stage {
  color: var(--gold);
}
.guess-card-body {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
}
.guess-card-team {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.guess-card-team.away {
  flex-direction: row-reverse;
  text-align: right;
}
.guess-card-team .name {
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.guess-card-inputs {
  display: flex;
  align-items: center;
  gap: 6px;
}
.guess-val-input {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  color: var(--txt);
  font-family: var(--ff-d);
  font-weight: 800;
  font-size: 15px;
  text-align: center;
  transition: 0.15s;
}
.guess-val-input:focus {
  outline: none;
  border-color: var(--green);
}
.guess-val-input:disabled {
  background: rgba(255, 255, 255, 0.02);
  border-color: transparent;
  color: var(--txt-2);
  font-size: 14px;
}
.guess-card-inputs .vs {
  font-size: 11px;
  font-weight: 800;
  color: var(--txt-3);
}
.guess-card-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding-top: 8px;
  font-size: 12px;
}
.btn-save-guess {
  background: var(--green-soft);
  color: var(--green);
  padding: 5px 12px;
  border-radius: 6px;
  font-weight: 700;
  font-size: 11.5px;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: 0.15s;
}
.btn-save-guess:active {
  transform: scale(0.96);
}
.btn-save-guess.saved {
  background: rgba(255, 255, 255, 0.04);
  color: var(--txt-3);
  pointer-events: none;
}
.badge-points {
  padding: 3px 8px;
  border-radius: 6px;
  font-family: var(--ff-d);
  font-weight: 800;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.badge-points.exact {
  background: var(--gold-soft);
  color: var(--gold);
}
.badge-points.trend {
  background: var(--green-soft);
  color: var(--green);
}
.badge-points.miss {
  background: rgba(255, 255, 255, 0.04);
  color: var(--txt-3);
}

/* Sharing components */
.bolao-invite-box {
  background: linear-gradient(110deg, var(--gold-soft) 0%, var(--surface) 60%);
  border: 1.5px solid var(--yellow);
  border-radius: var(--r-m);
  padding: 16px;
  margin-bottom: 16px;
  text-align: center;
}
.bolao-invite-box h4 {
  font-family: var(--ff-d);
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 6px;
}
.bolao-invite-box p {
  font-size: 12.5px;
  color: var(--txt-2);
  margin-bottom: 12px;
  line-height: 1.4;
}
.btn-share-whatsapp {
  background: #25d366;
  color: #fff;
  padding: 10px 16px;
  border-radius: 10px;
  font-family: var(--ff-d);
  font-weight: 800;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);
  transition: transform 0.15s;
}
.btn-share-whatsapp:active {
  transform: scale(0.96);
}

/* Ranking Table styles */
.ranking-list {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  overflow: hidden;
  margin-bottom: 16px;
}
.ranking-row {
  display: grid;
  grid-template-columns: 36px 1fr 60px;
  padding: 12px 14px;
  align-items: center;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
  font-weight: 700;
}
.ranking-row:last-child {
  border-bottom: none;
}
.ranking-row.current-user {
  background: var(--green-soft);
  border-left: 3px solid var(--green);
}
.ranking-row .pos {
  font-family: var(--ff-d);
  font-weight: 800;
  color: var(--txt-3);
}
.ranking-row.pos-1 .pos { color: #ffd700; }
.ranking-row.pos-2 .pos { color: #c0c0c0; }
.ranking-row.pos-3 .pos { color: #cd7f32; }
.ranking-row .name {
  color: var(--txt);
}
.ranking-row .pts {
  text-align: right;
  font-family: var(--ff-d);
  font-weight: 800;
  color: var(--gold);
}

/* Match Page prediction box style */
.match-guess-container {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  padding: 14px;
  margin-bottom: 14px;
}
.match-guess-container h4 {
  font-family: var(--ff-d);
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--txt-2);
}

/* Admin Styles */
.admin-login-card {
  max-width: 360px;
  margin: 40px auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  padding: 24px;
  text-align: center;
}
.admin-dashboard-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.admin-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
}
.admin-card-header h3 {
  font-family: var(--ff-d);
  font-weight: 800;
  font-size: 18px;
}
.admin-table-scroll {
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
}
.admin-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 13px;
}
.admin-table th, .admin-table td {
  padding: 12px;
  border-bottom: 1px solid var(--line);
}
.admin-table th {
  background: var(--surface-2);
  font-weight: 800;
  color: var(--txt-3);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.05em;
}
.admin-table tr:last-child td {
  border-bottom: none;
}
.admin-btn-action {
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  transition: 0.15s;
  margin-right: 4px;
}
.admin-btn-action.edit {
  background: var(--green-soft);
  color: var(--green);
}
.admin-btn-action.delete {
  background: rgba(255, 59, 70, 0.08);
  color: var(--live);
}
.admin-btn-action:active {
  transform: scale(0.95);
}

.admin-match-row {
  display: grid;
  grid-template-columns: 60px 1fr 120px 80px;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.admin-match-row:last-child {
  border-bottom: none;
}
.admin-match-row .id {
  font-family: var(--ff-d);
  font-weight: 800;
  color: var(--txt-3);
}
.admin-match-row .teams {
  font-weight: 700;
}
.admin-match-row .score-inputs {
  display: flex;
  align-items: center;
  gap: 4px;
}
.admin-match-row .score-inputs input {
  width: 32px;
  height: 32px;
  text-align: center;
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  color: var(--txt);
  font-weight: 800;
  border-radius: 6px;
}
.admin-match-row select {
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  color: var(--txt);
  padding: 4px 6px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
}

@media (min-width: 1025px) {
  .bolao-dashboard-grid {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 20px;
    align-items: start;
  }
}