/* ============================================================
   ProfiRuleta.cz — globální navigace v4 (dropdown / mega-menu).
   Sdílená komponenta nasazovaná na všechny stránky přes build
   (_apply-nav.cjs). Tokeny jsou ZÁMĚRNĚ scoped na .pr-header,
   aby neunikly do obsahu stránek (zejm. zelený motiv simulátoru
   a průvodce, které mají vlastní --accent/--line).
   Burger má třídu .prn-burger (NE .pr-burger) kvůli izolaci od
   starého inline JS na některých stránkách.
   ============================================================ */
.pr-header{
  --ink:#0B1118;--felt:#101822;--felt-2:#15202C;--chalk:#EDF2F6;--ash:#8C99A7;
  --line:rgba(237,242,246,.08);--accent:#8B6CFF;--accent-rgb:139,108,255;--accent-text:#CFC2FF;--accent-contrast:#FFFFFF;--accent-soft:rgba(var(--accent-rgb),.14);--ruby:#E0565B;
  --r:13px;--body:'Inter',system-ui,sans-serif;
}
.pr-header *{box-sizing:border-box}
.pr-header a{color:inherit;text-decoration:none}
.pr-header button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
.pr-header :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

/* ── Wrapper ─────────────────────────────────────────── */
.pr-header{
  position:sticky;top:0;z-index:200;
  background:rgba(11,17,24,.88);
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
  font-family:var(--body);
}
.pr-nav{
  width:min(1240px,92%);margin:0 auto;
  display:flex;align-items:center;gap:4px;min-height:72px;
}

/* ── Logo ─────────────────────────────────────────────── */
.pr-logo{display:inline-flex;align-items:center;gap:12px;flex:none;margin-right:12px;color:var(--chalk);white-space:nowrap}
/* Hover na logu = spin. Věnec kapes se otočí o JEDNU kapsu (360/13 ≈ 27,69°),
   kulička letí PROTI němu o šest (−166,15°) → skončí pokaždé v jiné kapse,
   stejně jako skutečný spin. Obě skupiny mají v SVG neviditelnou rozpěrku,
   aby fill-box střed = střed kola. Stupně generuje .i18n/gen-logo.cjs — po
   změně počtu kapes nebo BALL_HOP je sem přepiš z jeho výpisu. */
.pr-logo .lg-rot,
.pr-logo .lg-ball{transform-box:fill-box;transform-origin:center}
.pr-logo .lg-rot{transition:transform .9s cubic-bezier(.22,1,.36,1)}
.pr-logo .lg-ball{transition:transform 1.15s cubic-bezier(.16,.85,.25,1)}
.pr-logo:hover .lg-rot{transform:rotate(27.692deg)}
.pr-logo:hover .lg-ball{transform:rotate(-166.154deg)}
@media (prefers-reduced-motion:reduce){
  .pr-logo .lg-rot,.pr-logo .lg-ball{transition:none}
  .pr-logo:hover .lg-rot,.pr-logo:hover .lg-ball{transform:none}
}

/* ── Desktop menu ─────────────────────────────────────── */
.pr-menu{display:flex;align-items:center;gap:2px;margin-left:auto;list-style:none}
.pr-item{position:relative}
.pr-top{display:flex;align-items:center;border-radius:11px;transition:background .15s}
.pr-top:hover,.pr-item.open .pr-top{background:var(--felt-2)}
.pr-link{display:inline-flex;align-items:center;gap:7px;padding:9px 4px 9px 13px;font:600 13.5px var(--body);color:var(--chalk);transition:color .15s;white-space:nowrap}
.pr-link svg{flex:none;stroke:var(--accent);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.7;transition:opacity .15s,stroke .15s}
.pr-top:hover .pr-link svg,.pr-item.open .pr-link svg{opacity:1}
.pr-top:hover .pr-link,.pr-item.open .pr-link{color:var(--chalk)}
.pr-link.active{color:var(--accent)}
.pr-link.active svg{opacity:1;stroke:var(--accent)}
.pr-chevron{display:flex;align-items:center;justify-content:center;width:28px;height:36px;color:rgba(237,242,246,.45);transition:color .15s,transform .2s;flex:none;border-radius:8px}
.pr-top:hover .pr-chevron,.pr-item.open .pr-chevron{color:var(--chalk)}
.pr-item.open .pr-chevron svg{transform:rotate(180deg)}
.pr-item.no-drop .pr-top{padding-right:4px}

