/* =========================================================================
   game-skin.css — „denní" vzhled HERNÍ obrazovky (ladí s menu)
   --------------------------------------------------------------------------
   Překresluje chrome herní obrazovky (topbar, CÍL/výraz, HUD, tlačítka) z
   tmavého UI do jasného krémově-dřevěného „candy" stylu jako menu: jasná
   obloha + sluníčko/kopec v pozadí, krémové karty s hnědým obrysem, candy
   tlačítka. NESÁHÁ na herní desku (canvas #game), čísla-postavičky ani vysavač.

   Načítá se PO inline <style> i po menu-skin.css → v kaskádě vyhrává. Když
   soubor chybí, padá se na původní tmavý vzhled (bezpečný fallback). Vše je
   scopnuté na herní kontejnery (#topbar/#stage/#bottom) — menu (.overlay.menu)
   se NEMĚNÍ. Cesty relativní k assets/menu/.
   ========================================================================= */

/* ---- pozadí: jasná obloha + sluníčko vpravo nahoře + kopec dole (jako menu) ---- */
#app {
  background:
    url('normalizovano/sun.webp') no-repeat,
    url('normalizovano/hill-front.webp') no-repeat,
    linear-gradient(180deg, #4fb8f5 0%, #86d3ff 38%, #bfeaff 66%, #d8f3e0 100%) !important;
  background-position:
    right -34px top -30px,
    center bottom -6px,
    center !important;
  background-size:
    168px auto,
    150% auto,
    cover !important;
}

/* =========================================================================
   TOPBAR — průhledný (obloha prosvítá), hnědý text, candy chip/ikona
   ========================================================================= */
#topbar {
  background: transparent !important;
  border-bottom: 0 !important;
  backdrop-filter: none !important;
}
#topbar .lvl-name {
  color: #5e3613 !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
#topbar .chip {
  background: linear-gradient(#fff, #ffe9c9) !important;
  border: 2px solid #cf9a52 !important;
  color: #7a4e1c !important;
  box-shadow: 0 3px 0 #cf9a52 !important;
}
#topbar .chip .chip-ico {
  color: #56b23a !important;
}
#topbar .time-chip.low {
  background: linear-gradient(#fff0f0, #ffd9d6) !important;
  border-color: #e0736a !important;
  color: #c0392b !important;
}
#topbar .icon-btn {
  background: linear-gradient(#fff, #ffe9c9) !important;
  border: 2px solid #cf9a52 !important;
  color: #7a4e1c !important;
  box-shadow: 0 3px 0 #cf9a52 !important;
}
/* čistota (clean mód) */
#topbar .clean-label {
  color: #5e3613 !important;
}

/* ---- lišty (čistota/baterie/nádobka) — krémová dráha s hnědým lemem ---- */
#topbar .bar,
#bottom .bar {
  background: rgba(255, 255, 255, 0.6) !important;
  border: 2px solid #cf9a52 !important;
  box-shadow: inset 0 1px 3px rgba(94, 54, 19, 0.18) !important;
}

/* =========================================================================
   MATH ROW — CÍL panel + živý výraz = krémové karty (číslo-postavička beze změny)
   ========================================================================= */
#topbar .math-goal {
  background: linear-gradient(#fff8ea, #ffedd0) !important;
  border: 3px solid #5e3613 !important;
  box-shadow:
    0 4px 0 #5e3613,
    0 8px 12px rgba(0, 0, 0, 0.16) !important;
}
#topbar .mg-cap {
  color: #1f9d6b !important;
}
#topbar .mg-num {
  color: #e0453f !important;
  text-shadow: 0 2px 0 rgba(94, 54, 19, 0.25) !important;
}
#topbar .math-live {
  background: linear-gradient(#fff8ea, #ffedd0) !important;
  border: 3px solid #5e3613 !important;
  box-shadow:
    0 4px 0 #5e3613,
    0 8px 12px rgba(0, 0, 0, 0.16) !important;
}
#topbar .math-expr {
  color: #5e3613 !important;
}
#topbar .math-expr .me-empty {
  color: #9a805a !important;
}
#topbar .math-expr .me-paren {
  color: #d98e12 !important;
}
#topbar .mr-eq {
  color: #7a5a24 !important;
}
#topbar .mr-hidden {
  color: #9a805a !important;
}
#topbar .math-sum {
  color: #5e3613 !important;
}

/* =========================================================================
   FOOTER — průhledný; měřáky/skóre jako krémové karty, candy tlačítka
   ========================================================================= */
#bottom {
  background: transparent !important;
}
/* měřáky baterie/nádobka v krémové kartě */
#bottom .gauge {
  background: linear-gradient(#fff8ea, #ffedd0) !important;
  border: 3px solid #5e3613 !important;
  border-radius: 14px !important;
  padding: 7px 11px 9px !important;
  box-shadow:
    0 4px 0 #5e3613,
    0 8px 12px rgba(0, 0, 0, 0.14) !important;
}
#bottom .gauge-top,
#bottom .gauge-label {
  color: #5e3613 !important;
}
#bottom .gauge-val {
  color: #5e3613 !important;
}
/* skóre / tento tah */
#bottom .score-block,
#bottom .est-block {
  background: linear-gradient(#fff8ea, #ffedd0) !important;
  border: 3px solid #5e3613 !important;
  border-radius: 14px !important;
  box-shadow:
    0 4px 0 #5e3613,
    0 8px 12px rgba(0, 0, 0, 0.14) !important;
}
#bottom .score-cap,
#bottom .est-cap {
  color: #7a5a24 !important;
}
#bottom .score-num {
  color: #5e3613 !important;
}
#bottom .est-num {
  color: #1f9d6b !important;
}
#bottom .warn-row {
  color: #b5791f !important;
}

