/* Page télé : lisible de loin, même style vectoriel que le jeu */
:root { --bg: #05070d; --fg: #e8f0ff; --dim: #8fa3c7; --line: #4de1ff33; --accent: #4de1ff; --warn: #ffd34d; --bad: #ff5d73; --good: #7dff6a; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--fg); font-family: ui-monospace, 'Cascadia Mono', 'DejaVu Sans Mono', Menlo, monospace; }
#tv { display: grid; grid-template-rows: auto 1fr auto; height: 100vh; padding: 1.6vw 2.2vw; gap: 1.4vw; }
header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid var(--line); padding-bottom: 1vw; }
.brand { color: var(--accent); letter-spacing: .4em; font-size: clamp(14px, 1.5vw, 30px); }
#clock { font-size: clamp(32px, 5vw, 110px); font-variant-numeric: tabular-nums; letter-spacing: .05em; }
#clock.late { color: var(--warn); }
#meta { justify-self: end; text-align: right; color: var(--dim); font-size: clamp(12px, 1.2vw, 24px); line-height: 1.5; }
h1 { font-weight: normal; font-size: clamp(28px, 4vw, 90px); margin: 0 0 1.5vw; color: var(--accent); }
h2 { font-weight: normal; color: var(--dim); text-transform: uppercase; letter-spacing: .2em; font-size: clamp(11px, 1.1vw, 22px); margin: 0 0 .8vw; }
.dim { color: var(--dim); }
main { min-height: 0; }
#wait, #final { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
#pilots { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 1vw 2.5vw; justify-content: center; font-size: clamp(16px, 2vw, 44px); margin: 0 0 2vw; }
#pilots .sw { display: inline-block; width: .7em; height: .7em; margin-right: .4em; }
#live { display: grid; grid-template-columns: 1.25fr 1fr; gap: 2.5vw; }
.col { display: flex; flex-direction: column; min-width: 0; min-height: 0; }

/* Classement */
#board { display: flex; flex-direction: column; gap: .5vw; }
.row { display: grid; grid-template-columns: 2.2em 1fr 5em 7em; align-items: center; gap: 1vw; font-size: clamp(14px, 1.9vw, 42px); font-variant-numeric: tabular-nums; }
.row .rk { color: var(--dim); text-align: right; }
.row .nm { display: flex; flex-direction: column; gap: .25vw; min-width: 0; }
.row .nm span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row .bar { height: .28em; background: currentColor; opacity: .85; }
.row .pl, .row .sc { text-align: right; }
.row .pl { color: var(--dim); }
.row.dead { opacity: .35; }
.row.dead .nm span::after { content: ' · éliminé'; color: var(--dim); font-size: .6em; }
.team { margin-top: .8vw; display: grid; grid-template-columns: 1fr 5em 7em; gap: 1vw; color: var(--dim); text-transform: uppercase; letter-spacing: .15em; font-size: clamp(12px, 1.3vw, 28px); border-top: 1px solid var(--line); padding-top: .6vw; }
.team:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.team span:nth-child(n+2) { text-align: right; font-variant-numeric: tabular-nums; }

/* Courbes et événements */
#chart { width: 100%; height: 34vh; display: block; margin-bottom: 1.6vw; }
#now { display: flex; flex-direction: column; gap: .7vw; font-size: clamp(13px, 1.5vw, 32px); }
#now .card { border: 1px solid var(--line); padding: .7vw 1vw; display: flex; justify-content: space-between; gap: 1vw; align-items: baseline; }
#now .card b { font-weight: normal; }
#now .card .t { font-variant-numeric: tabular-nums; }
#now .card.hot { border-color: var(--warn); color: var(--warn); }
#now .card.omen small { display: block; color: var(--dim); font-size: .7em; margin-top: .2em; }
#now .empty { color: var(--dim); }

/* Fin de partie */
#finalTable { border-collapse: collapse; font-size: clamp(14px, 1.8vw, 40px); font-variant-numeric: tabular-nums; margin-top: 1.5vw; }
#finalTable td { padding: .4vw 1.2vw; text-align: left; }
#finalTable td.n { text-align: right; }
#finalTable .sw { display: inline-block; width: .7em; height: .7em; margin-right: .4em; }

/* Bandeau des annonces */
footer { border-top: 1px solid var(--line); padding-top: .8vw; display: flex; flex-direction: column; gap: .2vw; font-size: clamp(12px, 1.2vw, 26px); color: var(--dim); min-height: 4.5em; }
footer .warn { color: var(--warn); }
footer .good { color: var(--good); }
footer .bad { color: var(--bad); }
footer .tm { color: var(--dim); margin-right: .8em; font-variant-numeric: tabular-nums; }

@media (max-width: 800px) {
  #live { grid-template-columns: 1fr; }
  #chart { height: 30vh; }
}

/* Titres de fin */
#finalTable .ttl { font-size: 0.62em; color: #ffd34d; margin-top: 4px; letter-spacing: 1px; }
#finalTable .ttl.rL { color: #ff9a3c; }
#finalTable .ttl.rR { color: #c38bff; }

.tvRoom { font-size: 14px; letter-spacing: 1px; color: #ffd34d; margin-top: 4px; display: flex; gap: 8px; align-items: center; }
.tvRoom select { font: inherit; font-size: 12px; background: #0b1020; color: #8fa3c7; border: 1px solid #4de1ff44; padding: 1px 4px; }