/* =========================================================================
   menu-skin.css — obrázkový „skin" menu (scenérie + dřevěný/„candy" nábytek)
   --------------------------------------------------------------------------
   Nahrazuje ručně kreslené CSS plochy (slunce, kopce, cedule, karty, tlačítka,
   medailonky, uzly cesty…) vygenerovanými obrázky z assets/menu/normalizovano/.

   Princip: tenhle soubor se načítá AŽ PO inline <style> v index.html, takže
   v kaskádě vyhrává a jen PŘEKRESLUJE povrch — markup, rozměry ani logika se
   nemění (ADR-0015). Když obrázek chybí, padá se na původní CSS vzhled.

   Cesty jsou relativní k tomuto souboru (assets/menu/ → normalizovano/<x>.webp).
   Pojmenování: anglické třídy z index.html; komentáře česky (ADR-0003).
   ========================================================================= */

/* ---- proměnné s cestami (jediné místo k úpravě) ---- */
:root {
  --mnu: url('normalizovano');
}

/* =========================================================================
   1) SCENÉRIE POZADÍ — obloha, slunce, mraky, kopce (kampaň + obecná menu)
   ========================================================================= */

/* obloha: rastrová modrá obloha (2. dávka) přes všechny menu/kampaň. Pod ní
   zůstává původní CSS gradient jako fallback (kdyby obrázek nenačetl). Spodek
   oblohy stejně zakrývají kopce, takže se neztrácí přechod do zeleně. */
