/* ============================================================
   Zookoutek Engine — Visual Overlay v1
   Importuje se do zoo_game_engine view PŘED engine.js. Engine.js
   svojí inline <style> stane v <head>; tento overlay přijde POTÉ
   a override-uje konkrétní pravidla. Žádný refactor JSXu/JS.
   ============================================================ */

/* Brand tokens (failsafe — kdyby zoo_design_tokens.css nedoplakal) */
:root {
  --zk-brown:         #5a3a1e;
  --zk-brown-soft:    #8a6a4a;
  --zk-brown-deep:    #3d2713;
  --zk-cream:         #f8f5f0;
  --zk-cream-deep:    #efe9de;
  --zk-border:        #d4c4a8;
  --zk-orange:        #ff8c42;
  --zk-orange-press:  #f07d30;
  --zk-orange-soft:   #ffe0cc;
  --zk-success:       #5a8a3e;
  --zk-warning:       #c77a1e;
  --zk-error:         #b84a2e;
  --zk-shadow-rest:   0 1px 2px rgba(90,58,30,.06);
  --zk-shadow-hover:  0 6px 20px rgba(90,58,30,.10);
}

/* ===== PLAYER (cecil-app) — modern polish ===== */

#cecil-app {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
  color: var(--zk-brown) !important;
  background: var(--zk-cream) !important;
  -webkit-font-smoothing: antialiased;
}

/* CTA tlačítka (welcome/station/end) — větší, oranžovější, modernější */
#cecil-app .ca-btn,
#cecil-app .ca-btn-accent {
  height: 56px !important;
  border-radius: 18px !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em !important;
  background: var(--zk-orange) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(255,140,66,.30) !important;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease !important;
  border: none !important;
  text-align: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
}
#cecil-app .ca-btn:hover,
#cecil-app .ca-btn-accent:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(255,140,66,.40) !important;
  background: var(--zk-orange-press) !important;
}
#cecil-app .ca-btn:active,
#cecil-app .ca-btn-accent:active {
  transform: translateY(0) !important;
  background: var(--zk-orange-press) !important;
}

/* Sekundární / back tlačítka */
#cecil-app .ca-btn-back {
  background: #fff !important;
  color: var(--zk-brown) !important;
  border: 1.5px solid var(--zk-border) !important;
  box-shadow: var(--zk-shadow-rest) !important;
  height: 48px !important;
  border-radius: 16px !important;
  font-weight: 700 !important;
}
#cecil-app .ca-btn-back:hover {
  border-color: var(--zk-orange) !important;
  background: var(--zk-cream-deep) !important;
}

/* Inputs */
#cecil-app .ca-input {
  background: #fff !important;
  border: 1.5px solid var(--zk-border) !important;
  border-radius: 16px !important;
  padding: 14px 16px !important;
  font-size: 16px !important;
  color: var(--zk-brown) !important;
  font-family: inherit !important;
  transition: border-color .12s ease, box-shadow .12s ease !important;
  box-sizing: border-box !important;
}
#cecil-app .ca-input:focus {
  border-color: var(--zk-orange) !important;
  box-shadow: 0 0 0 3px rgba(255,140,66,.18) !important;
  outline: none !important;
}

/* Progress bar — moderní */
#cecil-app .ca-progress-outer {
  background: var(--zk-cream-deep) !important;
  border-radius: 999px !important;
  height: 8px !important;
  overflow: hidden !important;
}
#cecil-app .ca-progress-fill {
  background: linear-gradient(90deg, var(--zk-orange) 0%, var(--zk-orange-press) 100%) !important;
  border-radius: 999px !important;
  transition: width .35s cubic-bezier(.2,.8,.2,1) !important;
}
#cecil-app .ca-progress-text {
  color: var(--zk-brown-soft) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}

/* Station karty — modernější vzhled */
#cecil-app .ca-station {
  background: #fff !important;
  border: 1px solid var(--zk-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--zk-shadow-rest) !important;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease !important;
}
#cecil-app .ca-station:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--zk-shadow-hover) !important;
  border-color: var(--zk-orange) !important;
}
#cecil-app .ca-station.active {
  border-color: var(--zk-orange) !important;
  box-shadow: 0 0 0 2px rgba(255,140,66,.20), var(--zk-shadow-hover) !important;
}
#cecil-app .ca-station.done {
  background: var(--zk-cream-deep) !important;
  opacity: .8 !important;
}
#cecil-app .ca-station-icon {
  font-size: 38px !important;
  filter: drop-shadow(0 2px 4px rgba(90,58,30,.15)) !important;
}

/* Doodle / mascot welcome — větší, výraznější */
#cecil-app .ca-doodle {
  filter: drop-shadow(0 8px 20px rgba(90,58,30,.18)) !important;
}

