/* =========================================================
   GainBet — Comboio (ao vivo): o cenário, o comboio, os painéis e o selo "Novo" do mosaico
   O cenário é desenhado em unidades (600 = a altura do ecrã do jogo); --k é o tamanho de uma unidade em px
   (o train-ui.js mede o ecrã e acerta-o). Só se animam transform e opacity (as camadas deslizam, as rodas giram).
   ========================================================= */

/* ---------- cores de cada linha (a hora do dia) ---------- */
.tr{
  --k:.5px;
  --sky-1:#5fb0e0;--sky-2:#a7d8ef;--sky-3:#f3efd6;
  --sun:#fff4c4;--sun-glow:rgba(255,236,170,.55);
  --cloud:rgba(255,255,255,.92);
  --far:#86adbd;--far-2:#a7c6d1;
  --hill:#6c9f52;--hill-2:#93bf6c;
  --land:#5f8f43;--tree:#2c6436;--tree-2:#3f7a3d;--trunk:#5a3d2b;
  --wall:#fbf7ee;--roof:#c4603a;--win:#33465a;--lit:#ffd36b;--sail:#e9e2d2;
  --pole:#4b3a30;--wire:rgba(40,30,25,.55);
  --ground:#5f8a42;--ballast:#9a8e80;--stone:#7e7366;--sleeper:#4b3a2e;--rail:#5d6168;--rail-hi:#d3d8df;--tuft:#4c7a35;
  --fore:#3f7330;
  --st-wall:#fbf8f1;--st-tile:#fbf8f1;--st-az:#2a5ca8;--st-roof:#b9572f;--st-eave:#e9dfcf;--st-door:#3a2f2a;--st-frame:#2a5ca8;
  --st-win:#37506b;--st-slab:#d7d1c6;--st-edge:#e9e4da;--st-line:#f2c230;--st-face:#a59d91;--st-iron:#2f3338;--st-glow:#fff1b8;
  --tr-body:#2e6a4f;--tr-trim:#efe2c2;--tr-dark:#22272b;--tr-roof:#3a4040;--tr-hi:rgba(255,255,255,.16);--tr-brass:#d8b25a;
  --tr-win:#bfe0ee;--tr-lamp:#fff3c0;--tr-coal:#1d1f22;--tr-wheel:#a8322d;--tr-wheel-2:#7d221f;--tr-rod:#c9ccd1;--tr-pax:#2b2f36;
  --smoke:rgba(250,250,250,.9);--smoke-2:rgba(210,210,210,.6);
}
.tr[data-line="medium"]{
  --sky-1:#3a2b5d;--sky-2:#c2566e;--sky-3:#f7b26a;
  --sun:#ffc56a;--sun-glow:rgba(255,160,90,.5);
  --cloud:rgba(255,196,170,.8);
  --far:#6e3e63;--far-2:#87506f;
  --hill:#6a2b45;--hill-2:#8b3f57;
  --land:#57243b;--tree:#3a1729;--tree-2:#44192d;--trunk:#2c1420;
  --wall:#f6d6c0;--roof:#a8452f;--win:#5a2e3a;--lit:#ffcf7a;--sail:#f3d2c0;
  --pole:#2b1520;--wire:rgba(30,10,20,.55);
  --ground:#4b2133;--ballast:#7b6066;--stone:#5c4449;--sleeper:#2e1a1f;--rail:#4a3a40;--rail-hi:#f6bd8b;--tuft:#3c1a29;
  --fore:#341424;
  --st-wall:#f8e6d8;--st-tile:#f8e6d8;--st-az:#284e95;--st-roof:#9e3f2b;--st-eave:#f0d6c4;--st-door:#3a2026;--st-frame:#284e95;
  --st-win:#5d3442;--st-slab:#cdb6ae;--st-edge:#e8d3c9;--st-line:#f2c230;--st-face:#93787a;--st-iron:#2a1d22;--st-glow:#ffe0a0;
  --tr-body:#8f1636;--tr-trim:#f3d9a4;--tr-dark:#2a1418;--tr-roof:#3e1d25;--tr-brass:#e3b54e;
  --tr-win:#ffd59a;--tr-lamp:#fff0c8;--tr-wheel:#2b1c20;--tr-wheel-2:#160d10;--tr-rod:#e3b54e;--tr-pax:#2a141a;
  --smoke:rgba(255,236,226,.9);--smoke-2:rgba(220,190,190,.55);
}
.tr[data-line="hard"]{
  --sky-1:#04070f;--sky-2:#0d1834;--sky-3:#26375f;
  --sun:#f2efdc;--sun-glow:rgba(220,228,255,.28);
  --far:#18243f;--far-2:#24345a;
  --hill:#0e1730;--hill-2:#142140;
  --land:#0a1226;--tree:#060c1a;--tree-2:#081022;--trunk:#060c1a;
  --wall:#2a3550;--roof:#18203a;--win:#1a2238;--lit:#ffd36b;--sail:#3a4560;
  --pole:#050a16;--wire:rgba(130,150,190,.35);
  --ground:#09101f;--ballast:#262e40;--stone:#1a2131;--sleeper:#10141d;--rail:#3a4251;--rail-hi:#9fb2d6;--tuft:#0d162a;
  --fore:#040812;
  --st-wall:#7e889e;--st-tile:#8c96ab;--st-az:#1d3772;--st-roof:#2a3048;--st-eave:#69728a;--st-door:#141a28;--st-frame:#1d3772;
  --st-win:#ffd36b;--st-slab:#4b5469;--st-edge:#6a7389;--st-line:#c9a12b;--st-face:#2e3546;--st-iron:#0c111b;--st-glow:#ffe7a3;
  --tr-body:#1e2c4a;--tr-trim:#c4cee3;--tr-dark:#0b0f1a;--tr-roof:#121a2e;--tr-hi:rgba(255,255,255,.1);--tr-brass:#c9a24a;
  --tr-win:#ffd36b;--tr-lamp:#fff6d0;--tr-wheel:#7a1d22;--tr-wheel-2:#4a1015;--tr-rod:#aab3c4;--tr-pax:#3a2a12;
  --smoke:rgba(200,208,224,.7);--smoke-2:rgba(140,150,170,.45);
}