.overlay.menu {
  background:
    url('normalizovano/sky-blue.webp') center top / cover no-repeat,
    linear-gradient(#4fb8f5 0%, #86d3ff 42%, #bfeaff 70%, #d8f3e0 100%) !important;
}

/* slunce: kampaň má .c-sun, ostatní menu pseudo ::before */
.camp-scene .c-sun,
.overlay.menu:not(#campaign):not(#campaignSetup)::before {
  background: url('normalizovano/sun-warm.webp') center / contain no-repeat !important;
  width: 210px !important;
  height: 210px !important;
  top: -54px !important;
  right: -44px !important;
  border-radius: 0 !important;
}

/* kopce: přední (h1) + zadní (h2); obecná menu mají pseudo ::after */
.camp-scene .c-hill,
.overlay.menu:not(#campaign):not(#campaignSetup)::after {
  background: transparent no-repeat bottom center !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.camp-scene .h1,
.overlay.menu:not(#campaign):not(#campaignSetup)::after {
  background-image: url('normalizovano/hills-wide.webp') !important;
  background-size: 100% auto !important;
  height: 220px !important;
  bottom: -96px !important;
}
/* Zadní kopec (hloubka za h1). POZOR: hills-wide.webp je OBDÉLNÍKOVÝ rastr, ale
   původní box zadního kopce byl z index.html úzký (width:90%, left:-30%), takže
   jeho PRAVÁ HRANA končila v ~60 % šířky plochy → na širokém/nízkém okně se
   ukázala jako tvrdý SVISLÝ ŠEV (obrázek prostě skončil a odhalil h1 níž).
   Elipsový vektorový kopec se zaobleným krajem to kdysi schoval, rastr už ne.
   Řešení: rozšířit box přes CELOU šířku jako h1 (obě hrany mimo obrazovku), stejné
   měřítko (100% auto) → žádný svislý šev; jen vyšší poloha + ztlumení drží dojem
   vzdálených kopců za předním h1. Funguje na libovolný poměr stran (telefon i desktop). */
.camp-scene .h2 {
  background-image: url('normalizovano/hills-wide.webp') !important;
  background-size: 100% auto !important;
  background-position: center bottom !important;
  left: -12% !important;
  width: 124% !important;
  height: 220px !important;
  bottom: -40px !important;
  z-index: -1 !important;
  filter: brightness(0.9) saturate(0.9) !important; /* zadní vrstva = tlumenější (hloubka) */
}

/* mraky: zhasnout CSS bubliny (::before/::after) a vykreslit obrázek mráčku */
.camp-scene .c-cloud {
  background: url('normalizovano/cloud-b.webp') center / contain no-repeat !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
/* druhý mráček = jiná silueta (cloud-c), ať se trojice neopakuje */
.camp-scene .cl2 {
  background-image: url('normalizovano/cloud-c.webp') !important;
}
.camp-scene .c-cloud::before,
.camp-scene .c-cloud::after {
  display: none !important;
}
.camp-scene .cl1 {
  width: 132px !important;
  height: 78px !important;
}
.camp-scene .cl2 {
  width: 108px !important;
  height: 64px !important;
}
.camp-scene .cl3 {
  width: 90px !important;
  height: 54px !important;
}

/* =========================================================================
   2) DŘEVĚNÁ CEDULE (nadpis) — kampaň .plank + obecné menu .logo h1
   ========================================================================= */
.camp-sign .plank,
.overlay.menu .logo h1,
.overlay.result .result-inner h2 {
  background: none !important;
  border: 30px solid transparent !important;
  border-image: url('normalizovano/sign-plank.webp') 34% 26% fill stretch !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: drop-shadow(0 7px 5px rgba(0, 0, 0, 0.3));
  color: #fff7e6 !important;
  text-shadow: 0 3px 0 rgba(94, 54, 19, 0.85) !important;
}
/* nýty už jsou součástí obrázku cedule */
.camp-sign .nail {
  display: none !important;
}

/* =========================================================================
   3) TLAČÍTKA
   ========================================================================= */

/* hlavní tlačítka menu — primární (zelené) a ghost (krémové) jako „candy" pilulky.
   ---------------------------------------------------------------------------
   PROČ 3 vrstvy pozadí místo border-image:
   Původní `border-image ... 0 46% fill stretch` roztahoval CELÝ obrázek do
   výšky i šířky tlačítka (svislý řez = 0). Jelikož zdroj je 1024×~290 a tlačítko
   je jen ~53 px vysoké a širší, kulaté čepičky se DEFORMOVALY (zploštění, natažený
   lesk), 2řádkové tlačítko mělo jiné proporce než 1řádkové.
   Řešení = pilulka poskládaná ze 3 vrstev pozadí:
     • levá + pravá ČEPIČKA (`-l`/`-r`) přes `background-size: auto 100%` → škálují
       se UNIFORMNĚ na výšku tlačítka, takže zůstanou vždy kulaté (i nýtky) při
       LIBOVOLNÉ výšce (1 i 2 řádky) i šířce.
     • prostřední PÁS (`-base`) přes `100% 100%` = vodorovně JEDNOTNÝ průřez pilulky
       (proto se roztažením nic nezdeformuje) + průhledné zaoblené rohy (proto pod
       čepičkami neprosvítá obdélníkové „bílé" haló).
   Text odsazuje `padding-inline`, aby nepřekrýval čepičky → snese libovolně dlouhý
   text (delší se zalomí a pilulka se svisle protáhne, čepičky zůstanou kulaté). */
.overlay.menu .btn-primary,
#campaign .play-btn,
#campaignSetup #csStart {
  background:
    url('normalizovano/btn-primary-l.webp') left center / auto 100% no-repeat,
    url('normalizovano/btn-primary-r.webp') right center / auto 100% no-repeat,
    url('normalizovano/btn-primary-base.webp') center / 100% 100% no-repeat !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding-left: 44px !important;
  padding-right: 44px !important;
  box-shadow: none !important;
  filter: drop-shadow(0 6px 3px rgba(0, 0, 0, 0.3));
  color: #fff !important;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35) !important;
}
.overlay.menu .btn-ghost {
  background:
    url('normalizovano/btn-ghost-l.webp') left center / auto 100% no-repeat,
    url('normalizovano/btn-ghost-r.webp') right center / auto 100% no-repeat,
    url('normalizovano/btn-ghost-base.webp') center / 100% 100% no-repeat !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding-left: 44px !important;
  padding-right: 44px !important;
  box-shadow: none !important;
  filter: drop-shadow(0 6px 3px rgba(0, 0, 0, 0.28));
  color: #6b4a1c !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) !important;
}
.overlay.menu .btn-primary:active,
.overlay.menu .btn-ghost:active,
#campaign .play-btn:active {
  transform: translateY(3px) !important;
  filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.3)) !important;
}

/* kulatá rohová tlačítka kampaně (zpět/ozubené kolo). Základ = dřevěné kolečko;
   účelové gold-rim varianty (oranžové zpět, modré nastavení) je přebíjejí níž. */
#campaign .round,
#campaignSetup .round {
  background: url('normalizovano/btn-round-wood.webp') center / contain no-repeat !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.3));
}
#campaign .round:active,
#campaignSetup .round:active {
  transform: translateY(2px) !important;
}
/* účelové verze: oranžové „zpět" + modré „nastavení", obě se zlatým rámem
   (ladí s gold-rim „go" v kartě kapitoly). Ikona je ZAPEČENÁ v obrázku, takže
   původní vnitřní SVG šipku / ⚙️ glyf schováme, ať se nezdvojí. */