/* ── Dropdown panel ───────────────────────────────────── */
.pr-drop{
  position:absolute;top:calc(100% + 10px);left:0;min-width:220px;
  background:var(--felt);border:1px solid rgba(237,242,246,.1);border-radius:16px;
  box-shadow:0 16px 48px rgba(0,0,0,.55);padding:8px;display:none;z-index:300;
}
.pr-drop.mega{min-width:460px;display:none;grid-template-columns:1fr 1fr;gap:0;left:50%;transform:translateX(-50%)}
.pr-item.open .pr-drop{display:block}
.pr-item.open .pr-drop.mega{display:grid}
.pr-group-label{padding:10px 12px 4px;font:600 10px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--ash)}
.pr-drop.mega .pr-col + .pr-col{border-left:1px solid var(--line)}
.pr-sub{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;font:500 14px var(--body);color:var(--ash);transition:background .14s,color .14s;white-space:nowrap}
.pr-sub:hover{background:var(--felt-2);color:var(--chalk)}
.pr-sub svg{flex:none;width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;color:var(--ash);transition:color .14s}
.pr-sub:hover svg{color:var(--accent)}
.pr-soon{margin-left:auto;padding:2px 8px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font:700 9.5px var(--body);letter-spacing:.1em;text-transform:uppercase}
.pr-sub.all{color:var(--accent);font-weight:700;border-top:1px solid var(--line);border-radius:0 0 10px 10px;margin-top:4px;padding-top:11px}
.pr-sub.all:hover{background:var(--accent-soft)}

/* ── Hlavní výzva v hlavičce („Hrát zdarma") ──────────────
   Vždy po ruce na každé stránce kromě simulátoru (řeší Header.astro).
   Na mobilu stojí mezi logem a burgerem, viz media query níž. */
.pr-header .pr-cta{
  display:inline-flex;align-items:center;gap:8px;flex:none;margin-left:14px;
  padding:10px 17px 10px 15px;border-radius:999px;white-space:nowrap;
  background:var(--accent);color:#fff;font:700 13.5px var(--body);
  box-shadow:0 6px 18px -8px rgba(var(--accent-rgb),.9),inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .2s,box-shadow .2s;
}
.pr-header .pr-cta:hover{transform:translateY(-1px);
  box-shadow:0 10px 24px -8px rgba(var(--accent-rgb),1),inset 0 1px 0 rgba(255,255,255,.22)}
.pr-header .pr-cta svg{flex:none}
@media (prefers-reduced-motion:reduce){.pr-header .pr-cta:hover{transform:none}}

/* ── Aby se hlavička vešla (naměřeno v prohlížeči) ──────────
   Potřebná šířka obsahu hlavičky, nejhorší jazyk:
     profiruleta.cz       čeština     1047 px s ikonami / 937 bez
     roulettesimlab.com   ruština     1270 px s ikonami / 1160 bez
   Hlavička má max 1240 px — ruština a bulharština se s ikonami
   nevejdou ani na velký monitor. Mezinárodní hlavička proto nese
   třídu --dense a ubírá postupně: ikony u položek menu vůbec, pod
   1320 px tlačítko jen jako „play", pod 1180 px užší odsazení.
   Platí jen nad 1080 px — pod tím je mobilní menu s vlastními pravidly. */
