.tr-ceu {
  position: fixed; inset: 0; z-index: 9990; display: none;
  background: rgba(0, 0, 0, .74); backdrop-filter: blur(3px);
  padding: 16px; overflow: auto;
}













.tr-ceu.on { display: grid; place-items: center; animation: tr-ceu-entra .18s ease-out; }
.tr-ceu.on > .tr-cx { animation: tr-cx-entra .24s cubic-bezier(.22, 1, .36, 1); }
@keyframes tr-ceu-entra { from { opacity: 0; } to { opacity: 1; } }
@keyframes tr-cx-entra {
  from { opacity: 0; transform: translateY(16px) scale(.985); }
  to { opacity: 1; transform: none; }
}



.tr-cx {
  width: 100%; max-width: 1260px; box-sizing: border-box;
  background: var(--bg); border: 1px solid var(--line-2);
  border-radius: 20px; padding: 16px 18px 14px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .5);
}


.tr-faiscas { position: fixed; inset: 0; z-index: 9991; pointer-events: none; }
















.tr-raiz {
  --t1: 11px; --t2: 13px; --t3: 15px; --t4: 24px; --t5: 40px;
  display: flex; flex-direction: column; gap: 10px; font-family: var(--fonte);
  color: var(--txt);
}
.tr-raiz button { font-family: inherit; }










.tr-cab {
  position: relative; display: grid; justify-items: center; gap: 3px;
  padding: 0 210px;               
}
.tr-cab > b { font: 700 var(--t4)/1.25 var(--fonte); text-align: center; }
.tr-como { color: var(--txt-3); font: 400 var(--t1)/1.6 var(--fonte); text-align: center; }
.tr-cab-dir {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; gap: 11px;
}
.tr-kbd {
  display: inline-block; border: 1px solid var(--line-2); border-bottom-width: 2px;
  border-radius: 5px; padding: 1px 6px; background: var(--bg-3);
  font: 500 var(--t1)/1.5 var(--fonte); color: var(--txt-2);
}





.tr-pulados {
  color: var(--txt-3); font: 500 var(--t1)/1 var(--fonte);
  border: 1px dashed var(--line-2); border-radius: 999px; padding: 5px 10px;
}



.tr-sair {
  border: 1px solid var(--line-2); background: var(--bg-3); color: var(--txt-2);
  border-radius: 8px; padding: 7px 12px; font: 500 var(--t2)/1 var(--fonte);
  cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
}
.tr-sair:hover { background: var(--bg-4); color: var(--txt); }
.tr-sair:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }





.tr-palco { min-height: 394px; display: flex; flex-direction: column; justify-content: center; gap: 11px; }



















.tr-duelo {
  display: grid; grid-template-columns: 1fr 116px 1fr; gap: 10px;
  align-items: stretch; width: 100%; max-width: 1200px; margin: 0 auto;
}
















@media (max-width: 1340px) {
  .tr-duelo { grid-template-columns: 1fr 104px 1fr; gap: 8px; }
  .tr-palco { min-height: 383px; }
  .tr-cab { padding: 0 180px; }
}


.tr-carta {
  padding: 0; margin: 0; background: transparent; border: 2px solid transparent;
  color: inherit; font: inherit;
  border-radius: 16px; cursor: pointer; text-align: left; display: block;
  


  transition: transform var(--carta-mola, .16s cubic-bezier(.22,1,.36,1)), border-color .16s, opacity .16s;
}
.tr-carta .tr-ficha { height: 100%; box-sizing: border-box; }



.tr-carta .tr-fc-nome span,
.tr-carta .tr-fila-vazia { font-size: var(--t2); }
.tr-carta:hover { transform: translateY(var(--carta-sobe, -3px)); border-color: var(--line-2); }
.tr-carta:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }
.tr-carta.tr-ganhou { border-color: var(--ok); transform: translateY(-4px); }
.tr-carta.tr-ganhou .tr-ficha { background: color-mix(in srgb, var(--ok) 11%, var(--bg-2)); }
.tr-carta.tr-perdeu { opacity: .34; transform: scale(.97); }



.tr-carta.tr-saiu { opacity: .28; transform: scale(.98); }










.tr-meio {
  display: grid; grid-template-rows: auto 1fr; justify-items: stretch; min-width: 0;
}
.tr-meio-cx { align-self: center; display: grid; gap: 7px; justify-items: stretch; }





.tr-ou {
  align-self: start; justify-self: center; margin-top: 20px;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--line-2); background: var(--bg-3);
  display: grid; place-items: center; color: var(--txt-3);
  font: 600 var(--t1)/1 var(--fonte); text-transform: uppercase; letter-spacing: .5px;
}






.tr-meio-bt {
  cursor: pointer; width: 100%;
  border: 1px solid var(--line-2); background: var(--bg-3); border-radius: 10px;
  padding: 9px 6px; color: var(--txt-2); font: 600 var(--t2)/1.25 var(--fonte);
  transition: background .18s, border-color .18s, color .18s;
}
.tr-meio-bt:hover { background: var(--bg-4); color: var(--txt); border-color: var(--txt-3); }
.tr-meio-bt:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }







.tr-fuga { display: flex; align-items: center; justify-content: center; gap: 9px; flex-wrap: wrap; }
.tr-fila-s { flex: 2; min-width: 0; color: var(--txt-3); font: 400 var(--t1)/1.4 var(--fonte); }
.tr-fila-s b { color: var(--txt-2); font-weight: 700; }
















.tr-degrau {
  border: 1px solid var(--line-2); background: var(--bg-2); border-radius: 18px;
  padding: 22px 30px; box-sizing: border-box; width: 100%; max-width: 900px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center;
}
.tr-degrau.tr-entra { animation: tr-entra .3s cubic-bezier(.22,1,.36,1); }
.tr-selo {
  font: 700 var(--t1)/1 var(--fonte); text-transform: uppercase; letter-spacing: .8px;
  color: var(--accent-2);
}