#campaign .round.back,
#campaignSetup .round.back {
  background-image: url('normalizovano/btn-back-round.webp') !important;
}
#campaign .round.gear,
#campaignSetup .round.gear {
  background-image: url('normalizovano/btn-gear-round.webp') !important;
  font-size: 0 !important; /* schovej ⚙️ glyf */
}
#campaign .round.back .ic,
#campaignSetup .round.back .ic {
  display: none !important;
}

/* poutač stavby kampaně ve stavu HOTOVO (.ready) = zelený zlatě orámovaný panel
   (panel-green, 2. dávka). Zelená = úspěch („stavba hotová, další odemčena").
   Stav .gate (čeká na stavbu) zůstává zlatě pulzující — to je jiný signál. */
#campaign .camp-build.ready {
  background: none !important;
  border: 22px solid transparent !important;
  border-image: url('normalizovano/panel-green.webp') 26% fill stretch !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #fff !important;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.32) !important;
  filter: drop-shadow(0 5px 4px rgba(0, 0, 0, 0.25));
}

/* zelené kulaté „go" tlačítko v kartě kapitoly — nově zlatě orámované se
   zapečeným ▶ (2. dávka). Vnitřní SVG trojúhelník proto schováme. */
#campaign .cc-go {
  background: url('normalizovano/btn-go-round.webp') center / contain no-repeat !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.28));
}
#campaign .cc-go .ic {
  display: none !important;
}

/* =========================================================================
   4) KARTY
   ========================================================================= */

/* karta kapitoly — dřevěně-krémový rám (9-slice) */
#campaign .camp-chap {
  background: none !important;
  border: 28px solid transparent !important;
  border-image: url('normalizovano/card-chapter.webp') 28% fill stretch !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: drop-shadow(0 7px 5px rgba(0, 0, 0, 0.25));
}

/* věkové dlaždice (preset) + dlaždice operací — krémový „candy" rám */
#campaignSetup .ps-tier,
#campaignSetup .ps-op {
  background: none !important;
  border: 22px solid transparent !important;
  border-image: url('normalizovano/tile-age.webp') 26% fill stretch !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: drop-shadow(0 5px 3px rgba(0, 0, 0, 0.2));
  color: #6b4a1c !important;
}
/* vybraná dlaždice — výrazný zlatý prstenec + nadzvednutí + zaškrtnutí.
   POZN.: drop-shadow() NEMÁ spread (4. hodnotu) → původní `0 0 0 3px` byl
   neplatný a celý filtr se zahazoval (vybraný věk nešel poznat). Tady už jen
   platné hodnoty: dva těsné zlaté rimy + záře hugují candy tvar dlaždice. */
#campaignSetup .ps-tier.active,
#campaignSetup .ps-op.active {
  filter: drop-shadow(0 0 1px #ff9d00) drop-shadow(0 0 1px #ff9d00)
    drop-shadow(0 0 9px rgba(255, 160, 0, 0.95)) drop-shadow(0 6px 4px rgba(0, 0, 0, 0.22)) !important;
  transform: translateY(-3px) scale(1.05);
  z-index: 2;
}
/* zaškrtávací odznak ve zvolené dlaždici (jednoznačný signál „tohle je vybráno") */
#campaignSetup .ps-tier {
  position: relative;
}
#campaignSetup .ps-tier.active::after {
  content: '✓';
  position: absolute;
  top: -8px;
  right: -8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(#ffd34d, #ff9d00);
  border: 3px solid #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

/* =========================================================================
   5) MEDAILONKY KAPITOL + UZLY HVĚZDNÉ CESTY (kulaté, fixní poměr)
   ========================================================================= */

/* medailonek kapitoly — barva prstenu dle --ring tématu */
#campaign .cc-medal {
  background: url('normalizovano/medal-blue.webp') center / contain no-repeat !important;
  border: 0 !important;
  box-shadow: none !important;
}
#campaign .camp-chap[style*='#36e0a0'] .cc-medal,
#campaign .camp-chap[style*='5fb53a'] .cc-medal {
  background-image: url('normalizovano/medal-green.webp') !important;
}
/* uzly úrovní: aktuální (zlatý), splněný (zelený), zamčený (kámen) */
#campaign .cs-num {
  background: url('normalizovano/node-current.webp') center / contain no-repeat !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #6a3d0a !important;
  text-shadow: 0 2px 0 rgba(255, 255, 255, 0.45) !important;
}
#campaign .camp-sub.cleared .cs-num {
  background-image: url('normalizovano/node-done.webp') !important;
  color: #245417 !important;
}
#campaign .camp-sub.cur .cs-num {
  background-image: url('normalizovano/node-current.webp') !important;
  filter: drop-shadow(0 0 7px rgba(255, 210, 63, 0.85));
}
#campaign .camp-sub.locked .cs-num {
  background-image: url('normalizovano/node-locked.webp') !important;
  color: #5a554d !important;
  text-shadow: none !important;
}

