/* ==========================================================
   FocusFarm — Stylesheet
   ========================================================== */

:root {
  --c-sky: #87ceeb;
  --c-sky-2: #b6e2f5;
  --c-grass: #7ec850;
  --c-grass-dark: #5fa83a;
  --c-soil: #8b5a2b;
  --c-soil-dark: #5e3a17;
  --c-soil-light: #c69a6a;
  --c-wood: #a87344;
  --c-wood-dark: #6f4423;
  --c-leaf: #3f8a3a;
  --c-cream: #fff8e7;
  --c-cream-2: #fdf2d6;
  --c-gold: #f4c430;
  --c-gold-dark: #c89c0a;
  --c-red: #d9534f;
  --c-blue: #4f8cd9;
  --c-purple: #9d6bd9;
  --c-text: #2b1d10;
  --c-text-soft: #5b432d;
  --c-shadow: rgba(45, 25, 10, 0.15);
  --c-shadow-strong: rgba(45, 25, 10, 0.4);

  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 28px;

  --shadow-sm: 0 2px 4px var(--c-shadow);
  --shadow-md: 0 4px 12px var(--c-shadow);
  --shadow-lg: 0 8px 24px var(--c-shadow-strong);
  --shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.15);

  --font-game: 'Trebuchet MS', 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Georgia', 'Trebuchet MS', serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  font-family: var(--font-game);
  color: var(--c-text);
  background: linear-gradient(180deg, var(--c-sky) 0%, var(--c-sky-2) 60%, var(--c-grass) 60%, var(--c-grass-dark) 100%);
  overflow: hidden;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

input {
  font-family: inherit;
}

.hidden { display: none !important; }

/* ============= App Layout ============= */
#app {
  display: grid;
  grid-template-columns: 220px 1fr;
  grid-template-rows: 64px 1fr;
  grid-template-areas:
    "topbar topbar"
    "sidenav main";
  height: 100vh;
  width: 100vw;
}

#top-bar {
  grid-area: topbar;
  background: linear-gradient(180deg, var(--c-wood) 0%, var(--c-wood-dark) 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  color: var(--c-cream);
  box-shadow: var(--shadow-md);
  z-index: 5;
  border-bottom: 3px solid var(--c-soil-dark);
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: bold;
  text-shadow: 1px 2px 0 var(--c-soil-dark);
  min-width: 200px;
}
.brand-logo { font-size: 26px; }

.stats {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  justify-content: center;
  flex-wrap: wrap;
}

.stat {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--c-cream);
  color: var(--c-text);
  padding: 6px 12px;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  font-weight: bold;
  border: 2px solid var(--c-soil);
  min-width: 70px;
  justify-content: center;
}
.stat-icon { font-size: 16px; }
.stat-value { font-variant-numeric: tabular-nums; }

.stat-level {
  display: flex;
  align-items: center;
  gap: 6px;
}
.xp-bar {
  position: relative;
  width: 140px;
  height: 18px;
  background: var(--c-soil-dark);
  border-radius: 9px;
  overflow: hidden;
  border: 2px solid var(--c-soil-dark);
}
.xp-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(180deg, #ffe680 0%, var(--c-gold) 50%, var(--c-gold-dark) 100%);
  transition: width 0.3s ease;
}
.xp-text {
  position: absolute;
  inset: 0;
  text-align: center;
  font-size: 11px;
  line-height: 14px;
  color: var(--c-text);
  text-shadow: 0 0 2px var(--c-cream);
  font-weight: bold;
}

.top-actions { display: flex; gap: 6px; min-width: 100px; justify-content: flex-end; }

.icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--c-cream);
  font-size: 18px;
  box-shadow: var(--shadow-sm);
  border: 2px solid var(--c-soil);
  transition: transform 0.1s;
}
.icon-btn:hover { transform: scale(1.08); }
.icon-btn:active { transform: scale(0.95); }

/* ============= Side Nav ============= */
#side-nav {
  grid-area: sidenav;
  background: linear-gradient(180deg, var(--c-soil-light) 0%, var(--c-soil) 100%);
  padding: 16px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 4px 0 8px var(--c-shadow);
  z-index: 4;
  border-right: 3px solid var(--c-soil-dark);
  overflow-y: auto;
}

.nav-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--c-cream);
  border-radius: var(--r-md);
  font-weight: bold;
  font-size: 15px;
  color: var(--c-text);
  border: 2px solid var(--c-soil-dark);
  box-shadow: var(--shadow-sm);
  position: relative;
  transition: all 0.15s;
}
.nav-btn:hover { transform: translateX(4px); background: var(--c-cream-2); }
.nav-btn.active {
  background: linear-gradient(180deg, var(--c-gold) 0%, var(--c-gold-dark) 100%);
  color: var(--c-text);
  transform: translateX(6px);
  box-shadow: var(--shadow-md);
}
.nav-icon { font-size: 22px; }
.nav-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--c-red);
  color: white;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  border: 2px solid var(--c-cream);
  box-shadow: var(--shadow-sm);
}

/* ============= Main Content ============= */
#main-content {
  grid-area: main;
  position: relative;
  overflow: auto;
  padding: 20px;
}

