/* Minigames dos lances-chave: palco em SVG, contagem e peças do desenho */
/* O palco tem a proporção do desenho (100×60): o cenário cobre a área inteira, sem faixas lisas dos lados no
   computador; lá ele para numa largura confortável e fica centrado. */
.mg { position: relative; margin-top: 12px; max-width: 560px; margin-inline: auto; }
.mg-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.mg-area { display: block; width: 100%; height: auto; aspect-ratio: 5 / 3; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; border-radius: 8px; outline: none;
  background: radial-gradient(ellipse at 50% 110%, #1d4a2c 0%, #12301d 60%, #0d2316 100%); border: 1px solid var(--line2); cursor: crosshair; }
.mg-area:focus-visible { border-color: var(--accent); }
.mg-foot { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
/* Fim do lance: selo do resultado no canto do palco e o texto do lance no rodapé, no lugar da instrução */
.mg-verdict { position: absolute; z-index: 3; padding: 5px 10px 4px; background: rgba(8, 12, 10, 0.9); border: 2px solid #0f1512; box-shadow: inset 0 0 0 2px #2d3a33;
  font-family: var(--font-pixel); font-weight: 700; font-size: 18px; line-height: 1; letter-spacing: 1px; color: #e8efe9; pointer-events: none;
  animation: mg-verdict-pop 0.28s steps(3, end) both; }
.mg-verdict.ok { color: #5fd38a; text-shadow: 0 0 6px rgba(95, 211, 138, 0.55); }
.mg-verdict.ko { color: #ff6b57; text-shadow: 0 0 6px rgba(255, 107, 87, 0.5); }
@keyframes mg-verdict-pop { 0% { transform: scale(1.35); } 100% { transform: scale(1); } }
.mg-result { margin: 0; padding: 4px 0 4px 10px; border-left: 4px solid var(--line2); font-size: 15px; line-height: 1.35; color: var(--text); }
.mg-result.ok { border-left-color: #3fa564; }
.mg-result.ko { border-left-color: #d9534f; }
.mg-result .mg-exec { color: var(--muted); white-space: nowrap; }
.mg-skip { font-size: 12px; color: var(--muted); }
@media (max-width: 520px) { .mg-verdict { font-size: 15px; padding: 4px 8px 3px; } }
/* Contagem retrô: painel de placar sobre o palco (posição e altura vêm do JS), números de LED e blocos que acendem */
.mg-ready { position: absolute; left: 0; right: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 16px; text-align: center; background: rgba(8, 12, 10, 0.88); border: 2px solid #0f1512; box-shadow: inset 0 0 0 2px #2d3a33;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,0.025) 0 1px, transparent 1px 3px); pointer-events: none; }
.mg-ready-top { display: flex; align-items: center; gap: 8px; font-family: var(--font-pixel); font-weight: 400; font-size: 14px; letter-spacing: 1.5px; text-transform: uppercase; color: #f2c94c; }
.mg-ready-top .pxi { width: 20px; height: 20px; vertical-align: 0; }
.mg-ready-how { margin: 0; max-width: 460px; font-size: 14px; line-height: 1.4; color: #e8efe9; }
.mg-ready-led { min-width: 96px; padding: 4px 14px 2px; background: #050806; border: 2px solid #1d2622; font-family: var(--font-pixel); font-size: 52px; line-height: 1.05;
  color: #ff9a1f; text-shadow: 0 0 8px rgba(255, 154, 31, 0.6); font-variant-numeric: tabular-nums; }
.mg-ready-led span { display: inline-block; animation: mg-tick 0.85s steps(4, end) both; }
.mg-ready-led .go { color: #5fd38a; text-shadow: 0 0 8px rgba(95, 211, 138, 0.65); animation: none; }
.mg-ready-bar { display: flex; gap: 4px; }
.mg-ready-bar i { width: 28px; height: 8px; background: #1d2622; border: 1px solid #2d3a33; }
.mg-ready-bar i.on { background: #ff9a1f; box-shadow: 0 0 6px rgba(255, 154, 31, 0.6); }
@keyframes mg-tick { 0% { transform: scale(1.35); opacity: 0.4; } 25% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@media (max-width: 520px) {
  .mg-ready { gap: 6px; padding: 8px 12px; }
  .mg-ready-how { font-size: 13px; }
  .mg-ready-led { font-size: 40px; min-width: 80px; }
}
.px-arrow { display: inline-block; width: 0.85em; height: 0.85em; vertical-align: -0.08em; fill: currentColor; shape-rendering: crispEdges; }
.mg-pad .px-arrow { width: 0.8em; height: 0.8em; }
.mg-pad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.mg-pad .btn { font-size: 22px; padding: 10px 0; touch-action: manipulation; justify-content: center; border: 1px solid var(--line2); background: var(--bg2); }
/* Só as direções do jogo (onDirs): menos botões, maiores */
.mg-dirs .btn { font-size: 26px; padding: 14px 0; }
/* Folga ao rolar até o palco: a barra fixa de baixo (≈60px) e o rodapé (instruções e setas do drible), que só é preenchido depois da rolagem. */
.mg { scroll-margin: 12px 0 76px; }
@media (max-width: 760px) { .mg { scroll-margin-bottom: calc(170px + env(safe-area-inset-bottom, 0px)); } }

/* Peças (coordenadas do viewBox 100×60) */
.mg-shadow { fill: rgba(0,0,0,0.35); }
.mg-goal-line { fill: rgba(255,255,255,0.6); }
.mg-area.mg-pixel { background: #317e40; image-rendering: pixelated; }
.mg-reach { fill: rgba(236,102,80,0.16); stroke: rgba(236,102,80,0.5); stroke-width: 0.25; stroke-dasharray: 1 0.8; }
.mg-wall { fill: rgba(236,102,80,0.35); }
.mg-cross { fill: none; stroke: #f2c94c; stroke-width: 0.5; }
.mg-cross-dot { fill: #ffffff; }
.mg-sector { fill: rgba(242,177,52,0.18); stroke: var(--accent); stroke-width: 0.3; }
.mg-track { fill: rgba(255,255,255,0.08); }
.mg-time { fill: #f2c94c; }
.mg-finish { stroke: #ffffff; stroke-width: 0.4; stroke-dasharray: 1 1; }
.mg-label { fill: rgba(255,255,255,0.7); font-size: 3.2px; font-family: inherit; }
.mg-key { fill: rgba(255,255,255,0.06); stroke: rgba(255,255,255,0.2); stroke-width: 0.3; }
.mg-arrow { fill: rgba(255,255,255,0.75); font-size: 9px; font-weight: 700; text-anchor: middle; font-family: inherit; }
.mg-arrow.cur { fill: var(--accent); }
.mg-arrow.ok { fill: #4cc27a; }
.mg-arrow.ko { fill: #ec6650; }
.mg-ring { fill: none; stroke: #f2c94c; stroke-width: 0.5; stroke-dasharray: 1.2 0.8; }
.mg-lane { stroke: rgba(255,255,255,0.18); stroke-width: 0.8; stroke-dasharray: 2 1.5; }
.mg-lane.open { stroke: #4cc27a; stroke-dasharray: none; }
.mg-lane.fake { stroke: #f2c94c; stroke-dasharray: 1.2 1; }
/* Falta: linha da direção, barreira e barra de força */
.mg-wall-soft { fill: rgba(236,102,80,0.14); }
.mg-fk-line { stroke: #f2c94c; stroke-width: 0.45; stroke-dasharray: 1.2 0.8; }
.mg-fk-line.locked { stroke: #ffffff; stroke-dasharray: none; stroke-opacity: 0.8; }
.mg-meter-frame { fill: none; stroke: #0f1512; stroke-width: 0.5; }
.mg-meter-ok { fill: #4cc27a; }
.mg-meter-bad { fill: #ec6650; }
.mg-meter-needle { fill: #ffffff; stroke: #0f1512; stroke-width: 0.25; }
/* Lançamento: faixa de queda, marca de giz e barra de força */
.bd-chalk.mg-lp-zone { stroke: #4cc27a; stroke-opacity: 0.9; stroke-width: 2.4; }
.mg-lp-mark { fill: none; stroke: #f2c94c; stroke-width: 0.6; }
.mg-lp-ok { fill: rgba(76,194,122,0.55); }

/* Prancheta: quadro verde, giz com tremor e discos numerados */
.mg-area.bd { background: #1f3a2c; }
.bd-frame { fill: none; stroke: #4b3524; stroke-width: 1.6; }
.bd-chalk { fill: none; stroke: #e8efe9; stroke-opacity: 0.75; stroke-width: 0.55; stroke-linecap: round; stroke-linejoin: round; }
.bd-mark { stroke-opacity: 0.22; stroke-width: 0.4; }
.bd-lane { stroke-opacity: 0.5; }
.bd-arrow, .bd-run { stroke-width: 0.7; stroke-opacity: 0.9; }
.bd-x { stroke: #ec6650; stroke-opacity: 0.95; stroke-width: 0.9; }
.bd-ring { stroke: #f2c94c; stroke-opacity: 0.95; stroke-width: 0.7; }
.bd-trail { stroke: #e8efe9; stroke-opacity: 0.4; stroke-width: 0.45; stroke-dasharray: 1.2 1; }
.bd-ball { fill: #e8efe9; }
.bd-disc circle { stroke: #e8efe9; stroke-opacity: 0.85; stroke-width: 0.45; }
.bd-num { font-size: 3.4px; font-weight: 400; text-anchor: middle; font-family: var(--font-pixel); }
.bd .mg-lane { fill: none; stroke-linecap: round; }
/* Peças dos minigames por posição (sprites/board.js) */
.bd-free { stroke: #4cc27a; stroke-opacity: 0.95; stroke-width: 0.7; stroke-dasharray: 1.4 1; }
.bd-hatch { stroke: #ec6650; stroke-opacity: 0.5; stroke-width: 0.35; }
.bd-sector-edge { stroke: #ec6650; stroke-opacity: 0.85; }
.bd-ring-base { fill: none; stroke: #e8efe9; stroke-opacity: 0.18; stroke-width: 0.9; }
.bd-ring-fill { stroke-opacity: 0.95; stroke-width: 0.9; }
.bd-ring-mark { fill: none; stroke: #f2c94c; stroke-opacity: 0.55; stroke-width: 1.8; }
.bd-net { stroke-opacity: 0.45; stroke-width: 0.35; }
.bd-mesh { stroke-opacity: 0.22; }
.bd-goal-line { stroke-opacity: 0.95; stroke-width: 0.65; }
.bd-post { fill: #e8efe9; }
.bd-fog { fill: #1f3a2c; }
.bd-squiggle { stroke: #f2c94c; stroke-opacity: 0.95; }
.bd-mark-text { fill: #f2c94c; font-size: 4.2px; font-weight: 800; text-anchor: middle; font-family: inherit; paint-order: stroke; stroke: #1f3a2c; stroke-width: 0.6; }
.bd-dash { stroke-dasharray: 1.4 1.1; stroke-opacity: 0.6; }
.bd-offside { stroke: #f2c94c; stroke-opacity: 0.9; stroke-width: 0.6; }

/* Tela-esqueleto dos minigames em construção (minigames/skeleton.js) */
.mg-wip-box { fill: rgba(8, 12, 10, 0.78); stroke: #2d3a33; stroke-width: 0.4; }
.mg-wip { fill: #f2c94c; font-family: var(--font-pixel); font-size: 4.4px; text-anchor: middle; text-transform: uppercase; letter-spacing: 0.3px; }
.mg-wip-sub { fill: rgba(232, 239, 233, 0.8); font-size: 3.4px; text-anchor: middle; font-family: inherit; }

/* Comemoração de gol (minigames/celebration.js): telão com o GOL! em lâmpadas sobre o palco, à direita do gol */
.mg-cel-wrap { position: relative; }
.mg-cel, .mg-cel .mg-area { cursor: pointer; }
.mg-cel-board { position: absolute; top: 6px; left: 50%; right: 8px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 10px 5px;
  background: rgba(8, 12, 10, 0.86); border: 2px solid #0f1512; box-shadow: inset 0 0 0 2px #2d3a33; pointer-events: none; }
.mg-cel-led { position: relative; display: flex; gap: 0.06em; font-family: var(--font-pixel); font-weight: 700; font-size: min(48px, 11.5vw); line-height: 1; }
.mg-cel-led span { display: inline-block; color: #2b2416; }
.mg-cel-led span.on { color: #ffcf3f; text-shadow: 0 0 8px rgba(255, 190, 40, 0.75), 0 0 2px #fff3c4; animation: mg-cel-pop 0.24s steps(3, end) both; }
/* A piscada só apaga o brilho: as letras continuam legíveis. */
.mg-cel-board.dim .mg-cel-led span.on { color: #d9a92c; text-shadow: none; }
/* Grade de lâmpadas por cima das letras: o placar de pontos */
.mg-cel-led::after { content: ''; position: absolute; inset: -2px; pointer-events: none;
  background-image: radial-gradient(circle, transparent 0.9px, rgba(8, 12, 10, 0.72) 1.3px); background-size: 3px 3px; }
.mg-cel-sub { font-family: var(--font-pixel); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: #e8efe9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mg-cel-sub:empty { display: none; }
@keyframes mg-cel-pop { 0% { transform: scale(1.45); } 100% { transform: scale(1); } }
@media (max-width: 520px) {
  .mg-cel-board { left: 50%; right: 6px; padding: 4px 8px; }
  .mg-cel-led { font-size: min(40px, 10vw); }
}
@media (prefers-reduced-motion: reduce) { .mg-cel-led span.on { animation: none; } }

/* ==================== Minigames por posição: um bloco por grupo, prefixo por jogo (mg-angle-*...) ==================== */

/* ---- Goleiro (GK): angle, barrier, outlet */
/* Ângulo: faixa verde no chão (com o meio marcado), vermelho perto demais, cone do chute e a sombra que o corpo cobre */
.mg-angle-band { fill: rgba(95, 211, 138, 0.75); stroke: #0f1512; stroke-width: 0.25; }
.mg-angle-mid { fill: #f4f6f8; }
.mg-angle-red { fill: rgba(236, 102, 80, 0.8); stroke: #0f1512; stroke-width: 0.25; }
.mg-angle-cone { stroke: rgba(255, 255, 255, 0.55); stroke-width: 0.3; stroke-dasharray: 1 0.8; }
.mg-angle-shadow { fill: rgba(8, 20, 12, 0.32); }
/* Barreira: linha amarela até a trave do lado da bola, a outra fraca; anel na ponta da barreira quando ela está na linha */
.mg-barrier-line { stroke: #f2c94c; stroke-width: 0.8; stroke-linecap: round; stroke-opacity: 0.95; }
.mg-barrier-far { stroke: #e8efe9; stroke-width: 0.35; stroke-opacity: 0.35; stroke-dasharray: 1.2 1; }
.mg-barrier-tick { stroke-opacity: 0.35; }
.mg-barrier-tip { fill: none; stroke: #e8efe9; stroke-opacity: 0.35; stroke-width: 0.4; stroke-dasharray: 0.8 0.8; }
.mg-barrier-tip.on { stroke: #4cc27a; stroke-opacity: 0.95; stroke-width: 0.6; stroke-dasharray: none; }
/* Reposição: o "nariz" do marcador (para onde ele olha) e a linha "de olho" da isca */
.mg-outlet-nose { stroke-width: 0.7; stroke-opacity: 0.95; }
.mg-outlet-eye { stroke: #f2c94c; stroke-opacity: 0.7; }

/* ---- Zagueiro (CB): shoulder, read, block */
/* Corpo a corpo: placa escura com a barra do equilíbrio (vermelho nas pontas, verde no meio), agulha branca, "!" do aviso e o apito da falta */
.mg-shoulder-plate { fill: rgba(8, 12, 10, 0.86); stroke: #2d3a33; stroke-width: 0.4; }
.mg-shoulder-plate.surge { stroke: #ec6650; stroke-width: 0.8; }
.mg-shoulder-track { fill: #3a4640; stroke: #0f1512; stroke-width: 0.3; }
.mg-shoulder-red { fill: #ec6650; }
.mg-shoulder-green { fill: #4cc27a; }
.mg-shoulder-mid { fill: rgba(255, 255, 255, 0.55); }
.mg-shoulder-tag { fill: rgba(232, 239, 233, 0.85); font-size: 3.2px; font-family: inherit; }
.mg-shoulder-tag.end { text-anchor: end; }
.mg-shoulder-needle { fill: #ffffff; stroke: #0f1512; stroke-width: 0.25; }
.mg-shoulder-bang { fill: #f2c94c; font-family: var(--font-pixel); font-size: 7px; text-anchor: middle; paint-order: stroke; stroke: #1a1410; stroke-width: 0.9; }
.mg-shoulder-foul { fill: #f2c94c; font-family: var(--font-pixel); font-size: 5px; text-anchor: middle; letter-spacing: 0.4px; }
/* Leitura: os tracinhos dos 7 lugares no chão e a sombra da bola (a pista), mais forte que a das pessoas */
.mg-read-tick { fill: rgba(255, 255, 255, 0.7); }
.mg-read-shadow { fill: rgba(6, 22, 10, 0.75); }
/* Bloqueio: o seu trilho, a linha do chute e a marca amarela onde ela cruza o trilho */
.mg-block-rail { stroke-opacity: 0.3; }
.mg-block-line { stroke-opacity: 0.7; }
.mg-block-cross { fill: none; stroke: #f2c94c; stroke-width: 0.7; stroke-linecap: round; }

/* ---- Laterais (LB/RB): overlap, jockey, lead */
/* Ultrapassagem: a linha lateral parada (o corredor rola por baixo) e o colchete sob o pé, que pisca na cor da batida */
.mg-roll-grass { fill: #317e40; }
.mg-roll-stripe { fill: #2a7037; }
.mg-roll-far { fill: rgba(233, 239, 230, 0.5); }
.mg-roll-line { fill: #e9efe6; }
.mg-overlap-bracket rect { fill: #f2c94c; fill-opacity: 0.7; stroke: #0f1512; stroke-width: 0.2; }
.mg-overlap-bracket.ok rect { fill: #5fd38a; fill-opacity: 1; }
.mg-overlap-bracket.late rect { fill: #f2c94c; fill-opacity: 1; }
.mg-overlap-bracket.ko rect { fill: #ec6650; fill-opacity: 1; }
/* Marcação: linha lateral grossa, nomes dos corredores, o quadril (seta branca) e as bolinhas dos cortes */
.mg-jockey-touch { stroke-width: 1.3; stroke-opacity: 0.95; }
.mg-jockey-lane { fill: rgba(232, 239, 233, 0.75); font-size: 3.4px; }
.mg-jockey-hip { stroke: #ffffff; stroke-opacity: 1; stroke-width: 0.85; }
.mg-jockey-pip { fill: none; stroke: #e8efe9; stroke-opacity: 0.5; stroke-width: 0.4; }
.mg-jockey-pip.ok { fill: #4cc27a; stroke: #4cc27a; stroke-opacity: 1; }
.mg-jockey-pip.late { fill: #f2c94c; stroke: #f2c94c; stroke-opacity: 1; }
.mg-jockey-pip.ko { fill: #ec6650; stroke: #ec6650; stroke-opacity: 1; }
/* Cruzamento: a grande área, a curva da corrida, o fim dela e o X do teclado */
.mg-lead-box { stroke-opacity: 0.55; stroke-width: 0.45; }
.mg-lead-path { stroke-opacity: 0.6; }
.mg-lead-end { fill: none; stroke: #e8efe9; stroke-opacity: 0.45; stroke-width: 0.4; }
.mg-lead-x { stroke: #f2c94c; stroke-opacity: 0.95; stroke-width: 0.65; }

/* ---- Meio-campo (CDM/CM/CAM): scan, carry, turn */
/* Visão de jogo: o nome da fase ao lado da barra ("olhe", "passe!"), a barra da resposta, o anel do teclado e o anel tracejado de quem estava livre */
.mg-scan-phase { fill: #e8efe9; font-weight: 800; letter-spacing: 0.2px; }
.mg-time.mg-scan-ans { fill: #ec9a50; }
.mg-scan-sel { fill: none; stroke: #f2c94c; stroke-width: 0.7; stroke-dasharray: 1.3 0.9; }
.mg-scan-was { fill: none; stroke: #f2c94c; stroke-opacity: 0.9; stroke-width: 0.55; stroke-dasharray: 1 0.9; }
/* Condução: o corredor, os tracinhos das bordas do vão, o vão tracejado (onde a dupla vai estar quando você chegar), o rastro, a dupla batida e as bolinhas das linhas */
.mg-carry-lane { stroke-opacity: 0.35; }
.mg-carry-tick { stroke: #f2c94c; stroke-opacity: 0.85; stroke-width: 0.5; }
.mg-carry-ghost { fill: none; stroke: #f2c94c; stroke-opacity: 0.85; stroke-width: 0.45; stroke-dasharray: 1 0.8; }
.mg-carry-run { stroke-opacity: 0.8; }
.bd-disc.mg-carry-beaten { opacity: 0.5; }
.mg-carry-pip { fill: none; stroke: #e8efe9; stroke-opacity: 0.5; stroke-width: 0.4; }
.mg-carry-pip.ok { fill: #4cc27a; stroke: #4cc27a; stroke-opacity: 1; }
.mg-carry-pip.late { fill: #f2c94c; stroke: #f2c94c; stroke-opacity: 1; }
.mg-carry-pip.ko { fill: #ec6650; stroke: #ec6650; stroke-opacity: 1; }
/* Giro: a seta (branca, mais grossa), o tracinho do meio de cada lado livre e o lado ou o arco em que a seta está agora */
.mg-turn-arrow { stroke: #ffffff; stroke-opacity: 1; stroke-width: 0.9; }
.mg-turn-mid { stroke: #4cc27a; stroke-opacity: 0.95; stroke-width: 0.6; }
.mg-turn-free.on { stroke-dasharray: none; stroke-width: 0.95; }
.mg-turn-sector .bd-hatch { transition: stroke-opacity 80ms; }
.mg-turn-sector.on .bd-hatch { stroke-opacity: 0.9; }

/* ---- Pontas (LW/RW): nutmeg, elastic, race */
/* Caneta: o pontilhado da bola até o vão e a marca do alto do passo (fraca parada, acesa na subida, cheia no pico) */
.mg-nutmeg-path { stroke: #ffffff; stroke-opacity: 0.7; stroke-width: 0.45; stroke-dasharray: 0.5 1.1; stroke-linecap: round; }
.mg-nutmeg-mark circle, .mg-nutmeg-mark line { fill: none; stroke: #f2c94c; stroke-width: 0.55; stroke-opacity: 0.4; }
.mg-nutmeg-mark circle { stroke-dasharray: 1.2 0.8; }
.mg-nutmeg-mark.on circle, .mg-nutmeg-mark.on line { stroke-opacity: 1; }
.mg-nutmeg-mark.hit circle { fill: rgba(242, 201, 76, 0.55); stroke-opacity: 1; stroke-dasharray: none; }
.mg-nutmeg-mark.hit line { stroke-opacity: 1; }
/* Elástico: a placa do combo (setas apagadas até você apertar; verde no acerto, vermelha no erro) e a poeira do bote */
.mg-elastic-board { fill: rgba(8, 12, 10, 0.86); stroke: #2d3a33; stroke-width: 0.4; }
.mg-elastic-key { fill: #1f2a24; stroke: #55635b; stroke-width: 0.35; }
.mg-elastic-glyph { fill: #e8efe9; fill-opacity: 0.85; }
.mg-elastic-arrow.ok .mg-elastic-key { fill: #2f8f55; stroke: #5fd38a; }
.mg-elastic-arrow.ok .mg-elastic-glyph { fill: #ffffff; fill-opacity: 1; }
.mg-elastic-arrow.ko .mg-elastic-key { fill: #8f2f25; stroke: #ec6650; }
.mg-elastic-arrow.ko .mg-elastic-glyph { fill: #ffd9d3; fill-opacity: 1; }
.mg-elastic-plus { fill: #e8efe9; fill-opacity: 0.6; font-size: 4px; font-family: var(--font-pixel); text-anchor: middle; }
.mg-elastic-dust { fill: #d8cfa4; }
.mg-elastic-verdict { font-family: var(--font-pixel); font-size: 4px; text-anchor: middle; letter-spacing: 0.4px; paint-order: stroke; stroke: #1a1410; stroke-width: 0.8; }
.mg-elastic-verdict.ok { fill: #5fd38a; }
.mg-elastic-verdict.ko { fill: #ff6b57; }
/* Fôlego: a barra (verde, amarela e vermelha) com o calor por cima, que pisca na cãibra, e a poeira da arrancada */
.mg-race-plate { fill: rgba(8, 12, 10, 0.86); stroke: #2d3a33; stroke-width: 0.4; }
.mg-race-bar.cramp .mg-race-plate { stroke: #ec6650; stroke-width: 0.8; }
.mg-race-zone { fill-opacity: 0.38; }
.mg-race-zone.green { fill: #4cc27a; }
.mg-race-zone.yellow { fill: #f2c94c; }
.mg-race-zone.red { fill: #ec6650; }
.mg-race-fill.green { fill: #5fd38a; }
.mg-race-fill.yellow { fill: #f2c94c; }
.mg-race-fill.red { fill: #ec6650; }
.mg-race-bar.cramp .mg-race-fill { fill: #ff8a78; }
.mg-race-needle { fill: #ffffff; stroke: #0f1512; stroke-width: 0.25; }
.mg-race-cramp { fill: #f2c94c; font-family: var(--font-pixel); font-size: 3.6px; text-anchor: middle; letter-spacing: 0.3px; paint-order: stroke; stroke: #1a1410; stroke-width: 0.7; }
.mg-race-dust { fill: #d8cfa4; }

/* ---- Centroavante (ST): chip, firsttouch, run */
/* Desmarque: a bandeirinha de giz e o aviso de impedimento */
.mg-run-flag { fill: #f2c94c; fill-opacity: 0.9; stroke: #e8efe9; stroke-opacity: 0.75; stroke-width: 0.3; }
.mg-run-off { fill: #f2c94c; font-size: 3.6px; font-weight: 800; font-family: inherit; paint-order: stroke; stroke: #1f3a2c; stroke-width: 0.6; }