/* =========================================================================
   6) HVĚZDY, CHECKBOX, AVATAR — drobné kulaté/čtvercové prvky
   ========================================================================= */

/* hvězdičkové pipy (kampaň, výsledek): obrázek hvězdy přes background.
   sprite rating-star má 2 stavy vedle sebe (plná | prázdná) → poloviny pruhu. */
#campaign .cc-stars span,
#campaign .cs-stars span,
.cs-stars span {
  color: transparent !important;
  text-shadow: none !important;
  background: url('normalizovano/rating-star.webp') 100% center / auto 100% no-repeat !important;
  width: 1em;
  display: inline-block;
}
#campaign .cc-stars .on,
#campaign .cs-stars .on,
.cs-stars .on {
  background-position: 0 center !important;
}
/* PRÁZDNÁ (nezískaná) hvězda — zřetelně utlumená, ať nehrané kolo NEvypadá
   dohrané (krémová „prázdná" se dřív pletla s plnou zlatou). */
#campaign .cc-stars .off,
#campaign .cs-stars .off,
.cs-stars .off {
  opacity: 0.42 !important;
  filter: grayscale(0.65) !important;
}

/* dřevěný checkbox (Doladit ručně) */
#campaignSetup .ps-adapt input[type='checkbox'],
.overlay.menu .ps-adapt input[type='checkbox'] {
  background: url('normalizovano/check-off.webp') center / contain no-repeat !important;
  border: 0 !important;
  border-radius: 0 !important;
  width: 26px !important;
  height: 26px !important;
}
#campaignSetup .ps-adapt input[type='checkbox']:checked,
.overlay.menu .ps-adapt input[type='checkbox']:checked {
  background-image: url('normalizovano/check-on.webp') !important;
}
#campaignSetup .ps-adapt input[type='checkbox']:checked::after,
.overlay.menu .ps-adapt input[type='checkbox']:checked::after {
  display: none !important;
}

/* rámeček avatara hráče (lišta profilu + výběr profilu) */
.prof-avatar {
  background: url('normalizovano/avatar-frame.webp') center / contain no-repeat !important;
  border: 0 !important;
  box-shadow: none !important;
}
/* OBRÁZKOVÝ avatar (2. dávka, av-*) — vlastní rámeček je zapečený, takže slot je
   zaoblený čtverec s obrázkem přes celý povrch (žádný mint rámeček / gradient).
   Obrázek sází ui.applyAvatar inline s 'important'; tady jen tvar/výplň. */
.prof-avatar.av-pic,
.overlay.menu .avatar-opt.av-pic,
.avatar-opt.av-pic {
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: cover !important;
  border-radius: 26% !important;
}
.prof-avatar.av-pic {
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.2) !important;
}
.overlay.menu .avatar-opt.av-pic {
  border: 2px solid #cf9a52 !important;
}

/* =========================================================================
   7) PENĚŽENKA, NÁPOVĚDA, PROFIL/VÝSLEDEK — panely
   ========================================================================= */

/* peněženka / coin chip */
.overlay.menu .chip,
.shop-wallet .chip {
  background: none !important;
  border: 0 solid transparent !important;
  border-left-width: 26px !important;
  border-right-width: 22px !important;
  border-image: url('normalizovano/chip-wallet.webp') 0 42% fill stretch !important;
  border-radius: 0 !important;
  color: #ffe9c7 !important;
}

/* bublina nápovědy */
#hint .hint-text {
  border: 26px solid transparent !important;
  border-image: url('normalizovano/bubble-hint.webp') 28% fill stretch !important;
  border-radius: 0 !important;
  background: none !important;
}

/* =========================================================================
   8) PŘEDNÍ KOPEC (2. dávka) — hills-wide má keře/stromky/kytky ZAPEČENÉ,
   takže původní vrstvení bush+grass už netřeba (jen jedna ilustrace kopců).
   ========================================================================= */
.camp-scene .h1,
.overlay.menu:not(#campaign):not(#campaignSetup)::after {
  background-image: url('normalizovano/hills-wide.webp') !important;
  background-repeat: no-repeat !important;
  background-position: center bottom !important;
  background-size: 100% auto !important;
}