/* Animace — jemnější easing */
#cecil-app .ca-anim {
  transition: opacity .35s cubic-bezier(.2,.8,.2,1), transform .35s cubic-bezier(.2,.8,.2,1) !important;
}

/* ===== GPS-ADMIN — modernizace ===== */

.ga-btn,
.ga-btn-accent {
  border-radius: 16px !important;
  font-weight: 800 !important;
  letter-spacing: -0.005em !important;
  transition: transform .12s ease, box-shadow .12s ease !important;
  font-family: system-ui, -apple-system, sans-serif !important;
}
.ga-btn-accent {
  background: var(--zk-orange) !important;
  box-shadow: 0 2px 8px rgba(255,140,66,.25) !important;
}
.ga-btn-accent:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(255,140,66,.35) !important;
}
.ga-btn-green {
  background: var(--zk-success) !important;
}
.ga-btn-red {
  background: var(--zk-error) !important;
}
.ga-btn-brown {
  background: var(--zk-brown) !important;
}
.ga-btn-gray {
  background: var(--zk-brown-soft) !important;
}
.ga-card {
  border-radius: 16px !important;
  box-shadow: var(--zk-shadow-rest) !important;
}
.ga-tab {
  border-radius: 14px !important;
  font-weight: 800 !important;
  transition: all .15s ease !important;
}
.ga-tab.act {
  background: var(--zk-orange) !important;
  border-color: var(--zk-orange) !important;
  box-shadow: 0 2px 8px rgba(255,140,66,.25) !important;
}
.ga-toast {
  background: var(--zk-brown-deep) !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.25) !important;
}

/* Station list item — výraznější status indikátory */
.ga-st-item {
  border-radius: 14px !important;
  transition: transform .12s ease, box-shadow .12s ease !important;
}
.ga-st-item:hover {
  transform: translateX(2px) !important;
  box-shadow: var(--zk-shadow-rest) !important;
}
.ga-st-item.needs-gps {
  border-left: 4px solid var(--zk-error) !important;
  background: linear-gradient(90deg, #fff5f3 0%, #fff 50%) !important;
}
.ga-st-item.needs-photo {
  border-left: 4px solid var(--zk-warning) !important;
  background: linear-gradient(90deg, #fff8e6 0%, #fff 50%) !important;
}
.ga-st-item.ready {
  border-left: 4px solid var(--zk-success) !important;
  background: linear-gradient(90deg, #f0f6e8 0%, #fff 50%) !important;
}

/* GPS bar — fixní, výraznější */
.ga-gps-bar {
  font-family: ui-monospace, "SF Mono", Menlo, monospace !important;
  font-size: 13px !important;
  background: var(--zk-cream-deep) !important;
  border-color: var(--zk-border) !important;
  border-radius: 14px !important;
  font-weight: 600 !important;
  color: var(--zk-brown-soft) !important;
}

/* Title rec dot — výraznější */
.ga-rec-dot {
  box-shadow: 0 0 0 4px rgba(231,76,60,.20) !important;
}

/* ===== SURVEY MODE — modernizace ===== */

.sv-btn {
  border-radius: 16px !important;
  font-weight: 800 !important;
  transition: transform .12s ease, box-shadow .12s ease !important;
  font-family: system-ui, -apple-system, sans-serif !important;
}
.sv-btn[style*="ff8c42"],
.sv-btn[style*="orange"] {
  box-shadow: 0 2px 8px rgba(255,140,66,.25) !important;
}
.sv-card {
  border-radius: 16px !important;
  box-shadow: var(--zk-shadow-rest) !important;
}
.sv-map {
  border-radius: 16px !important;
  box-shadow: var(--zk-shadow-rest) !important;
  border: 1px solid var(--zk-border) !important;
}
.sv-tag {
  transition: all .12s ease !important;
}
.sv-inp,
.sv-ta {
  border-radius: 14px !important;
  border: 1.5px solid var(--zk-border) !important;
  font-family: system-ui, sans-serif !important;
  font-size: 15px !important;
}
.sv-inp:focus,
.sv-ta:focus {
  border-color: var(--zk-orange) !important;
  box-shadow: 0 0 0 3px rgba(255,140,66,.18) !important;
  outline: none !important;
}

/* Stats pill */
.sv-stats,
.ga-stats {
  border-radius: 16px !important;
  background: #fff !important;
}
.sv-stat,
.ga-stat {
  padding: 14px 12px !important;
}

/* ===== Globální polish ===== */

/* Smooth scroll */
html.cecil-active {
  scroll-behavior: smooth;
}

/* Lepší font rendering */
html.cecil-active body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Focus visible accent */
html.cecil-active *:focus-visible {
  outline: 2px solid var(--zk-orange) !important;
  outline-offset: 2px !important;
}

/* Disable button styling when in disabled state */
.ga-btn.disabled,
.sv-btn.disabled,
#cecil-app .ca-btn.disabled {
  opacity: .45 !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}