.view {
  display: none;
  animation: fadeIn 0.3s ease;
}
.view.active { display: block; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ============= Reusable ============= */
.card {
  background: var(--c-cream);
  border: 3px solid var(--c-soil);
  border-radius: var(--r-lg);
  padding: 20px;
  box-shadow: var(--shadow-md);
  margin-bottom: 16px;
}

.section-title {
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--c-cream);
  text-shadow: 2px 2px 0 var(--c-soil-dark);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: var(--r-md);
  font-weight: bold;
  font-size: 15px;
  border: 2px solid var(--c-soil-dark);
  box-shadow: var(--shadow-sm);
  background: var(--c-cream);
  color: var(--c-text);
  transition: all 0.12s;
  white-space: nowrap;
}
.btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn:active:not(:disabled) { transform: translateY(0); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
  background: linear-gradient(180deg, #98e271 0%, var(--c-grass-dark) 100%);
  color: white;
  text-shadow: 1px 1px 0 var(--c-soil-dark);
  border-color: var(--c-soil-dark);
}
.btn-gold {
  background: linear-gradient(180deg, #ffe680 0%, var(--c-gold-dark) 100%);
  color: var(--c-text);
}
.btn-danger {
  background: linear-gradient(180deg, #ff8a87 0%, var(--c-red) 100%);
  color: white;
}
.btn-blue {
  background: linear-gradient(180deg, #8fb8e8 0%, var(--c-blue) 100%);
  color: white;
}
.btn-sm { padding: 5px 10px; font-size: 13px; }
.btn-lg { padding: 14px 28px; font-size: 17px; }

.row { display: flex; align-items: center; gap: 10px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.col { display: flex; flex-direction: column; gap: 10px; }

/* ============= Farm View ============= */
.farm-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 10px;
}

/* ============= Original Farm Grid (.plot) ============= */
.farm-grid-wrap {
  display: flex;
  justify-content: center;
  padding: 24px 16px;
  background:
    radial-gradient(ellipse 80% 50% at 50% 30%, rgba(255,255,255,0.20) 0%, transparent 60%),
    repeating-linear-gradient(0deg, rgba(0,0,0,0.04) 0 2px, transparent 2px 12px),
    linear-gradient(180deg, #c89a72 0%, #a87f5a 60%, #8b6745 100%);
  border-radius: 18px;
  border: 5px solid #6f4423;
  box-shadow: var(--shadow-lg), inset 0 4px 0 rgba(255,255,255,0.18);
  margin-bottom: 16px;
}
.farm-grid {
  display: grid;
  gap: 10px;
  justify-content: center;
}
.plot {
  width: 88px;
  height: 88px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse 70% 50% at 50% 30%, rgba(255,255,255,0.18) 0%, transparent 60%),
    radial-gradient(circle at 22% 78%, rgba(0,0,0,0.10) 1.5px, transparent 2px),
    radial-gradient(circle at 76% 28%, rgba(0,0,0,0.10) 1.5px, transparent 2px),
    radial-gradient(circle at 60% 70%, rgba(0,0,0,0.10) 1.5px, transparent 2px),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.06) 0 2px, transparent 2px 8px),
    linear-gradient(160deg, #b08964 0%, #8d6a48 60%, #6e5236 100%);
  border: 2px solid #5e3a17;
  border-radius: 14px 18px 16px 14px / 16px 14px 18px 16px;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  color: #fff8c0;
  text-shadow: 0 1px 2px rgba(0,0,0,0.55);
  transition: transform 0.15s, filter 0.15s;
  box-shadow:
    inset 0 -3px 0 rgba(0,0,0,0.22),
    inset 0 2px 0 rgba(255,255,255,0.15),
    0 2px 4px rgba(0,0,0,0.18);
  user-select: none;
}
.plot:hover { transform: translateY(-2px); filter: brightness(1.08); }
.plot.empty {
  background:
    radial-gradient(ellipse 70% 50% at 50% 30%, rgba(255,255,255,0.10) 0%, transparent 60%),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.06) 0 2px, transparent 2px 8px),
    linear-gradient(160deg, #b89060 0%, #97734a 60%, #745538 100%);
}
.plot.locked {
  background:
    repeating-linear-gradient(45deg, rgba(0,0,0,0.18) 0 4px, rgba(0,0,0,0.30) 4px 8px),
    linear-gradient(160deg, #6a6a6a 0%, #444 100%);
  border-color: #444;
  cursor: not-allowed;
  opacity: 0.75;
}
.plot.locked:hover { transform: none; filter: none; }
.plot.ready {
  animation: bounce-ready 1.6s ease-in-out infinite;
  box-shadow:
    0 0 16px rgba(244, 196, 48, 0.55),
    inset 0 -3px 0 rgba(0,0,0,0.22),
    inset 0 2px 0 rgba(255,255,255,0.15),
    0 2px 4px rgba(0,0,0,0.18);
}
.plot.withered { filter: grayscale(0.7) brightness(0.75); }
.plot-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.plot-icon > svg,
.plot-icon > .svg-icon { width: 56px; height: 56px; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.30)); }

/* ============= Unified Painterly Farm Scene (LEGACY — superseded by .farm-grid) ============= */
   One scene that holds the field (crops), the pasture (animals),
   placed decorations, and the farmer. Everything sits on a layered
   painterly background: sky → tree-line → grass meadow → tilled soil. */
.farm-scene {
  position: relative;
  width: 100%;
  height: 540px;
  background: linear-gradient(to bottom,
    #87ceeb 0%, #b6e2f5 28%,
    #c5e1a5 28%, #aed581 52%,
    #9c8654 52%, #7a6638 100%);
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 16px;
  border: 5px solid #6f4423;
  box-shadow:
    var(--shadow-lg),
    inset 0 6px 0 rgba(255,255,255,0.18),
    inset 0 -6px 0 rgba(0,0,0,0.18);
  user-select: none;
}

/* Distant tree silhouettes — subtle painterly band along the horizon. */
.fs-tree-line {
  position: absolute;
  left: 0; right: 0;
  top: 22%;
  height: 60px;
  background-image:
    radial-gradient(ellipse 60px 35px at 8% 100%, #4a6b3a 60%, transparent 62%),
    radial-gradient(ellipse 80px 45px at 22% 100%, #3d5e30 60%, transparent 62%),
    radial-gradient(ellipse 50px 30px at 38% 100%, #4a6b3a 60%, transparent 62%),
    radial-gradient(ellipse 70px 40px at 55% 100%, #3d5e30 60%, transparent 62%),
    radial-gradient(ellipse 90px 50px at 72% 100%, #4a6b3a 60%, transparent 62%),
    radial-gradient(ellipse 60px 35px at 88% 100%, #3d5e30 60%, transparent 62%);
  pointer-events: none;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.18));
}

/* Grass meadow band — the animal pasture lives here on the right side. */
.fs-meadow {
  position: absolute;
  left: 0; right: 0;
  top: 28%;
  height: 24%;
  background:
    repeating-linear-gradient(94deg,
      transparent 0 22px,
      rgba(74, 107, 58, 0.18) 22px 24px,
      transparent 24px 38px,
      rgba(74, 107, 58, 0.10) 38px 40px),
    linear-gradient(to bottom, transparent 0%, rgba(120, 160, 80, 0.15) 100%);
  pointer-events: none;
}

/* Soil zone — tilled-earth band where crop plots are arranged. */
.fs-soil-zone {
  position: absolute;
  left: 0; right: 0;
  top: 52%;
  bottom: 0;
  background:
    repeating-linear-gradient(0deg,
      rgba(0,0,0,0.06) 0 4px,
      transparent 4px 14px),
    radial-gradient(ellipse 90% 50% at 50% 30%,
      rgba(255,255,255,0.10) 0%,
      transparent 70%);
  pointer-events: none;
}

/* Wooden fence: top edge above the soil, bottom edge along the scene base. */
.fs-fence {
  position: absolute;
  left: 0; right: 0;
  height: 16px;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg,
      #6f4423 0 6px,
      #8b5a2b 6px 30px,
      #6f4423 30px 36px,
      #4d2f17 36px 38px),
    linear-gradient(to bottom, #6f4423 0%, #4d2f17 100%);
  border-top: 2px solid #4d2f17;
  border-bottom: 2px solid #4d2f17;
  z-index: 6;
}
.fs-fence-top { top: 50%; transform: translateY(-50%); }
.fs-fence-bottom { bottom: 0; }

/* The crop field — staggered rows of rounded soil patches. */
.fs-field {
  position: absolute;
  left: 4%;
  right: 38%;
  top: 56%;
  bottom: 8%;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 4px 6px;
  z-index: 5;
}

.fs-plot {
  position: relative;
  cursor: pointer;
  transition: transform 0.15s ease, filter 0.15s ease;
}
.fs-plot-soil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 30%, rgba(255,255,255,0.18) 0%, transparent 60%),
    repeating-linear-gradient(90deg,
      rgba(0,0,0,0.10) 0 2px,
      transparent 2px 8px),
    linear-gradient(160deg, #a87f5a 0%, #8b6745 60%, #6e5236 100%);
  border-radius: 18px / 14px;
  box-shadow:
    inset 0 -3px 0 rgba(0,0,0,0.25),
    inset 0 2px 0 rgba(255,255,255,0.20),
    0 2px 4px rgba(0,0,0,0.20);
}
.fs-plot.empty .fs-plot-soil {
  background:
    radial-gradient(ellipse 80% 60% at 50% 30%, rgba(255,255,255,0.10) 0%, transparent 60%),
    linear-gradient(160deg, #b89060 0%, #97734a 60%, #745538 100%);
}
.fs-plot.locked .fs-plot-soil {
  background:
    repeating-linear-gradient(45deg, rgba(0,0,0,0.20) 0 4px, rgba(0,0,0,0.30) 4px 8px),
    linear-gradient(160deg, #6a6a6a 0%, #444 100%);
  opacity: 0.7;
}
.fs-plot.locked { cursor: not-allowed; }
.fs-plot.ready { animation: fs-plot-bounce 1.5s ease-in-out infinite; }
.fs-plot.ready .fs-plot-soil {
  background:
    radial-gradient(ellipse 80% 60% at 50% 30%, rgba(255,255,200,0.30) 0%, transparent 60%),
    linear-gradient(160deg, #b89060 0%, #97734a 60%, #745538 100%);
  box-shadow:
    inset 0 -3px 0 rgba(0,0,0,0.25),
    inset 0 2px 0 rgba(255,255,255,0.20),
    0 0 16px rgba(244, 196, 48, 0.55),
    0 2px 4px rgba(0,0,0,0.20);
}
.fs-plot.withered .fs-plot-soil { filter: grayscale(0.6); }
.fs-plot.fertilized::after {
  content: '✨';
  position: absolute;
  top: -4px; right: -4px;
  font-size: 14px;
  filter: drop-shadow(0 0 3px gold);
  z-index: 3;
}
.fs-plot.watered::before {
  content: '💧';
  position: absolute;
  top: -2px; left: -2px;
  font-size: 12px;
  opacity: 0.85;
  z-index: 3;
}
.fs-plot:not(.locked):hover { transform: translateY(-3px); filter: brightness(1.08); }

.fs-plot-sprite {
  position: absolute;
  left: 50%;
  bottom: 28%;
  transform: translateX(-50%);
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2;
}
.fs-plot-sprite > svg,
.fs-plot-sprite > .svg-icon { width: 100%; height: 100%; filter: drop-shadow(0 3px 3px rgba(0,0,0,0.30)); }

.fs-plot-hint {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-size: 11px;
  font-weight: bold;
  color: #fff8c0;
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
  letter-spacing: 0.4px;
  pointer-events: none;
}
.fs-plot-lock {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-size: 22px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  pointer-events: none;
}
.fs-plot-progress {
  position: absolute;
  left: 8%; right: 8%;
  bottom: 4px;
  height: 4px;
  background: rgba(0,0,0,0.45);
  border-radius: 2px;
  overflow: hidden;
}
.fs-plot-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #98e271, var(--c-grass-dark));
  /* No transition — width is updated by the per-second tick. */
  transition: none;
}
.fs-plot.ready .fs-plot-progress-fill {
  background: linear-gradient(90deg, var(--c-gold), var(--c-gold-dark));
}
.fs-plot-timer {
  position: absolute;
  left: 50%;
  top: -10px;
  transform: translateX(-50%);
  background: var(--c-soil-dark);
  color: var(--c-cream);
  font-size: 9px;
  padding: 1px 5px;
  border-radius: 8px;
  white-space: nowrap;
  font-weight: bold;
  z-index: 4;
}
@keyframes fs-plot-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* Animal capacity badge — top-left of the scene with optional + button. */
.fs-badge {
  position: absolute;
  top: 12px;
  left: 14px;
  z-index: 50;
  background: rgba(110, 84, 57, 0.92);
  color: #fff8c0;
  padding: 6px 12px;
  border-radius: 12px;
  font-weight: bold;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  box-shadow: var(--shadow-md);
}
.fs-badge-btn {
  padding: 4px 10px !important;
  font-size: 12px !important;
  margin: 0 !important;
}

/* Animal pasture: animals are absolutely-positioned sprites that drift. */
.fs-animals {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}
.fs-animal {
  position: absolute;
  width: 64px;
  height: 64px;
  transform: translate(-50%, -100%);
  cursor: pointer;
  pointer-events: auto;
  transition: left 3s ease-in-out, top 3s ease-in-out;
  filter: drop-shadow(0 4px 4px rgba(0,0,0,0.25));
  animation: fs-animal-bob 1.6s ease-in-out infinite alternate;
}
.fs-animal > svg,
.fs-animal > .svg-icon { width: 100%; height: 100%; }
@keyframes fs-animal-bob {
  0% { transform: translate(-50%, -100%) translateY(0); }
  100% { transform: translate(-50%, -100%) translateY(-3px); }
}
.fs-animal:hover { filter: drop-shadow(0 0 6px rgba(255,255,160,0.8)); }
.fs-animal-tag {
  position: absolute;
  left: 50%; top: -14px;
  transform: translateX(-50%);
  background: var(--c-gold-dark);
  color: white;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: bold;
  white-space: nowrap;
  text-shadow: 0 1px 1px rgba(0,0,0,0.4);
}
.fs-animal-hungry { background: #b85650; }

/* Decorations — overlay sprites placed anywhere in the scene. */
.fs-decos {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}
.fs-deco {
  position: absolute;
  width: 56px;
  height: 56px;
  transform: translate(-50%, -50%);
  cursor: pointer;
  pointer-events: auto;
  filter: drop-shadow(0 3px 3px rgba(0,0,0,0.30));
  transition: transform 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  line-height: 1;
}
.fs-deco > svg { width: 100%; height: 100%; }
.fs-deco:hover { transform: translate(-50%, -55%); }

/* Place mode: scene gets a crosshair cursor + banner overlay. */
.farm-scene.fs-placing { cursor: crosshair; }
.farm-scene.fs-placing .fs-plot,
.farm-scene.fs-placing .fs-animal { cursor: crosshair; }
.fs-place-banner {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  background: rgba(168, 115, 68, 0.96);
  color: white;
  padding: 8px 16px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: bold;
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  gap: 12px;
}
.fs-place-banner .btn { margin: 0; padding: 4px 10px; font-size: 12px; }

/* Wandering farmer character */
.fs-character {
  position: absolute;
  width: 56px;
  height: 72px;
  transform: translate(-50%, -100%);
  pointer-events: none;
  z-index: 8;
  transition: left 4s ease-in-out, top 4s ease-in-out;
  animation: fs-char-bob 0.5s ease-in-out infinite alternate;
  filter: drop-shadow(0 4px 4px rgba(0,0,0,0.30));
}
.fs-character > svg { width: 100%; height: 100%; }
@keyframes fs-char-bob {
  0% { transform: translate(-50%, -100%) translateY(0); }
  100% { transform: translate(-50%, -100%) translateY(-3px); }
}

/* Expansion hint cards row below the scene. */
.farm-expand-row {
  display: flex;
  gap: 12px;
  margin: 12px 0 24px;
  flex-wrap: wrap;
}
.farm-expand-card {
  flex: 1 1 300px;
  background: var(--c-cream);
  border: 2px solid var(--c-soil);
  border-radius: var(--r-md);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: var(--shadow-sm);
}
.farm-expand-card .btn { margin-top: 4px; align-self: flex-start; }

/* ============= Isometric Field (legacy — superseded by .farm-scene) ============= */
.farm-iso-wrap {
  position: relative;
  width: 100%;
  height: 480px;
  background: linear-gradient(to bottom,
    #87ceeb 0%, #b6e2f5 35%,
    #b8d8a3 35%, #87ab5b 100%);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 24px;
  border: 4px solid #6f4423;
  box-shadow: var(--shadow-lg), inset 0 4px 0 rgba(255,255,255,0.15);
}

/* Sky band: clouds drift, sun perches in the corner. */
.farm-sky {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 35%;
  pointer-events: none;
  overflow: hidden;
}
.farm-sky .cloud {
  position: absolute;
  top: 18%;
  width: 120px;
  height: 60px;
  animation: cloud-drift 60s linear infinite;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,0.10));
}
.farm-sky .cloud > svg { width: 100%; height: 100%; }
.farm-sky .cloud-2 {
  width: 100px;
  height: 50px;
  top: 55%;
  animation-duration: 90s;
  animation-delay: -30s;
  opacity: 0.85;
}
.farm-sky .sun {
  position: absolute;
  top: 8px;
  right: 24px;
  width: 80px;
  height: 80px;
  animation: sun-pulse 6s ease-in-out infinite;
}
.farm-sky .sun > svg { width: 100%; height: 100%; }
@keyframes cloud-drift {
  0% { left: -140px; }
  100% { left: 110%; }
}
@keyframes sun-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* Stage holds the iso grid + the wandering character. */
.farm-iso-stage {
  position: absolute;
  left: 50%;
  top: 58%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 350px;
}
.farm-iso-grid {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Diamond tile. Positioned absolutely from grid (col,row) projection. */
.iso-tile {
  position: absolute;
  width: 100px;
  height: 50px;
  margin-left: -50px; /* centre on the projected (x,y) */
  margin-top: -25px;
  cursor: pointer;
  transition: filter 0.2s ease, transform 0.2s ease;
}
.iso-tile-base {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #b07c4a 0%, #8b6f47 50%, #6e5639 100%);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  box-shadow: inset 0 -4px 0 rgba(0,0,0,0.20);
}
/* Subtle furrow lines drawn on the diamond face. */
.iso-tile-base::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(135deg, transparent 35%, rgba(0,0,0,0.10) 35% 37%, transparent 37% 50%, rgba(0,0,0,0.10) 50% 52%, transparent 52% 65%, rgba(0,0,0,0.10) 65% 67%, transparent 67%);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  pointer-events: none;
  opacity: 0.7;
}
.iso-tile.empty .iso-tile-base {
  background: linear-gradient(135deg, #c89a72 0%, #a87f5a 50%, #8b6745 100%);
}
.iso-tile.locked .iso-tile-base {
  background:
    repeating-linear-gradient(45deg, rgba(0,0,0,0.20) 0 4px, rgba(0,0,0,0.30) 4px 8px),
    linear-gradient(135deg, #6a6a6a 0%, #444 100%);
  opacity: 0.7;
}
.iso-tile.locked { cursor: not-allowed; }
.iso-tile.locked .iso-tile-base::after { display: none; }
.iso-tile.ready { animation: iso-bounce 1.4s ease-in-out infinite; }
.iso-tile.ready .iso-tile-base {
  background: linear-gradient(135deg, #a8d96f 0%, #8acf4b 50%, #6da637 100%);
  box-shadow: inset 0 -4px 0 rgba(0,0,0,0.20), 0 0 20px rgba(120,200,80,0.6);
}
.iso-tile.withered .iso-tile-base {
  background: linear-gradient(135deg, #a07060 0%, #6a4838 100%);
  filter: grayscale(0.4);
}
.iso-tile.fertilized::before {
  content: '✨';
  position: absolute;
  top: -6px;
  right: -2px;
  font-size: 16px;
  filter: drop-shadow(0 0 3px gold);
  pointer-events: none;
  z-index: 2;
}
.iso-tile.watered::before {
  content: '💧';
  position: absolute;
  top: -6px;
  left: -2px;
  font-size: 14px;
  opacity: 0.85;
  pointer-events: none;
  z-index: 2;
}
.iso-tile:hover { filter: brightness(1.10); transform: translateY(-2px); }
.iso-tile.locked:hover { filter: none; transform: none; }

.iso-tile-icon {
  position: absolute;
  left: 50%;
  bottom: 50%;
  transform: translate(-50%, 35%);
  width: 56px;
  height: 56px;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.iso-tile-icon > svg,
.iso-tile-icon > .svg-icon { width: 56px; height: 56px; }
.iso-tile-icon svg { filter: drop-shadow(0 2px 2px rgba(0,0,0,0.25)); }
.iso-tile-lock {
  font-size: 26px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}
.iso-tile-hint {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  font-weight: bold;
  color: #fff8c0;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  letter-spacing: 0.5px;
  pointer-events: none;
  white-space: nowrap;
}

.iso-tile-progress {
  position: absolute;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background: rgba(0,0,0,0.4);
  border-radius: 2px;
  overflow: hidden;
}
.iso-tile-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #98e271, var(--c-grass-dark));
  /* No transition: width is updated every second by the global tick. A
     transition causes a visible "rewind" on every re-render. */
  transition: none;
}
.iso-tile.ready .iso-tile-progress-fill {
  background: linear-gradient(90deg, var(--c-gold), var(--c-gold-dark));
}
.iso-tile-timer {
  position: absolute;
  left: 50%;
  bottom: -26px;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: bold;
  color: var(--c-cream);
  background: var(--c-soil-dark);
  padding: 1px 6px;
  border-radius: 8px;
  white-space: nowrap;
}

@keyframes iso-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* Decorative grass strip along the bottom edge. */
.farm-ground-edge {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 14px;
  background:
    linear-gradient(180deg, transparent 0%, rgba(46, 99, 28, 0.45) 100%),
    repeating-linear-gradient(90deg,
      rgba(46, 99, 28, 0.5) 0 3px,
      transparent 3px 8px,
      rgba(46, 99, 28, 0.4) 8px 11px,
      transparent 11px 14px);
  pointer-events: none;
}

/* Walking farmer character */
.farm-character {
  position: absolute;
  width: 48px;
  height: 64px;
  margin-left: -24px;
  margin-top: -64px; /* feet sit on the projected (x,y) point */
  pointer-events: none;
  z-index: 999;
  transition: left 4s ease-in-out, top 4s ease-in-out;
  animation: char-bob 0.5s ease-in-out infinite alternate;
  filter: drop-shadow(0 4px 4px rgba(0,0,0,0.30));
}
.farm-character > svg { width: 100%; height: 100%; }
@keyframes char-bob {
  0% { transform: translateY(0); }
  100% { transform: translateY(-3px); }
}

/* ============= Ranch / Animal Pens ============= */
.ranch-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 32px 24px 28px;
  background:
    radial-gradient(ellipse 80% 50% at 30% 30%, rgba(220, 180, 130, 0.4) 0%, transparent 60%),
    linear-gradient(180deg, #c69a6a 0%, #a87344 60%, #8b5a2b 100%);
  border-radius: 24px;
  border: 5px solid #5e3a17;
  box-shadow:
    var(--shadow-lg),
    inset 0 0 30px rgba(0,0,0,0.18),
    inset 0 4px 0 rgba(255,255,255,0.12);
  position: relative;
  overflow: hidden;
}
.ranch-wrap::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    /* hay tufts */
    radial-gradient(ellipse 4px 8px at 8% 80%, rgba(160, 110, 40, 0.6) 50%, transparent 60%),
    radial-gradient(ellipse 4px 8px at 92% 76%, rgba(160, 110, 40, 0.6) 50%, transparent 60%),
    radial-gradient(ellipse 5px 9px at 50% 92%, rgba(160, 110, 40, 0.5) 50%, transparent 60%),
    radial-gradient(ellipse 4px 7px at 14% 18%, rgba(160, 110, 40, 0.5) 50%, transparent 60%),
    /* pebbles */
    radial-gradient(circle at 22% 96%, rgba(80, 60, 40, 0.4) 2px, transparent 3px),
    radial-gradient(circle at 78% 8%, rgba(80, 60, 40, 0.5) 2px, transparent 3px);
  pointer-events: none;
  opacity: 0.7;
}
.ranch-grid {
  display: grid;
  gap: 12px;
  position: relative;
  z-index: 1;
}
.pen {
  width: 100px;
  height: 100px;
  background:
    radial-gradient(ellipse 60% 40% at 50% 30%, rgba(255,255,255,0.18) 0%, transparent 70%),
    linear-gradient(160deg, #b89a78 0%, #9d8062 60%, #7a624a 100%);
  border: 3px solid #5e3a17;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  position: relative;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow:
    inset 0 -3px 4px rgba(0,0,0,0.20),
    inset 0 2px 2px rgba(255,255,255,0.15),
    0 2px 3px rgba(0,0,0,0.15);
  user-select: none;
  color: #5e3a17;
}
/* Wooden plank pattern on pen edges */
.pen::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, rgba(0,0,0,0.15) 0 2px, transparent 2px 100%),
    linear-gradient(90deg, transparent 0 32px, rgba(0,0,0,0.10) 32px 34px, transparent 34px 100%),
    linear-gradient(90deg, transparent 0 64px, rgba(0,0,0,0.10) 64px 66px, transparent 66px 100%);
  border-radius: 13px;
  pointer-events: none;
  opacity: 0.6;
}
.pen:hover { transform: scale(1.05); box-shadow: 0 0 0 3px rgba(244, 196, 48, 0.6), 0 4px 8px rgba(0,0,0,0.25); }
.pen.empty { color: #fff8c0; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
.pen.locked {
  background:
    repeating-linear-gradient(45deg, rgba(0,0,0,0.10) 0 6px, rgba(0,0,0,0.20) 6px 12px),
    linear-gradient(180deg, #999 0%, #777 100%);
  border-color: #555;
  cursor: not-allowed;
  opacity: 0.65;
}
.pen.locked::before { display: none; }
.pen.ready {
  animation: bounce-ready 1.6s ease-in-out infinite;
  box-shadow: 0 0 16px rgba(244, 196, 48, 0.6), inset 0 -3px 4px rgba(0,0,0,0.20);
}
.pen.withered { filter: grayscale(0.6); opacity: 0.85; }
.pen .plot-icon { display: flex; align-items: center; justify-content: center; }
.pen .plot-icon > svg, .pen .plot-icon > .svg-icon { width: 64px !important; height: 64px !important; }
.pen .plot-progress {
  position: absolute;
  bottom: 6px;
  left: 6px;
  right: 6px;
  height: 5px;
  background: rgba(0,0,0,0.4);
  border-radius: 3px;
  overflow: hidden;
}
.pen .plot-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #98e271, var(--c-grass-dark));
  /* No transition: width is updated every second by the global tick. A
     transition causes a visible "rewind" on every re-render of the grid. */
  transition: none;
}
.pen.ready .plot-progress-fill {
  background: linear-gradient(90deg, var(--c-gold), var(--c-gold-dark));
  animation: pulse-glow 1.5s ease-in-out infinite;
}
.pen .plot-timer {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--c-soil-dark);
  color: var(--c-cream);
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 8px;
  white-space: nowrap;
  font-weight: bold;
}

/* Shop item icon container — keep emoji and SVG centered the same way */
.shop-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  height: 56px;
}
.inv-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
  min-height: 48px;
}

.plot-progress {
  position: absolute;
  bottom: 4px;
  left: 4px;
  right: 4px;
  height: 5px;
  background: rgba(0,0,0,0.4);
  border-radius: 3px;
  overflow: hidden;
}
.plot-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #98e271, var(--c-grass-dark));
  /* No transition: width is updated every second by the global tick. A
     transition causes a visible "rewind" on every re-render of the grid. */
  transition: none;
}
.plot.ready .plot-progress-fill {
  background: linear-gradient(90deg, var(--c-gold), var(--c-gold-dark));
  animation: pulse-glow 1.5s ease-in-out infinite;
}
.plot.ready {
  animation: bounce-ready 1.6s ease-in-out infinite;
  box-shadow: 0 0 16px rgba(244, 196, 48, 0.6), var(--shadow-inset);
}
@keyframes bounce-ready {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
@keyframes pulse-glow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}
.plot.withered { filter: grayscale(0.8) brightness(0.6); }
.plot.fertilized::after {
  content: '✨';
  position: absolute;
  top: -2px;
  right: -2px;
  font-size: 14px;
  filter: drop-shadow(0 0 3px gold);
}
.plot.watered::before {
  content: '💧';
  position: absolute;
  top: 2px;
  left: 2px;
  font-size: 12px;
  opacity: 0.7;
}
.plot-decoration {
  position: absolute;
  font-size: 28px;
}
.plot-timer {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--c-soil-dark);
  color: var(--c-cream);
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 8px;
  white-space: nowrap;
  font-weight: bold;
}

.farm-stats {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.farm-stat-card {
  background: var(--c-cream);
  border: 2px solid var(--c-soil);
  border-radius: var(--r-md);
  padding: 8px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: bold;
  box-shadow: var(--shadow-sm);
}

/* ============= Focus View ============= */
.focus-container {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.focus-card {
  background: var(--c-cream);
  border: 4px solid var(--c-soil);
  border-radius: var(--r-xl);
  padding: 28px;
  box-shadow: var(--shadow-lg);
  width: 100%;
  text-align: center;
}

.focus-title {
  font-family: var(--font-display);
  font-size: 28px;
  color: var(--c-text);
  margin-bottom: 8px;
}
.focus-subtitle {
  color: var(--c-text-soft);
  margin-bottom: 20px;
  font-size: 15px;
}

.duration-picker {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 16px 0;
  flex-wrap: wrap;
}
.duration-btn {
  background: var(--c-cream-2);
  border: 2px solid var(--c-soil);
  padding: 10px 18px;
  border-radius: var(--r-md);
  font-weight: bold;
  font-size: 16px;
  transition: all 0.12s;
}
.duration-btn:hover { background: var(--c-gold); }
.duration-btn.selected {
  background: linear-gradient(180deg, var(--c-gold) 0%, var(--c-gold-dark) 100%);
  border-color: var(--c-soil-dark);
  transform: scale(1.05);
  box-shadow: var(--shadow-md);
}

.duration-custom {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  margin: 12px 0;
}
.duration-custom input {
  width: 80px;
  padding: 8px;
  border: 2px solid var(--c-soil);
  border-radius: var(--r-sm);
  text-align: center;
  font-size: 16px;
  font-weight: bold;
}

.seed-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
  margin: 18px 0;
  max-height: 240px;
  overflow-y: auto;
  padding: 8px;
  background: var(--c-cream-2);
  border-radius: var(--r-md);
  border: 2px solid var(--c-soil);
}
.seed-card {
  background: var(--c-cream);
  border: 2px solid var(--c-soil);
  border-radius: var(--r-md);
  padding: 10px;
  text-align: center;
  cursor: pointer;
  transition: all 0.12s;
}
.seed-card:hover { transform: translateY(-3px); border-color: var(--c-gold); }
.seed-card.selected {
  border-color: var(--c-gold-dark);
  background: linear-gradient(180deg, #fff8c0 0%, #ffe680 100%);
  box-shadow: var(--shadow-md);
}
.seed-card.locked { opacity: 0.5; cursor: not-allowed; }
.seed-card-icon { font-size: 36px; }
.seed-card-name { font-size: 12px; font-weight: bold; }
.seed-card-info { font-size: 10px; color: var(--c-text-soft); }

/* Focus session active */
.focus-session-active {
  text-align: center;
  padding: 40px 20px;
}
.focus-tree-stage {
  font-size: 140px;
  margin: 20px 0;
  display: inline-block;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.2));
  animation: sway 4s ease-in-out infinite;
  transition: all 0.5s ease;
}
@keyframes sway {
  0%, 100% { transform: rotate(-2deg); }
  50% { transform: rotate(2deg); }
}
.focus-timer-display {
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: bold;
  color: var(--c-text);
  margin: 20px 0;
  font-variant-numeric: tabular-nums;
  text-shadow: 2px 2px 0 var(--c-cream-2);
}
.focus-progress-bar {
  width: 100%;
  height: 16px;
  background: var(--c-soil-dark);
  border-radius: 8px;
  overflow: hidden;
  margin: 14px 0;
  border: 2px solid var(--c-soil-dark);
}
.focus-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--c-grass), var(--c-grass-dark));
  transition: width 1s linear;
}
.focus-warning {
  background: var(--c-red);
  color: white;
  padding: 14px;
  border-radius: var(--r-md);
  margin: 14px 0;
  font-weight: bold;
  animation: shake 0.5s ease-in-out infinite;
  display: none;
}
.focus-warning.visible { display: block; }

/* Inline info-tip icon (used next to "Strict mode" toggle) */
.info-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--c-soil);
  color: white;
  font-size: 12px;
  font-weight: 700;
  font-family: serif;
  cursor: help;
  user-select: none;
  transition: background 0.15s, transform 0.15s;
}
.info-tip:hover,
.info-tip:focus { background: var(--c-soil-dark); transform: scale(1.10); outline: none; }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}

