/* Optional woodland art skin.
   Enable with `html.kse-theme-woodland`.
   Disable by removing that class. */

html.kse-theme-woodland {
  --kse-woodland-bark: #5d3921;
  --kse-woodland-bark-dark: #3f2413;
  --kse-woodland-sand: #e8cfaa;
  --kse-woodland-leaf: #1f5a3f;
}

.kse-wood-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  padding: 6px 14px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #2f2418;
  border: 1px solid rgba(128, 85, 45, 0.44);
  background-color: transparent;
  background-image: url('/images/colorpatch.opt.webp');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center center;
  box-shadow: 0 2px 4px rgba(36, 20, 10, 0.16), inset 0 1px 0 rgba(255, 243, 213, 0.52);
  text-shadow: 0 1px 0 rgba(255, 250, 236, 0.55);
}

.kse-wood-chip--small {
  font-size: 10px;
  line-height: 1;
  padding: 5px 11px;
  border-radius: 999px;
  letter-spacing: 0.16em;
}

html.kse-theme-woodland .header-gradient {
  position: relative;
  overflow: hidden;
  background-color: #7a461f !important;
  background-image: url('/images/wood_beam_lg.opt.webp') !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: calc(100% + 72px) 100% !important;
  height: 132px !important;
  min-height: 132px !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}

html.kse-theme-woodland .header-gradient::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(130% 120% at 50% 0%, rgba(255, 180, 72, 0.44) 0%, rgba(255, 133, 36, 0.24) 38%, rgba(255, 133, 36, 0) 72%),
    linear-gradient(180deg, rgba(255, 168, 66, 0.28) 0%, rgba(255, 120, 30, 0.14) 34%, rgba(255, 120, 30, 0) 78%);
  z-index: 0;
}

html.kse-theme-woodland .header-gradient::after {
  content: none !important;
}

html.kse-theme-woodland .header-gradient > * {
  position: relative;
  z-index: 1;
}

html.kse-theme-woodland .pattern-pegboard {
  background-color: #ccb08a !important;
  background-image:
    linear-gradient(180deg, rgba(255, 247, 227, 0.18) 0%, rgba(87, 47, 22, 0.12) 100%),
    url('/images/wood-pattern.opt.webp') !important;
  background-repeat: no-repeat, repeat !important;
  background-position: center center, top left !important;
  background-size: 100% 100%, 220px auto !important;
  box-shadow: inset -12px 0 20px rgba(43, 22, 10, 0.2) !important;
}

html.kse-theme-woodland .bg-lantern {
  background-color: var(--kse-woodland-leaf) !important;
  background-image:
    linear-gradient(170deg, rgba(7, 36, 24, 0.72) 0%, rgba(7, 36, 24, 0.42) 46%, rgba(7, 36, 24, 0.78) 100%),
    url('/images/leaf_bg_sm.opt.webp'),
    url('/images/map_background_sm.opt.webp') !important;
  background-repeat: no-repeat, no-repeat, no-repeat !important;
  background-position: center center, center center, center center !important;
  background-size: 100% 100%, cover, cover !important;
  background-blend-mode: normal, soft-light, multiply !important;
}

html.kse-theme-woodland .bg-wood-sign {
  background-color: #4b2f1f !important;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(0, 0, 0, 0.14) 100%),
    url('/images/wood_beam_sm.opt.webp') !important;
  background-repeat: no-repeat, no-repeat !important;
  background-position: center center, center center !important;
  background-size: 100% 100%, 100% 100% !important;
  border-color: #2e1a10 !important;
  box-shadow: inset 0 0 0 3px rgba(40, 22, 13, 0.72), 0 4px 10px rgba(0, 0, 0, 0.38) !important;
}

html.kse-theme-woodland .terminal-stats-stage .bg-wood-sign {
  position: relative;
  overflow: hidden;
  background-color: rgba(65, 40, 24, 0.88) !important;
  background-image: none !important;
  border: 1px solid rgba(36, 20, 12, 0.74) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 238, 209, 0.08) !important;
}

html.kse-theme-woodland .terminal-stats-stage .bg-wood-sign::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 12px;
  pointer-events: none;
  background: url('/images/wood_beam_sm.opt.webp') center center / 100% 100% no-repeat;
  opacity: 0.95;
}

html.kse-theme-woodland .terminal-stats-stage .bg-wood-sign .kse-sign-pin {
  display: block !important;
  opacity: 0.72;
}

html.kse-theme-woodland .sticker-card {
  background-color: #c8a884 !important;
  background-image:
    linear-gradient(180deg, rgba(255, 247, 235, 0.26) 0%, rgba(131, 82, 46, 0.14) 100%),
    url('/images/wood-pattern.opt.webp') !important;
  background-repeat: no-repeat, repeat !important;
  background-position: center center, top left !important;
  background-size: 100% 100%, 180px auto !important;
  border-color: #4d331f !important;
}

html.kse-theme-woodland .header-gradient .kse-title-panel-wrap::before,
html.kse-theme-woodland .header-gradient .kse-county-title-panel-wrap::before {
  content: "" !important;
  inset: 1px -30px !important;
  background: none !important;
  background-image: url('/images/wood_beam_sm.opt.webp') !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: 100% 100% !important;
  filter: brightness(0.58) saturate(0.8) contrast(1.06) drop-shadow(0 7px 14px rgba(34, 17, 9, 0.58));
}

html.kse-theme-woodland .header-gradient .kse-title-panel-wrap::after,
html.kse-theme-woodland .header-gradient .kse-county-title-panel-wrap::after {
  content: none !important;
}

html.kse-theme-woodland .header-gradient .kse-title-panel-text,
html.kse-theme-woodland .header-gradient .kse-county-title-panel-text {
  color: #fff8e9;
  text-shadow: 0 2px 0 rgba(48, 23, 11, 0.55);
}

html.kse-theme-woodland .header-gradient .kse-title-panel-wrap,
html.kse-theme-woodland .header-gradient .kse-county-title-panel-wrap {
  max-width: min(78vw, 1040px) !important;
}

html.kse-theme-woodland .modal-overlay.kse-passport-overlay.kse-passport-woodland:not(.kse-around-guide-overlay) {
  background:
    radial-gradient(120% 112% at 50% 8%, rgba(53, 116, 75, 0.34) 0%, rgba(20, 55, 34, 0.8) 74%),
    rgba(20, 33, 24, 0.62) !important;
}

html.kse-theme-woodland .modal-overlay.kse-passport-overlay.kse-passport-woodland .kse-passport-modal-shell:not(.kse-around-guide-shell) {
  background:
    linear-gradient(180deg, rgba(89, 54, 29, 0.95) 0%, rgba(64, 39, 21, 0.98) 100%),
    url('/images/leaf_bg_sm.opt.webp') center center / cover no-repeat !important;
  background-blend-mode: normal, soft-light !important;
  border-color: #e0b982 !important;
  box-shadow: 0 34px 76px rgba(16, 8, 3, 0.58), 0 0 0 3px rgba(244, 215, 167, 0.46) inset !important;
}

html.kse-theme-woodland .modal-overlay.kse-passport-overlay.kse-passport-woodland .kse-passport-modal-header:not(.kse-around-guide-header) {
  background:
    linear-gradient(180deg, rgba(255, 240, 210, 0.18) 0%, rgba(255, 240, 210, 0) 50%),
    url('/images/wood_beam_lg.opt.webp') center center / cover no-repeat !important;
  border-bottom-color: rgba(76, 43, 21, 0.44) !important;
  color: #fff6e3 !important;
  text-shadow: 0 1px 0 rgba(63, 30, 12, 0.42) !important;
}

html.kse-theme-woodland .modal-overlay.kse-passport-overlay.kse-passport-woodland .kse-passport-modal-header:not(.kse-around-guide-header) h2,
html.kse-theme-woodland .modal-overlay.kse-passport-overlay.kse-passport-woodland .kse-passport-modal-header:not(.kse-around-guide-header) p,
html.kse-theme-woodland .modal-overlay.kse-passport-overlay.kse-passport-woodland .kse-passport-modal-header:not(.kse-around-guide-header) .kse-passport-modal-close {
  color: #fff5dd !important;
}

html.kse-theme-woodland .modal-overlay.kse-passport-overlay.kse-passport-woodland .kse-passport-modal-content:not(.kse-around-guide-content) {
  background-image:
    linear-gradient(180deg, rgba(255, 245, 224, 0.94) 0%, rgba(240, 220, 185, 0.92) 100%),
    url('/images/map_background_sm.opt.webp') !important;
  background-repeat: no-repeat, repeat !important;
  background-position: center center, top left !important;
  background-size: 100% 100%, 420px auto !important;
}

html.kse-theme-woodland .modal-overlay.kse-passport-overlay.kse-passport-woodland .kse-passport-section {
  background-image:
    linear-gradient(180deg, rgba(255, 251, 243, 0.9) 0%, rgba(249, 237, 213, 0.88) 100%),
    url('/images/wood-pattern.opt.webp') !important;
  background-repeat: no-repeat, repeat !important;
  background-position: center center, top left !important;
  background-size: 100% 100%, 200px auto !important;
  border-color: rgba(183, 130, 77, 0.7) !important;
}

html.kse-theme-woodland .modal-box-rigid.mobile-fullscreen.max-w-7xl > .flex-1.bg-lantern.relative {
  position: relative;
}

html.kse-theme-woodland .modal-box-rigid.mobile-fullscreen.max-w-7xl > .flex-1.bg-lantern.relative::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 54px;
  pointer-events: none;
  z-index: 1;
  opacity: 0.92;
  background-image: url('/images/sm_grass_clump_1.opt.webp'), url('/images/sm_grass_clump_3.opt.webp'), url('/images/sm_grass_clump_1.opt.webp');
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position: left 8px bottom -3px, right 14px bottom -4px, left 34% bottom -8px;
  background-size: 120px auto, 136px auto, 86px auto;
}

html.kse-theme-woodland .kse-around-guide-content {
  background-image:
    linear-gradient(180deg, rgba(255, 247, 229, 0.95) 0%, rgba(236, 218, 185, 0.93) 100%),
    url('/images/map_background_sm.opt.webp') !important;
  background-repeat: no-repeat, repeat !important;
  background-position: center center, top left !important;
  background-size: 100% 100%, 420px auto !important;
}

html.kse-theme-woodland .kse-around-guide-summary,
html.kse-theme-woodland .kse-around-guide-card,
html.kse-theme-woodland .kse-around-guide-error {
  background-image:
    linear-gradient(180deg, rgba(255, 252, 245, 0.9) 0%, rgba(246, 233, 209, 0.86) 100%),
    url('/images/wood-pattern.opt.webp') !important;
  background-repeat: no-repeat, repeat !important;
  background-position: center center, top left !important;
  background-size: 100% 100%, 200px auto !important;
}

@media (max-width: 920px) {
  html.kse-theme-woodland .header-gradient {
    height: 116px !important;
    min-height: 116px !important;
  }

  html.kse-theme-woodland .modal-box-rigid.mobile-fullscreen.max-w-7xl > .flex-1.bg-lantern.relative::after {
    opacity: 0.72;
    background-size: 88px auto, 104px auto, 62px auto;
    background-position: left 6px bottom -2px, right 8px bottom -3px, left 36% bottom -6px;
  }
}

/* Phone-only leaders modal cleanup: remove dark side walls, keep bottom grass clumps. */
html.kse-theme-woodland[data-kse-device-tier="phone"] .kse-terminal-shell.mode-leaders .kse-terminal-body.bg-lantern {
  background-image: none !important;
  background-color: transparent !important;
}

html.kse-theme-woodland[data-kse-device-tier="phone"] .kse-terminal-shell.mode-leaders .terminal-leader-stage--soil {
  background-image: url('/images/top_bg_with_soil.png') !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
  background-color: #6db9e8 !important;
}

html.kse-theme-woodland[data-kse-device-tier="phone"] .kse-terminal-shell.mode-leaders .terminal-leader-clouds,
html.kse-theme-woodland[data-kse-device-tier="phone"] .kse-terminal-shell.mode-leaders .terminal-leader-fx,
html.kse-theme-woodland[data-kse-device-tier="phone"] .kse-terminal-shell.mode-leaders .terminal-leader-top-grass {
  display: none !important;
}

html.kse-theme-woodland[data-kse-device-tier="phone"] .kse-terminal-shell.mode-leaders .terminal-leader-stage--soil .terminal-leader-board-head {
  padding-top: 14px !important;
}

@media (max-width: 980px) and (orientation: landscape) {
  html.kse-theme-woodland[data-kse-device-tier="phone"] .kse-terminal-shell.mode-leaders .kse-terminal-body {
    padding-left: 0 !important;
    padding-right: 0 !important;
    background-color: transparent !important;
  }

  html.kse-theme-woodland[data-kse-device-tier="phone"] .kse-terminal-shell.mode-leaders .kse-terminal-body::after {
    display: none !important;
  }

  html.kse-theme-woodland[data-kse-device-tier="phone"] .kse-terminal-shell.mode-leaders .terminal-leader-stage--soil {
    padding: 8px 8px 10px !important;
    background-image: url('/images/top_bg_with_soil.png') !important;
    background-repeat: no-repeat !important;
    background-position: center calc(100% + 170px) !important;
    background-size: cover !important;
    background-color: #6db9e8 !important;
  }

  html.kse-theme-woodland[data-kse-device-tier="phone"] .kse-terminal-shell.mode-leaders .terminal-leader-stage--soil::after {
    display: none !important;
  }

  html.kse-theme-woodland[data-kse-device-tier="phone"] .kse-terminal-shell.mode-leaders .terminal-leader-stage--soil .terminal-leader-board {
    width: calc(100% - 56px) !important;
    max-width: 1320px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
