/* JOGA NO PEITO: preto, grafite e o vermelho da marca; placar de LED e prancheta de giz */
:root {
  --night: #0a0a0b; --night-2: #141416; --turf: #0f2d22; --turf-2: #143a2b; --turf-3: #1a4a37;
  --chalk: #fafafa; --chalk-2: #c9c9cf; --chalk-3: #8f8f98; --line: rgba(255, 255, 255, .14); --line-2: rgba(255, 255, 255, .3);
  --led: #fe3231; --led-glow: rgba(254, 50, 49, .45); --coral: #ff9a3c;
  --win: #3ddc84; --draw: #ffc94a; --loss: #ff4545; /* vitória verde, empate amarelo, derrota vermelha */ --mint: #5ef2a6; --sky: #6fd3ff;
  --team: #fe3231; --team-2: #0a0a0b;
  --display: 'Big Shoulders Display', Impact, 'Arial Narrow', sans-serif;
  --dot: 'Doto', ui-monospace, 'Courier New', monospace;
  --body: 'Hanken Grotesk', 'Segoe UI', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--night); }
body { margin: 0; min-height: 100dvh; color: var(--chalk); font: 500 16px/1.45 var(--body); }
body::before { /* refletores do estádio */
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(70vw 60vh at 12% -12%, rgba(255, 255, 255, .09), transparent 70%),
    radial-gradient(60vw 70vh at 100% 110%, rgba(254, 50, 49, .16), transparent 70%),
    linear-gradient(115deg, transparent 0 78%, rgba(254, 50, 49, .07) 78% 90%, rgba(254, 50, 49, .12) 90% 90.4%, transparent 90.4%),
    linear-gradient(180deg, var(--night) 0%, var(--night-2) 70%, #1c1c1f 130%);
}
body::after { /* grão de transmissão */
  content: ''; position: fixed; inset: 0; pointer-events: none; opacity: .07; z-index: 90; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
button:disabled { cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--led); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--display); font-weight: 900; font-style: italic; line-height: .95; margin: 0; letter-spacing: .005em; text-transform: uppercase; }
p { margin: 0; }
.wrap { width: min(1180px, 100%); margin: 0 auto; padding: 18px clamp(14px, 3vw, 28px) 56px; }