.focus-stats-row {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 14px;
  margin: 18px 0;
}
.focus-stat-block {
  text-align: center;
}
.focus-stat-block .num {
  font-size: 28px;
  font-weight: bold;
  color: var(--c-text);
  display: block;
}
.focus-stat-block .label {
  font-size: 12px;
  color: var(--c-text-soft);
}

/* ============= Shop View ============= */
.shop-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.shop-tab {
  padding: 10px 20px;
  background: var(--c-cream);
  border: 2px solid var(--c-soil);
  border-radius: var(--r-md);
  font-weight: bold;
  transition: all 0.12s;
}
.shop-tab:hover { background: var(--c-cream-2); }
.shop-tab.active {
  background: linear-gradient(180deg, var(--c-gold) 0%, var(--c-gold-dark) 100%);
  border-color: var(--c-soil-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}

.shop-item {
  background: var(--c-cream);
  border: 3px solid var(--c-soil);
  border-radius: var(--r-md);
  padding: 14px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: all 0.15s;
  position: relative;
}
.shop-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.shop-item.locked { opacity: 0.55; }
.shop-item-icon {
  font-size: 48px;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,0.15));
}
.shop-item-name { font-weight: bold; font-size: 16px; }
.shop-item-desc { font-size: 12px; color: var(--c-text-soft); min-height: 32px; }
.shop-item-stats {
  font-size: 11px;
  color: var(--c-text-soft);
  background: var(--c-cream-2);
  padding: 4px 8px;
  border-radius: var(--r-sm);
}
.shop-item-price {
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}
.shop-item-price > svg {
  width: 18px;
  height: 18px;
}
.shop-item-price.gem-price > svg {
  width: 22px;
  height: 22px;
}
.locked-tag {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--c-soil-dark);
  color: var(--c-cream);
  padding: 2px 6px;
  border-radius: var(--r-sm);
  font-size: 10px;
  font-weight: bold;
}

