/* Treino: the drill player and the hub, on top of the GamerFlix design system (gamerflix.css). */
.progress { display: flex; gap: 6px; }
.progress span { width: 22px; height: 6px; background: var(--gf-color-line-strong); }
.progress span.done { background: var(--gf-color-lime); }
.progress span.now { background: var(--gf-color-magenta); }

/* Drill layout: stage (map, hands, tables) + side: the brief (mode, what it trains, the question) over the panel
   (answers, reveal). In one column the side dissolves and the brief comes first: the question before the map. */
.drill { display: grid; gap: var(--gf-space-6); padding: var(--gf-space-6) 0 var(--gf-space-16); }
@media (min-width: 1000px) { .drill { grid-template-columns: minmax(0, 1fr) 400px; align-items: start; } }
.stage { position: relative; display: grid; gap: var(--gf-space-4); min-width: 0; scroll-margin-top: 84px; }
.side { display: grid; gap: var(--gf-space-5); align-content: start; min-width: 0; }
@media (max-width: 999.98px) { .side { display: contents; } .brief { order: -1; } }
/* A visitor without an account (most come from an ad, on a phone): the situation (its first lines, "ver mais" for
   the rest) and the answers on the first screen, then the replay or map, a team table (its facts are in the situation
   too), and the game and mode tags and what the mode trains last. With the answers under the map, 3 in 100 ad
   visitors ever saw them (2026-10-26/27). */
@media (max-width: 999.98px) {
  .drill--visitor .brief { display: contents; }
  .drill--visitor .brief > *, .drill--visitor .panel { order: -1; }
  .drill--visitor .brief > .table { order: 0; }
  .drill--visitor .brief > .meta:first-child, .drill--visitor .brief > .trains { order: 1; }
  .drill--visitor .ask:not(.ask--open) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
}
.ask-more { justify-self: start; margin-top: calc(-1 * var(--gf-space-3)); padding: 0; border: 0; background: none; cursor: pointer;
  font: 500 13px/1.6 var(--gf-font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--gf-color-lime); }
.brief { display: grid; gap: var(--gf-space-4); min-width: 0; }
.panel { display: grid; gap: var(--gf-space-5); min-width: 0; }
.panel > *, .stage > * { scroll-margin-top: 84px; }  /* clear of the sticky site nav */
.panel .gf-card { gap: var(--gf-space-4); }
.ask { font-size: var(--gf-size-lg); line-height: 1.5; }
.trains { display: grid; gap: 4px; font-size: 14px; line-height: 1.45; color: var(--gf-color-text-muted); }
.trains b { color: var(--gf-color-lime); font-weight: 600; }
.trains summary { width: fit-content; cursor: pointer; font: 500 12px/1.6 var(--gf-font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--gf-color-text-subtle); }
.trains summary:hover { color: var(--gf-color-text); }
.trains details p { margin-top: 4px; }
.map-status { font: 500 13px/1.4 var(--gf-font-mono); color: var(--gf-color-text-subtle); }
.map-status.ok { color: var(--gf-color-lime); }

/* Where the answer is still missing (the confirm button points at it) */
@keyframes flash { 0%, 100% { box-shadow: 0 0 0 0 rgba(198, 255, 61, 0); } 30% { box-shadow: 0 0 0 4px rgba(198, 255, 61, 0.7); } }
.flash { animation: flash 0.6s ease-out 2; }
@media (prefers-reduced-motion: reduce) { .flash { animation: none; outline: 3px solid var(--gf-color-lime); } }
.meta { display: flex; flex-wrap: wrap; gap: var(--gf-space-2); }

