:root {
  --scale: 1;
  --row-h: calc(30px * var(--scale));
  --font: calc(17px * var(--scale));
  --bg: rgba(12, 14, 18, 0.88);
  --bg-row: rgba(255, 255, 255, 0.035);
  --bg-player: rgba(255, 214, 0, 0.18);
  --text: #f2f3f5;
  --muted: #9aa1ab;
  --purple: #b36bff;
  --up: #2ecc71;
  --down: #ff4d4d;
  --pit: #ffb300;
  --width: calc(520px * var(--scale));
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { background: transparent; overflow: hidden; }

body {
  font-family: "Barlow Condensed", "Segoe UI", sans-serif;
  font-size: var(--font);
  color: var(--text);
  padding: calc(8px * var(--scale));
  -webkit-font-smoothing: antialiased;
}

/* In un normale browser (anteprima) mostra uno sfondo a scacchi per simulare la trasparenza */
body.preview {
  background: #2a2d33 repeating-conic-gradient(#30343b 0% 25%, #262930 0% 50%) 50% / 24px 24px;
  overflow: auto;
}

#board { width: var(--width); display: flex; flex-direction: column; gap: calc(6px * var(--scale)); }
body.layout-columns #board { width: auto; }
body.layout-columns #classes { flex-direction: row; align-items: flex-start; flex-wrap: wrap; }
body.layout-columns .cls { width: var(--width); }

/* --- barra sessione --- */
#session {
  display: flex; align-items: center; gap: calc(10px * var(--scale));
  background: var(--bg); border-radius: 4px;
  padding: 0 calc(10px * var(--scale)); height: var(--row-h);
  font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
#session #stype { color: var(--muted); font-weight: 600; }
#session #clock { margin-left: auto; font-family: "JetBrains Mono", monospace; font-size: .85em; }
.flag { width: calc(6px * var(--scale)); align-self: stretch; margin: calc(6px * var(--scale)) 0; border-radius: 2px; background: var(--muted); }
.flag.green { background: #2ecc71; } .flag.yellow { background: #ffd600; }
.flag.red { background: #ff1744; } .flag.white { background: #fff; }
.flag.checkered { background: repeating-conic-gradient(#fff 0% 25%, #111 0% 50%) 50% / 6px 6px; }
body.hide-session #session { display: none; }

/* --- blocchi per classe --- */
#classes { display: flex; flex-direction: column; gap: calc(6px * var(--scale)); }
.cls { background: var(--bg); border-radius: 4px; overflow: hidden; border-left: calc(4px * var(--scale)) solid var(--cls-color); }
.cls-head {
  display: flex; align-items: center; gap: calc(8px * var(--scale));
  height: calc(var(--row-h) * .9); padding: 0 calc(10px * var(--scale));
  background: linear-gradient(90deg, var(--cls-color) 0%, transparent 85%);
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.cls-head .count { margin-left: auto; font-weight: 600; opacity: .8; font-size: .85em; }
.rows { position: relative; }

.row {
  position: absolute; left: 0; right: 0; height: var(--row-h);
  display: grid; align-items: center;
  grid-template-columns: var(--cols);
  column-gap: calc(6px * var(--scale));
  padding: 0 calc(8px * var(--scale));
  transition: transform .6s cubic-bezier(.2,.8,.2,1), opacity .3s;
  white-space: nowrap;
}
.row:nth-child(even) { background: var(--bg-row); }
.row.player { background: var(--bg-player); box-shadow: inset 3px 0 0 #ffd600; }
.row.sep { border-top: 1px dashed rgba(255,255,255,.15); }

.pos {
  font-weight: 700; text-align: center; border-radius: 3px;
  background: rgba(255,255,255,.1); line-height: calc(var(--row-h) * .72);
}
.row[data-pos="1"] .pos { background: var(--cls-color); }
.num { color: var(--muted); font-weight: 600; text-align: right; }
.driver { overflow: hidden; text-overflow: ellipsis; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; }
.driver small { color: var(--muted); font-weight: 500; text-transform: none; margin-left: 6px; font-size: .8em; }
.ovr { color: var(--muted); font-size: .8em; text-align: center; }
.chg { font-size: .75em; font-weight: 700; text-align: center; }
.chg.up { color: var(--up); } .chg.down { color: var(--down); }
.time { font-family: "JetBrains Mono", monospace; font-size: .78em; text-align: right; }
.time.dim { color: var(--muted); }
.time.purple { color: var(--purple); }
.pit {
  font-size: .7em; font-weight: 700; color: #111; background: var(--pit);
  border-radius: 2px; padding: 0 4px; text-align: center; line-height: 1.4;
}
.pit:empty { background: none; }
.pit.out { background: rgba(255,255,255,.18); color: var(--muted); }
.row.left { opacity: .45; }
.prov { font-style: normal; color: var(--muted); margin-right: .15em; }

/* settori: 3 blocchi */
.sec { display: flex; gap: calc(2px * var(--scale)); align-items: center; }
.sec i { flex: 1; height: calc(7px * var(--scale)); border-radius: 1px; background: rgba(255,255,255,.12); }
.sec i.p { background: var(--purple); }
.sec i.g { background: var(--up); }
.sec i.y { background: #ffd600; }
.sec.last i { opacity: .4; }

#status {
  background: var(--bg); border-radius: 4px; padding: calc(8px * var(--scale)) calc(10px * var(--scale));
  color: var(--muted); font-weight: 600; letter-spacing: .03em;
}
#status:empty { display: none; }

/* --- stile compatto per l'overlay in-game --- */
body.mode-ingame { --bg: rgba(10, 12, 16, 0.72); --width: calc(400px * var(--scale)); }
body.mode-ingame .cls-head { height: calc(var(--row-h) * .75); font-size: .85em; }
/* in gioco niente animazioni: meno lavoro per la GPU/CPU del pilota */
body.mode-ingame *, body.mode-ingame *::before, body.mode-ingame *::after { transition: none !important; animation: none !important; }