/* ============= Inventory ============= */
.inventory-tabs { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }

.inv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}
.inv-item {
  background: var(--c-cream);
  border: 2px solid var(--c-soil);
  border-radius: var(--r-md);
  padding: 12px;
  text-align: center;
  position: relative;
  cursor: pointer;
  transition: all 0.12s;
}
.inv-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.inv-item-icon { font-size: 36px; }
.inv-item-name { font-size: 13px; font-weight: bold; }
.inv-item-count {
  position: absolute;
  top: 4px;
  right: 4px;
  background: var(--c-soil-dark);
  color: var(--c-cream);
  border-radius: 50%;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  box-shadow: var(--shadow-sm);
}
.inv-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--c-cream);
  font-size: 18px;
}

/* ============= Friends ============= */
.friends-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  gap: 12px;
  flex-wrap: wrap;
}

.friend-code-card {
  background: var(--c-cream);
  border: 3px solid var(--c-soil);
  border-radius: var(--r-md);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.friend-code {
  font-family: monospace;
  font-size: 16px;
  font-weight: bold;
  background: var(--c-cream-2);
  padding: 4px 8px;
  border-radius: var(--r-sm);
  letter-spacing: 1px;
}

.friends-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.friend-card {
  background: var(--c-cream);
  border: 3px solid var(--c-soil);
  border-radius: var(--r-md);
  padding: 14px;
  text-align: center;
  transition: all 0.15s;
  position: relative;
}
.friend-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.friend-avatar {
  font-size: 48px;
  margin-bottom: 6px;
}
.friend-name { font-weight: bold; font-size: 16px; }
.friend-level { font-size: 12px; color: var(--c-text-soft); margin-bottom: 8px; }
.friendship-bar {
  width: 100%;
  height: 8px;
  background: var(--c-soil-dark);
  border-radius: 4px;
  overflow: hidden;
  margin: 6px 0;
}
.friendship-fill {
  height: 100%;
  background: linear-gradient(90deg, #ff9aa2, #ff6b6b);
  transition: none;
}
.friend-actions {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  justify-content: center;
}
.friend-status {
  font-size: 11px;
  color: var(--c-text-soft);
  margin-top: 4px;
  font-style: italic;
}

.visit-log {
  background: var(--c-cream-2);
  border: 2px solid var(--c-soil);
  border-radius: var(--r-md);
  padding: 12px;
  max-height: 240px;
  overflow-y: auto;
  margin-top: 12px;
}
.visit-entry {
  padding: 6px 0;
  border-bottom: 1px dashed var(--c-soil);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.visit-entry:last-child { border-bottom: none; }
.visit-time { color: var(--c-text-soft); font-size: 11px; }
.visit-good { color: var(--c-grass-dark); }
.visit-bad { color: var(--c-red); }

/* Visiting friend's farm */
.visiting-banner {
  background: linear-gradient(180deg, var(--c-purple), #6b3ad9);
  color: white;
  padding: 12px 16px;
  border-radius: var(--r-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  box-shadow: var(--shadow-md);
}

/* ============= Quests ============= */
.quest-list { display: flex; flex-direction: column; gap: 12px; }
.quest-item {
  background: var(--c-cream);
  border: 3px solid var(--c-soil);
  border-radius: var(--r-md);
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition: all 0.15s;
}
.quest-item.complete {
  background: linear-gradient(180deg, #d6ffb3, #a8e890);
  border-color: var(--c-grass-dark);
}
.quest-item.claimed { opacity: 0.6; filter: grayscale(0.5); }
.quest-icon { font-size: 36px; }
.quest-info { flex: 1; }
.quest-name { font-weight: bold; font-size: 15px; }
.quest-desc { font-size: 13px; color: var(--c-text-soft); }
.quest-progress-bar {
  width: 100%;
  height: 8px;
  background: var(--c-soil-dark);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 6px;
}
.quest-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--c-grass), var(--c-grass-dark));
  transition: none;
}
.quest-reward {
  text-align: right;
  font-weight: bold;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

/* ============= Focus Pause status banner ============= */
.focus-pause-status {
  background: linear-gradient(180deg, #d6ffb3 0%, #a8e890 100%);
  border: 2px solid var(--c-grass-dark);
  border-radius: var(--r-md);
  padding: 10px 14px;
  margin: 12px 0;
  text-align: center;
  font-weight: bold;
  color: var(--c-text);
  animation: pulseGreen 2s ease-in-out infinite;
}
@keyframes pulseGreen {
  0%, 100% { box-shadow: 0 0 0 0 rgba(95, 168, 58, 0.0); }
  50%      { box-shadow: 0 0 0 6px rgba(95, 168, 58, 0.25); }
}

/* ============= Season / Weather Banner ============= */
.season-banner {
  display: flex;
  gap: 16px;
  padding: 10px 14px;
  border: 2px solid var(--c-soil);
  border-radius: var(--r-md);
  margin-bottom: 14px;
  flex-wrap: wrap;
  background: var(--c-cream);
}
.season-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  flex: 1;
  min-width: 220px;
}
.season-chip > span:first-child > svg { width: 28px !important; height: 28px !important; }

/* ============= Trading rows ============= */
.trade-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  margin: 6px 0;
  background: var(--c-cream-2);
  border: 2px solid var(--c-soil);
  border-radius: var(--r-md);
  flex-wrap: wrap;
}
.trade-side {
  flex: 1;
  min-width: 120px;
}
.trade-label {
  font-size: 11px;
  color: var(--c-text-soft);
  font-weight: bold;
}
.trade-stuff {
  font-size: 14px;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 6px;
}
.trade-stuff svg { width: 24px !important; height: 24px !important; }
.trade-arrow {
  font-size: 22px;
  color: var(--c-soil);
}
.trade-npc {
  text-align: center;
  width: 60px;
}
.trade-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.trade-form-row {
  display: flex;
  gap: 6px;
  align-items: center;
  margin: 8px 0;
  flex-wrap: wrap;
}
.trade-form-row select, .trade-form-row input {
  padding: 6px;
  border: 2px solid var(--c-soil);
  border-radius: var(--r-sm);
  font-family: inherit;
  font-size: 14px;
}

/* ============= PWA Install Prompt ============= */
#install-prompt {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--c-cream);
  border: 3px solid var(--c-soil);
  border-radius: var(--r-md);
  padding: 12px 18px;
  display: flex;
  gap: 12px;
  align-items: center;
  z-index: 90;
  box-shadow: var(--shadow-lg);
  animation: slideInUp 0.4s ease;
}
@keyframes slideInUp {
  from { transform: translate(-50%, 100%); opacity: 0; }
  to { transform: translate(-50%, 0); opacity: 1; }
}

/* ============= Toasts ============= */
#toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 1000;
  pointer-events: none;
}
.toast {
  background: var(--c-cream);
  border: 3px solid var(--c-soil);
  border-radius: var(--r-md);
  padding: 12px 18px;
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 240px;
  animation: slideInRight 0.3s ease, fadeOut 0.4s ease 3s forwards;
  pointer-events: auto;
  font-weight: bold;
}
.toast-icon { font-size: 24px; }
.toast.success { border-color: var(--c-grass-dark); background: linear-gradient(180deg, #d6ffb3, var(--c-cream)); }
.toast.error { border-color: var(--c-red); background: linear-gradient(180deg, #ffd5d3, var(--c-cream)); }
.toast.info { border-color: var(--c-blue); background: linear-gradient(180deg, #d5e7ff, var(--c-cream)); }
.toast.coin { border-color: var(--c-gold-dark); background: linear-gradient(180deg, #fff5cc, var(--c-cream)); }

@keyframes slideInRight {
  from { transform: translateX(120%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes fadeOut {
  to { opacity: 0; transform: translateX(120%); }
}

/* ============= Modal ============= */
#modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Must be higher than #welcome-overlay (z-index: 200) — without this, the
     "load cloud vs keep device" / "no cloud save" prompts opened by
     pullSaveOnSignIn render BEHIND the welcome card. The user can't see or
     click them, confirmAsync never resolves, and the sign-in submit button
     hangs forever (auth itself succeeded, hence the "refresh fixes it"). */
  z-index: 1000;
  animation: fadeIn 0.2s ease;
}
.modal-card {
  background: var(--c-cream);
  border: 4px solid var(--c-soil);
  border-radius: var(--r-xl);
  padding: 24px;
  min-width: 320px;
  max-width: 560px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  animation: popIn 0.25s ease;
}
@keyframes popIn {
  from { transform: scale(0.85); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
#modal-header {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: bold;
  margin-bottom: 12px;
  color: var(--c-text);
  display: flex;
  align-items: center;
  gap: 10px;
}
#modal-body {
  margin-bottom: 16px;
  line-height: 1.6;
}
#modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* ============= Welcome Overlay ============= */
#welcome-overlay {
  position: fixed;
  inset: 0;
  background: linear-gradient(180deg, var(--c-sky), var(--c-grass-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 20px;
}
.welcome-card {
  background: var(--c-cream);
  border: 5px solid var(--c-soil);
  border-radius: var(--r-xl);
  padding: 0 36px 36px;
  max-width: 480px;
  width: 100%;
  text-align: center;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  /* lift the hero into the rounded top edge */
}
.welcome-hero {
  margin: 0 -36px 14px;
  background: #bfe1f7;
  line-height: 0;
  border-bottom: 4px solid #6f4423;
}
.welcome-hero svg {
  width: 100%;
  height: auto;
  display: block;
}
.welcome-card h1 {
  font-family: var(--font-display);
  font-size: 30px;
  margin-bottom: 4px;
  color: var(--c-text);
  letter-spacing: 0.3px;
}
.welcome-tagline {
  color: var(--c-text-soft);
  font-size: 15px;
  margin-bottom: 18px;
}
.welcome-name {
  display: block;
  margin-bottom: 18px;
  font-weight: bold;
}
.welcome-name input {
  display: block;
  width: 100%;
  max-width: 300px;
  margin: 8px auto 0;
  padding: 10px;
  border: 2px solid var(--c-soil);
  border-radius: var(--r-md);
  font-size: 16px;
  text-align: center;
}

/* ============= Welcome (sign-up / sign-in / guest) ============= */
.welcome-mode-tabs {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 8px auto 14px;
  max-width: 360px;
}
.welcome-mode-tab {
  flex: 1;
  padding: 8px 16px;
  background: transparent;
  border: 2px solid var(--c-soil);
  border-radius: var(--r-md);
  font-weight: bold;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  color: var(--c-soil-dark);
  font-size: 14px;
}
.welcome-mode-tab.active {
  background: var(--c-soil);
  color: white;
}
.welcome-mode-tab:hover:not(.active) { background: rgba(110,84,57,0.10); }

#welcome-cloud-form {
  max-width: 360px;
  margin: 0 auto;
}
.welcome-field {
  display: block;
  margin-bottom: 12px;
  text-align: left;
}
.welcome-field-label {
  display: block;
  font-weight: bold;
  font-size: 13px;
  color: var(--c-soil-dark);
  margin-bottom: 4px;
}
.welcome-field-label small {
  font-weight: normal;
  color: var(--c-text-soft);
  font-size: 11px;
}
.welcome-field input {
  display: block;
  width: 100%;
  padding: 10px;
  border: 2px solid var(--c-soil);
  border-radius: var(--r-md);
  font-size: 15px;
  box-sizing: border-box;
}
.welcome-field input:focus {
  outline: none;
  border-color: var(--c-grass-dark);
  background: #fffbe8;
}
#welcome-cloud-submit {
  display: block;
  width: 100%;
  margin-top: 6px;
}
.welcome-status {
  padding: 8px 10px;
  border-radius: var(--r-sm);
  font-size: 13px;
  margin-bottom: 8px;
  text-align: center;
}
.welcome-status.info { background: rgba(110,84,57,0.10); color: var(--c-soil-dark); }
.welcome-status.danger { background: rgba(184,86,80,0.18); color: #802520; }

.welcome-guest-divider {
  display: flex;
  align-items: center;
  margin: 18px auto 10px;
  max-width: 360px;
  color: var(--c-text-soft);
  font-size: 12px;
}
.welcome-guest-divider::before,
.welcome-guest-divider::after {
  content: '';
  flex: 1;
  border-top: 1px dashed rgba(110,84,57,0.35);
}
.welcome-guest-divider span { padding: 0 12px; }

#welcome-guest-toggle {
  display: block;
  margin: 0 auto;
  background: none;
  border: none;
  color: var(--c-soil-dark);
  text-decoration: underline;
  cursor: pointer;
  font-size: 13px;
  padding: 6px 12px;
}
#welcome-guest-toggle:hover { color: var(--c-grass-dark); }

#welcome-guest-form {
  max-width: 360px;
  margin: 12px auto 0;
}

/* ============= Help/Info Boxes ============= */
.info-box {
  background: var(--c-cream-2);
  border-left: 4px solid var(--c-blue);
  padding: 12px;
  border-radius: var(--r-sm);
  margin: 10px 0;
  font-size: 13px;
}
.info-box.warning { border-left-color: var(--c-gold-dark); }
.info-box.danger { border-left-color: var(--c-red); }

/* ============= Misc ============= */
.muted { color: var(--c-text-soft); }
.center { text-align: center; }
.flex-grow { flex: 1; }

.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--c-cream);
  font-size: 16px;
  background: rgba(0,0,0,0.15);
  border-radius: var(--r-md);
  border: 2px dashed var(--c-cream);
}

/* Float coin animation */
.float-up {
  position: absolute;
  font-weight: bold;
  pointer-events: none;
  animation: floatUp 1.2s ease-out forwards;
  font-size: 18px;
  color: var(--c-gold-dark);
  text-shadow: 0 0 4px white;
  z-index: 50;
}
@keyframes floatUp {
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(-60px); opacity: 0; }
}

/* ============= SVG Icons ============= */
/* Wrapper from SVG.render() */
.svg-icon { display: inline-block; line-height: 0; vertical-align: middle; }
.svg-icon > svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 2px 2px rgba(0,0,0,0.18)); }

/* Containers that get a direct SVG child via innerHTML hydration */
.brand-logo,
.stat-icon,
.nav-icon,
.welcome-icon,
.toast-icon,
.quest-icon,
.plot-icon,
.seed-card-icon,
.shop-item-icon,
.inv-item-icon,
.focus-tree-stage,
.farm-stat-card .stat-icon-host {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

/* Sizing for direct SVG children */
.brand-logo > svg,
.brand-logo > .svg-icon { width: 32px; height: 32px; }
.stat-icon > svg,
.stat-icon > .svg-icon { width: 22px; height: 22px; }
.nav-icon > svg,
.nav-icon > .svg-icon { width: 28px; height: 28px; }
.welcome-icon > svg,
.welcome-icon > .svg-icon { width: 56px; height: 56px; }
.toast-icon > svg,
.toast-icon > .svg-icon { width: 26px; height: 26px; }
.quest-icon > svg,
.quest-icon > .svg-icon { width: 40px; height: 40px; }
.plot-icon > svg,
.plot-icon > .svg-icon { width: 64px; height: 64px; }
.seed-card-icon > svg,
.seed-card-icon > .svg-icon { width: 48px; height: 48px; }
.shop-item-icon > svg,
.shop-item-icon > .svg-icon { width: 48px; height: 48px; }
.inv-item-icon > svg,
.inv-item-icon > .svg-icon { width: 48px; height: 48px; }
.focus-tree-stage > svg,
.focus-tree-stage > .svg-icon { width: 180px; height: 180px; filter: drop-shadow(0 8px 16px rgba(0,0,0,0.25)); }

/* Default drop shadow for ALL inline-rendered SVGs */
.brand-logo svg,
.stat-icon svg,
.nav-icon svg,
.welcome-icon svg,
.toast-icon svg,
.quest-icon svg,
.plot-icon svg,
.seed-card-icon svg,
.shop-item-icon svg,
.inv-item-icon svg {
  filter: drop-shadow(0 2px 2px rgba(0,0,0,0.18));
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--c-cream-2); border-radius: 5px; }
::-webkit-scrollbar-thumb { background: var(--c-soil); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--c-soil-dark); }

/* Mobile-ish responsive */
@media (max-width: 720px) {
  #app {
    grid-template-columns: 70px 1fr;
  }
  .nav-label { display: none; }
  .nav-btn { justify-content: center; padding: 12px 8px; }
  .stats { gap: 6px; }
  .stat { min-width: auto; padding: 4px 8px; font-size: 13px; }
  .xp-bar { width: 80px; }
  .brand-name { display: none; }
  .brand { min-width: auto; }
}

/* ==========================================================
   POLISH PASS — appended at end to minimize merge conflicts.
   These rules add micro-interactions, hover states, and subtle
   ambient animations without altering layout or DOM structure.
   ========================================================== */

/* ---------- 1. MODALS: springy entrance + better backdrop blur ----------
   Override the existing popIn animation with a cubic-bezier overshoot
   curve so the modal "lands" with a small bounce. Also stack a frosted-
   glass blur on the backdrop for a more premium feel. */
#modal-backdrop {
  /* Soft frosted backdrop — sits behind any centered modal card. */
  background: rgba(20, 12, 4, 0.55);
  backdrop-filter: blur(6px) saturate(1.1);
  -webkit-backdrop-filter: blur(6px) saturate(1.1);
  animation: modalBackdropIn 0.22s ease-out;
}
@keyframes modalBackdropIn {
  from { opacity: 0; backdrop-filter: blur(0px); -webkit-backdrop-filter: blur(0px); }
  to   { opacity: 1; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
}
.modal-card {
  /* Replace stock popIn easing with a springy cubic-bezier. */
  animation: popInSpring 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes popInSpring {
  0%   { transform: scale(0.78) translateY(14px); opacity: 0; }
  60%  { transform: scale(1.04) translateY(-2px); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}

/* ---------- 2. BUTTONS: elevation hover + tactile press ----------
   We layer a richer shadow on hover and use a tiny scale on :active for
   the satisfying "pressed" feel. Easing curve is springy for hover, snappy
   for press. */
.btn {
  /* Springier transition for the lift on hover. */
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.18s ease,
              filter 0.15s ease;
}
.btn:hover:not(:disabled) {
  /* Slightly higher lift + a soft amber halo for warmth. */
  transform: translateY(-3px);
  box-shadow: 0 6px 14px rgba(45, 25, 10, 0.28),
              0 0 0 2px rgba(244, 196, 48, 0.18);
  filter: brightness(1.04);
}
.btn:active:not(:disabled) {
  /* Snappy press: dip down, shrink a touch, drop the shadow. */
  transform: translateY(1px) scale(0.97);
  box-shadow: 0 1px 2px rgba(45, 25, 10, 0.25);
  filter: brightness(0.96);
  transition-duration: 0.06s;
}
.btn:focus-visible {
  outline: 3px solid rgba(244, 196, 48, 0.7);
  outline-offset: 2px;
}
.btn-primary:hover:not(:disabled) {
  /* Bonus green glow to reinforce the primary action. */
  box-shadow: 0 6px 14px rgba(45, 25, 10, 0.28),
              0 0 0 2px rgba(126, 200, 80, 0.35);
}
.icon-btn {
  /* Match the springy elevation feel of .btn. */
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.18s ease,
              background 0.15s ease;
}
.icon-btn:hover {
  background: var(--c-cream-2);
  box-shadow: 0 4px 10px rgba(45, 25, 10, 0.28),
              0 0 0 2px rgba(244, 196, 48, 0.25);
}
.icon-btn:active { transform: scale(0.9); transition-duration: 0.05s; }
.icon-btn:focus-visible {
  outline: 3px solid rgba(244, 196, 48, 0.7);
  outline-offset: 2px;
}

/* ---------- 3. TOP BAR: inner glow on stat chips + pulsing XP fill ----
   Chips get a soft inset highlight that reads as polished gold. The XP
   fill gets a gentle breathing pulse so it draws the eye without being
   distracting. */
.stat {
  /* Add an inner glow on top of existing shadow, giving a glassy feel. */
  box-shadow: var(--shadow-sm),
              inset 0 1px 0 rgba(255, 255, 255, 0.55),
              inset 0 -2px 4px rgba(244, 196, 48, 0.15);
  background: linear-gradient(180deg, #fffbe8 0%, var(--c-cream) 60%, #f7ecc8 100%);
}
.xp-fill {
  /* Layer a slow opacity pulse on top of the existing width transition. */
  position: relative;
  animation: xpPulse 2.4s ease-in-out infinite;
}
@keyframes xpPulse {
  0%, 100% { filter: brightness(1) saturate(1); }
  50%      { filter: brightness(1.15) saturate(1.15); }
}

/* ---------- 4. SIDE NAV: accent stripe + slide-in highlight ----------
   The active button gets a vertical colored stripe on its left edge using
   ::before. Hover gets a softer pre-highlight tint. */
.nav-btn::before {
  /* Decorative accent stripe — invisible until .active or :hover. */
  content: '';
  position: absolute;
  left: -2px;
  top: 50%;
  transform: translateY(-50%) scaleY(0);
  width: 5px;
  height: 70%;
  background: linear-gradient(180deg, var(--c-gold) 0%, var(--c-gold-dark) 100%);
  border-radius: 0 4px 4px 0;
  box-shadow: 0 0 8px rgba(244, 196, 48, 0.6);
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.nav-btn:hover::before { transform: translateY(-50%) scaleY(0.55); }
.nav-btn.active::before { transform: translateY(-50%) scaleY(1); }
.nav-btn.active {
  /* Reinforce the active state with an amber inset glow. */
  box-shadow: var(--shadow-md),
              inset 0 0 0 1px rgba(255, 255, 255, 0.4),
              inset 0 -3px 6px rgba(200, 156, 10, 0.4);
}

/* ---------- 5. TOASTS: bouncy entrance ----------
   Replace the generic slideInRight ENTRY with a lively bounce, but keep
   the slideInRight name on exit (fadeOut already handles exit). */
.toast {
  animation: toastBounceIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
             fadeOut 0.4s ease 3s forwards;
}
@keyframes toastBounceIn {
  0%   { transform: translateX(120%) scale(0.9); opacity: 0; }
  60%  { transform: translateX(-8px) scale(1.03); opacity: 1; }
  80%  { transform: translateX(4px) scale(0.99); }
  100% { transform: translateX(0) scale(1); opacity: 1; }
}

/* ---------- 6. WELCOME OVERLAY: gradient title + interactive step cards ---- */
.welcome-card h1 {
  /* Gentle sun-warmed gradient on the headline title. */
  background: linear-gradient(180deg, var(--c-soil) 0%, var(--c-wood-dark) 50%, var(--c-grass-dark) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.6));
}
.welcome-step {
  /* Lift + tint on hover so the 3 onboarding cards feel selectable. */
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.2s ease,
              background 0.2s ease,
              border-color 0.2s ease;
  cursor: default;
}
.welcome-step:hover {
  transform: translateY(-4px);
  background: linear-gradient(180deg, #fff8c0 0%, var(--c-cream-2) 100%);
  border-color: var(--c-gold-dark);
  box-shadow: 0 8px 18px rgba(45, 25, 10, 0.18);
}
.welcome-name input {
  /* Friendlier focus ring + soft inner shadow. */
  transition: border-color 0.15s ease, box-shadow 0.18s ease, background 0.15s ease;
  box-shadow: inset 0 2px 4px rgba(45, 25, 10, 0.1);
}
.welcome-name input:hover { background: #fffbe8; }
.welcome-name input:focus {
  outline: none;
  border-color: var(--c-gold-dark);
  background: #fffbe8;
  box-shadow: inset 0 2px 4px rgba(45, 25, 10, 0.08),
              0 0 0 3px rgba(244, 196, 48, 0.35);
}

/* ---------- 7. FARM STATS: soft gradient + breathing room ---------- */
.farm-stat-card {
  /* Subtle warm gradient + a hint of inner highlight gives chips a 3D feel. */
  background: linear-gradient(180deg, #fffbe8 0%, var(--c-cream) 55%, #f7ecc8 100%);
  padding: 10px 16px;
  box-shadow: var(--shadow-sm),
              inset 0 1px 0 rgba(255, 255, 255, 0.6);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.farm-stat-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md),
              inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* ---------- 8. SHOP / INVENTORY: smoother lift, icon glow, shimmer sweep ----
   The shimmer keyframe runs once on render (the cards are re-rendered when
   stock changes, so it triggers naturally). It's overlaid via ::after with
   pointer-events: none so it never blocks clicks. */
.shop-item, .inv-item {
  overflow: hidden;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.22s ease,
              border-color 0.18s ease;
}
.shop-item:hover, .inv-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 22px rgba(45, 25, 10, 0.22);
  border-color: var(--c-gold-dark);
}
/* Shimmer sweep — runs once when card is mounted, then sits idle. */
.shop-item::before, .inv-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(110deg,
    transparent 0%,
    rgba(255, 255, 255, 0.0) 35%,
    rgba(255, 255, 255, 0.45) 50%,
    rgba(255, 255, 255, 0.0) 65%,
    transparent 100%);
  transform: skewX(-20deg);
  pointer-events: none;
  animation: shimmerSweep 1.6s ease-out 1;
  opacity: 0.8;
}
@keyframes shimmerSweep {
  0%   { left: -75%; }
  100% { left: 150%; }
}
/* Glow ring around icons inside cards. */
.shop-item-icon, .inv-item-icon {
  position: relative;
  transition: filter 0.2s ease, transform 0.2s ease;
}
.shop-item:hover .shop-item-icon,
.inv-item:hover .inv-item-icon {
  filter: drop-shadow(0 0 10px rgba(244, 196, 48, 0.7))
          drop-shadow(0 3px 4px rgba(0, 0, 0, 0.15));
  transform: scale(1.06);
}

/* ---------- 9. SECTION TITLES: decorative wavy underline ----------
   Pseudo-element draws a small SVG wave below the heading text using a
   data-URI so we don't need any DOM additions.
   GAPS: padding-bottom puts the wave clearly below the heading, and the
   element-level margin-bottom (raised to 28px) puts the wave clearly
   ABOVE whatever comes next (tabs, cards, grids). Without enough margin
   the wave bleeds visually into the row directly below it. */
.section-title {
  position: relative;
  /* The wave sits in the bottom 8px of the title's padding (height: 8px,
     bottom: 0). Padding-bottom is just barely > wave height so the wave
     clings to the title text instead of looking like a row separator. */
  padding-bottom: 10px;
  margin-bottom: 20px;
}
.section-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 110px;
  height: 8px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 8' preserveAspectRatio='none'><path d='M0 4 Q 13.75 0 27.5 4 T 55 4 T 82.5 4 T 110 4' fill='none' stroke='%23f4c430' stroke-width='2.5' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  filter: drop-shadow(0 1px 0 var(--c-soil-dark));
  opacity: 0.85;
}

/* ---------- 10. FOCUS TREE: soft radiating ring behind plant ----------
   ::before draws a pulsing radial halo behind the existing tree emoji/svg.
   Sits underneath via z-index, doesn't intercept pointer events. */
.focus-tree-stage { position: relative; z-index: 0; }
.focus-tree-stage::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 220px;
  height: 220px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
    rgba(126, 200, 80, 0.35) 0%,
    rgba(244, 196, 48, 0.18) 35%,
    transparent 70%);
  border-radius: 50%;
  z-index: -1;
  animation: focusHaloPulse 3.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes focusHaloPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.55; }
  50%      { transform: translate(-50%, -50%) scale(1.1); opacity: 0.9; }
}

/* ---------- 12. SCROLLBAR: thicker + softer color blend ----------
   Slightly wider with rounded inner border that blends into surrounding
   cream surfaces. */
::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track {
  background: linear-gradient(90deg, var(--c-cream) 0%, var(--c-cream-2) 100%);
  border-radius: 7px;
  border: 1px solid rgba(139, 90, 43, 0.15);
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--c-soil-light) 0%, var(--c-soil) 100%);
  border-radius: 7px;
  border: 3px solid var(--c-cream-2);
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--c-soil) 0%, var(--c-soil-dark) 100%);
  background-clip: padding-box;
  border: 3px solid var(--c-cream-2);
}
::-webkit-scrollbar-corner { background: var(--c-cream-2); }
* { scrollbar-color: var(--c-soil) var(--c-cream-2); scrollbar-width: auto; }