.options { display: grid; gap: var(--gf-space-2); }
.option {
  display: flex; align-items: center; gap: var(--gf-space-3); width: 100%; min-height: 48px; padding: 10px 14px; text-align: left;
  font: 500 15px/1.35 var(--gf-font-body); color: var(--gf-color-text); cursor: pointer;
  background: var(--gf-color-surface-2); border: 1px solid var(--gf-color-line-strong); border-radius: var(--gf-radius-sm);
}
.option:hover { border-color: #4b5361; }
.option[aria-pressed="true"] { border-color: var(--gf-color-lime); background: rgba(198, 255, 61, 0.08); }
.option.right { border-color: var(--gf-color-lime); background: rgba(198, 255, 61, 0.14); }
.option.wrong { border-color: var(--gf-color-danger); background: rgba(240, 90, 90, 0.1); }
.option small { display: block; color: var(--gf-color-text-subtle); font-size: 13px; }
.option:disabled { cursor: default; }
.q { display: grid; gap: var(--gf-space-3); }
.q h3 { font: 600 16px/1.3 var(--gf-font-display); }

/* Score after the reveal */
.score { display: flex; align-items: baseline; gap: var(--gf-space-3); }
.score b { font: 700 52px/1 var(--gf-font-display); }
.score span { font: 500 13px/1.3 var(--gf-font-mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--gf-color-text-subtle); }
.score.good b { color: var(--gf-color-lime); }
.score.ok b { color: var(--gf-color-warning); }
.score.bad b { color: var(--gf-color-danger); }
.rating-line { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: calc(-1 * var(--gf-space-3)) 0 0; font: 500 13px/1.5 var(--gf-font-mono); color: var(--gf-color-text-muted); }
.rating-line b.up { color: var(--gf-color-lime); }
.rating-line b.down { color: var(--gf-color-danger); }
.explain { display: grid; gap: var(--gf-space-3); color: var(--gf-color-text-muted); }
.explain b { color: var(--gf-color-text); }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--gf-space-3); }
.fact { padding: 10px 12px; background: var(--gf-color-surface-2); border: 1px solid var(--gf-color-line); border-radius: var(--gf-radius-sm); }
.fact b { display: block; font: 700 20px/1.1 var(--gf-font-display); color: var(--gf-color-text); }
.fact span { font: 500 11px/1.3 var(--gf-font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--gf-color-text-subtle); }

/* Map canvas */
.mapbox { position: relative; background: var(--gf-color-bg-sunken); border: 1px solid var(--gf-color-line); border-radius: var(--gf-radius-sm); overflow: hidden; }
.mapbox canvas { display: block; width: 100%; height: auto; aspect-ratio: 1; cursor: crosshair; }
.mapbox .hint { position: absolute; left: 12px; top: 10px; font: 500 12px/1.2 var(--gf-font-mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--gf-color-lime); pointer-events: none; }
.legend { display: flex; flex-wrap: wrap; gap: var(--gf-space-4); font-size: 13px; color: var(--gf-color-text-subtle); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }

/* Tables (economy) */
.table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table th { text-align: left; font: 500 11px/1 var(--gf-font-mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--gf-color-text-subtle); padding: 8px 10px; border-bottom: 1px solid var(--gf-color-line); }
.table td { padding: 10px; border-bottom: 1px solid var(--gf-color-line); vertical-align: middle; }
.table tr.me td { background: rgba(198, 255, 61, 0.06); }
.money { font: 600 15px/1 var(--gf-font-mono); }
.bar { height: 6px; background: var(--gf-color-line); border-radius: 3px; overflow: hidden; min-width: 80px; }
.bar i { display: block; height: 100%; background: var(--gf-color-lime); }

/* Hands + key timeline */
.handsbox { background: var(--gf-color-panel, var(--gf-color-surface)); border: 1px solid var(--gf-color-line); border-radius: var(--gf-radius-sm); overflow: hidden; }
.handsbox canvas { display: block; width: 100%; height: auto; aspect-ratio: 760 / 330; }
.timeline { width: 100%; height: auto; display: block; background: var(--gf-color-surface); border: 1px solid var(--gf-color-line); border-radius: var(--gf-radius-sm); }
.player, .player-controls { display: flex; align-items: center; gap: var(--gf-space-3); }
.player input[type=range] { flex: 1; accent-color: var(--gf-color-lime); }