@media(min-width:1081px){
  .pr-header--dense .pr-link svg{display:none}
}
@media(min-width:1081px) and (max-width:1180px){
  .pr-header:not(.pr-header--dense) .pr-link svg{display:none}
  .pr-header--dense .pr-link{padding-left:9px}
  .pr-header--dense .pr-chevron{width:22px}
}
@media(min-width:1081px) and (max-width:1320px){
  .pr-header--dense .pr-cta{width:38px;height:38px;padding:0;justify-content:center;gap:0}
  .pr-header--dense .pr-cta svg{width:12px;height:12px;margin-left:2px}
  .pr-header--dense .pr-cta-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

/* ── Hamburger (mobil) ────────────────────────────────── */
.prn-burger{display:none;align-items:center;gap:8px;margin-left:auto;padding:9px 13px;border-radius:11px;border:1px solid var(--line);color:var(--chalk);font:600 13px var(--body)}

/* ── Mobilní zobrazení ────────────────────────────────── */
@media(max-width:1080px){
  .prn-burger{display:inline-flex}
  /* pořadí: logo · výzva · burger (menu je vyjeté absolutně, mimo tok) */
  .pr-header .pr-cta{order:1;margin-left:auto;padding:9px 14px 9px 13px;font-size:13px}
  .prn-burger{order:2}
  /* Burger se odsouvá doprava sám (margin-left:auto ze základu). Jen když
     je v hlavičce i výzva, posune doprava ona a burger se k ní přimkne.
     Na stránkách simulátoru výzva není, tak tohle pravidlo nezabere. */
  .pr-nav:has(.pr-cta) .prn-burger{margin-left:10px}
  .pr-menu{
    display:none;flex-direction:column;align-items:stretch;gap:0;
    position:absolute;top:100%;left:0;right:0;
    background:rgba(11,17,24,.97);border-bottom:1px solid var(--line);backdrop-filter:blur(18px);
    padding:8px 4% 14px;max-height:calc(100svh - 72px);overflow-y:auto;
  }
  .pr-menu.open{display:flex}
  .pr-top{border-radius:12px}
  .pr-link{padding:12px 4px 12px 12px;font-size:15px;color:var(--chalk)}
  .pr-chevron{width:36px;height:44px}
  .pr-drop,.pr-drop.mega{
    position:static;transform:none;box-shadow:none;border:none;background:transparent;
    padding:0 0 4px 14px;border-radius:0;display:none;grid-template-columns:1fr;
  }
  .pr-item.open .pr-drop{display:block}
  .pr-item.open .pr-drop.mega{display:flex;flex-direction:column}
  .pr-drop.mega .pr-col + .pr-col{border-left:none;border-top:1px solid var(--line);margin-top:6px;padding-top:6px}
  .pr-sub{padding:10px 12px}
}

/* Úzký mobil: logo + výzva s textem + „Menu" se do ~390 px nevejdou
   (Menu se ořízlo). Výzva se tu smrskne na kulaté „play". Text zůstává
   v DOM, jen skrytý vizuálně — čtečka obrazovky ho přečte dál. */
@media(max-width:460px){
  .pr-header .pr-cta{width:38px;height:38px;padding:0;justify-content:center;gap:0}
  .pr-header .pr-cta svg{width:12px;height:12px;margin-left:2px}
  .pr-header .pr-cta-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
/* Mezinárodní hlavička potřebuje kulaté tlačítko už pod 560 px: logo
   RouletteSimLab je o 17 px širší a texty výzvy delší (ruština 165 px).
   Naměřeno: v 461 px přetékalo 20 jazyků až o 28 px za okraj okna. */
@media(max-width:560px){
  .pr-header--dense .pr-cta{width:38px;height:38px;padding:0;justify-content:center;gap:0}
  .pr-header--dense .pr-cta svg{width:12px;height:12px;margin-left:2px}
  .pr-header--dense .pr-cta-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
/* Nejmenší mobily (360 px): logo o 15 % menší a užší burger, jinak
   logo + tlačítko + burger přetékaly ve všech jazycích. Logo má viewBox,
   takže stačí změnit výšku a šířka se dopočítá. */
@media(max-width:420px){
  .pr-logo svg{height:40px;width:auto}
  .pr-logo{margin-right:6px}
  .prn-burger{padding:9px 10px}
}

/* ── sjednocené kolo v patičce (SVG místo conic .pr-footer-logo-mark) ── */
.pr-footer-logo-mark.pr-has-wheel{background:none;border:none;box-shadow:none}
.pr-footer-logo-mark.pr-has-wheel::before,.pr-footer-logo-mark.pr-has-wheel::after{display:none}
.pr-fwheel{display:block;width:100%;height:100%;border-radius:50%}

/* Můj účet: rozklik se žetony a odkazy (vykresluje backend) */
.pr-drop.pr-account{left:auto;right:0;min-width:270px}
.pr-account form{margin:0}
.pr-sub-button{width:100%;background:none;border:0;cursor:pointer;text-align:left}
.pr-chip-tables{margin-left:auto;font:500 12px var(--body);color:var(--ash)}
.pr-chip-next{margin:0;padding:2px 12px 8px 38px;font:500 12.5px var(--body);color:var(--ash)}
.pr-header .pr-claim{display:block;width:calc(100% - 24px);margin:2px 12px 8px;padding:9px 12px;border:0;border-radius:10px;background:#f2a93b;color:#1b1206;font:700 13.5px var(--body);cursor:pointer}
.pr-header .pr-claim:hover{background:#ffbd5c}
.pr-account .pr-sub:focus-visible,.pr-claim:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.pr-account-rule{height:1px;margin:6px 4px;background:var(--line)}

/* Dárek vedle Můj účet: láká ke kliknutí, popis záměrně nemá */
.pr-gift-form{flex:none;margin:0 0 0 6px}
.pr-header .pr-gift{display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffdf9a,#f2a93b 60%,#d97a12);color:#2a1702;cursor:pointer;animation:pr-gift-pulse 1.6s ease-out infinite}
.pr-gift svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transform-origin:50% 70%;animation:pr-gift-wiggle 3.2s ease-in-out infinite}
.pr-gift:hover{filter:brightness(1.1)}
.pr-gift:focus-visible{outline:2px solid #fff;outline-offset:3px}
@keyframes pr-gift-pulse{0%{box-shadow:0 0 0 0 rgba(242,169,59,.75),0 0 12px 2px rgba(242,169,59,.55)}70%{box-shadow:0 0 0 12px rgba(242,169,59,0),0 0 20px 5px rgba(242,169,59,.6)}100%{box-shadow:0 0 0 0 rgba(242,169,59,0),0 0 12px 2px rgba(242,169,59,.55)}}
@keyframes pr-gift-wiggle{0%,78%,100%{transform:rotate(0)}82%{transform:rotate(-13deg)}87%{transform:rotate(11deg)}92%{transform:rotate(-7deg)}96%{transform:rotate(4deg)}}
.pr-gift-toast{position:fixed;z-index:400;top:84px;right:max(16px,calc(50% - 620px));max-width:calc(100vw - 32px);padding:11px 16px;border:1px solid #f2a93b;border-radius:12px;background:#12352b;color:#ffe9ad;font:700 14px var(--body);box-shadow:0 12px 32px rgba(0,0,0,.5);pointer-events:none;animation:pr-gift-toast 5s ease forwards}
@keyframes pr-gift-toast{0%{opacity:0}8%{opacity:1}85%{opacity:1}100%{opacity:0;visibility:hidden}}
@media(prefers-reduced-motion:reduce){.pr-header .pr-gift{animation:none;box-shadow:0 0 14px 3px rgba(242,169,59,.6)}.pr-gift svg{animation:none}}
@media(max-width:1080px){
  .pr-gift-form{order:1;margin-left:auto}
  .pr-header .pr-gift-form + .pr-cta{margin-left:10px}
  .pr-nav:has(.pr-gift-form) .prn-burger{margin-left:10px}
}
@media(max-width:360px){.pr-header .pr-gift-form + .pr-cta{display:none}}