/* ---------- 11. ACCESSIBILITY: respect prefers-reduced-motion ----------
   Disables ambient animations (sway, bounce, pulse, shimmer, halo) for
   users who request reduced motion. Functional transitions for hover/
   press are minimised but kept short. The plot-progress-fill rule is
   intentionally untouched (it must stay transition: none anyway). */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.05s !important;
    scroll-behavior: auto !important;
  }
  .focus-tree-stage,
  .plot.ready,
  .pen.ready,
  .focus-warning,
  .xp-fill,
  .focus-tree-stage::before,
  .pen.ready .plot-progress-fill,
  .plot.ready .plot-progress-fill {
    animation: none !important;
  }
  .shop-item::before,
  .inv-item::before {
    display: none;
  }
}

/* ==========================================================
   MOBILE RESPONSIVE + VIEWPORT HARDENING
   Tablet + phone breakpoints, touch-friendly tap targets,
   safe-area inset support for notched phones, and global
   touch hardening (disable text-selection / tap highlights
   on game surfaces). Appended at end to minimize merge
   conflicts with other workers.
   ========================================================== */

/* ---------- Tablet (≤ 1024px) ----------
   Slim down side-nav, scale stat icons a touch, and let
   #main-content flex so views don't overflow on portrait
   tablets. Keeps both nav icon + label visible. */
