:root {
    --ta-bg: #08080c;
    --ta-surface: #191920;
    --ta-accent: #d4ff00;
    --ta-accent-rgb: 212, 255, 0;
    --ta-hot: #ff3d5a;
    --ta-hot-rgb: 255, 61, 90;
    --ta-text: #f1f1f1;
    --ta-muted: #a2a2b6;
    --ta-border: rgba(132, 132, 154, 0.18);
    --ta-gold: #ffd700;
    --ta-silver: #e8e8ec;
    --ta-bronze: #cd7f32;
}

* { box-sizing: border-box; }
/* Sem isto, regras como display:flex/grid anulam o atributo hidden e os estados se sobrepõem. */
[hidden] { display: none !important; }
html, body {
    width: 100%; height: 100%; margin: 0;
    background: var(--ta-bg); color: var(--ta-text);
    font-family: "Exo 2", Arial, sans-serif;
}
body { overflow: hidden; }
select { font: inherit; }

.ta-shell {
    width: 100vw; height: 100vh; min-width: 320px;
    display: grid; grid-template-rows: auto minmax(0, 1fr);
    gap: 8px; padding: 8px;
    background: radial-gradient(90% 70% at 100% 0%, rgba(var(--ta-hot-rgb), .10), transparent 62%), var(--ta-bg);
}

/* ---------- Filtros ---------- */
.ta-filter {
    position: relative; z-index: 5;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 340px) minmax(220px, 340px);
    align-items: center; gap: 14px; min-height: 58px; padding: 8px 12px;
    border: 1px solid var(--ta-border); border-left: 4px solid var(--ta-hot);
    border-radius: 10px; background: rgba(25, 25, 32, .95);
}
.ta-filter__copy { display: flex; flex-direction: column; min-width: 0; }
.ta-eyebrow, .ta-filter__field > span {
    color: var(--ta-muted); font-size: 9px; font-weight: 800;
    letter-spacing: .14em; text-transform: uppercase;
}
.ta-filter__copy strong { margin-top: 2px; font-size: 17px; line-height: 1.1; }
.ta-filter__field {
    display: grid; grid-template-columns: auto minmax(0, 1fr);
    align-items: center; gap: 10px;
}
.ta-filter select {
    width: 100%; min-width: 0; min-height: 38px;
    padding: 7px 10px; color: #fff;
    border: 1px solid rgba(132, 132, 154, .36); border-radius: 8px;
    outline: none; background: #111117;
}
.ta-filter select:focus {
    border-color: var(--ta-hot);
    box-shadow: 0 0 0 3px rgba(var(--ta-hot-rgb), .16);
}
.ta-filter select:disabled { opacity: .58; }

