:root { --bg:#f6f4ee; --fg:#1d1d1b; --flat:#e8e4d6; --up:#e3b9a0; --down:#b9d3e3; --card:#fff; --accent:#c8102e; }
@media (prefers-color-scheme: dark) { :root { --bg:#1b1c1e; --fg:#eee; --flat:#34352f; --up:#6b4a39; --down:#34505f; --card:#2a2b2e; } }
* { box-sizing: border-box; }
html { scrollbar-gutter: stable; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.4 system-ui, sans-serif; padding:0 16px 32px; }
.top { display:flex; flex-wrap:wrap; gap:12px 24px; align-items:center; padding:12px 0; }
h1 { margin:0; font-size:1.4rem; }
.setup { display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; }
.setup label { display:flex; gap:6px; align-items:center; }
select, button { font:inherit; padding:6px 10px; border-radius:6px; border:1px solid #888; background:var(--card); color:var(--fg); }
button { cursor:pointer; } button:disabled { opacity:.5; cursor:default; }
#new-game { background:var(--accent); color:#fff; border-color:var(--accent); }
.sr { position:absolute; left:-9999px; }
.legend, .hint, .deckinfo { font-size:.85rem; opacity:.8; }
.panel { margin-top:12px; }
.status { font-weight:600; font-size:1.1rem; }
.hand { display:flex; gap:10px; flex-wrap:wrap; }
.card { min-width:84px; padding:10px; border-radius:8px; background:var(--card); border:2px solid #888; text-align:center; }
.card strong { display:block; font-size:1.8rem; }
.card.tired { border-style:dashed; }
.card:hover:not(:disabled) { border-color:var(--accent); }
.log { padding-left:18px; margin:4px 0; font-size:.9rem; }
.result { margin-top:16px; padding:16px; background:var(--card); border-radius:8px; }
.result table { border-collapse:collapse; width:100%; } .result td, .result th { text-align:left; padding:4px 8px; border-bottom:1px solid #8884; }

/* --- percorso a serpentina, come sulle carte --- */
.track { position:relative; min-height:120px; background:#4f9d45; border-radius:14px; overflow:hidden; }
@media (prefers-color-scheme: dark) { .track { background:#2f5f2b; } }
.grid { position:relative; }
.turn { position:absolute; background:#5d5d5d; border:2px solid #2d2d2d; }
.turn-right { border-radius:0 44px 44px 0; border-left:none; }
.turn-left { border-radius:44px 0 0 44px; border-right:none; }
.sq { position:absolute; background:#6b6b6b; border:1px solid #ffffff55; border-radius:0; display:flex; flex-direction:column; justify-content:space-between; padding:1px 3px; font-size:.6rem; color:#fff; overflow:hidden; }
.sq::after { content:""; position:absolute; left:0; right:0; top:50%; border-top:2px dashed #ffffff66; pointer-events:none; }
.sq.l1::after { display:none; }
.sq.l3::after { top:33%; height:34%; border-top:2px dashed #ffffff66; border-bottom:2px dashed #ffffff66; }
.sq.cobbled { background:repeating-conic-gradient(#7a6a58 0 25%, #5f5143 0 50%) 0 0/10px 10px; }
.sq.supply { background:#4d7f6d; }
.sq.ascent { background:linear-gradient(#b23a2e,#b23a2e); }
.sq.descent { background:linear-gradient(#2f6fb5,#2f6fb5); }
.sq.start { box-shadow:inset 0 0 0 100px #e8c52e88; }
.sq.past { background:#8a8a82; }
.sq.line::before { content:""; position:absolute; left:0; top:0; bottom:0; width:6px; background:repeating-conic-gradient(#000 0 25%, #fff 0 50%) 0 0/6px 6px; }
.sq.line.rtl::before { left:auto; right:0; }
.sq .n { opacity:.8; position:relative; z-index:1; }
.sq .sym { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:1.5rem; color:#fff; opacity:.45; pointer-events:none; z-index:0; }
.live-rank { margin:6px 0; position:sticky; top:0; z-index:6; background:var(--bg); padding:4px 0; }
.live-rank-list { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:4px 6px; font-size:.8rem; }
.live-rank-list li { display:flex; align-items:center; gap:4px; padding:1px 7px 1px 5px; border-radius:999px; background:var(--card); border:1px solid #8884; white-space:nowrap; }
.live-rank-list li.mine { border:2px solid var(--fg); font-weight:700; }
.live-rank-list li.done { opacity:.75; }
.live-rank-list li.done b::after { content:"✓"; margin-left:1px; }
.live-rank-list .dot { width:.7em; height:.7em; border-radius:50%; border:1px solid #000; display:inline-block; }
.profile { position:absolute; background:#0000001f; border-radius:8px; overflow:hidden; }
.profile svg { display:block; }
.profile-area { fill:#ffffff26; }
.profile-line { stroke:#e9e9e2; stroke-width:3; stroke-linecap:round; }
.profile-line.ascent { stroke:#e5564a; }
.profile-line.descent { stroke:#5aa0ee; }
.profile-finish { stroke:#fff; stroke-width:2; stroke-dasharray:4 3; }
.profile-dot { stroke:#000; stroke-width:1; }
.profile-dot.mine { stroke:#fff; stroke-width:2; }
.profile-dot.focus { stroke:#ffd54f; stroke-width:2.5; }
.layer { position:absolute; inset:0; pointer-events:none; }
.rider { position:absolute; width:34px; height:18px; border-radius:5px; border:2px solid #000; color:#fff; font-weight:800; font-size:.75rem; display:flex; align-items:center; justify-content:center; text-shadow:0 0 2px #000; transition:left .9s ease-in-out, top .9s ease-in-out, transform .2s, opacity .2s; }
.rider.instant { transition:none; }
.rider.focus { transform:scale(1.3); z-index:3; box-shadow:0 0 0 3px #ffd54f; }
.rider.dim { opacity:.45; }
.rider.mine { border:3px solid #fff; box-shadow:0 0 0 1px #000; }
.tag { position:absolute; top:-15px; left:50%; transform:translateX(-50%); background:#fff; color:#000; border:1px solid #000; border-radius:4px; padding:0 3px; font-size:.65rem; line-height:1.2; z-index:4; }
.ghost { position:absolute; width:34px; height:18px; border-radius:5px; border:3px dashed var(--accent); display:flex; align-items:center; justify-content:center; font-size:.65rem; font-weight:700; z-index:2; background:#fff8; color:#000; transition:left .3s, top .3s; }
.sym-legend { display:inline-block; min-width:1.2em; text-align:center; font-weight:700; padding:0 4px; border-radius:3px; color:#fff; }
.sym-up { background:#b23a2e; } .sym-down { background:#2f6fb5; }
.card[aria-pressed="true"] { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent); }
#confirm { background:var(--accent); color:#fff; border-color:var(--accent); margin-top:8px; }
.playback { margin:8px 0; padding:8px 12px; background:var(--card); border-radius:8px; display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center; }
.playback p { margin:0; flex:1 1 280px; font-weight:600; }
.preview { min-height:1.4em; font-size:.9rem; }
.cardsinfo { font-size:.85rem; margin:8px 0; }
.cardsinfo h3 { margin:0 0 4px; font-size:.95rem; }
.cardsinfo div { margin:2px 0; }
@media (prefers-reduced-motion: reduce) { .rider, .ghost { transition:none; } }
[hidden] { display:none !important; }

/* --- procedura guidata --- */
.wizard { margin-top:12px; }
.colors { display:flex; flex-wrap:wrap; gap:10px; margin:12px 0; }
.swatch { display:flex; align-items:center; gap:6px; padding:8px 12px; border:2px solid #888; border-radius:8px; background:var(--card); cursor:pointer; }
.swatch:has(input:checked) { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent); }
.swatch input { position:absolute; opacity:0; }
.swatch .dot { width:20px; height:20px; border-radius:50%; border:2px solid #000; }
.sq.pick { outline:3px solid var(--accent); outline-offset:-3px; cursor:pointer; z-index:2; pointer-events:auto; box-shadow:inset 0 0 0 3px var(--accent), inset 0 0 0 100px #e0303f88; }
#wizard-continue, #place-auto { background:var(--accent); color:#fff; border-color:var(--accent); }

/* --- Tour --- */
.stage-tracks { display:flex; flex-wrap:wrap; gap:6px 14px; width:100%; }
.stage-tracks label { display:flex; gap:6px; align-items:center; font-size:.9rem; }
.result h3 { margin:16px 0 4px; }
#next-stage, #new-tour { margin-top:12px; background:var(--accent); color:#fff; border-color:var(--accent); }

/* --- partita online --- */
#online-btn { background:#2f6fb5; color:#fff; border-color:#2f6fb5; }
.online { margin-top:12px; }
.online .primary { background:var(--accent); color:#fff; border-color:var(--accent); margin-top:8px; }
.on-form { display:flex; flex-wrap:wrap; gap:8px 12px; align-items:end; max-width:520px; }
.on-form p { width:100%; margin:0; }
.on-form label { display:flex; flex-direction:column; gap:4px; }
.online input[type=text] { font:inherit; padding:6px 10px; border-radius:6px; border:1px solid #888; background:var(--card); color:var(--fg); }
.on-link { display:flex; gap:8px; flex-wrap:wrap; }
.on-link input { flex:1 1 280px; }
.on-players { list-style:none; padding:0; margin:4px 0; }
.on-players li { padding:2px 0; }
.online .dot { display:inline-block; width:16px; height:16px; border-radius:50%; border:2px solid #000; vertical-align:-3px; }
.online .swatch { cursor:pointer; }
.online .swatch[aria-pressed="true"] { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent); }
.on-settings { display:flex; flex-wrap:wrap; gap:8px 20px; margin:12px 0; }
.on-settings label { display:flex; gap:6px; align-items:center; }
.on-error { color:var(--accent); font-weight:600; }
.on-caption { min-height:1.4em; font-weight:600; }
.on-hand { margin:8px 0; }
.on-ranking { border-collapse:collapse; width:100%; } .on-ranking td, .on-ranking th { text-align:left; padding:4px 8px; border-bottom:1px solid #8884; }
#setup-error { color:var(--accent); font-weight:600; margin:0 0 8px; }
.fuga { margin:8px 0; }
.fuga .hand { margin:8px 0; }
.fuga table { border-collapse:collapse; width:100%; max-width:640px; } .fuga td, .fuga th { text-align:left; padding:4px 8px; border-bottom:1px solid #8884; }
.fuga .primary { background:var(--accent); color:#fff; border-color:var(--accent); margin-top:8px; }
.sq.fugasq { box-shadow:inset 0 0 0 100px #e8c52e88; }
.online .fuga table { border-collapse:collapse; width:100%; max-width:640px; } .online .fuga td, .online .fuga th { text-align:left; padding:4px 8px; border-bottom:1px solid #8884; }

/* Partita online aperta: i controlli della partita singola non servono. */
/* La configurazione si vede solo prima di cominciare; durante la corsa restano lingua, animazione e il pulsante per ricominciare. */
body:not(.configuring) #setup, body.configuring #restart, body.mode-online #setup, body.mode-online #restart { display:none; }
.view-settings { display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; }
.view-settings label { display:flex; gap:6px; align-items:center; }
#setup { flex-direction:column; align-items:flex-start; max-width:520px; padding:14px 16px; margin-bottom:12px; }
#setup h2 { margin:0 0 4px; font-size:1.15rem; }
#setup label { width:100%; justify-content:space-between; }
#setup .stage-tracks { display:flex; flex-direction:column; gap:6px; width:100%; }
#setup .stage-tracks label { width:100%; }
.on-settings.summary ul { margin:4px 0; padding-left:18px; }

/* Circuito con curve vere (schermi larghi): caselle trapezoidali ritagliate, bordo verde come sulle carte */
#track.circuit, .circuit { background:#4f8a3c; border-radius:14px; }
.circuit .rider, .circuit .ghost { width:20px; height:16px; font-size:.65rem; border-width:2px; border-radius:4px; }
.circuit .rider.mine { border-width:2px; }
.sq.circ { border:none; padding:0; display:block; }
.sq.circ::after, .sq.circ::before { display:none; }
.sq.circ .n { position:absolute; transform:translate(-50%,-50%); font-size:.55rem; opacity:.9; text-shadow:0 0 2px #000; }
.sq.circ .sym { inset:auto; transform:translate(-50%,-50%); font-size:1.1rem; }
.sq.circ.line { background:repeating-conic-gradient(#000 0 25%, #fff 0 50%) 0 0/10px 10px; }
.sq.circ.line .n { background:#000a; padding:0 2px; border-radius:3px; }
.sq.circ.pick { outline:none; box-shadow:inset 0 0 0 4px var(--accent), inset 0 0 0 100px #e0303faa; animation:pickpulse 1.2s ease-in-out infinite; }
@keyframes pickpulse { 50% { filter:brightness(1.25); } }
@media (prefers-reduced-motion: reduce) { .sq.circ.pick { animation:none; } }

/* Sfondo illustrato (colline, strada e un gruppetto), fisso dietro tutta la pagina */
body::before { content:""; position:fixed; inset:0; z-index:-1; background:url("sfondo.svg") center/cover no-repeat; }
@media (prefers-color-scheme: dark) { body::before { filter:brightness(.35) saturate(.7); } }
.panel, .setup, .legend { position:relative; }
.setup, .top { background:#f6f4eecc; border-radius:10px; padding-left:10px; padding-right:10px; }
@media (prefers-color-scheme: dark) { .setup, .top { background:#1b1c1ecc; } }
.legend, .hint, .deckinfo, .log, .status { text-shadow:0 0 6px var(--bg), 0 0 3px var(--bg); }

.sq[hidden] { display:none; }

[hidden] { display:none !important; }
#setup label:has(input[type="checkbox"]) { justify-content:flex-start; }

/* --- schermi larghi: pista a sinistra, carte e comandi a destra, tutto in vista --- */
@media (min-width: 1100px) {
  #game:not([hidden]) { display:grid; grid-template-columns:minmax(0, 1fr) 360px; gap:16px; align-items:start; }
  #game > .panel { margin-top:12px; position:sticky; top:8px; max-height:calc(100vh - 16px); overflow:auto; }
  #game > .result { grid-column:1 / -1; }
}

/* --- piazzamento guidato: fuori dalle caselle da scegliere la pista sfuma in grigio --- */
.sq, .turn { transition:filter .35s, opacity .35s; }
.track.placing .sq:not(.pick), .track.placing .turn { filter:grayscale(1) brightness(.8); opacity:.4; }
@media (prefers-reduced-motion: reduce) { .sq, .turn { transition:none; } }

/* --- storico dei turni --- */
.log { max-height:260px; overflow:auto; }
.log li.round { list-style:none; margin-left:-18px; margin-top:6px; font-weight:700; }
.on-history { margin-top:12px; }
.on-history summary { cursor:pointer; font-weight:600; }

/* --- telefono: impostazioni dietro un pulsante, carte in una barra fissa in basso --- */
.settings-menu summary { cursor:pointer; padding:6px 10px; border:1px solid #888; border-radius:6px; background:var(--card); list-style:none; display:inline-block; }
.settings-menu[open] summary { margin-bottom:8px; }
@media (min-width: 700px) { .settings-menu summary { display:none; } }
@media (max-width: 700px) {
  body:has(#game:not([hidden])), body:has(.on-hands) { padding-bottom:190px; }
  .dock:not(:has(.card)) { display:none; }
  .dock, .on-hands { position:fixed; left:0; right:0; bottom:0; z-index:20; background:var(--bg); border-top:1px solid #8886; box-shadow:0 -4px 12px #0003; padding:8px 12px calc(8px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:6px; }
  .on-hands { max-height:55vh; overflow:auto; }
  .dock .hand { flex-wrap:nowrap; overflow-x:auto; gap:8px; }
  .dock .card, .on-hands .card { min-width:62px; padding:6px 8px; flex:0 0 auto; font-size:.8rem; }
  .dock .card strong, .on-hands .card strong { font-size:1.3rem; }
  .dock #confirm { width:100%; }
  .on-hands .primary { width:100%; }
}
@media (max-width: 700px) { .setup label { max-width:100%; } .setup select { min-width:0; max-width:62%; } }
@media (max-width: 700px) { .setup #track-box, .stage-tracks label { flex-direction:column; align-items:stretch; gap:2px; } .setup #track-box select, .stage-tracks select { max-width:100%; } }

/* --- partita online su schermi larghi: pista a sinistra, carte e comandi a destra --- */
@media (min-width: 1100px) {
  .on-race.split { display:grid; grid-template-columns:minmax(0, 1fr) 360px; gap:0 16px; align-items:start; }
  .on-race.split > .status { grid-column:1 / -1; }
  .on-race.split .on-right { position:sticky; top:8px; max-height:calc(100vh - 16px); overflow:auto; }
}
@media (min-width: 1100px) { .online > div > h2 { margin:6px 0; font-size:1.2rem; } .on-race.split > .status { margin:2px 0 6px; } }

/* --- regolamento --- */
.rules-dialog { width:min(720px, calc(100vw - 24px)); max-height:calc(100vh - 24px); padding:0; border:1px solid #8886; border-radius:12px; background:var(--bg); color:var(--fg); }
.rules-dialog::backdrop { background:#0008; }
.rules-dialog[open] { display:flex; flex-direction:column; }
.rules-dialog header { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid #8884; }
.rules-dialog h2 { margin:0; font-size:1.2rem; }
.rules-body { overflow:auto; padding:4px 16px 16px; }
.rules-body h3 { margin:16px 0 4px; }
.rules-body p, .rules-body li { margin:4px 0; }
.rules-body ul { padding-left:20px; }

.on-notices .on-notice { margin:6px 0; padding:6px 10px; border-radius:6px; background:#fff3cd; color:#533f03; }
.on-chat { margin-top:12px; border:1px solid #ccc; border-radius:8px; padding:6px 10px; }
.on-chat summary { cursor:pointer; font-weight:600; }
.on-chat .chat-list { list-style:none; margin:6px 0; padding:0; max-height:160px; overflow-y:auto; }
.on-chat .chat-note { font-style:italic; opacity:.8; }
.on-chat .chat-empty { opacity:.6; }
.on-chat .chat-form { display:flex; gap:6px; }
.on-chat .chat-form input { flex:1; min-width:0; }

.sq .info-q { position:absolute; top:1px; right:1px; z-index:3; width:16px; height:16px; padding:0; border-radius:50%; border:1px solid #fff; background:#222c; color:#fff; font-size:.65rem; font-weight:700; line-height:1; cursor:help; }
.info-back { position:fixed; inset:0; background:#0008; display:flex; align-items:center; justify-content:center; z-index:50; padding:16px; }
.info-box { background:#fff; color:#111; border-radius:10px; padding:16px; max-width:360px; }
.info-box h3 { margin:0 0 8px; }
@media (prefers-color-scheme: dark) { .info-box { background:#1e1e1e; color:#eee; } }

/* Telefono: barra delle carte più bassa — bottoni piccoli in una sola riga scorrevole, sempre in vista */
@media (max-width: 700px) {
  body:has(#game:not([hidden])), body:has(.on-hands) { padding-bottom: 120px; }
  .dock, .on-hands { padding: 6px 10px calc(6px + env(safe-area-inset-bottom)); gap: 4px; }
  .on-hands { max-height: 38vh; }
  .dock .hand, .on-hands .hand { flex-wrap: nowrap; overflow-x: auto; gap: 6px; }
  .dock .card, .on-hands .card { min-width: 44px; padding: 3px 6px; font-size: .68rem; border-width: 1.5px; border-radius: 6px; }
  .dock .card strong, .on-hands .card strong { font-size: 1.05rem; }
  .dock p, .on-hands p, .on-hands h3, .dock h3 { margin: 0; font-size: .8rem; }
  .dock #confirm, .on-hands .primary { padding: 6px 10px; font-size: .85rem; }
}

.phase-banner { position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; background:#555a; pointer-events:none; animation:phase-in .25s ease-out; transition:opacity .5s; }
.phase-banner.out { opacity:0; }
.phase-title { padding:18px 28px; max-width:90vw; text-align:center; font-size:clamp(1.4rem,5vw,2.4rem); font-weight:800; color:#fff; text-shadow:0 2px 8px #000a; }
@keyframes phase-in { from { opacity:0; } to { opacity:1; } }
@media (prefers-reduced-motion: reduce) { .phase-banner { animation:none; transition:none; } }

/* Animazione dell'annuncio di fase */
.phase-title { animation:phase-pop .6s cubic-bezier(.2,1.4,.4,1); }
@keyframes phase-pop { 0% { transform:scale(.6) translateY(24px); opacity:0; } 60% { transform:scale(1.08); opacity:1; } 100% { transform:scale(1); } }
.phase-banner.out .phase-title { transform:translateY(-16px) scale(.96); transition:transform .5s; }
@media (prefers-reduced-motion: reduce) { .phase-title { animation:none; } }

/* Commento su cosa fare: ben visibile */
p.status:not(:empty) { margin:10px 0; padding:10px 14px; font-size:1.2rem; font-weight:700; background:#fff3cf; color:#2b2100; border:2px solid #e0a800; border-left-width:8px; border-radius:8px; box-shadow:0 2px 6px #0002; }
@media (prefers-color-scheme: dark) { p.status:not(:empty) { background:#4a3a08; color:#ffe9a3; border-color:#e0a800; } }
@media (max-width:700px) { p.status:not(:empty) { font-size:1.05rem; padding:8px 10px; } }

/* Telefono in orizzontale: le carte in una colonna fissa a destra, la pista occupa il resto */
@media (orientation: landscape) and (max-height: 520px) {
  body:has(#game:not([hidden])), body:has(.on-hands) { padding-bottom: 12px; padding-right: 150px; }
  .dock:not(:has(.card)) { display:none; }
  .dock, .on-hands { position:fixed; top:0; right:0; bottom:0; left:auto; width:140px; z-index:20; background:var(--bg); border-left:1px solid #8886; box-shadow:-4px 0 12px #0003; padding:6px 8px calc(6px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:6px; overflow-y:auto; max-height:none; }
  .dock .hand, .on-hands .hand { flex-wrap:wrap; overflow:visible; gap:6px; }
  .dock .card, .on-hands .card { min-width:0; width:calc(50% - 3px); padding:4px; font-size:.65rem; border-width:1.5px; border-radius:6px; }
  .dock .card strong, .on-hands .card strong { font-size:1.1rem; }
  .dock p, .on-hands p, .on-hands h3, .dock h3 { margin:0; font-size:.75rem; }
  .dock #confirm, .on-hands .primary { width:100%; margin:0; padding:6px; font-size:.8rem; }
}

.chat-toast { position:fixed; top:8px; left:50%; transform:translateX(-50%); z-index:70; max-width:92vw; padding:10px 16px; border-radius:999px; border:2px solid #fff; background:#1f6feb; color:#fff; font-size:.95rem; font-weight:600; box-shadow:0 4px 14px #0006; cursor:pointer; animation:toast-in .3s ease-out; }
@keyframes toast-in { from { opacity:0; transform:translate(-50%,-14px); } to { opacity:1; transform:translate(-50%,0); } }
@media (prefers-reduced-motion: reduce) { .chat-toast { animation:none; } }

.board-tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px; }
.board-tabs button[aria-pressed="true"] { background:var(--accent); color:#fff; border-color:var(--accent); }
table.board { border-collapse:collapse; width:100%; font-size:.9rem; }
table.board th, table.board td { padding:4px 6px; text-align:left; border-bottom:1px solid #8884; }
table.board td:nth-child(n+3), table.board th:nth-child(n+3) { text-align:right; }

/* Classifica dal vivo sopra la pista: tolta (resta la classifica di fine corsa) */
.live-rank { display:none; }

/* Il riquadro del commento non deve far saltare la pista quando il testo compare o sparisce: l'altezza è riservata */
#game .status, .on-race > .status { min-height:2.6em; box-sizing:border-box; margin:10px 0; }
#game .status:empty, .on-race > .status:empty { border:2px solid transparent; }
@media (max-width:700px) { #game .status, .on-race > .status { min-height:2.4em; } }
.sq.kom { box-shadow:inset 0 0 0 3px #fff, inset 0 0 0 6px #c8102e; }
.sq.kom::after { content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background:radial-gradient(circle,#fff 22%,transparent 25%) 0 0/9px 9px; opacity:.6; }
.kom-flag { position:absolute; transform:translate(-50%,-50%); z-index:8; pointer-events:none; font-size:.62rem; line-height:1.1; font-weight:900; padding:1px 5px; border-radius:4px; background:#c8102e; color:#fff; letter-spacing:.04em; border:2px solid #fff; box-shadow:0 1px 4px #0008; white-space:nowrap; }

.profile-kom line { stroke:#c8102e; stroke-width:2; }
.profile-kom text { fill:#fff; font-size:10px; font-weight:800; paint-order:stroke; stroke:#c8102e; stroke-width:4px; stroke-linejoin:round; }

/* A Tour concluso la classifica occupa tutto lo spazio: via carte, storico e pulsanti del pannello. */
#game:has(#result.tour-end:not([hidden])) > .panel { display:none; }

/* Premi finali del Tour: maglia gialla, maglia a pois, miglior tempo. */
.prizes { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px; margin:10px 0 16px; }
.prize { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:10px; background:#ffffffd9; border-left:6px solid var(--prize-team,#555); box-shadow:0 1px 3px #0003; }
.prize-badge { flex:none; width:38px; height:38px; border-radius:50%; border:2px solid #0004; }
.prize.yellow .prize-badge { background:#f7d117; }
.prize.polka .prize-badge { background:radial-gradient(circle,#d3202f 28%,transparent 31%) 0 0/12px 12px, #fff; }
.prize.green .prize-badge { background:#2e9e4f; }
.prize.time .prize-badge { background:#e8e8e2; position:relative; }
.prize.time .prize-badge::after { content:''; position:absolute; left:50%; top:50%; width:2px; height:13px; background:#333; transform:translate(-50%,-85%); box-shadow:5px 6px 0 -0px #333; }
.prize-title { font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:#555; }
.prize-who { font-size:1.05rem; font-weight:800; }
.prize-sub { font-size:.85rem; color:#444; }
.sq.kom .info-q { top:auto; bottom:1px; }

.deck-info { margin:8px 0; font-size:.85rem; }
.deck-info summary { cursor:pointer; font-weight:700; }

.deck-row { margin-top:8px; }
.deck-label { font-size:.8rem; color:#444; margin-bottom:3px; }
.deck-cards { display:flex; gap:6px; flex-wrap:wrap; }
.deck-chip { display:inline-flex; flex-direction:column; align-items:center; justify-content:center; width:38px; height:50px; border-radius:6px; background:#fff; border:2px solid #555; box-shadow:0 1px 2px #0003; line-height:1; }
.deck-chip b { font-size:1.35rem; }
.deck-chip small { font-size:.7rem; color:#666; margin-top:2px; }
.deck-chip.tired { background:#e3e3e3; border-style:dashed; width:48px; }

/* Tabella delle tappe: primi tre della classifica generale evidenziati. */
.stage-table tr.podium td { font-weight:600; }
.stage-table tr.p1 td { background:#f7d11733; }
.stage-table tr.p2 td { background:#c0c6cc40; }
.stage-table tr.p3 td { background:#cd7f3233; }

/* --- meteo --- */
.sq.wx-side, .sq.wx-tail, .sq.wx-head, .sq.wx-wet { box-shadow:inset 0 0 0 3px var(--wx); }
.sq.wx-side { --wx:#4f7396; } .sq.wx-tail { --wx:#2e9d57; } .sq.wx-head { --wx:#d98a1c; } .sq.wx-wet { --wx:#8e3fc0; }
.sq.wx-side::after, .sq.wx-tail::after, .sq.wx-head::after, .sq.wx-wet::after { content:''; position:absolute; inset:0; pointer-events:none; z-index:1; background:var(--wx); opacity:.45; }
.wx-label { position:absolute; transform:translate(-50%,-50%); display:inline-flex; gap:5px; align-items:center; padding:3px 9px; border-radius:999px; color:#fff; font-size:.78rem; font-weight:700; white-space:nowrap; z-index:8; cursor:help; box-shadow:0 1px 4px #0006; background:var(--wx); }
.wx-label.wx-side { --wx:#4f7396; } .wx-label.wx-tail { --wx:#2e9d57; } .wx-label.wx-head { --wx:#c77d12; } .wx-label.wx-wet { --wx:#8e3fc0; }
.wx-icon { display:inline-flex; }
.rider.fallen { transform:rotate(90deg) !important; opacity:.85; outline:2px solid #c0392b; }
.wx-legend { font-size:.85rem; }

.log-box > summary, .on-history > summary { font-weight:700; cursor:pointer; margin:8px 0 4px; font-size:1.05rem; text-shadow:0 0 6px var(--bg), 0 0 3px var(--bg); }