/* ---------- o ecrã do jogo ---------- */
.tr{width:100%;display:grid;grid-template-columns:minmax(0,1fr);gap:12px;justify-items:stretch}
.tr-scene{position:relative;width:100%;height:clamp(236px,calc(30vw + 120px),380px);border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);
  background:linear-gradient(180deg,var(--sky-1) 0%,var(--sky-2) 42%,var(--sky-3) 74%);isolation:isolate;contain:layout paint}
.tr-world{position:absolute;inset:0}
.tr-sky{position:absolute;inset:0}
.tr-sun{position:absolute;left:calc(var(--sunx,72) * 1%);top:calc(70 * var(--k));width:calc(88 * var(--k));height:calc(88 * var(--k));border-radius:50%;background:var(--sun);box-shadow:0 0 calc(60 * var(--k)) calc(24 * var(--k)) var(--sun-glow)}
.tr[data-line="medium"] .tr-sun{--sunx:62;top:calc(232 * var(--k));width:calc(150 * var(--k));height:calc(150 * var(--k))}
.tr[data-line="hard"] .tr-sun{--sunx:80;top:calc(52 * var(--k));width:calc(62 * var(--k));height:calc(62 * var(--k))}
.tr-stars{position:absolute;left:0;right:0;top:0;height:60%;display:none}
.tr[data-line="hard"] .tr-stars{display:block}
.tr-stars svg{width:100%;height:100%;display:block;fill:#e8ecff;opacity:.8}
.tr-stars .is-b{fill:#fff7d6}
.tr-lay{position:absolute;left:0;top:calc(var(--y0) * var(--k));height:calc((var(--y1) - var(--y0)) * var(--k));width:calc(var(--lw) * var(--k));will-change:transform;pointer-events:none}
.tr-lay svg{display:block;width:100%;height:100%}

/* cores das camadas */
.ta-cloud{fill:var(--cloud)}
.ta-far{fill:var(--far)}.ta-far2{fill:var(--far-2)}
.ta-hill{fill:var(--hill)}.ta-hill2{fill:var(--hill-2)}
.ta-wall{fill:var(--wall)}.ta-roof{fill:var(--roof)}.ta-win{fill:var(--win)}
.tr[data-line="medium"] .ta-win.is-lit,.tr[data-line="hard"] .ta-win.is-lit{fill:var(--lit)}
.ta-sail{stroke:var(--trunk);fill:none}.ta-sail2{fill:var(--sail)}
.ta-land{fill:var(--land)}.ta-tree{fill:var(--tree)}.ta-tree2{fill:var(--tree-2)}.ta-trunk{fill:var(--trunk)}
.ta-pole,.ta-ins{fill:var(--pole)}.ta-wire{fill:none;stroke:var(--wire);stroke-width:1.6}
.ta-ground{fill:var(--ground)}.ta-ballast{fill:var(--ballast)}.ta-ballast2{fill:var(--stone);opacity:.55}.ta-stone{fill:var(--stone)}.ta-sleeper{fill:var(--sleeper)}
.ta-rail{fill:var(--rail)}.ta-railhi{fill:var(--rail-hi)}.ta-tuft{fill:var(--tuft)}
.ta-fore{fill:var(--fore)}

/* ---------- estações ---------- */
.tr-pfs{position:absolute;inset:0;pointer-events:none}
.tr-pf{position:absolute;left:0;top:calc(50 * var(--k));width:calc(820 * var(--k));height:calc(420 * var(--k));will-change:transform}
.tr-pf[hidden]{display:none}
.tr-pf-svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.tp-tile{fill:var(--st-tile)}.tp-az{fill:var(--st-az)}.tp-az2{fill:var(--st-az);opacity:.55}
.tp-wall{fill:var(--st-wall)}.tp-wallT{fill:var(--st-az)}.tp-roof{fill:var(--st-roof)}.tp-eave{fill:var(--st-eave)}
.tp-door{fill:var(--st-door)}.tp-frame{stroke:var(--st-frame)}.tp-winf{fill:var(--st-frame)}.tp-win{fill:var(--st-win)}
.tp-iron{fill:var(--st-iron);stroke:var(--st-iron)}.tp-glow{fill:var(--st-glow)}
.tp-wood{fill:#8a5a34}.tp-pot{fill:#b5532f}.tp-leaf{fill:#3d7a3a}.tp-flower{fill:#e23b4d}
.tp-clockf{fill:var(--st-frame)}.tp-clock{fill:#fbf8f0}.tp-hand{stroke:#222;stroke-linecap:round;fill:none}
.tp-slab{fill:var(--st-slab)}.tp-edge{fill:var(--st-edge)}.tp-line{fill:var(--st-line)}.tp-face{fill:var(--st-face)}
.tb-beam{fill:#f4f1ea}.tb-stripe{fill:#c8323f}.tb-lamp{fill:#ff4d5e}
/* placa com o nome da estação: azul e branco, como as de azulejo (é texto, para se traduzir) */
.tr-sign{position:absolute;left:calc((410 + var(--sx,-40)) * var(--k));top:calc((var(--sy,184) - 50) * var(--k));transform:translateX(-50%);
  display:grid;justify-items:center;gap:calc(2 * var(--k));padding:calc(7 * var(--k)) calc(20 * var(--k));border-radius:calc(8 * var(--k));
  background:#1f4f9e;border:calc(3 * var(--k)) solid #f3f6fb;box-shadow:0 0 0 calc(2 * var(--k)) #1f4f9e,0 calc(4 * var(--k)) calc(10 * var(--k)) rgba(0,0,0,.25);
  color:#fff;white-space:nowrap;font-family:var(--font-head);text-align:center}
.tr-sign b{font-weight:800;font-size:calc(27 * var(--k));line-height:1.05;letter-spacing:.02em}
.tr-sign small{font-weight:700;font-size:calc(15 * var(--k));line-height:1;opacity:.92}
.tr-pf[data-kind="0"]{--sx:-25;--sy:228}
.tr-pf[data-kind="1"]{--sx:-40;--sy:182}
.tr-pf[data-kind="2"]{--sx:-30;--sy:212}
.tr-bs{position:absolute;left:0;top:calc(360 * var(--k));width:calc(120 * var(--k));height:calc(110 * var(--k));will-change:transform}
.tr-bs[hidden]{display:none}
.tr-bs-svg{width:100%;height:100%;display:block}

/* ---------- o comboio ---------- */
.tr-train{position:absolute;inset:0;pointer-events:none}
.tr-car{position:absolute;top:calc(200 * var(--k));height:calc(280 * var(--k));left:calc((var(--front) + var(--cl)) * var(--k));width:calc(var(--cw) * var(--k))}
.tr-body{position:absolute;inset:0;will-change:transform}
.tr-body svg{display:block;width:100%;height:100%;overflow:visible}
.tr-wh{position:absolute;left:calc((var(--wx) - var(--wr)) * var(--k));top:calc((var(--wy) - var(--wr) - 200) * var(--k));width:calc(var(--wr) * 2 * var(--k));height:calc(var(--wr) * 2 * var(--k));will-change:transform}
.tr-wh svg{display:block;width:100%;height:100%}
.tr-rod{position:absolute;left:calc((var(--rx0) - 9) * var(--k));top:calc((var(--ry) - 205) * var(--k));width:calc((var(--rx1) - var(--rx0) + 18) * var(--k));height:calc(10 * var(--k));border-radius:calc(5 * var(--k));background:var(--tr-rod);box-shadow:inset 0 calc(-2 * var(--k)) 0 rgba(0,0,0,.25);will-change:transform}
.tc-dark{fill:var(--tr-dark);stroke:var(--tr-dark)}.tc-body{fill:var(--tr-body)}.tc-roof{fill:var(--tr-roof)}.tc-trim{fill:var(--tr-trim);stroke:var(--tr-trim)}
.tc-hi{fill:var(--tr-hi)}.tc-brass{fill:var(--tr-brass)}.tc-win{fill:var(--tr-win)}.tc-lamp{fill:var(--tr-lamp)}.tc-coal{fill:var(--tr-coal)}
.tc-pax{fill:var(--tr-pax);opacity:0;transition:opacity .35s}
.tc-pax.is-on{opacity:.85}
.tc-pax.is-me{opacity:1;fill:#f4c443}
.tw-tire{fill:var(--tr-wheel-2)}.tw-rim{fill:var(--tr-wheel)}.tw-spoke{stroke:var(--tr-wheel-2);stroke-width:6;stroke-linecap:round;fill:none}
.tw-hub{fill:var(--tr-brass)}.tw-pin{fill:var(--tr-rod)}
/* farol (de noite vê-se o feixe à frente) */
.tr-beam{position:absolute;left:calc((var(--front) + 2) * var(--k));top:calc(250 * var(--k));width:calc(420 * var(--k));height:calc(110 * var(--k));
  background:linear-gradient(90deg,rgba(255,240,190,.5),rgba(255,240,190,0));clip-path:polygon(0 38%,100% 0,100% 100%,0 62%);display:none;pointer-events:none}
.tr[data-line="hard"] .tr-beam{display:block}
.tr-train.is-wreck ~ .tr-beam{opacity:0;transition:opacity .3s}
/* o descarrilamento: cada peça fica de sua maneira (o train-ui.js anima até aqui) */
.tr-car[data-car="0"]{transform-origin:20% 95%}
.tr-car[data-car="1"]{transform-origin:50% 95%}
.tr-car[data-car="2"]{transform-origin:70% 95%}
.tr-car[data-car="3"]{transform-origin:50% 95%}
.tr-train.is-wreck .tr-car[data-car="0"]{transform:translate(calc(34 * var(--k)),calc(22 * var(--k))) rotate(13deg)}
.tr-train.is-wreck .tr-car[data-car="1"]{transform:translate(calc(18 * var(--k)),calc(-6 * var(--k))) rotate(-8deg)}
.tr-train.is-wreck .tr-car[data-car="2"]{transform:translate(calc(8 * var(--k)),calc(10 * var(--k))) rotate(6deg)}
.tr-train.is-wreck .tr-car[data-car="3"]{transform:translate(calc(2 * var(--k)),calc(4 * var(--k))) rotate(-3deg)}

/* fumo, faíscas e poeira (partículas: só transform e opacity) */
.tr-fx{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.tr-puff{position:absolute;left:0;top:0;width:calc(64 * var(--k));height:calc(64 * var(--k));margin:calc(-32 * var(--k)) 0 0 calc(-32 * var(--k));border-radius:50%;
  background:radial-gradient(closest-side,var(--smoke) 0%,var(--smoke-2) 52%,transparent 100%);opacity:0;will-change:transform,opacity}
.tr-puff.is-dark{background:radial-gradient(closest-side,rgba(64,60,60,.9) 0%,rgba(48,44,46,.55) 55%,transparent 100%)}
.tr-spark{position:absolute;left:0;top:0;width:calc(5 * var(--k));height:calc(18 * var(--k));margin:calc(-9 * var(--k)) 0 0 calc(-2.5 * var(--k));border-radius:calc(3 * var(--k));
  background:linear-gradient(#fff6c4,#ffb21f 55%,#ff5a1f);opacity:0;will-change:transform,opacity}

/* ---------- painéis por cima do cenário ---------- */
/* o quadro de partidas (letras que viram): viagem e estação a que o comboio chegou */
.tr-board{position:absolute;left:10px;top:10px;z-index:3;display:grid;gap:4px;padding:7px 9px 8px;border-radius:10px;background:linear-gradient(#1b1b1f,#0e0e11);
  border:1px solid rgba(255,255,255,.12);box-shadow:0 6px 16px rgba(0,0,0,.35);color:#f2efe6;font-family:var(--font-head)}
.tr-board-h{display:flex;align-items:baseline;gap:6px;font-size:11px;font-weight:700;letter-spacing:.04em;color:#c9c3b6;white-space:nowrap}
.tr-board-h b{color:#f4c443;font-weight:800}
.tr-board-row{display:flex;align-items:center;gap:7px}
.tr-board-row > span{font-size:11.5px;font-weight:700;color:#c9c3b6}
.tr-flaps{display:flex;gap:3px;perspective:240px}
.tr-flap{position:relative;display:grid;place-items:center;width:27px;height:36px;border-radius:5px;background:linear-gradient(#2c2c33 0 49%,#232329 51% 100%);
  font:800 25px/1 var(--font-head);font-variant-numeric:tabular-nums;color:#fdf7e3;box-shadow:inset 0 1px 0 rgba(255,255,255,.08);transform-origin:50% 50%}
.tr-flap::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;margin-top:-.5px;background:rgba(0,0,0,.65)}
.tr-flap.is-flip{animation:tr-flip .32s ease-in-out}
@keyframes tr-flip{0%{transform:rotateX(0)}50%{transform:rotateX(88deg)}100%{transform:rotateX(0)}}
.tr-board.is-end .tr-flap{color:#ff8a98}
/* portas abertas (com o tempo que falta) ou a próxima estação */
.tr-doors{position:absolute;right:10px;top:10px;z-index:3;display:grid;gap:5px;min-width:126px;padding:8px 11px 9px;border-radius:10px;background:rgba(12,12,14,.72);
  border:1px solid rgba(255,255,255,.14);color:#fff;font-family:var(--font-head);backdrop-filter:blur(3px)}
.tr-doors[hidden]{display:none}
.tr-doors-t{display:flex;align-items:baseline;justify-content:space-between;gap:10px;font-size:12px;font-weight:700;white-space:nowrap}
.tr-doors-t strong{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums;line-height:1}
.tr-doors-bar{height:4px;border-radius:2px;background:rgba(255,255,255,.18);overflow:hidden}
.tr-doors-bar i{display:block;height:100%;background:#3ddc97;transform-origin:0 50%;will-change:transform}
.tr-doors[data-st="open"]{border-color:rgba(61,220,151,.7)}
.tr-doors[data-st="open"] .tr-doors-t{color:#6ff0b6}
.tr-doors[data-st="open"].is-final .tr-doors-t strong{color:#ffc35a}
.tr-doors[data-st="move"] .tr-doors-bar i{background:#f4c443}
/* aviso a meio do ecrã: acidente, viagem anulada, manutenção */
.tr-msg{position:absolute;left:50%;top:12px;z-index:4;transform:translateX(-50%);display:grid;justify-items:center;gap:4px;min-width:min(78%,300px);max-width:88%;
  padding:12px 18px 13px;border-radius:14px;background:rgba(14,10,12,.84);border:1px solid rgba(255,255,255,.14);color:#fff;text-align:center;
  box-shadow:0 14px 34px rgba(0,0,0,.4);font-family:var(--font-head)}
.tr-msg[hidden]{display:none}
.tr-msg strong{font-size:24px;font-weight:800;line-height:1.1}
.tr-msg span{font-size:13.5px;font-weight:600;color:#e6dfe2}
.tr-msg small{font-size:12px;color:#bfb5ba;font-variant-numeric:tabular-nums}
.tr-msg[data-k="crash"] strong{color:#ff6b7d}
.tr-msg.is-in{animation:tr-msg-in .38s cubic-bezier(.2,.8,.2,1.2)}
@keyframes tr-msg-in{0%{opacity:0;transform:translate(-50%,-10px) scale(.88)}100%{opacity:1;transform:translateX(-50%) scale(1)}}
.tr-msg.is-leaving{animation:tr-msg-out .24s ease-in forwards}
@keyframes tr-msg-out{to{opacity:0;transform:translate(-50%,-8px) scale(.94)}}
.tr-board{transition:opacity .25s}
.tr-flash,.tr-blink{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0}
.tr-flash{background:radial-gradient(circle at 70% 70%,#fff8e0,rgba(255,200,120,.6) 40%,rgba(255,120,60,0) 75%)}
.tr-blink{background:#07060a}

/* ---------- debaixo do cenário ---------- */
.tr-hist{display:flex;gap:6px;margin:0;padding:2px 0;list-style:none;overflow-x:auto;scrollbar-width:none;min-width:0;flex:1}
.tr-hist::-webkit-scrollbar{display:none}
.tr-hist .lv-chip{min-width:34px}
.tr-hist li.muted{align-self:center;font-size:12.5px;color:var(--muted);white-space:nowrap}
.tr-hist .lv-chip.is-mid{color:var(--text)}
/* próximas estações: multiplicador e chance de lá chegar */
.tr-next{width:100%;padding:12px 14px 13px;border-radius:var(--r-sm);background:var(--surface);border:1px solid var(--line)}
.tr-next h3{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;margin:0 0 9px;font:800 14px/1.2 var(--font-head);letter-spacing:.035em;text-transform:uppercase}
.tr-next h3 span{font:500 12.5px/1.2 var(--font);letter-spacing:0;text-transform:none;color:var(--muted)}
.tr-steps{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(84px,auto);gap:6px;margin:0;padding:0 0 2px;list-style:none;overflow-x:auto;scrollbar-width:thin}
.tr-step{display:grid;gap:3px;padding:8px 8px 9px;border-radius:9px;background:var(--surface-2);border:1px solid var(--line);text-align:center;min-width:0}
.tr-step em{font-style:normal;font-size:11.5px;font-weight:700;color:var(--muted);white-space:nowrap}
.tr-step b{font:800 17px/1.1 var(--font-head);font-variant-numeric:tabular-nums}
.tr-step small{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.tr-step.is-now{border-color:var(--cash);background:color-mix(in srgb,var(--cash) 14%,var(--surface-2))}
.tr-step.is-now b{color:var(--ok)}
.tr-step.is-auto{border-color:color-mix(in srgb,#f4c443 70%,var(--line))}
.tr-step.is-auto em::after{content:" ⚑";color:#f4c443}
.tr-step.is-last em{color:var(--live)}
.tr-riders li .lv-s{color:var(--muted);font-weight:500}

/* controlos (lado esquerdo) */
.tr-lines button{display:grid;gap:1px;line-height:1.1}
.tr-lines small{font-size:11px;font-weight:600;opacity:.8}
.tr-autos{grid-template-columns:auto repeat(5,minmax(0,1fr))}
.tr-autos button{min-width:0;padding-left:2px;padding-right:2px;font-variant-numeric:tabular-nums;display:flex;align-items:center;justify-content:center}
.tr-autos button:first-child{padding-left:10px;padding-right:10px}
.tr-hint{margin:-4px 0 0;font-size:12.5px;line-height:1.4;color:var(--muted)}
.cg-play.tr-out{background:var(--surface-3);border-color:var(--line-strong);color:var(--text)}
.cg-play.tr-out:hover{border-color:var(--link)}

/* janela de uma viagem */
.rd-steps{display:flex;flex-wrap:wrap;gap:4px;margin:8px 0 2px;padding:0;list-style:none}
.rd-steps li{display:grid;place-items:center;min-width:26px;height:24px;padding:0 6px;border-radius:6px;background:var(--surface-2);border:1px solid var(--line);font:700 12px/1 var(--font-head);font-variant-numeric:tabular-nums;color:var(--muted)}
.rd-steps li.is-ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,var(--line))}
.rd-steps li.is-x{color:#fff;background:var(--live);border-color:var(--live)}

@media(max-width:560px){
  .tr-board{left:7px;top:7px;padding:6px 7px 7px}
  .tr-flap{width:22px;height:30px;font-size:20px}
  .tr-doors{right:7px;top:7px;min-width:104px;padding:7px 9px 8px}
  .tr-doors-t{font-size:11px}
  .tr-doors-t strong{font-size:17px}
  .tr-msg{top:7px;padding:9px 14px 10px}
  .tr-msg strong{font-size:19px}
  .tr-msg span{font-size:12.5px}
  .tr-scene.has-msg .tr-board{opacity:0}
  .tr-autos{grid-template-columns:repeat(6,minmax(0,1fr))}
  .tr-autos button:first-child{padding-left:4px;padding-right:4px}
}

/* ---------- mosaico: selo "Novo" (triângulo dourado no canto, com brilho; o texto é texto) ---------- */
.cg-tab{position:relative}
.gt-new{position:absolute;top:0;right:0;z-index:1;width:46px;height:46px;overflow:hidden;clip-path:polygon(0 0,100% 0,100% 100%);pointer-events:none;
  background:linear-gradient(225deg,#fff3b8 0%,#f7d468 16%,#eab33a 34%,#c98d1c 46%,#8a5a0e 50%)}
.gt-new::after{content:"";position:absolute;inset:-30%;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.85) 50%,transparent 62%);transform:translateX(-110%);animation:gt-new-shine 3.6s ease-in-out 1s infinite}
@keyframes gt-new-shine{0%,62%{transform:translateX(-110%)}100%{transform:translateX(110%)}}
.gt-new b{position:absolute;left:30px;top:15px;transform:translate(-50%,-50%) rotate(45deg);font:900 9.5px/1 var(--font-head);letter-spacing:.06em;text-transform:uppercase;
  color:#4a2c00;text-shadow:0 1px 0 rgba(255,246,200,.6);white-space:nowrap}
/* na barra os mosaicos são estreitos: o triângulo encolhe e a etiqueta "Ao vivo" fica por cima da ponta dele */
#cgGames .gt-new{width:38px;height:38px}
#cgGames .gt-new b{left:25px;top:13px;font-size:8.5px}
#cgGames .gt--train .gt-live{z-index:2}

@media(prefers-reduced-motion:reduce){
  .gt-new::after,.tr-flap.is-flip,.tr-msg.is-in{animation:none!important}
  .tc-pax{transition:none}
}