@media (max-width: 1024px) {
  #app {
    grid-template-columns: 180px 1fr;
  }
  #side-nav {
    padding: 8px 6px;
  }
  .nav-btn {
    padding: 10px 10px;
    font-size: 14px;
  }
  .stat {
    padding: 4px 10px;
    font-size: 13px;
  }
  .stat-icon { font-size: 14px; }
  .stat-icon > svg,
  .stat-icon > .svg-icon { width: 18px; height: 18px; }
  .xp-bar { width: 100px; }
  #main-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow-x: hidden;
  }
}

/* ---------- Phone (≤ 480px) ----------
   Stack header rows, enforce ≥44×44px tap targets per Apple
   HIG / Material guidelines, and shrink farm plots/pens to
   ~64×64px so a typical 3×3 grid fits comfortably. Inherits
   .nav-label / .brand-name hiding from the 720px breakpoint. */
@media (max-width: 480px) {
  #app {
    grid-template-columns: 56px 1fr;
    grid-template-rows: auto 1fr;
  }
  #top-bar {
    flex-wrap: wrap;
    padding: 6px 10px;
    gap: 6px;
  }
  .stats {
    order: 3;
    flex-basis: 100%;
    justify-content: space-between;
    gap: 4px;
  }
  .top-actions { gap: 4px; }
  .stat { padding: 3px 6px; font-size: 12px; }
  .xp-bar { width: 60px; }
  .nav-btn {
    padding: 12px 6px;
    min-width: 44px;
    min-height: 44px;
  }
  .btn {
    min-height: 44px;
    min-width: 44px;
    padding: 10px 16px;
  }
  .icon-btn {
    min-width: 44px;
    min-height: 44px;
  }
  .plot,
  .pen {
    width: 64px;
    height: 64px;
  }
  .pen .plot-icon > svg,
  .pen .plot-icon > .svg-icon { width: 48px !important; height: 48px !important; }
  .modal-card {
    max-width: calc(100vw - 24px);
    padding: 16px;
  }
  .welcome-card {
    padding: 18px;
    max-width: calc(100vw - 24px);
  }
  .welcome-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* ---------- Landscape phone (orientation + max-height 480px) ----------
   Reclaim vertical space: collapse the welcome overlay's tagline +
   step grid, and tighten modal padding so confirms still fit on a
   landscape iPhone. */
@media (orientation: landscape) and (max-height: 480px) {
  #top-bar {
    height: 48px;
  }
  #app {
    grid-template-rows: 48px 1fr;
  }
  .welcome-card {
    padding: 14px 18px;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
  }
  .welcome-card h1 { font-size: 20px; margin-bottom: 4px; }
  .welcome-tagline { font-size: 13px; margin-bottom: 8px; }
  .welcome-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 8px;
  }
  .welcome-step { padding: 8px; }
  .welcome-icon { font-size: 26px; margin-bottom: 2px; }
  .welcome-step h3 { font-size: 14px; margin-bottom: 2px; }
  .welcome-step p { font-size: 11px; }
  .modal-card {
    padding: 12px 18px;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
  }
}

/* ---------- Touch hardening ----------
   Kill text-selection, long-press callouts, and the grey iOS
   tap-highlight on surfaces the user will tap/drag during
   gameplay. Form inputs are explicitly opted back in so the
   farmer-name field and any text inputs remain usable. */
body,
.btn,
.nav-btn,
.icon-btn,
.plot,
.pen {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
input,
textarea,
.welcome-name input {
  user-select: text;
  -webkit-user-select: text;
}

/* ---------- Safe-area insets (notched phones) ----------
   Use env(safe-area-inset-*) with max() fallbacks so layout
   still has padding on non-notched devices. Requires the
   viewport meta tag's viewport-fit=cover (set in index.html). */
#top-bar {
  padding-top: max(8px, env(safe-area-inset-top));
}
#side-nav {
  padding-bottom: max(8px, env(safe-area-inset-bottom));
}
#modal-backdrop {
  padding: max(20px, env(safe-area-inset-top))
           max(20px, env(safe-area-inset-right))
           max(20px, env(safe-area-inset-bottom))
           max(20px, env(safe-area-inset-left));
}

/* ============= Mobile UI hard fixes (≤ 600px) =============
   Targeted overrides for breaks the user actually sees on a phone:
   - the farm grid overflows because 6 × 88px = 528px doesn't fit a 375px
     viewport
   - the top bar wraps awkwardly with stats + 5 icon buttons in one row
   - the welcome guest button text spills its line
   These rules only apply at ≤ 600px so desktop layout is unchanged. */
@media (max-width: 600px) {
  /* ---- Top bar: tighten gaps, wrap stats below the icons ---- */
  #top-bar {
    flex-wrap: wrap;
    padding: 6px 8px;
    gap: 4px;
    align-items: center;
  }
  .brand { flex: 0 0 auto; }
  .brand-name { display: none; }
  .top-actions {
    margin-left: auto;
    gap: 4px;
    flex-wrap: nowrap;
  }
  .stats {
    order: 99;
    flex-basis: 100%;
    justify-content: space-between;
    gap: 4px;
    padding-top: 4px;
    border-top: 1px solid rgba(0,0,0,0.06);
  }
  .stat { padding: 2px 6px; font-size: 12px; }
  .stat-icon { font-size: 13px; }
  .stat-icon > svg, .stat-icon > .svg-icon { width: 16px; height: 16px; }
  .xp-bar { width: 56px; }
  .icon-btn {
    width: 36px; height: 36px;
    padding: 0;
    font-size: 16px;
    min-width: 36px; min-height: 36px;
  }

  /* ---- Side nav: thin column of icons only ---- */
  #app { grid-template-columns: 56px 1fr; }
  #side-nav { padding: 4px 4px; gap: 4px; }
  .nav-btn {
    padding: 8px 4px;
    font-size: 16px;
    min-width: 48px; min-height: 48px;
  }
  .nav-label { display: none; }

  /* ---- Farm grid: 6 columns flex-sized to fit any width ---- */
  /* The wrap is inside the side-nav-reduced main column, so we can't pre-
     compute plot size. Use repeat(6, 1fr) and width:auto so the grid fills
     whatever space it has — and also set min-width:0 on every container in
     the chain so the grid actually CAN shrink (the default grid behavior is
     "as wide as needed", which causes the overflow). */
  #app, #main-content, #view-farm, .farm-grid-wrap { min-width: 0; }
  .farm-grid-wrap {
    padding: 10px 8px;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }
  .farm-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 4px;
    width: 100%;
    max-width: 100%;
  }
  .plot {
    width: auto;          /* override fixed 88px */
    height: auto;
    aspect-ratio: 1 / 1;  /* keep them square */
    min-width: 0;
    min-height: 0;
    border-radius: 10px 12px 11px 10px / 11px 10px 12px 11px;
    font-size: 11px;
  }
  .plot > span { font-size: 10px; }
  .plot-icon { width: 100%; height: 100%; }
  .plot-icon > svg, .plot-icon > .svg-icon { width: 70% !important; height: 70% !important; }

  /* ---- Farm stats / toolbar wrap cleanly ---- */
  .farm-stats {
    grid-template-columns: 1fr 1fr;
    display: grid;
    gap: 6px;
  }
  .farm-stat-card { padding: 6px 10px; font-size: 12px; }
  .farm-toolbar { gap: 6px; }
  .farm-toolbar .btn { padding: 8px 12px; font-size: 13px; }

  /* ---- Ranch: pasture first (large), toolbar BELOW it ---- */
  .ranch-wrap {
    padding: 14px 10px;
    display: flex;
    flex-direction: column;
  }
  .ranch-pasture {
    order: 1;
    min-height: 280px !important;
  }
  .ranch-toolbar {
    order: 2;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 12px 4px 4px;
    justify-content: center;
  }
  .ranch-toolbar .btn {
    flex: 1 1 auto;
    min-width: 140px;
  }
  .ranch-capacity {
    text-align: center;
    flex: 1 1 100%;
  }

  /* ---- Welcome card: prevent the guest button from overflowing ---- */
  .welcome-card { padding: 0 18px 24px; max-width: calc(100vw - 24px); }
  .welcome-card h1 { font-size: 24px; }
  .welcome-tagline { font-size: 13px; }
  .welcome-mode-tab { padding: 8px 8px; font-size: 13px; }
  #welcome-guest-toggle {
    white-space: normal;
    line-height: 1.3;
    font-size: 12px;
    padding: 8px 0;
    word-break: keep-all;
  }
  .welcome-field-label { font-size: 12px; }
  .welcome-field-label small { display: block; margin-top: 1px; }
  .welcome-field input { font-size: 14px; padding: 9px; }

  /* ---- Friends grid: 1 col on phone ---- */
  .friends-grid { grid-template-columns: 1fr; }
}

