/* OwlCount — mobilní vrstva.
 *
 * ZÁSADA: na počítači se nesmí změnit nic. Všechno je proto uvnitř
 * @media dotazů a desktop si drží současnou podobu beze zbytku.
 *
 * REFERENČNÍ ZAŘÍZENÍ: iPhone 15 Pro (393 × 852 CSS px). Testováno navíc
 * na 360 px (nejběžnější Android), 320 px (staré iPhone SE) a 430 px
 * (iPhone Pro Max). Nikde se nesmí rolovat do stran.
 *
 * SPODNÍ ODSAZENÍ
 * ---------------
 * Kdyby se někdy dole objevil lepivý pruh, přepíše se --oc-spodek a obsah
 * i lepivá tlačítka kalkulačky se samy posunou. Dokud je 0, nic se neděje.
 */

:root{ --oc-spodek:0px; }

/* Tlačítko nabídky patří jen na mobil. Bez tohohle výchozího skrytí by
   vykouklo i na počítači — v @media se jen zapíná. */
/* Přepínač staví mobile.js do DOM na všech šířkách, takže výchozí stav
   musí být skryto — jinak vykoukne i na počítači. */
.nav-prepinac{ display:none; }

/* ============ DVOJÍ ZNĚNÍ TEXTU ============
 *
 * Některé popisky, které se na počítači čtou hezky, jsou na 393 px prostě
 * moc dlouhé — rozbijí řádek, sešrotují sousedy nebo se zalomí doprostřed
 * slova. Nejde jen zmenšit písmo: pod 12 px už se to na telefonu nečte.
 *
 * POUŽITÍ
 *   <span class="oc-pc">Ještě si chci procvičit</span>
 *   <span class="oc-mob">Procvičit znovu</span>
 *
 * Obě znění stojí v HTML, CSS ukáže to, které se hodí. Proč zrovna takhle:
 *
 *   - Žádný JavaScript. Přetočení telefonu i změna okna se projeví okamžitě
 *     a nic se nemusí překreslovat. Zásadní ve škole a trenažérech, kde si
 *     rozhraní staví JS sám a přepsané texty by při každém překreslení
 *     zmizely.
 *   - Písmo se dědí. Kdyby se text podstrkoval přes ::before, musela by se
 *     u každého výskytu ručně dopsat velikost i barva.
 *   - display:none skrývá i pro odečítače obrazovky, takže se druhá varianta
 *     nikdy nepřečte dvakrát.
 *
 * Pro celé bloky (odstavce, položky seznamu) se přidá .oc-blok, aby se
 * varianta vrátila na display:block místo inline.
 *
 * Hranice je 760 px — stejná, na které se přepíná celý zbytek mobilní vrstvy.
 */
.oc-mob{ display:none !important; }
@media(max-width:760px){
  .oc-pc{ display:none !important; }
  .oc-mob{ display:inline !important; }
  .oc-mob.oc-blok{ display:block !important; }
}

/* Vodorovné rolování se nesmí objevit nikde a za žádných okolností. */
@media(max-width:760px){
  html,body{ max-width:100%; overflow-x:hidden; }
  body{ padding-bottom:var(--oc-spodek); }

  /* ============ HLAVIČKA ============
     Nabídka se na mobilu vysype pod tlačítko místo do tří řádků. Dřív
     zabírala 187 px, tedy 22 % obrazovky, jen sama o sobě. */
  .nav{ padding:9px 14px; gap:10px; flex-wrap:nowrap; position:relative; }
  .brand{ font-size:15px; gap:7px; min-width:0; }
  .brand-logo{ width:24px; height:24px; }
  .brand .chip{ display:none; }

  .nav-prepinac{
    display:flex; align-items:center; justify-content:center;
    /* 44 px je nejmensi cil, ktery se da spolehlive trefit prstem. */
    width:44px; height:44px; flex:0 0 auto;
    background:var(--btn-bg); border:1px solid var(--border);
    border-radius:9px; color:var(--text); cursor:pointer;
    font-size:17px; line-height:1; padding:0;
  }
  .nav-prepinac[aria-expanded="true"]{ background:var(--btn-bg-hover); }

  /* Původní lišta odkazů se na mobilu nepoužívá — obsah se přenese
     do vysouvacího panelu (assets/mobile.js). */
  .nav-links{ display:none !important; }
  .nav-tools{ flex:0 0 auto; }
  .age-badge{ width:26px; height:26px; font-size:10px; }

  /* ============ TEXTOVÉ STRÁNKY ============ */
  .page{ padding:24px 16px 44px; }
  .page h1{ font-size:24px; line-height:1.22; }
  .page h2{ font-size:18px; margin:30px 0 10px; padding-top:18px; }
  .page h3{ font-size:16px; }
  /* 16 px je spodní mez běžného textu na telefonu — pod ní se čte hůř a
     u formulářových polí navíc Safari na iOS stránku sám přiblíží.
     Držíme ji všude, ať se text nikde neláme na dvě různé velikosti. */
  .page p,.page li{ font-size:16px; }
  .page .lead{ font-size:17px; }
  .page ul,.page ol{ margin-left:18px; }

  /* ============ TABULKY ============
     Úzké tabulky se jen stáhnou. Široké (5+ sloupců) se rozpadnou na
     kartičky — viz assets/mobile.js, který jim doplní popisky sloupců.
     Rolovat do stran nemusí ani jedna. */
  .page table:not(.strat-table):not(.card-table){ font-size:13px; }
  .page th,.page td{ padding:7px 9px; }
  .page th{ font-size:10.5px; letter-spacing:.5px; }

  table.oc-karty{ border:none !important; background:none !important; }
  table.oc-karty thead{ display:none; }
  table.oc-karty tr{
    display:block; margin:0 0 10px;
    border:1px solid var(--border); border-radius:12px;
    background:var(--panel); overflow:hidden;
  }
  table.oc-karty td{
    display:flex; justify-content:space-between; gap:12px;
    padding:8px 12px; border:none; border-bottom:1px solid rgba(255,255,255,.05);
    font-size:13.5px; text-align:right;
  }
  table.oc-karty tr td:last-child{ border-bottom:none; }
  table.oc-karty td::before{
    content:attr(data-popis);
    flex:0 0 auto; text-align:left;
    font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
    color:var(--muted2); font-weight:700; padding-top:2px;
  }
  /* První buňka řádku je jeho nadpis. */
  table.oc-karty td.oc-hlava{
    background:rgba(255,255,255,.035); font-weight:800; font-size:14.5px;
    color:var(--text); text-align:left; display:block;
  }
  table.oc-karty td.oc-hlava::before{ display:none; }

  /* ============ TABULKA STRATEGIE ============
     Jedenáct sloupců se do 393 px vejde jen s těsnými buňkami. Písmo je
     malé, ale v buňkách jsou jen jedno až dvě písmena, takže to čitelné
     zůstane — a hlavně se tabulka nikde neuřízne. */
  .strat-wrap{ overflow:visible; margin-left:-4px; margin-right:-4px; }
  .strat-table{ width:100%; table-layout:fixed; }
  .strat-table caption{ font-size:12px; }
  .strat-table:not(.rules-impact) th,.strat-table:not(.rules-impact) td{
    padding:0; height:26px; font-size:11px; border-width:1px;
  }
  .strat-table .rowhdr{ font-size:10.5px; width:12%; }
  .strat-legend{ gap:6px; font-size:11.5px; }
  .strat-legend .sw{ width:19px; height:19px; font-size:10px; }

  /* ============ INTERAKTIVNÍ PRVKY ============ */
  .bj-spoustec{ flex-wrap:wrap; padding:14px 15px; gap:12px; }
  .bj-spoustec img{ width:34px; height:34px; }
  .bj-sp-nazev{ font-size:16px; }
  .bj-sp-popis{ font-size:12.5px; }
  .bj-sp-cta{ width:100%; justify-content:center; padding:11px; }
  .trainer-promo{ flex-direction:column; align-items:flex-start; gap:10px; }
  .trainer-promo a{ width:100%; text-align:center; }
  .keycard{ padding:16px 15px; }
  .callout{ padding:12px 14px; font-size:13.5px; }
  .continue-block a{ padding:12px 14px; }

  /* Odkaz na kalkulačku uvnitř věty se nesmí rozlomit na dva řádky. */
  a.oc-kalk{ white-space:nowrap; }

  /* ============ PŘEKRYVNÉ APLIKACE ============
     Na mobilu jedou vždy přes celou obrazovku — okno v okně nemá smysl. */
  .bjo-overlay,.bs-overlay{ padding:0; }
  .bjo-win{ width:100%; height:100%; max-height:none; border-radius:0; border:none; }
  .bjo-head{ padding:9px 12px; gap:8px; }
  .bjo-title{ font-size:13.5px; gap:7px; }
  .bjo-znacka{ display:none; }
  .bjo-fslabel{ display:none; }
  .bjo-fsbtn{ width:44px; padding:0; }
  .bjo-icobtn{ width:44px; height:44px; }
  .bjo-body{ padding:10px 12px 16px; }

  .bs-win{ width:100%; height:100%; max-height:none; border-radius:0; }

  /* ============ ŠKOLA POČÍTÁNÍ ============ */
  .sk-hodnoty{ grid-template-columns:1fr; gap:8px; }
  /* Radek Hi-Lo skupiny: karty + hodnota vedle sebe, vysvetlivka pod nimi.
     Vysvetlivka ma flex-basis 100 %, takze se na radek vedle nich nevejde
     a MUSI prejit na dalsi radek — bez flex-wrap ale radek nezalomi a misto
     toho sesrotuje sousedy. Pak se z "2 3 4 5 6" stane svisly sloupec
     o sirce 9 px. Proto se tady zalamuje a seznam karet se nesmi zmensit. */
  .sk-h{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; text-align:left; padding:10px 12px; }
  .sk-h b{ flex:1 0 auto; font-size:14px; white-space:nowrap; }
  .sk-h span{ margin:0; font-size:22px; }
  .sk-h em{ flex:0 0 100%; font-size:11px; }
  .sk-velka-karta{ width:78px; height:110px; font-size:32px; }
  .sk-mala-karta{ width:38px; height:54px; font-size:16px; }
  .sk-vstup{ width:130px; }
  .sk-lekce{ padding:12px 13px; gap:11px; }
  .sk-l-text b{ font-size:14.5px; }
  .sk-l-text em{ font-size:12px; }
  .sk-tculoha b{ font-size:24px; }

  /* ============ TRÉNINK ============ */
  .bj-hud{ gap:6px; }
  .bj-hud-blok{ padding:5px 9px; min-width:0; flex:1 1 auto; }
  .bj-hud-l{ font-size:9.5px; letter-spacing:.06em; }
  .bj-hud-blok b{ font-size:15px; }
  .bj-kviz{ padding:13px 14px; }
  .bj-kviz-pola{ gap:9px; }
  .bj-ovladani .bj-btn{ flex:1 1 auto; }

  /* ============ PATIČKA ============ */
  .site-footer{ padding:22px 16px 28px; }
  .footer-links{ gap:10px 14px; font-size:12.5px; }
  .store-badges{ flex-wrap:wrap; justify-content:center; }
}

/* Velmi úzké displeje (320 px — iPhone SE 1. generace). */
@media(max-width:380px){
  .page{ padding:20px 12px 40px; }
  .page h1{ font-size:21px; }
  .strat-table:not(.rules-impact) th,.strat-table:not(.rules-impact) td{ height:23px; font-size:10px; }
  .strat-table .rowhdr{ font-size:9.5px; }
  .sk-velka-karta{ width:70px; height:98px; font-size:28px; }
}

/* =========================================================
   KALKULAČKA NA MOBILU
   =========================================================
   Hlavní tahák webu, takže tady nestačí „aby se to vešlo". Rozvržení
   vychází z toho, jak se telefon drží: palec dosáhne na spodní třetinu
   obrazovky, oči čtou horní. Proto jsou počítací tlačítka dole a připnutá
   — při rolování textu pod kalkulačkou nezmizí a dá se počítat dál.

   CO ZŮSTÁVÁ (v tomhle pořadí důležitosti):
     1. true count — hlavní číslo, největší na obrazovce
     2. +1 / 0 / −1 — připnutá dole, palcem dosažitelná
     3. running count, výhoda, doporučená sázka
     4. pozice v botě
   CO SE SKRÝVÁ: klávesové zkratky a přemapování kláves (na telefonu
   nedávají smysl), rychlost v kartách za minutu a jednorázové vysvětlivky.

   Poznámka k fit.js: ten škáluje svislé mezery přes --k a počítá s tím,
   že je výška bloku lineární funkcí --k. Nic z toho tu neporušujeme —
   měníme jen rozvržení a co je vidět, ne způsob škálování. */
@media(max-width:760px){
  /* Ovládání klávesnicí na telefonu neexistuje. */
  .kbd-tip, .keys-hint, .bind-wrap, .simple-tip{ display:none !important; }
  /* Rychlost v kartách za minutu je při klikání prstem bezcenná. */
  .stats-row .stat-block:nth-child(3){ display:none; }

  .counter-section{ padding:10px 12px 0; }
  .tool-h1{ padding:0 12px; }
  .oh-txt{ font-size:9.5px; letter-spacing:.14em; }
  .oh-plate{ gap:8px; }

  .top-controls{ gap:8px; }
  .simple-mode-btn, .rules-btn-special{ padding:8px 12px; font-size:11.5px; letter-spacing:.06em; }
  .rules-info{ font-size:11px; padding:0 6px; }

  /* Panel pravidel na celou šířku, ať se do něj dá trefit prstem. */
  .rules-panel{
    position:fixed; left:8px; right:8px; top:auto; bottom:calc(8px + var(--oc-spodek));
    width:auto; max-width:none; transform:none; margin:0;
    max-height:70vh; overflow-y:auto; z-index:150;
  }
  .rule-row{ gap:10px; }
  .rule-row select{ min-width:0; flex:1 1 auto; }

  #count{ line-height:.95; }
  #advantage{ font-size:15px; letter-spacing:.5px; }
  .label{ font-size:11px; letter-spacing:2px; }
  .stats-row{ gap:26px !important; }
  .stat-label{ font-size:9.5px; }

  .shoe-progress-label, .betting-label{ font-size:9.5px; letter-spacing:.08em; }
  .bet-zones{ font-size:9px; }
  .bet-advice{ font-size:15px; }
  .bet-units{ font-size:12px; }
  .shoe-info{ font-size:10.5px; }

  /* ---- Počítací tlačítka: připnutá dole, palcová velikost ---- */
  .controls{
    position:sticky; bottom:var(--oc-spodek); z-index:60;
    display:grid; grid-template-columns:repeat(3,1fr); gap:7px;
    width:100%; padding:9px 10px calc(9px + env(safe-area-inset-bottom,0px));
    margin-top:14px !important;
    background:linear-gradient(180deg, rgba(26,26,46,0) 0%, var(--bg) 26%);
  }
  .controls .btn{ min-height:56px; font-size:19px; font-weight:800; padding:0; }
  /* Undo a Reset jsou pod hlavní trojicí a menší — mačkají se zřídka. */
  /* Undo a Reset drzi 44 px — pod tim uz se prstem trefuje spatne. */
  .controls .btn:nth-child(4){ grid-column:1 / 3; min-height:44px; font-size:14px; }
  .controls .btn:nth-child(5){ grid-column:3 / 4; min-height:44px; font-size:13px; }

  .controls-secondary{
    position:static; display:flex; flex-wrap:wrap; gap:7px;
    background:none; padding:0; margin-top:10px !important;
  }
  .controls-secondary .btn{ flex:1 1 auto; min-height:44px; font-size:12.5px; padding:0 10px; }

  /* Průvodce pod kalkulačkou */
  .guide{ padding:0 14px 36px; }
  .guide h2{ font-size:16px; letter-spacing:1px; }
  .card-table td, .card-table th{ padding:7px 8px; }
  .card-table td:last-child{ font-size:16px; }
  .explain{ padding:14px 15px; font-size:13.5px; }
  .calc-faq{ padding:0 14px; }
  .calc-continue{ padding:0 14px !important; }

  /* Poslední karty se na úzkém displeji vejdou jen menší. */
  .card-square{ width:calc(11px + 10px * var(--k)); height:calc(11px + 10px * var(--k)); }
}

/* Na výšku nízké telefony (např. iPhone SE na šířku) — schovat i řadu
   posledních karet, jinak se hlavní číslo scvrkne pod čitelnost. */
@media(max-width:760px) and (max-height:620px){
  .last-cards{ display:none !important; }
  .shoe-progress{ margin-top:14px !important; }
}

/* =========================================================
   NÍZKÉ TELEFONY — odstupňované ubírání
   =========================================================
   Na krátkých displejích (iPhone SE, starší Androidy) se celá kalkulačka
   nevejde ani při nejmenším --k. fit.js umí zmenšovat jen mezery, takže
   se musí ubrat obsah — a to v pořadí podle toho, co je k počítání
   opravdu potřeba.

   NIKDY se neskrývá: true count, tlačítka +1/0/−1, doporučená sázka.
   Ty tři věci jsou důvod, proč si člověk kalkulačku otevřel. */

/* Pod 730 px výšky: pryč s řadou posledních karet a se slovním
   hodnocením — číslo říká totéž a je vidět líp. */
@media(max-width:760px) and (max-height:730px){
  .last-cards{ display:none !important; }
  #advantage{ display:none; }
  .shoe-progress{ margin-top:12px !important; }
  .betting-section{ margin-top:16px !important; }
  .controls{ margin-top:10px !important; }
}

/* Pod 670 px: pryč popisky, které jen pojmenovávají to, co je pod nimi
   vidět, a stupnice u sázkové lišty. Lišta i doporučení zůstávají. */
@media(max-width:760px) and (max-height:670px){
  .shoe-progress-label, .betting-label, .bet-zones, .cut-card-label{ display:none !important; }
  .stats-row{ gap:20px !important; margin-top:10px !important; }
  .shoe-info{ font-size:9.5px; }
  .controls .btn{ min-height:50px; font-size:17px; }
  /* Na velmi nizkych displejich je 40 px vedomy kompromis: vetsi tlacitka
     by vytlacila sazkovou listu mimo obrazovku. */
  .controls .btn:nth-child(4),.controls .btn:nth-child(5){ min-height:40px; font-size:12.5px; }
  .controls-secondary .btn{ min-height:40px; font-size:11.5px; }
  .bet-advice{ font-size:13px; margin-top:6px !important; }
  .bet-units{ font-size:11px; }
}