.tr-premio { display: flex; align-items: center; gap: 18px; text-align: left; }
.tr-premio-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tr-premio-r {
  font: 700 var(--t1)/1 var(--fonte); text-transform: uppercase; letter-spacing: .8px;
  color: var(--txt-3);
}
.tr-premio-num {
  font: 800 var(--t5)/1 var(--fonte); letter-spacing: -1.6px; color: var(--ouro);
  font-variant-numeric: tabular-nums; flex: none;
}
.tr-premio-d { font: 500 var(--t3)/1.25 var(--fonte); color: var(--txt-2); }
.tr-premio-vazio { font: 800 var(--t4)/1.24 var(--fonte); letter-spacing: -.4px; color: var(--txt); }
.tr-degrau-s { margin: 0; font: 400 var(--t2)/1.55 var(--fonte); color: var(--txt-2); max-width: 660px; }
.tr-degrau-s b { color: var(--txt); }




.tr-saidas { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.tr-seguir {
  border: 0; border-radius: 12px; cursor: pointer;
  background: var(--accent-2); color: #241a05;
  font: 800 var(--t3)/1.2 var(--fonte); padding: 15px 26px;
  box-shadow: 0 4px 0 color-mix(in srgb, var(--accent-2) 52%, #000);
  transition: transform .12s ease, box-shadow .12s ease;
  display: inline-flex; align-items: center; gap: 10px;
}
.tr-seguir:hover { transform: translateY(-1px); box-shadow: 0 5px 0 color-mix(in srgb, var(--accent-2) 52%, #000); }
.tr-seguir:active { transform: translateY(3px); box-shadow: 0 1px 0 color-mix(in srgb, var(--accent-2) 52%, #000); }
.tr-seguir:focus-visible { outline: 2px solid var(--info); outline-offset: 3px; }
.tr-seguir[disabled] { opacity: .55; cursor: progress; transform: none; }
.tr-seguir .tr-kbd { background: rgba(0,0,0,.16); border-color: rgba(0,0,0,.25); color: #241a05; }
.tr-parar {
  border: 1px solid var(--line-2); background: var(--bg-3); color: var(--txt-2);
  border-radius: 12px; padding: 11px 16px; font: 500 var(--t2)/1.2 var(--fonte); cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
}
.tr-parar:hover { background: var(--bg-4); color: var(--txt); }
.tr-parar:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }






.tr-faixa .tr-parar { padding: 5px 12px; }
.tr-faixa .tr-kbd { line-height: 1.2; padding: 0 5px; border-bottom-width: 1px; }









.tr-faixa {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border-top: 1px solid var(--line); padding-top: 6px; margin-top: -1px;
}
.tr-faixa.tr-entra { animation: tr-entra .26s cubic-bezier(.22,1,.36,1); }



.tr-faixa[hidden], .tr-dizer[hidden] { display: none; }
.tr-faixa-n { font: 700 var(--t3)/1.3 var(--fonte); color: var(--txt); flex: none; }
.tr-faixa-f { font: 400 var(--t2)/1.4 var(--fonte); color: var(--txt-2); min-width: 0; }
.tr-faixa-f b { color: var(--txt); font-weight: 700; }
.tr-faixa-esp { flex: 1; min-width: 8px; }
.tr-faixa-s { font: 400 var(--t1)/1.4 var(--fonte); color: var(--txt-3); flex: none; }


.tr-volta {
  border: 1px solid var(--line-2); background: var(--bg-2); border-radius: 18px;
  padding: 22px 26px; box-sizing: border-box; width: 100%; max-width: 1000px; margin: 0 auto;
  display: flex; align-items: center; gap: 28px;
}
.tr-volta.tr-entra { animation: tr-entra .3s cubic-bezier(.22,1,.36,1); }
.tr-volta-e { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 11px; }
.tr-volta-f { margin: 0; font: 800 var(--t4)/1.24 var(--fonte); letter-spacing: -.4px; }
.tr-volta-f b { color: var(--accent-2); }
.tr-linhas { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.tr-linhas li { font: 400 var(--t2)/1.45 var(--fonte); color: var(--txt-2); display: flex; gap: 9px; }
.tr-linhas li b { color: var(--txt); }
.tr-ponto { flex: none; width: 6px; height: 6px; border-radius: 50%; margin-top: 6px; background: var(--line-2); }
.tr-linhas li[data-forte="1"] .tr-ponto { background: var(--accent-2); }

.tr-volta-d { flex: none; width: 292px; display: flex; flex-direction: column; gap: 9px; }
.tr-ir {
  width: 100%; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--accent-2); color: #241a05;   
  font: 800 var(--t3)/1.2 var(--fonte); padding: 18px 14px;
  box-shadow: 0 4px 0 color-mix(in srgb, var(--accent-2) 52%, #000);
  transition: transform .12s ease, box-shadow .12s ease;
}
.tr-ir:hover { transform: translateY(-1px); box-shadow: 0 5px 0 color-mix(in srgb, var(--accent-2) 52%, #000); }
.tr-ir:active { transform: translateY(3px); box-shadow: 0 1px 0 color-mix(in srgb, var(--accent-2) 52%, #000); }
.tr-ir:focus-visible { outline: 2px solid var(--info); outline-offset: 3px; }
.tr-ir[disabled] { opacity: .55; cursor: progress; transform: none; }
.tr-ir .tr-kbd { background: rgba(0,0,0,.16); border-color: rgba(0,0,0,.25); color: #241a05; }
.tr-volta-pe { font: 400 var(--t1)/1.5 var(--fonte); color: var(--txt-3); text-align: center; }

.tr-volta-d .tr-parar { justify-content: center; }






.tr-erro {
  border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--bg-2));
  border-radius: 14px; padding: 18px 20px; max-width: 660px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
}
.tr-erro b { font: 700 var(--t3)/1.3 var(--fonte); }
.tr-erro span { font: 400 var(--t2)/1.5 var(--fonte); color: var(--txt-2); }
.tr-erro code {
  font: 600 12px/1.4 ui-monospace, monospace; background: var(--bg-3);
  padding: 2px 5px; border-radius: 4px; color: var(--txt-2);
}




.tr-perdidas {
  border: 1px solid var(--accent); border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, var(--bg-2));
  color: var(--txt-2); font: 500 var(--t1)/1 var(--fonte); padding: 5px 10px;
}
.tr-perdidas b { color: var(--txt); font-weight: 700; }
.tr-perdidas[hidden] { display: none; }














.tr-prog[hidden] { display: none; }
.tr-prog {
  border: 1px solid var(--line); background: var(--bg-2);
  border-radius: 18px; padding: 6px 16px 4px;
  display: flex; flex-direction: column; gap: 10px;
}
.tr-escada { display: flex; flex-direction: column; gap: 10px; }







.tr-marcas { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tr-marcas-r {
  color: var(--txt-3); font: 500 var(--t1)/1 var(--fonte);
  text-transform: uppercase; letter-spacing: .5px; margin-right: 2px;
}
.tr-marca {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  border: 1px solid var(--line-2); background: var(--bg-3); color: var(--txt-3);
  border-radius: 999px; padding: 5px 12px;
  font: 500 var(--t2)/1 var(--fonte); font-variant-numeric: tabular-nums;
  transition: border-color .3s, background .3s, color .3s;
}
.tr-marca.tr-longe { opacity: .55; }
.tr-marca.tr-feito {
  border-color: var(--ok); color: var(--txt); font-weight: 700;
  background: color-mix(in srgb, var(--ok) 20%, var(--bg-3));
}
.tr-marca.tr-alvo {
  border-color: var(--accent-2); color: var(--txt); font-weight: 700;
  background: color-mix(in srgb, var(--accent-2) 12%, var(--bg-3));
  animation: tr-pulso 1.9s ease-in-out infinite;
}
.tr-marca.tr-pop { animation: tr-pop .5s cubic-bezier(.2,1.5,.4,1); }








.tr-pista { display: flex; align-items: center; gap: 14px; }
.tr-caixa { position: relative; flex: 1; min-width: 0; }
.tr-total {
  flex: none; max-width: 136px; text-align: right; color: var(--txt-3);
  font: 400 var(--t1)/1.4 var(--fonte);
}
.tr-total b { color: var(--txt-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.tr-trilho {
  position: relative; height: 46px; border-radius: 23px; overflow: hidden;
  background: var(--bg-3); border: 1px solid var(--line-2);
}



.tr-trilho::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-image: linear-gradient(90deg, var(--line-2) 0 1px, transparent 1px);
  background-repeat: repeat-x; background-size: var(--tr-casa, 10%) 100%; opacity: .5;
}
.tr-cheio {
  position: absolute; top: 0; bottom: 0; left: 0; width: 0;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--ok) 30%, var(--bg-3)),
    color-mix(in srgb, var(--ok) 64%, var(--bg-3)));
  transition: width .6s cubic-bezier(.2,.8,.2,1);
}


.tr-cheio::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
  animation: tr-brilho 3.2s ease-in-out infinite;
}


.tr-crista {
  position: absolute; top: 0; bottom: 0; left: 0; width: 3px;
  transform: translateX(-1.5px);
  background: color-mix(in srgb, var(--ok) 55%, var(--txt));
  box-shadow: 0 0 12px 2px color-mix(in srgb, var(--ok) 55%, transparent);
  transition: left .6s cubic-bezier(.2,.8,.2,1);
}
.tr-trilho.tr-vazio .tr-crista { opacity: 0; }
.tr-trilho.tr-sem-anim .tr-cheio,
.tr-trilho.tr-sem-anim .tr-crista { transition: none; }

.tr-trilho.tr-estouro::after {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: var(--txt); animation: tr-flash .34s ease-out forwards;
}
.tr-rot {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  display: flex; align-items: center; gap: 9px; padding: 0 20px;
}
.tr-conta {
  font: 800 var(--t4)/1 var(--fonte); font-variant-numeric: tabular-nums;
  letter-spacing: -.5px; color: var(--txt); text-shadow: 0 1px 4px rgba(0,0,0,.55);
}
.tr-conta.tr-virou { animation: tr-vira .34s cubic-bezier(.2,1.5,.4,1); }
.tr-alvo-t {
  min-width: 0; color: var(--txt-2); font: 400 var(--t1)/1.35 var(--fonte);
  text-shadow: 0 1px 4px rgba(0,0,0,.55);
}
.tr-falta {
  margin-left: auto; flex: none; color: var(--txt-2);
  font: 400 var(--t1)/1.35 var(--fonte); text-shadow: 0 1px 4px rgba(0,0,0,.55); text-align: right;
}
.tr-falta b { color: var(--txt); font-weight: 700; }
.tr-mais {
  position: absolute; bottom: calc(100% + 2px); font: 800 var(--t3)/1 var(--fonte);
  color: var(--accent-2); pointer-events: none;
  animation: tr-sobe .85s ease-out forwards;
}





.tr-dizer { display: flex; align-items: flex-start; gap: 9px; font: 400 var(--t2)/1.45 var(--fonte); color: var(--txt-2); }
.tr-hoje b { color: var(--txt); font-weight: 700; }
.tr-stat {
  flex: none; margin-left: auto; text-align: right; color: var(--txt-3);
  font: 400 var(--t1)/1.45 var(--fonte); max-width: 430px;
}
.tr-stat b { color: var(--txt-2); font-weight: 700; }
















.tr-ficha {
  background: var(--carta-fundo, var(--bg-2)); border: 1px solid var(--carta-fio, var(--line));
  border-radius: var(--carta-raio, 14px);
  padding: 14px; display: flex; flex-direction: column; gap: 10px; text-align: left;
}
.tr-fc-cab { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tr-fc-cab img { width: 44px; height: 44px; border-radius: 50%; flex: none; background: var(--bg-4); object-fit: cover; }
.tr-fc-nome { min-width: 0; }
.tr-fc-nome b { display: block; font-size: 15px; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-fc-nome span { display: block; color: var(--txt-3); font-size: 12px; }



























.tr-numeros {
  display: grid;
  grid-template-columns: 85px 74px 98px 103px auto;
  align-items: baseline; gap: 0 7px;
  font-size: 11px; font-weight: 400; color: var(--txt-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tr-n { cursor: help; overflow: hidden; text-overflow: ellipsis; }
.tr-n b { font-size: 13.5px; font-weight: 700; color: var(--txt); }




.tr-n-forte b { color: var(--accent-2); }

















.tr-fila {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto; grid-auto-rows: 0; overflow: hidden;
  column-gap: 10px; row-gap: 0;
}





@media (max-width: 1340px) {
  .tr-fila { grid-template-columns: 1fr 1fr; column-gap: 12px; }
}
.tr-vid { margin: 0; min-width: 0; }



.tr-capa { position: relative; display: block; }










.tr-capa[data-sem="1"] img { visibility: hidden; }
.tr-capa[data-sem="1"]::after {
  content: "miniatura fora do ar"; position: absolute; inset: 0;
  display: grid; place-items: center; text-align: center; padding: 6px;
  border: 1px dashed var(--line-2); border-radius: 8px; background: var(--bg-3);
  color: var(--txt-3); font: italic 400 10.5px/1.3 var(--fonte);
}
.tr-vid img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block;
  border-radius: 8px; background: var(--bg-4);
}


.tr-vid i {
  position: absolute; right: 5px; bottom: 5px;
  background: rgba(0, 0, 0, .78); color: #fff; border-radius: 4px;
  font: 600 10.5px/1 var(--fonte); padding: 3px 5px; font-style: normal;
}



.tr-vid figcaption {
  margin-top: 7px; font-size: 12px; line-height: 1.25; color: var(--txt);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden; height: 43px;
}



.tr-vid b {
  display: block; margin-top: 3px; color: var(--txt-3);
  font: 400 11.5px/1.2 var(--fonte); font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tr-fila-vazia {
  display: block; color: var(--txt-3); font-size: 12px; font-style: italic;
  border: 1px dashed var(--line); border-radius: 8px; padding: 10px 12px; text-align: center;
}

@keyframes tr-pulso {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-2) 38%, transparent); }
  50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent-2) 16%, transparent); }
}
@keyframes tr-pop {
  0% { transform: scale(1); } 45% { transform: scale(1.18); } 100% { transform: scale(1); }
}
@keyframes tr-vira {
  0% { transform: scale(1); } 40% { transform: scale(1.16); } 100% { transform: scale(1); }
}
@keyframes tr-flash { 0% { opacity: .9; } 100% { opacity: 0; } }
@keyframes tr-sobe {
  0% { opacity: 0; transform: translate(-50%, 8px); }
  22% { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -26px); }
}
@keyframes tr-brilho {
  0% { transform: translateX(-100%); }
  55%, 100% { transform: translateX(100%); }
}
@keyframes tr-entra {
  from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; }
}
















.tr-par-entra > .tr-carta { animation: tr-par .19s cubic-bezier(.22, 1, .36, 1) both; }
.tr-par-entra > .tr-carta:last-child { animation-delay: .04s; }
@keyframes tr-par {
  from { opacity: 0; transform: translateY(7px) scale(.99); }
  to { opacity: 1; transform: none; }
}









.tr-pele-troca { animation: tr-pele .24s cubic-bezier(.22, 1, .36, 1); }
@keyframes tr-pele {
  0% { opacity: .15; transform: translateY(-5px) scale(.995); }
  55% { border-color: var(--accent-2); }
  100% { opacity: 1; transform: none; }
}






.tr-esperando { position: relative; overflow: hidden; }
.tr-indef {
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--bg-3); overflow: hidden;
}
.tr-indef::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 38%;
  border-radius: 999px; background: var(--accent-2);
  animation: tr-indef 1.15s cubic-bezier(.45, 0, .55, 1) infinite;
}
@keyframes tr-indef {
  0% { left: -40%; } 100% { left: 100%; }
}





@media (prefers-reduced-motion: reduce) {
  .tr-marca.tr-alvo, .tr-marca.tr-pop, .tr-conta.tr-virou,
  .tr-cheio::after, .tr-trilho.tr-estouro::after, .tr-mais,
  .tr-degrau.tr-entra, .tr-faixa.tr-entra, .tr-volta.tr-entra,
  



  .tr-ceu.on, .tr-ceu.on > .tr-cx, .tr-par-entra > .tr-carta,
  .tr-pele-troca, .tr-indef::after { animation: none; }
  .tr-indef { display: none; }
  .tr-trilho.tr-estouro::after { display: none; }
  .tr-carta, .tr-cheio, .tr-crista, .tr-marca, .tr-ir, .tr-seguir { transition: none; }
  .tr-carta:hover, .tr-carta.tr-ganhou, .tr-ir:hover, .tr-seguir:hover { transform: none; }
}



































.tr-part {
  --t1: 11px; --t2: 13px; --t3: 15px; --t4: 24px; --t5: 40px;
  display: flex; flex-direction: column; gap: 16px;
  font-family: var(--fonte); color: var(--txt);
}
.tr-part-cab { display: grid; justify-items: center; gap: 5px; text-align: center; }



.tr-part-cab > b { font: 800 30px/1.1 var(--fonte); letter-spacing: -.8px; }
.tr-part-cab span b, .tr-part-cab p b { color: var(--txt); font-weight: 700; }
.tr-part-cab span { font: 400 var(--t2)/1.5 var(--fonte); color: var(--txt-2); max-width: 640px; }





.tr-part-q {
  margin: 2px 0 6px; max-width: 560px;
  font: 500 17px/1.35 var(--fonte); color: var(--txt-2);
}
.tr-part-q b { color: var(--txt); font-weight: 700; }



.tr-eixos-r { font: 400 var(--t1)/1 var(--fonte); color: var(--txt-3); }




.tr-part-p { margin: 4px 0 0; max-width: 560px; font: 400 var(--t2)/1.45 var(--fonte); color: var(--txt-2); }
.tr-part-p em { font-style: normal; font-weight: 800; color: var(--accent-2); }






.tr-placar {
  display: flex; align-items: baseline; gap: 9px;
  border: 1px solid var(--line); background: var(--bg-2);
  border-radius: 999px; padding: 7px 16px;
}
.tr-placar b { font: 800 19px/1 var(--fonte); color: var(--accent-2); font-variant-numeric: tabular-nums; }
.tr-placar span { font: 400 var(--t2)/1 var(--fonte); color: var(--txt-2); }



.tr-placar-fila { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }



.tr-placar-falta b { color: var(--txt); }
.tr-placar-falta { border-style: dashed; }










.tr-eixos { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 2px 0 1px; }
.tr-eixo {
  display: flex; flex-direction: column; gap: 2px; align-items: center;
  border: 1px solid var(--line); background: var(--bg-2);
  border-radius: 11px; padding: 7px 15px; min-width: 116px;
}
.tr-eixo b { font: 700 var(--t2)/1 var(--fonte); color: var(--accent-2); }
.tr-eixo i { font: 400 var(--t1)/1 var(--fonte); color: var(--txt-3); font-style: normal; }




.tr-eixo { animation: tr-eixo-entra .34s cubic-bezier(.22,1,.36,1) both; }
.tr-eixo:nth-child(2) { animation-delay: .06s; }
.tr-eixo:nth-child(3) { animation-delay: .12s; }
@keyframes tr-eixo-entra {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tr-eixo { animation: none; }
}




.tr-modos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tr-modo {
  display: flex; flex-direction: column; gap: 9px; text-align: left;
  border: 1px solid var(--line); background: var(--bg-2); color: var(--txt);
  border-radius: 14px; padding: 13px 14px 14px; cursor: pointer;
  transition: border-color .16s, background .16s, transform .16s;
}
.tr-modo:hover { border-color: var(--line-2); background: var(--bg-3); transform: translateY(-2px); }
.tr-modo:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }
.tr-modo[aria-pressed="true"] {
  border-color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 9%, var(--bg-2));
  box-shadow: 0 0 0 1px var(--accent-2) inset;
}
.tr-modo-n { display: flex; align-items: baseline; gap: 8px; }
.tr-modo-n b { font: 800 var(--t3)/1.2 var(--fonte); }
.tr-modo-n i {
  font-style: normal; font: 700 var(--t1)/1 var(--fonte); color: var(--txt-3);
  border: 1px solid var(--line-2); border-radius: 999px; padding: 3px 8px; margin-left: auto;
}
.tr-modo[aria-pressed="true"] .tr-modo-n i { color: #241a05; background: var(--accent-2); border-color: var(--accent-2); }
.tr-modo-l { font: 400 var(--t2)/1.45 var(--fonte); color: var(--txt-2); }




.tr-modo-av {
  font: 500 var(--t1)/1.4 var(--fonte); color: var(--accent-2);
  border-top: 1px dashed var(--line-2); padding-top: 8px;
}


.tr-mini {
  height: 62px; border-radius: 10px; background: var(--bg);
  border: 1px solid var(--line); padding: 9px 11px; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
}





.tr-mini-barra { display: block; height: 10px; border-radius: 999px; background: var(--bg-4); position: relative; overflow: hidden; }
.tr-mini-barra i { position: absolute; inset: 0 44% 0 0; background: linear-gradient(90deg, var(--ouro), var(--accent-2)); }
.tr-mini-degraus { display: flex; gap: 6px; }
.tr-mini-degraus span {
  font: 700 9px/1 var(--fonte); color: var(--txt-3);
  border: 1px solid var(--line-2); border-radius: 4px; padding: 3px 5px;
}
.tr-mini-degraus span:first-child { color: #241a05; background: var(--ouro); border-color: var(--ouro); }

.tr-mini-fita { display: flex; gap: 7px; }
.tr-mini-lug { flex: 1; display: flex; gap: 2px; padding: 3px 4px; border: 1px solid var(--line); border-radius: 5px; background: var(--bg-2); }
.tr-mini-lug[data-ok="1"] { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, var(--bg-2)); }
.tr-mini-lug i { flex: 1; aspect-ratio: 1; border-radius: 50%; background: var(--bg-4); }
.tr-mini-lug[data-ok="1"] i { background: var(--ouro); }
.tr-mini-pl { display: flex; justify-content: space-between; font: 700 9px/1 var(--fonte); color: var(--txt-3); }

.tr-mini-cal { display: flex; align-items: center; gap: 4px; }
.tr-mini-cal i {
  flex: none; width: 14px; height: 14px; border-radius: 50%;
  background: var(--bg-3); border: 1px solid var(--line-2); box-sizing: border-box;
}
.tr-mini-cal i[data-e="feito"] { background: var(--bg-4); border-color: var(--line-2); }
.tr-mini-cal i[data-e="hoje"] { border-color: var(--accent-2); background: color-mix(in srgb, var(--accent-2) 22%, var(--bg-3)); }
.tr-mini-cal b { margin-left: auto; font: 800 13px/1 var(--fonte); color: var(--ouro); }










.tr-part-so-carga { justify-content: center; min-height: 268px; }
.tr-carga { display: flex; flex-direction: column; gap: 13px; max-width: 520px; margin: 0 auto; width: 100%; }
.tr-carga-cab { display: flex; flex-direction: column; gap: 5px; text-align: center; }
.tr-carga-cab b { font: 800 var(--t4)/1.15 var(--fonte); color: var(--txt); }
.tr-carga-cab span { font: 400 var(--t2)/1.45 var(--fonte); color: var(--txt-3); }


.tr-carga-b {
  height: 10px; border-radius: 999px; background: var(--bg-3);
  overflow: hidden; box-shadow: inset 0 0 0 1px var(--line);
}
.tr-carga-b i {
  display: block; height: 100%; width: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--ouro), var(--accent-2));
  


  transition: width .12s linear;
}
.tr-carga-n { text-align: center; }
.tr-carga-n b {
  font: 800 var(--t4)/1 var(--fonte); color: var(--accent-2);
  font-variant-numeric: tabular-nums; letter-spacing: -.5px;
}



