/* HBL BETS – prezentační demo (dark + HBL pink, Barlow) */
:root {
  --bg: #050505;
  --surface: #111111;
  --surface2: #0c0c0c;
  --border: #1a1a1a;
  --text: #ffffff;
  --text-muted: #8a8a8a;
  --accent: #FF1F5A;
  --accent-glow: rgba(255, 31, 90, .35);
  --accent-dim: rgba(255, 31, 90, .18);
  --success: #22c55e;
  --danger: #ef4444;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--bg); color: var(--text); font: 14px/1.45 "Barlow", "Segoe UI", Arial, sans-serif; padding-bottom: 64px; }

/* ---------- hlavička: styly dodává site-header.css + nav.css (kopie z webu).
   Tady jen: pojistka na logo, aktivní stav WATCH LIVE a offset obsahu. ---------- */
/* pojistka: kdyby styl hlavičky selhal, logo se nikdy nevykreslí přes obrazovku
   (:where = nulová specificita, skutečný styl webu ji vždy přebije) */
:where(.nav-logo) img { height: 64px; width: auto; }
/* aktivní stav WATCH LIVE — návštěvník je v této sekci */
.nav .nav-cta.nav-cta-active { background: var(--pink, #FF1F5A); color: #fff;
  box-shadow: 0 0 26px rgba(255,31,90,.45), 0 4px 18px rgba(0,0,0,.28); }
.nav .nav-cta.nav-cta-active .live-dot { background: #fff; box-shadow: 0 0 6px rgba(255,255,255,.9); }


/* ---------- layout ---------- */
.layout { display: grid; grid-template-columns: 59% 1fr; gap: 12px; max-width: 1240px;
  margin: calc(var(--nav-h, 100px) + 12px) auto 0; padding: 0 14px; align-items: start; }
main { display: flex; flex-direction: column; gap: 10px; }
.side { display: flex; flex-direction: column; gap: 10px;
  position: sticky; top: calc(var(--nav-h, 100px) + 12px); }

/* ---------- hero (scoreboard karta) ---------- */
.hero { background: #0a0a0c; position: relative;
  border: 1px solid rgba(255,255,255,.07); border-radius: 10px; padding: 16px 18px 14px; }

.hero-main { display: grid; grid-template-columns: 1fr auto auto auto 1fr; align-items: center; gap: 14px; margin-top: 0; }
.hero-side-info { align-self: center; }
.hero-side-info.right { text-align: right; }
.hero-name { font-family: "Barlow Condensed", sans-serif; font-size: 30px; font-weight: 800; letter-spacing: .5px; white-space: nowrap; }
/* symbol podani (pálka) pod jménem, vycentrovaný. Pevná výška i skrytý
   -> pri prepnuti se nic neposune. */
.serve-below { height: 46px; margin-top: 6px; display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .3s ease; }
.serve-below .paddle { width: 40px; height: 40px; color: var(--accent);
  filter: drop-shadow(0 0 8px var(--accent-glow)); }
.serve-below.on { opacity: 1; }
.hero-score { font-family: "Barlow Condensed", sans-serif; font-size: 48px; font-weight: 800; line-height: 1;
  background: rgba(5,5,5,.55); border: 1px solid var(--border); border-radius: 10px; padding: 8px 22px; min-width: 150px; text-align: center;
  font-variant-numeric: tabular-nums; }
.hero-colon { color: var(--accent); margin: 0 8px; }

/* postavy hráček — ukotvené ke spodní linii řádku, ořez od stehen, fade dolů */
.fighter { align-self: end; height: 200px; overflow: hidden; display: flex; align-items: flex-start; justify-content: center;
  -webkit-mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
  filter: brightness(1); transition: filter 2s ease-out; }
.fighter.lit { filter: brightness(1.2); transition: none; }
.pphoto { height: 300px; width: auto; display: block; }
.fighter.mirrored .pphoto { transform: scaleX(-1); }

/* fallback siluety (když fotka hráčky neexistuje) */
.sil { height: 100px; width: auto; color: var(--accent); opacity: .8; align-self: center; margin-top: 40px; }
.sil.mirror { transform: scaleX(-1); }

/* indikátor setu + sety pod skóre */
.hero-sub { text-align: center; margin-top: 8px; font-size: 14px; color: var(--text-muted); }
.hero-sub #sb-set-label { color: var(--accent); font-weight: 800; letter-spacing: .5px; }
.hero-sub-dot { margin: 0 6px; opacity: .5; }
.hero-sub b { color: var(--text); font-size: 15px; }

/* tabulka setů uvnitř hero — plynulé zobrazení od prvního bodu */
.hero-sets { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .6s ease, opacity .6s ease; margin-top: 0; }
.hero-sets.visible { max-height: 130px; opacity: 1; margin-top: 10px; }

/* ---------- trhy ---------- */
#markets { display: flex; flex-direction: column; gap: 6px; transition: opacity .15s; }
/* krátké naznačení „kurzy se přepočítávají" – ale klik NEblokujeme (jinak občas propadne) */
#markets.suspended { opacity: .6; }
.market { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.mkt-title { padding: 5px 12px; font-weight: 700; font-size: 12px; color: var(--text-muted); background: var(--surface2); letter-spacing: .3px; text-transform: uppercase; }
.mkt-body { display: flex; flex-wrap: wrap; gap: 5px; padding: 6px 10px; }
.mkt-body.mkt-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); }
.mkt-body.mkt-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); }
.odd { flex: 1 1 140px; display: flex; justify-content: space-between; align-items: center; gap: 8px;
  background: var(--surface2); border: 1px solid var(--border); color: var(--text);
  padding: 6px 10px; border-radius: 6px; cursor: default; font: inherit; transition: background-color .15s, border-color .15s; position: relative; }