/* Hub */
.hub { display: grid; gap: var(--gf-space-10); padding-block: var(--gf-space-10) var(--gf-space-16); }
.modes { display: grid; gap: var(--gf-space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.mode-card { text-decoration: none; color: inherit; }
.mode-card .gf-heading { margin-top: 2px; }

/* Dota 2: hero and item images (Valve CDN) with our own fallback badges */
.badge { display: inline-grid; place-items: center; color: #fff; font: 700 12px/1 var(--gf-font-mono); letter-spacing: 0.04em; }
.hero-chip { display: inline-flex; align-items: center; gap: 8px; padding: 3px 10px 3px 3px; border: 1px solid var(--gf-color-line-strong); border-left: 3px solid var(--team); border-radius: var(--gf-radius-sm); background: var(--gf-color-surface-2); font: 500 14px/1.2 var(--gf-font-body); white-space: nowrap; }
.hero-chip small { color: var(--gf-color-text-subtle); font-size: 12px; }
.hero-chip__icon { width: 26px; height: 26px; border-radius: 3px; object-fit: cover; }
.hero-img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--gf-radius-sm); background: var(--gf-color-surface-2); }
.item-img { width: 44px; height: 32px; object-fit: cover; border-radius: 3px; background: var(--gf-color-surface-2); flex: none; }
.player__time { font: 600 14px/1 var(--gf-font-mono); color: var(--gf-color-text-muted); min-width: 52px; text-align: right; }
.events { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; min-height: 24px; }
.events li { display: flex; gap: 10px; padding: 6px 10px; border-left: 3px solid var(--team); background: var(--gf-color-surface-2); font-size: 14px; color: var(--gf-color-text); }
.events b { font: 600 13px/1.5 var(--gf-font-mono); color: var(--gf-color-text-subtle); }

/* Itemização */
.dota-hero { display: grid; gap: var(--gf-space-5); }
@media (min-width: 720px) { .dota-hero { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: start; } }
.dota-hero__info { display: grid; gap: var(--gf-space-3); }
.dota-section { display: grid; gap: var(--gf-space-3); }
.item-row { display: flex; flex-wrap: wrap; gap: 6px; }
.item-row--named { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.item-tile { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--gf-color-text-muted); }
.enemy-grid { display: grid; gap: var(--gf-space-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); }
.enemy-card { display: grid; gap: 8px; padding: 8px; background: var(--gf-color-surface); border: 1px solid var(--gf-color-line); border-top: 3px solid var(--gf-color-red, #e8665a); border-radius: var(--gf-radius-sm); }
.enemy-card__body { display: grid; gap: 4px; font-size: 14px; }
.enemy-card .item-img { width: 36px; height: 26px; }
.opt-item { display: flex; align-items: center; gap: 12px; }
.opt-item small { display: block; }
.build { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.build li { display: grid; grid-template-columns: 44px 48px 1fr; align-items: center; gap: 10px; padding: 4px 8px 4px 4px; border: 1px solid var(--gf-color-line); border-radius: var(--gf-radius-sm); font-size: 14px; color: var(--gf-color-text-muted); }
.build li b { font: 600 13px/1 var(--gf-font-mono); color: var(--gf-color-text-subtle); }
.build li.past { opacity: 0.55; }
.build li.now { border-color: var(--gf-color-lime); background: rgba(198, 255, 61, 0.08); color: var(--gf-color-text); }

/* Draft+ */
.draft-board { display: grid; gap: var(--gf-space-5); }
.draft-row { display: grid; gap: var(--gf-space-2); }
.draft-picks { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.draft-pick { display: grid; gap: 4px; font-size: 13px; color: var(--gf-color-text-muted); border-bottom: 3px solid var(--team); padding-bottom: 4px; min-width: 0; }
.draft-pick span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.draft-pick--next { border: 1px dashed var(--team); border-bottom-width: 3px; border-radius: var(--gf-radius-sm); padding: 4px; color: var(--gf-color-text); }
.draft-pick__q { display: grid; place-items: center; aspect-ratio: 16 / 9; font: 700 28px/1 var(--gf-font-display); color: var(--team); }
.draft-bans { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.draft-ban__img { width: 30px; height: 30px; border-radius: 3px; object-fit: cover; filter: grayscale(1); opacity: 0.6; }
/* Candidates: compact rows (portrait beside the name) so all six fit next to the draft, on a laptop and a phone */
.pick-grid { display: grid; gap: var(--gf-space-2); grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); border-radius: var(--gf-radius-sm); }
.cand { display: grid; grid-template-columns: 84px minmax(0, 1fr); column-gap: 10px; row-gap: 2px; align-content: start; padding: 6px; text-align: left; cursor: pointer; color: var(--gf-color-text); font: 500 14px/1.3 var(--gf-font-body);
  background: var(--gf-color-surface-2); border: 1px solid var(--gf-color-line-strong); border-radius: var(--gf-radius-sm); }
.cand > .hero-img, .cand > .badge { grid-row: span 3; align-self: center; }
.cand > :not(.hero-img):not(.badge) { grid-column: 2; min-width: 0; }
.cand > .cand__vs { grid-column: 1 / -1; margin-top: 4px; }
.cand:hover { border-color: #4b5361; }
.cand[aria-pressed="true"] { border-color: var(--gf-color-lime); background: rgba(198, 255, 61, 0.08); }
.cand.right { border-color: var(--gf-color-lime); background: rgba(198, 255, 61, 0.14); }
.cand.wrong { border-color: var(--gf-color-danger); background: rgba(240, 90, 90, 0.1); }
.cand:disabled { cursor: default; }
.cand b { font: 600 16px/1.2 var(--gf-font-display); }
.cand__roles, .cand__stat { font-size: 12px; color: var(--gf-color-text-subtle); }
.cand__vs { display: grid; gap: 4px; font: 500 12px/1.3 var(--gf-font-mono); color: var(--gf-color-text-muted); }
.lane { display: grid; gap: 8px; }
.gf-valve { padding: var(--gf-space-6) 0 var(--gf-space-10); font-size: 12px; color: var(--gf-color-text-subtle); border-top: 1px solid var(--gf-color-line); }

/* Session progress, in the page header */
.treino-head { display: flex; align-items: center; justify-content: space-between; gap: var(--gf-space-4); padding-top: var(--gf-space-6); }
.treino-head .gf-eyebrow { margin: 0; }
.howto { display: flex; flex-wrap: wrap; gap: 6px var(--gf-space-5); margin: var(--gf-space-3) 0 0; padding: 0; list-style: none; font-size: 14px; color: var(--gf-color-text-muted); }
.howto li { display: flex; align-items: center; gap: 8px; }
.howto b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--gf-color-lime); color: var(--gf-color-bg); font: 700 12px/1 var(--gf-font-mono); }
@media (max-width: 599.98px) { .howto { display: none; } }  /* a phone's first screen is for the situation and the answers */


/* Hands: the key readout shown without WebGL or with reduced motion */
.keys-readout { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; min-height: 160px; padding: var(--gf-space-6); }

/* Utilitária: the practice-mode command */
.practice > div { display: grid; gap: 8px; min-width: 0; }
.practice code { font-family: var(--gf-font-mono); font-size: 13px; color: var(--gf-color-lime); word-break: break-all; }
.today { font-size: 13px; }
.join { display: grid; gap: var(--gf-space-3); border-color: var(--gf-color-lime); }
.join p { margin: 0; }
.join .gf-subtle { font-size: 13px; }

/* Hub */
.treino-hub { display: grid; gap: var(--gf-space-10); padding-block: var(--gf-space-10) var(--gf-space-16); }
.treino-hub__top { display: grid; gap: var(--gf-space-6); }
.game-choice { display: grid; gap: var(--gf-space-4); max-width: 760px; }
.game-choice .gf-title, .game-choice .gf-lead { margin: 0; }
.game-choice__options { display: grid; gap: var(--gf-space-3); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.game-switch { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gf-space-2); margin-bottom: var(--gf-space-5); }
.game-switch .gf-eyebrow { margin: 0 var(--gf-space-2) 0 0; }
.game-switch button {
  min-height: 40px; padding: 8px 16px; font: 600 14px/1 var(--gf-font-body); color: var(--gf-color-text); cursor: pointer;
  background: var(--gf-color-surface-2); border: 1px solid var(--gf-color-line-strong); border-radius: var(--gf-radius-sm);
}
.game-switch button:hover { border-color: #4b5361; }
.game-switch button[aria-pressed="true"] { border-color: var(--gf-color-lime); background: rgba(198, 255, 61, 0.14); color: var(--gf-color-lime); }
@media (min-width: 1000px) { .treino-hub__top { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; } }
.day-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.day-list li { display: flex; align-items: center; justify-content: space-between; gap: var(--gf-space-3); padding: 8px 12px; background: var(--gf-color-surface-2); border: 1px solid var(--gf-color-line); border-radius: var(--gf-radius-sm); font-size: 14px; }
.day-list li.locked { opacity: 0.55; }
.day-list .state { font: 500 11px/1 var(--gf-font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--gf-color-text-subtle); }
.day-list li.played .state { color: var(--gf-color-lime); }
.usage { font: 600 14px/1.3 var(--gf-font-mono); color: var(--gf-color-text-muted); }
.mode-card .progress-line { font: 500 12px/1 var(--gf-font-mono); color: var(--gf-color-text-subtle); text-transform: uppercase; letter-spacing: 0.08em; }
.mode-card .gf-btn { align-self: start; }

/* Decisão */
.squad td .gf-tag { margin-left: 6px; }
.squad td { padding: 8px; font-size: 14px; }

/* Ranking (M6b) */
.ranking { display: grid; gap: var(--gf-space-6); padding-block: var(--gf-space-8) var(--gf-space-16); }
.ranking__head { display: grid; gap: var(--gf-space-2); }
.optin { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gf-space-6); padding: var(--gf-space-8); }
.optin > * { min-width: 0; }
@media (max-width: 560px) { .optin { padding: var(--gf-space-5); } .preview-row__count { display: none; } .preview-row { grid-template-columns: auto minmax(0, 1fr) auto; } }
@media (min-width: 900px) { .optin { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .optin__head, .optin__lists, .optin > .gf-help { grid-column: 1 / -1; } }
.optin__head { display: grid; gap: var(--gf-space-3); max-width: 720px; }
.optin__preview { display: grid; gap: var(--gf-space-3); align-content: start; }
.preview-row { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: var(--gf-space-4); padding: 14px 16px; border: 1px solid var(--gf-color-lime); border-radius: var(--gf-radius-sm); background: rgba(198, 255, 61, 0.08); box-shadow: 0 0 0 4px rgba(198, 255, 61, 0.06); }
.preview-row__rank { font: 700 20px/1 var(--gf-font-display); color: var(--gf-color-lime); }
.preview-row__nick { font: 600 18px/1.2 var(--gf-font-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.preview-row__value { font: 700 18px/1 var(--gf-font-mono); }
.preview-row__count { font: 500 12px/1 var(--gf-font-mono); color: var(--gf-color-text-subtle); }
.optin__lists { display: grid; gap: var(--gf-space-4); }
@media (min-width: 720px) { .optin__lists { grid-template-columns: 1fr 1fr; } }
.optin__list { padding: var(--gf-space-5); border-radius: var(--gf-radius-sm); border: 1px solid var(--gf-color-line-strong); }
.optin__list h3 { font: 700 17px/1.3 var(--gf-font-display); margin: 0 0 var(--gf-space-3); }
.optin__list h3 span { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; margin-right: 6px; font-size: 16px; }
.optin__list ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; color: var(--gf-color-text-muted); }
.optin__list--yes { border-color: rgba(198, 255, 61, 0.45); background: rgba(198, 255, 61, 0.05); }
.optin__list--yes h3 span { background: var(--gf-color-lime); color: #0b0d10; }
.optin__list--no { border-color: rgba(255, 61, 165, 0.45); background: rgba(255, 61, 165, 0.05); }
.optin__list--no h3 span { background: var(--gf-color-magenta); color: #0b0d10; }
.optin__form { display: grid; gap: var(--gf-space-4); align-content: start; }
.optin__actions { display: flex; flex-wrap: wrap; gap: var(--gf-space-3); }
.ranking-status { display: flex; flex-wrap: wrap; align-items: center; gap: var(--gf-space-3); margin: 0; padding: 12px 16px; border: 1px solid var(--gf-color-line-strong); border-radius: var(--gf-radius-sm); background: var(--gf-color-surface); }
.ranking-status.is-on { border-color: rgba(198, 255, 61, 0.45); }
.ranking-status > span:nth-child(2) { flex: 1; min-width: 200px; }
.ranking-status__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--gf-color-text-subtle); flex: none; }
.ranking-status.is-on .ranking-status__dot { background: var(--gf-color-lime); box-shadow: 0 0 0 4px rgba(198, 255, 61, 0.15); }
.tabs-row { display: flex; flex-wrap: wrap; gap: var(--gf-space-3); justify-content: space-between; }
.tabs { display: inline-flex; border: 1px solid var(--gf-color-line-strong); border-radius: var(--gf-radius-sm); overflow: hidden; }
.tab { font: 600 14px/1 var(--gf-font-display); text-transform: uppercase; letter-spacing: 0.06em; padding: 11px 16px; color: var(--gf-color-text-muted); text-decoration: none; }
.tab + .tab { border-left: 1px solid var(--gf-color-line-strong); }
.tab[aria-current="page"] { background: var(--gf-color-lime); color: #0b0d10; }
.board { display: grid; gap: var(--gf-space-5); }
.board__about { font-size: 14px; max-width: 760px; margin: 0; }
.leaderboard th.num, .leaderboard td.money, .leaderboard td.count { text-align: right; }
.leaderboard td.rank { width: 64px; font: 600 15px/1 var(--gf-font-mono); color: var(--gf-color-text-muted); }
.leaderboard td.count { font: 500 14px/1 var(--gf-font-mono); color: var(--gf-color-text-subtle); }
.leaderboard td.who small { margin-left: 8px; font: 500 11px/1 var(--gf-font-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--gf-color-lime); }
.leaderboard .hidden-player { color: var(--gf-color-text-subtle); font-style: italic; }
.leaderboard .medal { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font: 700 14px/1 var(--gf-font-display); color: #0b0d10; background: var(--gf-color-text-muted); }
.leaderboard .podium--1 .medal { background: var(--gf-color-lime); }
.leaderboard .podium--2 .medal { background: #d9dde4; }
.leaderboard .podium--3 .medal { background: var(--gf-color-magenta); }
.leaderboard tr.gap td { text-align: center; color: var(--gf-color-text-subtle); padding: 4px; }
.leaderboard tr.me td { background: rgba(198, 255, 61, 0.08); border-top: 1px solid rgba(198, 255, 61, 0.35); border-bottom: 1px solid rgba(198, 255, 61, 0.35); }

/* Profile (M6c) */
.profile-page { display: grid; gap: var(--gf-space-6); padding-block: var(--gf-space-8) var(--gf-space-16); }
.profile-games { display: grid; gap: var(--gf-space-5); }
@media (min-width: 900px) { .profile-games { grid-template-columns: 1fr 1fr; align-items: start; } }
.profile-game { display: grid; gap: var(--gf-space-4); }
.profile-game .gf-tag { justify-self: start; }
.rating-tile { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--gf-space-4); }
.rating-tile > b { font: 700 48px/1 var(--gf-font-display); }
.rating-tile__label { display: block; font: 500 11px/1.3 var(--gf-font-mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--gf-color-text-subtle); }
.rating-tile__pos { flex-basis: 100%; font: 600 14px/1.3 var(--gf-font-mono); color: var(--gf-color-lime); text-decoration: none; }
a.rating-tile__pos:hover { text-decoration: underline; }
.delta { display: inline-block; margin-top: 4px; font: 600 13px/1 var(--gf-font-mono); padding: 3px 6px; border-radius: 3px; }
.delta.up { color: var(--gf-color-lime); background: rgba(198, 255, 61, 0.12); }
.delta.down { color: var(--gf-color-danger); background: rgba(240, 90, 90, 0.12); }
.season-line { font-size: 14px; margin: 0; }
.sparkline { width: 100%; height: 44px; }
.sparkline polyline { fill: none; stroke: var(--gf-color-lime); stroke-width: 2; vector-effect: non-scaling-stroke; }
.radar { width: 100%; max-width: 300px; justify-self: center; overflow: visible; }
.radar__ring { fill: none; stroke: var(--gf-color-line-strong); stroke-width: 1; }
.radar__shape { fill: rgba(198, 255, 61, 0.18); stroke: var(--gf-color-lime); stroke-width: 2; }
.radar__label { font: 500 10px var(--gf-font-mono); fill: var(--gf-color-text-muted); text-transform: uppercase; }
.mode-ranks { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.mode-ranks li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px var(--gf-space-3); padding: 6px 10px; background: var(--gf-color-surface-2); border-radius: var(--gf-radius-sm); }
.mode-ranks li > span:last-child { color: var(--gf-color-text-muted); font-family: var(--gf-font-mono); font-size: 13px; }
.badges { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.badge-season { padding: 8px 12px; border-radius: var(--gf-radius-sm); border: 1px solid var(--gf-color-line-strong); font-size: 14px; }
.badge-season--1 { border-color: var(--gf-color-lime); background: rgba(198, 255, 61, 0.08); }
.badge-season--2 { border-color: #d9dde4; }
.badge-season--3 { border-color: var(--gf-color-magenta); background: rgba(255, 61, 165, 0.06); }
.progress-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.progress-list li { display: grid; grid-template-columns: auto 1fr; gap: 0 var(--gf-space-3); padding: 8px 10px; background: var(--gf-color-surface-2); border-radius: var(--gf-radius-sm); }
.progress-list li span { font: 600 13px/1.4 var(--gf-font-display); text-transform: uppercase; color: var(--gf-color-text-muted); }
.progress-list li b { justify-self: end; font: 600 14px/1.4 var(--gf-font-mono); }
.progress-list li small { grid-column: 1 / -1; font-size: 12px; color: var(--gf-color-text-subtle); }
.progress-actions { display: flex; flex-wrap: wrap; gap: var(--gf-space-2); }

/* Economia: the money bars go on narrow phones, so the table fits */
@media (max-width: 520px) { .bar-cell { display: none; } }

/* Mãos do pro: the aim's path around the kill */
.aimpath { width: 100%; height: auto; aspect-ratio: 900 / 320; display: block; background: var(--gf-color-bg-sunken); border: 1px solid var(--gf-color-line); border-radius: var(--gf-radius-sm); }
.mode-card__trains { font-size: 13px; line-height: 1.45; color: var(--gf-color-text-subtle); }
.mode-card__trains b { color: var(--gf-color-lime); font-weight: 600; }
.cand__roles, .cand__stat { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }