/* ═══════════════════════════════════════════════════════════
   FarmBrawl — Cosmetic themes (Estilo) HUD + plot-card soils
   Driven by body.game-theme-* / body.plot-skin-* and CSS vars
   set by CosmeticsVisuals.applyHudTheme / applyPlotSkinClass.
   ═══════════════════════════════════════════════════════════ */

:root {
  --theme-accent: #22c55e;
  --theme-accent-deep: #15803d;
  --theme-soft: rgba(34, 197, 94, 0.16);
  --theme-glow: rgba(34, 197, 94, 0.35);
  --theme-chip-border: rgba(34, 197, 94, 0.38);
  --theme-topbar-wash: transparent;
}

/* ── Topbar wash + chip accents ── */
#topbar {
  position: relative;
}
#topbar::before {
  content: '';
  pointer-events: none;
  position: absolute;
  inset: 0;
  background: var(--theme-topbar-wash);
  z-index: 0;
  opacity: 1;
}
#topbar > * {
  position: relative;
  z-index: 1;
}

body[data-farm-theme]:not([data-farm-theme="default"]) #topbar .hud-chip,
body[data-farm-theme]:not([data-farm-theme="default"]) #topbar .resource-chip,
body[data-farm-theme]:not([data-farm-theme="default"]) #topbar .tb-chip {
  border-color: var(--theme-chip-border) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px color-mix(in srgb, var(--theme-accent) 12%, transparent);
}

body[data-farm-theme]:not([data-farm-theme="default"]) #topbar .hud-chip i,
body[data-farm-theme]:not([data-farm-theme="default"]) #chip-bs i,
body[data-farm-theme]:not([data-farm-theme="default"]) .badge-on {
  color: var(--theme-accent) !important;
}

/* Active sidebar tab + hotbar tool under theme */
body[data-farm-theme]:not([data-farm-theme="default"]) #sidebar .nav-tab.active,
body[data-farm-theme]:not([data-farm-theme="default"]) .nav-item.active,
body[data-farm-theme]:not([data-farm-theme="default"]) #hotbar .tool.active {
  border-color: var(--theme-accent) !important;
  background: var(--theme-soft) !important;
  box-shadow: 0 0 0 2px var(--theme-glow);
  color: var(--theme-accent);
}

/* Shop cosmetic card active ring follows theme accent */
body[data-farm-theme]:not([data-farm-theme="default"]) .shop-cosmetic-card--active {
  border-color: var(--theme-accent) !important;
  box-shadow:
    inset 1px 1px 0 0 rgba(255, 255, 255, 0.08),
    0 0 0 2px var(--theme-accent-deep) !important;
}

/* Minimap frame accent */
body[data-farm-theme]:not([data-farm-theme="default"]) #minimap,
body[data-farm-theme]:not([data-farm-theme="default"]) .minimap-wrap {
  box-shadow: 0 0 0 1px var(--theme-chip-border), 0 8px 24px rgba(0, 0, 0, 0.35);
}

/* ── Per-theme preview gradients in shop (fallback if img fails) ── */
.theme-preview-default {
  background: linear-gradient(180deg, #9fd8f0 0%, #cdeccf 100%);
}
.theme-preview-sunset {
  background: linear-gradient(180deg, #ff8a5c 0%, #ffb347 45%, #ffe0a8 100%);
}
.theme-preview-night {
  background: linear-gradient(180deg, #0b1028 0%, #161b3a 50%, #1e2748 100%);
}
.theme-preview-sakura {
  background: linear-gradient(180deg, #f7b6d2 0%, #fff0f6 100%);
}
.theme-preview-tropical {
  background: linear-gradient(180deg, #38bdf8 0%, #5eead4 50%, #fde68a 100%);
}
.theme-preview-aurora {
  background: linear-gradient(180deg, #061428 0%, #0c3a38 55%, #12352e 100%);
}
.theme-preview-gold {
  background: linear-gradient(180deg, #f0c14b 0%, #fff4cc 100%);
}
.theme-preview-celestial {
  background: linear-gradient(180deg, #12082a 0%, #2a1060 50%, #4c1d95 100%);
}

/* ── Plot card soil skins (dashboard list) ── */
.plot-card {
  position: relative;
  overflow: hidden;
}
.plot-card-soil {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  image-rendering: auto;
  opacity: 0.92;
}
.plot-card > *:not(.plot-card-soil) {
  position: relative;
  z-index: 1;
}
.plot-card-soil--default {
  background-image: url('../assets/crops/soil-default.png');
  background-color: #6b4a33;
}
.plot-card-soil--cyber {
  background-image: url('../assets/crops/soil-cyber.png');
  background-color: #0e3a4a;
  image-rendering: pixelated;
  background-size: 48px 48px;
  background-repeat: repeat;
}
.plot-card-soil--volcanic {
  background-image: url('../assets/crops/soil-volcanic.png');
  background-color: #4a2010;
  image-rendering: pixelated;
  background-size: 48px 48px;
  background-repeat: repeat;
}
.plot-card-soil--magic {
  background-image: url('../assets/crops/soil-magic.png');
  background-color: #2a1840;
  image-rendering: pixelated;
  background-size: 48px 48px;
  background-repeat: repeat;
}

/* Soft overlay so plant UI stays readable over soil art */
.plot-card-soil::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(10, 18, 14, 0.15) 0%,
    rgba(10, 18, 14, 0.45) 55%,
    rgba(10, 18, 14, 0.72) 100%
  );
}

/* Theme-tinted ambient on world container chrome (subtle, not over canvas) */
body[data-farm-theme="night"] #world-section,
body[data-farm-theme="aurora"] #world-section,
body[data-farm-theme="celestial"] #world-section {
  box-shadow: inset 0 0 60px color-mix(in srgb, var(--theme-accent) 12%, transparent);
}

body[data-farm-theme="gold"] #world-section {
  box-shadow: inset 0 0 40px rgba(234, 179, 8, 0.08);
}

body[data-farm-theme="sakura"] #world-section {
  box-shadow: inset 0 0 40px rgba(244, 114, 182, 0.08);
}

/* Mobile bottom nav active under theme */
body.mobile-play[data-farm-theme]:not([data-farm-theme="default"]) .mobile-bottom-nav .mbn-item.active,
body.mobile-play[data-farm-theme]:not([data-farm-theme="default"]) .mobile-nav-item.active {
  color: var(--theme-accent);
}
body.mobile-play[data-farm-theme]:not([data-farm-theme="default"]) .mobile-bottom-nav .mbn-item.active .mbn-icon,
body.mobile-play[data-farm-theme]:not([data-farm-theme="default"]) .mobile-nav-item.active i {
  color: var(--theme-accent);
  filter: drop-shadow(0 0 6px var(--theme-glow));
}