/* Pod 600 px (iPhone SE 1. generace): zůstává jen holé jádro. */
@media(max-width:760px) and (max-height:600px){
  .shoe-progress{ display:none !important; }
  .tool-h1{ display:none; }
  .rules-info{ display:none !important; }
  .top-controls{ margin-top:6px !important; }
  .stats-row{ margin-top:6px !important; }
  .betting-section{ margin-top:10px !important; }
}

/* =========================================================
   OPRAVY PŘEBÍJENÍ
   =========================================================
   Tabulka strategie má v site.css `min-width:520px` a pevné šířky buněk —
   to na mobilu vynutí rolování do stran, i když je table-layout pružný.
   Trenažér strategie má vlastní <style> uvnitř stránky, který se načítá
   až za mobile.css; proto tu potřebuje vyšší specificitu (body …),
   jinak by ho přebil zpátky. */
@media(max-width:760px){
  /* Zrušení min-width platí pro obě podoby — jinak se textová varianta
     roztáhne na 520 px a uřízne poslední sloupec. */
  .strat-table{ min-width:0 !important; width:100%; }
  .strat-table:not(.rules-impact){ table-layout:fixed; }
  /* Odsazení buněk se ale vynulovat nesmí: .rules-impact nese stejnou
     třídu, je to však běžná textová tabulka a text by lepil na rám. */
  .strat-table:not(.rules-impact) th,
  .strat-table:not(.rules-impact) td{ width:auto !important; padding:0 !important; }
  .strat-table.rules-impact{ table-layout:auto; }
  .strat-table.rules-impact th,
  .strat-table.rules-impact td{ padding:8px 9px; }
  .strat-table td.rowhdr{ width:12% !important; }
  .strat-wrap{ overflow-x:visible; }

  body .bs-overlay{ padding:0; }
  body .bs-win{ width:100%; height:100%; max-height:none; border-radius:0; border:none; }
  body .bs-head{ padding:9px 12px; }
  body .bs-body{ padding:12px 12px 16px; }
  body .bs-fslabel{ display:none; }
}

/* Stůl na mobilu: vyšší poměr stran, aby se do něj vešly dvě řady míst.
   Hodnotu si čte prizpusob() v bj-table.js přímo odsud. */
@media(max-width:760px){
  .bjt-stul{ aspect-ratio:1/1; }
  .bjt-napis-1{ font-size:calc(9px * var(--tk)); top:28%; }
  .bjt-napis-2{ display:none; }
  .bjt-jmenovka{ font-size:calc(8px * var(--tk) + 1px); }
  .bjt-pole{ width:calc(34px * var(--tk)); height:calc(34px * var(--tk)); }
  .bjt-stoh{ width:calc(22px * var(--tk)); height:calc(22px * var(--tk)); }
}

/* =========================================================
   TELEFON NA LEŽATO
   =========================================================
   Otočený telefon je jiný případ než zmenšený displej: je ŠIROKÝ a NÍZKÝ.
   iPhone 15 Pro na ležato má 852 × 393 px — šířka je nad mobilním prahem
   760 px, takže se sem svislá mobilní pravidla vůbec nedostanou, a přitom
   na výšku zbývá míň místa než na malém telefonu na výšku.

   Podmínka proto nestojí na šířce, ale na VÝŠCE. Rozvržení se otáčí do
   dvou sloupců: vlevo čísla, vpravo sázka a tlačítka. Přesně tak, jak se
   telefon na ležato drží — palce jsou po stranách, ne dole. */
@media(max-height:520px) and (orientation:landscape){

  /* Hlavička musí být kompaktní i tady — na 852 px široko by se jinak
     použila desktopová a zabrala 105 px ze 393. */
  .nav{ padding:6px 12px; gap:8px; flex-wrap:nowrap; position:relative; }
  .brand{ font-size:14px; }
  .brand-logo{ width:22px; height:22px; }
  .brand .chip{ display:none; }
  .nav-prepinac{
    display:flex; align-items:center; justify-content:center;
    width:40px; height:40px; flex:0 0 auto;
    background:var(--btn-bg); border:1px solid var(--border);
    border-radius:9px; color:var(--text); cursor:pointer; font-size:16px; padding:0;
  }
  .nav-links{ display:none !important; }

  /* ---- Kalkulačka do dvou sloupců ---- */
  .tool-h1, .rules-info, .kbd-tip, .keys-hint,
  .last-cards, .bind-wrap{ display:none !important; }
  .stats-row .stat-block:nth-child(3){ display:none; }

  .counter-section{
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
    grid-column-gap:20px;
    align-items:center;
    padding:6px 14px 8px;
    max-width:920px; margin:0 auto;
  }
  /* Vlevo: co se čte. Vpravo: čeho se člověk dotýká.
     POZOR: samotné `grid-column` nestačí — bez určení řádku dá mřížka
     každé položce vlastní řádek a sloupce se poskládají POD sebe, ne
     vedle sebe. Proto se pozice přiřazují napevno přes grid-area. */
  .top-controls{ grid-area:1 / 1 / 2 / 3; margin-top:2px !important; }
  .label{           grid-area:2 / 1 / 3 / 2; }
  #count{           grid-area:3 / 1 / 4 / 2; }
  #advantage{       grid-area:4 / 1 / 5 / 2; }
  .stats-row{       grid-area:5 / 1 / 6 / 2; }
  /* Tlačítka drží celou výšku vedle čísla — palec je má po ruce. */
  .controls{        grid-area:2 / 2 / 5 / 3; align-content:center; }
  .betting-section{ grid-area:5 / 2 / 6 / 3; }
  .controls-secondary{ grid-area:6 / 1 / 7 / 3; }
  /* Pozice v botě se na ležato nevejde a je ze všeho nejmíň potřeba. */
  .shoe-progress{ display:none !important; }

  .label{ margin-bottom:2px !important; font-size:10px; }
  #count{ font-size:clamp(52px, 15vh, 96px) !important; line-height:.92; }
  #advantage{ margin-top:4px !important; font-size:13px; }
  .stats-row{ margin-top:8px !important; gap:22px !important; }
  .stats-row .tc-value, .stats-row .edge-value{ font-size:22px !important; }

  .shoe-progress{ margin-top:0 !important; gap:3px !important; }
  .shoe-progress-label{ display:none; }
  .shoe-info{ font-size:9.5px; }
  .betting-section{ margin-top:8px !important; gap:4px !important; }
  .betting-label, .bet-zones{ display:none; }
  .bet-advice{ margin-top:4px !important; font-size:13px; }
  .bet-units{ font-size:11px; }

  .controls{
    position:static; display:grid; grid-template-columns:repeat(3,1fr);
    gap:6px; margin-top:8px !important; padding:0; background:none;
  }
  .controls .btn{ min-height:44px; font-size:16px; padding:0; }
  .controls .btn:nth-child(4){ grid-column:1 / 3; min-height:36px; font-size:12.5px; }
  .controls .btn:nth-child(5){ grid-column:3 / 4; min-height:36px; font-size:11.5px; }
  .controls-secondary{ display:flex; gap:6px; margin-top:6px !important; }
  .controls-secondary .btn{ flex:1 1 auto; min-height:34px; font-size:11px; padding:0 8px; }

  .simple-mode-btn, .rules-btn-special{ padding:6px 12px; font-size:11px; }
  .rules-panel{
    position:fixed; left:8px; right:8px; top:52px; bottom:8px;
    width:auto; max-width:none; transform:none; margin:0;
    max-height:none; overflow-y:auto; z-index:150;
  }

  /* ---- Textové stránky a aplikace ---- */
  .page{ padding:16px 18px 32px; }
  .page h1{ font-size:21px; }
  .bjo-overlay, .bs-overlay{ padding:0; }
  .bjo-win, .bs-win{ width:100%; height:100%; max-height:none; border-radius:0; border:none; }
  .bjo-head{ padding:6px 12px; }
  /* I na ležato musí jít ovládací ikony trefit prstem — bez tohohle
     zůstaly na 34 px, protože pravidlo výš platí jen do 760 px šířky. */
  .bjo-icobtn{ width:42px; height:42px; }
  .bjo-fsbtn{ width:42px; padding:0; }
  .bjo-fslabel{ display:none; }
  .bjo-body{ padding:8px 12px 12px; }
  .bj-hud{ gap:5px; margin-bottom:7px; }
  .bj-hud-blok{ padding:3px 8px; }
  .bj-hud-blok b{ font-size:13px; }
  /* 8 px popisek v HUD se nedal přečíst; 9,5 px je spodní mez, pod kterou
     už jde jen o to, aby text zabral málo místa — ne aby se dal číst. */
  .bj-hud-l{ font-size:9.5px; }
  /* Nastavení tréninku se na ležato vejde vedle sebe. */
  .bj-nast{ flex-direction:row; flex-wrap:wrap; align-items:flex-end; }
  .bj-pole{ min-width:130px; }
}

/* Velmi nízké ležaté displeje (iPhone SE 1. generace = 568 × 320).
   Doplňková řada tlačítek je poslední, co se dá obětovat — zvuk,
   progresivní režim i trenažér jsou dostupné i odjinud. */
@media(max-height:340px) and (orientation:landscape){
  .controls-secondary{ display:none !important; }
  .stats-row{ margin-top:4px !important; }
  #advantage{ display:none; }
}

/* =========================================================
   BLACKJACKOVÝ STŮL NA MOBILU — jiné rozvržení, ne zmenšenina
   =========================================================
   Měřeno na iPhonu 15 Pro: poměrové zmenšení srazilo jmenovky na 6 px,
   součty na 7,6 px a písmo v kartách na 8,8 px. To se nedá číst, takže
   trenažér byl na telefonu k ničemu — a přitom stůl zabíral jen 354 px
   z 852 dostupných.

   Řešení není zmenšit ještě víc, ale VYHODIT, co k počítání netřeba,
   a zbytku dát pevnou čitelnou velikost:

     ZŮSTÁVÁ  karty, součty ruk, kdo zrovna hraje, odkládací box
     MIZÍ     oblouky a nápisy na plsti, sázková pole se žetony,
              bota, jmenovky hráčů (nahrazené číslem u součtu)

   Místa se skládají do řádků místo po oblouku — oblouk je hezký na
   monitoru, na telefonu jen požírá místo. */
/* Pozor na podmínku: samotné max-width:760px sem nestačí. Telefon
   na ležato je 852 px široký, takže stůl zůstával v počítačovém
   rozvržení a čouhal 233 px pod okraj. */
@media(max-width:760px), (max-height:520px) and (orientation:landscape){
  .bjt-stul{
    aspect-ratio:auto !important;
    width:100% !important;
    padding:0;
    border-radius:16px;
  }
  .bjt-filc{
    position:relative; inset:auto;
    display:flex; flex-wrap:wrap;
    justify-content:center; align-items:flex-start;
    gap:9px 7px;
    padding:36px 8px 12px;
    border-radius:16px;
  }
  /* Dekorace plsti a sázková pole na telefon nepatří. */
  .bjt-oblouk, .bjt-napis, .bjt-bota,
  .bjt-pole, .bjt-stoh, .bjt-zeton{ display:none !important; }

  .bjt-sova{ width:52%; opacity:.10; top:58%; }

  /* Odkládací box zůstává — je to jediné vodítko pro odhad balíčků.
     Přesouvá se do vodorovného proužku nahoře. */
  .bjt-box{
    display:block; position:absolute; top:9px; left:10px; right:10px;
    width:auto; height:9px; border-radius:5px;
    background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.14);
  }
  .bjt-box-karty{
    position:absolute; left:0; top:0; bottom:0; height:auto !important;
    width:var(--box-podil,0%);
    background:linear-gradient(90deg,#dfe3f2,#aeb4cc);
    transition:width .4s ease;
  }

  .bjt-krupier{
    position:static; transform:none;
    flex:0 0 100%; order:0;
    display:flex; flex-direction:column; align-items:center; gap:3px;
  }
  .bjt-krupier .bjt-jmenovka{
    font-size:9.5px !important; letter-spacing:.14em; margin:0;
    color:rgba(255,255,255,.55);
  }

  .bjt-misto{
    position:static !important; transform:none !important;
    flex:0 1 auto; min-width:0; order:1;
    padding:5px 6px; border-radius:10px;
    background:rgba(0,0,0,.18);
  }
  .bjt-misto.hraje{ background:rgba(255,224,130,.20); box-shadow:0 0 0 1px rgba(255,224,130,.6); }
  .bjt-misto .bjt-jmenovka{ display:none; }

  /* Pevné čitelné rozměry — nezávislé na --tk. */
  .bjt-karta{
    width:32px !important; height:44px !important;
    font-size:13px !important; border-radius:4px;
    margin-left:-7px !important; box-shadow:0 2px 5px rgba(0,0,0,.5);
  }
  .bjt-karta:first-child{ margin-left:0 !important; }
  .bjt-karta .bjt-barva{ font-size:9.5px !important; }
  .bjt-hodnota{
    top:-9px !important; font-size:9.5px !important;
    padding:0 4px !important; border-radius:5px;
  }
  .bjt-soucet{
    font-size:12px !important; padding:1px 6px !important;
    border-radius:5px; min-height:0;
  }
  .bjt-bublina{
    font-size:9px !important; min-height:0; letter-spacing:.04em;
    color:rgba(255,255,255,.7);
  }
  .bjt-ruce{ gap:5px; }
  .bjt-ruka{ min-height:0; }
}

/* Na ležato je místa na výšku ještě míň — karty o kousek menší,
   ale pořád čitelné. */
@media(max-height:520px) and (orientation:landscape){
  .bjt-filc{ padding:30px 8px 8px; gap:6px 6px; }
  .bjt-karta{ width:28px !important; height:38px !important; font-size:11.5px !important; }
  .bjt-soucet{ font-size:11px !important; }
  .bjt-sova{ display:none; }
}

/* =========================================================
   PŘEVZATO ZE STARŠÍ MOBILNÍ VERZE (složka RARA)
   =========================================================
   Tři věci, které tam byly vyřešené líp, než jsem je udělal:

   1. dvh MÍSTO vh
      Safari na iPhonu při rolování schovává a zase ukazuje adresní řádek.
      Jednotka `vh` se přitom NEMĚNÍ, takže rozvržení počítá s výškou, která
      zrovna neplatí — buď obsah přeteče, nebo zbyde prázdné místo.
      `dvh` sleduje skutečnou viditelnou výšku. V testovacím okně to není
      poznat, protože se tam nic neposouvá; na skutečném telefonu ano.

   2. BEZPEČNÉ ZÓNY DISPLEJE
      Na iPhonu s výřezem zasahuje do plochy zaoblení rohů a čárka pro
      gesta. Na ležato ukusuje i po stranách. Bez env(safe-area-inset-*)
      se obsah schová pod ně.

   3. BAREVNÁ POČÍTACÍ TLAČÍTKA
      −1 červené, 0 šedé, +1 zelené. U stolu se kliká poslepu a barva
      se pozná rychleji než text.
*/

/* ---- 1. Skutečná výška displeje ---- */
@media(max-width:760px){
  .bjo-win, .bs-win{ height:100dvh; max-height:100dvh; }
  .rules-panel{ max-height:74dvh; }
}
@media(max-height:520px) and (orientation:landscape){
  .bjo-win, .bs-win{ height:100dvh; max-height:100dvh; }
}

/* ---- 2. Bezpečné zóny ---- */
@media(max-width:760px){
  .nav{
    padding-left:max(14px, env(safe-area-inset-left));
    padding-right:max(14px, env(safe-area-inset-right));
  }
  .page{
    padding-left:max(16px, env(safe-area-inset-left));
    padding-right:max(16px, env(safe-area-inset-right));
  }
  .counter-section{
    padding-left:max(12px, env(safe-area-inset-left));
    padding-right:max(12px, env(safe-area-inset-right));
  }
  .site-footer{
    padding-left:max(16px, env(safe-area-inset-left));
    padding-right:max(16px, env(safe-area-inset-right));
    padding-bottom:calc(28px + env(safe-area-inset-bottom));
  }
  .bjo-body{ padding-bottom:calc(16px + env(safe-area-inset-bottom)); }
  .rules-panel{ bottom:calc(8px + var(--oc-spodek) + env(safe-area-inset-bottom)); }
}
@media(orientation:landscape) and (max-height:520px){
  .nav, .page, .counter-section, .site-footer, .bjo-body{
    padding-left:max(14px, env(safe-area-inset-left));
    padding-right:max(14px, env(safe-area-inset-right));
  }
}