/* =========================================================================
   TLAČÍTKA herní obrazovky — candy (border-image stejné jako menu)
   ========================================================================= */
#bottom .btn-primary,
#stage .btn-primary {
  background: none !important;
  border: 0 solid transparent !important;
  border-left-width: 28px !important;
  border-right-width: 28px !important;
  border-image: url('normalizovano/btn-primary.webp') 0 46% fill stretch !important;
  border-radius: 0 !important;
  color: #fff !important;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.32) !important;
  box-shadow: none !important;
  filter: drop-shadow(0 5px 3px rgba(0, 0, 0, 0.25));
}
#bottom .btn-ghost,
#stage .btn-ghost {
  background: none !important;
  border: 0 solid transparent !important;
  border-left-width: 26px !important;
  border-right-width: 26px !important;
  border-image: url('normalizovano/btn-ghost.webp') 0 46% fill stretch !important;
  border-radius: 0 !important;
  color: #6b4a1c !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) !important;
  box-shadow: none !important;
  filter: drop-shadow(0 5px 3px rgba(0, 0, 0, 0.22));
}
#bottom .btn:active,
#stage .btn:active {
  transform: translateY(2px) scale(0.99) !important;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.25)) !important;
}
#bottom .btn-primary:disabled,
#stage .btn-primary:disabled,
#bottom .btn-ghost:disabled {
  opacity: 0.55 !important;
  filter: grayscale(0.25) drop-shadow(0 3px 2px rgba(0, 0, 0, 0.18)) !important;
}

/* =========================================================================
   OVLÁDÁNÍ — kompaktní ikony + barevné rozlišení (mobilní UI)
   • Nápověda = decentní krémový kruh „?" (místo celořádkového tlačítka)
   • Krok zpět „↶" = ORANŽOVÁ candy pilulka
   • Smazat = ČERVENÁ candy pilulka
   (2 id selektory → přebijí #bottom .btn-ghost border-image výše)
   ========================================================================= */
#bottom #hintBtn {
  border-image: none !important;
  border: 3px solid #5e3613 !important;
  border-radius: 50% !important;
  background: linear-gradient(#fff8ea, #ffedd0) !important;
  color: #7a4e1c !important;
  /* přesný kruh: width = height = --ctl-h (žádná deformace na ovál) */
  width: var(--ctl-h) !important;
  min-width: var(--ctl-h) !important;
  height: var(--ctl-h) !important;
  padding: 0 !important;
  font-size: 20px !important;
  font-weight: 900 !important;
  text-shadow: none !important;
  box-shadow: 0 4px 0 #5e3613 !important;
  filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.16)) !important;
}
#bottom #undoBtn {
  border-image: none !important;
  border: 3px solid #cf8420 !important;
  border-radius: 14px !important;
  background: linear-gradient(#ffc873, #ff9f33) !important;
  color: #6b3f0c !important;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45) !important;
  box-shadow: 0 4px 0 #b96a13 !important;
  filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.16)) !important;
}
#bottom #clearBtn {
  border-image: none !important;
  border: 3px solid #b3392b !important;
  border-radius: 14px !important;
  background: linear-gradient(#ff9485, #ef5b4a) !important;
  color: #fff !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25) !important;
  box-shadow: 0 4px 0 #a52f22 !important;
  filter: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.18)) !important;
}
/* stisk (dorovná vyšší specificitu výše, ať pilulky pružně klesnou) */
#bottom #hintBtn:active,
#bottom #undoBtn:active,
#bottom #clearBtn:active {
  transform: translateY(2px) scale(0.99) !important;
}

/* =========================================================================
   PŘEKRYV VÝSLEDKU TAHU (#turnResult) — krémová karta + candy tlačítka výše
   ========================================================================= */
#stage .turn-result {
  background: linear-gradient(#fff8ea, #ffedd0) !important;
  border: 4px solid #5e3613 !important;
  border-radius: 20px !important;
  color: #5e3613 !important;
  box-shadow:
    0 7px 0 #5e3613,
    0 12px 18px rgba(0, 0, 0, 0.28) !important;
}
#stage .turn-result .tr-body {
  color: #5e3613 !important;
}

/* hláška/úvodní tip nad deskou (#toast) — krémová bublina místo tmavé
   (danger/warn varianty si svou barvu ponechají = specifičtější selektor) */
#stage .toast {
  background: linear-gradient(#fff8ea, #ffedd0) !important;
  border: 3px solid #5e3613 !important;
  color: #5e3613 !important;
  box-shadow:
    0 6px 0 #5e3613,
    0 12px 18px rgba(0, 0, 0, 0.28) !important;
}