@media (prefers-reduced-motion: reduce) {
  .tr-carga-b i { transition: none; }
}


.tr-part-pe { display: flex; align-items: center; justify-content: center; gap: 13px; flex-wrap: wrap; }
.tr-comecar {
  border: 0; border-radius: 12px; cursor: pointer;
  background: var(--accent-2); color: #241a05;
  font: 800 var(--t4)/1 var(--fonte); padding: 15px 34px;
  box-shadow: 0 4px 0 color-mix(in srgb, var(--accent-2) 52%, #000);
  display: inline-flex; align-items: center; gap: 12px;
  transition: transform .12s, box-shadow .12s, opacity .2s;
}
.tr-comecar:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 5px 0 color-mix(in srgb, var(--accent-2) 52%, #000); }
.tr-comecar:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 color-mix(in srgb, var(--accent-2) 52%, #000); }
.tr-comecar:focus-visible { outline: 2px solid var(--info); outline-offset: 3px; }



.tr-comecar:disabled { cursor: default; opacity: .4; box-shadow: 0 4px 0 color-mix(in srgb, var(--accent-2) 52%, #000); }
.tr-comecar .tr-kbd { background: rgba(0,0,0,.16); border-color: rgba(0,0,0,.25); color: #241a05; }
.tr-part .tr-erro { text-align: left; }
.tr-part-nota { text-align: center; font: 400 var(--t1)/1.5 var(--fonte); color: var(--txt-3); }

@media (max-width: 900px) {
  .tr-modos { grid-template-columns: 1fr; }
}



















.tr-fita-cx { display: flex; flex-direction: column; gap: 4px; }
.tr-fita-cima { display: flex; align-items: center; gap: 16px; }
.tr-fita-conta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tr-fita-conta-n { font: 700 var(--t2)/1 var(--fonte); color: var(--txt-2); display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.tr-fita-conta-n em { font: 800 var(--t4)/1 var(--fonte); font-style: normal; color: var(--accent-2); font-variant-numeric: tabular-nums; letter-spacing: -.8px; }
.tr-fita-falta { color: var(--txt-3); font: 400 var(--t1)/1.4 var(--fonte); }
.tr-fita-falta b { color: var(--txt-2); font-weight: 700; }







.tr-tranca {
  flex: none; width: 330px; display: flex; align-items: center; gap: 11px;
  background: var(--bg-3); border: 1px solid var(--line); border-radius: 11px;
  padding: 9px 12px; transition: border-color .4s, background .4s, box-shadow .4s;
}
.tr-tranca[data-aberta="1"] {
  border-color: color-mix(in srgb, var(--ouro) 60%, var(--line));
  background: color-mix(in srgb, var(--ouro) 10%, var(--bg-3));
}
.tr-tranca[data-perto="1"] { animation: tr-chama 1.5s ease-in-out infinite; }
@keyframes tr-chama {
  0%,100% { border-color: var(--line); }
  50%     { border-color: color-mix(in srgb, var(--accent-2) 65%, var(--line)); }
}
.tr-cad { width: 26px; height: 31px; flex: none; color: var(--txt-3); transition: color .4s; }
.tr-tranca[data-aberta="1"] .tr-cad { color: var(--ouro); }
.tr-cad-corpo { fill: currentColor; }
.tr-cad-furo { fill: var(--bg-3); }
.tr-tranca[data-aberta="1"] .tr-cad-furo { fill: color-mix(in srgb, var(--ouro) 10%, var(--bg-3)); }
.tr-cad-arco {
  fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round;
  transform-origin: 25px 18px; transition: transform .55s cubic-bezier(.34,1.56,.64,1);
}
.tr-tranca[data-aberta="1"] .tr-cad-arco { transform: translateY(-3.5px) rotate(-26deg); }
.tr-tranca-txt { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.tr-tranca-txt b { font: 700 var(--t2)/1.25 var(--fonte); }
.tr-tranca-txt span { color: var(--txt-3); font: 400 var(--t1)/1.35 var(--fonte); }
.tr-tranca[data-aberta="1"] .tr-tranca-txt span { color: var(--txt-2); }
.tr-tranca.tr-abrindo { animation: tr-tranca-abre .6s ease-out; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ouro) 40%, transparent); }
@keyframes tr-tranca-abre { 0% { transform: scale(1); } 35% { transform: scale(1.035); } 100% { transform: scale(1); } }

.tr-fita-wrap { position: relative; }






.tr-fita-lin { display: flex; align-items: flex-start; gap: 16px; padding-top: 16px; }



.tr-fita-lin + .tr-fita-lin { padding-top: 24px; }








































@media (max-height: 815px) {
  .tr-fita-cx { gap: 0; }
  .tr-fita-cx > .tr-fita-stat { margin-top: 2px; }
}
.tr-lug { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.tr-lug-cx {
  position: relative; width: 100%; box-sizing: border-box;
  display: flex; align-items: center; gap: 3px; padding: 5px 6px;
  border: 1px solid var(--line); border-bottom: 2px solid var(--line);
  border-radius: 10px; background: var(--bg);
  transition: background .4s, border-color .4s, box-shadow .4s;
}


.tr-lug-cx::after {
  content: ""; position: absolute; right: -18px; top: 50%; margin-top: -2px;
  width: 18px; height: 4px; border-radius: 2px; background: var(--line);
  transition: background .35s, box-shadow .35s;
}
.tr-lug:last-child .tr-lug-cx::after { display: none; }


.tr-lug[data-ok="1"] .tr-lug-cx {
  background: color-mix(in srgb, var(--ok) 9%, var(--bg));
  border-color: color-mix(in srgb, var(--ok) 35%, var(--line));
  border-bottom-color: var(--ok);
}
.tr-lug[data-ok="1"] .tr-lug-cx::after { background: var(--ok); box-shadow: 0 0 8px -2px var(--ok); }



.tr-moeda {
  flex: 1 1 0; min-width: 0; aspect-ratio: 1; border-radius: 50%;
  background: var(--bg-4); box-shadow: inset 0 0 0 1px var(--line-2);
  transition: background .25s, box-shadow .25s, transform .25s;
}
.tr-moeda[data-e="feito"] {
  background: radial-gradient(circle at 34% 28%, color-mix(in srgb, var(--ouro) 35%, #fff), var(--ouro) 72%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ouro) 60%, #000), 0 0 6px -2px var(--ouro);
}
.tr-moeda[data-e="agora"] { background: var(--accent-2); transform: scale(1.4); animation: tr-pisca 1.25s ease-in-out infinite; }
.tr-moeda.tr-nova { animation: tr-moeda-pop .36s cubic-bezier(.34,1.56,.64,1); }





.tr-poste { display: flex; flex-direction: column; align-items: center; }
.tr-haste { width: 2px; height: 8px; border-radius: 1px; background: var(--line); transition: background .35s; }
.tr-lug[data-ok="1"] .tr-haste { background: var(--ok); }
.tr-placa {
  display: inline-flex; align-items: center; gap: 5px;
  font: 800 var(--t1)/1 var(--fonte); font-variant-numeric: tabular-nums;
  color: var(--txt-3); background: var(--bg-3);
  border: 1px solid var(--line); padding: 4px 10px; border-radius: 999px;
  transition: color .35s, background .35s, border-color .35s, box-shadow .35s;
}
.tr-lug[data-ok="1"] .tr-placa { color: var(--bg); background: var(--ok); border-color: color-mix(in srgb, var(--ok) 70%, #000); }
.tr-placa[data-tipo="tranca"] { padding: 6px 12px; font-size: var(--t2); color: var(--txt-2); border-color: color-mix(in srgb, var(--ouro) 45%, var(--line)); }
.tr-placa[data-tipo="fim"] { padding: 6px 12px; font-size: var(--t2); color: var(--txt-2); }
.tr-placa svg { width: 11px; height: 13px; display: block; }
.tr-pl-corpo { fill: currentColor; }
.tr-pl-arco { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; transform-origin: 7px 5px; transition: transform .55s cubic-bezier(.34,1.56,.64,1); }
.tr-lug[data-ok="1"] .tr-placa[data-tipo="tranca"] {
  color: var(--bg); background: var(--ouro);
  border-color: color-mix(in srgb, var(--ouro) 65%, #000); box-shadow: 0 0 16px -4px var(--ouro);
}
.tr-lug[data-ok="1"] .tr-placa[data-tipo="tranca"] .tr-pl-arco { transform: translateY(-1.7px) rotate(-24deg); }
.tr-placa[data-perto="1"] { animation: tr-chama-placa 1.5s ease-in-out infinite; }
@keyframes tr-chama-placa {
  0%,100% { border-color: color-mix(in srgb, var(--ouro) 45%, var(--line)); }
  50%     { border-color: var(--accent-2); color: var(--txt); }
}
.tr-pl-pano { fill: currentColor; }
.tr-pl-mastro { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }




.tr-ponteiro {
  position: absolute; top: 0; left: 0; width: 15px; height: 15px;
  margin-left: -7.5px; pointer-events: none;
  transition: transform .3s cubic-bezier(.34,1.5,.5,1);
}
.tr-ponteiro i {
  display: block; position: relative; width: 100%; height: 100%;
  border-radius: 5px; box-sizing: border-box;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-2) 55%, #fff), var(--accent-2));
  border: 1px solid color-mix(in srgb, var(--accent-2) 45%, #000);
  box-shadow: 0 3px 7px rgba(0,0,0,.65);
  animation: tr-bob 1.05s ease-in-out infinite;
}
.tr-ponteiro i::after {
  content: ""; position: absolute; left: 50%; bottom: -5px; margin-left: -4px;
  width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid var(--accent-2);
}
.tr-lug.tr-acendeu .tr-lug-cx { animation: tr-acender .72s ease-out; }
@keyframes tr-acender {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 80%, transparent); transform: translateY(0) scale(1); }
  22%  { box-shadow: 0 0 0 9px color-mix(in srgb, var(--ok) 28%, transparent); transform: translateY(-5px) scale(1.04); }
  100% { box-shadow: 0 0 0 20px transparent; transform: translateY(0) scale(1); }
}
@keyframes tr-moeda-pop { 0% { transform: scale(.25); } 60% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes tr-pisca {
  0%,100% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-2) 45%, transparent), 0 0 11px -1px var(--accent-2); }
  50%     { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-2) 16%, transparent), 0 0 16px 0 var(--accent-2); }
}
@keyframes tr-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }












.tr-voltar {
  border: 1px solid var(--line); background: var(--bg-3); color: var(--txt-2);
  border-radius: 9px; padding: 5px 11px; cursor: pointer;
  font: 600 var(--t1)/1 var(--fonte);
  display: inline-flex; align-items: center; gap: 7px;
  transition: background .2s, color .2s, opacity .2s;
}
.tr-voltar:hover:not(:disabled) { background: var(--bg-4); color: var(--txt); }



.tr-voltar:disabled { opacity: .38; cursor: default; }
.tr-voltar:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }
.tr-fita-stat { min-width: 0; color: var(--txt-3); font: 400 var(--t1)/1.4 var(--fonte); text-align: right; }
.tr-fita-stat b { color: var(--txt-2); font-weight: 700; }















.tr-cal-cx { display: flex; flex-direction: column; gap: 4px; }
.tr-cal-cima { display: flex; align-items: center; gap: 16px; }
.tr-cal-q { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tr-cal-q b { font: 800 var(--t3)/1.2 var(--fonte); }
.tr-cal-q span { color: var(--txt-3); font: 400 var(--t1)/1.4 var(--fonte); }
.tr-cal-q span b { color: var(--txt-2); font-weight: 700; }
.tr-seq { flex: none; display: flex; align-items: baseline; gap: 8px; }
.tr-seq-n { font: 700 var(--t3)/1 var(--fonte); color: var(--txt-3); font-variant-numeric: tabular-nums; }
.tr-seq-r { font: 700 var(--t1)/1 var(--fonte); color: var(--txt-3); text-transform: uppercase; letter-spacing: .5px; }
.tr-seq[data-forte="1"] .tr-seq-n { font-size: 34px; line-height: .9; color: var(--ouro); letter-spacing: -1.4px; }
.tr-seq[data-forte="1"] .tr-seq-r { color: var(--txt-2); }

.tr-cal { display: flex; align-items: flex-start; margin: 10px 4px 0; }
.tr-parada { flex: 1; min-width: 0; position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; }



.tr-parada::after {
  content: ""; position: absolute; top: 21px; left: 50%; width: 100%; height: 2px;
  background: var(--line); z-index: 0;
}
.tr-parada:last-child::after { display: none; }
.tr-parada[data-e="fechada"]::after { background: color-mix(in srgb, var(--txt-3) 55%, var(--line-2)); }
.tr-no {
  position: relative; z-index: 1; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line-2); background: var(--bg-3); color: var(--txt-3);
  font: 800 var(--t3)/1 var(--fonte); font-variant-numeric: tabular-nums;
}
.tr-parada-r { font: 700 var(--t1)/1.1 var(--fonte); color: var(--txt-3); height: 12px; text-align: center; }
.tr-parada[data-e="fechada"] .tr-no { background: var(--bg-4); color: var(--txt-2); }



.tr-visto {
  position: absolute; top: -1px; right: -1px; width: 17px; height: 17px; padding: 3px;
  border-radius: 50%; background: var(--bg-4); border: 1px solid var(--line-2);
  color: var(--txt); z-index: 2;
}
.tr-parada[data-e="futura"] { opacity: .4; }
.tr-parada[data-e="futura"] .tr-no { border-style: dashed; background: transparent; }


.tr-parada[data-e="proxima"] { opacity: .62; }
.tr-parada[data-e="proxima"] .tr-no { border-style: dashed; background: var(--bg-3); color: var(--txt-2); }
.tr-parada[data-e="hoje"] .tr-no {
  transform: scale(1.12);
  border-color: var(--accent-2); color: var(--accent-2);
  background: color-mix(in srgb, var(--accent-2) 14%, var(--bg-3));
  animation: tr-pulsa 2s ease-in-out infinite;
}
.tr-parada[data-e="hoje"] .tr-parada-r { color: var(--accent-2); }
@keyframes tr-pulsa {
  0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-2) 42%, transparent); }
  50%     { box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent-2) 0%, transparent); }
}
.tr-parada[data-festa="1"] .tr-no { animation: tr-estoura .62s cubic-bezier(.2,1.5,.4,1) 1; }
@keyframes tr-estoura { 0% { transform: scale(.86); } 55% { transform: scale(1.14); } 100% { transform: scale(1); } }