/* ---- 3. Barevná počítací tlačítka ---- */
@media(max-width:760px), (max-height:520px) and (orientation:landscape){
  .controls .btn:nth-child(1),
  .controls .btn:nth-child(2),
  .controls .btn:nth-child(3){
    color:#fff; font-weight:800; border-width:1px; border-style:solid;
    transition:transform .08s ease, filter .12s ease;
  }
  .controls .btn:nth-child(1){ background:#c62828; border-color:#e04a4a; }
  .controls .btn:nth-child(2){ background:#3d3d63; border-color:#52527e; }
  .controls .btn:nth-child(3){ background:#15803d; border-color:#22c55e; }
  .controls .btn:nth-child(1):hover{ background:#c62828; }
  .controls .btn:nth-child(2):hover{ background:#3d3d63; }
  .controls .btn:nth-child(3):hover{ background:#15803d; }
  /* Odezva na dotek — bez ní člověk neví, jestli se klik registroval. */
  .controls .btn:active{ transform:scale(.955); filter:brightness(1.25); }
}

/* ---- 4. Tablety s dotykem ----
   Desktopové rozvržení, ale cíle pro prst. */
@media(min-width:761px) and (pointer:coarse){
  .controls .btn{ min-height:54px; font-size:17px; }
  .controls-secondary .btn{ min-height:46px; }
  .bj-btn{ min-height:48px; }
  .nav-links a{ padding:6px 0; }
  .page li a, .page p a{ padding:2px 0; }
}

/* Odkaz uvnitř popisku statistiky dědil 0,88em z .stat-label a spadl na
   8,4 px — pod hranicí čitelnosti. Na mobilu se drží velikosti popisku. */
@media(max-width:760px), (max-height:520px) and (orientation:landscape){
  .stat-label{ font-size:10.5px !important; }
  .stat-label .ilink{ font-size:10px !important; padding:0 5px; }
  .label .ilink{ font-size:inherit !important; }
  .shoe-progress-label, .betting-label{ font-size:10px !important; }
}

/* =========================================================
   TRENAŽÉR V KALKULAČCE (.tr-overlay) — přestavba pro mobil
   =========================================================
   Naměřeno: okno 809 px, ale obsah sahal do 1506 px. Počítací tlačítka
   ležela na 1430 px, tedy hluboko pod okrajem — člověk musel rolovat
   uvnitř okna, aby vůbec našel, čím se hraje. Tím byl trenažér na
   telefonu nepoužitelný.

   Je to HRA, ne dashboard. Pořadí priorit:
     1. stůl s kartami — musí zabrat co nejvíc plochy
     2. počítací tlačítka — připnutá dole, palcem dosažitelná
     3. true count a running count — malý pruh nad tlačítky
     4. VŠECHNO OSTATNÍ pryč: sázková lišta se stupnicí, poslední karty,
        sovičky a série, nápověda, přesnost. Nic z toho se při hraní
        nesleduje a dohromady to žralo přes 600 px. */
@media(max-width:760px), (max-height:560px) and (orientation:landscape){
  .tr-overlay{ padding:0; }
  .tr-window{
    width:100%; height:100dvh; max-height:100dvh;
    border-radius:0; border:none;
    display:flex; flex-direction:column; overflow:hidden;
  }

  /* Hlavička: jen název, rychlost a zavření. */
  .tr-head{ padding:8px 12px; gap:8px; flex:0 0 auto; }
  .tr-title{ font-size:13px; gap:6px; }
  .tr-title img{ width:18px; height:18px; }
  .tr-shoeinfo{ display:none; }
  .tr-spd{ padding:5px 9px; font-size:11px; min-height:32px; }
  .tr-close{ width:38px; height:38px; }

  /* Tělo: nahoře čísla, dole stůl s kartami — obráceně (column-reverse)
     to bylo kvůli dřívějšímu rozvržení, ale při hře se člověk dívá
     nejdřív na count a karty sleduje pod ním. */
  .tr-body{
    margin:8px 8px 0; flex:1 1 auto; min-height:0;
    display:flex !important; flex-direction:column;
    border-radius:14px;
  }
  .tr-table{ flex:1 1 auto; min-height:0; padding:8px; }
  .tr-players{ gap:6px; }
  .tr-seat-label{ font-size:9px; }
  .tr-count{ font-size:12px; }

  /* Levý sloupec se smrskne na jeden pruh s čísly. */
  .tr-calc{
    flex:0 0 auto; padding:6px 10px; gap:0;
    display:grid; grid-template-columns:auto 1fr auto; align-items:center;
    column-gap:12px; text-align:left;
  }
  .tr-tc-label{ grid-area:1/1; font-size:10px; letter-spacing:.12em; margin:0; }
  .tr-tc{ grid-area:2/1; font-size:34px !important; line-height:1; }
  .tr-adv{ grid-area:1/2/3/3; font-size:11px; text-align:center; align-self:center; }
  .tr-mini{
    grid-area:1/3/3/4; flex-direction:row; gap:12px; width:auto;
  }
  .tr-mini > div:nth-child(3){ display:none; }   /* zbývající balíčky */
  .tr-mini .l{ font-size:9.5px; }
  .tr-mini b{ font-size:15px; }

  /* Co se při hraní nesleduje. */
  .tr-betting, .tr-last-wrap, .tr-reward-row,
  .tr-hint, .tr-accline, .tr-match{ display:none !important; }

  /* Ovládání připnuté dole, palcová velikost, barvy jako v kalkulačce. */
  .tr-foot{
    flex:0 0 auto; display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:6px; padding:8px 10px calc(8px + env(safe-area-inset-bottom));
    border-top:1px solid var(--border); background:var(--panel);
  }
  .tr-btn{ min-height:54px; font-size:19px; font-weight:800; padding:0; border-radius:12px; }
  .tr-btn small{ display:block; font-size:9px; font-weight:600; opacity:.8; margin-top:1px; }
  .tr-btn.plus{ background:#15803d; border-color:#22c55e; color:#fff; }
  .tr-btn.zero{ background:#3d3d63; border-color:#52527e; color:#fff; }
  .tr-btn.minus{ background:#c62828; border-color:#e04a4a; color:#fff; }
  .tr-btn:active{ transform:scale(.955); filter:brightness(1.25); }
  /* Start a Reset jsou vedlejší — do jednoho řádku pod hlavní trojici. */
  .tr-btn.ghost{ grid-column:span 1; min-height:38px; font-size:12px; }
  .tr-btn.ghost:nth-of-type(1){ grid-column:1 / 3; }
}

/* Na ležato je stůl širší než vyšší — čísla vedle sebe, tlačítka vpravo. */
@media(max-height:560px) and (orientation:landscape){
  .tr-tc{ font-size:26px !important; }
  .tr-btn{ min-height:44px; font-size:16px; }
  .tr-btn.ghost{ min-height:32px; font-size:11px; }
  .tr-body{ margin:6px 6px 0; }
}

/* =========================================================
   VYSOUVACÍ PANEL NABÍDKY
   =========================================================
   Vyjíždí zprava jako jeden souvislý seznam. „Ostatní" je uvnitř
   rozbalovací sekce, ne druhý sloupec. Tlačítko je úplně vpravo
   v liště — dřív sedělo uprostřed, protože se vkládalo před nástroje. */
.oc-panel, .oc-stin{ display:none; }

@media(max-width:760px), (max-height:520px) and (orientation:landscape){
  .oc-stin{
    display:block; position:fixed; inset:0; z-index:190;
    background:rgba(6,6,16,.62); backdrop-filter:blur(2px);
    opacity:0; visibility:hidden; transition:opacity .24s, visibility .24s;
  }
  body.oc-menu .oc-stin{ opacity:1; visibility:visible; }

  .oc-panel{
    display:flex; flex-direction:column;
    position:fixed; top:0; right:0; z-index:200;
    width:min(310px, 84vw); height:100dvh;
    background:var(--panel); border-left:1px solid var(--border);
    box-shadow:-18px 0 48px rgba(0,0,0,.5);
    transform:translateX(102%); visibility:hidden;
    transition:transform .26s cubic-bezier(.32,.72,.35,1), visibility .26s;
    overflow-y:auto; overscroll-behavior:contain;
    padding-bottom:calc(16px + env(safe-area-inset-bottom));
    padding-right:env(safe-area-inset-right);
  }
  body.oc-menu .oc-panel{ transform:none; visibility:visible; }
  body.oc-menu{ overflow:hidden; }

  .oc-panel-hlava{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 16px; border-bottom:1px solid var(--border);
    position:sticky; top:0; background:var(--panel); z-index:2;
  }
  .oc-panel-hlava strong{ font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
  .oc-panel-zavrit{
    background:none; border:none; color:var(--muted); font-size:19px;
    cursor:pointer; width:40px; height:40px; line-height:1;
    display:flex; align-items:center; justify-content:center;
  }

  .oc-panel > a{
    display:block; padding:14px 16px; font-size:15.5px;
    color:var(--text); border-bottom:1px solid rgba(255,255,255,.045);
  }
  .oc-panel > a:hover{ text-decoration:none; background:var(--btn-bg); }
  .oc-panel > a.oc-tady{ color:var(--link); background:rgba(99,102,241,.10); font-weight:700; }
  .oc-panel > a.nav-live{ padding:14px 16px; border-radius:0; }

  .oc-sekce{ border-bottom:1px solid rgba(255,255,255,.045); }
  .oc-sekce-btn{
    display:flex; align-items:center; justify-content:space-between; width:100%;
    background:none; border:none; cursor:pointer; font:inherit;
    padding:14px 16px; font-size:15.5px; color:var(--text); text-align:left;
  }
  .oc-sipka{ font-style:normal; color:var(--muted2); transition:transform .2s; }
  .oc-sekce-btn.otevreno .oc-sipka{ transform:rotate(180deg); }
  .oc-sekce-obsah{ display:none; padding-bottom:6px; }
  .oc-sekce-obsah.otevreno{ display:block; }
  .oc-sekce-obsah a{
    display:block; padding:11px 16px 11px 30px; font-size:14.5px; color:var(--muted);
  }
  .oc-sekce-obsah a:hover{ text-decoration:none; color:var(--text); }
  .oc-sekce-obsah a.oc-tady{ color:var(--link); font-weight:700; }

  .oc-panel-pata{
    margin-top:auto; display:flex; align-items:center; gap:9px;
    padding:16px; font-size:11.5px; color:var(--muted2); line-height:1.45;
    border-top:1px solid var(--border);
  }

  /* Tlačítko nabídky: tři čárky, úplně vpravo. */
  .nav-prepinac{
    display:flex; align-items:center; justify-content:center;
    width:44px; height:44px; flex:0 0 auto; margin-left:4px;
    background:var(--btn-bg); border:1px solid var(--border);
    border-radius:10px; color:var(--text); cursor:pointer; padding:0;
    position:relative;
  }
  /* Tři čárky se odvozují od prostřední: ta sedí přesně ve středu
     tlačítka a krajní jsou od ní odsazené o stejný kus nahoru a dolů.

     Předtím měly ::before/::after pevné top:14px / top:28px a left:13px
     vůči TLAČÍTKU. Jenže tlačítko má rámeček 1 px, takže se počítalo od
     jeho vnitřní hrany — kdežto prostřední čárka se středila v obsahovém
     boxu. Krajní čárky tím seděly o 1 px vpravo a mezery vyšly 4 a 6 px
     místo stejných. Ikona byla znatelně křivá a posunutá dolů. */
  .np-cara{
    position:absolute; left:50%; top:50%;
    width:20px; height:2px; margin:-1px 0 0 -10px;
    border-radius:2px; background:currentColor;
    transition:transform .22s, opacity .18s;
  }
  /* Pozor: background:inherit by po zavření zmizel s prostřední čárkou —
     krajní proto berou barvu samy. */
  .np-cara::before, .np-cara::after{
    content:''; position:absolute; left:0;
    width:100%; height:100%; border-radius:inherit; background:currentColor;
    transition:transform .22s;
  }
  .np-cara::before{ top:-6px; }
  .np-cara::after{ top:6px; }
  /* Po otevření se krajní čárky složí do křížku — posun musí být přesně
     ten, o který jsou odsazené (6 px), jinak se ramena nesejdou. */
  .nav-prepinac[aria-expanded="true"] .np-cara{ background:transparent; }
  .nav-prepinac[aria-expanded="true"] .np-cara::before{ transform:translateY(6px) rotate(45deg); }
  .nav-prepinac[aria-expanded="true"] .np-cara::after{ transform:translateY(-6px) rotate(-45deg); }
}

/* Trenažér kalkulačky má vlastní <style> uvnitř index.html, který se načítá
   až za mobile.css — potřebuje proto vyšší specificitu (body …). */
@media(max-width:760px), (max-height:560px) and (orientation:landscape){
  body .tr-overlay{ padding:0; }
  body .tr-window{ width:100%; height:100dvh; max-height:100dvh; border-radius:0; border:none; }
}

/* =========================================================
   SPOUŠTĚČE UVNITŘ ČLÁNKŮ — menší
   =========================================================
   Na textových stránkách je hodnotou text, ne nástroj. Spouštěč zabíral
   na telefonu skoro polovinu první obrazovky a odsouval obsah, kvůli
   kterému člověk přišel. Na mobilu se proto smrskne na jeden řádek:
   logo, název, šipka. Popis se skryje — název ho říká taky. */
@media(max-width:760px){
  .bj-spoustec{
    flex-wrap:nowrap; align-items:center; gap:10px;
    padding:11px 13px; margin:14px 0; border-radius:12px;
  }
  .bj-spoustec img{ width:26px; height:26px; }
  .bj-sp-znacka{ font-size:9.5px; margin-bottom:1px; }
  .bj-sp-nazev{ font-size:14px; line-height:1.25; }
  .bj-sp-popis{ display:none; }
  .bj-sp-cta{
    width:auto; padding:7px 11px; font-size:12.5px;
    flex:0 0 auto; border-radius:8px;
  }
  /* Promo trenažéru strategie stejně — je to odkaz, ne obsah. */
  .trainer-promo{
    flex-direction:row; align-items:center; gap:10px; padding:11px 13px;
  }
  .trainer-promo img{ width:26px; height:26px; }
  .trainer-promo .tp-txt strong{ font-size:13.5px; }
  .trainer-promo .tp-txt span{ display:none; }
  .trainer-promo a{ width:auto; flex:0 0 auto; padding:7px 11px; font-size:12.5px; }
  .trainer-promo::before{ font-size:9.5px; top:-9px; left:11px; padding:1px 7px; }
}

/* =========================================================
   PANEL PRAVIDEL A DROBNÉ OVLÁDÁNÍ V KALKULAČCE
   =========================================================
   Naměřeno: rozbalovací seznamy v panelu měly 30 px na výšku. To se
   prstem netrefí — 44 px je nejmenší spolehlivý cíl. Vysvětlivka pod
   panelem navíc vyjížděla pod jeho okraj. */
@media(max-width:760px), (max-height:520px) and (orientation:landscape){
  .rules-panel select,
  .rules-panel input{ min-height:44px; font-size:15px; padding:8px 10px; }
  .rules-panel .rule-row{ padding:7px 0; gap:10px; align-items:center; }
  .rules-panel .rule-row > span{ flex:1 1 auto; min-width:0; font-size:14px; }
  .rules-panel .rule-row select{ flex:0 0 auto; width:52%; max-width:190px; }
  .rules-panel .keys-panel-title{ font-size:11px; padding-top:4px; }
  .rules-panel .keys-note{ font-size:11.5px; line-height:1.5; }
  /* Panel má vlastní rolování — obsah pod okrajem je v pořádku,
     jen musí být vidět, že se dá rolovat. */
  .rules-panel{ overscroll-behavior:contain; }

  /* Vysvětlivka progresivního režimu byla `absolute`, takže se vázala
     na tlačítko a při rolování odjela. Na telefonu patří dolů jako
     krátkodobá zpráva. */
  .prog-tip{
    position:fixed !important;
    left:12px !important; right:12px !important;
    top:auto !important;
    bottom:calc(14px + var(--oc-spodek) + env(safe-area-inset-bottom)) !important;
    width:auto !important; max-width:none !important;
    transform:none !important; z-index:220;
    font-size:13px; line-height:1.5;
  }

  /* Přepínač jednoduchého režimu: na mobilu je číslo obří (160 px) a to
     je dobře — jen ať se nedotýká okrajů. */
  body.simple #count{ font-size:min(38vw, 22vh, 170px) !important; }
  body.simple .counter-section{ justify-content:center; }
}

/* =========================================================
   BASIC STRATEGY — generátor a trenažér
   =========================================================
   1. Přepínače pravidel měly 35 px. Prstem se to netrefí.
   2. Tlačítko „Zobrazit tabulku" v trenažéru se ukazovalo jen v režimu
      celé obrazovky. Jenže na telefonu JE trenažér vždycky přes celou
      obrazovku, takže tam tabulka nešla otevřít vůbec — a přitom je to
      to jediné, do čeho se dá při učení nakouknout. */
@media(max-width:760px), (max-height:560px) and (orientation:landscape){
  .scfg-opts{ display:flex; width:100%; }
  .scfg-opts button{ flex:1 1 0; min-height:46px; font-size:13px; padding:6px 4px; }
  .scfg-row{ flex-direction:column; align-items:stretch; gap:6px; padding:9px 0; }
  /* Na počítači je popisek 150px široký sloupec (flex:0 0 150px). Jakmile
     se řádek otočí na svislý, stane se ze 150 px VÝŠKA — popisek pak měl
     150 px místo 18 a mezi ním a přepínačem zela díra. */
  .scfg-label{
    flex:0 0 auto;
    font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  }
  .strat-cfg-btn{ min-height:46px; width:100%; justify-content:center; }
  .strat-cfg-bar{ flex-wrap:wrap; gap:8px; }
  .dl-btn{ flex:1 1 0; justify-content:center; min-height:46px; }

  /* Referenční tabulka je na mobilu dostupná vždy. */
  body .bs-tablewrap{ display:block !important; padding:6px 12px 0; }
  body .bs-tabletoggle{ width:100%; min-height:44px; font-size:13.5px; }

  /* A otevírá se jako překryv přes stůl, ne jako úzký sloupec vedle něj —
     na 393 px by z ní zbyl proužek. */
  body .bs-win.tableopen .bs-tablepanel{
    position:absolute; inset:0; z-index:20;
    max-width:none !important; width:100% !important;
    background:rgba(10,10,24,.97); border-right:none;
    padding:14px 12px 60px; overflow:auto;
  }
  body .bs-win.tableopen .bs-play{ visibility:hidden; }
  body .bs-win{ position:relative; }
  body .bs-tabscale{ transform:none !important; width:auto !important; height:auto !important; }
  body .bs-reftab td, body .bs-reftab th{ width:26px; height:23px; font-size:11px; }
  body .bs-reftitle{ font-size:11px; margin:8px 0 4px; }
}

/* Schémata na mobilu od kraje ke kraji — každý pixel šířky zvětší
   měřítko a tím i čitelnost popisků uvnitř. */
@media(max-width:760px){
  .figwrap{
    margin-left:calc(-1 * max(16px, env(safe-area-inset-left)));
    margin-right:calc(-1 * max(16px, env(safe-area-inset-right)));
    border-radius:0; border-left:none; border-right:none;
    padding:14px 10px 4px;
  }
  .figcap{ font-size:12.5px; padding:0 6px; }
}

/* =========================================================
   PATIČKA A DROBNÉ POPISKY
   =========================================================
   Naměřeno: odkazy v patičce měly 20 px na výšku. Sedí těsně vedle sebe
   a prstem se mezi nimi netrefí — 44 px je nejmenší spolehlivý cíl.
   Řeším to odsazením uvnitř odkazu, ne většími mezerami, aby patička
   nenarostla víc než je nutné. */
@media(max-width:760px), (max-height:520px) and (orientation:landscape){
  .footer-links{
    display:grid; grid-template-columns:1fr 1fr;
    gap:2px 10px; width:100%; max-width:420px; margin:0 auto;
  }
  .footer-links a{
    display:flex; align-items:center; min-height:44px;
    padding:0 4px; font-size:13px; line-height:1.3;
  }
  .footer-inner{ gap:12px; }
  .footer-brand{ font-size:15px; }
  .footer-resp{ font-size:11.5px; }
  .footer-disclaimer{ font-size:11px; line-height:1.55; }
  .footer-app .fa-label{ font-size:11px; }
  .store-badge{ min-height:46px; }
  .sb-small{ font-size:9.5px !important; }

  /* Štítek nad názvem spouštěče spadl při zmenšení na 8,5 px. */
  .bj-sp-znacka{ font-size:9.5px !important; letter-spacing:.1em; }
  .trainer-promo::before{ font-size:9px; }
}

/* Na velmi úzkých displejích jsou dva sloupce v patičce těsné. */
@media(max-width:360px){
  .footer-links{ grid-template-columns:1fr; }
  .footer-links a{ min-height:42px; }
}

/* Odkaz „Otevřít trenažér" v promo bloku měl na 320px displeji 34 px —
   při zúžení se mu srazilo odsazení. Drží teď 44 px vždy. */
@media(max-width:760px), (max-height:520px) and (orientation:landscape){
  .trainer-promo a{
    display:inline-flex; align-items:center; justify-content:center;
    min-height:44px; padding:0 14px;
  }
}
@media(max-width:380px){
  .trainer-promo{ flex-wrap:wrap; }
  .trainer-promo .tp-txt{ flex:1 1 100%; }
  .trainer-promo a{ width:100%; }
}

/* Poslední dva malé cíle nalezené měřením na 320px displeji:
   „Surrender" v legendě (16 px — je to vysvětlující odkaz, ne akce,
   ale i tak se má dát trefit) a SIMPLE MODE (36 px). */
@media(max-width:760px){
  .strat-legend .lg a.ilink{
    display:inline-flex; align-items:center; min-height:32px; padding:0 7px;
  }
  .simple-mode-btn{ min-height:44px; }
  .rules-btn-special{ min-height:44px; }
}

/* Stupnice pod sázkovou lištou měla 9 px. Devět hodnot vedle sebe se do
   393 px vejde i při 10,5 px, když se zúží prostrkání. */
@media(max-width:760px){
  .bet-zones{ font-size:10.5px; letter-spacing:0; }
  .bet-zones span{ font-variant-numeric:tabular-nums; }
}

/* Na ležato zbývalo místo na šířku, ale ne na výšku — vedlejší tlačítka
   proto měla 31–36 px. Blok kalkulačky měl přitom 314 px z 393, takže
   se pár pixelů navíc vejde a cíle jdou zvětšit na 42 px. */
@media(max-height:520px) and (orientation:landscape){
  .controls .btn:nth-child(4),
  .controls .btn:nth-child(5){ min-height:42px; font-size:13px; }
  .controls-secondary .btn{ min-height:42px; font-size:12px; }
  .simple-mode-btn, .rules-btn-special{ min-height:42px; }
  a.oc-kalk{ display:inline-flex; align-items:center; min-height:34px; }
}

/* Nejtěsnější ležato (iPhone SE 568x320 i 667x375): hlavička 57 px + blok 276 px
   přetékalo o 14 px. Hlavička se stlačí a sázkový pruh — na rozdíl od
   true countu — odejde; je to doplněk, ne hlavní údaj. */
@media(max-height:380px) and (orientation:landscape){
  .site-header{ padding:4px 10px; }
  .site-header .nav{ min-height:36px; }
  .brand-logo{ width:26px; height:26px; }
  .betting-section{ display:none !important; }
  #calcBlock{ padding-top:6px; padding-bottom:6px; }
}

/* Na 320 px se hlavička trenažéru nevešla a křížek „zavřít" vypadl
   36 px mimo obraz — název se totiž nesmršťoval. Název dostane
   min-width:0 (bez toho ho flexbox nezmenší pod obsah) a zkrátí se
   výpustkou, křížek se nesmrští nikdy. */
@media(max-width:760px), (max-height:560px) and (orientation:landscape){
  .tr-head{ flex-wrap:nowrap; }
  .tr-title{ min-width:0; flex:1 1 auto; overflow:hidden;
             white-space:nowrap; text-overflow:ellipsis; }
  .tr-spd{ flex:0 0 auto; }
  .tr-close{ flex:0 0 auto; margin-left:auto; }
}
@media(max-width:360px){
  .tr-title span, .tr-title b{ overflow:hidden; text-overflow:ellipsis; }
}

/* V hlavičce trenažéru jsou tři přepínače rychlosti — ty ujídaly řádek,
   takže na název zbylo 9 px. Přepínače se zúží a pod 400 px zůstane
   z názvu jen logo: že jde o trenažér, je z celoobrazovkového okna
   zřejmé, a rychlost je naopak ovládací prvek, který musí jít zmáčknout. */
@media(max-width:760px), (max-height:560px) and (orientation:landscape){
  .tr-speeds{ flex:0 1 auto; gap:4px; margin-left:auto; min-width:0; }
  .tr-spd{ padding:5px 7px; font-size:11px; min-height:32px; }
}
/* Pozor: <style> uvnitř index.html se načítá AŽ za mobile.css, takže
   font-size musí mít !important — jinak vyhraje desktopových 17 px. */
@media(max-width:400px){
  .tr-title{ font-size:0 !important; flex:0 1 auto; min-width:0; }
  .tr-title img{ margin:0; }
  .tr-spd{ padding:5px 5px; font-size:10px; letter-spacing:0; }
}

/* Rozcestníkové seznamy („<a><strong>Název</strong></a> – popisek") měly
   na telefonu odkaz vysoký 20 px uprostřed věty. Název dostane vlastní
   řádek a plnohodnotnou dotykovou plochu, popisek zůstane pod ním —
   čte se to líp a dá se to trefit prstem. */
@media(max-width:760px){
  main li > a:first-child:has(> strong){
    display:flex; align-items:center; min-height:44px;
    padding:4px 0 2px; margin-top:2px;
  }
  main li > a:first-child:has(> strong) + br{ display:none; }
  main ul li, main ol li{ margin-bottom:9px; }

  /* Zpáteční odkaz pod článkem je samostatná navigace, ne text ve větě.
     inline-flex + align-items:center je tu kvůli svislému vystředění:
     jako inline-block se text držel horní řádky a pod ním zbývalo víc
     místa než nad ním. Vodorovné odsazení zůstává z .oc-kalk (9 px),
     aby zlatý rámeček text neobtiskl. */
  /* POZOR na specificitu: `.back-link` (0,1,0) prohrává s `a.oc-kalk`
     (0,1,1), takže u zlaté varianty se display:inline-flex vůbec
     neuplatnil — zůstal inline-block a text se držel horní řádky.
     Proto `a.back-link`. */
  a.back-link, a.back-link.oc-kalk{
    display:inline-flex; align-items:center; justify-content:center;
    min-height:44px; padding:6px 9px;
  }
}

/* ============================================================
   TRENAŽÉR ZÁKLADNÍ STRATEGIE NA TELEFONU
   Na 393x852 zabíralo záhlaví (poznámka, název, kategorie, pravidla,
   přepínač tabulky) 407 px z 852 a na samotnou hru zbylo 341 px — do
   kterých se filc vysoký 466 px nevešel. Tlačítka odpovědí tím padala
   pod okraj. Přestavba je stejná jako u trenažéru počítání: okno je
   celoobrazovkové, ovládání se stlačí do jedné řádky a hrací plocha
   dostane všechno, co zbyde.
   ============================================================ */
@media(max-width:760px), (max-height:560px) and (orientation:landscape){
  .bs-overlay{ padding:0; gap:0; }
  .bs-win{
    width:100%; height:100dvh; max-height:100dvh;
    border-radius:0; border:none; overflow:hidden;
    padding-bottom:env(safe-area-inset-bottom);
  }

  /* Varovná poznámka nad oknem ukrajovala 82 px. Že jde o ukázku,
     říká i odznak v hlavičce. */
  .bs-topnote{ display:none !important; }

  /* Hlavička: název na jeden řádek, celá obrazovka je fullscreen sama
     o sobě, takže tlačítko „Plná verze" nemá co zapínat. */
  .bs-head{ padding:8px 12px; gap:8px; flex:0 0 auto; }
  .bs-title{ font-size:13px; gap:7px; min-width:0; flex:1 1 auto;
             white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .bs-title img{ width:20px; height:20px; }
  .bs-demo{ display:none !important; }
  .bs-fsbtn{ display:none !important; }
  .bs-icobtn{ flex:0 0 auto; margin-left:auto; min-width:40px; min-height:40px;
              display:flex; align-items:center; justify-content:center; }

  /* Kategorie: jedna posuvná řádka místo dvou zalomených. */
  .bs-cats{
    flex:0 0 auto; flex-wrap:nowrap; overflow-x:auto; gap:6px;
    padding:8px 12px 8px; scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .bs-cats::-webkit-scrollbar{ display:none; }
  .bs-cat{ flex:0 0 auto; padding:8px 13px; font-size:12.5px; min-height:38px; }

  /* Pravidla: přepínač zůstává (mění správné odpovědi), popisný řádek
     pod ním měl 11,5 px a stejně se nedal přečíst. */
  .bs-rules{ flex:0 0 auto; flex-wrap:nowrap; overflow-x:auto; gap:7px;
             padding:0 12px 8px; scrollbar-width:none; }
  .bs-rules::-webkit-scrollbar{ display:none; }
  .bs-rlabel{ display:none; }
  .bs-variant{ flex:0 0 auto; }
  .bs-variant button{ padding:8px 12px; font-size:12px; min-height:38px; }
  .bs-rule{ flex:0 0 auto; padding:6px 6px; min-height:38px; font-size:12px; }
  .bs-ruleline{ display:none !important; }

  /* Hrací plocha bere zbytek. */
  .bs-play, .bs-stage{ flex:1 1 auto; min-height:0; }
  .bs-body{ padding:0 10px 8px; display:flex; flex-direction:column;
            height:100%; min-height:0; }
  .bs-felt{
    flex:1 1 auto; min-height:0; padding:10px 8px;
    display:flex; flex-direction:column; justify-content:center; gap:2px;
  }
  .bs-sub{ font-size:10px; letter-spacing:1.2px; }
  .bs-cards{ gap:7px; margin:6px 0 2px; }
  .bs-card{ width:48px; height:66px; font-size:20px; }
  .bs-splitcards .bs-card{ width:40px; height:56px; font-size:17px; }
  .bs-splitrow{ gap:16px; }
  .bs-q{ font-size:14px; margin:8px 0 2px; }
  .bs-owl{ width:34px; height:34px; }
  .bs-fb{ min-height:36px; margin-top:4px; }
  .bs-fb .verdict{ font-size:15px; }
  .bs-fb .why{ font-size:12px; }
  .bs-mega img{ width:110px; height:110px; }
  .bs-mega span{ font-size:17px; }

  /* Odpovědi: plnohodnotná tlačítka na dosah palce, vždy vidět. */
  /* Pozor: .bs-actwrap je sloupec, takže flex-basis na .bs-act by se
     počítal do VÝŠKY — tlačítka pak měla 88 px a na ležato přetékala.
     Pružnost proto patří na obal, ne na tlačítko. */
  .bs-acts{ gap:8px; margin:8px 0 2px; }
  .bs-actwrap{ flex:1 1 88px; min-width:0; }
  .bs-act{ width:100%; min-width:0; padding:13px 10px; font-size:15px;
           min-height:48px; }
  .bs-key{ display:none; }

  /* Patička: jedna řádka, čísla čitelně. */
  .bs-foot{ flex:0 0 auto; gap:10px; padding:8px 12px; flex-wrap:nowrap;
            overflow-x:auto; scrollbar-width:none; }
  .bs-foot::-webkit-scrollbar{ display:none; }
  .bs-reward{ font-size:12.5px; flex:0 0 auto; } .bs-reward img{ width:20px; height:20px; }
  .bs-owltotal{ font-size:11px; } .bs-score{ font-size:11.5px; flex:0 0 auto; }
  .bs-resetbtn{ flex:0 0 auto; min-height:38px; padding:6px 10px; font-size:11.5px; }
  .bs-hist{ flex:0 0 auto; }
  .bs-pip{ width:18px; height:18px; font-size:10px; }
}

/* Na ležato je málo výšky, ale hodně šířky: karty vlevo, odpovědi vpravo. */
@media(max-height:520px) and (orientation:landscape){
  .bs-cats, .bs-rules{ padding-top:6px; padding-bottom:6px; }
  .bs-cat, .bs-variant button, .bs-rule{ min-height:34px; }
  .bs-felt{ flex-direction:row; align-items:center; gap:14px; padding:8px 10px; }
  .bs-felt > *{ min-width:0; }
  .bs-cards{ margin:0; }
  .bs-card{ width:42px; height:58px; font-size:18px; }
  .bs-acts{ flex-direction:column; flex-wrap:nowrap; margin:0; gap:6px; flex:0 0 132px; }
  .bs-actwrap{ flex:0 0 auto; width:100%; }
  .bs-act{ width:100%; min-height:40px; padding:9px 10px; font-size:13.5px; }
  .bs-q{ font-size:13px; margin:4px 0; }
  .bs-owl{ display:none; }
  .bs-foot{ padding:5px 12px; }
}

/* Pojistka pro nejmenší displeje: na 320x568 vykukovala sova 8 px pod
   okraj. Sova je ozdoba, tlačítka ne — takže na úzkých displejích mizí
   a hrací plocha se pro jistotu smí posunout, když odpověď přidá text. */
@media(max-width:760px), (max-height:560px) and (orientation:landscape){
  .bs-body{ overflow-y:auto; }
}
@media(max-width:360px){
  .bs-owl{ display:none; }
  .bs-card{ width:42px; height:58px; font-size:18px; }
}

/* ------------------------------------------------------------------
   Trenažér počítání — vyplnění stolu na výšku
   Na 393x852 mělo hrací pole 613 px, ale karty 42x60 zabraly nahoře i
   dole jen po 144 px a mezi krupiérem a hráči zůstalo 309 px prázdna.
   Karty jsou přitom to jediné, co se v trenažéru čte. Zvětšují se tedy
   tak, aby plochu zaplnily — ne aby se do ní vešly.
   ------------------------------------------------------------------ */
@media(max-width:760px) and (orientation:portrait){
  .tr-table{ justify-content:space-evenly; padding:10px 8px; }
  .tr-card{ width:56px !important; height:78px !important; font-size:25px !important; }
  .tr-cards{ gap:5px; }
  .tr-seat-label{ font-size:10px; letter-spacing:.1em; }
  .tr-felt-owl{ width:150px; }
}
/* Na širokých displejích (430 px) se vejdou ještě větší. */
@media(min-width:400px) and (max-width:760px) and (orientation:portrait){
  .tr-card{ width:62px !important; height:86px !important; font-size:27px !important; }
}

/* Pruh s čísly pod stolem: „Running count" a hodnota stály vedle sebe
   bez mezery a slévaly se v „Running count0". Popisek patří nad číslo. */
@media(max-width:760px), (max-height:520px) and (orientation:landscape){
  .tr-mini > div{
    display:flex; flex-direction:column; align-items:flex-start;
    justify-content:center; gap:1px; line-height:1.15;
  }
  .tr-mini .l{ font-size:9.5px; letter-spacing:.06em; white-space:nowrap; }
  .tr-mini b{ font-size:16px; line-height:1; }
  .tr-mini{ gap:14px; }
}

/* Lišta „nainstalovat aplikaci" je fixed u spodního okraje se z-indexem
   280 — na kalkulačce by tedy sedla přesně na připnutá tlačítka počítání
   (ta jsou sticky, vysoká 125 px). Posune se nad ně a respektuje
   bezpečnou zónu pod displejem. */
@media(max-width:760px){
  .pwa-bar{
    left:8px; right:8px;
    bottom:calc(12px + env(safe-area-inset-bottom));
    padding:10px 12px; gap:8px;
  }
  .pwa-txt{ font-size:12.5px; }
  .pwa-ano, .pwa-ne{ min-height:44px; }
  body:has(#calcBlock) .pwa-bar{
    bottom:calc(133px + env(safe-area-inset-bottom));
  }
}

/* ------------------------------------------------------------------
   Škola počítání na telefonu
   Cvičení se drželo u horního okraje a pod ním zůstalo přes 400 px
   prázdna. Obsah se proto svisle vystředí. Volby +1 / 0 / −1 navíc
   dostanou stejné barvy jako v kalkulačce — je to totéž rozhodnutí,
   tak ať vypadá stejně (a je vidět, kam se trefit palcem).
   ------------------------------------------------------------------ */
@media(max-width:760px), (max-height:560px) and (orientation:landscape){
  /* Vystředit smí jen krátký pohled cvičení. Přehled lekcí je delší než
     obrazovka a „justify-content:center“ by u něj odřízl začátek. */
  #skLekceView{
    min-height:calc(100dvh - 130px);
    display:flex; flex-direction:column; justify-content:safe center;
  }
  .sk-hlava{ flex:0 0 auto; }
  .sk-plocha{ margin:14px 0 6px; }
  .sk-velka-karta{ width:96px !important; height:134px !important; font-size:44px !important; }
  .sk-otazka{ font-size:16px; }
  .sk-odpoved{ gap:8px; margin:18px 0 10px; }
  .sk-volba{
    flex:1 1 0; min-width:0; min-height:56px; font-size:19px; font-weight:800;
    border-radius:12px;
  }
  /* Pořadí v HTML je +1, 0, −1 — stejné jako tlačítka kalkulačky. */
  .sk-odpoved .sk-volba:nth-child(1){ background:#15803d; border-color:#22c55e; color:#fff; }
  .sk-odpoved .sk-volba:nth-child(2){ background:#3d3d63; border-color:#52527e; color:#fff; }
  .sk-odpoved .sk-volba:nth-child(3){ background:#c62828; border-color:#e04a4a; color:#fff; }
  .sk-volba:active{ transform:scale(.96); filter:brightness(1.2); }
  .bj-ovladani{ margin-top:14px; }
  .bj-ovladani .bj-btn{ min-height:46px; }
}
@media(max-height:520px) and (orientation:landscape){
  /* Na ležato už není co vystřeďovat — obsah ať zabere přesně výšku okna. */
  #skLekceView{ min-height:0; justify-content:flex-start; }
  .sk-velka-karta{ width:70px !important; height:98px !important; font-size:32px !important; }
  .sk-plocha{ margin:6px 0 2px; }
  .sk-volba{ min-height:44px; font-size:17px; }
  .sk-odpoved{ margin:10px 0 6px; }
}

/* Sbalený rejstřík otázek (skládá ho mobile.js). Vypadá jako tlačítko,
   protože se tak i chová. Podmínka musí sedět s mobil() v mobile.js —
   ten rejstřík skládá i na ležato, takže i tam potřebuje styl. */
@media(max-width:760px), (max-height:520px) and (orientation:landscape){
  .oc-rejstrik{
    border:1px solid var(--border); border-radius:12px;
    background:var(--panel); margin:14px 0 18px; overflow:hidden;
  }
  .oc-rejstrik > summary{
    list-style:none; cursor:pointer;
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    min-height:48px; padding:0 14px;
    font-size:12px; letter-spacing:1.3px; text-transform:uppercase;
    font-weight:700; color:var(--muted);
  }
  .oc-rejstrik > summary::-webkit-details-marker{ display:none; }
  .oc-rejstrik > summary::after{ content:"▾"; font-size:13px; color:var(--muted); }
  .oc-rejstrik[open] > summary::after{ content:"▴"; }
  .oc-rejstrik[open] > summary{ border-bottom:1px solid var(--border); }
  .oc-rejstrik .faq-toc{
    border:none; border-radius:0; background:transparent; margin:0; padding:12px 14px;
  }
  .oc-rejstrik .faq-toc li{ margin:0; }
  .oc-rejstrik .faq-toc li a{
    display:flex; align-items:center; min-height:44px; font-size:14.5px;
  }
}

/* Trenažér strategie na ležato: na 852x393 zbylo na hrací plochu 140 px,
   ale čtyři tlačítka odpovědí potřebují 182 — poslední se ořízlo a sloupec
   začal rolovat. Místo se bere tam, kde přebývá: řádka kategorií a řádka
   pravidel se spojí do jedné a přepínač referenční tabulky (na výšku
   užitečný) tu ustoupí — tabulku si hráč otevře na výšku. */
@media(max-height:520px) and (orientation:landscape){
  body .bs-tablewrap{ display:none !important; }
  .bs-cats{ padding-bottom:0; }
  .bs-rules{ padding-top:4px; }
  .bs-cat{ min-height:32px; padding:5px 11px; font-size:12px; }
  .bs-variant button, .bs-rule{ min-height:32px; }
  .bs-head{ padding:5px 12px; }
  .bs-foot{ padding:4px 12px; }
  .bs-acts{ flex:0 0 124px; gap:5px; }
  .bs-act{ min-height:38px; padding:7px 8px; font-size:13px; }
}

/* ------------------------------------------------------------------
   Formulářová pole a 16px
   Safari na iOS při klepnutí do pole s písmem menším než 16 px stránku
   přiblíží — a už ji sama neoddálí. Uživateli se rozjede rozvržení
   uprostřed zadávání. Je to jediné tvrdé pravidlo mobilní typografie,
   takže všechna pole mají 16 px bez ohledu na to, jak vypadají vedle
   okolního textu.
   ------------------------------------------------------------------ */
@media(max-width:760px), (max-height:560px) and (orientation:landscape){
  input, select, textarea,
  .rules-panel input, .rules-panel select,
  .rule-row select, .config-row select,
  .minicalc input, .bj-pole select, .bj-pole input{
    font-size:16px !important;
  }
}

/* ------------------------------------------------------------------
   Rozestupy dotykových cílů
   Doporučení je nechat mezi cíli aspoň 8 px, aby prst při stisku
   netrefil sousední. Tři místa byla pod mezí:
     · řádka odkazů v patičce (2 px) — je na všech stránkách
     · tlačítka počítání −1 / 0 / +1 (7 px)
     · rejstřík otázek na FAQ (0 px, 26 položek pod sebou)
   ------------------------------------------------------------------ */
@media(max-width:760px), (max-height:560px) and (orientation:landscape){
  .related, .site-footer .footer-links{
    display:flex; flex-wrap:wrap; justify-content:center;
    column-gap:14px; row-gap:10px;
  }
  .related > a, .site-footer .footer-links > a{
    display:inline-flex; align-items:center; min-height:40px; padding:0 2px;
  }

  .controls{ gap:9px; }
  .controls-secondary{ gap:9px; }

  /* Položky rejstříku oddělí linka i skutečná mezera — jinak na sebe
     dva 44px řádky navazují bez rozestupu. */
  .oc-rejstrik .faq-toc li + li{ border-top:1px solid var(--border); margin-top:8px; padding-top:8px; }
  .oc-rejstrik .faq-toc li a{ padding:2px 0; }
}

/* Zbylá místa s textem pod 16 px: odpovědi v kalkulačkovém FAQ a
   vysvětlivky pod výpočty. Poznámky pod čarou smí být menší než běžný
   text, ale ne o tolik — 14 px je spodní hranice, kde ještě jde
   o čitelný text a ne o drobné písmo. */
@media(max-width:760px), (max-height:560px) and (orientation:landscape){
  .calc-faq p, .calc-faq li{ font-size:16px; line-height:1.6; }
  /* .updated nese na části stránek jen datum, jinde ale celý úvodní
     odstavec (na FAQ 266 znaků). Proto zůstává na velikosti běžného
     textu — je to obsah, ne popiska pod obrázkem. */
  .page .updated{ font-size:16px; line-height:1.55; }
  .scfg-dlnote, .strat-rules-note,
  .minicalc-note, .figcap, figcaption{ font-size:14px; }
}

/* Rejstřík na FAQ stál 6 px od prvního nadpisu — pod doporučenými 8. */
@media(max-width:760px), (max-height:560px) and (orientation:landscape){
  .oc-rejstrik{ margin-bottom:22px; }
}

/* Vysvětlivky pod výpočty mají v HTML zapsáno style="font-size:13px".
   Vložený styl přebije každé pravidlo, takže tady je !important jediná
   cesta — a jen na telefonu, na počítači zůstává 13 px. Jde o celé věty
   o 120+ znacích, ne o popisky, takže patří na 14 px. */
@media(max-width:760px), (max-height:560px) and (orientation:landscape){
  .page > p[style*="font-size:13px"],
  .page p[style*="font-size:13px"]{ font-size:14px !important; line-height:1.55; }
  .page .strat-rules-note{ font-size:14px; }
  .deep-body p, .deep-body li{ font-size:15px; }
}

/* Vysvětlující bloky (.callout, .explain, .keycard) nesou celé věty —
   je to obsah stránky, ne popiska. 13,5 px byla velikost pro doplněk;
   na 15,5 px se čtou stejně jako okolní text, jen v rámečku. */
@media(max-width:760px), (max-height:560px) and (orientation:landscape){
  .callout{ font-size:15.5px; line-height:1.6; }
  .explain{ font-size:15.5px; line-height:1.6; }
  .keycard li, .keycard p{ font-size:15.5px; line-height:1.6; }
}

/* .ilink má white-space:nowrap — u krátkého odznaku uvnitř věty správně,
   ale v rozcestníku „Pokračuj" je celá karta jedno <a class="ilink">.
   Po zvětšení písma na 16 px se přestala na 320 px vejít a ořezávala se
   vpravo. V kartě se tedy zalamovat smí. */
@media(max-width:760px), (max-height:560px) and (orientation:landscape){
  .continue-block a,
  .continue-block a .why,
  .continue-block a span{ white-space:normal; }
}

/* ==================================================================
   HORNÍ LIŠTA A VYSOUVACÍ PANEL — přepracování
   Odznak 18+ se z lišty stěhuje do panelu (je to povinný údaj, ne
   ovládací prvek) a uvolněné místo dostává zkratka na kalkulačku.
   ================================================================== */
@media(max-width:760px), (max-height:520px) and (orientation:landscape){
  /* 18+ mizí z lišty — v panelu je pod „Nabídka" a nikam se neztratí. */
  .nav-tools{ display:none !important; }

  .nav{ gap:8px; }
  .brand{ flex:0 1 auto; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }


  /* Hlavička panelu: název vlevo, 18+ přesně uprostřed, křížek vpravo.
     Mřížka 1fr auto 1fr drží odznak na středu bez ohledu na délku názvu. */
  .oc-panel-hlava{
    display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  }
  .oc-panel-hlava > strong{ justify-self:start; }
  .oc-panel-hlava .oc-vek{
    justify-self:center;
    display:inline-flex; align-items:center; justify-content:center;
    min-width:38px; height:24px; padding:0 8px;
    border-radius:999px; border:1px solid rgba(248,113,113,.55);
    color:#f8a1a1; background:rgba(248,113,113,.10);
    font-size:11px; font-weight:800; letter-spacing:.06em;
  }
  .oc-panel-hlava .oc-panel-zavrit{ justify-self:end; }
}

/* Tři pilíře webu se v panelu odliší — ne křiklavě, jen tak, aby oko
   poznalo, co je hlavní obsah a co doplněk. */
@media(max-width:760px), (max-height:520px) and (orientation:landscape){
  .oc-panel a.nav-core{
    position:relative;
    font-weight:700; color:var(--text);
    background:linear-gradient(90deg, rgba(99,102,241,.10), transparent 62%);
  }
  .oc-panel a.nav-core::before{
    content:''; position:absolute; left:0; top:10px; bottom:10px;
    width:3px; border-radius:0 3px 3px 0; background:var(--accent);
  }
  .oc-panel a.nav-core.nav-live{
    background:linear-gradient(90deg, rgba(196,158,74,.16), transparent 62%);
    color:#f4e2a8;
  }
  .oc-panel a.nav-core.nav-live::before{ background:#d6b260; }
  .oc-panel a.oc-tady{ background:rgba(99,102,241,.16); }
}

/* ==================================================================
   KALKULAČKA NA TELEFONU — nové pořadí a váhy
   Shora dolů: hlavní čísla → posledních 10 karet → shoe → sázková
   lišta → rezervované místo v rozvržení → tlačítka. Lišty se zmenšily,
   aby se vešla řada karet zpátky, a váha se přesunula na +1 / 0 / −1,
   protože kvůli nim si člověk kalkulačku otevřel.
   ================================================================== */
@media(max-width:760px) and (orientation:portrait){
  /* Řada posledních karet je zpátky — menší, jen jako kontrola. */
  .last-cards{
    display:flex !important; gap:5px; margin-top:14px !important;
    flex-wrap:nowrap; justify-content:center;
  }
  .card-square{
    width:23px !important; height:23px !important;
    font-size:11px !important; border-radius:4px;
  }

  /* Obě lišty se stlačí — nesou doplňkový údaj, ne hlavní číslo. */
  .shoe-progress{ margin-top:12px !important; }
  .shoe-progress-label{ font-size:9.5px; margin-bottom:3px; }
  .progress-bar{ height:12px !important; }
  .shoe-info{ font-size:10px; margin-top:4px; }

  .betting-section{ margin-top:12px !important; gap:4px !important; }
  .betting-label{ font-size:9.5px; }
  .betting-bar{ height:12px !important; }
  .bet-zones{ font-size:10.5px; margin-top:2px; }
  .bet-advice{ font-size:14px; margin-top:5px !important; }
  .bet-units{ font-size:12px; }

  /* Rezervované místo v rozvržení mezi lištami a tlačítky. Nic
     nevykresluje — drží jen výšku, aby se nic neposunulo, až se sem
     jednou něco doplní. */
  #calcBlock [data-zone="mid"]{
    display:block; width:100%; height:60px; margin:10px 0 0;
  }

  /* Tlačítka: hlavní trojice co největší, Undo a Reset jako drobné
     doplňky pod nimi. */
  .controls{ grid-template-columns:repeat(3,1fr); gap:8px; }
  .controls .btn{ min-height:64px; font-size:22px; font-weight:900; }
  .controls .btn:nth-child(4),
  .controls .btn:nth-child(5){
    min-height:38px; font-size:12px; font-weight:700;
    background:transparent; border-color:var(--border); color:var(--muted);
  }
  .controls .btn:nth-child(4){ grid-column:1 / 3; }
  .controls .btn:nth-child(5){ grid-column:3 / 4; }

  /* Ve spodní řadě zbyly po přesunu zvuku dvě položky. */
  .controls-secondary{ gap:8px; }
  .controls-secondary .btn{ min-height:42px; font-size:12.5px; }
}

/* Zvuk v panelu Pravidla hry vypadá jako ostatní nastavení. */
@media(max-width:760px), (max-height:560px) and (orientation:landscape){
  .oc-zvuk-radek{ margin-top:10px; padding-top:10px; border-top:1px solid var(--border); }
  .oc-zvuk-radek #soundToggle{
    flex:0 0 auto; width:52%; max-width:190px; min-height:44px;
    font-size:14px; margin:0;
  }
}

/* Na nízkých displejích platí dál odstupňované ubírání: první jde řada
   karet, pak rezervované místo — tlačítka a true count zůstávají. */
/* Odstupňované ubírání s novými, těžšími tlačítky. Řada karet i
   rezervované místo jsou doplňky — jdou první, aby zůstal true count
   a plná velikost tlačítek. Práh je posunutý nahoru: se 64px tlačítky
   se na 740px displej obojí prostě nevejde. */
@media(max-width:760px) and (max-height:830px){
  #calcBlock [data-zone="mid"]{ display:none !important; }
}
@media(max-width:760px) and (max-height:800px){
  .last-cards{ display:none !important; }
}
@media(max-width:760px) and (max-height:670px){
  .controls .btn{ min-height:52px; font-size:18px; }
}
/* Nejnižší displeje (iPhone SE): tlačítka ustoupí, ale zůstanou
   největším prvkem na obrazovce. */
@media(max-width:760px) and (max-height:660px){
  .controls .btn{ min-height:46px; font-size:16px; }
  /* 38 px je dolní hranice i pro drobná tlačítka — místo se vzalo z mezer,
     ne z výšky cíle. */
  .controls .btn:nth-child(4),
  .controls .btn:nth-child(5){ min-height:38px; font-size:11px; }
  .controls{ gap:5px; margin-top:4px !important; }
  .betting-section{ margin-top:6px !important; }
  .shoe-progress{ margin-top:6px !important; }
}

/* ==================================================================
   KALKULAČKA — FINÁLNÍ NÁVRH (referenční displej iPhone 15 Pro, 393×852)
   ==================================================================
   Rozměry vycházejí z předlohy. Klíč celého rozvržení: volná plocha
   nad tlačítky je PRUŽNÁ (flex:1) a všechno ostatní má pevnou výšku —
   takže na vyšším displeji se roztáhne, na nižším smrskne a zbytek
   sestavy vypadá na každém telefonu stejně.
   ================================================================== */
@media(max-width:760px) and (orientation:portrait){

  /* ---- Hlavička ---- */
  .site-header{ padding:0; }
  .nav{ padding:10px 14px; gap:10px; min-height:63px; }
  /* Logo sedí v zaoblené destičce, jak je v návrhu. */
  .brand{ gap:10px; font-size:19px; font-weight:800; letter-spacing:-.01em; }
  .brand-logo{
    width:34px !important; height:34px !important;
    padding:5px; border-radius:10px;
    background:var(--btn-bg); border:1px solid var(--border);
    box-sizing:border-box;
  }
  /* Odznak BLACKJACK se na telefon vrací — v návrhu je. */
  .brand .chip{
    display:inline-block !important;
    padding:3px 8px; border-radius:5px;
    font-size:10px; font-weight:800; letter-spacing:.12em;
  }
  /* A 18+ zůstává v liště vedle přepínače. */
  .nav-tools{ display:flex !important; margin-left:auto; }
  .age-badge{
    width:30px !important; height:30px !important;
    font-size:11px !important; font-weight:800;
  }
  .nav-prepinac{ width:46px; height:46px; border-radius:12px; }

  /* ---- Blok kalkulačky: svislý tok s pružnou mezerou ---- */
  .tool-h1, .rules-info, .last-cards,
  .stats-row .stat-block:nth-child(3),
  .kbd-tip, .keys-hint, .shuffle-warning{ display:none !important; }

  #calcBlock{ padding:0 14px; }
  .counter-section{
    display:flex; flex-direction:column; align-items:stretch;
    min-height:calc(100dvh - 63px);
    margin:0; padding:0;
  }

  /* ---- Horní řada: Progresivní + Pravidla hry ---- */
  .top-controls{
    display:flex; justify-content:center; align-items:center;
    gap:10px; flex:0 0 auto; margin:20px 0 0; padding:0;
  }
  .top-controls > *{ flex:0 0 auto; }
  #progToggle, .rules-btn-special{
    min-height:33px; height:33px; padding:0 15px;
    border-radius:10px; font-size:13.5px; font-weight:600;
    display:inline-flex; align-items:center; justify-content:center;
    background:transparent; margin:0;
  }
  #progToggle{ border:1px solid rgba(74,222,128,.55); color:#4ade80; }
  .rules-btn-special{ border:1px solid rgba(99,102,241,.65); color:var(--link); }
  .simple-mode-btn{ display:none !important; }

  /* ---- True count ---- */
  .counter-section > .label{
    flex:0 0 auto; margin:18px 0 0;
    font-size:11.5px; letter-spacing:.22em; text-transform:uppercase;
    color:var(--muted); text-align:center;
  }
  .counter-section > .label a{
    background:none !important; border:none !important; padding:0 !important;
    color:inherit !important; font-size:inherit !important; font-weight:inherit !important;
  }
  #count{
    flex:0 0 auto; margin:2px 0 0;
    font-size:82px !important; line-height:1.02; font-weight:800;
    letter-spacing:-.03em; text-align:center;
  }
  #advantage{
    flex:0 0 auto; margin:2px 0 0 !important;
    font-size:18px; font-weight:800; letter-spacing:.04em; text-align:center;
  }

  /* ---- Running + Výhoda ---- */
  .stats-row{
    flex:0 0 auto; display:flex !important; justify-content:center;
    gap:44px !important; margin:22px 0 0 !important;
  }
  .stats-row .stat-block{ text-align:center; }
  .stat-label{
    font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
  }
  .stat-label a{
    background:none !important; border:none !important; padding:0 !important;
    color:inherit !important; font-size:inherit !important; font-weight:inherit !important;
  }
  .tc-value, .edge-value{
    font-size:38px !important; font-weight:800; line-height:1.1; margin-top:2px;
  }

  /* ---- Pozice v shoe ---- */
  .shoe-progress{ flex:0 0 auto; margin:20px 0 0 !important; }
  .shoe-progress-label{
    font-size:11px; letter-spacing:.16em; text-transform:uppercase;
    color:var(--muted); text-align:center; margin-bottom:9px;
  }
  .cut-card-label{ display:none !important; }
  .progress-bar{ height:15px !important; border-radius:8px; overflow:hidden; }
  .shoe-info{ font-size:13px; margin-top:10px; text-align:center; }

  /* ---- Sázková strategie ---- */
  .betting-section{ flex:0 0 auto; margin:14px 0 0 !important; gap:0 !important; }
  .betting-label{
    font-size:11px; letter-spacing:.16em; text-transform:uppercase;
    color:var(--muted); text-align:center; margin-bottom:13px;
  }
  .betting-bar{ height:18px !important; border-radius:9px; }
  .bet-zones{
    display:flex !important; justify-content:space-between;
    font-size:12px; margin-top:11px;
  }
  /* V návrhu je jen pět čísel — devět se na 393 px slilo dohromady. */
  .bet-zones span:nth-child(2), .bet-zones span:nth-child(5),
  .bet-zones span:nth-child(7), .bet-zones span:nth-child(8){ display:none; }
  .bet-advice{ display:none !important; }
  .bet-units{ font-size:16px; margin-top:12px !important; text-align:center; }

  /* ---- Volná plocha ----
     Jediný pružný prvek sestavy: dorovnává rozdíl mezi výškou displeje
     a zbytkem obsahu. Zatím nic nevykresluje. */
  #calcBlock [data-zone="mid"]{
    display:block !important; width:100%;
    flex:1 1 auto; min-height:40px;
    margin:22px 0 13px;
  }

  /* ---- Tlačítka ---- */
  .controls{
    flex:0 0 auto; position:static; z-index:auto;
    display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
    padding:0; margin:0 !important; background:none;
  }
  .controls .btn{
    min-height:76px; height:76px; border-radius:12px;
    font-size:27px; font-weight:800; padding:0;
  }
  .controls .btn:nth-child(4),
  .controls .btn:nth-child(5){
    min-height:42px; height:42px; margin-top:12px;
    font-size:15px; font-weight:600; border-radius:11px;
    background:var(--btn-bg); color:var(--text);
  }
  .controls .btn:nth-child(4){ grid-column:1 / 3; }
  .controls .btn:nth-child(5){
    grid-column:3 / 4; background:transparent;
    border-color:rgba(248,113,113,.45); color:#f87171;
  }

  .controls-secondary{
    flex:0 0 auto; display:flex; gap:10px;
    margin:12px 0 calc(14px + env(safe-area-inset-bottom,0px)) !important;
  }
  .controls-secondary .btn{ flex:1 1 0; min-height:44px; font-size:13px; }
}

/* Přemapování kláves nemá na telefonu smysl (není klávesnice) a v doplňkové
   řadě lámalo tlačítka do dvou řádků. */
@media(max-width:760px){ .bind-wrap{ display:none !important; } }

/* Doladění na rozměry z návrhu. Obaly lišt si nesou vlastní mezery z
   desktopu (a místo po skryté cedulce CUT CARD) — tady se nulují, aby
   odstupy odpovídaly předloze. */
@media(max-width:760px) and (orientation:portrait){
  .site-header .nav{ padding:8px 14px; min-height:0; }
  .counter-section{ min-height:calc(100dvh - 63px); }

  .counter-section > .label{ margin:18px 0 0 !important; line-height:1.2; }
  #count{ margin:2px 0 0 !important; }
  #advantage{ line-height:1.2; height:auto; }

  .progress-bar-wrap{ margin:0 !important; padding:0 !important; }
  .shoe-progress{ gap:0 !important; }
  .betting-bar-wrap{ margin:0 !important; padding:0 !important; }
  .shoe-info{ margin-top:10px !important; }

  /* .controls-secondary nese i třídu .controls, takže mu velikost tlačítek
     musí přebít pravidlo o stejné specificitě zapsané POZDĚJI. */
  .controls.controls-secondary .btn{
    min-height:44px !important; height:44px !important;
    font-size:13px !important; font-weight:600;
  }
}

/* Celá sestava je jeden svislý flex sloupec.
   .counter-section dostane display:contents, takže se její děti chovají,
   jako by byly přímo v #calcBlock — jinak by pružná mezera dorovnávala
   jen vnitřek sekce a ne celou obrazovku. */
@media(max-width:760px) and (orientation:portrait){
  #calcBlock{
    display:flex; flex-direction:column;
    min-height:calc(100dvh - 63px);
    box-sizing:border-box;
  }
  .counter-section{ display:contents; }
  .counter-section > .label{ margin-top:18px !important; }
  /* Řádky tlačítek odděluje mřížková mezera, další margin by ji zdvojil. */
  .controls .btn:nth-child(4),
  .controls .btn:nth-child(5){ margin-top:0; }
}

/* Sestava má končit spodní hranou displeje řadou Undo / Reset — přesně
   jako v návrhu. Doplňková řada (trenažér) je záměrně až pod ohybem,
   takže se do výšky sloupce musí připočíst, jinak by pružnou mezeru
   ukrojila. --oc-pod-ohybem = její výška i s okraji. */
@media(max-width:760px) and (orientation:portrait){
  #calcBlock{
    --oc-pod-ohybem:70px;
    min-height:calc(100dvh - 63px + var(--oc-pod-ohybem));
  }
  /* Na nízkých displejích ustupuje volná plocha úplně — tlačítka jsou
     přednější než rezerva na později. */
  #calcBlock [data-zone="mid"]{ min-height:0; }
}

/* Návrh je hotový pro 852 px na výšku. Na nižších displejích se sestava
   musí stáhnout, jinak by tlačítka spadla pod ohyb — a ta jsou při hře
   to jediné, co člověk mačká. Zmenšují se mezery a velké číslo, pořadí
   a podoba prvků zůstávají. */
@media(max-width:760px) and (orientation:portrait) and (max-height:830px){
  #count{ font-size:62px !important; }
  #advantage{ font-size:16px; }
  .counter-section > .label{ margin-top:14px !important; }
  .stats-row{ margin-top:14px !important; }
  .tc-value, .edge-value{ font-size:32px !important; }
  .shoe-progress{ margin-top:14px !important; }
  .betting-section{ margin-top:11px !important; }
  .bet-units{ font-size:15px; margin-top:9px !important; }
  #calcBlock [data-zone="mid"]{ margin:14px 0 11px; }
  .controls .btn{ min-height:68px; height:68px; font-size:24px; }
}
@media(max-width:760px) and (orientation:portrait) and (max-height:700px){
  .top-controls{ margin-top:12px; }
  #count{ font-size:52px !important; }
  .counter-section > .label{ margin-top:10px !important; }
  .stats-row{ margin-top:10px !important; }
  .tc-value, .edge-value{ font-size:27px !important; }
  .shoe-progress{ margin-top:10px !important; }
  .shoe-info{ margin-top:7px !important; font-size:12px; }
  .betting-section{ margin-top:9px !important; }
  .bet-zones{ margin-top:8px; }
  .bet-units{ margin-top:7px !important; }
  #calcBlock [data-zone="mid"]{ margin:10px 0 9px; }
  .controls .btn{ min-height:58px; height:58px; font-size:21px; }
  .controls .btn:nth-child(4), .controls .btn:nth-child(5){ min-height:38px; height:38px; }
}

/* Horní dvojice má podle návrhu 33 px — vypadá tak líp, ale prstem se to
   trefuje mizerně. Rámeček proto zůstává 33px vysoký a dotyková plocha se
   neviditelně roztáhne přes celou výšku řádku (45 px). Vzhled beze změny,
   trefit se dá. */
@media(max-width:760px) and (orientation:portrait){
  #progToggle, .rules-btn-special{ position:relative; }
  #progToggle::after, .rules-btn-special::after{
    content:''; position:absolute; left:0; right:0; top:-6px; bottom:-6px;
    border-radius:inherit;
  }
}

/* ---- Doladění podle předlohy: čtyři odchylky ----
   1) Undo a Reset jsou v návrhu dvě stejné poloviny, ne 2/3 + 1/3.
   2) Sázková lišta je čistý přechod — rysky v ní návrh nemá.
   3) Odznak BLACKJACK je v návrhu tlumený, ne plná indigo plocha.
   4) Destička s logem má 26 px, ne 34. */
@media(max-width:760px) and (orientation:portrait){
  .controls .btn:nth-child(4){ grid-column:1 / 3 !important; }
  .controls .btn:nth-child(5){ grid-column:3 / 4 !important; }
  .controls{ grid-template-columns:repeat(6,1fr); }
  .controls .btn:nth-child(1){ grid-column:1 / 3; }
  .controls .btn:nth-child(2){ grid-column:3 / 5; }
  .controls .btn:nth-child(3){ grid-column:5 / 7; }
  .controls .btn:nth-child(4){ grid-column:1 / 4 !important; }
  .controls .btn:nth-child(5){ grid-column:4 / 7 !important; }

  .bet-tick{ display:none !important; }

  .brand .chip{
    background:rgba(99,102,241,.18) !important;
    border:1px solid rgba(99,102,241,.55);
    color:#a5b0ff !important;
  }

  .brand-logo{ width:26px !important; height:26px !important; padding:3px; border-radius:8px; }
}

/* ---- Krátké popisky přes ::before ----
   Kalkulačka si obsah popisků při každé aktualizaci vykresluje znovu,
   takže přepis textu z JavaScriptu po prvním rozdání zmizel. Tohle je
   čistě vzhledová náhrada — překreslení obsahu ji nemá jak přebít. */
@media(max-width:760px) and (orientation:portrait){
  .counter-section > .label,
  .stats-row .stat-block:nth-child(1) .stat-label,
  .stats-row .stat-block:nth-child(2) .stat-label,
  .shoe-progress-label,
  .betting-label{ font-size:0 !important; }

  .counter-section > .label::before{ content:"True count"; }
  .stats-row .stat-block:nth-child(1) .stat-label::before{ content:"Running"; }
  .stats-row .stat-block:nth-child(2) .stat-label::before{ content:"Výhoda"; }
  .shoe-progress-label::before{ content:"Pozice v shoe"; }
  .betting-label::before{ content:"Sázková strategie"; }

  .counter-section > .label::before{
    font-size:11.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--muted);
  }
  .stats-row .stat-label::before{
    font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
  }
  .shoe-progress-label::before, .betting-label::before{
    font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
  }
  /* Odkaz na slovník uvnitř popisku by vykreslil svůj rámeček i při
     nulovém písmu — na telefonu je popisek jen popiskem. */
  .counter-section > .label a, .stats-row .stat-label a{
    display:none !important;
  }
}

/* Velké číslo i running count si barvu řídí sama kalkulačka podle
   countu (zelená / bílá / červená) — do toho se na telefonu nesahá. */

/* ==================================================================
   PŘESNÉ USAZENÍ PODLE PŘEDLOHY
   ==================================================================
   Odstupy se dosud nastavovaly mezi rámečky prvků, jenže ty jsou kvůli
   řádkování vyšší než samotné písmo — vizuálně proto sestava „ujížděla"
   dolů a k tlačítkům se nasčítalo skoro 60 px navíc. Řádkování se tady
   srovná na 1, takže rámeček sedí na písmu, a mezery odpovídají tomu,
   co je odměřené z návrhu.
   ================================================================== */
@media(max-width:760px) and (orientation:portrait){
  .counter-section > .label::before,
  .stats-row .stat-label::before,
  .shoe-progress-label::before,
  .betting-label::before{ display:block; line-height:1; }

  .counter-section > .label{ margin-top:17px !important; line-height:1; }
  #count{ margin-top:21px !important; line-height:1; font-size:86px !important; }
  #advantage{ margin-top:12px !important; line-height:1; font-size:15px; }
  .stats-row{ margin-top:24px !important; align-items:flex-start; }
  .stat-label{ line-height:1; }
  .tc-value, .edge-value{ margin-top:13px !important; line-height:1; font-size:30px !important; }

  .shoe-progress{ margin-top:21px !important; }
  .shoe-progress-label{ margin-bottom:9px !important; }
  .shoe-info{ margin-top:10px !important; line-height:1; font-size:13px; }

  .betting-section{ margin-top:14px !important; }
  .betting-label{ margin-bottom:13px !important; }
  .bet-zones{ margin-top:12px !important; line-height:1; font-size:12px; }
  .bet-units{ margin-top:13px !important; line-height:1; font-size:15px; }

  #calcBlock [data-zone="mid"]{ margin:23px 0 13px !important; }
  .controls{ gap:12px; }
  .controls .btn:nth-child(4),
  .controls .btn:nth-child(5){ height:43px; min-height:43px; }
}


/* ==================================================================
   VELIKOST HLAVNÍHO ČÍSLA PODLE VÝŠKY DISPLEJE
   ==================================================================
   V návrhu zabírá číslo zhruba 56 % šířky obsahu — je to dominanta celé
   obrazovky. Na referenčních 852 px tomu odpovídá 104 px. Na nižších
   displejích se musí zmenšit, jinak vytlačí tlačítka pod ohyb. Blok je
   proto poslední a řeší velikost i okolní mezery pro každý stupeň zvlášť.
   ================================================================== */
@media(max-width:760px) and (orientation:portrait) and (min-height:831px){
  #count{ font-size:104px !important; margin-top:14px !important; }
  #advantage{ margin-top:10px !important; font-size:16px; }
  .stats-row{ margin-top:20px !important; }
}
@media(max-width:760px) and (orientation:portrait) and (max-height:830px) and (min-height:781px){
  #count{ font-size:92px !important; margin-top:12px !important; }
  #advantage{ margin-top:9px !important; font-size:15px; }
  .stats-row{ margin-top:18px !important; }
  .tc-value, .edge-value{ font-size:28px !important; margin-top:11px !important; }
}
@media(max-width:760px) and (orientation:portrait) and (max-height:780px) and (min-height:701px){
  #count{ font-size:74px !important; margin-top:10px !important; }
  #advantage{ margin-top:8px !important; font-size:14px; }
  .stats-row{ margin-top:15px !important; }
  .tc-value, .edge-value{ font-size:26px !important; margin-top:9px !important; }
  .shoe-progress{ margin-top:15px !important; }
  .betting-section{ margin-top:11px !important; }
  #calcBlock [data-zone="mid"]{ margin:14px 0 11px !important; }
}
@media(max-width:760px) and (orientation:portrait) and (max-height:700px) and (min-height:621px){
  #count{ font-size:62px !important; margin-top:8px !important; }
  #advantage{ margin-top:7px !important; font-size:13px; }
  .stats-row{ margin-top:12px !important; }
  .tc-value, .edge-value{ font-size:23px !important; margin-top:8px !important; }
  .shoe-progress{ margin-top:12px !important; }
  .shoe-info{ margin-top:7px !important; font-size:12px; }
  .betting-section{ margin-top:9px !important; }
  .bet-zones{ margin-top:8px !important; }
  .bet-units{ margin-top:8px !important; font-size:14px; }
  #calcBlock [data-zone="mid"]{ margin:10px 0 9px !important; }
}
@media(max-width:760px) and (orientation:portrait) and (max-height:620px){
  #count{ font-size:52px !important; margin-top:6px !important; }
  #advantage{ margin-top:5px !important; font-size:12px; }
  .counter-section > .label{ margin-top:10px !important; }
  .stats-row{ margin-top:9px !important; }
  .tc-value, .edge-value{ font-size:20px !important; margin-top:6px !important; }
  .shoe-progress{ margin-top:9px !important; }
  .shoe-progress-label{ margin-bottom:6px !important; }
  .shoe-info{ margin-top:6px !important; font-size:11.5px; }
  .betting-section{ margin-top:8px !important; }
  .betting-label{ margin-bottom:8px !important; }
  .bet-zones{ margin-top:7px !important; }
  .bet-units{ margin-top:7px !important; font-size:13px; }
  #calcBlock [data-zone="mid"]{ margin:8px 0 8px !important; }
}

/* ==================================================================
   SESTAVA SE ŠKÁLUJE, NEUBÍRÁ SE Z NÍ
   ==================================================================
   Návrh je nakreslený na celou obrazovku iPhonu 15 Pro (852 px). Safari
   ale stránce dá jen ~660 px — zbytek si bere adresní řádek a spodní
   lišta. Dosavadní stupně na to reagovaly tím, že části návrhu MAZALY
   (slovní stav pod číslem, popisky u obou lišt), takže na telefonu
   vznikla jiná sestava než v návrhu.

   Nic se proto neubírá. Všechny rozměry i mezery jsou v dvh a odvozené
   od návrhu tak, že při 852 px sedí na pixel; na nižším výřezu se celá
   sestava proporčně zmenší a rozvržení zůstane stejné. clamp() drží
   spodní meze čitelnosti a dotykových cílů.
   ================================================================== */
@media(max-width:760px) and (orientation:portrait){
  /* Nic z návrhu nesmí zmizet, ať je výřez jakkoli nízký. */
  #advantage, .shoe-progress-label, .betting-label, .bet-zones{ display:block !important; }
  .bet-zones{ display:flex !important; }

  .top-controls{ margin-top:2.35dvh !important; gap:1.2dvh; }
  #progToggle, .rules-btn-special{
    height:clamp(30px, 3.87dvh, 36px); min-height:clamp(30px, 3.87dvh, 36px);
    font-size:clamp(12px, 1.58dvh, 14px);
  }

  .counter-section > .label{ margin-top:2.0dvh !important; }
  .counter-section > .label::before{ font-size:clamp(10px, 1.35dvh, 12px) !important; }

  #count{
    margin-top:1.64dvh !important;
    font-size:clamp(44px, 12.21dvh, 106px) !important;
  }
  #advantage{
    margin-top:1.17dvh !important;
    font-size:clamp(12px, 1.88dvh, 17px) !important;
  }

  .stats-row{ margin-top:2.35dvh !important; gap:5.16dvh !important; }
  .stats-row .stat-label::before{ font-size:clamp(10px, 1.35dvh, 12px) !important; }
  .tc-value, .edge-value{
    margin-top:1.53dvh !important;
    font-size:clamp(20px, 3.52dvh, 32px) !important;
  }

  .shoe-progress{ margin-top:2.46dvh !important; }
  .shoe-progress-label{ margin-bottom:1.06dvh !important; }
  .shoe-progress-label::before{ font-size:clamp(10px, 1.29dvh, 12px) !important; }
  .progress-bar{ height:clamp(10px, 1.76dvh, 16px) !important; }
  .shoe-info{ margin-top:1.17dvh !important; font-size:clamp(11px, 1.53dvh, 14px) !important; }

  .betting-section{ margin-top:1.64dvh !important; }
  .betting-label{ margin-bottom:1.53dvh !important; }
  .betting-label::before{ font-size:clamp(10px, 1.29dvh, 12px) !important; }
  .betting-bar{ height:clamp(12px, 2.11dvh, 19px) !important; }
  .bet-zones{ margin-top:1.41dvh !important; font-size:clamp(10px, 1.41dvh, 13px) !important; }
  .bet-units{ margin-top:1.53dvh !important; font-size:clamp(12px, 1.76dvh, 16px) !important; }

  #calcBlock [data-zone="mid"]{ margin:2.7dvh 0 1.53dvh !important; min-height:0; }

  .controls{ gap:clamp(8px, 1.41dvh, 13px) !important; }
  .controls .btn{
    height:clamp(48px, 8.92dvh, 78px) !important; min-height:clamp(48px, 8.92dvh, 78px) !important;
    font-size:clamp(19px, 3.17dvh, 28px) !important;
  }
  .controls .btn:nth-child(4), .controls .btn:nth-child(5){
    height:clamp(36px, 5.05dvh, 44px) !important; min-height:clamp(36px, 5.05dvh, 44px) !important;
    font-size:clamp(12px, 1.76dvh, 16px) !important;
  }
  .controls.controls-secondary .btn{
    height:clamp(38px, 5.16dvh, 46px) !important; min-height:clamp(38px, 5.16dvh, 46px) !important;
  }
}

/* Výška sloupce počítá i s doplňkovou řadou pod ohybem — ta se teď taky
   škáluje, takže pevných 70 px nesedělo a tlačítka přestřelila okraj
   o 5–20 px. A pružná mezera musí umět zmizet úplně. */
@media(max-width:760px) and (orientation:portrait){
  #calcBlock{
    --oc-pod-ohybem:calc(clamp(38px, 5.16dvh, 46px) + 26px);
  }
  #calcBlock [data-zone="mid"]{ min-height:0 !important; flex:1 1 0 !important; }
}

/* Logo v liště bez vlastní destičky — sova stojí přímo na pozadí a je
   zhruba tak vysoká jako nápis vedle ní. Dřív ji rámeček opticky zmenšil
   (z 26 px zbylo po odsazení 20 px vlastního obrázku). */
@media(max-width:760px){
  .brand-logo{
    width:28px !important; height:28px !important;
    padding:0 !important; border:none !important;
    background:none !important; border-radius:0 !important;
  }
}


/* ==================================================================
   DVOJKLEP NEPŘIBLIŽUJE — VYPNUTO NA CELÉM WEBU
   ==================================================================
   Safari na iOS po klepnutí ~300 ms čeká, jestli nepřijde druhé, a když
   přijde, přiblíží stránku. Při rychlém počítání karet i při proklikávání
   trenažérů se to spouští pořád.

   Výčet konkrétních tlačítek na to nestačil — interaktivních prvků je
   po webu spousta (trenažéry, škola, přepínače pravidel, karty na stole)
   a na každý nový by se muselo myslet. Proto se dvojklep vypíná plošně.

   POZOR na rozdíl oproti user-scalable=no v <meta viewport>: ten by
   zakázal i přiblížení dvěma prsty, které lidé se slabším zrakem
   potřebují a které kvůli přístupnosti zakazovat nesmíme.
   `touch-action:manipulation` vypne JEN dvojklep — posouvání stránky
   i přiblížení prsty zůstávají.

   Na myši a trackpadu nemá touch-action žádný účinek, takže se na
   počítači nemění nic. */
html{ touch-action:manipulation; }
*, *::before, *::after{ touch-action:manipulation; }

/* U tlačítek navíc: dlouhý stisk nemá vyvolávat lupu s výběrem textu
   ani modrý záblesk přes celý prvek. */
button, .btn, .bj-btn, .bs-act, .tr-btn, .sk-volba, .bs-cat, .tr-spd,
[role="button"], .nav-prepinac, .oc-sekce-btn, summary{
  -webkit-user-select:none; user-select:none;
  -webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;
}

/* Pruh „Zpět ke hře" v referenční tabulce. Leží nad panelem tabulky
   (ten má z-index 20) a ukazuje se jen když je tabulka otevřená.
   Na ležato platí taky — právě tam byl přepínač schovaný a z tabulky
   nevedla cesta ven vůbec. */
@media(max-width:760px), (max-height:560px) and (orientation:landscape){
  .oc-tab-zpet{ display:none; }
  .bs-win.tableopen .oc-tab-zpet{
    display:flex; align-items:center; justify-content:center;
    position:absolute; left:12px; right:12px;
    bottom:calc(10px + env(safe-area-inset-bottom,0px));
    z-index:21; min-height:46px; border-radius:12px;
    background:var(--btn-bg); border:1px solid var(--border); color:var(--text);
    font:inherit; font-size:14px; font-weight:700; cursor:pointer;
    box-shadow:0 -6px 18px rgba(10,10,24,.9);
  }
  .bs-win.tableopen .oc-tab-zpet:active{ transform:scale(.98); filter:brightness(1.15); }
  /* Panel má dole místo, aby pruh nepřekrýval poslední řádek tabulky. */
  body .bs-win.tableopen .bs-tablepanel{ padding-bottom:72px; }
}
/* Na ležato se přepínač tabulky skrývá, ale otevřít ji lze z výšky
   a po otočení by zůstala bez východu — pruh proto zůstává i tam. */
@media(max-height:520px) and (orientation:landscape){
  .bs-win.tableopen .oc-tab-zpet{ min-height:38px; font-size:13px; }
}

/* ==================================================================
   TRENAŽÉR POČÍTÁNÍ — STŮL, KARTY, LOGO, POPISKY
   ================================================================== */
@media(max-width:760px) and (orientation:portrait){

  /* ---- Sova na pozadí ----
     Obrázek je 384×384. Dostával jen šířku, takže se v pružném stole
     roztáhl do výšky a byl z něj protáhlý flek. Drží se poměr a kreslí
     se doprostřed stolu. */
  .tr-felt-owl{
    width:min(46vw, 190px) !important;
    height:auto !important;
    aspect-ratio:1 / 1; object-fit:contain;
    opacity:.05;
  }

  /* ---- Karty ----
     Předtím měly 56 px při max-width 150 px, takže se do řádku vešly
     dvě a zbytek se lámal pod sebe. Ruce pak přerostly stůl, sloupce
     se překryly a přelezly přes čísla. Karta je menší a místo pro ruku
     širší, takže se tři vejdou vedle sebe a čtvrtá začne druhou řadu. */
  .tr-card{
    width:38px !important; height:53px !important; font-size:17px !important;
    border-radius:6px; flex:0 0 auto;
  }
  .tr-cards{
    gap:4px; max-width:none !important; width:100%;
    align-content:flex-start; min-height:0;
  }
  .tr-seat{ min-width:0; flex:1 1 0; gap:4px; }
  .tr-players{ gap:4px; align-items:flex-start; }

  /* Stůl se nesmí roztáhnout přes čísla — když karet přibude, roluje
     uvnitř sebe místo toho, aby přerostl okno. */
  .tr-table{
    min-height:0 !important; overflow-y:auto;
    justify-content:flex-start !important; gap:10px;
    padding:10px 8px 12px;
  }
  .tr-dealer{ flex:0 0 auto; }
  .tr-players{ flex:0 0 auto; }
  .tr-seat-label{ font-size:9.5px; letter-spacing:.08em; }

  /* ---- Popisky na tlačítkách ----
     Rozsah karet pod číslem byl drobný a přilepený nalevo. */
  .tr-btn{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; }
  .tr-btn small{
    display:block; width:100%; text-align:center;
    font-size:12px !important; font-weight:700; opacity:.85; margin:0 !important;
    letter-spacing:.04em;
  }
}

/* Na širších telefonech se karty smí trochu zvětšit. */
@media(min-width:400px) and (max-width:760px) and (orientation:portrait){
  .tr-card{ width:42px !important; height:59px !important; font-size:19px !important; }
}

/* Sova s hodnocením v trenažéru strategie se na telefonu lámala mezi
   hrací plochou a patičkou — půlka byla v jednom, půlka v druhém.
   Není to údaj, podle kterého se hraje, takže na telefonu odchází. */
@media(max-width:760px), (max-height:560px) and (orientation:landscape){
  .bs-owl, .bs-owlwrap, .bs-ring{ display:none !important; }
}


/* Krupiér nahoře, hráči u spodní hrany stolu — mezi nimi se prostor
   rozdělí sám. Pružná mezera je lepší než space-evenly: když karet
   přibude a stůl začne rolovat, space-evenly by ukrojil horní řadu. */
@media(max-width:760px) and (orientation:portrait){
  .tr-table{ justify-content:flex-start !important; }
  .tr-table .tr-players{ margin-top:auto; }
}

/* Na ležato platily pořád staré hodnoty — opravy výše mířily jen na
   výšku (orientation:portrait). Sova se tam roztahovala (poměr 0,47
   místo 1,00), popisky míst i rozsahy na tlačítkách měly 9 px. */
@media(max-width:760px), (max-height:560px) and (orientation:landscape){
  .tr-felt-owl{
    width:min(28vw, 150px) !important; height:auto !important;
    aspect-ratio:1 / 1; object-fit:contain;
  }
  .tr-seat-label{ font-size:10px !important; letter-spacing:.08em; }
  .tr-btn{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; }
  .tr-btn small{
    display:block; width:100%; text-align:center;
    font-size:10.5px !important; font-weight:700; opacity:.85; margin:0 !important;
  }
}

/* Vysvětlivky v panelu Pravidla hry měly 11,5 px, přitom jde o celé věty
   (330 znaků o presetech kasin). Stejná spodní mez jako u ostatních
   poznámek na webu — 13,5 px. */
@media(max-width:760px), (max-height:560px) and (orientation:landscape){
  .rules-panel .keys-note{ font-size:13.5px !important; line-height:1.55; }
  .rules-panel .keys-panel-title{ font-size:12px !important; }
}

/* Panel s referenční tabulkou měl krytí 0,97 a přes horní okraj
   prosvítal nadpis trenažéru i křížek — vypadalo to jako duch pod
   tabulkou. Plné krytí. */
@media(max-width:760px), (max-height:560px) and (orientation:landscape){
  body .bs-win.tableopen .bs-tablepanel{ background:#0b0b18; }
}

/* ==================================================================
   ČITELNÁ SPODNÍ MEZ POPISKŮ  (přístupnost)
   ==================================================================

   Kontrola napříč webem našla popisky o velikosti 9,5 až 10,5 px —
   nejmenší z nich přímo na tlačítkách (rychlost v trenažéru počítání).
   Na telefonu v šeru u stolu je to pod hranicí, kterou člověk přečte
   bez mhouření.

   WCAG žádnou minimální velikost písma nepředepisuje, takže tohle není
   splnění normy, ale prostá čitelnost. Mez je 11,5 px pro popisky
   a 12 px pro text, na který se klepe.

   CO SE ZÁMĚRNĚ NEZVĚTŠUJE
   ------------------------
   - Buňky tabulky basic strategy (11 px). Je jich 280 a musí se vejít
     na 393 px bez posouvání do stran. Větší písmo = vodorovné rolování,
     což je horší než menší písmo.
   - Odznaky obchodů („Brzy na Google Play") a štítek BLACKJACK u značky.
     Drobný text je tam součástí zavedené podoby odznaku, ne informace.
   - Undo a Reset shoe v kalkulačce zůstávají malé záměrně — je to
     vyžádané rozvržení a 36 px stále splňuje WCAG 2.2 (min. 24 × 24).

   Blok stojí na konci souboru schválně: přebíjí desítku roztroušených
   pravidel v jednotlivých stupních výšky, které by se jinak musely
   opravovat jedno po druhém. */
@media(max-width:760px), (max-height:560px) and (orientation:landscape){

  /* Trenažér počítání — HUD a ovládání */
  .tr-spd{ font-size:12px !important; min-height:36px !important; padding:6px 10px !important; }
  .tr-tc-label{ font-size:11.5px !important; }
  .tr-seat-label{ font-size:11px !important; }
  .tr-adv{ font-size:11.5px !important; }
  .tr-mini .l{ font-size:11px !important; }
  .tr-key small, .tr-btn small{ font-size:11.5px !important; }

  /* Trenažér základní strategie */
  .bs-sub{ font-size:11.5px !important; }

  /* Rozcestníky na článcích — nadřazený štítek nad nadpisem */
  .bj-sp-znacka{ font-size:11.5px !important; }

  /* Legenda pod tabulkou strategie (písmena H, S, D, Y, N, SUR) */
  .strat-legend .sw{ font-size:11.5px !important; }
}

/* Popisky v HUD trenažéru mají nowrap, aby se „Running count" nelámal
   uprostřed. Po zvětšení na 11 px se ale na 320px displeji přestaly
   vejít vedle sebe a blok přetekl o 13 px. Na nejužších telefonech se
   proto zalamovat smí — čitelnost je přednější než jeden řádek. */
@media(max-width:360px){
  .tr-mini .l{ white-space:normal !important; }
}

/* ==================================================================
   SOVA NA POZADÍ STOLŮ — jedno místo pro obě
   ==================================================================

   Historie: velikost se řešila v pěti různých stupních (150 px, 180 px,
   min(46vw,190px), min(28vw,150px), 52 %) a pravidla se navzájem
   přebíjela podle pořadí v souboru. Na telefonu na výšku nakonec vyhrálo
   to poslední — min(28vw,150px), tedy 110 px — přestože o kus výš stálo
   190 px. Sova tak byla menší, než měla být, a nikdo nevěděl proč.

   Teď je to jedno pravidlo v procentech stolu. Sova je vždycky stejně
   velká vůči plsti, ať je displej jakýkoli, a nemůže z ní vyrůst:
     - width  34 %  ze šířky stolu
     - max-height 55 % z jeho výšky (stůl na šířku bývá nízký)
     - aspect-ratio 1/1 + object-fit:contain, aby zůstala kulatá,
       i kdyby výšku vnutilo něco jiného

   Na ležato při výšce do 520 px zůstává skrytá — tam je místa málo
   a je to záměr z dřívějška. */
@media(max-width:760px), (max-height:560px) and (orientation:landscape){
  .tr-felt-owl, .bjt-sova{
    width:34% !important;
    height:auto !important;
    max-height:55% !important;
    aspect-ratio:1 / 1;
    object-fit:contain;
  }
  .tr-felt-owl{ opacity:.05; }
  .bjt-sova{ opacity:.10; }
}

/* Odkazy .ilink mají font-size:.88em, takže v drobném okolí spadnou ještě
   níž — v legendě pod tabulkou strategie vycházely na 10,1 px. Uvnitř
   textu v běžné velikosti je .88em v pořádku, problém dělá jen dědění
   z už tak malého rodiče. Spodní mez to řeší, aniž by se odkazy
   v odstavcích zvětšily: max() vezme větší z obou hodnot.

   Pozor: původně to platilo jen do 760 px. Legenda pod tabulkou má ale
   stejně malé písmo i na tabletu a na monitoru, kde odkaz vycházel na
   10,6 px. Spodní mez proto platí všude — v běžném textu se neprojeví,
   protože .88em z 16 px je 14 px. */
.ilink{ font-size:max(.88em, 11.5px); }

/* ==================================================================
   TABLETY  (761–1024 px)
   ==================================================================
   Referenční zařízení: iPad Pro 11" (834 × 1194 na výšku,
   1194 × 834 na šířku). Tablet spadá mezi dva světy: má dost šířky
   na počítačové rozvržení, ale na ležato jen ~830 px výšky — méně než
   leckterý notebook. Většina chyb tady vzniká právě z toho, že se
   počítá se šířkou, a ne s výškou.
   ================================================================== */

/* ---- 1. Lišta na jeden řádek ----
   Značka (230) + odkazy (541) + odznak (30) + mezery = 833 px, ale
   k dispozici je 794. Chybělo 39 px a lišta se lámala na dva řádky,
   čímž ukusovala 45 px výšky. Štítek BLACKJACK je ozdoba, na telefonu
   se skrývá taky — tady stejně. Bez něj zbyde 84 px rezervy. */
@media(min-width:761px) and (max-width:1024px){
  .brand .chip{ display:none; }
  .nav{ flex-wrap:nowrap; gap:12px; }
  .nav-links{ gap:14px; flex-wrap:nowrap; }
}

/* ---- 2. Trenažér základní strategie na celé obrazovce ----
 *
 * CO BYLO ŠPATNĚ
 * Rozměry karet se počítaly z šířky (`clamp(76px, 9vw, 146px)`). Na
 * ležatém tabletu je šířky spousta, ale výšky jen ~830 px, takže si
 * obsah řekl o 683 px do prostoru, kde jich bylo 444. Protože je
 * `.bs-play` centrovaný flex, přebytek přetekl NA OBĚ STRANY: karty
 * vlezly na text s pravidly nad sebou a sovička v patičce na body,
 * sérii a rekord pod sebou. Tlačítko „Zobrazit tabulku“ zůstalo
 * schované pod kartami, takže tabulka nešla vyvolat.
 *
 * ŘEŠENÍ
 * Na tabletu se všechno odvozuje od VÝŠKY okna (vh), ne od šířky.
 * `.bs-play` navíc dostane overflow:hidden a zarovnání na začátek —
 * kdyby se i tak něco nevešlo, ořízne se to dole místo přetečení
 * přes sousedy. */
@media(min-width:761px) and (max-width:1180px) and (orientation:landscape),
       (min-width:761px) and (max-height:900px) and (orientation:landscape){
  .bs-win.fs .bs-card{
    width:clamp(56px, 8.4vh, 146px);
    height:clamp(78px, 11.7vh, 204px);
    font-size:clamp(22px, 3.3vh, 52px);
  }
  .bs-win.fs .bs-cards{ gap:10px; margin:6px 0; }
  .bs-win.fs .bs-sub{ font-size:11.5px; }
  .bs-win.fs .bs-q{ font-size:17px; margin:10px 0 6px; }
  .bs-win.fs .bs-act{ font-size:15px; padding:9px 18px; min-width:104px; }
  .bs-win.fs .bs-key{ font-size:15px; height:16px; }
  .bs-win.fs .bs-foot{ padding:10px 20px; gap:16px; font-size:14px; }
  .bs-win.fs .bs-owl{ width:34px; height:34px; }
  .bs-win.fs .bs-reward{ font-size:14px; }
  .bs-win.fs .bs-reward img{ width:22px; height:22px; }

  /* Přebytek se nesmí rozlézt přes sousedy. */
  .bs-win.fs .bs-play{ align-items:flex-start; overflow:hidden; min-height:0; }
  .bs-win.fs .bs-body{ max-height:100%; }
}

/* ---- 3. Sova na pozadí: menší a tlumenější ----
 *
 * PROČ TO NA TABLETU VYPADALO ROZMAZANĚ
 * Zdrojový obrázek je 384 × 384 px. Trenažér strategie ho na celé
 * obrazovce roztahoval na 52vh, což je na iPadu 434 CSS px — a protože
 * má displej dvojnásobnou hustotu, znamená to 868 skutečných pixelů
 * ze 384. Dvaapůlnásobné zvětšení, odtud ta měkkost.
 *
 * Zvětšit rozlišení nejde bez nového exportu předlohy, takže se řeší
 * druhá strana rovnice: vodoznak se zmenší tak, aby se nezvětšoval
 * o víc než ~1,4×, a ztlumí se. Při nižším krytí je zbytková měkkost
 * neviditelná a znak působí jako ražba, ne jako rozpitá fotka. */
.bs-win.fs .bs-bgowl{
  width:min(52vh, 280px) !important;
  max-width:280px !important;
  opacity:.07 !important;
}
.tr-felt-owl{ opacity:.045; }
.bjt-sova{ opacity:.085; }

@media(min-width:761px){
  /* Na tabletu a výš se drží pod hranicí, kde by bylo zvětšení vidět. */
  .tr-felt-owl{ max-width:250px !important; }
  .bjt-sova{ max-width:260px !important; }
}

/* ---- 4. Trénink počítání na ležatém tabletu: kvíz vedle stolu ----
 *
 * CO BYLO ŠPATNĚ
 * Kvíz i ovládání sedí pod stolem. Na monitoru je na ně místa dost,
 * na ležatém iPadu (834 px výšky) si ale vyžádaly 460 px, takže se
 * ovládání dostalo 209 px pod spodní okraj. Stůl se navíc kvůli pevné
 * rezervě 250 px scvrkl na 673 × 421, přestože měl k dispozici
 * 1169 × 743 — tedy skoro dvojnásobek. Odtud ty „malinké karty“.
 *
 * ŘEŠENÍ
 * Na širokém a nízkém displeji se rozvržení překlopí do dvou sloupců:
 * stůl vlevo, kvíz a ovládání vpravo. Šířka, které je tu přebytek,
 * tak nahradí výšku, které je nedostatek — a stůl se roztáhne. */
@media(min-width:900px) and (max-height:900px) and (orientation:landscape){
  .bjt-hra{
    display:grid;
    grid-template-columns:minmax(0,1fr) 330px;
    column-gap:18px;
    align-items:start;
  }
  /* Hodnoty (kolo, karet, zbyva balicku, sovicky) patri nad stul.
     Pres celou sirku mrizky se centrovaly doprostred stolu I praveho
     sloupce, takze visely nad mezerou vedle stolu. V prvnim sloupci
     sedi presne nad nim. */
  .bjt-hra > .bj-hud{ grid-column:1; }
  .bjt-hra > .bjt{ grid-column:1; grid-row:2 / span 3; }
  .bjt-hra > .bj-kviz{ grid-column:2; grid-row:2; margin-top:0; }
  .bjt-hra > .bj-vysledek{ grid-column:2; grid-row:3; }
  .bjt-hra > .bj-ovladani{ grid-column:2; grid-row:4; margin-top:12px; }

  /* Ve svislém sloupci se ovládání i pole kvízu skládají pod sebe. */
  .bjt-hra .bj-ovladani{ flex-direction:column; align-items:stretch; }
  .bjt-hra .bj-kviz-pola{ flex-direction:column; align-items:stretch; }
}


/* ---- 5. Trenažér z kalkulačky na nízkém displeji ----
 *
 * CO BYLO ŠPATNĚ
 * `.tr-window` má max-height 665 px, ale obsah si na ležatém tabletu
 * (a v Safari, kde po lištách zbude ~700 px) řekl o 818 px. Okno se
 * začalo rolovat a člověk si musel vybrat: buď vidí počítací tlačítka
 * dole, nebo krupiérovu kartu nahoře. Obojí naráz nešlo.
 *
 * ROZPOČET VÝŠKY (818 px, potřeba ubrat 154)
 *   hlava 59 · stůl 512 · historie 70 · odměny 35 · tlačítka 81 · rada 30
 *
 * Tlačítka jsou to jediné, co se maká, takže zůstávají v plné velikosti.
 * Ubírá se ze stolu a z pomocných řádků pod ním; rada o klávesnici na
 * dotykovém tabletu stejně nedává smysl, tak zmizí celá. */
@media(max-height:820px) and (orientation:landscape){
  .tr-overlay{ padding:8px 12px; }
  .tr-window{ max-height:calc(100dvh - 16px) !important; }

  /* Stůl a kalkulačka: nižší. Velikost karet řeší až blok 7 níž —
     tady je nechávám být, dřív tu byla natvrdo 32 × 44 a to je na
     tabletu zbytečně malé. */
  .tr-table{ min-height:0 !important; padding:8px !important; }
  .tr-calc{ padding:8px !important; }
  .tr-count{ font-size:clamp(38px, 9vh, 76px) !important; }
  .tr-seat{ gap:3px !important; }
  .tr-seat-label{ font-size:9.5px !important; }

  /* Pomocné řádky pod stolem se stáhnou. */
  .tr-last-wrap{ padding:4px 12px 0 !important; }
  .tr-last-label{ font-size:10px !important; }
  .tr-hist-total{ margin-top:2px !important; font-size:11px !important; }
  .tr-reward-row{ padding:2px 12px 0 !important; gap:10px !important; }
  .tr-reward{ font-size:12px !important; }
  .tr-reward img{ width:18px !important; height:18px !important; }

  /* Klávesová rada na dotykovém tabletu nedává smysl. */
  .tr-hint{ display:none !important; }

  /* Levy sloupec (kalkulacka) je vyssi nez stul. Nejvic v nem berou
     sazkova lista (150 px) a mini statistiky (95 px) — velke cislo
     countu se nechava, to je to hlavni, co clovek sleduje. */
  .tr-bet-label{ margin:0 0 4px !important; font-size:9.5px !important; }
  .tr-bar-wrap{ height:26px !important; }
  .tr-advice{ font-size:13px !important; margin:2px 0 !important; }
  .tr-units{ font-size:11px !important; }
  .tr-mini > div{ padding:2px 0 !important; }
  .tr-mini .l{ font-size:10px !important; }
  .tr-match{ font-size:13px !important; min-height:0 !important; }
  .tr-tc{ font-size:clamp(34px, 8vh, 64px) !important; }
  /* Svisle mezery ve sloupci: 46 px marginu + 30 px gapu je na nizkem
     displeji luxus, ktery stoji presne ten zbyvajici prebytek. */
  .tr-calc{ gap:2px !important; padding:6px !important; }
  .tr-adv{ margin:0 0 4px !important; }
  .tr-betting{ margin-top:6px !important; }
  .tr-match{ margin-top:6px !important; }
  .tr-accline{ margin-top:4px !important; }
  .tr-mini > div{ min-height:0 !important; padding:1px 0 !important; }
  .tr-mini b{ font-size:14px !important; }

  /* Pocitaci tlacitka zustavaji velka — jsou to jedina, co se macka. */
  .tr-foot{ padding:8px 12px !important; }
}

/* ---- 6. Trenažér strategie (demo okno) na nízkém ležatém displeji ----
 *
 * CO BYLO ŠPATNĚ
 * Sekce 2 výše řeší jen režim celé obrazovky (`.bs-win.fs`). Demo okno
 * na stránce má ale vlastní rozpočet: `max-height:95vh`, takže při
 * 700 px výšky (skutečná viditelná plocha Safari na iPadu na šířku)
 * dostane 665 px — a obsah si po zapnutí tabulky řekl o 734 px.
 * Rozdíl se nikam neschoval: `.bs-play` má `overflow:visible`, takže
 * tlačítka „Stát“ a „Zdvojit“ vylezla přes patičku na sovičku, body
 * a odkaz „Vynulovat postup“.
 *
 * ŘEŠENÍ
 * Pod 780 px výšky se svislé rozestupy a karty stáhnou tak, aby se
 * obsah vešel bez rolování. `overflow:hidden` na `.bs-play` je pak
 * pojistka: kdyby si někdy obsah řekl o víc, ořízne se dole místo
 * toho, aby se rozlezl přes sousedy. */
@media(min-width:761px) and (max-height:780px) and (orientation:landscape){
  .bs-win:not(.fs) .bs-play{ overflow:hidden; min-height:0; }
  .bs-win:not(.fs) .bs-body{ padding:8px; max-height:100%; }
  .bs-win:not(.fs) .bs-felt{ padding:10px; }

  .bs-win:not(.fs) .bs-card{ width:44px; height:60px; font-size:19px; }
  .bs-win:not(.fs) .bs-cards{ margin:4px 0 2px; gap:8px; }
  .bs-win:not(.fs) .bs-sub{ margin-top:2px; }
  .bs-win:not(.fs) .bs-q{ font-size:14px; margin:6px 0 2px; }

  /* Tlačítka odpovědí: menší výplň a nižší řádek s klávesou. Zůstávají
     nad 40 px, aby se do nich dalo pohodlně trefit prstem. */
  .bs-win:not(.fs) .bs-acts{ gap:6px; margin:6px 0 2px; }
  .bs-win:not(.fs) .bs-act{ padding:8px 12px; font-size:14px; min-height:40px; }
  .bs-win:not(.fs) .bs-key{ font-size:12px; height:13px; }

  .bs-win:not(.fs) .bs-fb{ min-height:0; height:30px; margin-top:4px; font-size:14px; }
  .bs-win:not(.fs) .bs-owl{ width:30px; height:30px; margin-top:2px; }
  .bs-win:not(.fs) .bs-foot{ padding:6px 14px; }

  /* Skola: seznam sesti lekci si na 700 px vysky rekl o 628 px do 582.
     Nizsi vypln radku staci — radek zustava 66 px vysoky, tedy dobre
     trefitelny prstem. */
  .sk-lekce{ padding-top:9px; padding-bottom:9px; }
  .sk-lekce-seznam{ margin-top:12px; margin-bottom:12px; }
}

/* ---- 7. Karty v trenažéru kalkulačky na tabletu ----
 *
 * CO BYLO ŠPATNĚ
 * Karta měla pevných 32 × 44 px. Stůl přitom měřil 733 × 411 px
 * a obsadily ho dvě řady po 80 px — přes 250 px výšky a většina
 * šířky zůstaly prázdné. Karty vypadaly jako drobky na prostřeném
 * stole. Pevná velikost je navíc vždycky kompromis: buď je malá pro
 * běžnou ruku o dvou kartách, nebo velká pro ruku o pěti.
 *
 * ŘEŠENÍ
 * Karta dostane velkorysou výchozí šířku odvozenou z toho, čeho je
 * míň — šířky, nebo výšky okna. Výška se dopočítá z poměru, takže se
 * karta nemůže zdeformovat. `flex:0 1 auto` pak znamená, že když se
 * ruka nafoukne a přestane se vejít, karty se samy proporčně stáhnou;
 * dokud je místo, zůstávají velké. Přesně v tomhle pořadí: nejdřív
 * využít prostor, zmenšovat až když dojde.
 *
 * Písmo se musí stáhnout s nimi, jinak by u nacpané ruky přeteklo.
 * Počet karet v ruce CSS pozná přes :nth-last-child — pátá karta
 * odzadu existuje jen tehdy, když jich je pět a víc. */
@media(min-width:761px) and (max-width:1366px){
  /* Aby se karty mohly stlacit, musi mit rada karet urcitou sirku.
     Bez `width:100%` si rada vezme sirku obsahu, nikdy neni v uzkych
     a flexboxu tak nedojde duvod cokoliv zmensovat — misto toho
     prerostla sedadlo i cely stul. */
  .tr-cards{
    max-width:100% !important; width:100% !important;
    flex-wrap:nowrap !important;
    min-width:0; min-height:0; gap:5px;
  }
  .tr-seat{ min-width:0; }
  /* Vetsi karty potrebuji vetsi odstup mezi hraci, jinak tri ruce
     vedle sebe splynou v jednu dlouhou radu. */
  .tr-players{ width:100%; max-width:100%; min-width:0; gap:26px; }
  .tr-table{ overflow-x:hidden; }

  .tr-card{
    /* Hodnoty jsou o 30 % nizsi nez prvni pokus — ten byl na tabletu
       zbytecne mohutny. Vychozi karta na iPadu Pro 11" na sirku vyjde
       na 54 x 77 px, coz je proti puvodnim 32 x 44 poradna karta,
       a pritom stul nepusobi jako detska hracka. */
    --trk: clamp(38px, min(6.3vw, 7.7vh), 64px);
    width:var(--trk) !important;
    height:auto !important;
    aspect-ratio:42 / 60;
    flex:0 1 auto;
    min-width:30px;
    font-size:calc(var(--trk) * .42) !important;
    border-radius:calc(var(--trk) * .11);
  }

  /* Pět a víc karet v ruce: karty se stlačují, písmo jde s nimi. */
  .tr-card:nth-last-child(n+5),
  .tr-card:nth-last-child(n+5) ~ .tr-card{ font-size:calc(var(--trk) * .28) !important; }
  .tr-card:nth-last-child(n+7),
  .tr-card:nth-last-child(n+7) ~ .tr-card{ font-size:calc(var(--trk) * .2) !important; }
}

/* ==================================================================
   OPRAVY PRO TELEFON — srpen 2026
   Pět věcí, které vadily na iPhonu. Společný jmenovatel: na telefonu
   je málo výšky a obsah, který na monitoru jen povyroste, tam vytlačí
   ovládání pod okraj.
   ================================================================== */

/* ---- 1. Počítací tlačítka nesmí zmizet pod okrajem ----
 *
 * CO BYLO ŠPATNĚ
 * Při zapnutém progresivním režimu a vysokém true countu vypíše
 * kalkulačka až čtrnáct odchylek. Blok s nimi vyroste na 183 px
 * a odsune řadu −1 / 0 / +1 o 98 px pod spodní okraj. Zrovna
 * u stolu, kde se na ta tlačítka klepe po každé kartě.
 *
 * ŘEŠENÍ
 * Řada ovládání se přilepí ke spodku obrazovky. Je vidět vždycky,
 * ať je odchylek kolik chce. Seznam odchylek navíc dostane strop
 * a roluje uvnitř sebe, aby nesnědl celou obrazovku. */
@media(max-width:760px){
  .dev-hint{ display:block; }

  /* Přepínač: jeden řádek s počtem odchylek. Sbaleno je výchozí stav. */
  .dev-prep{
    display:flex; align-items:center; gap:8px; width:100%;
    background:none; border:0; padding:4px 0; margin:0;
    color:var(--muted); font:inherit; font-size:11px;
    letter-spacing:.06em; text-transform:uppercase; cursor:pointer;
    min-height:32px;
  }
  .dev-pocet{
    background:var(--border); color:var(--text);
    border-radius:99px; padding:1px 8px; font-size:11px; font-weight:700;
    letter-spacing:0;
  }
  .dev-sipka{ margin-left:auto; transition:transform .16s ease; }
  .dev-hint.rozbaleno .dev-sipka{ transform:rotate(180deg); }

  .dev-hint .dev-chips{ display:none; }
  .dev-hint.rozbaleno .dev-chips{
    display:block;
    max-height:38dvh;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding-top:4px;
  }
}

/* Na monitoru zůstává všechno tak, jak bylo — přepínač se schová
   a odchylky jsou vidět rovnou. */
@media(min-width:761px){
  .dev-prep{ display:none; }
}

/* ---- 2. Odpočet na konci kola v trenažéru kalkulačky ----
 *
 * Na monitoru má číslo 110 px. Na telefonu ho sráželo pravidlo
 * `.tr-count{font-size:12px}`, které stálo mezi drobnými popisky
 * sedadel — očividně omylem, protože jde o číslici přes celý stůl.
 * Zvětšeno zhruba na dvojnásobek toho, co bylo vidět. */
@media(max-width:760px){
  .tr-count{ font-size:26px !important; }
}

/* ---- 3. Pravidla stolu jako vysouvací tabulka ----
 *
 * CO BYLO ŠPATNĚ
 * Panel sice byl `fixed`, ale bez ztmaveného pozadí splýval se
 * stránkou a nebylo poznat, že je otevřený. Obsah se do něj nevešel
 * a roloval o 519 px.
 *
 * ŘEŠENÍ
 * Vysune se zdola jako tabulka přes obsah, s tmavým podkladem.
 * Stránka pod ním nikam neuteče. Klepnutí mimo panel ho zavře. */
@media(max-width:760px){
  body.oc-pravidla{ overflow:hidden; }
  body.oc-pravidla::before{
    content:'';
    position:fixed; inset:0;
    background:rgba(6,6,14,.66);
    backdrop-filter:blur(2px);
    z-index:140;
    animation:ocPodkladIn .18s ease-out;
  }
  .rules-panel{
    left:0 !important; right:0 !important;
    bottom:0 !important; top:auto !important;
    max-height:86dvh !important;
    border-radius:18px 18px 0 0;
    padding-bottom:calc(14px + env(safe-area-inset-bottom));
    box-shadow:0 -20px 50px rgba(0,0,0,.6);
  }
  .rules-panel.show{ animation:ocPanelUp .22s cubic-bezier(.22,.9,.3,1); }

  /* Úchyt nahoře, aby bylo poznat, že se s tím dá hýbat. */
  .rules-panel.show::before{
    content:'';
    display:block;
    width:42px; height:4px;
    margin:2px auto 12px;
    border-radius:99px;
    background:var(--border);
  }
}
@keyframes ocPodkladIn{ from{ opacity:0 } to{ opacity:1 } }
@keyframes ocPanelUp{ from{ transform:translateY(14%); opacity:.4 } to{ transform:none; opacity:1 } }

/* ---- 4. Tlačítko celé obrazovky ----
 * Řeší se v bj-overlay.js: tlačítko se vůbec nevytvoří, když prohlížeč
 * fullscreen neumí. Safari na iPhonu ho neumí a okno tam stejně zabírá
 * celou plochu, takže tlačítko jen zabíralo místo v hlavičce. */

/* ---- 5. Tlačítka pod obsahem ve škole ----
 *
 * CO BYLO ŠPATNĚ
 * Hned první lekce má vysvětlení dlouhé 537 px. Na telefonu to
 * i s hlavičkou dá 837 px do těla vysokého 781 — a tlačítko
 * „Pokračovat" skončilo 40 px pod okrajem, přestože místo bylo.
 *
 * PROČ NE PŘILEPENÁ LIŠTA
 * První pokus přilepil ovládání ke spodku. Tlačítka pak sice byla
 * vidět vždycky, ale při rolování zakryla poslední odstavec
 * s vysvětlením — vyměnil jsem jeden problém za druhý.
 *
 * ŘEŠENÍ
 * Stáhnout svislé rozestupy uvnitř lekce. Ušetří se přes 80 px,
 * takže se tlačítka vejdou sama a nic nepřekrývají. Text zůstává
 * stejně velký — zhušťují se jen mezery, ne písmo. */
@media(max-width:760px){
  /* Proklad řádků, ne velikost písma — text zůstává stejně čitelný. */
  #skUvod p{ margin:8px 0; line-height:1.45; }
  .sk-tip{ padding:8px 12px; margin:9px 0 0; line-height:1.45; }

  .sk-hodnoty{ gap:5px; margin:9px 0; }
  .sk-h{ padding:6px 12px; gap:3px 12px; }
  .sk-h span{ font-size:20px; }
  .sk-h em{ margin-top:1px; }

  .sk-hlava{ margin-bottom:8px; }
  #skPlocha{ margin:8px 0 6px; }
  .bjo-body .bj-ovladani{ margin-top:10px; }
}