/* Výška boxu kopce na obecných menu plochách: hills-wide se škáluje na 100 %
   ŠÍŘKY (background-size: 100% auto), takže jeho výška roste se šířkou plochy.
   Pevná výška boxu (220 px) proto na ŠIROKÉM okně (desktop) obrázek odshora
   OŘÍZLA → „uřízlé špičky" kopců + míň zeleně. Necháme výšku boxu sledovat
   poměr stran obrázku (1024×239), takže se vejde celý a špičky se nikdy
   neořežou (na úzkém telefonu zůstává chování beze změny). min-height je
   fallback pro staré prohlížeče bez aspect-ratio (drží původní 220 px).
   Kampaň (.h1) má vlastní vrstvení se zadním kopcem (h2), proto ji neměníme. */
.overlay.menu:not(#campaign):not(#campaignSetup)::after {
  height: auto !important;
  aspect-ratio: 1024 / 239 !important;
  min-height: 220px !important;
}

/* rohové listy (jen kampaňové scény, kde jsou pro ně <div> sloty) */
.camp-scene .c-leaves {
  position: absolute;
  bottom: 4px;
  width: 116px;
  height: 116px;
  z-index: 2;
  pointer-events: none;
  background: url('normalizovano/corner-leaves.webp') no-repeat;
  background-size: contain;
}
.camp-scene .c-leaves.ll {
  left: 2px;
}
.camp-scene .c-leaves.lr {
  right: 2px;
  transform: scaleX(-1);
}

/* =========================================================================
   9) STAVBA (#build) — čistý světlý panel desky (ADR-0024 leštění, ne dřevěný ponk)
   Mozaiku monumentu kreslí canvas; deska je decentní CSS panel, ať skica i číslice
   mají kontrast a paleta (DOM čipy) nesplývá s okrajem.
   ========================================================================= */
.overlay.menu #buildCanvas {
  background: transparent !important;
  border: 0 !important;
}
.overlay.menu .build-board {
  background: linear-gradient(180deg, #fffdf8 0%, #eaf1f1 100%) !important;
  border: 1px solid rgba(120, 90, 50, 0.22) !important;
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -14px 26px rgba(110, 80, 40, 0.05),
    0 10px 24px rgba(70, 50, 22, 0.22) !important;
}
.overlay.menu .bz-btn {
  color: #6b4f1f;
  background: rgba(255, 251, 243, 0.96);
}
.overlay.menu .pal-count {
  color: #7a6a4a;
}
.overlay.menu .build-hint,
.overlay.menu .build-progress {
  color: #7a6a4a;
}
.overlay.menu .build-progress {
  color: #b5791f;
}

/* =========================================================================
   10) VÝSLEDKOVÁ KARTA + PROFILOVÉ KARTY
   ========================================================================= */
/* rám kolem obsahu výsledku (zlato-krémová karta) */
.overlay.result .result-inner {
  border: 30px solid transparent !important;
  border-image: url('normalizovano/card-result.webp') 24% fill stretch !important;
  border-radius: 0 !important;
  background: none !important;
  padding: 6px 14px 16px !important;
  filter: drop-shadow(0 8px 6px rgba(0, 0, 0, 0.28));
}
/* vnitřní statistiky už nejsou samostatná karta (rám řeší celá karta) */
.overlay.result .res-stats {
  background: rgba(255, 255, 255, 0.45) !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* profilová karta (formulář nového profilu) — čistý krémový rám (tile-age, round =
   bez deformace v libovolné výšce) + emblém s robotem VYŘÍZNUTÝ a položený navrch
   (nestretchuje se → žádná deformace; viz feedback). */
.overlay.menu .prof-form {
  position: relative;
  border: 26px solid transparent !important;
  border-image: url('normalizovano/tile-age.webp') 26% fill stretch !important;
  border-radius: 0 !important;
  background: none !important;
  padding: 18px 18px 18px !important;
}
/* jemné lístky v horních rozích karty (místo „nalepeného" robota) — rostou
   nahoru-ven, drobné, jako přírodní akcent. Nedeformují se (contain). */
.overlay.menu .prof-form::before,
.overlay.menu .prof-form::after {
  content: '';
  position: absolute;
  top: -42px;
  width: 60px;
  height: 60px;
  background: url('normalizovano/corner-leaves.webp') center / contain no-repeat;
  pointer-events: none;
  z-index: 3;
  filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.2));
}
.overlay.menu .prof-form::before {
  left: 0;
  transform: scaleY(-1);
}
.overlay.menu .prof-form::after {
  right: 0;
  transform: scale(-1, -1);
}
/* jednotlivé profily v mřížce — čistý krémový rám (round) */
.overlay.menu .prof-card:not(.add) {
  background: none !important;
  border: 18px solid transparent !important;
  border-image: url('normalizovano/tile-age.webp') 26% fill stretch !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.2));
}