/* marca: o boneco vermelho da Joga no Peito e o nome em itálico */
.logo { font-family: var(--display); font-weight: 900; font-style: italic; letter-spacing: .01em; line-height: .84; display: inline-flex; align-items: center; gap: .18em; text-transform: uppercase; }
.logo .mark { height: 1.15em; width: auto; flex: none; fill: var(--led); overflow: visible; }
.logo .word { white-space: nowrap; }
.logo b { color: var(--led); font-weight: 900; }
.logo.big { align-items: flex-end; gap: .12em; }
.logo.big .mark { height: 1.62em; filter: drop-shadow(0 10px 30px rgba(254,50,49,.35)); }
.logo.big .ball { animation: chest 2.4s cubic-bezier(.3,0,.4,1) .4s infinite; transform-box: fill-box; transform-origin: center; }
@keyframes chest { 0%, 100% { transform: translate(0, 0); } 14% { transform: translate(-60%, 170%); } 30% { transform: translate(-35%, -60%); } 46% { transform: translate(0, 0); } }
.brand-eyebrow { margin-bottom: 14px; }
.store-link { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 12px; line-height: 1.3; color: var(--chalk); font-weight: 700; font-size: 14px; text-decoration: none; padding: 9px 12px; min-height: 40px; border: 1px solid rgba(254,50,49,.55); border-radius: 3px; background: linear-gradient(115deg, rgba(254,50,49,.16), rgba(254,50,49,.04)); }
.store-link:hover { border-color: var(--led); background: rgba(254,50,49,.22); }
.store-link b { color: var(--led); white-space: nowrap; }
.agg-line { font: 700 12px var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--chalk-2); margin-top: 4px; }
/* tabela: posição e faixas (continental, acesso, classificados, rebaixamento) */
.table th.pos, .table td.pos { width: 30px; padding-left: 0; padding-right: 2px; text-align: center !important; }
.table td.pos + td, .table th.pos + th { padding-left: 4px; text-align: left; }
.pos-badge { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 3px; border-radius: 3px; font: 800 12px var(--body); color: var(--chalk-2); background: rgba(255,255,255,.06); }
.table tr.z-cont .pos-badge { background: var(--sky); color: #04131c; }
.table tr.z-up .pos-badge { background: var(--mint); color: #04170e; }
.table tr.z-champ .pos-badge { background: #ffc94a; color: #1d1402; }
.table tr.z-maybe .pos-badge { background: rgba(94,242,166,.25); color: var(--mint); }
.table tr.z-down .pos-badge { background: var(--led); color: #fff; }
.table tr.z-risk .pos-badge { background: rgba(254,50,49,.25); color: var(--led); }
.table tr.z-cont td:first-child { box-shadow: inset 3px 0 0 var(--sky); }
.table tr.z-sula .pos-badge { background: rgba(111,211,255,.25); color: var(--sky); }
.table tr.z-sula td:first-child { box-shadow: inset 3px 0 0 rgba(111,211,255,.5); }
/* Pré-Libertadores: entre a vaga direta e a Sul-Americana, em lilás */
.table tr.z-pre .pos-badge { background: #b9a6ff; color: #140c2e; }
.table tr.z-pre td:first-child { box-shadow: inset 3px 0 0 #b9a6ff; }
.zone-legend .z-pre i { background: #b9a6ff; }
.table tr.z-up td:first-child, .table tr.z-maybe td:first-child { box-shadow: inset 3px 0 0 var(--mint); }
.table tr.z-champ td:first-child { box-shadow: inset 3px 0 0 #ffc94a; }
.table tr.z-down td:first-child { box-shadow: inset 3px 0 0 var(--led); }
.table tr.z-risk td:first-child { box-shadow: inset 3px 0 0 rgba(254,50,49,.5); }
.zone-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 12px; color: var(--chalk-2); }
.zone-legend span { display: inline-flex; align-items: center; gap: 6px; }
.zone-legend i { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.zone-legend .z-cont i { background: var(--sky); } .zone-legend .z-sula i { background: rgba(111,211,255,.4); } .zone-legend .z-up i { background: var(--mint); } .zone-legend .z-maybe i { background: rgba(94,242,166,.35); }
.zone-legend .z-champ i { background: #ffc94a; } .zone-legend .z-down i { background: var(--led); } .zone-legend .z-risk i { background: rgba(254,50,49,.4); }
/* calendário */
.line-title .link { min-height: 0; padding: 0; font: 600 13px var(--body); letter-spacing: 0; text-transform: none; }
.sched { display: grid; gap: 4px; }
.sched-row { display: grid; grid-template-columns: 30px minmax(0, 1.1fr) minmax(0, 1.4fr) 34px; gap: 8px; align-items: center; padding: 7px 8px; border: 1px solid var(--line); border-left-width: 3px; border-radius: 3px; background: rgba(255,255,255,.025); font-size: 14px; }
.sched-row.now { border-color: var(--led); background: rgba(254,50,49,.1); }
.sched-row.cal-copa { border-left-color: var(--mint); } .sched-row.cal-continental { border-left-color: var(--sky); } .sched-row.cal-liga { border-left-color: var(--led); }
.sched-n { font: 900 16px var(--dot); color: var(--chalk-3); text-align: center; }
.sched-comp { display: grid; min-width: 0; } .sched-comp b { font-size: 13px; } .sched-comp small { color: var(--chalk-3); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sched-opp { font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sched-where { color: var(--chalk-3); text-align: right; font-size: 12px; }
/* menu: conta e abas sozinho / com amigos */
.account-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 4px; background: rgba(255,255,255,.03); }
.account-row > div { display: grid; min-width: 0; }
.account-row b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-row small { color: var(--chalk-3); font-size: 12px; }
.account-row.in { border-color: rgba(94,242,166,.35); }
.account-row.in small { color: var(--mint); }
.btn.google { background: #fff; color: #1f1f1f; border-color: #fff; font: 700 14px var(--body); letter-spacing: 0; text-transform: none; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; flex: none; }
.btn.google:hover:not(:disabled) { background: #f1f1f1; border-color: #f1f1f1; }
.btn.google .g { font: 900 16px var(--body); color: #4285f4; }
.btn.danger { color: #ff8f8e; border-color: rgba(254,50,49,.45); }
.play-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 4px; border-bottom: 2px solid var(--line-2); }
.play-tabs button { font: italic 800 18px/1 var(--display); text-transform: uppercase; letter-spacing: .04em; padding: 14px 8px; min-height: 50px; color: var(--chalk-3); border-bottom: 3px solid transparent; margin-bottom: -2px; }
.play-tabs button:hover { color: var(--chalk); }
.play-tabs button[aria-selected="true"] { color: var(--chalk); border-bottom-color: var(--led); background: linear-gradient(180deg, transparent, rgba(254,50,49,.1)); }
.tab-body { display: grid; gap: 15px; }
.online-box { display: grid; gap: 10px; }
/* líderes: gols e assistências */
.leaders { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 6px 18px; }
.leaders h4 { margin: 4px 0 4px; font: 800 12px var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--led); }
/* pênalti: botão grande de chutar (toque no celular) */
.kick-btn { display: block; width: 100%; grid-column: 1 / -1; margin: 0; min-height: 64px; font-size: 24px; touch-action: manipulation; user-select: none; -webkit-tap-highlight-color: transparent; }
/* escalação: aviso de fora de posição legível em qualquer cor de time */
.slot .fp { display: block; margin-top: 2px; padding: 1px 4px; border-radius: 2px; background: #111; color: #ffd166; font: 800 9.5px/1.2 var(--body); letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 0 0 1px rgba(255,209,102,.6); }
@media (max-width: 640px) { .slot .fp { font-size: 9px; padding: 1px 3px; } }
/* comemoração de campeão */
.party { position: fixed; inset: 0; z-index: 95; pointer-events: none; overflow: hidden; }
.party i { position: absolute; top: -20px; height: 12px; border-radius: 2px; opacity: .95; animation: confetti linear forwards; }
@keyframes confetti { to { transform: translate3d(0, 110vh, 0) rotate(var(--r)); opacity: .9; } }
.party-cup { position: absolute; left: 50%; top: 50%; display: grid; justify-items: center; gap: 4px; text-align: center; transform: translate(-50%, -50%); animation: cupUp 4.8s cubic-bezier(.2,.9,.3,1) forwards; filter: drop-shadow(0 18px 40px rgba(0,0,0,.6)); }
.party-cup svg.trophy-cup { height: auto; width: clamp(110px, 22vw, 170px); height: auto; filter: drop-shadow(0 0 30px rgba(255, 210, 100, .55)); }
.party-cup b { font: italic 900 clamp(42px, 9vw, 86px)/.9 var(--display); color: #fff; text-shadow: 0 0 30px rgba(254,50,49,.8), 0 4px 0 #b3191a; }
.party-cup small { font: 800 15px var(--body); color: #ffd76a; letter-spacing: .06em; text-transform: uppercase; }
@keyframes cupUp { 0% { opacity: 0; transform: translate(-50%, -20%) scale(.5); } 15% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); } 25% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -60%) scale(1); } }
@media (prefers-reduced-motion: reduce) { .party i { display: none; } .party-cup { animation-duration: 3s; } }
/* cadastro e login */
.auth-sheet { width: min(520px, 100%); }
.auth-form { display: grid; gap: 12px; margin-top: 12px; }
.auth-field label { display: block; font-weight: 700; font-size: 13px; letter-spacing: .05em; color: var(--chalk-2); margin-bottom: 5px; text-transform: uppercase; }
.auth-check { align-items: flex-start; text-transform: none; letter-spacing: 0; font-weight: 500; line-height: 1.35; }
.auth-check input { margin-top: 2px; flex: none; }
.auth-more { border-top: 1px solid rgba(255,255,255,.08); padding-top: 10px; }
.auth-more summary { cursor: pointer; font-size: 14px; color: var(--chalk-2); font-weight: 600; }
.auth-more[open] { display: grid; gap: 12px; }
.auth-terms { font-size: 13px; line-height: 1.4; margin: 0; }
.auth-terms a, .auth-check a { color: var(--led); }
.link.inline { display: inline; min-height: 0; padding: 0; font-size: inherit; color: var(--led); }
.auth-err { color: #ff8f8e; font-weight: 700; font-size: 14px; min-height: 1em; }
.auth-err:empty { display: none; }
.auth-or { display: flex; align-items: center; gap: 10px; color: var(--chalk-3); font-size: 13px; margin: 14px 0 10px; }
.auth-or::before, .auth-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.auth-sheet .btn.google { width: 100%; justify-content: center; min-height: 48px; }
.privacy-box p { font-size: 13px; margin: 0 0 6px; color: var(--chalk-2); }
.account-row .btn.primary { padding: 9px 14px; min-height: 38px; font-size: 15px; flex: none; }
/* grupo ao vivo */
.group-live { margin-top: 10px; }
.group-live h3 { font-size: 18px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.live-tag { font: 700 11px var(--body); letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--led); padding: 2px 6px; border-radius: 2px; font-style: normal; animation: blink 1.4s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .45; } }
.gl-table { margin-top: 8px; border-top: 1px solid var(--line); padding-top: 6px; display: grid; gap: 2px; }
.gl-row { display: grid; grid-template-columns: minmax(0, 1fr) 34px 26px; gap: 6px; font-size: 13px; padding: 3px 4px; color: var(--chalk-2); }
.gl-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-row small { text-align: right; }
.gl-row b { text-align: right; color: var(--chalk); }
.gl-row.q { box-shadow: inset 3px 0 0 var(--mint); }
.gl-row.me { color: var(--chalk); font-weight: 700; background: rgba(254,50,49,.1); }
.result .group-live { text-align: left; margin: 12px 0; }
/* sala de troféus */
.menu-links { display: flex; flex-wrap: wrap; gap: 8px; }
.menu-links .btn { flex: 1 1 150px; font-size: 16px; padding: 11px 14px; min-height: 44px; }
.trophy-sheet { width: min(980px, 100%); }
.trophy-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 14px 0 10px; }
.trophy-stat { background: #070708; border: 1px solid var(--line); border-radius: 4px; padding: 10px 8px; text-align: center; }
.trophy-stat b { display: block; font-size: clamp(30px, 6vw, 44px); line-height: 1; }
.trophy-stat span { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--chalk-2); }
.trophy-tally { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.trophy-tally b { color: var(--chalk); }
.trophy-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 0 12px; }
.trophy { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 12px; align-items: end; padding: 16px 6px 12px; position: relative;
  border-bottom: 6px solid #26262a; box-shadow: 0 10px 18px -12px rgba(254,50,49,.55); background: linear-gradient(180deg, transparent 40%, rgba(255,255,255,.03)); }
.trophy::after { content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: linear-gradient(90deg, transparent, rgba(254,50,49,.7), transparent); }
.trophy-art { display: grid; place-items: end center; }
.trophy-cup { width: 64px; height: 80px; filter: drop-shadow(0 6px 10px rgba(255, 200, 80, .25)); animation: shine 4s ease-in-out infinite; }
.trophy.silver .trophy-cup { filter: drop-shadow(0 6px 10px rgba(220, 225, 235, .2)); }
@keyframes shine { 0%, 100% { filter: drop-shadow(0 6px 10px rgba(255, 200, 80, .2)); } 50% { filter: drop-shadow(0 6px 16px rgba(255, 210, 100, .45)); } }
.trophy-info { display: grid; gap: 3px; min-width: 0; }
.trophy-info .chip { justify-self: start; margin-top: 4px; }
.trophy-comp { font: italic 900 22px/1 var(--display); text-transform: uppercase; }
.trophy-team { display: flex; align-items: center; gap: 6px; font-weight: 700; color: var(--chalk-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trophy-team .crest { flex: none; width: 34px; height: 40px; }
.trophy-team { gap: 8px; font-size: 15px; color: var(--chalk); }
.trophy-team .dot { flex: none; width: 16px; height: 16px; border-radius: 50%; display: inline-block; }
.trophy-info small { font-size: 13px; line-height: 1.35; }
.trophy-empty { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 14px; align-items: center; padding: 18px; border: 1px dashed var(--line-2); border-radius: 4px; margin-top: 8px; }
.trophy-empty .trophy-cup { opacity: .35; animation: none; filter: grayscale(1); }
.trophy-empty p { color: var(--chalk-2); }
@media (max-width: 640px) {
  .trophy-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trophy-shelf { grid-template-columns: minmax(0, 1fr); }
}
.end-hero .store-link { margin: 16px auto 0; max-width: 520px; text-align: left; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-bottom: 12px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.topbar .logo { font-size: 26px; }
.topbar small { color: var(--chalk-3); font-size: 13px; letter-spacing: .02em; }
.topbar .right { display: flex; align-items: center; gap: 12px; }
.link { color: var(--chalk-2); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; padding: 6px 2px; min-height: 36px; }
.link:hover { color: var(--chalk); }

/* botões */
.btn {
  font: italic 800 19px/1 var(--display); letter-spacing: .05em; text-transform: uppercase; padding: 14px 22px; min-height: 48px;
  border: 1.5px solid var(--line-2); border-radius: 3px; transition: transform .12s, background .15s, border-color .15s, color .15s;
}
.btn:hover:not(:disabled) { border-color: var(--chalk); transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn.primary { background: var(--led); border-color: var(--led); color: #fff; box-shadow: 0 0 26px -6px var(--led-glow); }
.btn.primary:hover:not(:disabled) { background: #ff4847; border-color: #fff; }
.btn.ghost { background: rgba(255,255,255,.04); }
.btn:disabled { opacity: .4; }
.btn.small { font-size: 15px; padding: 9px 13px; min-height: 38px; }
.chip { display: inline-flex; align-items: center; gap: 5px; font: 700 12px/1 var(--body); padding: 4px 7px; border-radius: 2px; background: rgba(255,255,255,.08); color: var(--chalk-2); letter-spacing: .02em; white-space: nowrap; }
.chip.trait { background: rgba(254,50,49,.13); color: #ff8f8e; }
.chip.pos { background: var(--chalk); color: #0a0a0b; font-weight: 800; }
.eyebrow { font-weight: 700; font-size: 13px; color: var(--led); letter-spacing: .1em; text-transform: uppercase; }
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg button { padding: 8px 12px; min-height: 38px; font-weight: 700; font-size: 14px; border: 1px solid var(--line); border-radius: 3px; color: var(--chalk-2); }
.seg button:hover { border-color: var(--chalk-2); color: var(--chalk); }
.seg button[aria-pressed="true"] { background: var(--chalk); color: #0a0a0b; border-color: var(--chalk); }
.panel { background: rgba(20, 20, 22, .82); border: 1px solid var(--line); border-radius: 4px; padding: 16px; backdrop-filter: blur(2px); }
.panel > h3 { font-size: 22px; margin-bottom: 10px; }
.muted { color: var(--chalk-3); }

/* ---------- placar de LED ---------- */
.led { font-family: var(--dot); font-weight: 900; color: var(--led); text-shadow: 0 0 14px var(--led-glow), 0 0 2px var(--led); font-variant-numeric: tabular-nums; }
.board {
  background: #070708; border: 2px solid #26262a; border-radius: 6px; box-shadow: inset 0 0 40px rgba(0,0,0,.9), 0 16px 50px -24px #000;
  background-image: radial-gradient(rgba(254,50,49,.075) 1px, transparent 1.3px); background-size: 6px 6px;
}

/* ---------- menu ---------- */
.menu { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); gap: clamp(18px, 4vw, 54px); align-items: center; min-height: calc(100dvh - 90px); }
.menu .logo { font-size: clamp(66px, 10.5vw, 136px); }
.tagline { font: 800 clamp(25px, 3.4vw, 42px)/1 var(--display); text-transform: uppercase; margin: 22px 0 18px; max-width: 18ch; }
.tagline em { font-style: normal; color: var(--led); }
.hero-board { display: inline-flex; align-items: center; gap: 22px; padding: 12px 22px; margin-top: 8px; }
.hero-board .sc { font-size: clamp(44px, 6vw, 72px); line-height: 1; }
.hero-board .min { font-size: 26px; color: var(--coral); text-shadow: 0 0 12px rgba(255,154,60,.5); }
.feature-list { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 7px; color: var(--chalk-2); max-width: 54ch; }
.feature-list li { padding-left: 20px; position: relative; }
.feature-list li::before { content: ''; position: absolute; left: 0; top: .55em; width: 10px; height: 2px; background: var(--led); }
.form { display: grid; gap: 15px; }
.form label, .field-label { display: block; font-weight: 700; font-size: 13px; letter-spacing: .05em; color: var(--chalk-2); margin-bottom: 6px; text-transform: uppercase; }
.input { width: 100%; padding: 12px; min-height: 46px; background: rgba(0,0,0,.35); border: 1px solid var(--line-2); border-radius: 3px; color: var(--chalk); font: 700 18px var(--body); }
.input:focus { outline: 2px solid var(--led); border-color: transparent; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { width: 40px; height: 40px; border-radius: 50%; border: 3px solid transparent; box-shadow: inset 0 0 0 2px rgba(0,0,0,.35); }
.swatch[aria-pressed="true"] { border-color: var(--chalk); }
.check { display: flex; gap: 9px; align-items: center; font-size: 14px; color: var(--chalk-2); min-height: 30px; }
.check input { accent-color: var(--led); width: 18px; height: 18px; }
.menu-actions { display: grid; gap: 9px; }
.menu-actions .btn { width: 100%; }

/* ---------- draft ---------- */
.draft-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
.draft-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.squad-title { font-size: clamp(42px, 7vw, 74px); }
.squad-title span { color: var(--led); }
.squad-flavor { color: var(--chalk-2); max-width: 62ch; font-style: italic; margin-top: 6px; }
.tokens { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pot-tag { font: 800 16px var(--display); letter-spacing: .1em; padding: 5px 10px; border: 1.5px solid currentColor; text-transform: uppercase; transform: rotate(-2deg); display: inline-block; }
.pot-1 { color: var(--led); } .pot-2 { color: var(--mint); } .pot-3 { color: var(--sky); } .pot-4 { color: var(--chalk-2); }
.progress { height: 5px; background: var(--line); margin: 0 0 14px; }
.progress i { display: block; height: 100%; background: var(--led); box-shadow: 0 0 10px var(--led-glow); transition: width .3s; }
.line-title { font: 800 18px var(--display); letter-spacing: .09em; color: var(--chalk-3); text-transform: uppercase; margin: 16px 0 7px; display: flex; gap: 8px; align-items: baseline; }
.line-title .full { color: var(--coral); font: 700 12px var(--body); letter-spacing: .02em; text-transform: none; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.pcard {
  position: relative; display: flex; flex-direction: column; gap: 7px; text-align: left; padding: 11px 11px 10px; min-height: 104px;
  background: linear-gradient(170deg, rgba(255,255,255,.075), rgba(255,255,255,.02)); border: 1px solid var(--line); border-left: 4px solid var(--squad, var(--led)); border-radius: 3px;
  transition: transform .12s, background .15s, border-color .15s;
}
.pcard-pick { position: absolute; inset: 0; z-index: 1; border-radius: 3px; }
.pcard:hover:not(.off) { transform: translateY(-2px); background: rgba(255,255,255,.12); border-color: var(--line-2); border-left-color: var(--squad, var(--led)); }
.pcard.off { opacity: .38; }
.pcard .row { display: flex; gap: 7px; align-items: center; justify-content: space-between; }
.pcard .nm { font-weight: 700; font-size: 16px; line-height: 1.15; padding-right: 2px; }
.rate { font: 900 25px/1 var(--display); min-width: 28px; text-align: right; }
.rate.hidden { color: var(--chalk-3); }
.traits { display: flex; flex-wrap: wrap; gap: 4px; min-height: 20px; }
.scout { position: relative; z-index: 2; font-weight: 700; font-size: 12px; color: var(--led); text-decoration: underline; text-underline-offset: 2px; padding: 5px 2px; min-height: 26px; align-self: flex-start; }
.scout:disabled { color: var(--chalk-3); text-decoration: none; }
.roster-line { display: flex; justify-content: space-between; font: 800 15px var(--display); letter-spacing: .08em; text-transform: uppercase; color: var(--chalk-3); border-bottom: 1px solid var(--line); margin-top: 11px; padding-bottom: 3px; }
.roster-line:first-of-type { margin-top: 0; }
.roster-item { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; font-size: 14px; }
.roster-item small { color: var(--chalk-3); font-size: 12px; white-space: nowrap; }
.roster-empty { color: var(--chalk-3); font-size: 13px; font-style: italic; padding: 3px 0; }

/* revelação */
.reveal { text-align: center; }
.reveal h2 { font-size: clamp(46px, 8vw, 88px); }
.reveal .ovr { font-size: clamp(58px, 10vw, 110px); display: block; line-height: 1.05; }
.reveal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); gap: 8px; margin: 18px 0; text-align: left; }
.reveal-card { padding: 10px; border: 1px solid var(--line); border-left: 4px solid var(--led); border-radius: 3px; background: rgba(255,255,255,.05); opacity: 0; animation: pop .4s forwards; }
.reveal-card.gem { border-left-color: var(--mint); background: rgba(94,242,166,.1); }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }

/* ---------- vestiário ---------- */
.hub { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .85fr); gap: 16px; align-items: start; }
.next-match { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; padding: 14px 16px; margin-bottom: 12px; }
.next-match .tm { font: 900 clamp(21px, 3vw, 30px)/1 var(--display); text-transform: uppercase; }
.next-match .tm:last-child { text-align: right; }
.next-match small { display: block; color: var(--chalk-3); font: 600 13px var(--body); margin-top: 4px; text-transform: none; }
.next-match .vs { font-size: 28px; }
.pitch-wrap { position: relative; }
.pitch {
  position: relative; width: 100%; aspect-ratio: 10 / 9; border: 2px solid var(--line-2); border-radius: 4px; overflow: hidden;
  background: repeating-linear-gradient(0deg, var(--turf) 0 11.1%, var(--turf-2) 11.1% 22.2%);
}
.pitch svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.slot { position: absolute; transform: translate(-50%, 50%); display: flex; flex-direction: column; align-items: center; gap: 2px; width: 19%; min-width: 62px; padding: 4px 0; border-radius: 4px; }
.slot .shirt {
  width: clamp(34px, 5vw, 46px); height: clamp(34px, 5vw, 46px); display: grid; place-items: center; border-radius: 50%; font: 900 clamp(16px, 2.3vw, 21px)/1 var(--display);
  background: var(--team); color: var(--team-2); border: 2px solid rgba(255,255,255,.75); box-shadow: 0 3px 8px rgba(0,0,0,.5); transition: transform .12s;
  text-shadow: 0 0 2px rgba(0,0,0,.25);
}
.slot:hover .shirt { transform: scale(1.1); }
.slot.sel .shirt { outline: 3px solid var(--mint); outline-offset: 2px; }
.slot.warn .shirt { border-color: var(--led); border-style: dashed; }
.slot.out .shirt { background: var(--coral); color: #fff; border-color: #fff; }
.slot .nm { font-size: 12px; line-height: 1.1; font-weight: 700; text-align: center; text-shadow: 0 1px 3px #000, 0 0 6px #000; max-width: 100%; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.slot .p { font-size: 10px; font-weight: 800; letter-spacing: .08em; color: rgba(255,255,255,.72); }
.bench { display: grid; grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: 6px; }
.bench button { display: flex; gap: 7px; align-items: center; text-align: left; padding: 7px 9px; min-height: 44px; border: 1px solid var(--line); border-radius: 3px; font-size: 13px; font-weight: 600; line-height: 1.1; }
.bench button:hover { border-color: var(--chalk-2); }
.bench button.sel { border-color: var(--mint); background: rgba(94,242,166,.13); }
.bench button.out { opacity: .5; }
.bench b { font: 900 20px/1 var(--display); }
.table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.table th { color: var(--chalk-3); font-size: 11px; letter-spacing: .05em; font-weight: 700; text-align: center; padding: 3px 4px; border-bottom: 1px solid var(--line-2); }
.table th:first-child, .table td:first-child { text-align: left; }
.table td { padding: 6px 4px; text-align: center; border-bottom: 1px solid var(--line); }
.table tr.me td { color: var(--led); font-weight: 700; background: rgba(254,50,49,.07); }
.table tr.q td:first-child { box-shadow: inset 3px 0 0 var(--mint); padding-left: 8px; }
.table td:first-child { overflow-wrap: anywhere; }
.side-stack { display: grid; gap: 12px; }
.tie { display: flex; justify-content: space-between; gap: 8px; padding: 6px 4px; border-bottom: 1px solid var(--line); font-size: 14px; }
.tie.me { color: var(--led); font-weight: 700; }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: flex-end; margin-bottom: 10px; }
.notice { color: #ff8f8e; background: rgba(254,50,49,.1); border-left: 3px solid var(--led); padding: 8px 10px; font-size: 14px; margin: 8px 0; }
.play-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; }
.play-row .btn.primary { flex: 1 1 220px; font-size: 24px; padding: 18px; }

/* ---------- partida ---------- */
.scoreboard { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(8px, 2vw, 22px); padding: clamp(10px, 2vw, 18px) clamp(12px, 2.4vw, 26px); }
.scoreboard .team { font: 900 clamp(19px, 3.4vw, 38px)/1 var(--display); text-transform: uppercase; color: var(--chalk); overflow-wrap: anywhere; }
.scoreboard .team:last-child { text-align: right; }
.scoreboard .team.me { color: var(--led); }
.scoreboard .mid { text-align: center; }
.scoreboard .sc { font-size: clamp(52px, 10vw, 104px); line-height: .95; white-space: nowrap; }
.scoreboard .clock { font-size: clamp(23px, 3vw, 34px); line-height: 1.1; color: var(--coral); text-shadow: 0 0 10px rgba(255,154,60,.55); }
.scoreboard .stage { font-size: 12px; color: var(--chalk-3); font-weight: 600; }
.sc.bump { animation: bump .6s; }
@keyframes bump { 30% { transform: scale(1.18); filter: brightness(1.6); } }
.match-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 390px); gap: 14px; margin-top: 12px; }
.feed-panel { padding: 0; display: flex; flex-direction: column; min-height: 330px; max-height: 56vh; }
.feed-panel h3 { padding: 12px 16px 8px; margin: 0; font-size: 20px; border-bottom: 1px solid var(--line); }
.feed { overflow-y: auto; flex: 1; padding: 2px 0; }
.ev { display: grid; grid-template-columns: 42px 1fr; gap: 6px; padding: 7px 16px 7px 12px; border-bottom: 1px solid rgba(255,255,255,.06); font-size: 15px; animation: slide .25s; }
@keyframes slide { from { opacity: 0; transform: translateY(-6px); } }
.ev .m { color: var(--chalk-3); font-weight: 700; font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; padding-top: 1px; }
.ev.filler { color: var(--chalk-3); font-size: 14px; }
.ev.chance { color: var(--chalk-2); }
.ev.goal { background: rgba(254,50,49,.13); color: #ff8f8e; font-weight: 700; }
.ev.goal.them { background: rgba(255,154,60,.13); color: #ffc08a; }
.ev.yellow { color: #ffe27a; } .ev.red { color: #ff4f4f; font-weight: 700; }
.ev.save { color: var(--mint); font-weight: 600; }
.ev.moment { color: var(--sky); font-weight: 600; }
.ev.whistle { color: var(--chalk); font-weight: 700; }
.radar { padding: 10px; }
.radar svg { width: 100%; display: block; background: repeating-linear-gradient(90deg, var(--turf) 0 12.5%, var(--turf-2) 12.5% 25%); border-radius: 3px; }
.radar .dot, .radar .ball { transition: transform .42s ease-in-out; }
.momentum { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; font-size: 12px; font-weight: 700; color: var(--chalk-3); margin-top: 8px; }
.momentum .bar { height: 8px; background: rgba(255,255,255,.1); position: relative; overflow: hidden; }
.momentum .bar i { position: absolute; top: 0; bottom: 0; left: 50%; width: 0; background: var(--led); transition: all .4s; }
.controls { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.controls .btn { flex: 1 1 auto; }

/* ---------- camadas de decisão ---------- */
#overlay:empty { display: none; }
#overlay { position: fixed; inset: 0; z-index: 50; overflow-y: auto; background: rgba(0, 0, 0, .86); backdrop-filter: blur(4px); display: flex; padding: 14px; animation: fadein .18s; }
@keyframes fadein { from { opacity: 0; } }
.sheet { margin: auto; width: min(860px, 100%); background: var(--night-2); border: 1px solid var(--line-2); border-radius: 5px; padding: clamp(15px, 3vw, 28px); box-shadow: 0 30px 80px -30px #000; }
.sheet h2 { font-size: clamp(36px, 6.5vw, 62px); }
.sheet .kicker { font-weight: 700; font-size: 13px; letter-spacing: .09em; color: var(--led); text-transform: uppercase; margin-bottom: 6px; }
.sheet .intro { font-size: clamp(16px, 2.3vw, 19px); color: var(--chalk-2); margin: 8px 0 14px; }
.opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 9px; }
.opt { position: relative; text-align: left; padding: 15px 14px; min-height: 112px; display: flex; flex-direction: column; gap: 6px; background: rgba(255,255,255,.05); border: 1.5px solid var(--line-2); border-radius: 4px; transition: transform .1s, background .12s, border-color .12s; }
.opt:hover, .opt:focus-visible { background: rgba(254,50,49,.11); border-color: var(--led); transform: translateY(-2px); }
.opt .t { font: 900 25px/1 var(--display); text-transform: uppercase; }
.opt .d { font-size: 14px; color: var(--chalk-2); }
.opt .k { position: absolute; right: 10px; top: 9px; font: 800 12px var(--body); color: var(--chalk-3); }
.opt .tr { color: var(--mint); font-size: 13px; font-weight: 700; margin-top: auto; }
.timer { height: 5px; background: var(--line); margin-bottom: 14px; overflow: hidden; }
.timer i { display: block; height: 100%; background: var(--coral); transform-origin: left; animation: drain linear forwards; }
@keyframes drain { to { transform: scaleX(0); } }
.result { text-align: center; padding: 12px 0; }
.result h2 { font-size: clamp(54px, 12vw, 120px); animation: stamp .35s cubic-bezier(.2,1.5,.5,1); }
@keyframes stamp { from { transform: scale(1.7); opacity: 0; } }
.result.good h2 { color: var(--win); text-shadow: 0 0 34px rgba(61,220,132,.45); }
.result.bad h2 { color: var(--loss); }
.result.neutral h2 { color: var(--draw); }
.result p { font-size: clamp(16px, 2.4vw, 20px); margin: 10px auto 16px; max-width: 54ch; color: var(--chalk-2); }
.full-sheet { width: min(980px, 100%); }
.sub-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; }
.sub-list { display: grid; gap: 5px; align-content: start; }
.sub-list button { display: flex; justify-content: space-between; gap: 8px; text-align: left; padding: 8px 10px; min-height: 42px; border: 1px solid var(--line); border-radius: 3px; font-size: 14px; font-weight: 600; }
.sub-list button:hover:not(:disabled) { border-color: var(--chalk-2); }
.sub-list button.sel { border-color: var(--mint); background: rgba(94,242,166,.12); }
.sub-list button:disabled { opacity: .45; }
.sub-list small { color: var(--chalk-3); }

/* ---------- pênalti ---------- */
/* A cena encolhe em telas baixas para o painel do cobrador continuar visível sem rolar. */
.pen { margin: auto; width: min(960px, 100%, max(540px, calc((100dvh - 310px) * 1.667))); display: grid; gap: 10px; }
.pen:focus { outline: none; }
.sheet:focus { outline: none; }
.pen-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 6px 16px; }
.pen-head h2 { font-size: clamp(34px, 6vw, 58px); }
.pen-head h2 span { color: var(--coral); }
.pen-stage { position: relative; aspect-ratio: 800 / 480; border-radius: 5px; overflow: hidden; border: 1px solid var(--line-2); background: #05100c; }
.pen-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.zones { position: absolute; left: 21.25%; top: 22.9%; width: 57.5%; height: 45.9%; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 2px; }
.zone { border: 1px dashed rgba(255,255,255,.34); background: rgba(255,255,255,.025); border-radius: 2px; display: grid; place-items: center; font: 900 clamp(13px, 2.5vw, 21px) var(--display); color: rgba(255,255,255,.55); transition: background .1s, border-color .1s, color .1s; }
.zone:hover, .zone:focus-visible { background: rgba(254,50,49,.3); border: 2px solid var(--led); color: #fff; }
.zone.on { background: rgba(254,50,49,.4); border: 2px solid var(--led); color: #fff; }
.zones.locked .zone { pointer-events: none; }
.zones.gone { display: none; }
@media (hover: none) { .zone { color: transparent; } }
.pen-info { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.pen-info .panel { padding: 11px 13px; font-size: 14px; }
.pen-info h3 { font-size: 17px; margin-bottom: 7px; letter-spacing: .05em; }
.kickers { display: flex; flex-wrap: wrap; gap: 6px; }
.kickers button { padding: 7px 10px; border: 1px solid var(--line-2); border-radius: 3px; font-size: 14px; font-weight: 700; min-height: 40px; }
.kickers button[aria-pressed="true"] { background: var(--led); color: #fff; border-color: var(--led); }
.report { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.report div { text-align: center; }
.report .b { height: 50px; display: flex; align-items: flex-end; background: rgba(255,255,255,.05); margin-bottom: 3px; }
.report .b i { display: block; width: 100%; background: var(--sky); }
.report small { font-size: 12px; color: var(--chalk-2); }
.tell { color: var(--mint); font-weight: 700; margin-top: 8px; }
.meter-box { position: absolute; left: 10%; right: 10%; bottom: 5%; padding: 9px 12px 11px; background: rgba(0,0,0,.86); border: 1px solid var(--line-2); border-radius: 4px; text-align: center; font-weight: 700; font-size: 14px; }
.meter { position: relative; height: 18px; margin-top: 7px; background: rgba(255,154,60,.35); border-radius: 2px; overflow: hidden; cursor: pointer; }
.meter .green { position: absolute; top: 0; bottom: 0; background: var(--mint); }
.meter .needle { position: absolute; top: 0; bottom: 0; width: 4px; margin-left: -2px; background: #fff; box-shadow: 0 0 8px #fff; }
.shoot-pips { display: flex; flex-direction: column; gap: 3px; font-size: 13px; font-weight: 700; }
.shoot-pips .r { display: flex; align-items: center; gap: 5px; justify-content: flex-end; }
.pip { width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--line-2); display: inline-block; }
.pip.g { background: var(--mint); border-color: var(--mint); } .pip.x { background: var(--loss); border-color: var(--loss); }
.pen-banner { position: absolute; left: 0; right: 0; top: 34%; text-align: center; pointer-events: none; font: 900 clamp(46px, 12vw, 118px)/1 var(--display); text-transform: uppercase; animation: stamp .3s cubic-bezier(.2,1.5,.5,1); -webkit-text-stroke: 2px rgba(0,0,0,.6); }
.pen-banner.good { color: var(--led); text-shadow: 0 0 40px var(--led-glow); }
.pen-banner.bad { color: var(--loss); }
.pen-after { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 13px; }
.flash { position: fixed; inset: 0; pointer-events: none; background: var(--led); opacity: 0; z-index: 60; animation: flash .5s; }
@keyframes flash { 0% { opacity: .55; } 100% { opacity: 0; } }

/* ---------- fim ---------- */
.end-hero { text-align: center; padding: clamp(18px, 5vw, 52px) 0 clamp(14px, 3vw, 30px); }
.end-hero h1 { font-size: clamp(44px, 9vw, 112px); line-height: 0.98; margin-top: 10px; text-wrap: balance; overflow-wrap: anywhere; color: var(--led); text-shadow: 0 0 44px var(--led-glow); }
.end-hero .eyebrow { position: relative; z-index: 1; }
.end-hero.lost h1 { color: var(--chalk); text-shadow: none; }
.end-hero p { font-size: clamp(17px, 2.4vw, 22px); color: var(--chalk-2); margin-top: 12px; }
.end-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 14px; align-items: start; }
.journey { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.journey small { color: var(--chalk-3); display: block; font-size: 12px; }
.journey .s { font: 900 25px var(--display); }
.journey.w .s { color: var(--win); } .journey.l .s { color: var(--loss); } .journey.d .s { color: var(--draw); }
.end-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 18px; }

#toast { position: fixed; left: 50%; bottom: 20px; transform: translate(-50%, 60px); padding: 10px 16px; background: var(--chalk); color: #0a0a0b; font-weight: 700; font-size: 14px; border-radius: 3px; transition: transform .25s, opacity .25s; z-index: 80; max-width: 90vw; opacity: 0; visibility: hidden; pointer-events: none; }
#toast.on { transform: translate(-50%, 0); opacity: 1; visibility: visible; }

@media (max-width: 900px) {
  .menu, .draft-grid, .hub, .match-layout, .end-grid { grid-template-columns: minmax(0, 1fr); }
  .menu { min-height: 0; }
  .roster-panel { order: 2; }
  .feed-panel { min-height: 240px; max-height: 44vh; }
}
@media (max-width: 560px) {
  .sub-grid { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr 1fr; }
  .pcard { min-height: 112px; }
  .pcard .nm { font-size: 14px; }
  .opts { grid-template-columns: 1fr; }
  .opt { min-height: 0; }
  .slot .nm { font-size: 11px; }
  .slot { min-width: 54px; }
  .meter-box { left: 3%; right: 3%; }
}
@media (prefers-reduced-motion: reduce) {
  /* As cenas de festa (#fx) ficam de fora: têm botão de pular e sem animação não aparecia papel picado nem fogos. */
  *:not(#fx, #fx *), *:not(#fx *)::before, *:not(#fx *)::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- salas online ---------- */
.online-box { display: grid; gap: 9px; padding: 12px; border: 1px solid var(--led); border-radius: 4px; background: rgba(254,50,49,.05); }
.online-box .btn { width: 100%; }
.join-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.join-row .btn { width: auto; }
.code-input { text-transform: uppercase; letter-spacing: .28em; font-weight: 800; text-align: center; }
.code-input::placeholder { letter-spacing: .12em; font-weight: 600; }
.lobby { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr); gap: clamp(16px, 4vw, 44px); align-items: start; margin-top: clamp(8px, 4vh, 44px); }
.code-board { display: inline-flex; padding: 12px 26px; margin-top: 8px; }
.code-led { font-size: clamp(66px, 12vw, 130px); line-height: 1; letter-spacing: .06em; }
.peer { display: flex; align-items: center; gap: 9px; padding: 8px 2px; border-bottom: 1px solid var(--line); font-size: 15px; overflow-wrap: anywhere; }
.peer small { margin-left: auto; color: var(--chalk-3); font-size: 12px; white-space: nowrap; padding-left: 8px; }
.peer.me span { color: var(--led); font-weight: 700; }
.peer.off { opacity: .5; }
.peer-dot { width: 13px; height: 13px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.4); }
.waiting { padding: clamp(14px, 5vh, 50px) 0; }
.duel-tag { color: var(--coral); font-weight: 800; letter-spacing: .08em; }
.count { font-variant-numeric: tabular-nums; color: var(--chalk); }
/* Telas com relógio (draft, esquema, vestiário): a barra de cima fica presa no topo, o tempo sempre à vista. */
.wrap:has(#count) > .topbar, .wrap:has(#countWrap) > .topbar { position: sticky; top: 0; z-index: 30; background: rgba(10,10,11,.94); backdrop-filter: blur(6px); margin-left: calc(-1 * clamp(14px, 3vw, 28px)); margin-right: calc(-1 * clamp(14px, 3vw, 28px)); padding: 10px clamp(14px, 3vw, 28px); }
.wrap:has(#count) > .topbar .count { font-size: 1.25em; }
.count.hot { color: var(--coral); }
.board-score { font-size: 20px; white-space: nowrap; padding: 0 8px; }
#netBanner { position: fixed; top: 0; left: 0; right: 0; z-index: 85; padding: 8px; text-align: center; font-weight: 700; font-size: 14px; background: var(--coral); color: #fff; }
@media (max-width: 900px) { .lobby { grid-template-columns: minmax(0, 1fr); } }

/* botão que também avança sozinho: a barra mostra o tempo restante */
.btn.auto { position: relative; overflow: hidden; }
.btn.auto::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(0,0,0,.35); transform-origin: left; animation: drain var(--auto, 2400ms) linear forwards; }

/* ---------- leveza: entre rodadas ---------- */
.last-result { margin: 10px 0 0; color: var(--chalk-2); font-size: 15px; }
.last-result b { color: var(--led); padding: 0 4px; font-variant-numeric: tabular-nums; }
.cal { display: flex; flex-wrap: wrap; gap: 6px; }
.cal-chip { font-size: 13px; padding: 6px 9px; border-radius: 3px; border: 1px solid var(--line); color: var(--chalk-2); }
.cal-chip b { color: var(--chalk); margin-right: 3px; }
.cal-chip.cal-copa { border-color: rgba(94,242,166,.5); }
.cal-chip.cal-copa b { color: var(--mint); }
.cal-chip.cal-continental { border-color: rgba(111,211,255,.5); }
.cal-chip.cal-continental b { color: var(--sky); }
.panel.on-now { border-color: var(--led); }
.name-row { display: grid; grid-template-columns: 48px 1fr; gap: 8px; align-items: center; }
.name-row label { font-weight: 800; font-size: 12px; color: var(--chalk-2); letter-spacing: .03em; }
.name-row .input { min-height: 40px; padding: 7px 10px; font-size: 15px; }
.name-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 7px; }
.hub .play-row .btn { flex: 1 1 auto; }
.fold { padding: 0; }
.fold > summary { cursor: pointer; padding: 13px 16px; min-height: 46px; font: 900 19px/1 var(--display); text-transform: uppercase; color: var(--chalk-2); }
.fold > summary:hover { color: var(--chalk); }
.fold[open] { padding: 0 16px 14px; }
.fold[open] > summary { padding: 13px 0; color: var(--chalk); }
.unbeaten { margin: 6px 0 0; color: var(--mint); font-weight: 700; font-size: 15px; }

/* retrospecto entre amigos */
.h2h-line { margin: 10px 0 0; font-size: 15px; color: var(--chalk-2); }
.h2h-line b { color: var(--coral); }
.h2h-name { color: var(--chalk); }
.h2h-rec { display: block; margin-top: 5px; font: 600 14px/1.2 var(--body); text-transform: none; color: var(--chalk-2); }

/* carreira */
.career-line { margin: 0 0 6px; font-weight: 700; font-size: 14px; color: var(--mint); }
.table tr.z td:first-child { box-shadow: inset 3px 0 0 var(--coral); padding-left: 8px; }
.off-good { color: var(--mint) !important; font-weight: 700; }
.off-bad { color: var(--loss) !important; font-weight: 700; }
.off-muted { color: var(--chalk-3) !important; }
.career-row { display: grid; grid-template-columns: 36px 1fr auto; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; align-items: start; }
.career-row b { font: 900 22px/1 var(--display); color: var(--led); }
.career-row small { display: block; font-size: 12px; margin-top: 3px; }
.career-row > small { margin-top: 0; white-space: nowrap; }

/* lista de ligas */
select.input { appearance: none; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--chalk-2) 50%), linear-gradient(135deg, var(--chalk-2) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 36px; }
select.input option { background: var(--night-2); color: var(--chalk); }

/* escudo */
.crest { display: inline-block; vertical-align: middle; flex: none; filter: drop-shadow(0 2px 3px rgba(0,0,0,.45)); }
.crest-row { display: flex; align-items: center; gap: 12px; }
.crest-row .btn { flex: 1; }
.next-match .tm .crest { display: block; margin-bottom: 4px; }
.next-match .tm:last-child .crest { margin-left: auto; }
.scoreboard .team .crest { display: block; margin-bottom: 5px; }
.scoreboard .team:last-child .crest { margin-left: auto; }
.end-hero > .crest { display: block; margin: 0 auto 8px; }
.peer .crest { margin-right: 1px; }
.crest-editor { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 20px; margin-top: 14px; align-items: start; }
.crest-preview { display: flex; flex-direction: column; align-items: center; gap: 12px; position: sticky; top: 0; }
.crest-preview label { display: block; font-weight: 700; font-size: 13px; letter-spacing: .05em; color: var(--chalk-2); margin-bottom: 6px; text-transform: uppercase; }
.crest-options > .field-label { margin-top: 12px; }
.crest-options > .field-label:first-child { margin-top: 0; }
.crest-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.crest-pick { padding: 5px; border: 1.5px solid var(--line); border-radius: 4px; min-width: 50px; min-height: 58px; display: grid; place-items: center; }
.crest-pick:hover { border-color: var(--chalk-2); }
.crest-pick[aria-pressed="true"] { border-color: var(--led); background: rgba(254,50,49,.12); }
.crest-colors { margin-top: 12px; }
.crest-colors .swatches { gap: 5px; }
.crest-colors .swatch { width: 30px; height: 30px; }
@media (max-width: 640px) {
  /* No celular a prévia fica presa no topo, pequena, para ver o escudo mudar enquanto escolhe */
  .crest-sheet { padding-top: 0; }
  .crest-editor { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .crest-preview { position: sticky; top: 0; z-index: 2; display: grid; grid-template-columns: 72px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; row-gap: 6px; align-items: center; padding: 12px 0; background: var(--night); border-bottom: 1px solid var(--line); }
  .crest-preview > .crest { grid-row: 1 / 3; width: 72px; height: 86px; }
  .crest-preview > .btn { justify-self: start; }
  .crest-preview label { margin-bottom: 4px; }
  .crest-pick { min-width: 46px; min-height: 52px; }
}

/* esquema antes do draft */
.scheme-step { max-width: 960px; margin: 22px auto 40px; }
.scheme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-top: 16px; }
.scheme-card { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 12px; border: 1.5px solid var(--line); border-radius: 4px; text-align: left; color: var(--chalk); }
.scheme-card:hover, .scheme-card:focus-visible { border-color: var(--led); }
.scheme-card.on { border-color: var(--chalk-2); }
.scheme-card b { font-family: 'Big Shoulders Display', Impact, sans-serif; font-size: 26px; line-height: 1.1; }
.scheme-card span { font-size: 14px; color: var(--chalk-2); }
.scheme-card small { font-size: 12px; color: var(--chalk-2); opacity: .8; }
.scheme-pitch { width: 100%; max-width: 120px; margin: 0 auto 6px; color: var(--chalk-2); }
@media (max-width: 640px) { .scheme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* alerta do vestiário: suspensos, lesionados e fora de posição */
.lineup-alert { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; margin: 10px 0; padding: 10px 12px; border: 1px solid rgba(255,201,74,.55); border-left: 4px solid var(--draw); border-radius: 4px; background: rgba(255,201,74,.07); }
.lineup-alert .al-title { font: italic 900 17px var(--display); text-transform: uppercase; color: var(--draw); }
.lineup-alert ul { margin: 6px 0 4px; padding-left: 18px; display: grid; gap: 2px; font-size: 14px; }
.lineup-alert li.al-susp::marker { color: var(--loss); } .lineup-alert li.al-inj::marker { color: var(--coral); } .lineup-alert li.al-pos::marker { color: var(--draw); }
.lineup-alert .btn { flex: none; }
/* decisão: atacando (verde) ou defendendo (vermelho), bem à vista */
.moment-sheet { border-width: 2px; }
.moment-sheet.is-atk { border-color: var(--win); box-shadow: 0 0 40px -12px rgba(61,220,132,.6); }
.moment-sheet.is-def { border-color: var(--loss); box-shadow: 0 0 40px -12px rgba(255,69,69,.6); }
.moment-side { margin: 6px 0 8px; padding: 8px 12px; border-radius: 4px; font: italic 900 clamp(20px, 4.5vw, 28px)/1 var(--display); letter-spacing: .03em; text-align: center; }
.is-atk .moment-side { background: rgba(61,220,132,.16); color: var(--win); }
.is-def .moment-side { background: rgba(255,69,69,.16); color: var(--loss); }
/* janela de transferências: escolher quem sai */
.release-list { display: grid; gap: 6px; margin-top: 12px; }
.release { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 11px 12px; min-height: 48px; border: 1px solid var(--line-2); border-radius: 4px; text-align: left; background: rgba(255,255,255,.03); }
.release:hover { border-color: var(--loss); background: rgba(255,69,69,.08); }
.release b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.release .r { font: 900 18px var(--dot); color: var(--chalk-2); }
/* assistir ao jogo de um amigo */
.watch-btn { min-height: 32px; padding: 6px 10px; font-size: 13px; margin-left: 8px; }
.spectating { align-self: center; font: italic 900 16px var(--display); text-transform: uppercase; color: var(--draw); letter-spacing: .04em; }
/* placar da ida no quadro do próximo jogo */
.next-match .first-leg { grid-column: 1 / -1; text-align: center; font-weight: 700; font-size: 15px; color: var(--chalk-2); padding-top: 8px; border-top: 1px solid var(--line); }
.next-match .first-leg b { font-size: 20px; margin: 0 6px; }
/* estádio do jogo no quadro do próximo jogo */
.next-match .venue { grid-column: 1 / -1; text-align: center; font-size: 13px; font-weight: 700; color: var(--chalk-3); letter-spacing: .04em; text-transform: uppercase; }
/* placares da galera: agregado e quem assiste */
#board .tie { flex-wrap: wrap; }
.board-agg { grid-column: 1 / -1; color: var(--draw); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.board-watch { grid-column: 1 / -1; color: var(--chalk-2); font-size: 12px; }
.watch-line { font-size: 12px; color: var(--chalk-2); margin-top: 2px; min-height: 0; }
.watch-line:empty { display: none; }

/* Rodada da liga ao vivo: todos os jogos e a tabela "se acabasse agora" */
.gl-sub { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--chalk-3, #8a8a92); margin: 8px 0 4px; }
.league-live .gl-games { max-height: 260px; overflow-y: auto; }
.league-live .gl-games .tie { font-size: 13px; padding: 5px 0; }
.league-live .gl-table { max-height: 380px; overflow-y: auto; }
.gl-row.zr-cont { box-shadow: inset 3px 0 0 var(--sky); }
.gl-row.zr-pre { box-shadow: inset 3px 0 0 #b9a6ff; }
.gl-row.zr-sula { box-shadow: inset 3px 0 0 rgba(111,211,255,.5); }
.gl-row.zr-up, .gl-row.zr-maybe { box-shadow: inset 3px 0 0 var(--mint); }
.gl-row.zr-champ { box-shadow: inset 3px 0 0 #ffc94a; }
.gl-row.zr-down { box-shadow: inset 3px 0 0 var(--led); }
.gl-row.zr-risk { box-shadow: inset 3px 0 0 rgba(254,50,49,.5); }
.gl-row .mv { font-style: normal; font-size: 10px; margin-left: 4px; }
.gl-row .mv.up { color: var(--mint); } .gl-row .mv.down { color: var(--led); }

/* Sala de troféus: duas estantes (sozinho e com a galera) e taças maiores, uma por competição */
.trophy-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 12px; }
.trophy-tab { display: flex; justify-content: center; align-items: center; gap: 8px; padding: 10px; border: 1px solid var(--line-2); border-radius: 4px; background: #0b0b0d;
  color: var(--chalk-2); font: italic 900 17px/1 var(--display); text-transform: uppercase; cursor: pointer; }
.trophy-tab b { font: 700 12px/1 var(--body, inherit); background: #26262a; color: var(--chalk); border-radius: 999px; padding: 3px 7px; font-style: normal; }
.trophy-tab.on { border-color: var(--led); color: var(--chalk); background: rgba(254,50,49,.12); }
.trophy-tab.on b { background: var(--led); color: #fff; }
.trophy { grid-template-columns: 92px minmax(0, 1fr); }
.trophy-cup { width: 84px; height: 105px; }
.trophy-cup.glow-silver { animation-name: shine-silver; }
@keyframes shine-silver { 0%, 100% { filter: drop-shadow(0 6px 10px rgba(220, 225, 235, .15)); } 50% { filter: drop-shadow(0 6px 16px rgba(235, 240, 250, .4)); } }

/* Tática e trocas na partida: o mesmo campinho do vestiário. Toca em quem sai, depois em quem entra. */
.live-pitch { max-width: 520px; margin: 12px auto 8px; }
#tactics .bench { margin-bottom: 14px; }
#tactics .bench button:disabled { opacity: .45; cursor: default; }

/* Confirmação de "Sair da sala": por cima de tudo, até de um lance aberto. */
#confirmLeave { position: fixed; inset: 0; z-index: 80; background: rgba(0, 0, 0, .8); display: flex; align-items: center; justify-content: center; padding: 14px; animation: fadein .18s; }
#confirmLeave .sheet { max-width: 420px; margin: 0; }

/* Fotos reais das taças: recorte em retrato focado no alto (a taça), cantos arredondados e o mesmo brilho dos desenhos. */
.trophy-photo { width: 84px; height: 105px; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .55)) drop-shadow(0 0 10px rgba(255, 200, 80, .22)); }
.party-cup .trophy-photo { width: clamp(120px, 24vw, 190px); height: auto; aspect-ratio: 4 / 5; filter: drop-shadow(0 0 26px rgba(255, 210, 100, .55)); }
.trophy-credits { margin-top: 14px; font-size: 12px; color: var(--chalk-3); }
.trophy-credits summary { cursor: pointer; font-weight: 700; }
.trophy-credits ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 2px; }
.trophy-credits a { color: inherit; text-decoration: underline; }

/* Placar: cartão vermelho ao lado do nome do time com jogador expulso. */
.scoreboard .reds { display: inline-flex; gap: 3px; margin-left: 6px; vertical-align: middle; }
.red-card { display: inline-block; width: 10px; height: 14px; border-radius: 2px; background: #e10600; box-shadow: 0 0 0 1px rgba(0,0,0,.4), 0 0 6px rgba(225,6,0,.6); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Salas abertas (menu) */
.open-room { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.open-room span { display: flex; flex-direction: column; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.open-room small { color: var(--chalk-3); font-size: 12px; }
/* O botão "Entrar" da sala aberta não ocupa a linha inteira (o .online-box .btn deixa os botões com 100%). */
.online-box .open-room .btn, .open-room .btn { margin-left: auto; flex: none; width: auto; }
.peer .kick { min-height: 0; padding: 0 0 0 8px; font-size: 12px; color: var(--loss); }

/* Chat da sala */
#chatDock { position: fixed; right: 12px; bottom: 12px; z-index: 45; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; max-width: calc(100vw - 24px); }
.chat-fab { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; min-height: 42px; border-radius: 999px; background: var(--night-2); border: 1px solid var(--line-2); color: var(--chalk); font-weight: 700; font-size: 14px; box-shadow: 0 6px 18px rgba(0, 0, 0, .5); }
.chat-badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--led); color: #fff; font-size: 12px; line-height: 20px; text-align: center; }
.chat-peek { order: -1; max-width: 280px; padding: 8px 12px; border-radius: 10px; background: var(--night-2); border: 1px solid var(--line); font-size: 14px; box-shadow: 0 6px 18px rgba(0, 0, 0, .5); animation: fadein .18s; }
.chat-peek .chat-line { margin: 0; }
.chat-panel { width: min(340px, calc(100vw - 24px)); max-height: min(460px, 70vh); display: flex; flex-direction: column; background: var(--night-2); border: 1px solid var(--line-2); border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, .6); overflow: hidden; }
.chat-panel header { display: flex; align-items: center; justify-content: space-between; padding: 6px 12px; border-bottom: 1px solid var(--line); }
.chat-panel header .link { min-height: 0; padding: 4px 0; font-size: 13px; }
.chat-list { flex: 1; overflow-y: auto; padding: 8px 12px; display: flex; flex-direction: column; gap: 4px; min-height: 120px; }
.chat-line { font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; margin: 0; }
.chat-line.me { color: var(--chalk-2); }
.chat-quick { display: flex; gap: 6px; overflow-x: auto; padding: 6px 12px; border-top: 1px solid var(--line); }
.chat-quick button { flex: none; padding: 5px 10px; min-height: 32px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; color: var(--chalk-2); }
.chat-quick button:hover { border-color: var(--chalk-2); color: var(--chalk); }
.chat-form { display: flex; gap: 6px; padding: 8px 12px 10px; }
.chat-form .input { flex: 1; min-width: 0; padding: 8px 10px; font-size: 15px; }

/* estatísticas da sala de troféus e ranking geral: disputas, títulos e aproveitamento */
.play-tabs.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.play-tabs.three button { font-size: 16px; padding: 14px 4px; }
.stat-filters { display: grid; gap: 10px; margin: 14px 0 6px; }
.stat-selects { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.stat-selects .input { width: 100%; }
.stat-headline { font: 700 13px/1.3 var(--body); letter-spacing: .06em; text-transform: uppercase; color: var(--chalk-2); margin: 8px 0 0; }
.stat-headline .link { font-size: 12px; margin-left: 6px; text-transform: none; letter-spacing: 0; }
.trophy-stat small { display: block; margin-top: 4px; font-size: 11px; line-height: 1.25; color: var(--chalk-3); }
.stat-sub { font-size: 13px; margin: -2px 0 10px; }
.stat-note { font-size: 12px; margin-top: 8px; }
.sw { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 2px; }
.stack-wrap { margin: 6px 0 14px; }
.stack-bar { display: flex; gap: 2px; height: 8px; border-radius: 4px; overflow: hidden; }
.stack-bar.big { height: 26px; }
.stack-bar i { display: grid; place-items: center; min-width: 4px; font: 800 12px/1 var(--body); font-style: normal; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.45); }
.stack-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 13px; color: var(--chalk-2); }
.stack-legend span { display: inline-flex; align-items: center; gap: 6px; }
.stack-legend b { color: var(--chalk); }
.comp-table { display: grid; gap: 2px; margin: 4px 0 14px; }
.comp-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(70px, 1.5fr) 52px 48px; gap: 10px; align-items: center; width: 100%; text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); border-radius: 3px; }
button.comp-row:hover { background: rgba(255,255,255,.05); }
.comp-row.head { font: 700 11px/1 var(--body); letter-spacing: .07em; text-transform: uppercase; color: var(--chalk-3); padding-bottom: 6px; }
.comp-row.head span:nth-child(n+3) { text-align: right; }
.comp-name { display: flex; align-items: center; gap: 8px; min-width: 0; }
.comp-name > span { display: grid; min-width: 0; }
.comp-name b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.comp-name small { font-size: 12px; color: var(--chalk-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.comp-track { display: block; }
.comp-track .trk { display: block; height: 10px; min-width: 10px; border-radius: 4px; background: rgba(255,255,255,.1); overflow: hidden; }
.comp-track .fill { display: block; height: 100%; border-radius: 4px; }
.comp-num { display: grid; text-align: right; line-height: 1.05; }
.comp-num b { font: 900 20px/1 var(--display); }
.comp-num small, .comp-pct { font-size: 12px; color: var(--chalk-2); }
.comp-pct { text-align: right; font-weight: 700; }
.camp-list { margin-bottom: 14px; max-height: 320px; overflow: auto; }
.rank-sort { align-items: center; margin-top: 2px; }
.rank-sort .field-label { margin: 0 4px 0 0; }
.rank-lead { font-size: 15px; margin: 2px 0 0; color: var(--chalk-2); }
.rank-lead b { color: var(--chalk); }
.rank-list { display: grid; gap: 4px; margin-top: 4px; }
.rank-row { display: grid; grid-template-columns: 30px 30px minmax(0, 1fr) 46px 50px 44px; gap: 8px; align-items: center; width: 100%; text-align: left; padding: 8px; border: 1px solid var(--line); border-radius: 4px; background: rgba(255,255,255,.025); }
.rank-row:hover { border-color: var(--line-2); background: rgba(255,255,255,.05); }
.rank-row.me { border-color: rgba(254,50,49,.7); background: rgba(254,50,49,.1); }
.rank-row .crest { width: 30px; height: 36px; }
.rank-pos { font: 900 18px/1 var(--display); font-style: italic; color: var(--chalk-2); text-align: center; }
.rank-who { display: grid; gap: 3px; min-width: 0; }
.rank-who b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-who small { font-size: 12px; color: var(--chalk-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-who .stack-bar { height: 6px; margin-top: 2px; }
.rank-n, .rank-d, .rank-p { display: grid; text-align: right; line-height: 1.05; }
.rank-n b { font: 900 22px/1 var(--display); }
.rank-d b, .rank-p b { font-size: 14px; }
.rank-n small, .rank-d small, .rank-p small { font-size: 11px; color: var(--chalk-3); }
@media (max-width: 520px) {
  .comp-row { grid-template-columns: minmax(0, 1fr) 60px 46px 40px; gap: 6px; }
  .rank-row { grid-template-columns: 24px 26px minmax(0, 1fr) 40px 44px 38px; gap: 6px; padding: 7px 6px; }
}
.comp-row.zero { opacity: .55; }
.comp-row.zero:hover { opacity: .85; }
.comp-all { display: block; margin: -6px 0 14px; font-size: 13px; }

/* ---------- conquistas e marcos ---------- */
.lvl { display: inline-block; font: 800 11px/1 var(--body); letter-spacing: .06em; text-transform: uppercase; color: #0a0a0b; background: var(--draw); border-radius: 3px; padding: 3px 5px; vertical-align: 2px; }
.btn.ach-new { border-color: var(--draw); color: var(--draw); }
.ach-head { display: flex; gap: 16px; align-items: center; margin: 4px 0 16px; }
.ach-head p { margin: 0; color: var(--chalk-2); }
.ach-level { flex: 0 0 auto; display: grid; justify-items: center; min-width: 96px; padding: 10px 14px; border: 1px solid var(--draw); border-radius: 4px; }
.ach-level b { font: italic 900 54px/1 var(--display); color: var(--draw); }
.ach-level small { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--chalk-3); }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; align-items: start; }
.ach-card p { margin: 4px 0; font-size: 14px; }
.ach-card.full { border-color: var(--draw); }
.ach-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ach-top h3 { font-size: 22px; margin: 0; }
.ach-lv { font: italic 900 30px/1 var(--display); color: var(--draw); }
.ach-lv small { font-size: 16px; color: var(--chalk-3); }
.ach-bar { height: 8px; background: rgba(255, 255, 255, .1); border-radius: 4px; overflow: hidden; margin: 8px 0 6px; }
.ach-bar i { display: block; height: 100%; background: var(--draw); }
.ach-next { color: var(--chalk-2); }
.ach-card details summary { cursor: pointer; font-size: 13px; color: var(--chalk-3); margin-top: 6px; }
.ach-items { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; font-size: 14px; }
.ach-items li { display: flex; gap: 8px; align-items: baseline; color: var(--chalk-3); }
.ach-items li.done { color: var(--chalk); }
.ach-items li i { flex: 0 0 16px; height: 16px; border: 1px solid var(--line-2); border-radius: 50%; font-style: normal; font-size: 11px; line-height: 14px; text-align: center; color: #0a0a0b; }
.ach-items li.done i { background: var(--win); border-color: var(--win); }
.ach-items li span { flex: 1; }
.ach-items small { display: block; font-size: 12px; color: var(--chalk-3); }
.ach-title { margin: 22px 0 4px; font-size: 30px; }
.ach-title small { font: 700 14px var(--body); color: var(--chalk-3); text-transform: none; font-style: normal; }
.marco-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin-top: 10px; }
.marco { padding: 10px 12px; border: 1px dashed var(--line-2); border-radius: 4px; opacity: .55; }
.marco b { display: block; font-size: 15px; }
.marco small { display: block; font-size: 12px; color: var(--chalk-3); margin-top: 2px; }
.marco.done { opacity: 1; border: 1px solid var(--draw); background: rgba(255, 201, 74, .08); }
.marco.done small { color: var(--chalk-2); }
@media (max-width: 520px) { .ach-head { flex-direction: column; align-items: stretch; } .ach-level { justify-self: start; } }

/* ---------- Cenas: sorteio, chaveamento, entrada em campo e taça levantada ---------- */
#fx { position: fixed; inset: 0; z-index: 96; display: none; }
#fx.fx-on { display: grid; place-items: center; overflow: auto; background: rgba(6, 6, 8, .94); padding: 14px; animation: fxIn .35s ease-out; }
@keyframes fxIn { from { opacity: 0; } }
#fx .play-row { justify-content: center; margin-top: 12px; }

/* sorteio */
.fx-draw { width: min(620px, 100%); text-align: center; display: grid; gap: 6px; }
.fx-draw h2 { font-size: clamp(34px, 7vw, 58px); }
.fx-draw .draw-sub { font-size: 14px; }
.draw-stage { position: relative; height: 170px; margin: 6px 0 4px; }
.draw-pot { position: absolute; left: 50%; bottom: 0; width: 150px; height: 150px; transform: translateX(-50%); border-radius: 50% 50% 46% 46%; border: 2px solid rgba(255,255,255,.35); background: radial-gradient(circle at 35% 25%, rgba(255,255,255,.22), rgba(255,255,255,.04) 45%, rgba(255,255,255,.02)); box-shadow: inset 0 -12px 30px rgba(0,0,0,.5), 0 0 40px rgba(255,255,255,.06); overflow: hidden; }
.draw-pot::after { content: ''; position: absolute; left: 22%; right: 22%; top: -2px; height: 14px; border-radius: 0 0 50% 50%; background: var(--night); border: 2px solid rgba(255,255,255,.35); border-top: 0; }
.draw-pot i { position: absolute; left: var(--x); top: var(--y); width: 30px; height: 30px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #d9d9de 55%, #8f8f98); animation: potShake .5s ease-in-out infinite alternate; animation-delay: calc(var(--i) * -70ms); }
@keyframes potShake { from { transform: translate(-3px, 2px) rotate(-8deg); } to { transform: translate(3px, -4px) rotate(10deg); } }
.draw-ball { position: absolute; left: 50%; top: 4px; transform: translateX(-50%) scale(0); min-width: 150px; max-width: 92%; padding: 10px 18px; border-radius: 999px; background: radial-gradient(circle at 30% 25%, #fff, #e8e8ec 60%, #b9b9c2); color: #111; font: italic 900 22px/1 var(--display); text-transform: uppercase; box-shadow: 0 14px 30px rgba(0,0,0,.5); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; z-index: 2; }
.draw-ball.pop { animation: ballPop .42s cubic-bezier(.2,1.4,.4,1) forwards; }
.draw-ball.gone { transform: translateX(-50%) scale(0); transition: transform .3s; }
@keyframes ballPop { 0% { transform: translate(-50%, 110px) scale(.25); } 100% { transform: translateX(-50%) scale(1); } }
.draw-list { list-style: none; margin: 4px 0 0; padding: 4px 0 0; display: grid; gap: 6px; max-height: min(44vh, 380px); overflow: auto; }
.draw-list li { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; padding: 9px 12px; border: 1px solid var(--line); border-radius: 4px; background: var(--night-2); animation: tieIn .35s cubic-bezier(.2,1.2,.4,1); position: relative; }
.draw-list li span:first-child { text-align: right; }
.draw-list li span:last-of-type { text-align: left; }
.draw-list li b { color: var(--led); font-family: var(--display); font-size: 20px; }
.draw-list li.me { border-color: var(--team); box-shadow: 0 0 0 1px var(--team), 0 0 24px -6px var(--team); }
.draw-list li em { position: absolute; right: 8px; top: -9px; font: 800 10px var(--body); letter-spacing: .08em; text-transform: uppercase; font-style: normal; background: var(--team); color: #fff; padding: 2px 6px; border-radius: 3px; }
@keyframes tieIn { from { opacity: 0; transform: translateY(14px) scale(.96); } }

/* chaveamento */
.br-open { margin-top: 8px; font-size: 14px; }
.bracket-sheet { width: min(1120px, 100%); }
/* Colunas de largura fixa lado a lado (a grade antiga deixava a coluna dos playoffs invadir as oitavas). */
.bracket { display: flex; align-items: stretch; gap: 14px; overflow-x: auto; margin-top: 14px; padding-bottom: 8px; }
.br-col { flex: 0 0 196px; width: 196px; display: flex; flex-direction: column; gap: 8px; }
.br-col h4 { margin: 0; min-height: 15px; font: italic 900 15px/1 var(--display); text-transform: uppercase; color: var(--chalk-2); letter-spacing: .03em; white-space: nowrap; }
.br-ties { flex: 1; display: flex; flex-direction: column; justify-content: space-around; gap: 8px; }
.br-tie { border: 1px solid var(--line); border-radius: 4px; background: rgba(255,255,255,.03); font-size: 13px; position: relative; }
.br-tie.me { border-color: var(--team); box-shadow: 0 0 0 1px var(--team); }
.br-tie.tbd { opacity: .45; border-style: dashed; }
.br-team { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 5px 8px; min-width: 0; }
.br-team + .br-team { border-top: 1px solid var(--line); }
.br-team span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br-team b { flex: none; font-family: var(--dot); font-weight: 900; white-space: nowrap; }
.br-team b small { font-size: .85em; opacity: .8; margin-left: 3px; }
.br-team.w { font-weight: 800; color: #fff; }
.br-team.l { opacity: .5; }
.br-note { display: block; padding: 0 8px 4px; font-size: 11px; color: var(--chalk-3); }

/* palco das cenas: 16:9, tudo medido pela largura (cqw) */
.fx-scene { width: min(1100px, 100%); display: grid; gap: 10px; justify-items: center; text-align: center; }
.scene16 { position: relative; width: min(100%, calc((100dvh - 260px) * 16 / 9)); min-width: min(100%, 340px); aspect-ratio: 16 / 9; overflow: hidden; border-radius: 6px; container-type: inline-size; background: #07140f; box-shadow: 0 30px 80px -20px #000; border: 1px solid var(--line); }
.sc-stands { position: absolute; left: 0; right: 0; top: 0; height: 47%; background: linear-gradient(180deg, #050507, #121218 70%, #1a1a20); overflow: hidden; }
.sc-crowd { position: absolute; top: 18%; bottom: 0; width: 50%; opacity: .55; background: radial-gradient(circle, var(--c) 0 36%, transparent 42%) 0 0 / 1.3cqw 1.3cqw, radial-gradient(circle, rgba(255,255,255,.5) 0 30%, transparent 36%) .65cqw .65cqw / 1.3cqw 1.3cqw; -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%); mask-image: linear-gradient(180deg, transparent, #000 30%); }
.sc-crowd.h { left: 0; --c: var(--h); }
.sc-crowd.a { right: 0; --c: var(--a); }
.sc-flashes i { position: absolute; width: .45cqw; height: .45cqw; border-radius: 50%; background: #fff; box-shadow: 0 0 1.2cqw .4cqw rgba(255,255,255,.8); opacity: 0; animation: camFlash 1.6s infinite; }
@keyframes camFlash { 0%, 86%, 100% { opacity: 0; } 90% { opacity: 1; } }
.sc-light { position: absolute; top: -30%; width: 46%; height: 120%; background: radial-gradient(ellipse at center, rgba(255,255,240,.28), transparent 62%); }
.sc-light.l { left: -12%; } .sc-light.r { right: -12%; }
.sc-board { position: absolute; left: 0; right: 0; top: 44%; height: 4.4%; background: #0b0b0e; border-top: 1px solid rgba(255,255,255,.2); border-bottom: 1px solid rgba(0,0,0,.6); overflow: hidden; display: flex; white-space: nowrap; font: 700 2.2cqw/2.4cqw var(--dot); color: var(--led); text-shadow: 0 0 1cqw var(--led-glow); }
.sc-board span { flex: none; padding-top: .1cqw; animation: boardScroll 14s linear infinite; }
@keyframes boardScroll { to { transform: translateX(-100%); } }
.sc-pitch { position: absolute; left: 0; right: 0; bottom: 0; height: 51.6%; background: linear-gradient(180deg, rgba(0,0,0,.25), transparent 40%), repeating-linear-gradient(90deg, #1d6b3e 0 6.25%, #1a6038 6.25% 12.5%); }
.sc-pitch::before { content: ''; position: absolute; left: 0; right: 0; top: 7%; height: .35cqw; background: rgba(255,255,255,.75); }
.pyro { position: absolute; top: 37%; width: 1.6cqw; height: 9cqw; transform-origin: 50% 100%; transform: scaleY(0); background: linear-gradient(0deg, #fff6c2, #ffb02e 30%, #ff4d1a 60%, transparent); border-radius: 50% 50% 30% 30%; filter: blur(.25cqw); animation: pyro .95s ease-out var(--p) 2; box-shadow: 0 0 3cqw 1cqw rgba(255,120,30,.5); }
@keyframes pyro { 0% { transform: scaleY(0); opacity: 1; } 25% { transform: scaleY(1.1); } 60% { transform: scaleY(.8); opacity: 1; } 100% { transform: scaleY(0); opacity: 0; } }
.tunnel { position: absolute; left: 1%; bottom: 40%; width: 13cqw; height: 17cqw; border-radius: 7cqw 7cqw 0 0; background: repeating-linear-gradient(90deg, #26262c 0 1.6cqw, #1c1c22 1.6cqw 3.2cqw); border: .4cqw solid #3a3a42; border-bottom: 0; box-shadow: inset 0 0 2cqw #000, 0 1cqw 3cqw rgba(0,0,0,.6); z-index: 1; }
.tunnel .mouth { position: absolute; left: 22%; right: 22%; bottom: 0; height: 70%; border-radius: 5cqw 5cqw 0 0; background: radial-gradient(ellipse at 50% 100%, rgba(255,250,220,.6), #08080a 70%); }
.pedestal { position: absolute; left: 16%; bottom: 14%; width: 8cqw; display: grid; justify-items: center; z-index: 4; }
.ped-cup svg { width: 8cqw; height: auto; filter: drop-shadow(0 0 1.6cqw rgba(255,215,110,.75)); animation: cupGlow 2.2s ease-in-out infinite alternate; }
@keyframes cupGlow { to { filter: drop-shadow(0 0 3cqw rgba(255,235,160,.95)); } }
.ped-col { width: 5cqw; height: 6.5cqw; margin-top: -.6cqw; background: linear-gradient(90deg, #cfd2d8, #fff 45%, #a9adb5); border-radius: .3cqw; box-shadow: 0 1cqw 2cqw rgba(0,0,0,.5); }
.walker { position: absolute; left: 5%; bottom: 15%; width: 3.6cqw; opacity: 0; animation: walkIn var(--w) linear var(--d) both; z-index: 5; }
.walker.row1 { bottom: 25%; z-index: 3; width: 3.2cqw; }
.walker.ref { bottom: 20%; z-index: 4; width: 3.4cqw; }
.walker .fig { display: block; width: 100%; height: auto; overflow: visible; }
.walker .fig .leg, .lifter .fig .leg, .walker .fig .arm, .lifter .fig .arm { transform-box: fill-box; transform-origin: 50% 0; }
.walker .fig .leg.l { animation: stepL .42s ease-in-out var(--d) var(--n) alternate both; }
.walker .fig .leg.r { animation: stepR .42s ease-in-out var(--d) var(--n) alternate both; }
.walker .fig .arm.l { animation: stepR .42s ease-in-out var(--d) var(--n) alternate both; }
.walker > .fig .arm.r { animation: none; transform: rotate(-12deg); }
.walker .kid { position: absolute; left: -48%; bottom: 0; width: 62%; }
.walker .kid .fig .arm.r { animation: none; transform: rotate(-24deg); }
@keyframes walkIn { 0% { left: 5%; opacity: 0; } 6% { opacity: 1; } 100% { left: var(--to); opacity: 1; } }
@keyframes stepL { from { transform: rotate(16deg); } to { transform: rotate(-16deg); } }
@keyframes stepR { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }
.sc-cap { position: absolute; left: 50%; bottom: 3%; transform: translateX(-50%); margin: 0; padding: .6cqw 1.6cqw; font: italic 900 2.6cqw/1 var(--display); text-transform: uppercase; color: #fff; background: rgba(0,0,0,.55); border-left: .4cqw solid var(--led); opacity: 0; white-space: nowrap; z-index: 8; }
.sc-cap.on { animation: capIn .45s ease-out forwards; }
@keyframes capIn { from { opacity: 0; transform: translate(-50%, 1cqw); } to { opacity: 1; transform: translateX(-50%); } }
.wo-title { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 9; display: grid; gap: 8px; justify-items: center; padding: 22px 28px; background: rgba(6,6,8,.86); border: 1px solid var(--line-2); border-radius: 6px; width: min(640px, 92vw); opacity: 0; animation: woTitle linear forwards; pointer-events: none; }
.wo-title h2 { font-size: clamp(36px, 8vw, 72px); color: #ffd76a; text-shadow: 0 0 30px rgba(255,200,80,.45); }
.wo-vs { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; font: italic 900 clamp(18px, 3.4vw, 28px)/1 var(--display); text-transform: uppercase; }
.wo-vs span { color: var(--led); }
@keyframes woTitle { 0% { opacity: 0; transform: translate(-50%, -50%) scale(1.08); } 12% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 82% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(.98); } }
.wo-lineups { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; width: min(100%, 760px); text-align: left; }
.wo-lineups h4 { margin: 0 0 4px; font: italic 900 16px/1 var(--display); text-transform: uppercase; }
.wo-lineups ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 14px; font-size: 13px; color: var(--chalk-2); }
.wo-lineups li { opacity: 0; animation: luIn .4s ease-out forwards; }
@keyframes luIn { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; } }

/* taça levantada: fundo na cor do time, fogos subindo atrás do time, papel picado caindo por cima de tudo */
.fx-lift .scene16 { background: var(--c1); border-color: rgba(255,255,255,.25); }
.lift-bg { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 85% at 50% 40%, var(--hi) 0%, var(--c1) 45%, var(--lo) 100%); }
.lift-rays { position: absolute; left: 50%; top: 42%; width: 150cqw; height: 150cqw; margin: -75cqw 0 0 -75cqw; background: repeating-conic-gradient(rgba(255,255,255,.14) 0 5deg, transparent 5deg 15deg); -webkit-mask-image: radial-gradient(circle, #000 0, transparent 42%); mask-image: radial-gradient(circle, #000 0, transparent 42%); opacity: 0; transition: opacity 1.2s; animation: liftRays 40s linear infinite; }
.lifted .lift-rays { opacity: 1; }
@keyframes liftRays { to { transform: rotate(360deg); } }
.lift-floor { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: linear-gradient(180deg, transparent, rgba(0,0,0,.45) 55%, rgba(0,0,0,.65)); z-index: 2; }
.rk { position: absolute; bottom: 30cqw; width: 0; height: 0; z-index: 1; }
.rk b { position: absolute; left: -.2cqw; top: 0; width: .4cqw; height: 3.2cqw; border-radius: .2cqw; background: linear-gradient(0deg, transparent, var(--c)); opacity: 0; }
.rk span { position: absolute; left: 0; top: 0; transform: translateY(var(--y)); }
.rk span i { position: absolute; left: -.17cqw; top: 0; width: .35cqw; height: 4.4cqw; border-radius: .2cqw; background: linear-gradient(0deg, transparent, var(--c)); transform-origin: 50% 0; transform: rotate(var(--a)) scaleY(0); opacity: 0; }
.lifted .rk b { animation: rkUp .9s cubic-bezier(.2,.7,.4,1) var(--d) forwards; }
.lifted .rk span i { animation: rkBoom 1.5s ease-out calc(var(--d) + .85s) forwards; }
@keyframes rkUp { 0% { opacity: 1; transform: translateY(0); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(var(--y)); } }
@keyframes rkBoom { 0% { opacity: 1; transform: rotate(var(--a)) translateY(0) scaleY(.15); } 55% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateY(4.5cqw) scaleY(1); } }
.lifter { position: absolute; bottom: 8.6cqw; width: 7.4cqw; margin-left: -3.7cqw; z-index: 3; transform-origin: 50% 100%; transition: transform .45s cubic-bezier(.3,1.4,.5,1); filter: drop-shadow(0 0 .35cqw rgba(0,0,0,.75)); }
.lifter.back { bottom: 11.4cqw; width: 6.2cqw; margin-left: -3.1cqw; z-index: 2; filter: brightness(.8) drop-shadow(0 0 .35cqw rgba(0,0,0,.75)); }
.lifter.captain { left: 50%; width: 10.5cqw; margin-left: -5.25cqw; bottom: 8cqw; z-index: 4; }
.lifter .fig { display: block; width: 100%; height: auto; overflow: visible; }
.lifter .fig .arm { transition: transform .45s cubic-bezier(.3,1.4,.5,1); }
.lifter .fig .arm.l { transform: rotate(8deg); } .lifter .fig .arm.r { transform: rotate(-8deg); }
.lifter.captain .fig .arm.l { transform: rotate(-32deg); } .lifter.captain .fig .arm.r { transform: rotate(32deg); }
.crouch .lifter { transform: translateY(12%) scaleY(.82); }
.lifted .lifter { animation: jump .55s ease-in-out var(--j) 11 alternate; }
.lifted .lifter .fig .arm.l { transform: rotate(150deg); } .lifted .lifter .fig .arm.r { transform: rotate(-150deg); }
.lifted .lifter.captain { animation: none; }
.lifted .lifter.captain .fig .arm.l { transform: rotate(168deg); } .lifted .lifter.captain .fig .arm.r { transform: rotate(-168deg); }
@keyframes jump { from { transform: translateY(0); } to { transform: translateY(-14%); } }
.lift-cup { position: absolute; left: 50%; bottom: 11cqw; width: 13cqw; margin-left: -6.5cqw; z-index: 5; transform-origin: 50% 100%; transition: transform .6s cubic-bezier(.25,1.5,.5,1); filter: drop-shadow(0 0 1.2cqw rgba(255,225,140,.55)); }
.lift-cup svg { display: block; width: 100%; height: auto; }
.crouch .lift-cup { transform: translateY(1.2cqw); }
.lifted .lift-cup { transform: translateY(-18.5cqw) scale(1.12); animation: cupShine 1.2s ease-in-out .6s infinite alternate; }
@keyframes cupShine { from { filter: drop-shadow(0 0 1.2cqw rgba(255,225,140,.6)); } to { filter: drop-shadow(0 0 3.4cqw rgba(255,240,190,.95)); } }
.lift-title, .lift-team { position: absolute; top: 7%; z-index: 6; color: var(--ink); opacity: 0; transform: translateY(-1.2cqw); transition: opacity .5s, transform .5s cubic-bezier(.3,1.4,.5,1); }
.lift-title { left: 4%; text-align: left; }
.lift-title p { margin: 0; font: 800 1.7cqw/1.2 var(--body); letter-spacing: .16em; text-transform: uppercase; opacity: .92; }
.lift-title h2 { margin: .3cqw 0 0; font: italic 900 8.6cqw/.85 var(--display); color: var(--ink); text-shadow: 0 .4cqw 0 rgba(0,0,0,.22), 0 0 3cqw rgba(0,0,0,.22); }
.lift-team { right: 4%; max-width: 34%; display: grid; justify-items: end; gap: .5cqw; text-align: right; }
.lift-team svg { width: 7cqw; height: 7cqw; filter: drop-shadow(0 .3cqw .6cqw rgba(0,0,0,.4)); }
.lift-team b { font: italic 900 4cqw/.95 var(--display); text-transform: uppercase; overflow-wrap: anywhere; }
.lift-team small { font: 700 1.35cqw/1.3 var(--body); opacity: .88; }
.lifted .lift-title, .lifted .lift-team { opacity: 1; transform: none; }
.lift-count { position: absolute; left: 50%; top: 10%; transform: translateX(-50%); font: italic 900 12cqw/1 var(--display); color: var(--ink); text-shadow: 0 0 3cqw rgba(0,0,0,.35); opacity: 0; z-index: 7; }
.lift-count.on { animation: countPop .65s ease-out forwards; }
@keyframes countPop { 0% { opacity: 0; transform: translateX(-50%) scale(1.6); } 30% { opacity: 1; transform: translateX(-50%) scale(1); } 100% { opacity: 0; transform: translateX(-50%) scale(.9); } }
.burst i { position: absolute; bottom: 22%; width: .7cqw; height: 1.4cqw; border-radius: .15cqw; opacity: 0; z-index: 7; }
.lifted .burst i { animation: burst 1.9s cubic-bezier(.15,.8,.4,1) var(--d) forwards; }
@keyframes burst { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 70% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--bx), var(--by)) rotate(var(--r)); } }
.paper i { position: absolute; top: -4%; height: 1.2cqw; border-radius: .15cqw; opacity: 0; z-index: 8; }
.lifted .paper i { animation: paperFall var(--t) linear var(--d) infinite; }
@keyframes paperFall { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 100% { opacity: .9; transform: translate(var(--x), 60cqw) rotate(var(--r)); } }
/* palco montado no gramado e a placa atrás do time (nome do time, campeão, competição e temporada) */
.lift-board { position: absolute; left: 9%; right: 9%; bottom: 8.6cqw; height: 27.5cqw; z-index: 2; display: grid; align-content: start; justify-items: start; gap: .6cqw; padding-top: 1.3cqw; overflow: hidden;
  background: linear-gradient(180deg, var(--lo), #050506 92%); border: .25cqw solid rgba(255,255,255,.16); border-top: .55cqw solid var(--acc); border-bottom: 0; border-radius: .6cqw .6cqw 0 0; box-shadow: 0 0 5cqw rgba(0,0,0,.45); }
.lift-board::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 .2cqw, transparent .2cqw 3cqw); pointer-events: none; }
.lift-board .bn, .lift-board .bs { position: relative; left: 50%; transform: translateX(-50%); display: flex; gap: 2.4cqw; width: max-content; white-space: nowrap; }
.lift-board .bn span { font: italic 900 5cqw/1 var(--display); color: #fff; text-transform: uppercase; letter-spacing: .02em; }
.lift-board .bn span:nth-child(even) { color: var(--acc); }
.lift-board .bs span { font: 800 1.5cqw/1 var(--body); letter-spacing: .22em; text-transform: uppercase; color: #ffd76a; }
.lift-stage { position: absolute; left: 4%; right: 4%; bottom: 0; height: 8.8cqw; z-index: 3; }
.lift-stage .top { position: absolute; left: 0; right: 0; top: 0; height: 2.2cqw; background: linear-gradient(180deg, #4a4a52, #23232a); border-top: .35cqw solid #ffd76a; box-shadow: 0 -.4cqw 2cqw rgba(255,215,110,.35); }
.lift-stage .face { position: absolute; left: 0; right: 0; top: 2.2cqw; bottom: 0; background: linear-gradient(180deg, #121216, #050506); border-top: .5cqw solid var(--c1); display: flex; justify-content: space-around; align-items: center; }
.lift-stage .face i { width: .7cqw; height: .7cqw; border-radius: 50%; background: #fff7d6; box-shadow: 0 0 1.2cqw .3cqw rgba(255,230,150,.8); animation: bulb 1.2s ease-in-out infinite alternate; animation-delay: var(--b); }
@keyframes bulb { from { opacity: .35; } to { opacity: 1; } }
.ped-cup svg.trophy-illu { width: 8cqw; height: auto; filter: drop-shadow(0 0 1.6cqw rgba(255,215,110,.75)); animation: cupGlow 2.2s ease-in-out infinite alternate; }
@media (max-width: 560px) { .wo-lineups ol { columns: 1; } .scene16 { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .sc-flashes i, .draw-pot i, .sc-board span { animation: none; } }
#fx .kicker { font-weight: 700; font-size: 13px; letter-spacing: .09em; color: var(--led); text-transform: uppercase; margin-bottom: 4px; }

/* Termos de uso e política de privacidade: texto corrido, fácil de ler no celular */
.legal { max-width: 760px; padding-top: 28px; padding-bottom: 48px; line-height: 1.6; }
.legal h1 { font-size: clamp(32px, 6vw, 52px); margin: 6px 0; }
.legal h2 { font-size: 20px; margin: 26px 0 8px; }
.legal h3 { font-size: 16px; margin: 16px 0 6px; }
.legal ul { padding-left: 20px; }
.legal li { margin: 4px 0; }
.legal a { color: var(--sky, #6fd3ff); }

/* ---------- menu: tela de início com blocos, páginas e ranking fixo ---------- */
.hm { --card: #17171a; max-width: 1180px; margin: 0 auto; padding: 0 clamp(14px, 3vw, 24px) 40px; }
.hm-top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; padding: 12px 0; margin-bottom: 18px; border-bottom: 1px solid var(--line); background: rgba(10,10,11,.88); backdrop-filter: blur(8px); }
.hm-brand { display: flex; align-items: center; gap: 8px; font-size: 24px; margin: 0; }
.hm-brand .mark { height: 1.3em; width: auto; fill: var(--led); overflow: visible; }
.hm-brand b { color: var(--led); }
.hm-back { font-weight: 700; color: var(--chalk-2); padding: 6px 10px 6px 4px; border-radius: 8px; white-space: nowrap; }
.hm-back:hover { color: var(--chalk); background: var(--card); }
.hm-title { font-size: 26px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-me { margin-left: auto; display: flex; align-items: center; gap: 10px; padding: 5px 10px 5px 6px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); min-width: 0; }
.hm-me:hover { border-color: var(--line-2); }
.hm-me .nm { display: grid; text-align: left; line-height: 1.15; min-width: 0; }
.hm-me .nm b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.hm-me .nm small { font-size: 12px; color: var(--chalk-3); }
.hm-me .lvl { font: 900 15px/1 var(--display); padding: 3px 7px; border-radius: 6px; vertical-align: 0; letter-spacing: .02em; }
.lvl.t-base { background: #5d5d66; color: #fff; }
.lvl.t-bronze { background: linear-gradient(140deg, #f6c193, #a8601f); color: #1d140d; }
.lvl.t-prata { background: linear-gradient(140deg, #ffffff, #9a9aa3); color: #000; }
.lvl.t-ouro { background: linear-gradient(140deg, #fff3c4, #c9971e); color: #000; }
.lvl.t-diamante { background: linear-gradient(140deg, #6fd3ff, #b9a6ff); color: #0e1622; }
.lvl.t-lenda { background: linear-gradient(140deg, #ffc94a, #fe3231); color: #fff; }

.hm-continue { width: 100%; display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-radius: 16px; margin-bottom: 12px; text-align: left;
  background: linear-gradient(100deg, #3a0b0b, #1a0c0d 60%, var(--card)); border: 1px solid rgba(254,50,49,.45); box-shadow: 0 10px 30px rgba(254,50,49,.12); }
.hm-continue .led { font: 900 30px/1 var(--dot); color: var(--led); text-shadow: 0 0 12px var(--led-glow); flex: none; }
.hm-continue .txt { flex: 1; display: grid; }
.hm-continue small { color: var(--chalk-3); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.hm-continue b { font: italic 900 24px/1 var(--display); text-transform: uppercase; margin: 3px 0; }
.hm-continue .txt span { color: var(--chalk-2); font-size: 14px; }
.hm-continue .go { font: italic 900 18px/1 var(--display); text-transform: uppercase; background: var(--led); color: #fff; padding: 11px 18px; border-radius: 10px; white-space: nowrap; box-shadow: 0 6px 20px var(--led-glow); }
.hm-warn { font-size: 13px; margin: -4px 0 12px; }
.hm-name { display: grid; gap: 8px; margin-bottom: 14px; border-color: rgba(254,50,49,.4); }
.hm-name label { font-weight: 700; }

.hm-home { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 16px; align-items: start; margin-top: 4px; }
.hm-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 158px; gap: 14px; }
.hm-tile { position: relative; overflow: hidden; isolation: isolate; border-radius: 16px; padding: 16px; text-align: left; display: flex; flex-direction: column; justify-content: flex-end;
  background: var(--card); border: 1px solid var(--line); color: var(--chalk); text-decoration: none; transition: transform .15s, border-color .15s; }
.hm-tile:hover { transform: translateY(-3px); border-color: var(--line-2); }
.hm-tile::before { content: ''; position: absolute; inset: 0; z-index: -1; }
.hm-tile h3 { font-size: 30px; position: relative; z-index: 2; }
.hm-tile p { margin: 4px 0 0; font-size: 13px; color: var(--chalk-2); position: relative; z-index: 2; }
.hm-tile .tag { position: absolute; z-index: 2; top: 14px; left: 16px; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--chalk-3); }
.hm-tile .stat { position: absolute; z-index: 2; top: 6px; right: 14px; font: italic 900 40px/1 var(--display); color: var(--gold, #ffc94a); text-shadow: 0 0 14px currentColor; }
.live-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 8px var(--mint); margin-right: 6px; }
.hm-tile .quick { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; position: relative; z-index: 2; max-width: 58%; }
.hm-tile .quick span { font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 999px; background: rgba(0,0,0,.4); border: 1px solid var(--line); }

.t-online { grid-column: span 2; grid-row: span 2; background: #140708; border-color: rgba(254,50,49,.5); }
.t-online::before { z-index: 1; background: radial-gradient(90% 80% at 0 100%, rgba(0,0,0,.8), transparent 70%); }
.t-online h3 { font-size: 64px; }
.t-online p { max-width: 50%; }
.hm-tile .stripes { position: absolute; inset: 0; z-index: 0; background:
  linear-gradient(115deg, transparent 0 46%, #8f1212 46% 64%, transparent 64%),
  linear-gradient(115deg, transparent 0 58%, rgba(255,255,255,.75) 58% 58.6%, transparent 58.6%),
  linear-gradient(115deg, transparent 0 64%, #fe3231 64% 70%, #5c0909 70%); }
.hm-tile .player { position: absolute; z-index: 0; right: 3%; top: 8%; height: 84%; aspect-ratio: 758 / 956; background: #fff;
  -webkit-mask: url(/brand/mark.svg) center / contain no-repeat; mask: url(/brand/mark.svg) center / contain no-repeat; transition: transform .25s; }
.t-online:hover .player { transform: translateY(-5px) rotate(-1.5deg); }

.t-solo { grid-row: span 2; background: linear-gradient(180deg, #123a2c, #08140f); }
.hm-tile .pitch { position: absolute; inset: 0; z-index: -1; opacity: .35; background:
  repeating-linear-gradient(90deg, transparent 0 34px, rgba(255,255,255,.05) 34px 68px),
  radial-gradient(circle at 50% 30%, transparent 0 56px, rgba(255,255,255,.45) 57px 58px, transparent 59px); }
.hm-tile .cup { position: absolute; z-index: 0; filter: drop-shadow(0 10px 18px rgba(0,0,0,.6)); transition: transform .25s; }
.t-solo .c1 { height: 46%; left: 50%; top: 7%; transform: translateX(-50%); z-index: 1; }
.t-solo .c2 { height: 30%; left: 8%; top: 20%; opacity: .8; transform: rotate(-10deg); }
.t-solo .c3 { height: 32%; right: 6%; top: 18%; opacity: .8; transform: rotate(10deg); }
.t-solo:hover .c1 { transform: translateX(-50%) translateY(-5px) scale(1.04); }
.t-troph::before { background: radial-gradient(60% 90% at 85% 40%, rgba(255,201,74,.3), transparent 70%), var(--card); }
.t-troph .cup.big { height: 74%; right: 44px; top: 14%; }
.t-troph:hover .cup.big { transform: translateY(-4px) rotate(-3deg); }
.t-troph p { max-width: 58%; }
.t-ach::before { background: radial-gradient(70% 90% at 90% 20%, rgba(230,230,240,.16), transparent 70%), var(--card); }
.t-ach.is-new { border-color: var(--gold, #ffc94a); }
.tile-lv { position: absolute; right: 16px; top: 16px; z-index: 2; }
.t-club::before { background: radial-gradient(70% 90% at 90% 20%, rgba(254,50,49,.18), transparent 70%), var(--card); }
.t-club .crest-art { position: absolute; right: 14px; top: 12px; z-index: 0; transform: rotate(6deg); transition: transform .25s; filter: drop-shadow(0 8px 20px rgba(0,0,0,.5)); }
.t-club .crest-art svg { width: 96px; height: auto; display: block; }
.t-club:hover .crest-art { transform: rotate(0) translateY(-3px); }
.t-org::before { background: radial-gradient(100% 120% at 100% 0, rgba(185,166,255,.2), transparent 60%), repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 2px, transparent 2px 4px), var(--card); }
.onair { position: absolute; z-index: 2; right: 14px; top: 14px; display: inline-flex; align-items: center; gap: 6px; font: italic 900 15px/1 var(--display); color: var(--led); text-transform: uppercase; padding: 4px 10px; border: 1px solid rgba(254,50,49,.6); border-radius: 6px; text-shadow: 0 0 10px var(--led-glow); background: rgba(254,50,49,.1); }
.onair i { width: 9px; height: 9px; border-radius: 50%; background: var(--led); box-shadow: 0 0 10px var(--led); animation: onair 1.2s infinite; }
@keyframes onair { 50% { opacity: .25; } }
.t-store { grid-column: span 2; background: #c21515; border-color: #fe3231; }
.t-store .stripes { background: linear-gradient(115deg, #fe3231 0 40%, transparent 40%), linear-gradient(115deg, transparent 0 52%, #a00f0f 52% 74%, transparent 74%), linear-gradient(115deg, transparent 0 74.6%, rgba(255,255,255,.7) 74.6% 75.2%, transparent 75.2%); }
.t-store .tag { color: rgba(255,255,255,.9); }
.t-store p { color: rgba(255,255,255,.92); max-width: 52%; }
.store-logo { position: absolute; z-index: 1; right: 18px; top: 50%; transform: translateY(-50%) rotate(-2deg); display: flex; align-items: center; gap: 10px; background: #0a0a0b; padding: 12px 18px 12px 12px; border-radius: 14px; box-shadow: 0 12px 30px rgba(0,0,0,.4); transition: transform .25s; }
.t-store:hover .store-logo { transform: translateY(-50%) rotate(0) scale(1.03); }
.store-logo .mark { height: 70px; width: auto; fill: var(--led); overflow: visible; }
.store-logo > span { font: italic 900 28px/.9 var(--display); text-transform: uppercase; color: #fff; }
.store-logo b { color: var(--led); }

/* selo de nível: hexágono com borda por faixa */
.lv { --w: 4px; --rim: #6b6b74; --core: #15151a; width: 76px; height: 76px; display: grid; place-items: center; flex: none;
  background: var(--rim); clip-path: polygon(50% 0, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%); }
.lv > span { width: calc(100% - var(--w) * 2); height: calc(100% - var(--w) * 2); display: flex; align-items: center; justify-content: center;
  background: var(--core); clip-path: inherit; font: 900 30px/1 var(--display); color: #fff; padding-top: 1px; }
.lv.big { width: 110px; height: 110px; } .lv.big > span { font-size: 44px; }
.lv.t-base { --w: 3px; --rim: #5d5d66; --core: #18181c; }
.lv.t-bronze { --rim: linear-gradient(150deg, #f6c193, #a8601f 45%, #f0b07a 70%, #6e3810); --core: #1d140d; }
.lv.t-prata { --w: 5px; --rim: conic-gradient(from 30deg, #fff, #8e8e98, #e9e9ee, #7d7d86, #fff, #9a9aa3, #fff); --core: #17191f; }
.lv.t-ouro { --w: 5px; --rim: conic-gradient(from 30deg, #fff3c4, #c9971e, #ffe08a, #a87410, #fff3c4, #d9a628, #fff3c4); --core: #1f190b; }
.lv.t-diamante { --w: 6px; --rim: conic-gradient(#6fd3ff, #b9a6ff, #5ef2a6, #6fd3ff, #b9a6ff, #6fd3ff); --core: #0e1622; animation: lv-shine 4s linear infinite; }
.lv.t-lenda { --w: 6px; --rim: conic-gradient(#fe3231, #ffc94a, #fe3231, #ff7a2f, #fe3231); --core: #220909; animation: lv-pulse 1.8s ease-in-out infinite; }
@keyframes lv-shine { to { filter: hue-rotate(360deg); } }
@keyframes lv-pulse { 50% { filter: brightness(1.35) saturate(1.2); } }
@media (prefers-reduced-motion: reduce) { .lv.t-diamante, .lv.t-lenda, .onair i { animation: none; } }

/* ranking fixo da tela de início */
.hm-rank { position: sticky; top: 84px; border-radius: 16px; padding: 16px; background: linear-gradient(180deg, #221d0c, var(--card) 45%); border: 1px solid rgba(255,201,74,.3); }
.hm-rank header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.hm-rank h3 { font-size: 30px; }
.seg.mini button { padding: 4px 10px; font-size: 13px; min-height: 0; }
.hm-rk-list { display: grid; gap: 6px; }
.hm-rk { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.035); text-align: left; }
.hm-rk:hover { background: rgba(255,255,255,.07); }
.hm-rk .pos { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font: 900 16px/1 var(--display); padding-top: 1px; background: var(--night); color: var(--chalk-3); flex: none; }
.hm-rk.gold .pos { background: linear-gradient(140deg, #ffe08a, #c9971e); color: #000; box-shadow: 0 0 12px rgba(255,201,74,.5); }
.hm-rk.silver .pos { background: linear-gradient(140deg, #f2f2f2, #9a9aa3); color: #000; }
.hm-rk.bronze .pos { background: linear-gradient(140deg, #f0b07a, #9a5a24); color: #000; }
.hm-rk .who { flex: 1; min-width: 0; }
.hm-rk .who b { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-rk .who small { display: block; font-size: 12px; color: var(--chalk-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-rk .t { font: italic 900 24px/1 var(--display); color: var(--gold, #ffc94a); }
.hm-rk.me { border: 1px solid var(--led); background: linear-gradient(90deg, rgba(254,50,49,.22), transparent); }
.hm-rk.me .pos { background: var(--led); color: #fff; }
.hm-you { position: relative; margin: 16px 0 12px; }
.hm-you::before { content: '• • •'; position: absolute; top: -15px; left: 50%; transform: translateX(-50%); color: var(--chalk-3); font-size: 10px; }
.hm-rk-note { display: block; margin: 12px 0; font-size: 13px; }
.hm-rank .btn.full { width: 100%; margin-top: 12px; }

/* páginas internas */
.hm-step { display: flex; align-items: center; gap: 10px; margin: 22px 0 10px; flex-wrap: wrap; }
.hm-step:first-child { margin-top: 0; }
.hm-step h2 { font-size: 26px; }
.hm-step small { color: var(--chalk-3); }
.hm-step .n { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--led); color: #fff; font: 900 18px/1 var(--display); padding-top: 1px; }
.hm-cards { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.hm-pick { position: relative; text-align: left; padding: 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); min-height: 96px; display: flex; flex-direction: column; gap: 4px; }
.hm-pick:hover { border-color: var(--line-2); }
.hm-pick[aria-pressed="true"] { border-color: var(--led); background: linear-gradient(160deg, rgba(254,50,49,.18), var(--card) 70%); box-shadow: inset 0 0 0 1px var(--led); }
.hm-pick b { font: italic 900 21px/1 var(--display); text-transform: uppercase; }
.hm-pick small { color: var(--chalk-2); font-size: 12.5px; line-height: 1.3; }
.hm-pick .time { margin-top: auto; padding-top: 6px; font-size: 11px; font-weight: 700; color: var(--chalk-3); text-transform: uppercase; letter-spacing: .06em; }
.hm-cards.liga .hm-pick { padding-right: 66px; min-height: 108px; }
.hm-pick .troph { position: absolute; right: 10px; top: 10px; height: 60px; max-width: 54px; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)); transition: transform .2s; }
.hm-pick:hover .troph, .hm-pick[aria-pressed="true"] .troph { transform: translateY(-3px) scale(1.06); }
.hm-more { margin-top: 14px; }
.hm-more summary { cursor: pointer; color: var(--chalk-2); font-weight: 700; padding: 6px 0; }
.hm-rows { display: grid; gap: 10px; margin-top: 8px; }
.hm-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); flex-wrap: wrap; }
.hm-row > span { font-weight: 700; }
.hm-row small { display: block; color: var(--chalk-3); font-weight: 500; font-size: 12.5px; }
.page-solo .hm-page { padding-bottom: 90px; }
.hm-startbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 12px clamp(14px, 3vw, 24px); background: rgba(10,10,11,.94); backdrop-filter: blur(8px); border-top: 1px solid var(--line); }
.hm-startbar .in { max-width: 1132px; margin: 0 auto; display: flex; align-items: center; gap: 14px; }
.hm-startbar .sum { flex: 1; min-width: 0; font-size: 13px; color: var(--chalk-2); }
.hm-startbar .sum b { color: var(--chalk); display: block; font-size: 15px; }
.hm-startbar .btn { width: auto; white-space: nowrap; }
.hm-cta { width: 100%; display: flex; align-items: center; gap: 16px; text-align: left; padding: 20px; border-radius: 16px; background: linear-gradient(120deg, var(--led), #b81414); box-shadow: 0 10px 30px var(--led-glow); color: #fff; }
.hm-cta b { display: block; font: italic 900 34px/1 var(--display); text-transform: uppercase; }
.hm-cta small { display: block; margin-top: 4px; font-size: 14px; color: rgba(255,255,255,.88); }
.hm-cta .arr { margin-left: auto; font-size: 34px; }
.cta-mark { width: 44px; height: 54px; flex: none; background: #fff; -webkit-mask: url(/brand/mark.svg) center / contain no-repeat; mask: url(/brand/mark.svg) center / contain no-repeat; }
.hm-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.hm-two .panel { min-width: 0; }
.hm-two h3 { font-size: 22px; margin-bottom: 6px; }
.hm-club { display: flex; align-items: center; gap: 18px; padding: 18px; border-radius: 16px; background: linear-gradient(140deg, rgba(254,50,49,.2), var(--card) 60%); border: 1px solid var(--line); }
.hm-club > div:nth-child(2) { flex: 1; min-width: 0; }
.hm-club h2 { font-size: 40px; }
.hm-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; }
.hm-stats div { padding: 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
.hm-stats b { display: block; font: italic 900 34px/1 var(--display); color: var(--gold, #ffc94a); }
.hm-stats small { color: var(--chalk-3); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.hm-foot { font-size: 12px; margin-top: 24px; }
.hm-tabbar { display: none; }

@media (max-width: 760px) {
  .hm { padding-bottom: 86px; }
  .hm-top { margin-bottom: 14px; }
  .hm-brand { font-size: 20px; }
  .hm-me .nm small { display: none; }
  .hm.inner .hm-me .nm { display: none; }
  .hm-title { font-size: 20px; }
  .hm-continue { flex-wrap: wrap; gap: 10px 14px; }
  .hm-continue .txt { flex: 1 1 60%; }
  .hm-continue .go { flex: 1 1 100%; text-align: center; }
  .hm-home { grid-template-columns: 1fr 1fr; gap: 12px; grid-auto-flow: row dense; }
  .hm-grid { display: contents; }
  .hm-tile { order: 4; min-height: 140px; padding-top: 38px; }
  .hm-tile h3 { font-size: 24px; }
  .hm-tile p { font-size: 12px; }
  .t-online { order: 1; grid-column: span 2; min-height: 300px; }
  .t-online h3 { font-size: 48px; }
  .t-online p { max-width: 70%; }
  .hm-tile .quick { max-width: 100%; }
  .hm-tile .player { height: 62%; right: 0; top: 4%; }
  .t-solo { order: 2; grid-column: span 2; min-height: 180px; }
  .t-solo .c1 { height: 64%; left: auto; right: 20%; top: 6%; transform: none; }
  .t-solo:hover .c1 { transform: none; }
  .t-solo .c2 { height: 44%; left: auto; right: 42%; top: 14%; }
  .t-solo .c3 { height: 46%; right: 2%; top: 12%; }
  .t-solo p { max-width: 62%; }
  .hm-rank { order: 3; grid-column: span 2; position: static; }
  .t-troph .stat { font-size: 34px; top: 8px; right: 12px; }
  .t-troph .cup.big { height: 52%; right: auto; left: 50%; top: 10%; opacity: .55; }
  .t-troph p { max-width: none; }
  .tile-lv { width: 58px; height: 58px; } .tile-lv > span { font-size: 22px; }
  .t-club .crest-art svg { width: 60px; }
  .t-org .onair { display: none; }
  .t-store { grid-column: span 2; min-height: 120px; }
  .store-logo { padding: 8px 12px 8px 8px; right: 12px; }
  .store-logo .mark { height: 42px; }
  .store-logo > span { font-size: 18px; }
  .hm-cards { grid-template-columns: 1fr 1fr; }
  .hm-two { grid-template-columns: minmax(0, 1fr); }
  .hm-stats { grid-template-columns: 1fr 1fr; }
  .hm-club { flex-wrap: wrap; } .hm-club h2 { font-size: 30px; }
  .hm-cta b { font-size: 28px; }
  .hm-tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; background: rgba(14,14,16,.96); border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .hm-tabbar button { display: grid; justify-items: center; gap: 2px; font-size: 11px; font-weight: 700; color: var(--chalk-3); padding: 4px 0; }
  .hm-tabbar svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
  .hm-tabbar button[aria-current="true"] { color: var(--led); }
  .page-solo .hm-tabbar { display: none; }
}
.hm-cards.liga .hm-pick small { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.h2h-join { display: flex; align-items: center; gap: 8px; margin: 8px 0; font-size: 13px; color: var(--chalk-3); }
.h2h-join .input { width: auto; flex: 1; padding: 6px 8px; font-size: 13px; min-height: 0; }
.h2h-dup { margin-top: 12px; border-color: rgba(255,201,74,.4); }
.h2h-dup p { margin: 0 0 8px; font-size: 14px; }
/* fim da temporada: tabelas e chaves */
.end-boards { margin-top: 22px; display: grid; gap: 10px; }
.end-boards h2 { font-size: 30px; }
.end-board summary { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.end-board summary small { color: var(--chalk-3); font-weight: 600; }
.end-board .table { margin-top: 8px; }
/* conquistas: selo da faixa no topo */
.ach-head .lv { flex: none; }
.ach-tier { display: block; font: italic 900 22px/1.1 var(--display); text-transform: uppercase; }
.ach-head small { display: block; margin: 2px 0 6px; }
/* chave espelhada: esquerda e direita andando para a final, no centro */
.sb { display: flex; align-items: stretch; overflow-x: auto; padding: 10px 2px 14px; margin-top: 8px; --ln: rgba(255,255,255,.28); }
.sb-side { display: flex; flex: none; }
.sb-col { width: 150px; flex: none; display: flex; flex-direction: column; padding: 0 9px; }
.sb-col h4, .sb-center h4 { margin: 0 0 8px; min-height: 15px; text-align: center; font: italic 900 14px/1 var(--display); text-transform: uppercase; color: var(--chalk-2); letter-spacing: .03em; white-space: nowrap; }
.sb-ties { flex: 1; display: flex; flex-direction: column; justify-content: space-around; }
.sb-pair { flex: 1; display: flex; flex-direction: column; justify-content: space-around; gap: 8px; padding: 4px 0; position: relative; }
.sb-pair .br-tie { font-size: 12px; }
.sb-pair .br-team { padding: 4px 6px; }
/* ligações: o "]" que junta os dois confrontos e o traço até a fase seguinte (espelhado na direita) */
.sb-pair.two::after { content: ''; position: absolute; top: 25%; bottom: 25%; width: 9px; border: 1.5px solid var(--ln); }
.sb-pair::before { content: ''; position: absolute; top: 50%; width: 9px; border-top: 1.5px solid var(--ln); }
.sb-side.l .sb-pair.two::after { right: -9px; border-left: 0; border-radius: 0 5px 5px 0; }
.sb-side.l .sb-pair::before { right: -18px; }
.sb-side.l .sb-pair.one::before { right: -18px; width: 18px; }
.sb-side.r .sb-pair.two::after { left: -9px; border-right: 0; border-radius: 5px 0 0 5px; }
.sb-side.r .sb-pair::before { left: -18px; }
.sb-side.r .sb-pair.one::before { left: -18px; width: 18px; }
.sb-center { width: 200px; flex: none; display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 4px; padding: 0 12px; }
.sb-cup { height: 120px; display: flex; justify-content: center; align-items: flex-end; margin-bottom: 8px; }
.sb-cup img, .sb-cup svg { height: 120px; width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 10px 20px rgba(0,0,0,.55)) drop-shadow(0 0 22px rgba(255,201,74,.25)); }
.sb-center .br-tie { border-color: rgba(255,201,74,.55); box-shadow: 0 0 0 1px rgba(255,201,74,.2); }
.sb-podium { display: grid; gap: 6px; margin-top: 10px; }
.sb-podium p { margin: 0; padding: 7px 10px; border-radius: 8px; text-align: center; }
.sb-podium small { display: block; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.sb-podium b { display: block; font: italic 900 18px/1.1 var(--display); text-transform: uppercase; }
.sb-champ { background: linear-gradient(140deg, #ffe08a, #c9971e); color: #000; box-shadow: 0 0 18px rgba(255,201,74,.35); }
.sb-vice { background: linear-gradient(140deg, #f2f2f2, #9a9aa3); color: #000; }
.bracket-sheet { width: min(1380px, 100%); }
/* retrospecto: resumo e barra de V/E/D por rival */
.h2h-sum { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 12px; }
.h2h-sum div { padding: 10px; border-radius: 12px; background: var(--card, #17171a); border: 1px solid var(--line); text-align: center; }
.h2h-sum b { display: block; font: italic 900 28px/1 var(--display); }
.h2h-sum small { color: var(--chalk-3); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.h2h-sum .w b { color: var(--win); } .h2h-sum .d b { color: var(--draw); } .h2h-sum .l b { color: var(--loss); }
.h2h-list { display: grid; gap: 8px; }
.h2h-bar { display: flex; height: 4px; border-radius: 2px; overflow: hidden; margin-top: 6px; width: 100%; background: var(--line); }
.h2h-bar .w { background: var(--win); } .h2h-bar .d { background: var(--draw); } .h2h-bar .l { background: var(--loss); }
@media (max-width: 760px) { .h2h-sum { grid-template-columns: repeat(3, 1fr); } }