.odd:hover:not(:disabled) { background-color: #181818; border-color: var(--accent); }
.odd:disabled { opacity: .45; }
.odd-label { color: var(--text); font-size: 13px; font-weight: 600; text-align: left; }
.odd-right { display: flex; align-items: center; gap: 2px; }
.val { font-weight: 800; font-size: 15px; color: var(--accent); font-variant-numeric: tabular-nums; transition: color 2.5s ease-out; }
.lock { opacity: .7; font-size: 12px; }
.mkt-closed { color: var(--text-muted); font-style: italic; padding: 3px 2px; font-size: 13px; }
.mkt-closed .lock { margin-right: 6px; }

/* pohyb kurzů — okamžitý nástup barvy, plynulé odeznění 2,5 s */
.odd.odds-up   { background-color: rgba(34,197,94,.25);  transition: background-color 0s; }
.odd.odds-down { background-color: rgba(239,68,68,.25); transition: background-color 0s; }
.odd.odds-up .val   { color: var(--success); transition: color 0s; }
.odd.odds-down .val { color: var(--danger);  transition: color 0s; }
.odd.odds-fade { transition: background-color 2.5s ease-out, border-color .15s; }
.odd.odds-fade .val { transition: color 2.5s ease-out; }

/* šipka: pevné místo (neposouvá layout), fade-in/out přes opacity */
.arr { display: inline-block; width: 14px; text-align: center; font-size: 11px; font-weight: 800;
  opacity: 0; transition: opacity .5s ease; }
.arr.show { opacity: 1; }
.arr.up { color: var(--success); } .arr.down { color: var(--danger); }

/* ---------- video ---------- */
.stream { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.stream-title { background: var(--surface2); padding: 7px 12px; font-weight: 700; font-size: 13px;
  display: flex; align-items: center; gap: 10px; }
/* jediný LIVE badge na stránce — růžový, pulsující, u streamu */
#live-badge { display: inline-flex; align-items: center; gap: 6px;
  background: var(--accent); color: #fff; font-size: 11px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; padding: 2px 9px; border-radius: 3px;
  box-shadow: 0 0 12px var(--accent-glow); animation: livepulse 2s ease-in-out infinite; }
#live-badge .live-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: #fff;
  box-shadow: 0 0 6px rgba(255,255,255,.9); }
