:root{
    --ff:#1a3a6b;        /* značková modrá FF */
    --ff-d:#0f2548;      /* tmavšia modrá */
    --ff-l:#27508f;      /* svetlejšia modrá */
    --gold:#d9b25b;      /* zlatá – akademická */
    --ink:#10233f;
    --paper:#eef1f6;
  }
  *{box-sizing:border-box}
  html,body{margin:0;height:100%}
  body{
    font-family:"Trebuchet MS",-apple-system,Segoe UI,system-ui,sans-serif;
    background:
      radial-gradient(120% 90% at 50% -10%, #2a4f8c 0%, var(--ff-d) 55%, #081730 100%);
    color:var(--paper);
    display:flex;flex-direction:column;align-items:center;
    min-height:100%;padding:14px;gap:12px;
  }
  /* počas ťahu praku: žiadny výber textu a bočné panely nereagujú (ťah ich „neprejde") */
  body.aiming{user-select:none;-webkit-user-select:none;cursor:crosshair}
  body.aiming .panel{pointer-events:none}
  h1{
    font-size:clamp(18px,3.4vw,30px);margin:2px 0 0;letter-spacing:.5px;
    text-shadow:0 2px 0 #00000055;text-align:center;
  }
  h1 .sub{display:block;font-size:.5em;font-weight:400;opacity:.8;letter-spacing:2px;text-transform:uppercase}
  .wrap{
    width:100%;max-width:1500px;display:flex;gap:16px;align-items:flex-start;
    flex-wrap:wrap;justify-content:center;
  }
  .stage{position:relative;flex:1 1 560px;min-width:320px;max-width:820px}   /* stôl rastie, ale cap aby nebol obrovský */
  .side-left,.side-right{flex:0 0 230px}
  @media(max-width:860px){ .stage{order:-1;flex-basis:100%} } /* na úzkych: stôl hore, panely pod ním */
  canvas{
    width:100%;height:auto;display:block;border-radius:18px;
    box-shadow:0 18px 40px #00000066, 0 2px 0 #ffffff22 inset;
    touch-action:none;cursor:crosshair;background:#0a1a33;
  }
  .panel{
    flex:0 0 250px;background:#ffffff10;border:1px solid #ffffff22;
    border-radius:16px;padding:14px;backdrop-filter:blur(6px);
    box-shadow:0 10px 30px #00000044;
  }
  .panel h2{margin:0 0 8px;font-size:14px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold)}
  .stat{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:6px 0;font-size:15px}
  .caps{display:flex;flex-wrap:wrap;gap:3px;min-height:24px;margin:4px 0 10px}
  .caps svg{filter:drop-shadow(0 1px 1px #0006)}
  .btn{
    display:inline-flex;align-items:center;gap:6px;cursor:pointer;border:none;
    background:linear-gradient(180deg,var(--ff-l),var(--ff));color:#fff;
    padding:9px 14px;border-radius:11px;font-weight:700;font-size:14px;width:100%;
    justify-content:center;box-shadow:0 3px 0 #00000055,0 2px 8px #0005;
    transition:transform .06s ease,filter .15s;
  }
  .btn:hover{filter:brightness(1.12)}
  .btn:active{transform:translateY(2px);box-shadow:0 1px 0 #00000055}
  .btn.gold{background:linear-gradient(180deg,#e8c878,#c79a3f);color:#3a2a08}
  ol.board{list-style:none;margin:0;padding:0;counter-reset:r;max-height:320px;overflow-y:auto}
  ol.board li{
    display:flex;align-items:center;gap:8px;padding:5px 4px;border-bottom:1px dashed #ffffff22;font-size:14px;
  }
  ol.board li::before{
    counter-increment:r;content:counter(r);width:20px;height:20px;flex:0 0 20px;
    background:var(--gold);color:#3a2a08;border-radius:50%;font-weight:800;font-size:12px;
    display:flex;align-items:center;justify-content:center;
  }
  ol.board li img{width:22px;height:22px;border-radius:50%;object-fit:cover;background:#fff}
  ol.board li .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  ol.board li .sc{font-weight:800;color:var(--gold)}
  .empty{opacity:.6;font-size:13px;font-style:italic}
  .hint{font-size:12px;opacity:.7;line-height:1.5;margin-top:8px}
  .tag{font-size:11px;opacity:.7}
  /* záložky rebríčka: Sólo / Duely */
  .btabs{display:flex;gap:6px;margin:0 0 8px}
  .btabs button{
    flex:1;border:1px solid #ffffff2e;background:#ffffff10;color:var(--paper);cursor:pointer;
    padding:5px 8px;border-radius:9px;font-weight:700;font-size:12px;letter-spacing:.4px;
    transition:filter .15s;
  }
  .btabs button:hover{filter:brightness(1.2)}
  .btabs button.on{background:var(--gold);border-color:var(--gold);color:#3a2a08}
  ol.board .vs{font-style:normal;opacity:.55;font-size:11px;padding:0 1px}
  /* panel duelu: obaja hráči, aktívny zvýraznený zlatým rámom */
  .duel{display:flex;flex-direction:column;gap:6px;margin:0 0 12px}
  .duel .prow{
    display:flex;align-items:center;gap:8px;padding:6px 8px;background:#ffffff12;
    border:2px solid transparent;border-radius:12px;transition:border-color .2s,background .2s;
  }
  .duel .prow.on{border-color:var(--gold);background:#d9b25b22}
  .duel .prow img{width:32px;height:32px;border-radius:50%;object-fit:cover;background:#fff;box-shadow:0 2px 6px #0006}
  .duel .prow .nm{flex:1;font-weight:800;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .duel .prow .sc{font-weight:800;color:var(--gold);font-size:14px;white-space:nowrap}
  /* prepínač 1 hráč / 2 hráči v štart okne */
  .modebar{display:flex;gap:7px;margin:0 0 10px}
  .modebar button{
    flex:1;border:2px solid #cdd6e6;background:#fff;color:var(--ff);cursor:pointer;
    padding:7px 8px;border-radius:11px;font-weight:700;font-size:13px;transition:border-color .12s,background .12s;
  }
  .modebar button.on{border-color:var(--ff);background:#1a3a6b14}
  /* výsledok duelu vo výhernom okne */
  .duelline{font-size:19px;font-weight:800;color:var(--ff)}
  /* odsek pravidiel pre dvoch v návode */
  .help-2p{text-align:left;background:#eef6ff;border:1px solid #cfe2ff;
    border-radius:12px;padding:10px 12px;margin:0 0 14px;font-size:13px;line-height:1.45;color:#15396b}
  /* hlavička hráča v paneli */
  .player{display:flex;align-items:center;gap:10px;margin:0 0 12px;padding:8px;background:#ffffff12;border-radius:12px}
  .player img{width:40px;height:40px;border-radius:50%;object-fit:cover;background:#fff;box-shadow:0 2px 6px #0006}
  .pname{font-weight:800;font-size:15px;line-height:1.1}
  .ptag{font-size:11px;opacity:.65;text-transform:uppercase;letter-spacing:1px}
  .btnrow{display:flex;gap:8px}
  .btn.ghost{background:#ffffff18;color:#fff;box-shadow:0 3px 0 #00000033}
  .card .btn.ghost{background:#e7ebf2;color:var(--ff);box-shadow:0 3px 0 #c4cad6}
  /* výber inštitútu v štartovom okne */
  .pick{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin:4px 0 14px}
  .pick button{
    background:none;border:3px solid transparent;border-radius:50%;padding:0;cursor:pointer;
    aspect-ratio:1;transition:transform .08s,border-color .12s;position:relative;
    /* min-width:0 = nutné pre Safari/WebKit: bez neho položka gridu počíta min. šírku podľa
       VNÚTORNEJ veľkosti loga (ignoruje width:100%), 5-stĺpcový rad pretečie úzku kartu a
       `overflow-x:hidden` oreže pravý stĺpec (2 gule). Chromium to zvláda aj bez toho. */
    min-width:0;min-height:0;
  }
  .pick button img{width:100%;height:100%;border-radius:50%;display:block;
    /* logá sa nesmú dať „chytiť" prstom a posúvať (natívny img-drag / iOS long-press callout);
       tap ide na tlačidlo (pointer-events:none) → výber funguje ďalej */
    pointer-events:none;-webkit-user-drag:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
  .pick button:hover{transform:scale(1.08)}
  .pick button.sel{border-color:var(--ff);transform:scale(1.08);box-shadow:0 0 0 3px #1a3a6b33}
  .pick button.sel::after{content:"✓";position:absolute;right:-2px;bottom:-2px;background:var(--ff);color:#fff;
    width:18px;height:18px;border-radius:50%;font-size:11px;display:flex;align-items:center;justify-content:center;border:2px solid #fff}
  .card .pickname{text-align:left;font-size:12px;opacity:.7;min-height:16px;margin:-8px 0 8px}
  .steps{text-align:left;margin:0 0 8px;padding:0;list-style:none}
  .steps li{display:flex;gap:9px;align-items:flex-start;margin:9px 0;font-size:14px;line-height:1.45}
  .steps li b{flex:0 0 26px;height:26px;background:var(--ff);color:#fff;border-radius:50%;
    display:flex;align-items:center;justify-content:center;font-size:13px}
  .scoring{text-align:left;background:#f1f4f9;border-radius:12px;padding:10px 12px;margin:0 0 14px}
  .srow{display:flex;align-items:flex-start;gap:10px;font-size:13px;margin:7px 0;line-height:1.4}
  .srow .b{flex:0 0 32px;text-align:center;font-weight:800;border-radius:7px;padding:3px 0;font-size:13px}
  .srow .txt{flex:1;min-width:0}
  .srow .pp{background:#d8f0e0;color:#0a7e4a}
  .srow .mm{background:#f7d9d4;color:#c0392b}
  .srow .nn{background:#e6e9ef;color:#6b7280}
  /* príklad výpočtu skóre v návode — nech hráč pochopí, prečo má málo/veľa bodov */
  .score-example{text-align:left;background:#fff7e0;border:1px solid #ffd86b;
    border-radius:12px;padding:10px 12px;margin:0 0 14px;font-size:13px;line-height:1.45;color:#5a4a14}
  /* tip „Pridať na plochu" — len na iPhone (a nie keď už beží ako appka na ploche) */
  .a2hs-tip{display:none;text-align:left;background:#eaf3ff;border:1px solid #cfe2ff;
    border-radius:12px;padding:10px 12px;margin:0 0 14px;font-size:13px;line-height:1.45;color:#15396b}
  body.ios .a2hs-tip{display:block}
  body.standalone .a2hs-tip{display:none}
  /* štítok aktuálnej gule pri kurzore */
  /* --txt-rot = korekcia rotácie herných textov podľa fyzickej polohy telefónu (viď game.js).
     0deg na PC a keď je telefón naležato; +90deg keď je viewport otočený (body.rot) a telefón
     držaný na výšku → text ostáva čitateľný (upright) namiesto otočenia so stolom. */
  #ball-name{
    position:absolute;pointer-events:none;background:#000a;color:#fff;padding:3px 8px;
    border-radius:8px;font-size:12px;transform:translate(-50%,-140%) rotate(var(--txt-rot,0deg));opacity:0;transition:opacity .12s;white-space:nowrap;
  }
  #flash{
    position:absolute;left:50%;top:24%;transform:translate(-50%,-50%) scale(.9) rotate(var(--txt-rot,0deg));
    background:#0c1f3dee;color:#ffe08a;border:2px solid #ffd86b;padding:10px 18px;border-radius:14px;
    font-weight:800;font-size:clamp(14px,2.2vw,18px);pointer-events:none;white-space:nowrap;
    opacity:0;transition:opacity .2s, transform .2s;box-shadow:0 8px 24px #0008;text-align:center;
  }
  #flash.show{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(var(--txt-rot,0deg))}
  /* visiaca nápoveda (flashMsg s ms=0) — jemné pulzovanie, nech ju hráč neprehliadne */
  #flash.stay{animation:flashPulse 1.6s ease-in-out infinite}
  @keyframes flashPulse{
    0%,100%{box-shadow:0 8px 24px #0008}
    50%{box-shadow:0 8px 24px #0008, 0 0 20px #ffd86bcc}
  }
  #flash.warn{color:#ffb4a6;border-color:#e74c3c;background:#3a0f0fee}
  #flash.good{color:#ffe08a;border-color:#ffd86b;background:#0c1f3dee}
  /* modálne okno. height:100dvh+bottom:auto = centruj vo VIDITEĽNEJ ploche (iOS/krátke okná,
     napr. menší MacBook), nie v layout viewporte → modal sa „neposúva" a nepretká za okraj.
     Karta scrolluje ako celok (max-height+overflow) a primárne tlačidlo ostáva sticky dole. */
  .modal{position:fixed;inset:0;height:100vh;height:100dvh;bottom:auto;
    background:#04101fcc;display:none;align-items:center;justify-content:center;z-index:20;padding:16px;
    overscroll-behavior:contain}
  .modal.show{display:flex}
  .card{
    background:linear-gradient(180deg,#friendly,#fff);background:#fff;color:var(--ink);border-radius:18px;
    padding:20px;max-width:340px;width:100%;text-align:center;box-shadow:0 20px 60px #000a;
    border-top:6px solid var(--gold);
    max-height:96%;overflow:auto;overflow-x:hidden;overscroll-behavior:contain;
  }
  /* primárne tlačidlá vždy dosiahnuteľné, keď karta scrolluje (krátke okno) */
  #startGo,#helpClose{position:sticky;bottom:0}
  /* štart okno kompaktnejšie aj na desktope (na menšom MacBook bolo veľké); mobil má ešte menšie */
  #startModal .card{max-width:320px}
  #startModal p{font-size:14px;margin:5px 0 10px}
  #startModal input{padding:9px 11px;margin-bottom:9px}
  #startModal .btn{padding:8px 12px;font-size:13.5px}
  .card h3{margin:0 0 6px;color:var(--ff)}
  .card p{margin:6px 0 14px;font-size:15px;line-height:1.5}
  .card input{
    width:100%;padding:11px 12px;border:2px solid #cdd6e6;border-radius:11px;font-size:16px;margin-bottom:12px;
  }
  .card input:focus{outline:none;border-color:var(--ff)}
  .big{font-size:40px;line-height:1;margin:4px 0}
  .loader{color:#fff;font-size:14px;letter-spacing:2px}
  /* overlay cez celé okno: predĺženie ťahu praku za okraj stola (cez panely).
     POZOR: prebíja generické pravidlo `canvas{...}` (pozadie/tieň/rádius) — musí byť
     úplne priehľadný, inak by tmavé pozadie stola prekrylo celú stránku (preblikávanie). */
  #overlay{
    position:fixed;inset:0;width:auto;height:auto;pointer-events:none;z-index:15;display:none;
    background:none;box-shadow:none;border-radius:0;
  }
  #overlay.show{display:block}
  /* počítadlo dohraných hier — nenápadne v rohu dole */
  .plays{
    position:fixed;bottom:7px;right:11px;z-index:5;
    font-size:11px;letter-spacing:.3px;opacity:.5;color:var(--paper);
    pointer-events:none;text-shadow:0 1px 2px #0007;
  }
  /* lišta tlačidiel hore vpravo: jazyk + celá obrazovka */
  .topctrl{position:fixed;top:8px;right:8px;z-index:19;display:flex;gap:6px}
  .topctrl button{
    border:none;border-radius:11px;background:#0f2548d9;color:#fff;cursor:pointer;
    height:36px;min-width:36px;padding:0 10px;font-size:14px;font-weight:800;letter-spacing:.5px;
    box-shadow:0 3px 10px #0006;display:flex;align-items:center;justify-content:center;gap:5px;
    transition:filter .15s;
  }
  .topctrl button:hover{filter:brightness(1.18)}
  /* `.topctrl button{display:flex}` má vyššiu špecificitu než UA `[hidden]{display:none}`,
     takže by fsBtn.hidden=true (napr. skrytie fullscreenu na iOS) NEzabralo → explicitne prebi. */
  .topctrl button[hidden]{display:none}
  #langBtn{font-size:19px;line-height:1;letter-spacing:0;padding:0 9px}

  /* ============================ MOBIL ============================ */
  .menuBtn,.menuBack,#drawer{display:none}
  body.mobile{padding:0;gap:0;min-height:100vh;min-height:100dvh}
  body.mobile h1{display:none}                 /* viac miesta pre stôl */
  body.mobile .plays{bottom:6px;right:9px}
  body.mobile.menu-open .topctrl{opacity:0;pointer-events:none}
  /* telefón na výšku (body.rot) + držaný fyzicky na výšku → herné texty späť do čitateľnej polohy */
  body.txt-upright{--txt-rot:90deg}
  /* po korekcii rotácie vycentruj flash na FYZICKÝ stred obrazovky (inak by „vyšiel" nabok) */
  body.txt-upright #flash{top:50%}
  body.mobile .wrap{max-width:none;gap:0;padding:0;width:100%;height:100vh;height:100dvh;flex-wrap:nowrap}
  body.mobile .stage{position:fixed;inset:0;min-width:0;flex:none;
    display:flex;align-items:center;justify-content:center}
  body.mobile .stage canvas{width:auto;height:auto;max-width:94%;max-height:94%;border-radius:0}
  /* tlačidlo menu */
  body.mobile .menuBtn{
    display:flex;position:fixed;top:8px;left:8px;z-index:19;width:46px;height:46px;
    align-items:center;justify-content:center;border:none;border-radius:12px;
    background:#0f2548d9;color:#fff;font-size:22px;cursor:pointer;box-shadow:0 3px 10px #0007;
  }
  /* JEDNO vysúvacie menu zľava: obsah (Nová hra/Návod · Rebríček · Hra · počet hier)
     sa na mobile preusporiada do jedného `#drawer` (reparent v JS, viď buildMobileDrawer).
     Stôl (.stage) ostáva mimo draweru → drawer ho neťahá ani neprekrýva transformom. */
  body.mobile .side-left,body.mobile .side-right{position:static}
  body.mobile #drawer{
    display:flex;flex-direction:column;gap:14px;
    position:fixed;left:0;top:0;height:100vh;height:100dvh;width:min(330px,87%);
    z-index:18;overflow:auto;padding:58px 14px 18px;     /* 58px = miesto pod ☰ */
    background:#0f2548f7;backdrop-filter:blur(4px);box-shadow:0 0 30px #0009;
    transform:translateX(-106%);transition:transform .22s ease;
  }
  body.mobile.menu-open #drawer{transform:translateX(0)}
  /* panely vnútri draweru = ploché bloky (nie samostatné okná) */
  body.mobile #drawer .panel{
    width:auto;max-width:none;height:auto;flex:none;
    background:transparent;box-shadow:none;border-radius:0;padding:0;overflow:visible;
  }
  body.mobile #drawer .btnrow{margin:0}
  body.mobile #drawer .plays{position:static;opacity:.75;pointer-events:auto;text-align:left;margin:0}
  body.mobile .menuBack{display:block;position:fixed;inset:0;z-index:17;
    background:#0008;opacity:0;pointer-events:none;transition:opacity .2s}
  body.mobile.menu-open .menuBack{opacity:1;pointer-events:auto}
  /* modaly: zmestiť do nízkej landscape výšky (rolovateľné) */
  /* iOS: position:fixed inset:0 = layout viewport (vrátane plochy za Safari lištou) → modal sa
     centroval mimo viditeľného stredu, „pohyboval sa" (scroll za lištu) a rad gúľ bol odrezaný.
     Naviaž na 100dvh (viditeľná plocha) → karta sa centruje tam, kde reálne vidíš. */
  body.mobile .modal{padding:10px;height:100vh;height:100dvh;bottom:auto;overscroll-behavior:contain}
  body.mobile .card{max-height:96%;overflow:auto;overflow-x:hidden;overscroll-behavior:contain;padding:14px}
  body.mobile .card .big{font-size:26px;margin:0}
  body.mobile .card h3{margin:2px 0}
  body.mobile .card p{margin:4px 0 8px}
  /* žiadny vnútorný scroll výberu (orezával 3. rad lôg pri nízkej výške) — scrolluje celá
     karta (.card overflow:auto) a Play je sticky dole, takže všetky logá sú dostupné/viditeľné */
  body.mobile .pick{max-height:none;overflow:visible}
  body.mobile .scoring{padding:8px 10px}
  body.mobile .steps li{margin:6px 0}
  /* primárne tlačidlo vždy viditeľné naspodku rolovateľnej karty */
  body.mobile #startGo,body.mobile #helpClose{position:sticky;bottom:0;margin-top:6px}
  /* štart okno na mobile celé kompaktnejšie — užšia karta zmenší aj gule (repeat(5,1fr)),
     plus tesnejšie pole na meno a tlačidlá. Input ostáva 16px (inak iOS pri fokuse zoomne). */
  body.mobile #startModal .card{max-width:264px;padding:10px}
  body.mobile #startModal .big{font-size:18px;margin:0}
  body.mobile #startModal h3{font-size:.98rem;margin:1px 0}
  body.mobile #startModal p{font-size:12px;margin:2px 0 6px}
  body.mobile #startModal input{font-size:16px;padding:7px 9px;margin-bottom:7px}  /* font 16 = bez iOS zoomu */
  body.mobile #startModal .pick{gap:4px;margin:1px 0 8px}
  body.mobile #startModal .pickname{font-size:10px;margin:-5px 0 6px}
  body.mobile #startModal .btn{padding:7px 10px;font-size:12.5px}

  /* ============== Vynútený LANDSCAPE (telefón na výšku) ==============
     Otáčame LEN stôl (.stage), nie celý body. Tak ovládanie (☰ vľavo hore, vlajka vpravo
     hore, vysúvacie menu, štart) ostáva UPRIGHT k fyzickému telefónu — body je naďalej na výšku.
     dvh/dvw = aktuálne VIDITEĽNÁ plocha (bez Safari/Chrome líšt); vh/vw fallback bez dvh. */
  body.rot{overflow:hidden}
  body.rot .stage{
    left:0;top:0;width:100vh;height:100vw;
    transform-origin:left top;transform:translateY(100vh) rotate(-90deg);
    width:100dvh;height:100dvw;transform:translateY(100dvh) rotate(-90deg);
  }

  /* ====== Telefón fyzicky NALEŽATO (viewport stále na výšku, senzor → body.phys-land) ======
     Hráč otočil telefón v smere hodín, takže stôl (.stage, −90°) vidí rovno. Otoč aj ovládanie
     a vysúvacie menu o −90°, nech sú čitateľné a ukotvené k hráčovi (inak ostanú nabok). */
  body.phys-land .menuBtn{ top:auto;bottom:8px;left:8px;transform:rotate(-90deg) }   /* hráčov ľavý-horný roh */
  body.phys-land .topctrl{ top:8px;right:auto;left:8px;flex-direction:column }        /* hráčov pravý-horný roh */
  body.phys-land .topctrl button{ transform:rotate(-90deg) }
  /* drawer = hráčov ľavý panel: cez celú šírku (spodný pruh), obsah otočený o −90° (vzor ako .stage) */
  body.phys-land #drawer{
    top:0;left:0;bottom:auto;width:min(330px,87dvh);height:100dvw;
    transform-origin:left top;
    transform:translateY(100dvh) rotate(-90deg) translateX(-110%);   /* skrytý: mimo hráčovho ľavého okraja */
  }
  body.phys-land.menu-open #drawer{ transform:translateY(100dvh) rotate(-90deg) }

  /* ===== utility marginy (boli inline style="" v index.html — presunuté sem,
     aby CSP mohla zrušiť style-src 'unsafe-inline') ===== */
  .board-sub{margin:-2px 0 8px}   /* .tag pod nadpisom rebríčka */
  .gap-b{margin-bottom:8px}       /* odsadenie pod odstavcom */
  .gap-t{margin-top:8px}          /* odsadenie sekundárnych tlačidiel */