:root {
  --gold: #f2c14e;
  --gold-dark: #8a5a12;
  --panel: #1b0f07;
  --green: #1f8a3a;
  --red: #a3161c;
  --ink: #fff6e0;
  --cell: 100px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; color: var(--ink); font-family: system-ui, 'Segoe UI', sans-serif; overflow: hidden; }
/* celular: sem zoom por pinça / toque duplo (o toque duplo atrasava e "sacudia" a página), sem puxar para atualizar
   nem efeito elástico, sem menu de toque longo e sem selecionar texto; rolagem dos painéis continua */
html, body { touch-action: pan-x pan-y; overscroll-behavior: none; -webkit-text-size-adjust: 100%; }
#viewport { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
#viewport img { -webkit-user-drag: none; }
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: default; filter: grayscale(.7) brightness(.7); }
.hidden { display: none !important; }

#viewport { position: fixed; inset: 0; }
#stage { position: absolute; left: 50%; top: 50%; width: 1280px; height: 720px; transform-origin: center; overflow: visible; }
/* fundo e escurecido dos pop-ups cobrem a janela inteira (--bleed-* = sobra da janela, calculada em ui/main.js → fit) */
#stage > .bg, #stage > .modal { inset: calc(var(--bleed-y, 0px) * -1) calc(var(--bleed-x, 0px) * -1); }
/* big win e intro: a cor de fundo continua além do palco */
#stage > .bigwin { box-shadow: 0 0 0 4000px #000d; }
#stage > .intro { box-shadow: 0 0 0 4000px #120804; }

/* Fundo placeholder: céu crepuscular + chão de lava (substituir por arte). */
.bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 40% at 50% 100%, #ff7a1a 0%, #a8300a 35%, transparent 70%),
    linear-gradient(#1a2f4a 0%, #3b3552 45%, #5a3a2a 75%, #2a1206 100%);
}
.in-fs .bg:not(.fs-art) { filter: hue-rotate(95deg) saturate(1.2); }