/* ---------- Quadro ---------- */
.ta-board {
    position: relative; display: flex; flex-direction: column; min-height: 0;
    overflow: hidden; padding: 14px 16px 10px;
    border: 1px solid rgba(var(--ta-hot-rgb), .24);
    border-left: 4px solid var(--ta-hot); border-radius: 10px;
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(var(--ta-hot-rgb), .14), transparent 58%),
        linear-gradient(168deg, rgba(26, 26, 34, .98), rgba(8, 8, 12, .98));
    box-shadow: 0 28px 72px rgba(0, 0, 0, .54);
}
.ta-fx, .ta-banner {
    position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0;
}
.ta-banner {
    background-size: cover; background-position: center;
    opacity: .10; filter: saturate(1.1) blur(2px);
}
.ta-fx-glow {
    position: absolute; top: -42%; right: -16%; width: 70%; height: 70%;
    background: radial-gradient(circle, rgba(var(--ta-hot-rgb), .18), transparent 70%);
}
.ta-fx-speed {
    position: absolute; inset: 0; opacity: .05;
    background: repeating-linear-gradient(
        100deg, transparent 0 46px, rgba(255, 255, 255, .8) 46px 47px, transparent 47px 92px);
    animation: ta-speed 5s linear infinite;
}
.ta-fx-checker {
    position: absolute; top: 0; left: 0; right: 0; height: 6px; opacity: .55;
    background:
        repeating-conic-gradient(#fff 0 25%, #111 0 50%) 0 0 / 12px 12px;
    mask-image: linear-gradient(90deg, #000, transparent 70%);
    -webkit-mask-image: linear-gradient(90deg, #000, transparent 70%);
}
@keyframes ta-speed { to { background-position: 92px 0; } }

.ta-content, .ta-state { position: relative; z-index: 2; }
.ta-content { display: flex; flex-direction: column; min-height: 0; height: 100%; gap: 10px; }
.ta-state {
    flex: 1; min-height: 180px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 10px;
    text-align: center; color: var(--ta-muted);
}
.ta-state--error strong { color: var(--ta-text); font-size: 18px; }
.ta-spinner {
    width: 28px; height: 28px; border: 3px solid rgba(255, 255, 255, .14);
    border-top-color: var(--ta-hot); border-radius: 50%;
    animation: ta-spin .8s linear infinite;
}
@keyframes ta-spin { to { transform: rotate(360deg); } }

/* ---------- Cabeçalho ---------- */
.ta-head {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
    padding-bottom: 8px; border-bottom: 1px solid rgba(var(--ta-hot-rgb), .2);
}
.ta-head__brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ta-head__logo {
    width: 44px; height: 44px; flex: 0 0 auto; object-fit: contain;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .45));
}
.ta-head__titles { min-width: 0; }
.ta-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.ta-badge, .ta-chip {
    display: inline-flex; align-items: center; padding: 2px 8px;
    font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
    border-radius: 999px;
}
.ta-badge {
    color: #fff; background: linear-gradient(90deg, var(--ta-hot), #ff7a3d);
    box-shadow: 0 0 14px rgba(var(--ta-hot-rgb), .45);
}
.ta-chip {
    color: var(--ta-accent); border: 1px solid rgba(var(--ta-accent-rgb), .4);
    background: rgba(var(--ta-accent-rgb), .08);
}
.ta-head__title {
    margin: 0; font-size: clamp(18px, 3.2vw, 28px); font-weight: 900; line-height: 1.05;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ta-head__sub {
    margin: 3px 0 0; color: var(--ta-muted); font-size: 12px; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.ta-clock {
    flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end;
    padding: 6px 12px; border-radius: 10px;
    border: 1px solid rgba(var(--ta-accent-rgb), .35);
    background: rgba(var(--ta-accent-rgb), .07);
}
.ta-clock__label {
    color: var(--ta-muted); font-size: 9px; font-weight: 800;
    letter-spacing: .14em; text-transform: uppercase;
}
.ta-clock__value {
    font-size: 20px; font-weight: 900; color: var(--ta-accent);
    font-variant-numeric: tabular-nums; letter-spacing: .02em;
}
.ta-clock--live .ta-clock__value { animation: ta-pulse 1.6s ease-in-out infinite; }
.ta-clock--done {
    border-color: var(--ta-border); background: rgba(255, 255, 255, .03);
}
.ta-clock--done .ta-clock__value { color: var(--ta-muted); }
@keyframes ta-pulse { 50% { opacity: .55; } }

/* ---------- Destaque do líder ---------- */
.ta-leader {
    position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center;
    column-gap: 18px; row-gap: 2px; padding: 12px 18px; overflow: hidden;
    border-radius: 12px; border: 1px solid rgba(255, 215, 0, .35);
    background:
        linear-gradient(100deg, rgba(255, 215, 0, .16), rgba(255, 215, 0, .02) 60%),
        rgba(16, 16, 22, .85);
    box-shadow: 0 0 34px rgba(255, 215, 0, .12), inset 0 0 0 1px rgba(255, 255, 255, .03);
}
.ta-leader::after {
    content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -50%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .12), transparent);
    animation: ta-sweep 4.5s ease-in-out infinite;
}
@keyframes ta-sweep { 60%, 100% { left: 130%; } }
.ta-leader__tag {
    grid-column: 1 / -1; display: flex; align-items: center; gap: 8px;
    color: var(--ta-gold); font-size: 10px; font-weight: 800;
    letter-spacing: .16em; text-transform: uppercase;
}
.ta-leader__flag {
    padding: 1px 7px; color: #1a1400; background: var(--ta-gold);
    border-radius: 4px; font-weight: 900; letter-spacing: .04em;
}
.ta-leader__time {
    grid-row: 2 / span 3; font-size: clamp(34px, 7vw, 64px); font-weight: 900; line-height: 1;
    color: #fff; font-variant-numeric: tabular-nums; letter-spacing: -.01em;
    text-shadow: 0 0 24px rgba(255, 215, 0, .45);
}
.ta-leader__name {
    align-self: end; font-size: clamp(16px, 2.6vw, 24px); font-weight: 800;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ta-leader__car {
    color: var(--ta-gold); font-size: 12px; font-weight: 700; letter-spacing: .04em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ta-leader__gap { align-self: start; color: var(--ta-muted); font-size: 12px; font-weight: 600; }

/* ---------- Resumo ---------- */
.ta-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ta-stat {
    display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 8px;
    border-radius: 10px; border: 1px solid var(--ta-border); background: rgba(25, 25, 32, .7);
}
.ta-stat__value { font-size: 18px; font-weight: 900; font-variant-numeric: tabular-nums; }
.ta-stat__label {
    color: var(--ta-muted); font-size: 9px; font-weight: 800;
    letter-spacing: .14em; text-transform: uppercase;
}

/* ---------- Ranking ---------- */
/* Pódio (1º ao 3º) fica fixo; do 4º em diante a lista rola sozinha em loop (uso em TV). */
.ta-list { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.ta-ranking {
    margin: 0; padding: 0; list-style: none;
    display: flex; flex-direction: column; gap: 6px;
}
.ta-ranking--pinned { flex: 0 0 auto; }
.ta-scroll { flex: 1; min-height: 0; overflow: hidden; position: relative; }
.ta-scroll--active {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
}
.ta-scroll--active .ta-ranking { will-change: transform; }
.ta-scroll--active .ta-row { animation: none; }
.ta-row {
    position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center; gap: 12px; padding: 8px 12px; overflow: hidden;
    border-radius: 10px; border: 1px solid var(--ta-border); background: rgba(25, 25, 32, .78);
    animation: ta-in .45s ease both; animation-delay: calc(var(--i, 0) * 28ms);
}
@keyframes ta-in { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
.ta-row__bar {
    position: absolute; inset: 0 auto 0 0; width: var(--pace, 0%); opacity: .55;
    background: linear-gradient(90deg, rgba(var(--ta-hot-rgb), .26), rgba(var(--ta-hot-rgb), 0));
    transition: width .6s ease;
}
.ta-row > *:not(.ta-row__bar) { position: relative; z-index: 1; }
.ta-row__pos {
    font-size: 20px; font-weight: 900; text-align: center; color: var(--ta-muted);
    font-variant-numeric: tabular-nums;
}
.ta-row__who { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ta-row__name {
    font-size: 16px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ta-row__meta {
    color: var(--ta-muted); font-size: 11px; font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ta-row__time { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.ta-row__lap {
    font-size: 20px; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: .01em;
}
.ta-row__gap {
    font-size: 12px; font-weight: 700; color: var(--ta-hot); font-variant-numeric: tabular-nums;
}
.ta-row__gap--lead { color: var(--ta-gold); letter-spacing: .1em; }

.ta-row--p1 { border-color: rgba(255, 215, 0, .5); background: linear-gradient(90deg, rgba(255, 215, 0, .14), rgba(25, 25, 32, .78) 70%); }
.ta-row--p1 .ta-row__pos { color: var(--ta-gold); }
.ta-row--p1 .ta-row__bar { background: linear-gradient(90deg, rgba(255, 215, 0, .22), rgba(255, 215, 0, 0)); }
.ta-row--p2 { border-color: rgba(232, 232, 236, .38); }
.ta-row--p2 .ta-row__pos { color: var(--ta-silver); }
.ta-row--p3 { border-color: rgba(205, 127, 50, .42); }
.ta-row--p3 .ta-row__pos { color: var(--ta-bronze); }

.ta-empty {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px; text-align: center; color: var(--ta-muted);
}
.ta-empty strong { color: var(--ta-text); font-size: 17px; }

.ta-foot { padding-top: 4px; }
.ta-foot__updated { margin: 0; color: var(--ta-muted); font-size: 10px; letter-spacing: .06em; text-align: right; }

/* ---------- Telas pequenas (SimHub 800x480) ---------- */
@media (max-width: 720px), (max-height: 520px) {
    .ta-filter { grid-template-columns: 1fr 1fr; gap: 8px; }
    .ta-filter__copy { display: none; }
    .ta-filter__field { grid-template-columns: 1fr; gap: 3px; }
    .ta-filter select { min-height: 32px; }
    .ta-board { padding: 10px 12px 8px; }
    .ta-content { gap: 7px; }
    .ta-head__logo { width: 34px; height: 34px; }
    .ta-leader { padding: 8px 14px; }
    .ta-row { padding: 6px 10px; grid-template-columns: 34px minmax(0, 1fr) auto; }
    .ta-row__name { font-size: 14px; }
    .ta-row__lap { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
    .ta-fx-speed, .ta-leader::after, .ta-row, .ta-clock--live .ta-clock__value, .ta-spinner { animation: none; }
    .ta-row__bar { transition: none; }
}

/* ---------- Tela publicada pela organização (travada, sem filtros) ---------- */
.ta-locked .ta-filter { display: none; }
.ta-locked .ta-shell { grid-template-rows: minmax(0, 1fr); }