/* Písma Barlow a Barlow Condensed (SIL Open Font License) jsou uložená přímo na webu, ne u Googlu. */
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/barlow-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/barlow-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/barlow-latin-ext-500-normal.woff2) format('woff2'); unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/barlow-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/barlow-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Barlow'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/barlow-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/barlow-condensed-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/barlow-condensed-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/barlow-condensed-latin-ext-700-normal.woff2) format('woff2'); unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/barlow-condensed-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 800; font-display: swap; src: url(../fonts/barlow-condensed-latin-ext-800-normal.woff2) format('woff2'); unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 800; font-display: swap; src: url(../fonts/barlow-condensed-latin-800-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* Layout: celoobrazovkové 3D město, nahoře lišta se značkou a časem, dole dok s akcemi, panely jako boční list (desktop) / spodní list (mobil) */
:root {
  --bg: #BFD9EE;
  --panel: #F7F8FA;
  --panel-2: #ECEFF4;
  --ink: #18202C;
  --muted: #5A6577;
  --line: #D4DAE3;
  --accent: #1F56A8;
  --accent-ink: #FFFFFF;
  --signal: #F2C230;
  --signal-ink: #1A1A12;
  --shadow: 0 10px 30px rgba(16, 24, 40, .18), 0 2px 6px rgba(16, 24, 40, .10);
  --plate-bg: #FBFBF7;
  --plate-ink: #111418;
  --plate-blue: #1F4FA6;
  --enamel: #1E4A9A;
  --enamel-ink: #FFFFFF;
  --font-display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --font-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r: 12px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0E1522; --panel: #141A23; --panel-2: #1C2430; --ink: #E7ECF3; --muted: #9AA6B6;
    --line: #2B3545; --accent: #6A9BEA; --accent-ink: #0B1220;
    --shadow: 0 10px 30px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .4);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0E1522; --panel: #141A23; --panel-2: #1C2430; --ink: #E7ECF3; --muted: #9AA6B6;
  --line: #2B3545; --accent: #6A9BEA; --accent-ink: #0B1220;
  --shadow: 0 10px 30px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .4);
  color-scheme: dark;
}
[hidden] { display: none !important; }
html, body { height: 100%; margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 15px;
  overflow: hidden; -webkit-tap-highlight-color: transparent; overscroll-behavior: none;
}
#scene { position: fixed; inset: 0; display: block; width: 100%; height: 100%; touch-action: none; outline: none; }
#labels { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
svg.i { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- horní lišta ---------- */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20; pointer-events: none;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 10px;
  padding-top: calc(env(safe-area-inset-top, 0px) + 12px);
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.topbar > * { pointer-events: auto; }
.brand {
  background: var(--panel); border-radius: var(--r); box-shadow: var(--shadow);
  padding: 8px 14px 9px; display: grid; gap: 1px; min-width: 0;
}
.wordmark {
  font-family: var(--font-display); font-weight: 800; font-size: 26px; line-height: 1; letter-spacing: .06em;
  display: flex; align-items: center; gap: 8px;
}
.wordmark .dot { width: 10px; height: 10px; border-radius: 3px; background: var(--signal); box-shadow: inset 0 0 0 1.5px var(--signal-ink); }
.sub { font-size: 12.5px; color: var(--muted); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.pill {
  font-family: var(--font-display); font-weight: 700; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase;
  padding: 1px 7px 1px; border-radius: 999px; background: var(--panel-2); color: var(--muted); border: 1px solid var(--line);
}
.pill.test { background: var(--signal); color: var(--signal-ink); border-color: transparent; }
.pill.live { background: #23864A; color: #FFFFFF; border-color: transparent; }
.envchip {
  display: flex; align-items: center; gap: 8px; border: 0; background: var(--panel); border-radius: var(--r);
  box-shadow: var(--shadow); padding: 9px 12px; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.envchip b { font-family: var(--font-display); font-size: 18px; font-weight: 700; letter-spacing: .02em; }
.envchip span { color: var(--muted); font-size: 13px; }
/* čas a počasí: výchozí je den, přepínač „Praha živě“ zapne skutečný čas a počasí v Praze */
.envbox { display: flex; align-items: stretch; background: var(--panel); border-radius: var(--r); box-shadow: var(--shadow); }
.envbox .envchip { box-shadow: none; background: transparent; border-radius: var(--r) 0 0 var(--r); }
.envbox .envchip:hover, .livesw:hover { background: var(--panel-2); }
.livesw {
  display: flex; align-items: center; gap: 7px; border: 0; background: transparent; border-left: 1px solid var(--line);
  border-radius: 0 var(--r) var(--r) 0; padding: 9px 12px 9px 10px; font-weight: 600; font-size: 13.5px; white-space: nowrap; color: var(--muted);
}
.livesw .sw { width: 30px; height: 18px; border-radius: 999px; background: var(--line); position: relative; flex: none; transition: background .2s; }
.livesw .sw i { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: transform .2s; }
.livesw[aria-checked="true"] { color: var(--ink); }
.livesw[aria-checked="true"] .sw { background: #23864A; }
.livesw[aria-checked="true"] .sw i { transform: translateX(12px); }

/* ---------- spodní dok ---------- */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; justify-content: center; pointer-events: none;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.dock-in {
  pointer-events: auto; display: flex; gap: 6px; background: var(--panel); border-radius: 16px; box-shadow: var(--shadow);
  padding: 6px; max-width: 100%;
}
.dbtn {
  display: flex; align-items: center; gap: 7px; border: 0; background: transparent; border-radius: 11px;
  padding: 10px 14px; font-weight: 600; white-space: nowrap;
}
.dbtn:hover { background: var(--panel-2); }
.dbtn[aria-pressed="true"] { background: var(--panel-2); box-shadow: inset 0 0 0 1.5px var(--line); }
.dbtn.primary { background: var(--accent); color: var(--accent-ink); }
.dbtn.primary:hover { filter: brightness(1.06); }
.dbtn.icon { padding: 10px 11px; }

/* ---------- panel ---------- */
.panel {
  position: fixed; z-index: 30; background: var(--panel); color: var(--ink); box-shadow: var(--shadow);
  display: flex; flex-direction: column; min-width: 0;
  left: max(16px, env(safe-area-inset-left, 0px)); top: calc(env(safe-area-inset-top, 0px) + 92px);
  width: 360px; max-height: calc(100% - 200px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  border-radius: 16px;
}
.panel-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 14px 10px 18px; }
.panel-h h2 {
  margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 24px; letter-spacing: .02em; text-wrap: balance;
}
.x { border: 0; background: var(--panel-2); border-radius: 10px; width: 36px; height: 36px; display: grid; place-items: center; flex: none; }
.panel-b { overflow-y: auto; padding: 0 18px 18px; display: grid; gap: 14px; min-height: 0; }
.panel p { margin: 0; line-height: 1.45; color: var(--muted); }
.note { font-size: 13px; padding: 10px 12px; border-radius: 10px; background: var(--panel-2); color: var(--muted); line-height: 1.45; }

@media (max-width: 640px) {
  .panel {
    left: 0; right: 0; width: auto; top: auto; bottom: 0; border-radius: 18px 18px 0 0;
    max-height: 62%;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px);
  }
  .panel-h { padding-left: max(18px, env(safe-area-inset-left, 0px)); }
  .dbtn .lbl-long { display: none; }
  .dbtn { padding: 10px 11px; }
  .wordmark { font-size: 22px; }
  .envchip span.wx { display: none; }
  .livesw .lbl-long { display: none; }
  .envbox .envchip { padding: 9px 9px 9px 11px; }
  .livesw { padding: 9px 10px 9px 9px; }
}
@media (max-width: 380px) { .dbtn .lbl { display: none; } }

/* ---------- vyhledávání ---------- */
.search { position: relative; }
.search input {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; padding: 12px 12px 12px 40px; border-radius: 11px;
  border: 1.5px solid var(--line); background: var(--panel-2); color: var(--ink);
}
.search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.results { display: grid; gap: 4px; }
.res {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; text-align: left;
  border: 0; background: transparent; padding: 8px; border-radius: 10px; min-width: 0;
}
.res:hover, .res:focus-visible { background: var(--panel-2); }
.res .meta { min-width: 0; display: grid; }
.res .meta b { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.res .meta span { font-size: 12.5px; color: var(--muted); }
.res .gid { font-family: var(--font-display); font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.swatch { width: 14px; height: 14px; border-radius: 4px; box-shadow: 0 0 0 1.5px var(--line); flex: none; }

/* ---------- SPZ a smaltované cedulky ---------- */
.plate {
  display: inline-flex; align-items: stretch; background: var(--plate-bg); color: var(--plate-ink);
  border: 1.5px solid var(--plate-ink); border-radius: 5px; overflow: hidden; line-height: 1;
  font-family: var(--font-display); font-weight: 700; white-space: nowrap;
}
.plate .eu { background: var(--plate-blue); color: #FFFFFF; font-size: 9px; padding: 0 3px; display: grid; place-items: end center; padding-bottom: 2px; letter-spacing: .04em; }
.plate b { padding: 3px 6px 2px; font-size: 14px; letter-spacing: .04em; }
.plate.big { justify-self: start; }
.plate.big b { font-size: 22px; padding: 6px 10px 4px; }
.plate.big .eu { font-size: 11px; padding: 0 5px 3px; }
.enamel {
  display: inline-flex; flex-direction: column; align-items: center; background: var(--enamel); color: var(--enamel-ink);
  border-radius: 6px; padding: 3px 8px 4px; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .85), 0 0 0 1px var(--enamel);
  font-family: var(--font-display); line-height: 1.05; white-space: nowrap;
}
.enamel small { font-size: 10px; letter-spacing: .12em; opacity: .85; }
.enamel b { font-size: 13px; font-weight: 700; letter-spacing: .03em; }

#labels .tag { position: absolute; left: 0; top: 0; pointer-events: auto; cursor: pointer; will-change: transform; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .35)); }
#labels .tag.sel .plate { box-shadow: 0 0 0 3px var(--signal); }

/* ---------- karta auta ---------- */
.car-head { display: grid; gap: 8px; }
/* náhled auta vpravo vedle SPZ a názvu modelu (obrazek.js → carThumb) */
.car-head.has-thumb { grid-template-columns: minmax(0, 1fr) clamp(110px, 40%, 160px); column-gap: 6px; align-items: center; }
.car-head.has-thumb > :not(.car-thumb) { grid-column: 1; position: relative; z-index: 1; }   /* dlouhé jméno na SPZ přes obrázek */
.car-thumb { grid-column: 2; grid-row: 1 / span 2; width: 100%; height: auto; aspect-ratio: 300 / 190;
  margin: -10px -8px -6px 0; pointer-events: none; opacity: 0; transition: opacity .25s; }
.car-thumb.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .car-thumb { transition: none; } }
.car-model { font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1.05; letter-spacing: .01em; }
.car-model span { display: block; font-family: var(--font-body); font-weight: 400; font-size: 14px; color: var(--muted); letter-spacing: 0; margin-top: 2px; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0; }
.kv dt { color: var(--muted); font-size: 13px; }
.kv dd { margin: 0; font-weight: 600; display: flex; align-items: center; gap: 8px; min-width: 0; }
.state { display: inline-flex; align-items: center; gap: 6px; }
.state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.state.jede::before { background: #2EA44F; }
.state.v_garazi::before { background: var(--enamel); }
.state.nehoda::before { background: #E0362B; }
#labels .plate.crash { box-shadow: 0 0 0 2px #E0362B; }
#labels .plate.crash b::before { content: "! "; color: #E0362B; }
.row { display: flex; gap: 8px; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; gap: 7px; border: 1.5px solid var(--line); background: var(--panel);
  border-radius: 10px; padding: 9px 13px; font-weight: 600;
}
.btn:hover { background: var(--panel-2); }
.btn[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }

/* ---------- atributy auta do závodů ---------- */
.attrs { display: grid; gap: 7px; }
.attr { display: grid; grid-template-columns: 118px 1fr 28px; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; }
.attr .meter { position: relative; height: 8px; border-radius: 4px; background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); }
.attr .meter i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--accent); }
.attr .meter b { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--ink); opacity: .55; }
.attr .n { font-family: var(--font-display); font-weight: 700; font-size: 16px; text-align: right; font-variant-numeric: tabular-nums; }
.attr-stats { font-size: 13px; }
.panel p.attr-note { font-size: 12.5px; line-height: 1.4; }

/* ---------- řidič: XP a level ---------- */
.drv-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.drv-rank { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.xp-parts { list-style: none; margin: 2px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.xp-parts li { background: var(--panel); border-radius: 9px; padding: 7px 8px; display: grid; gap: 1px; min-width: 0; }
.xp-parts b { font-family: var(--font-display); font-weight: 800; font-size: 19px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.xp-parts b::after { content: " XP"; font-size: 12px; font-weight: 700; color: var(--muted); }
.xp-parts span { font-size: 12px; color: var(--muted); line-height: 1.25; }
.share { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1.5px dashed var(--line); }
.share > div { min-width: 0; }
.share b { display: block; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.top-list button { width: 100%; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto auto; gap: 8px; align-items: baseline; text-align: left;
  border: 0; background: transparent; border-radius: 8px; padding: 6px 8px; color: var(--ink); font: inherit; }
.top-list button:hover { background: var(--panel-2); }
.top-list .r { font-family: var(--font-display); font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
.top-list b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-list .lv { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.top-list .xp { font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.top-list li:nth-child(1) .r { color: #B38A1E; } .top-list li:nth-child(2) .r { color: #8A9096; } .top-list li:nth-child(3) .r { color: #A8692F; }
@media (max-width: 380px) { .xp-parts { grid-template-columns: 1fr 1fr; } }

/* ---------- úrovně ---------- */
.levels { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.levels li { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: baseline; padding: 8px 10px; border-radius: 10px; }
.levels li .n { font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--muted); font-variant-numeric: tabular-nums; }
.levels li .t b { font-weight: 600; display: block; }
.levels li .t span { font-size: 12.5px; color: var(--muted); }
.levels li .f { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.levels li.now { background: var(--panel-2); box-shadow: inset 3px 0 0 var(--signal); }
.levels li.now .n { color: var(--ink); }

/* ---------- obchod ---------- */
.shop { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.item { border: 1.5px dashed var(--line); border-radius: 12px; padding: 12px; display: grid; gap: 4px; min-width: 0; }
.item b { font-weight: 600; }
.item span { font-size: 12.5px; color: var(--muted); }
.item .pill { justify-self: start; margin-top: 4px; }

/* ---------- závody a síň slávy ---------- */
#labels .plate.race .eu { background: #17191D; min-width: 22px; text-align: center; }
#labels .plate.race.p1 .eu { background: #C9A23E; } #labels .plate.race.p2 .eu { background: #9AA0A6; } #labels .plate.race.p3 .eu { background: #B9773F; }
.place-tag { display: inline-block; font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
  background: rgba(23, 25, 29, .82); color: #F2C230; padding: 4px 9px; border-radius: 6px; white-space: nowrap; }
.race-now { margin: 0; font-size: 15px; }
.race-list { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
.race-list li b { display: block; font-size: 15px; }
.race-list li span { color: var(--muted); font-size: 13px; }
.race-list.win li:first-child b { color: #B38A1E; }

/* ---------- volné místo ---------- */
.enamel.free { justify-self: start; width: fit-content; background: #F2C230; color: #1d1d1d; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .85), 0 0 0 1px #F2C230; }
a.btn { text-decoration: none; color: inherit; }
.free-h { margin: 0; font-family: var(--font-display); font-size: 22px; line-height: 1.15; }

/* ---------- IZS ---------- */
.izs-badge { display: inline-block; width: fit-content; font-family: var(--font-display); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-size: 15px; padding: 6px 12px; border-radius: 8px; color: #fff; }
.izs-hasici { background: #C8231E; }
.izs-zachranka { background: #F2D21B; color: #1d2a12; box-shadow: inset 0 -4px 0 #2C8C3C; }
.izs-policie { background: #1C4FA3; box-shadow: inset 0 -4px 0 #C9E03A; }

/* ---------- úpravy auta a garáže ---------- */
.tune-state:empty { display: none; }
.tune-state { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-weight: 600; font-size: 14px; color: var(--muted); }
.tune-state .live-dot { width: 9px; height: 9px; border-radius: 50%; background: #2FB86A; box-shadow: 0 0 0 3px rgba(47, 184, 106, .25); }
.btn.sm { padding: 6px 12px; min-height: 34px; font-size: 13.5px; }
.cfg { display: grid; gap: 12px; padding-top: 2px; }
.cfg-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tier { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-display); font-weight: 700; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; }
.tier svg.i { width: 12px; height: 12px; stroke-width: 2.4; }
.tier.free { background: #DDF3E3; color: #1C6B36; }
.tier.prem { background: var(--signal); color: var(--signal-ink); }
.opt-row { display: grid; gap: 6px; }
.opt-row > span { font-weight: 600; font-size: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--line); background: var(--panel); border-radius: 999px; padding: 7px 12px; font-weight: 600; font-size: 13.5px; min-height: 36px; }
.chip:hover { background: var(--panel-2); }
.chip[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--panel-2); }
.chip .dot { width: 14px; height: 14px; border-radius: 50%; box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .18); flex: none; }
.chip.sw { padding: 7px 9px; }
.chip.sw .dot { width: 18px; height: 18px; }

/* ---------- čas a počasí ---------- */
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; background: var(--panel-2); padding: 4px; border-radius: 11px; }
.seg button { border: 0; background: transparent; border-radius: 8px; padding: 8px 4px; font-weight: 600; font-size: 13.5px; display: grid; justify-items: center; gap: 3px; }
.seg button[aria-pressed="true"] { background: var(--panel); box-shadow: 0 1px 3px rgba(0, 0, 0, .15); }
.seg.wx { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); }
.lbl-sm { font-family: var(--font-display); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 12px; color: var(--muted); }

/* ---------- načítání ---------- */
.loading {
  position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; background: var(--bg);
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.loading-in { display: grid; gap: 14px; justify-items: center; text-align: center; max-width: 320px; }
.loading .wordmark { font-size: 44px; }
.bar { width: 220px; max-width: 100%; height: 6px; border-radius: 3px; background: var(--panel-2); overflow: hidden; }
.bar i { display: block; height: 100%; width: 0%; background: var(--accent); transition: width .2s; }
.loading p { margin: 0; color: var(--muted); }
.gbar {
  position: fixed; left: 0; right: 0; z-index: 22; display: flex; justify-content: center; pointer-events: none;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 86px);
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
}
button.plate { padding: 0; cursor: pointer; }
button.enamel { border: 0; cursor: pointer; }
.gbar-in {
  pointer-events: auto; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px;
  background: var(--panel); border-radius: 16px; box-shadow: var(--shadow); padding: 6px 6px 6px 10px; max-width: 100%;
}
/* tlačítko Vejdi: dveře, které se po najetí (a jednou po otevření garáže) pootevřou a ukážou světlo uvnitř */
.door-btn { gap: 8px; padding: 7px 16px 7px 11px; font-family: var(--font-display); font-weight: 800; font-size: 20px; letter-spacing: .05em; text-transform: uppercase; }
.door-btn svg.door { width: 30px; height: 30px; flex: none; overflow: visible; }
.door .door-frame { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.door .door-glow { fill: #FFD98A; }
.door .door-leaf rect { fill: currentColor; }
.door .door-leaf circle { fill: var(--accent); }
.door .door-leaf { transform-box: fill-box; transform-origin: 0% 50%; transition: transform .35s cubic-bezier(.3, .7, .4, 1); }
.door-btn:hover .door-leaf, .door-btn:focus-visible .door-leaf { transform: scaleX(.4) skewY(-14deg); }
.gbar:not([hidden]) .door-btn .door-leaf { animation: door-hint 1.5s .9s 1 ease-in-out; }
@keyframes door-hint { 0%, 100% { transform: none; } 35%, 65% { transform: scaleX(.45) skewY(-12deg); } }
@media (prefers-reduced-motion: reduce) { .door .door-leaf { transition: none; animation: none !important; } }
.toast {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom, 0px) + 84px); z-index: 25;
  background: var(--ink); color: var(--panel); padding: 8px 14px; border-radius: 999px; font-weight: 600; font-size: 13.5px;
  pointer-events: none; opacity: 0; transition: opacity .25s; white-space: nowrap; max-width: calc(100% - 32px); overflow: hidden; text-overflow: ellipsis;
}
.toast.show { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .bar i, .toast { transition: none; } }

/* ---------- obchod: komiksové okno „Už brzy“, dokud je obchod zamčený ---------- */
.dbtn[data-panel="shop"] { position: relative; }
.dlock {
  position: absolute; top: -5px; right: -5px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  background: var(--signal); color: var(--signal-ink); box-shadow: 0 0 0 2px var(--panel);
}
.dlock svg.i { width: 12px; height: 12px; stroke-width: 2.6; }
.soon {
  --ink-c: #17191D; --paper: #FFFBEA; --sun: #F2C230;
  position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(rgba(23, 25, 29, .22) 1.2px, transparent 1.6px) 0 0 / 9px 9px, rgba(14, 21, 34, .42);
  opacity: 0; transition: opacity .18s ease;
}
.soon[hidden] { display: none; }
.soon.on { opacity: 1; }
.soon-card {
  position: relative; width: min(450px, 100%); max-height: calc(100% - 24px); display: flex; min-height: 0;
  background: var(--paper); color: var(--ink-c); border: 3px solid var(--ink-c); border-radius: 18px;
  box-shadow: 7px 7px 0 var(--ink-c); transform: rotate(-1deg) scale(.9); transition: transform .32s cubic-bezier(.2, 1.6, .4, 1);
}
.soon.on .soon-card { transform: rotate(-1deg) scale(1); }
.soon-card::before {
  content: ""; position: absolute; inset: 0; border-radius: 15px; pointer-events: none;
  background: radial-gradient(circle at 100% 0, rgba(242, 194, 48, .55) 1.4px, transparent 1.9px) 0 0 / 8px 8px;
  -webkit-mask: radial-gradient(circle at 100% 0, #000 0, transparent 55%); mask: radial-gradient(circle at 100% 0, #000 0, transparent 55%);
}
.soon-in { position: relative; overflow-y: auto; padding: 30px 20px 18px; display: grid; gap: 14px; min-height: 0; }
.soon-burst {
  position: absolute; left: -26px; top: -34px; width: 116px; height: 116px; display: grid; place-items: center; z-index: 2;
  transform: rotate(-12deg); pointer-events: none;
}
.soon-burst svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.soon-burst polygon { fill: var(--sun); stroke: var(--ink-c); stroke-width: 3.5; stroke-linejoin: round; }
.soon-burst span {
  position: relative; font-family: var(--font-display); font-weight: 800; font-style: italic; font-size: 21px; line-height: .9;
  text-transform: uppercase; text-align: center; width: 64px; color: var(--ink-c);
}
.soon-x {
  position: absolute; top: 10px; right: 10px; z-index: 3; width: 36px; height: 36px; display: grid; place-items: center;
  border: 2.5px solid var(--ink-c); border-radius: 10px; background: #FFFFFF; color: var(--ink-c); box-shadow: 2px 2px 0 var(--ink-c);
}
.soon-x svg.i { stroke-width: 2.6; }
.soon-head { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; padding-left: 66px; padding-right: 30px; }
.soon-head h2 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 28px; line-height: 1; text-transform: uppercase; text-wrap: balance; }
.soon-sub { margin: 4px 0 0; font-weight: 600; color: #3B4250; }
.soon-lock { width: 58px; height: 58px; transform-origin: 50% 20%; }
.soon.on .soon-lock { animation: soon-shake .7s .25s ease-in-out 1; }
.soon-lock svg { width: 100%; height: 100%; overflow: visible; }
.soon-lock .sh { fill: none; stroke: var(--ink-c); stroke-width: 6; stroke-linecap: round; }
.soon-lock .bd { fill: var(--sun); stroke: var(--ink-c); stroke-width: 3.5; }
.soon-lock .kh { fill: var(--ink-c); }
@keyframes soon-shake { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-12deg); } 40% { transform: rotate(10deg); } 60% { transform: rotate(-6deg); } 80% { transform: rotate(3deg); } }
.soon-meter { display: grid; gap: 6px; }
.soon-bar { height: 18px; border: 2.5px solid var(--ink-c); border-radius: 999px; background: #FFFFFF; overflow: hidden; }
.soon-bar i { display: block; height: 100%; border-right: 2.5px solid var(--ink-c); background: repeating-linear-gradient(-45deg, var(--sun) 0 8px, #E2AE12 8px 16px); }
.soon-count { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 14px; color: #3B4250; font-variant-numeric: tabular-nums; }
.soon-count b { font-family: var(--font-display); font-weight: 800; font-size: 22px; color: var(--ink-c); }
.soon-count > span:last-child { font-weight: 600; }
.soon .lbl-sm { color: #3B4250; }
.soon-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.soon-list li {
  display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: start; padding: 9px 10px; min-width: 0;
  border: 2px solid var(--ink-c); border-radius: 11px; background: #FFFFFF;
}
.soon-list svg.i { width: 16px; height: 16px; margin-top: 2px; stroke-width: 2.4; color: #8A7420; }
.soon-list b { display: block; font-weight: 600; font-size: 14px; line-height: 1.2; }
.soon-list small { display: block; font-size: 12px; line-height: 1.3; color: #5A6170; }
.soon-bubble {
  position: relative; margin: 2px 0 6px; padding: 10px 12px; border: 2.5px solid var(--ink-c); border-radius: 14px;
  background: #FFFFFF; font-size: 14px; line-height: 1.4; color: var(--ink-c);
}
.soon-bubble::after {
  content: ""; position: absolute; left: 28px; bottom: -11px; width: 16px; height: 16px; background: #FFFFFF;
  border-right: 2.5px solid var(--ink-c); border-bottom: 2.5px solid var(--ink-c); transform: rotate(45deg) skew(8deg, 8deg);
}
.soon-row { display: flex; }
.soon-btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 10px 16px;
  border: 2.5px solid var(--ink-c); border-radius: 12px; background: var(--sun); color: var(--ink-c); box-shadow: 3px 3px 0 var(--ink-c);
  font-family: var(--font-display); font-weight: 800; font-size: 19px; letter-spacing: .03em; text-transform: uppercase;
  transition: transform .08s ease, box-shadow .08s ease;
}
.soon-btn svg.i { stroke-width: 2.6; }
.soon-btn:hover { filter: brightness(1.05); }
.soon-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink-c); }
.soon-fine { margin: 0; font-size: 12.5px; line-height: 1.4; color: #5A6170; text-align: center; }
@media (max-width: 420px) {
  .soon-in { padding: 28px 16px 16px; }
  .soon-head { padding-left: 58px; padding-right: 26px; gap: 10px; }
  .soon-head h2 { font-size: 24px; }
  .soon-lock { width: 46px; height: 46px; }
  .soon-burst { width: 100px; height: 100px; left: -18px; top: -30px; }
  .soon-burst span { font-size: 18px; width: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .soon, .soon-card { transition: none; }
  .soon.on .soon-lock { animation: none; }
}

/* úrovně: přepínač na víc řádků, ukazatel postupu města (ostrý web) */
.seg.lv { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); }
.lvl-now { padding: 12px; border-radius: 12px; background: var(--panel-2); display: grid; gap: 6px; }
.lvl-now > b { font-family: var(--font-display); font-weight: 800; font-size: 22px; }
.lvl-now p { margin: 0; font-size: 14px; }
.lvl-bar { height: 10px; border-radius: 6px; background: rgba(0, 0, 0, .1); overflow: hidden; }
.lvl-bar span { display: block; height: 100%; background: var(--signal); border-radius: 6px; }

/* ---------- obrázek do stories: okno s náhledem ---------- */
.share { flex-wrap: wrap; }
.share > div:first-child { flex: 1 1 150px; }
.share-btns { display: flex; gap: 6px; flex-shrink: 0; margin-left: auto; }
.story {
  position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: 16px;
  background: rgba(14, 21, 34, .5);
}
.story[hidden] { display: none; }
.story-card {
  width: min(400px, 100%); max-height: 100%; overflow-y: auto; display: grid; gap: 12px; padding: 14px 16px 16px;
  background: var(--panel); color: var(--ink); border-radius: 16px; box-shadow: var(--shadow);
}
.story-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.story-h h2 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 24px; text-transform: uppercase; }
.story-img {
  aspect-ratio: 9 / 16; max-height: 58vh; width: auto; justify-self: center; border-radius: 12px; overflow: hidden;
  display: grid; place-items: center; background: linear-gradient(#8FBDE3, #F4F7FA); color: #18202C; font-weight: 600;
}
.story-img img { display: block; width: 100%; height: 100%; object-fit: contain; }
.story .row { display: flex; gap: 8px; }
.story .row .btn { flex: 1; justify-content: center; text-decoration: none; }
.story .btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.story .note { margin: 0; }