/* ---- Laterais ---- */
.side-left { position: absolute; left: 30px; top: 110px; width: 200px; display: flex; flex-direction: column; gap: 14px; }
.win-log {
  position: relative; height: 150px; border: 4px solid var(--gold); border-radius: 10px;
  background: #1a0808d9; box-shadow: inset 0 0 0 2px #0008;
}
.in-fs :is(#btn-buy, #btn-ante) { visibility: hidden; } /* referência: o contador ocupa o lugar dos botões; o histórico de ganhos continua */
/* painel de ganhos em unidades da referência (270×196), escalado para a largura do painel (--wl-k, ui/main.js) */
.wl-inner { position: absolute; left: 0; top: 0; width: 270px; height: 196px; transform-origin: 0 0; transform: scale(var(--wl-k, 1)); }
.wl-mask { position: absolute; left: 19px; top: 15.8px; width: 233px; height: 156px; overflow: hidden; }
.wl-list { position: absolute; inset: 0; }
.wl-row { position: absolute; left: 1.5px; width: 230px; height: 50px; border-radius: 8px; background: linear-gradient(90deg, #6d0f14, #3a0a0a);
  font-family: 'DUAT Win Log', 'DUAT Title', 'DUAT Display', sans-serif; font-size: 30px; line-height: 30px; white-space: nowrap; }
.wl-sym { position: absolute; left: 39.5px; top: 14.5px; width: 25px; height: 25px; }
.wl-sym > * { width: 100%; height: 100%; object-fit: contain; }
.wl-ly { position: absolute; top: 8px; height: 30px; }
.wl-ly > .ly { font-style: normal; display: block; paint-order: stroke fill; }
.wl-ly > .ly:not(.ly0) { position: absolute; left: 0; top: 0; }
.wl-row .wl-count { left: 21px; transform: translateX(-50%); }
.wl-row .wl-mult { left: 89px; transform: translateX(-50%); }
.wl-row .wl-amount { right: 6px; }
.wl-row .wl-amount > .ly:not(.ly0) { left: auto; right: 0; }
/* linha de total do ganho máximo: "PRÊMIO MÁX." + valor lado a lado, centrados */
.wl-row.wl-total { display: flex; align-items: center; justify-content: center; gap: 8px; }
.wl-row.wl-total > .wl-ly { position: relative; top: auto; left: auto; right: auto; transform: none; }
.wl-row.wl-total > .wl-max { top: -2.7px; }
.wl-up, .wl-down { position: absolute; width: 72.6px; height: 35px; padding: 0; border: 0; background: none; cursor: pointer; }
.wl-up { left: 95.95px; top: -19.5px; }
.wl-down { left: 98.7px; top: 180.7px; }
.wl-up::before, .wl-down::before { content: ''; position: absolute; inset: 6px 22px; background: var(--gold); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.wl-down::before { clip-path: polygon(0 0, 100% 0, 50% 100%); }
.wl-up:disabled, .wl-down:disabled { cursor: default; filter: none; } /* referência: as setas continuam acesas sem ter para onde rolar */
.wl-back, .wl-front { position: absolute; display: none; pointer-events: none; }
.wl-back { left: 8px; top: 16px; width: 254px; height: 164px; }
.wl-front { left: 0; top: 0; width: 270px; height: 196px; }
.feature-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  height: 130px; border: 4px solid var(--gold); border-radius: 10px; text-align: center;
  box-shadow: inset 0 0 0 3px #0006, 0 6px 18px #0008;
}
.feature-btn.buy { background: radial-gradient(circle at 50% 35%, #7ad35a, #1f6b2a 70%); }
.feature-btn.ante { background: radial-gradient(circle at 50% 35%, #e0493f, #6d0f14 70%); }
/* hover/press dos botões laterais: ver ui/panels.css (escala 1,01 / 0,99 da referência) */
.feature-title { font-weight: 900; font-size: 22px; line-height: 1.05; color: #fff36a; text-shadow: 0 2px 0 #000a; }
.feature-sub { font-size: 14px; font-weight: 700; }

/* contador das rodadas grátis (referência: sem caixa; número e rótulo em dourado com contorno escuro) */
.fs-panel { text-align: center; pointer-events: none; font-family: var(--font-hud); }
.fs-count, .fs-label {
  background: linear-gradient(#ffeb88, #f8ea59 28%, #d9cc3f 48%, #965d1f 72%, #ac793a 88%, #6a3f12);
  background-size: 100% 1lh; /* degradê repetido em cada linha, como na referência */
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 1px #211b0b) drop-shadow(0 0 1px #211b0b) drop-shadow(0 2px 1px #211b0bcc);
  text-transform: uppercase;
}
.fs-count { font-size: 100px; line-height: 1; font-weight: 900; }
.fs-label { font-size: 23px; line-height: 20px; font-weight: 900; }
.fs-panel.last .fs-label { font-size: 30px; line-height: 27px; }

.side-right { position: absolute; right: 30px; top: 60px; width: 230px; }
.logo { text-align: center; font-size: 54px; font-weight: 900; color: var(--gold); letter-spacing: .06em; text-shadow: 0 3px 0 var(--gold-dark), 0 0 18px #ffb34788; }
.logo small { display: block; font-size: 16px; letter-spacing: .12em; color: #8dff9a; text-shadow: 0 2px 0 #000; }
.hero {
  margin: 18px auto 0; width: 200px; height: 360px; border: 3px dashed #f2c14e88; border-radius: 100px 100px 10px 10px;
  display: grid; place-items: center; text-align: center; font-size: 13px; font-weight: 700; color: #f2c14eaa;
  background: linear-gradient(#0000, #0005);
}

/* ---- Tabuleiro ---- */
.board { position: absolute; left: 340px; top: 44px; width: 600px; z-index: 0; } /* camada própria: moldura/arte da skin não passa por cima dos botões */
.side-left, .side-right, .hud { z-index: 1; }
/* personagem atrás de tudo (menos do fundo): sai da camada do .side-right para uma própria abaixo do board */
.side-right { z-index: auto; }
.side-right .logo { position: relative; z-index: 1; }
.side-right .hero { position: relative; z-index: -1; }
#stage > .bg { z-index: -2; }
/* Trilha: carrossel de placas; a placa central é a atual. */
.trail { position: relative; height: 60px; margin-bottom: 0; overflow: hidden; }
.trail-track { position: absolute; inset: 0; }
.trail-plate {
  position: absolute; left: 50%; bottom: 0; width: 112px; height: 52px; transform-origin: 50% 100%;
  display: grid; place-items: center; font-size: 30px; font-weight: 900; color: #cfe9d4;
  border: 3px solid var(--gold); border-bottom: 0; border-radius: 14px 14px 0 0;
  background: linear-gradient(#0f3d22, #07210f); text-shadow: 0 2px 0 #000a;
}
.trail-plate.cur {
  color: #fff36a; background: linear-gradient(#35d066, #0b5a24);
  box-shadow: 0 0 18px #7dffb066, inset 0 0 0 2px #fff4;
}
.trail-flash {
  position: absolute; left: 50%; top: 60%; width: 190px; height: 110px; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse at center, #fff 0%, #ffe38a 25%, #f2c14e66 50%, transparent 70%);
  mix-blend-mode: screen;
}

.frame {
  position: relative; width: 636px; margin-left: -18px; height: 536px; padding: 12px;
  border: 6px solid var(--gold); border-radius: 12px; background: #2a0a0ae6;
  box-shadow: inset 0 0 0 3px var(--gold-dark), 0 10px 30px #000a;
}
.in-fs .frame { background: #06240fe6; }
.grid {
  /* corte fica no .sym-layer: símbolo parado maior que a célula (.sym-top) passa por cima da moldura */
  position: relative; width: calc(var(--cell) * 6); height: calc(var(--cell) * 5);
  background-image: linear-gradient(90deg, #ffffff10 1px, transparent 1px);
  background-size: var(--cell) 100%;
}
.sym-layer, .fx-layer, .fx-outline, .spine-layer { position: absolute; inset: 0; width: 100%; height: 100%; }
.spine-layer { pointer-events: none; }
.sym-layer { overflow: hidden; }
.sym-layer.sym-top { overflow: visible; pointer-events: none; }
/* Spine da cena: fundo sobre o retângulo da arte (tamanho em ui/spine-scene.js), personagem sobre o palco */
.bg > .spine-bg { inset: auto; left: 50%; top: 50%; transform: translate(-50%, -50%); }
#stage > .spine-char { z-index: -1; }
body:not(.portrait) #stage > .spine-char { left: calc(var(--bleed-x, 0px) * -1); top: calc(var(--bleed-y, 0px) * -1); width: calc(100% + 2 * var(--bleed-x, 0px)); height: calc(100% + 2 * var(--bleed-y, 0px)); }
body.spine-hero .hero { visibility: hidden; }
#stage > .spine-fx { z-index: 11; left: calc(var(--bleed-x, 0px) * -1); top: calc(var(--bleed-y, 0px) * -1); width: calc(100% + 2 * var(--bleed-x, 0px)); height: calc(100% + 2 * var(--bleed-y, 0px)); }
body.spine-bigwin :is(.bigwin-rays, .bigwin-title) { visibility: hidden; }
.fx-outline, .fx-layer { pointer-events: none; overflow: visible; }
.sym { position: absolute; top: 0; padding: 7px; will-change: transform; }
.sym-inner { width: 100%; height: 100%; transform-origin: 50% 85%; }
.sym svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 3px 2px #0009); }
.sym.scatter-hit svg { filter: drop-shadow(0 0 10px #8dff9a); }

/* Contorno neon do grupo vencedor. */
.win-cell { fill: #3dff86; fill-opacity: .16; }
.win-edge-glow { fill: none; stroke: #2dff7a; stroke-opacity: .85; stroke-width: 14; stroke-linecap: round; filter: blur(5px); }
.win-edge { fill: none; stroke: #d6ffe4; stroke-width: 4; stroke-linecap: round; }
.win-label {
  position: absolute; font-size: 26px; font-weight: 900; color: #ffe38a; white-space: nowrap;
  -webkit-text-stroke: 1px #5a3200; text-shadow: 0 3px 0 #5a3200, 0 0 12px #000;
  display: grid; place-items: center; pointer-events: none;
}
/* equação "0,40 X2" e valor final no mesmo lugar (um cresce quando o outro encolhe) */
.win-label > .wv-final, .win-label > .wv-formula { grid-area: 1 / 1; }
.win-label .wv-formula { display: flex; align-items: flex-end; }
.fx-puff {
  position: absolute; width: 110px; height: 110px; border-radius: 50%;
  background: radial-gradient(circle, #d9ffe6 0%, #5dff9a 30%, #1f8a3a88 55%, transparent 72%);
  mix-blend-mode: screen;
}
.fx-spark { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: #eaffef; box-shadow: 0 0 8px 3px #5dff9a; }

.win-pop {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-size: 56px; font-weight: 900; color: #fff36a; text-shadow: 0 4px 0 var(--gold-dark), 0 0 20px #000;
  pointer-events: none; animation: rise .9s ease-out;
}
@keyframes rise { from { transform: translate(-50%, -20%) scale(.6); opacity: 0; } 30% { opacity: 1; } }

/* ---- HUD ---- */
.hud { position: absolute; left: 0; right: 0; bottom: 0; height: 110px; padding: 0 30px; display: flex; align-items: center; background: linear-gradient(#0000, #000c 45%); }
.hud-left { display: flex; align-items: center; gap: 12px; width: 360px; }
.meters { display: grid; gap: 2px; }
.meters div { display: flex; gap: 10px; align-items: baseline; }
.meters label { font-size: 15px; font-weight: 900; color: var(--gold); width: 80px; text-align: right; }
.meters span { font-size: 20px; font-weight: 800; }
.hud-msg { flex: 1; text-align: center; font-size: 26px; font-weight: 900; text-shadow: 0 2px 0 #000; }
.hud-msg.win { font-size: 38px; color: #ffe38a; -webkit-text-stroke: 1px #5a3200; text-shadow: 0 3px 0 #5a3200, 0 0 14px #000; }
.hud-msg.win small { font-size: 26px; margin-right: 6px; }
.hud-winline { display: flex; align-items: center; justify-content: center; gap: 0.45em; white-space: nowrap; font-weight: 900; color: #fff; text-shadow: 0 2px 0 #000, 0 0 6px #000; pointer-events: none; }
.hud-winline[hidden] { display: none; }
/* restantes das rodadas grátis: mesma altura da linha de ganho, largura do demo (fonte do DUAT é mais larga) */
.hud-winline.wl-fs { letter-spacing: -0.04em; gap: 0.3em; }
.hud-winline .wl-icon { width: 1.6em; height: 1.6em; display: inline-flex; }
.hud-winline .wl-icon > * { width: 100%; height: 100%; object-fit: contain; }
.hud-right { display: flex; align-items: center; gap: 12px; }

.round-btn { width: 46px; height: 46px; border-radius: 50%; border: 3px solid #fff; background: #0008; font-size: 26px; font-weight: 900; line-height: 1; }
.round-btn.small { font-size: 14px; }
.spin-btn { width: 96px; height: 96px; border-radius: 50%; border: 5px solid #fff; background: radial-gradient(#333, #000); color: #fff; padding: 16px; box-shadow: 0 0 20px #fff4; }
.spin-btn:not(:disabled):active { transform: scale(.95); }
.spin-btn svg { width: 100%; height: 100%; }
.spin-btn .icon-stop, .spin-btn.spinning .icon-spin { display: none; }
.spin-btn.spinning .icon-stop { display: block; }
.spin-btn:not(.spinning) .icon-spin { transition: transform .3s; }
.spin-btn:not(.spinning):hover .icon-spin { transform: rotate(40deg); }
.pill-btn { padding: 8px 18px; border-radius: 999px; border: 2px solid #fff; background: #000a; font-size: 14px; font-weight: 800; }
.pill-btn.primary { background: linear-gradient(#2fbf5a, #0b5a24); border-color: var(--gold); }
.pill-btn.danger { background: linear-gradient(#e0493f, #6d0f14); border-color: var(--gold); }

/* ---- Modal ---- */
.modal { position: absolute; inset: 0; display: grid; place-items: center; background: #000b; z-index: 10; }
.modal-card {
  width: 620px; max-height: 660px; overflow: auto; padding: 22px 28px; text-align: center;
  border: 5px solid var(--gold); border-radius: 14px; background: linear-gradient(#2a150a, #120804);
  box-shadow: 0 20px 60px #000;
}
.modal-card h2 { margin: 0 0 10px; font-size: 32px; color: var(--gold); letter-spacing: .04em; }
.modal-card p { margin: 6px 0; }
.modal-card .small { font-size: 13px; opacity: .85; }
.modal-card .big { font-size: 40px; font-weight: 900; }
.gold { color: var(--gold); }
.modal-actions { display: flex; justify-content: center; gap: 14px; margin-top: 16px; }
.menu-row {
  display: flex; justify-content: space-between; align-items: center; width: 100%; margin: 6px 0; padding: 12px 16px;
  border: 2px solid #f2c14e66; border-radius: 10px; background: #0006; text-align: left; font-size: 17px; font-weight: 800;
}
.menu-row:hover, .menu-row.active { border-color: var(--gold); background: #f2c14e22; }
.menu-row small { display: block; font-size: 12px; font-weight: 500; opacity: .75; }
.menu-row b { color: var(--gold); white-space: nowrap; margin-left: 12px; }
.auto-grid { display: flex; justify-content: center; gap: 10px; margin: 10px 0; }

.paytable { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.pay-item { display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: 8px; background: #0005; font-size: 13px; text-align: left; }
.pay-item.scatter { margin: 6px 0; }
.pay-icon { width: 54px; height: 54px; flex: none; }
.pay-icon svg { width: 100%; height: 100%; }

/* Roda do gamble: segmento verde = vitória, a partir do topo. */
.wheel-wrap { position: relative; width: 260px; height: 260px; margin: 12px auto; }
.wheel {
  width: 100%; height: 100%; border-radius: 50%; border: 6px solid var(--gold);
  background: conic-gradient(#2fbf5a 0 var(--win), #3a0a0a var(--win) 360deg);
  box-shadow: inset 0 0 0 4px #0008;
}
.wheel-pointer { position: absolute; left: 50%; top: -10px; transform: translateX(-50%); border: 14px solid transparent; border-top: 26px solid #fff; z-index: 2; }
.wheel-center { position: absolute; inset: 90px; border-radius: 50%; display: grid; place-items: center; background: #120804; border: 4px solid var(--gold); font-size: 26px; font-weight: 900; color: #fff36a; }

/* ---- Cena do gamble com a balança em Spine (ui/gamble-scene.js) ----
   .gb-root: origem no centro da roda, escala da orientação (JS); medidas em unidades da referência. */
#stage > .gamble { position: absolute; z-index: 30; inset: calc(var(--bleed-y, 0px) * -1) calc(var(--bleed-x, 0px) * -1); overflow: hidden; transition: opacity .25s; }
.gamble.hidden { display: none; }
.gamble.gb-out { opacity: 0; }
.gamble .gb-dim { position: absolute; inset: 0; background: #000000d6; }
.gamble > .gb-spine { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.gamble .gb-root { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; }
.gb-wheel { position: absolute; left: 0; top: 0; --win: 180deg; }
.gb-spin { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.gb-spin > * { position: absolute; display: block; background: center / 100% 100% no-repeat; }
.gb-disc { left: -227px; top: -228px; width: 454px; height: 456px; border-radius: 50%; }
.gb-lose { background-color: #b3121a; }
/* fatia de vitória: do topo no sentido anti-horário (lado esquerdo em 50%) */
.gb-win { background-color: #1c8f36; -webkit-mask: conic-gradient(transparent 0 calc(360deg - var(--win)), #000 0); mask: conic-gradient(transparent 0 calc(360deg - var(--win)), #000 0); }
.gb-div { left: -12px; top: -213.3px; width: 24px; height: 98px; transform-origin: 12px 213.3px; background-image: linear-gradient(90deg, #8a5a0a, #ffd76a, #8a5a0a); }
.gb-div.d1 { transform: rotate(calc(-1 * var(--win))); }
.gb-inner { left: -126px; top: -126px; width: 252px; height: 252px; border-radius: 50%; box-shadow: inset 0 0 0 8px #e8b53a; }
.gb-orb { left: -119px; top: -119px; width: 238px; height: 238px; border-radius: 50%; background-image: radial-gradient(circle at 50% 40%, #b9ffff, #19a9b8 70%); }
.gb-ring { left: -233px; top: -233px; width: 466px; height: 466px; border-radius: 50%; box-shadow: inset 0 0 0 13px #e8b53a; }
.gb-arrow { position: absolute; left: -49px; top: -244px; width: 98px; height: 76px; background: center / 100% 100% no-repeat; }
.gb-arrow { clip-path: polygon(0 0, 100% 0, 50% 100%); background-color: #e8b53a; }
/* referência: esfera 1,03× com o mouse, 0,97× pressionada */
.gamble:has(.gb-press:not(:disabled):hover) .gb-orb { transform: scale(1.03); }
.gamble:has(.gb-press:not(:disabled):active) .gb-orb { transform: scale(0.97); }
.gb-plates { position: absolute; left: 0; top: 0; }
.gb-plate { position: absolute; left: 0; top: 0; display: block; line-height: 0; white-space: nowrap; }
.gb-plate .bmf-label img { height: var(--h); }
.gb-plate:not(:has(.bmf)) { font: 900 calc(var(--h) * 0.8) / 1 var(--font-hud); color: #fff36a; }
.gamble button { font-family: var(--font-hud); }
.gb-press { position: absolute; left: -119px; top: -119px; width: 238px; height: 238px; border-radius: 50%; border: 0; padding: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.gb-press:disabled { cursor: default; }
.gb-press span { font-size: 58px; line-height: 0.92; color: #fff200; -webkit-text-stroke: 7px #1e4238; paint-order: stroke fill; transition: opacity .5s; }
.gamble.gb-text-off .gb-press span, .gamble.gb-max .gb-press span { opacity: 0; }
.gb-collect { position: absolute; left: -188.6px; top: 272.1px; width: 381px; height: 96px; border: 0; padding: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.gb-collect:disabled { cursor: default; }
.gb-cbg { position: absolute; inset: 0; border-radius: 48px; background: linear-gradient(#e0149c, #8a0a6a); box-shadow: inset 0 0 0 5px #e8b53a; }
.gb-cbg::after { content: ''; position: absolute; inset: 0; background: center / 100% 100% no-repeat; }
.gb-collect:disabled .gb-cbg { opacity: 0.64; }
.gb-collect span { position: relative; top: -3.75px; font-size: 52.5px; color: #e9e3d2; -webkit-text-stroke: 4px #2a0022; paint-order: stroke fill; }
.gb-collect:not(:disabled):hover { transform: scale(1.03); }
.gb-collect:not(:disabled):active { transform: scale(0.97); }
.gb-title { position: absolute; left: 0; top: 0; width: 1308px; text-align: center; font: 58px / 1.08 var(--font-hud); color: #dee4ca; -webkit-text-stroke: 6px #000; paint-order: stroke fill; text-transform: uppercase; }
.gb-info { position: absolute; left: -13.1px; top: 0; }
.gb-info p { position: absolute; left: 0; margin: 0; transform: translate(-50%, -50%); width: var(--info-w, 1308px); text-align: center; font: 48px / 1.08 var(--font-hud); color: #dee4ca; -webkit-text-stroke: 5px #000; paint-order: stroke fill; }
.gb-info .gb-l1 { top: 443.6px; white-space: nowrap; }
.gb-info .gb-l2 { top: 523px; }
/* aviso de troca de velocidade (referência: caixa preta ~78% no centro da grade, 404×166 no palco) */
.speed-toast { position: absolute; left: 437px; top: 259px; width: 404px; height: 166px; z-index: 40; pointer-events: none; display: flex; flex-direction: column; align-items: center; background: #000c; font-family: var(--font-hud); font-weight: 900; color: #fff; }
.speed-toast[hidden] { display: none; }
.speed-toast .st-arrows { width: 66px; height: 35px; margin-top: 39px; }
.speed-toast .st-arrows path { fill: #9a9a9a; }
.speed-toast .st-arrows path.on { fill: #fff; }
.speed-toast .st-text { margin-top: 38px; font-size: 22px; line-height: 1; white-space: nowrap; } /* referência: maiúscula 12 px de tela; largura fixa via letter-spacing (main.js) */
.speed-toast .st-text b { color: #f6af31; }