.tr-pips { display: flex; gap: 6px; align-items: center; }
.tr-pip {
  width: 13px; height: 13px; border-radius: 50%; flex: none;
  border: 1.5px solid var(--line-2); background: var(--bg-3);
  transition: background .18s, border-color .18s, transform .18s;
}
.tr-pip[data-p="feito"] { background: var(--ouro); border-color: var(--ouro); }
.tr-pip[data-p="agora"] {
  border-color: var(--accent-2); transform: scale(1.22);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-2) 22%, transparent);
}
.tr-cal-pe { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.tr-cal-pe .tr-fita-stat { text-align: left; }

@media (prefers-reduced-motion: reduce) {
  .tr-ponteiro i, .tr-moeda[data-e="agora"], .tr-lug.tr-acendeu .tr-lug-cx,
  .tr-tranca.tr-abrindo, .tr-tranca[data-perto="1"], .tr-placa[data-perto="1"],
  .tr-parada[data-e="hoje"] .tr-no, .tr-parada[data-festa="1"] .tr-no,
  .tr-modo, .tr-comecar { animation: none; transition: none; }
  .tr-moeda[data-e="agora"] { box-shadow: 0 0 0 2px var(--accent-2); }
  .tr-parada[data-e="hoje"] .tr-no { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-2) 40%, transparent); }
}




.tr-ponteiro.tr-sem-anim { transition: none; }


.tr-seq[hidden] { display: none; }






.tr-peles {
  display: inline-flex; align-items: center; gap: 2px;
  border: 1px solid var(--line); border-radius: 999px; padding: 2px; background: var(--bg-2);
}
.tr-pele-bt {
  border: 0; background: none; color: var(--txt-3); cursor: pointer;
  border-radius: 999px; padding: 4px 9px; font: 500 var(--t1)/1.35 var(--fonte);
  white-space: nowrap; transition: background .16s, color .16s;
}
.tr-pele-bt:hover:not(:disabled):not([aria-pressed="true"]) { background: var(--bg-3); color: var(--txt-2); }
.tr-pele-bt[aria-pressed="true"] { background: var(--bg-4); color: var(--txt); font-weight: 700; }
.tr-pele-bt:disabled { opacity: .38; cursor: default; }
.tr-pele-bt:focus-visible { outline: 2px solid var(--info); outline-offset: 1px; }