#live-badge.ended { background: var(--text-muted); animation: none; box-shadow: none; }
#live-badge.ended .live-badge-dot { box-shadow: none; }
@keyframes livepulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .6; transform: scale(.96); } }
.stream-body { aspect-ratio: 16/9; background: #000; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 13px; position: relative; }
.stream-body video, .stream-body iframe, #yt-player, #yt-wrap { width: 100%; height: 100%; position: absolute; inset: 0; border: 0; }
#stream-fallback { position: relative; z-index: 1; text-align: center; flex-direction: column; gap: 8px; }
.fallback-play { width: 54px; height: 54px; border-radius: 50%; background: var(--surface2); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; color: var(--accent); font-size: 20px; margin: 0 auto; }

/* ---------- tabulka setů (prémiová, uvnitř hero) ---------- */
.sets-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sets-table th, .sets-table td { padding: 5px 8px; text-align: center; }
.sets-table td { border-bottom: 1px solid rgba(255,255,255,.07); font-variant-numeric: tabular-nums; font-size: 15px; color: var(--text-muted); }
.sets-table tr:last-child td { border-bottom: 0; }
.sets-table th { color: var(--text-muted); font-size: 11px; font-weight: 700; letter-spacing: .5px; }
.sets-table td.pcell { text-align: left; font-weight: 600; font-size: 13px; color: var(--text); min-width: 110px; }
/* pálka podani PRED jmenem v tabulce — pevne misto (8px gap), at se sloupce nehybou */
.serve-paddle { display: inline-block; width: 16px; height: 16px; margin-right: 8px;
  color: var(--accent); vertical-align: middle; opacity: 0; transition: opacity .3s ease; }
.serve-paddle .paddle { width: 16px; height: 16px; display: block; }
.serve-paddle.on { opacity: 1; }
/* sloupec Sety — nadřazený bodovým sloupcům, oddělený vlasovou linkou */
.sets-table th.th-sets { border-right: 1px solid rgba(255,255,255,.08); }
.sets-table td.sets-cell { font-size: 17px; font-weight: 800; color: #d6d6d6;
  border-right: 1px solid rgba(255,255,255,.08); }
.sets-table td.sets-cell.lead { color: var(--accent); }
.sets-table .dim { opacity: .3; }
.sets-table .win { color: var(--text); font-weight: 700; }
/* aktuální set = svislý pill přes hlavičku i obě buňky */
.sets-table th.cur { background: rgba(255,31,90,.14); border-radius: 8px 8px 0 0; color: var(--accent); }
.sets-table tr:first-child td.cur { background: rgba(255,31,90,.14); }
.sets-table tr:last-child  td.cur { background: rgba(255,31,90,.14); border-radius: 0 0 8px 8px; }
.sets-table td.cur { color: var(--text); font-weight: 800; border-bottom-color: transparent; }

/* ---------- lišta simulace ---------- */
.simbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; align-items: center; gap: 8px; padding: 9px 18px;
  background: rgba(5,5,5,.96); border-top: 1px solid var(--border); backdrop-filter: blur(4px); }