/* ========== Manage Animals modal ========== */
.manage-animal-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--c-cream-2);
  border: 2px solid var(--c-soil);
  border-radius: var(--r-md);
}
.manage-animal-icon {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.manage-animal-icon > svg { width: 100%; height: 100%; }
.manage-animal-info { flex: 1; min-width: 0; }
.manage-animal-name { font-weight: 700; font-size: 14px; }
.manage-animal-status { font-size: 12px; margin-top: 2px; }
.manage-animal-status.tag-ready { color: var(--c-gold-dark); font-weight: 700; }
.manage-animal-status.tag-hungry { color: #b85650; font-weight: 700; }
.manage-animal-status.tag-growing { color: var(--c-text-soft); }
.manage-animal-actions {
  display: flex; gap: 6px;
  flex-shrink: 0;
}
.manage-animal-actions .btn { padding: 6px 12px; font-size: 12px; margin: 0; }
@media (max-width: 600px) {
  .manage-animal-row { flex-wrap: wrap; padding: 8px 10px; }
  .manage-animal-actions { flex-basis: 100%; justify-content: flex-end; }
}

/* ========== Decoration Yard (Unit: decorations OUT of plots) ========== */
.yard-wrap { margin: 24px 0; }
.yard-zone {
  background: linear-gradient(to bottom, #c5e1a5 0%, #aed581 100%);
  border-radius: 16px;
  padding: 16px;
  position: relative;
}
.yard-title {
  font-weight: 600;
  font-size: 14px;
  color: #4a5d2a;
  margin-bottom: 8px;
}
.yard-stage {
  position: relative;
  width: 100%;
  height: 200px;
  background:
    repeating-linear-gradient(45deg, transparent 0 18px, rgba(255,255,255,0.06) 18px 19px),
    linear-gradient(to bottom, #b8d493 0%, #93b56b 100%);
  border-radius: 12px;
  overflow: hidden;
  cursor: default;
}
.yard-deco-sprite {
  position: absolute;
  width: 56px;
  height: 56px;
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: transform 0.15s ease;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  line-height: 1;
}
.yard-deco-sprite:hover { transform: translate(-50%, -55%); }
.yard-deco-sprite > svg { width: 100%; height: 100%; }
.yard-place-banner {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(168, 115, 68, 0.95);
  color: white;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  z-index: 5;
}
.yard-place-banner .btn { margin-left: 8px; }
.yard-zone.placing .yard-stage {
  cursor: crosshair;
  box-shadow: inset 0 0 0 3px #f9a825;
}
.yard-empty-hint {
  text-align: center;
  font-size: 12px;
  color: #4a5d2a;
  margin-top: 8px;
  opacity: 0.75;
}

/* ========== Ranch: one big free-roam pasture ========== */
.ranch-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  padding: 4px 6px 12px;
  flex-wrap: wrap;
  position: relative;
  z-index: 2;
}
.ranch-toolbar .btn { margin: 0; }
.ranch-capacity {
  font-size: 16px;
  font-weight: 700;
  color: #fff8c0;
  text-shadow: 0 1px 2px rgba(0,0,0,0.55);
  background: rgba(94, 58, 23, 0.55);
  padding: 6px 14px;
  border-radius: 12px;
}
.ranch-toolbar .muted {
  color: #fff8c0;
  text-shadow: 0 1px 2px rgba(0,0,0,0.45);
  font-size: 13px;
  opacity: 0.92;
}
.ranch-pasture {
  position: relative;
  width: 100%;
  /* Height set inline by Farm.renderRanch — grows with the animal count. */
  height: 200px;
  border-radius: 14px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 30% at 30% 20%, rgba(255,255,255,0.10) 0%, transparent 70%),
    repeating-linear-gradient(94deg,
      rgba(60, 90, 40, 0.10) 0 14px,
      transparent 14px 22px),
    linear-gradient(180deg, #b8d493 0%, #93b56b 100%);
  box-shadow: inset 0 0 24px rgba(0,0,0,0.18);
  z-index: 1;
  /* Smoothly grow/shrink as animals are added/sold. */
  transition: height 0.6s ease-out;
}
.ranch-animal {
  position: absolute;
  width: 56px;
  height: 56px;
  transform: translate(-50%, -50%);
  cursor: pointer;
  /* Smooth wander; transition lasts most of the 4-7s tickWander dwell so
     the chicken is gently moving most of the time, not snapping. */
  transition: left 3s ease-in-out, top 3s ease-in-out;
  filter: drop-shadow(0 4px 4px rgba(0,0,0,0.30));
  animation: ranch-bob 0.7s ease-in-out infinite alternate;
}
.ranch-animal > svg,
.ranch-animal > .svg-icon { width: 100%; height: 100%; }
.ranch-animal:hover { filter: drop-shadow(0 0 6px rgba(255,255,160,0.8)); }
@keyframes ranch-bob {
  0%   { transform: translate(-50%, -50%) translateY(0); }
  100% { transform: translate(-50%, -50%) translateY(-3px); }
}
.ranch-animal-tag {
  position: absolute;
  left: 50%;
  top: -16px;
  transform: translateX(-50%);
  background: var(--c-gold-dark);
  color: white;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  text-shadow: 0 1px 1px rgba(0,0,0,0.4);
  pointer-events: none;
}
.ranch-animal-tag.tag-hungry { background: #b85650; }
.ranch-animal.ready { animation: ranch-ready 1.4s ease-in-out infinite; }
@keyframes ranch-ready {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.08); }
}

/* ========== Animal wandering sprites (Unit 4 — legacy per-pen layout) ========== */
.pen-animal-sprite {
  position: absolute;
  width: 48px;
  height: 48px;
  transform: translate(-50%, -50%);
  /* ease-in-out gives a more lifelike step than linear; 1.6s matches the
     1.5-3s wander dwell so the animal arrives shortly before its next move. */
  transition: left 1.6s ease-in-out, top 1.6s ease-in-out;
  pointer-events: none;
  animation: animal-bob 0.8s ease-in-out infinite alternate;
  z-index: 5;
}
.pen-animal-sprite > svg,
.pen-animal-sprite > .svg-icon { width: 100%; height: 100%; }
@keyframes animal-bob {
  0%   { transform: translate(-50%, -50%) translateY(0); }
  100% { transform: translate(-50%, -50%) translateY(-3px); }
}
.pen { position: relative; overflow: hidden; }

/* ==========================================================
   ECONOMY V2 — Combined Friends panel + mobile polish
   Appended at end so the existing rules win when ordering matters.
   ========================================================== */

/* ---------- Friends page header (cloud account + add-friend) ---------- */
.friends-me-card {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}
.friends-me-info {
  flex: 1 1 auto;
  min-width: 0;
}
.friends-me-info > strong { font-weight: 700; }

.friends-search-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.friends-search-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 12px;
  border: 2px solid var(--c-soil);
  border-radius: var(--r-sm);
  font-family: monospace;
  letter-spacing: 0.5px;
  font-size: 14px;
}

/* Cloud-friend badge on friend cards */
.friend-card.cloud-friend {
  border-color: #6f9bd9;
  box-shadow: 0 4px 12px rgba(79,140,217,0.18);
}
.friend-card.cloud-friend::before {
  content: '☁️';
  position: absolute;
  top: 6px; right: 8px;
  font-size: 16px;
  opacity: 0.85;
}
.friend-card { position: relative; }

/* ---------- Mobile polish (≤ 600px) ---------- */
@media (max-width: 600px) {
  /* Remove rounded corners on the very edges so views feel edge-to-edge */
  .card { border-radius: var(--r-md); padding: 12px; }

  /* Active/hover nav button: the side-nav column is only ~56px on phones,
     so any horizontal transform (translateX, scale > 1) pushes the active
     tile past the column's right border into the main content. Defeat
     this two ways:
       1. Reset transforms on tap/active (mobile browsers fire :hover on
          touch, which used to translateX(4px) and stick mid-tap).
       2. Clip the side-nav horizontally so any rogue overflow is hidden.
     Active state uses background gradient + accent stripe + inset shadow,
     all of which already exist — no dimensional change needed. */
  #side-nav { overflow-x: hidden; }
  .nav-btn,
  .nav-btn:hover,
  .nav-btn.active,
  .nav-btn:active,
  .nav-btn:focus {
    transform: none !important;
  }

  /* Section title on phones: smaller text, but keep the wave hugging
     the text. Padding-bottom just slightly > wave height (8px) so the
     wave reads as the title's underline. Margin-bottom puts a clean
     gap before the next row. */
  .section-title {
    font-size: 18px;
    padding: 0 4px 10px;
    margin-bottom: 24px;
  }
  /* XP bar: the verbose "4,559 / 5,337 XP" was getting cropped at 56px.
     ui.js now writes a compact "4.6k/5.3k" form that fits in ~70px at 10px
     font, so we bump the bar a hair wider and shrink the text to fit. */
  .xp-bar { width: 78px; }
  .xp-text {
    font-size: 10px;
    letter-spacing: -0.2px;
    padding: 0 2px;
    white-space: nowrap;
  }

  /* Bottom buffer: stop content (esp. ranch pasture, focus seed picker,
     friend grid) from butting against the very bottom of the viewport.
     #main-content is the scroll container — bumping its bottom padding
     gives the last card real runway to scroll past. */
  #main-content {
    padding: 14px 12px 96px;
    -webkit-overflow-scrolling: touch;
  }

  /* Shop tabs: horizontal scroll if they overflow.
     The container needs `overflow-x: auto` for scrolling, but on most
     browsers this also clips vertically — combined with the active tab's
     translateY(-2px) lift, that was slicing the top off the active tab's
     rounded brown border. Fixes:
       1. Add padding-top so the container has room for the lifted tab.
       2. Kill the lift on mobile entirely (the gold gradient already
          distinguishes the active tab — no dimensional change needed). */
  .shop-tabs, .inventory-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-top: 4px;
    padding-bottom: 6px;
  }
  .shop-tabs::-webkit-scrollbar,
  .inventory-tabs::-webkit-scrollbar { display: none; }
  .shop-tab {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 8px 14px;
    font-size: 13px;
  }
  .shop-tab.active {
    transform: none;
  }

  /* Shop / inventory grids: 2 columns on phone for readability */
  .shop-grid, .inv-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .shop-item, .inv-item {
    padding: 10px;
    font-size: 12px;
  }
  .shop-item-icon, .inv-item-icon { width: 48px; height: 48px; }
  .shop-item-name, .inv-item-name { font-size: 13px; }
  .shop-item-desc, .shop-item-stats { font-size: 11px; }
  .shop-item-price { font-size: 14px; }
  .shop-item .btn, .inv-item .btn { padding: 8px 10px; font-size: 12px; min-height: 40px; }

  /* Friends grid 2-up on phone (was 1-up) so cards read tighter */
  .friends-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .friend-card {
    padding: 10px;
  }
  .friend-avatar { font-size: 28px; }
  .friend-name { font-size: 13px; }
  .friend-level, .friend-status { font-size: 11px; }
  .friend-actions .btn { padding: 6px 10px; font-size: 11px; min-width: 0; }
  /* Scrunch the cloud-friend ☁️ badge so it doesn't overlap the name */
  .friend-card.cloud-friend::before { font-size: 12px; top: 4px; right: 6px; }

  /* Friends header: account row stacks under the title */
  .friends-me-card { padding: 10px; }
  .friends-search-input { font-size: 13px; padding: 8px 10px; }

  /* Quest items wrap nicely */
  .quest-item {
    flex-wrap: wrap;
    padding: 10px;
    gap: 10px;
  }
  .quest-info { flex-basis: calc(100% - 60px); }
  .quest-reward {
    flex-basis: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  /* Modals: actions stack on phone, give the header real breathing room
     so the title doesn't visually overlap the first row of tabs/content. */
  .modal-card {
    width: calc(100vw - 16px);
    max-width: 480px;
    padding: 18px 14px 14px;
  }
  #modal-header {
    margin-bottom: 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(94, 58, 23, 0.15);
  }
  /* Tabs INSIDE a modal (Sign In / Sign Up): tame the active-tab pop-up
     transform so it doesn't visually crash into the title on mobile. */
  #modal-body .shop-tabs {
    margin-top: 4px;
    margin-bottom: 14px;
  }
  #modal-body .shop-tab {
    padding: 10px 14px;
    font-size: 13px;
  }
  #modal-body .shop-tab.active {
    transform: none;
  }
  #modal-footer {
    flex-wrap: wrap;
    gap: 6px;
  }
  #modal-footer .btn {
    flex: 1 1 auto;
    min-width: 100px;
  }

  /* Focus view: seed picker laid out as a 3-column grid (was horizontal
     scroll, which didn't work reliably on touch). 3 columns fits 6 cards
     in 2 rows on a typical phone — visually similar to a tab grid. */
  .seed-picker {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    overflow: visible;
    max-height: none;
    padding: 8px;
  }
  .seed-card {
    padding: 10px 6px;
    min-width: 0;
    width: auto;
    flex: 0 0 auto;
  }
  .seed-card-name { font-size: 12px; }
  .seed-card-info { font-size: 10px; }

  /* Duration picker as a 3-column grid of square-ish tappable tiles
     (was horizontal scroll which the user reported as broken). */
  .duration-picker {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    overflow: visible;
    flex-wrap: nowrap; /* irrelevant in grid mode but harmless */
    margin: 12px 0;
  }
  .duration-btn {
    padding: 14px 8px;
    font-size: 14px;
    min-height: 56px;
    flex: 0 0 auto;
    width: auto;
    text-align: center;
  }

  /* Topbar: hide login-tooltip text on tap, smaller icons */
  #login-btn { width: 36px; height: 36px; font-size: 16px; min-width: 36px; min-height: 36px; }
  #music-btn, #sound-btn, #help-btn, #settings-btn {
    width: 36px; height: 36px; font-size: 14px; min-width: 36px; min-height: 36px;
  }

  /* Visit log entries on phone */
  .visit-entry { font-size: 12px; gap: 4px; padding: 6px 8px; }
  .visit-time { font-size: 10px; }
}

/* ---------- Phone-portrait extras (≤ 420px) ---------- */
@media (max-width: 420px) {
  /* Let the shop fit with smaller items so 2 columns isn't crowded */
  .shop-item, .inv-item { padding: 8px; }
  .shop-item-name, .inv-item-name { font-size: 12px; }
  .shop-item-price { font-size: 13px; }

  /* 1-column friends grid on truly tiny screens */
  .friends-grid { grid-template-columns: 1fr; }

  /* Compact farm stats row */
  .farm-stat-card { font-size: 11px; padding: 4px 8px; }
}

/* ---------- iOS safe-area: respect notches ---------- */
@supports (padding: env(safe-area-inset-top)) {
  #top-bar { padding-top: max(env(safe-area-inset-top), 0px); }
  #side-nav { padding-bottom: env(safe-area-inset-bottom); }
}