:root {
  --paper: #f3ecd8;
  --ink: #16241c;
  --green: #0b1a12;
  --pitch: #154d2e;
  --pitch-line: rgba(255, 255, 255, .35);
  --gold: #d9a531;
  --accent: #1f7a4d;
  --card: #fffdf6;
  --muted: #6b7568;
  --tier-S: #d9a531; --tier-A: #c0584b; --tier-B: #2f7d52; --tier-C: #5b7186; --tier-D: #8a8a8a;
  --shadow: 0 2px 0 rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.10);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--paper); color: var(--ink);
  font-family: ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased; line-height: 1.45;
}
.hidden { display: none !important; }
.muted { color: var(--muted); }
.small { font-size: .82rem; }

/* Header / footer */
.site-header { padding: 18px 20px 8px; text-align: center; position: relative; }
.lang-switch { position: absolute; top: 14px; right: 16px; display: flex; gap: 4px; }
.lang-switch button {
  font: inherit; font-weight: 700; font-size: .74rem; cursor: pointer; color: var(--muted);
  border: 1.5px solid #d8cfb2; background: #fff; border-radius: 8px; padding: 4px 9px;
}
.lang-switch button.is-on { background: var(--green); color: #fff; border-color: var(--green); }
@media (max-width: 520px) { .lang-switch { position: static; justify-content: center; margin-bottom: 6px; } }
.brand { font-weight: 800; font-size: 1.5rem; letter-spacing: -.02em; }
.brand-11 {
  display: inline-block; background: var(--green); color: var(--gold);
  border-radius: 8px; padding: 0 8px; margin-right: 4px; font-style: italic;
}
.brand-sub { color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }
.brand a { color: inherit; text-decoration: none; }
.site-footer { text-align: center; color: var(--muted); font-size: .76rem; padding: 28px 16px; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.footer-tag, .footer-copy { margin: 0; max-width: 640px; }
.footer-copy { font-size: .72rem; opacity: .85; }
.footer-disc { margin: 0; max-width: 680px; font-size: .68rem; line-height: 1.5; opacity: .6; }

/* Banner de consentimento de cookies (Consent Mode v2) */
.consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999;
  background: #06120b; color: var(--cream, #f3ecd8); border-top: 2px solid var(--gold);
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 14px 18px;
  box-shadow: 0 -6px 24px rgba(0,0,0,.45); transition: transform .26s ease, opacity .26s ease; }
.consent.hiding { transform: translateY(100%); opacity: 0; }
.consent-txt { margin: 0; flex: 1 1 320px; font-size: .82rem; line-height: 1.45; }
.consent-txt a { color: var(--gold); }
.consent-btns { display: flex; gap: 10px; margin-left: auto; }
.footer-links { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; }
.footer-links a { color: var(--accent); font-weight: 700; text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
.footer-links a[aria-current="page"] { color: var(--ink); }

/* ── Páginas legais (privacidade) ───────────────────────────── */
.legal { max-width: 760px; }
.legal-back { display: inline-block; margin-bottom: 18px; color: var(--accent); font-weight: 700; text-decoration: none; }
.legal-back:hover { text-decoration: underline; }
.legal-doc { background: var(--card); border: 1.5px solid #e0d8bf; border-radius: 16px; padding: 32px 30px; box-shadow: var(--shadow); }
.legal-doc h1 { margin: 0 0 6px; font-size: 1.9rem; letter-spacing: -.02em; }
.legal-updated { margin: 0 0 8px; color: var(--muted); font-size: .82rem; }
.legal-section { margin-top: 26px; }
.legal-section h2 { margin: 0 0 8px; font-size: 1.12rem; color: var(--green); }
.legal-section p { margin: 0 0 10px; line-height: 1.62; }
.legal-section ul { margin: 0 0 10px; padding-left: 22px; line-height: 1.6; }
.legal-section li { margin-bottom: 6px; }
.legal-section a { color: var(--accent); font-weight: 600; }
.legal-section code { background: #e9e2cb; border-radius: 5px; padding: 1px 6px; font-size: .86em; }
@media (max-width: 520px) { .legal-doc { padding: 24px 20px; } .legal-doc h1 { font-size: 1.55rem; } }

#app { max-width: 1040px; margin: 0 auto; padding: 12px 16px 40px; }
.screen { animation: fade .25s ease both; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Buttons */
.btn {
  font: inherit; font-weight: 700; border: 2px solid var(--green); border-radius: 10px;
  padding: 10px 16px; background: var(--card); color: var(--ink); cursor: pointer;
  transition: transform .06s ease, box-shadow .1s ease; box-shadow: var(--shadow);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn-primary { background: var(--green); color: #fff; }
.btn-gold { background: var(--gold); border-color: #9c7415; color: #2a1d00; }
.btn-ghost { background: transparent; box-shadow: none; }
.btn-lg { padding: 14px 26px; font-size: 1.05rem; width: 100%; margin-top: 18px; }
.btn-sm { padding: 6px 12px; font-size: .82rem; }
.btn-dice { width: 100%; font-size: 1.1rem; padding: 18px; }

/* ── Landing (home) ── */
.landing { max-width: 1040px; margin: 0 auto; padding: 8px 16px 52px; }
.hero { text-align: center; padding: 30px 0 10px; }
.hero-kicker { text-transform: uppercase; letter-spacing: .16em; font-size: .76rem; font-weight: 800; color: var(--muted); margin: 0 0 16px; }
.hero-title { font-size: clamp(2.2rem, 7vw, 4rem); font-weight: 900; letter-spacing: -.03em; line-height: 1.02; margin: 0 auto; max-width: 18ch; }
.hero-lede { max-width: 58ch; margin: 18px auto 0; color: #33493b; font-size: 1.06rem; }
.hero-cta { margin: 28px 0 4px; }
.hero-play, .how-cta .btn-lg { display: inline-block; width: auto; }
.stats-strip { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 38px; padding: 0; margin: 34px 0 0; }
.stats-strip li { display: flex; flex-direction: column; align-items: center; }
.stats-strip b { font-size: 1.8rem; font-weight: 900; letter-spacing: -.02em; }
.stats-strip span { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; }

.modes { margin-top: 50px; }
.modes-title, .how-title { text-align: center; font-size: clamp(1.4rem, 4vw, 1.9rem); font-weight: 900; letter-spacing: -.02em; margin: 0 0 24px; }
.mode-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 760px) { .mode-grid { grid-template-columns: 1fr; } }
.mode-card { position: relative; display: flex; flex-direction: column; gap: 8px; background: var(--card); border: 1.5px solid #e0d8bf; border-radius: 16px; padding: 24px 22px; box-shadow: var(--shadow); text-decoration: none; color: var(--ink); transition: transform .1s ease, border-color .1s ease, box-shadow .1s ease; }
.mode-card.is-live { cursor: pointer; }
.mode-card.is-live:hover { transform: translateY(-3px); border-color: var(--green); box-shadow: 0 4px 0 rgba(0,0,0,.08), 0 14px 30px rgba(0,0,0,.14); }
.mode-card.is-soon { opacity: .7; }
.mode-emoji { font-size: 2.5rem; line-height: 1; }
.mode-name { margin: 6px 0 0; font-size: 1.22rem; font-weight: 900; letter-spacing: -.01em; }
.mode-desc { margin: 0; color: var(--muted); font-size: .9rem; min-height: 2.4em; }
.mode-meta { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); font-weight: 800; }
.mode-meta.muted { color: var(--muted); }
.mode-go { margin-top: 12px; width: 100%; text-align: center; pointer-events: none; }
.mode-badge { position: absolute; top: 14px; right: 14px; background: var(--gold); color: #2a1d00; font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: 4px 10px; border-radius: 999px; }

.how { margin-top: 58px; }
.steps { list-style: none; padding: 0; margin: 0 auto; max-width: 840px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .steps { grid-template-columns: 1fr; } }
.step { display: flex; gap: 14px; align-items: flex-start; background: var(--card); border: 1.5px solid #e0d8bf; border-radius: 14px; padding: 18px; box-shadow: var(--shadow); }
.step-ico { font-size: 1.8rem; line-height: 1; flex: none; }
.step-tx h3 { margin: 0 0 4px; font-size: 1.04rem; font-weight: 800; }
.step-tx p { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.4; }
.how-cta { text-align: center; margin-top: 30px; }

/* Setup */
.headline { font-size: clamp(1.6rem, 5vw, 2.6rem); line-height: 1.05; letter-spacing: -.02em; margin: 12px 0; }
.lede { max-width: 60ch; color: #33493b; }
.setup-grid { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; margin-top: 18px; }
@media (max-width: 640px) { .setup-grid { grid-template-columns: 1fr; } }
.panel { background: var(--card); border: 1.5px solid #e0d8bf; border-radius: 14px; padding: 14px; box-shadow: var(--shadow); }
.panel h2 { margin: 0 0 10px; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font: inherit; cursor: pointer; border: 1.5px solid #cfc6a8; background: #fff; border-radius: 999px;
  padding: 8px 14px; font-weight: 700; display: flex; flex-direction: column; align-items: center; line-height: 1.1;
}
.chip span { font-weight: 500; font-size: .72rem; color: var(--muted); }
.chip.is-on { background: var(--green); color: #fff; border-color: var(--green); }
.chip.is-on span { color: #cfe6d8; }

/* Mesa de montagem (workbench): controles · campo · box score */
.workbench { display: grid; grid-template-columns: 300px minmax(0, 1fr) 282px; gap: 24px; align-items: start; margin-top: 6px; }
@media (max-width: 980px) {
  .workbench { grid-template-columns: 1fr; }
  .wb-pitch-wrap { order: -1; }
}
.wb-left { display: flex; flex-direction: column; gap: 22px; }
#wb-config { display: flex; flex-direction: column; gap: 22px; }
.wb-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); font-weight: 800; margin: 0 0 10px; }
.formation-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.chip-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wb-chip {
  font: inherit; font-weight: 800; cursor: pointer; border: 1.5px solid #20302540; background: var(--card);
  color: var(--ink); border-radius: 10px; padding: 11px 13px; text-align: center; box-shadow: var(--shadow);
  transition: transform .06s ease, border-color .1s ease;
}
.wb-chip:hover { border-color: var(--green); transform: translateY(-1px); }
.wb-chip.is-on { background: var(--green); color: #fff; border-color: var(--green); }

.roll-area { border: 1.5px dashed #cabf9c; border-radius: 14px; padding: 16px; margin-top: 2px; }
.roll-hint { text-align: center; color: var(--muted); display: flex; align-items: center; justify-content: center; min-height: 56px; line-height: 1.4; }
.roll-area .draw-zone { border: none; box-shadow: none; padding: 0; background: transparent; }
.btn-roll {
  width: 100%; font: inherit; font-weight: 900; font-size: 1.25rem; letter-spacing: .05em; text-transform: uppercase;
  color: #fff; background: var(--accent); border: 2px solid #155e3a; border-radius: 12px; padding: 16px; cursor: pointer;
  box-shadow: 0 3px 0 #0f4a2d, var(--shadow);
}
.btn-roll:hover { transform: translateY(-1px); background: #248a57; }
.btn-roll:active { transform: translateY(2px); box-shadow: var(--shadow); }
.btn-roll:disabled { opacity: .55; cursor: progress; transform: none; box-shadow: var(--shadow); }
.wb-restart { align-self: center; }

/* Efeito caça-níquel ao sortear o campeão */
.team-search { text-align: center; min-height: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.team-search .ts-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); font-weight: 800; }
.team-search .ts-name { font-weight: 900; font-size: 1.05rem; letter-spacing: -.01em; color: var(--ink); line-height: 1.1; }
.ts-name.flick { animation: tsflick .09s ease; }
@keyframes tsflick { from { opacity: .35; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.ts-name.landed { animation: tsland .38s cubic-bezier(.2,1.5,.4,1); color: var(--green); }
@keyframes tsland { 0% { transform: scale(1.25); } 60% { transform: scale(.96); } 100% { transform: scale(1); } }

.wb-pitch-wrap { display: flex; flex-direction: column; gap: 8px; }
.pitch-tall {
  aspect-ratio: 5 / 7; max-width: 540px; width: 100%; margin: 0 auto;
  background-color: #2c9c5a;
  background-image: repeating-linear-gradient(180deg, rgba(0,0,0,.06) 0 8.33%, rgba(255,255,255,.05) 8.33% 16.66%);
}

.box-head { font-weight: 800; font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; border-bottom: 2px solid var(--ink); padding-bottom: 7px; }
.box-head #box-count { color: var(--muted); }
.box-legend { display: flex; gap: 16px; margin: 9px 0 10px; font-size: .72rem; color: var(--muted); }
.box-legend .lg { display: inline-flex; align-items: center; gap: 5px; }
.box-legend .sw { width: 16px; height: 4px; border-radius: 2px; display: inline-block; }
.sw.att, .bx-fill.att { background: #c0584b; }
.sw.def, .bx-fill.def { background: var(--ink); }
.box-rows { display: flex; flex-direction: column; }
.box-row { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 9px; padding: 8px 0; border-bottom: 1px solid #e6dec7; }
.bx-pos { font-weight: 800; font-size: .78rem; color: var(--muted); }
.box-row.on .bx-pos { color: var(--ink); }
.bx-bar { height: 6px; border-radius: 3px; background: #e7dfc8; overflow: hidden; }
.bx-fill { display: block; height: 100%; width: 0; transition: width .4s ease; }
.bx-name { display: none; }
.bx-val { font-weight: 800; font-size: .82rem; color: var(--muted); min-width: 20px; text-align: right; }
.box-row.on .bx-val { color: var(--ink); }
.wb-right .pitch-strength { justify-content: flex-start; margin-top: 14px; }

/* Draft */
.draft-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.progress { font-size: 1.4rem; font-weight: 800; }
.formation-tag { background: var(--green); color: #fff; border-radius: 8px; padding: 4px 10px; font-weight: 700; }
.draft-body { display: grid; grid-template-columns: 1fr 360px; gap: 18px; }
@media (max-width: 860px) { .draft-body { grid-template-columns: 1fr; } }

.pitch-wrap { display: flex; flex-direction: column; gap: 8px; }
.pitch {
  position: relative; width: 100%; aspect-ratio: 3 / 4; border-radius: 16px;
  background-color: var(--pitch);
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 8%, transparent 8% 16%);
  border: 3px solid #0c3a22; box-shadow: var(--shadow); overflow: hidden;
}
/* Marcações do campo são decorativas: nunca capturam clique (deixam os slots clicáveis). */
.pitch::before, .pitch::after { content: ""; position: absolute; left: 8%; right: 8%; height: 14%; border: 2px solid var(--pitch-line); pointer-events: none; }
.pitch::before { top: -2px; border-top: none; }
.pitch::after { bottom: -2px; border-bottom: none; }
.pitch-mid { position: absolute; left: 0; right: 0; top: 50%; height: 0; border-top: 2px solid var(--pitch-line); pointer-events: none; }
.pitch-circle { position: absolute; left: 50%; top: 50%; width: 26%; aspect-ratio: 1; transform: translate(-50%,-50%); border: 2px solid var(--pitch-line); border-radius: 50%; pointer-events: none; }

.slot {
  position: absolute; transform: translate(-50%, -50%); width: 64px; text-align: center; cursor: default;
  transition: top .4s cubic-bezier(.4,0,.2,1), left .4s cubic-bezier(.4,0,.2,1);
}
.slot .disc {
  width: 46px; height: 46px; margin: 0 auto 3px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .8rem;
  background: rgba(255,255,255,.14); color: #eaf5ee; border: 2px dashed rgba(255,255,255,.5);
}
.slot.filled .disc { background: var(--card); color: var(--ink); border: 2px solid var(--gold); box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.slot .nm { font-size: .68rem; color: #fff; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,.6); line-height: 1.05; }
.slot .yr { font-size: .6rem; color: #d8f0e1; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.slot.target .disc { border-color: var(--gold); animation: pulse 1s infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(217,165,49,.6);} 50% { box-shadow: 0 0 0 8px rgba(217,165,49,0);} }

/* ── Modo "escolha a posição" (após clicar no jogador no draft) ── */
.slot .disc { transition: transform .14s ease, background .14s ease, border-color .14s ease, box-shadow .14s ease; }
.pitch.pick-mode .slot:not(.eligible) { opacity: .3; filter: saturate(.5); transition: opacity .2s ease; }
.slot.eligible { cursor: pointer; }
.slot.eligible .disc { background: rgba(217,165,49,.26); color: #fff; border: 2px solid var(--gold); animation: pulse 1.1s infinite; }
.slot.eligible::after {
  content: "+"; position: absolute; top: -3px; left: calc(50% + 14px);
  width: 18px; height: 18px; border-radius: 50%; background: var(--gold); color: #2a1d00;
  font-size: .82rem; font-weight: 900; line-height: 18px; text-align: center; box-shadow: 0 1px 4px rgba(0,0,0,.45);
}
.slot.eligible:hover .disc, .slot.eligible:focus-visible .disc {
  background: var(--gold); color: #2a1d00; transform: scale(1.16); animation: none; box-shadow: 0 6px 18px rgba(0,0,0,.45);
}
.slot.eligible:focus-visible { outline: none; }
.slot.just-placed .disc { animation: drop-in .46s cubic-bezier(.2,1.35,.45,1); }
@keyframes drop-in { 0% { transform: scale(.2); opacity: 0; } 55% { transform: scale(1.22); opacity: 1; } 100% { transform: scale(1); } }

.pcard.selected { background: #fff3d4; box-shadow: inset 4px 0 0 var(--gold); }
.pcard.selected .pname { color: #8a6a12; }
.draw-kicker.pick-on { color: var(--gold); }

/* Fora da posição de origem: marcador de rating reduzido */
.slot .disc { position: relative; }
.slot .disc.off-pos::after {
  content: "▾"; position: absolute; top: -7px; right: -7px;
  width: 16px; height: 16px; line-height: 15px; text-align: center;
  background: #c0584b; color: #fff; border-radius: 50%; font-size: .6rem; font-weight: 900;
  box-shadow: 0 1px 3px rgba(0,0,0,.45);
}
.bx-pen { color: #c0584b; font-size: .68rem; font-weight: 800; margin-left: 4px; }
.box-row.off-pos .bx-val { color: #c0584b; }

@media (prefers-reduced-motion: reduce) {
  .slot.eligible .disc, .slot.just-placed .disc { animation: none; }
}

.pitch-strength { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; font-size: .8rem; }
.pitch-strength b { font-size: 1rem; }
.stat { background: var(--card); border: 1.5px solid #e0d8bf; border-radius: 8px; padding: 4px 10px; }

/* Draft side */
.draft-side { display: flex; flex-direction: column; gap: 12px; }
.dice-zone { background: var(--card); border: 1.5px solid #e0d8bf; border-radius: 14px; padding: 16px; text-align: center; box-shadow: var(--shadow); }
.draw-zone { background: var(--card); border: 1.5px solid #e0d8bf; border-radius: 14px; padding: 14px; box-shadow: var(--shadow); }
.draw-kicker { font-size: .68rem; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); font-weight: 800; margin-bottom: 8px; }
.draw-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.draw-club { font-weight: 800; font-size: 1.05rem; }
.player-cards { display: flex; flex-direction: column; max-height: 56vh; overflow-y: auto; }
.pcard {
  display: grid; grid-template-columns: 34px 1fr auto auto; align-items: center; gap: 12px; width: 100%;
  text-align: left; cursor: pointer; border: none; border-bottom: 1px solid #ece4cd; background: transparent;
  padding: 11px 6px; font: inherit; transition: background .08s ease;
}
.pcard:last-child { border-bottom: none; }
.pcard:hover { background: #fbf5e4; }
.pcard:disabled, .pcard.is-off { cursor: not-allowed; opacity: .38; }
.pcard.is-off:hover { background: transparent; }
.pcard .psh { font-weight: 700; font-size: .82rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.pcard .pname { font-weight: 800; font-size: .98rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.01em; }
.pcard .ppos { font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-align: right; color: var(--muted); }
.pcard .ppos.sect-gk { color: #6f7d3a; }
.pcard .ppos.sect-def { color: #3f6ea5; }
.pcard .ppos.sect-mid { color: #2f7d52; }
.pcard .ppos.sect-fw { color: #c0584b; }
.pcard .prt { font-weight: 900; font-size: 1.3rem; color: var(--ink); min-width: 30px; text-align: right; font-variant-numeric: tabular-nums; }

/* A campanha — jogo a jogo */
#screen-campaign { max-width: 880px; margin: 0 auto; }
.camp-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.camp-kicker { font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; color: var(--muted); font-weight: 700; }
.camp-title { font-size: clamp(2rem, 7vw, 3.4rem); font-weight: 900; letter-spacing: -.03em; margin: 2px 0 0; }
.camp-tabs { display: flex; gap: 6px; }
.camp-tab { font: inherit; font-weight: 700; font-size: .82rem; cursor: pointer; border: 1.5px solid #d8cfb2; background: #fff; color: var(--muted); border-radius: 8px; padding: 7px 14px; }
.camp-tab.is-on { background: var(--green); color: #fff; border-color: var(--green); }
.camp-rule { height: 3px; background: var(--ink); border-radius: 2px; margin: 12px 0 20px; }
.camp-stage { min-height: 200px; }

.game-card { background: var(--card); border: 1.5px solid #e0d8bf; border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; }
.game-top { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid #ece4cd; }
.game-phase { font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); font-weight: 800; }
.game-opp { font-size: 1.05rem; min-width: 0; }
.game-opp .vs { font-size: .72rem; text-transform: uppercase; color: var(--muted); font-weight: 700; margin-right: 4px; }
.game-opp .opp-mono { font-size: .64rem; vertical-align: middle; background: var(--green); color: var(--gold); border-radius: 5px; padding: 1px 5px; font-weight: 800; margin-right: 6px; }
.game-opp b { letter-spacing: -.01em; }
.game-score { font-size: 1.7rem; font-weight: 900; white-space: nowrap; letter-spacing: -.02em; }
.game-score .dash { margin: 0 6px; color: var(--muted); font-weight: 700; }
.game-score .game-pens { font-size: .8rem; color: var(--muted); font-weight: 700; }
.game-score .mark { margin-left: 6px; font-size: 1.1rem; }
.game-card.won .game-score { color: var(--accent); }
.game-card.lost .game-score { color: #a9453a; }
.game-card.draw .game-score { color: var(--muted); }
.sc-num { display: inline-block; }
.sc-num.bump { animation: scbump .4s ease; }
@keyframes scbump { 0% { transform: scale(1); } 35% { transform: scale(1.45); } 100% { transform: scale(1); } }

/* Relógio ao vivo (placar oculto até o apito) */
.game-card.live .game-score { color: var(--ink); }
.card-pens { text-align: center; font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 800; color: var(--accent); padding: 8px; border-bottom: 1px solid #ece4cd; }
.game-card.ht .live-dot { background: var(--gold); }
.game-card.ht #clock { color: var(--gold); font-weight: 800; text-transform: uppercase; font-size: .82rem; letter-spacing: .04em; }
.clock { font-size: .95rem; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; margin-left: 6px; display: inline-flex; align-items: center; gap: 6px; }
.fulltime { margin-left: 6px; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #a9453a; display: inline-block; animation: blink 1s steps(2, start) infinite; }
@keyframes blink { 50% { opacity: .2; } }
.sim-hint { text-align: center; margin: 10px 0 0; opacity: .8; }
.goal-list li.pop { animation: goalpop .35s ease both; }
@keyframes goalpop { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
.goal-list li.shootout { color: var(--muted); font-style: italic; }
.goal-list .gdot.pen { background: var(--gold); }

.game-body { padding: 8px 18px 16px; border-left: 5px solid #d8cfb2; }
.game-card.live .game-body { min-height: 64px; }
.game-card.won .game-body { border-left-color: var(--accent); }
.game-card.lost .game-body { border-left-color: #a9453a; }
.goal-list { list-style: none; margin: 0; padding: 0; }
.goal-list li { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-weight: 700; letter-spacing: .01em; }
.goal-list .gm { width: 38px; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; font-size: .9rem; }
.goal-list .gdot { width: 5px; height: 5px; border-radius: 50%; background: var(--ink); flex: none; }
.goal-list .gname { text-transform: uppercase; font-size: .92rem; }
.goal-list .gtag { font-size: .66rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.goal-list li.them { color: var(--muted); }
.goal-list li.them .gdot { background: #a9453a; }
.goal-empty { padding: 6px 0; }

.camp-banner { text-align: center; font-weight: 900; font-size: clamp(1.2rem, 4vw, 1.8rem); margin: 18px auto 0; padding: 14px; border-radius: 12px; max-width: 560px; }
.camp-banner.win { background: var(--gold); color: #2a1d00; }
.camp-banner.out { background: #a9453a; color: #fff; }
.camp-note { text-align: center; font-weight: 800; color: var(--accent); margin: 14px 0 0; font-size: .9rem; }

.btn-next { display: block; width: 100%; max-width: 360px; margin: 22px auto 0; font-size: 1.05rem; padding: 15px; background: var(--accent); color: #fff; border-color: #145e39; text-transform: uppercase; letter-spacing: .04em; }
.btn-next.btn-final { background: var(--gold); color: #2a1d00; border-color: #9c7415; }

/* ── Campanha reformulada: cabeçalho, jogo ao vivo, lista de jogos e classificação ── */
.camp-speed { display: flex; align-items: center; gap: 8px; }
.camp-speed-lbl { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 700; }
#btn-speed { min-width: 50px; font-weight: 800; font-variant-numeric: tabular-nums; }
.camp-seed-tag { color: var(--muted); }
.camp-live, .camp-results, .camp-standings, .camp-bannerwrap, .camp-controls { max-width: 880px; margin-left: auto; margin-right: auto; }
.camp-live:empty, .camp-bannerwrap:empty { display: none; }
.camp-live { margin-bottom: 16px; }

.game-teams { display: flex; align-items: center; justify-content: center; gap: 12px; min-width: 0; }
.game-teams .tm { font-size: 1rem; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 34vw; }
.game-teams .tm.us { color: var(--accent); }

.camp-results { display: flex; flex-direction: column; gap: 10px; }
.res-row { background: var(--card); border: 1.5px solid #e0d8bf; border-radius: 10px; padding: 12px 16px; box-shadow: var(--shadow); animation: goalpop .3s ease both; }
.res-meta { display: flex; gap: 10px; align-items: center; font-size: .6rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; color: var(--muted); margin-bottom: 6px; }
.res-fin { color: var(--accent); }
.res-match { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.res-team { font-size: 1.05rem; font-weight: 800; letter-spacing: -.01em; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res-team.r { text-align: right; }
.res-team.us { color: var(--accent); }
.res-team.w { color: var(--ink); }
.res-score { display: flex; flex-direction: column; align-items: center; line-height: 1.05; }
.res-score-main { font-size: 1.5rem; font-weight: 900; white-space: nowrap; letter-spacing: -.02em; }
.res-dash { margin: 0 6px; color: var(--muted); }
.res-pen { margin-top: 4px; font-size: .6rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 800; color: var(--muted); white-space: nowrap; }
.res-goals { margin-top: 8px; padding-top: 8px; border-top: 1px solid #ece4cd; font-size: .82rem; color: #5a5440; display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: baseline; }
.res-goals-lbl { font-size: .6rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; color: var(--accent); }
.rg { font-weight: 700; }
.rg.us { color: var(--ink); }
.rg-sep { color: var(--muted); }

.camp-standings { margin-top: 22px; background: var(--card); border: 1.5px solid #e0d8bf; border-radius: 12px; box-shadow: var(--shadow); padding: 14px 16px; }
.stand-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.stand-title { font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.stand-title b { color: var(--ink); }
.stand-live { font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); border: 1.5px solid var(--accent); border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
.stand-live.done { color: var(--muted); border-color: #d9cfae; }
.stand-scroll { overflow-x: auto; }
.stand-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.stand-table th { font-size: .6rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 800; padding: 6px 5px; text-align: center; }
.stand-table th.l, .stand-table td.l { text-align: left; }
.stand-table th.c, .stand-table td.c { width: 30px; }
.stand-table td { padding: 9px 5px; text-align: center; font-variant-numeric: tabular-nums; border-top: 1px solid #ece4cd; font-weight: 700; }
.stand-table td.l { font-weight: 800; letter-spacing: -.01em; }
.stand-table td.pts { font-weight: 900; color: var(--accent); }
.stand-pos { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 6px; background: #efe8d3; color: var(--ink); font-weight: 800; font-size: .8rem; }
.stand-table tr.qual .stand-pos { background: var(--accent); color: #fff; }
.stand-table tr.us td { background: #fbf5e4; }
.stand-table tr.us td.l { color: #8a6a12; }
.stand-legend { margin-top: 10px; font-size: .64rem; color: var(--muted); line-height: 1.6; }

.camp-controls { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 6px; }
#btn-skip-result { color: var(--muted); }
@media (max-width: 560px) {
  .game-top { grid-template-columns: 1fr auto; gap: 6px 10px; }
  .game-phase { grid-column: 1 / -1; }
}

/* Result */
.result-headline { text-align: center; font-size: clamp(1.6rem, 6vw, 3rem); font-weight: 900; letter-spacing: -.02em; margin: 10px 0 6px; }
.result-headline.win { color: var(--gold); }
.campaign { display: flex; flex-direction: column; gap: 8px; max-width: 560px; margin: 0 auto; }
.match { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; background: var(--card); border: 1.5px solid #e0d8bf; border-radius: 10px; padding: 10px 12px; box-shadow: var(--shadow); }
.match .rd { grid-column: 1 / -1; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.match .me { font-weight: 800; text-align: right; }
.match .opp { color: #33493b; }
.match .sc { font-weight: 900; font-size: 1.1rem; background: var(--green); color: #fff; border-radius: 8px; padding: 2px 10px; white-space: nowrap; }
.match.won .sc { background: var(--accent); }
.match.lost .sc { background: #a9453a; }
.match .pens { font-size: .7rem; color: var(--muted); display: block; }
.result-actions { display: flex; gap: 10px; justify-content: center; margin: 18px 0; flex-wrap: wrap; }
.result-xi { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: 720px; margin: 0 auto; }
.xi-pill { background: var(--card); border: 1.5px solid #e0d8bf; border-radius: 999px; padding: 4px 10px; font-size: .78rem; }
.xi-pill b { color: var(--ink); }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--green); color: #fff; padding: 10px 18px; border-radius: 10px; box-shadow: var(--shadow); }

/* Navegação e páginas (perfil / tier list) */
.nav-links { display: flex; gap: 8px; justify-content: flex-end; align-items: center; margin-bottom: 4px; }
.tourney-tag { margin-right: auto; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--gold); background: var(--green); border-radius: 999px; padding: 4px 12px; }
.screen-back { margin-bottom: 10px; }
.page-title { font-size: clamp(1.4rem, 4vw, 2rem); letter-spacing: -.02em; margin: 4px 0 16px; }
.section-title { font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 22px 0 10px; }

/* Conquistas recém-desbloqueadas no resultado */
.new-ach { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 6px 0 14px; }
.new-ach .nach { display: flex; align-items: center; gap: 8px; background: var(--gold); color: #2a1d00; border-radius: 999px; padding: 6px 14px; font-weight: 800; box-shadow: var(--shadow); }
.new-ach .nach .em { font-size: 1.2rem; }

/* Perfil — stats */
.stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stat-grid .s { background: var(--card); border: 1.5px solid #e0d8bf; border-radius: 14px; padding: 16px; text-align: center; box-shadow: var(--shadow); }
.stat-grid .s b { display: block; font-size: 2rem; line-height: 1; }
.stat-grid .s span { font-size: .78rem; color: var(--muted); }

/* Perfil — conquistas */
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.ach { background: var(--card); border: 1.5px solid #e0d8bf; border-radius: 12px; padding: 12px; box-shadow: var(--shadow); }
.ach.locked { opacity: .5; filter: grayscale(1); }
.ach .em { font-size: 1.6rem; }
.ach .an { font-weight: 800; margin: 4px 0 2px; }
.ach .ad { font-size: .76rem; color: var(--muted); }

/* Perfil — histórico */
.history { display: flex; flex-direction: column; gap: 8px; }
.hist { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1.5px solid #e0d8bf; border-radius: 10px; padding: 10px 12px; box-shadow: var(--shadow); }
.hist .ho { font-weight: 800; flex: 1; }
.hist .hb { background: var(--green); color: #fff; border-radius: 8px; padding: 2px 8px; font-weight: 800; font-size: .85rem; }
.hist .hb.win { background: var(--gold); color: #2a1d00; }
.hist .hd { font-size: .74rem; color: var(--muted); }

/* Tier list */
.tl-search { width: 100%; font: inherit; padding: 10px 14px; border: 1.5px solid #cfc6a8; border-radius: 10px; margin-bottom: 14px; background: #fff; }
.tier-block { margin-bottom: 18px; }
.tier-head { display: flex; align-items: center; gap: 8px; font-weight: 800; margin-bottom: 8px; }
.tier-badge { width: 30px; height: 30px; border-radius: 8px; color: #fff; display: flex; align-items: center; justify-content: center; }
.tier-players { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; }
.tlp { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1.5px solid #e0d8bf; border-radius: 10px; padding: 7px 10px; }
.tlp .tr { font-weight: 800; width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #fff; flex: none; }
.tlp .ti { flex: 1; min-width: 0; }
.tlp .tn { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tlp .tm { font-size: .72rem; color: var(--muted); }