.simbar-label { font-family: "Barlow Condensed", sans-serif; font-weight: 800; letter-spacing: 1px; font-size: 14px; color: var(--accent); margin-right: 6px; white-space: nowrap; }
.simbar button { background: var(--surface2); border: 1px solid var(--border); color: var(--text); border-radius: 5px; padding: 5px 12px; cursor: pointer; font: inherit; }
.simbar .spd.on { border-color: var(--accent); color: var(--accent); font-weight: 700; }
.spd-group { display: inline-flex; gap: 8px; }
#progress { flex: 1; accent-color: var(--accent); }
#clock { color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* ---------- přechodová karta ---------- */
#transition { position: fixed; inset: 0; background: rgba(5,5,5,.92); display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .4s; z-index: 50; }
#transition.show { opacity: 1; pointer-events: auto; }
/* broadcast-grade popup: jen jemný růžový outer glow, žádné vnitřní efekty */
.tr-card { text-align: center; padding: 30px 64px 36px; border: 1px solid rgba(255,31,90,.30); border-radius: 18px;
  background: #0a0a0c; box-shadow: 0 0 40px rgba(255,31,90,.30); }
/* NEXT MATCH label + tenké růžové podtržení */
.tr-next { font-family: "Barlow Condensed", sans-serif; color: var(--accent); font-weight: 800; letter-spacing: 4px; font-size: 15px; text-transform: uppercase; }
.tr-next::after { content: ""; display: block; width: 48px; height: 2px; background: var(--accent); border-radius: 1px; margin: 8px auto 0; }
/* fotky dominují, VS čistý text mezi nimi */
.tr-versus { display: flex; align-items: center; justify-content: center; gap: 40px; margin: 26px 0 22px; }
.tr-col { display: flex; flex-direction: column; align-items: center; }
.tr-fig { height: 260px; display: flex; align-items: flex-end; justify-content: center;
  -webkit-mask-image: linear-gradient(to bottom, black 86%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 86%, transparent 100%); }
.tr-photo { height: 260px; width: auto; display: block; }
.tr-fig.mirror .tr-photo { transform: scaleX(-1); }
.tr-sil { height: 170px; width: 128px; color: var(--accent); align-self: flex-end; }
.tr-sil.mirror { transform: scaleX(-1); }
.tr-vs { align-self: center; font-family: "Barlow Condensed", sans-serif; font-weight: 800; font-size: 88px; line-height: 1; color: var(--accent); }
/* jména pod fotkami + krátké růžové podtržení */
.tr-name { font-family: "Barlow Condensed", sans-serif; font-size: 26px; font-weight: 700; color: #fff; text-transform: uppercase; letter-spacing: 1px; margin-top: 14px; }
.tr-name::after { content: ""; display: block; width: 34px; height: 2px; background: var(--accent); border-radius: 1px; margin: 8px auto 0; }
/* odpočet přímo na pozadí (bez rámečku/boxu) */
.tr-count-wrap { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 20px; }
.tr-count-label { font-family: "Barlow Condensed", sans-serif; color: #fff; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; font-size: 21px; }
#tr-count { font-family: "Barlow Condensed", sans-serif; color: var(--accent); font-weight: 800; font-size: 72px; line-height: 1; }
.tr-count-s { color: var(--text-muted); font-size: 20px; }

/* ---------- responsive: stack do jednoho sloupce (tablet/mobil) ---------- */
@media (max-width: 900px) {
  /* jeden sloupec přes celou šířku. align-items:stretch je KLÍČOVÉ – bez něj by
     se karty (kvůli dědičnému align-items:start z desktop gridu) smrskly na šířku
     obsahu a vlevo → prázdný pruh vpravo. */
  .layout { display: flex; flex-direction: column; align-items: stretch;
    grid-template-columns: none; max-width: 100%; }
  main, .side { display: contents; }
  .hero, .stream, #markets, .betslip { width: 100%; max-width: 100%; }
  .hero { order: 1; }
  .stream { order: 2; }              /* na mobilu NENÍ sticky – teče mezi skóre a trhy */
  #markets { order: 3; }
  .betslip { order: 4; }
  /* prechodova karta: mensi fotky, VS ~48px, cislo dominuje */
  .tr-card { padding: 20px 5vw 26px; max-width: 92vw; }
  .tr-versus { gap: 18px; margin: 16px 0 14px; }
  .tr-fig { height: 150px; }
  .tr-photo { height: 150px; }
  .tr-sil { height: 105px; width: 78px; }
  .tr-vs { font-size: 48px; }
  .tr-name { font-size: 19px; margin-top: 10px; }
  .tr-count-wrap { gap: 10px; margin-top: 14px; }
  .tr-count-label { font-size: 15px; letter-spacing: 2px; }
  #tr-count { font-size: 52px; }
  .tr-count-s { font-size: 16px; }
}

/* ---------- telefon (≤640): prémiový scoreboard + spodní sheet ---------- */
@media (max-width: 640px) {
  body { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }
  .layout { padding: 0 12px; gap: 20px; }

  /* --- scoreboard: fotky vedle sebe, skóre pod nimi (žádné kruhové avatary) --- */
  .hero { padding: 12px 12px 14px; }
  .hero-main { grid-template-columns: 1fr 1fr;
    grid-template-areas: "figa figb" "namea nameb" "score score";
    column-gap: 10px; row-gap: 2px; margin-top: 6px; align-items: end; }
  #fig-a { grid-area: figa; } #fig-b { grid-area: figb; }
  .hero-side-info { grid-area: namea; text-align: center; align-self: start; }
  .hero-side-info.right { grid-area: nameb; text-align: center; }
  .hero-score { grid-area: score; justify-self: center; margin-top: 6px;
    font-size: 52px; min-width: 0; padding: 2px 20px; background: transparent; border: 0; }
  .hero-colon { margin: 0 6px; }

  /* fotky ~55–60 % výšky karty, hlava nahoře, měkký fade ~40px dole */
  .fighter { align-self: end; height: 176px; width: 100%; border: 0; border-radius: 0;
    overflow: hidden; display: flex; align-items: flex-start; justify-content: center;
    -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 78%, transparent 100%); }
  .pphoto { height: 264px; width: auto; max-width: 150%; margin-top: 0; object-fit: cover; object-position: center top; }
  .sil { height: 120px; margin-top: 24px; }

  /* jména menší, pálka pod jménem (rezervované místo pod oběma → nic se neposune) */
  .hero-name { font-size: 18px; white-space: normal; }
  .serve-below { height: 30px; margin-top: 4px; }
  .serve-below .paddle { width: 26px; height: 26px; }
  .hero-sub { margin-top: 4px; }

  /* --- tabulka setů: jméno + Sety fixní vlevo, sloupce 1–5 scrollují --- */
  .hero-sets.visible { max-height: 160px; }
  .hero-sets { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .sets-table td.pcell, .sets-table thead th:first-child {
    position: sticky; left: 0; z-index: 2; background: #0a0a0c; min-width: 92px; width: 92px; }
  .sets-table td.sets-cell, .sets-table th.th-sets {
    position: sticky; left: 92px; z-index: 2; background: #0a0a0c; }

  /* --- lišta simulace: kompaktní ~44px, bez popisku --- */
  .simbar { gap: 6px; padding: 7px 10px calc(7px + env(safe-area-inset-bottom)); }
  .simbar-label { display: none; }
  .simbar button { padding: 5px 10px; font-size: 13px; }
  .spd-group { gap: 0; }
  .spd-group .spd { border-radius: 0; border-left-width: 0; padding: 5px 8px; font-size: 12px; }
  .spd-group .spd:first-child { border-radius: 5px 0 0 5px; border-left-width: 1px; }
  .spd-group .spd:last-child { border-radius: 0 5px 5px 0; }
  #clock { font-size: 12px; }

  /* --- tiket na mobilu ÚPLNĚ pryč (žádný strip / sheet / plovoucí tlačítko) --- */
  #bs-tab, #bs-backdrop, .betslip { display: none !important; }
}

/* ---------- Vysouvací tiket (demo) ---------- */
/* kurz jde vybrat jen když není uzamčený */
.odd:not(:disabled) { cursor: pointer; }
.odd.selected { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent-glow), 0 0 16px var(--accent-dim); }

/* tiket žije v pravém sloupci pod streamem; nikdy neplave přes obsah */
.betslip { position: relative; background: #0c0c10; border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 8px 30px rgba(0,0,0,.35); color: var(--text); overflow: hidden; }

.bs-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  border-bottom: 1px solid var(--border); background: linear-gradient(180deg, var(--accent-dim), transparent); }
.bs-title { font-family: "Barlow Condensed", sans-serif; font-weight: 800; text-transform: uppercase;
  letter-spacing: 1px; font-size: 17px; }
.bs-demo { font-size: 10px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px; background: var(--accent-dim); border: 1px solid var(--accent); color: #ff7aa3; }

/* prázdný stav: panel zůstává, layout se nehýbe */
.bs-empty { padding: 20px 16px; text-align: center; font-size: 13px; color: var(--text-muted); }
.betslip.has-sel .bs-empty { display: none; }
.betslip:not(.has-sel) .bs-body { display: none; }

.bs-body { padding: 14px; }
.bs-sel { background: var(--surface2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.bs-sel-top { display: flex; align-items: center; }
.bs-market { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); }
.bs-remove { margin-left: auto; background: none; border: none; color: #6a6a72; font-size: 16px; line-height: 1; cursor: pointer; }
.bs-remove:hover { color: var(--accent); }
.bs-sel-row { display: flex; align-items: baseline; justify-content: space-between; margin-top: 4px; }
.bs-pick { font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 20px; }
.bs-odd-wrap { display: inline-flex; align-items: baseline; gap: 4px; }
.bs-odd { font-family: "Barlow Condensed", sans-serif; font-weight: 800; font-size: 22px; color: var(--accent);
  font-variant-numeric: tabular-nums; transition: color 2s ease-out; }
/* flash při změně kurzu: okamžitý nástup barvy → plynulé odeznění (jako v gridu) */
.bs-odd.bs-up   { color: var(--success); transition: color 0s; }
.bs-odd.bs-down { color: var(--danger);  transition: color 0s; }
.bs-odd.bs-fade { transition: color 2s ease-out; }
/* šipka ▲/▼ v tiketu: pevné místo, fade-in/out */
.bs-arr { display: inline-block; width: 13px; text-align: center; font-size: 12px; font-weight: 800;
  opacity: 0; transition: opacity .5s ease; }
.bs-arr.show { opacity: 1; }
.bs-arr.up { color: var(--success); }
.bs-arr.down { color: var(--danger); }
.bs-closed-msg { display: none; margin-top: 6px; font-size: 12px; font-style: italic; color: var(--text-muted); }
.betslip.sel-closed .bs-closed-msg { display: block; }

.bs-stake { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; font-size: 13px; color: #c9c9d0; }
.bs-input-wrap { display: flex; align-items: center; background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 4px 10px; }
.bs-cur { color: var(--text-muted); margin-right: 4px; }
#bs-stake { width: 74px; background: none; border: none; color: var(--text);
  font-family: "Barlow Condensed", sans-serif; font-weight: 700; font-size: 18px; text-align: right; outline: none; }
#bs-stake::-webkit-outer-spin-button, #bs-stake::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.bs-chips { display: flex; gap: 6px; margin-top: 10px; }
.bs-chip { flex: 1; padding: 6px 0; border-radius: 7px; border: 1px solid var(--border);
  background: var(--surface2); color: #c9c9d0; font: inherit; font-weight: 600; font-size: 13px; cursor: pointer; transition: .15s; }
.bs-chip:hover { border-color: var(--accent); color: var(--text); }

.bs-payout { display: flex; align-items: center; justify-content: space-between; margin-top: 14px;
  padding-top: 12px; border-top: 1px solid var(--border); font-size: 13px; color: #c9c9d0; }
.bs-pay { font-family: "Barlow Condensed", sans-serif; font-weight: 800; font-size: 20px; color: var(--text); font-variant-numeric: tabular-nums; }

/* notice „Odds changed" – vysune se na ~5 s po změně kurzu, pak odezní */
.bs-changed { max-height: 0; opacity: 0; overflow: hidden; text-align: center;
  font-size: 11px; font-weight: 600; letter-spacing: .3px; color: var(--accent);
  transition: opacity .4s ease, max-height .4s ease, margin-top .4s ease; margin-top: 0; }
.bs-changed.show { max-height: 20px; opacity: 1; margin-top: 10px; }

.bs-place { width: 100%; margin-top: 12px; padding: 12px; border: none; border-radius: 9px;
  background: linear-gradient(180deg, #ff2f66, #e00c47); color: #fff;
  font-family: "Barlow Condensed", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: 16px; cursor: pointer; transition: .15s; }
.bs-place:hover { filter: brightness(1.08); }
.bs-place:disabled { opacity: .4; cursor: not-allowed; filter: none; }
.bs-note { text-align: center; margin-top: 9px; font-size: 10.5px; letter-spacing: .5px; color: #6a6a72; text-transform: uppercase; }

.bs-confirm { display: none; position: absolute; inset: 0; background: #0c0c10;
  flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; }
.bs-confirm.show { display: flex; animation: bsPop .3s ease; }
.bs-check { width: 54px; height: 54px; border-radius: 50%; background: linear-gradient(180deg, #ff2f66, #e00c47);
  color: #fff; font-size: 30px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 26px var(--accent-glow); }
.bs-conf-title { font-family: "Barlow Condensed", sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; font-size: 22px; margin-top: 14px; }
.bs-conf-sub { font-size: 13px; color: #c9c9d0; margin-top: 6px; }
.bs-conf-demo { font-size: 10.5px; text-transform: uppercase; letter-spacing: 1px; color: #6a6a72; margin-top: 14px; }
@keyframes bsPop { from { transform: scale(.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ---------- mobilní prvky (default skryté na desktopu) ---------- */
/* unmute tlačítko v rohu streamu (desktop i mobil; iOS Safari autoplay = jen muted) */
.stream-mute { display: flex; position: absolute; z-index: 2; right: 8px; bottom: 8px;
  width: 34px; height: 34px; border-radius: 50%; align-items: center; justify-content: center;
  background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.22); color: #fff; font-size: 15px;
  cursor: pointer; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }

/* play overlay – když OS/prohlížeč zablokuje i muted autoplay (žádný prázdný černý blok) */
.stream-play { display: none; position: absolute; z-index: 2; inset: 0; margin: auto;
  width: 60px; height: 60px; border-radius: 50%; align-items: center; justify-content: center;
  background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.25); color: #fff; font-size: 24px;
  cursor: pointer; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.stream-play.show { display: flex; }

/* drag handle sheetu */
.bs-handle { display: none; width: 40px; height: 4px; border-radius: 2px;
  background: #3a3a42; margin: 8px auto 2px; }

/* ztmavení pozadí pod sheetem */
#bs-backdrop { display: none; position: fixed; inset: 0; z-index: 47;
  background: rgba(0,0,0,.5); opacity: 0; pointer-events: none; transition: opacity .25s ease; }
#bs-backdrop.show { opacity: 1; pointer-events: auto; }

/* spodní tab: prázdný stav / souhrn výběru (sedí nad lištou simulace) */
.bs-tab { display: none; position: fixed; left: 0; right: 0; z-index: 46;
  bottom: calc(44px + env(safe-area-inset-bottom));
  align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 14px;
  border: 0; border-top: 1px solid var(--border); background: #0c0c10; color: var(--text-muted);
  font: inherit; font-size: 13px; cursor: default; }
.bs-tab.has { color: var(--text); cursor: pointer;
  background: linear-gradient(180deg, var(--accent-dim), #0c0c10); }
.bs-tab .bs-tab-strong { color: var(--accent); font-weight: 700; }
.bs-tab .bs-tab-cta { color: var(--accent); font-weight: 700; }
.bs-tab .bs-tab-dot { opacity: .4; }
.bs-tab.pulse { animation: tabPulse .28s ease; }
@keyframes tabPulse { 0% { transform: translateY(7px); } 60% { transform: translateY(-2px); } 100% { transform: translateY(0); } }