/* ============================================================
   PLANT GAME V2 — Layout-Driven Engine
   Loads layout from builder API, renders dynamically
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  width: 100%; height: 100dvh;
  overflow: hidden;
  background: #0a0806;
  font-family: 'Fredoka', 'Segoe UI', system-ui, sans-serif;
  color: #f0e8d0;
}

/* ============================================================
   GAME CONTAINER — 16:9, centered, scales to fill
   ============================================================ */
.game-container {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 100vw;
  height: 56.25vw; /* 16:9 */
  max-height: 100dvh;
  max-width: 177.78dvh; /* 16:9 */
  overflow: hidden;
  font-size: 1.2vw;
}
@media (min-aspect-ratio: 16/9) {
  .game-container { font-size: 2.13dvh; }
}

/* Portrait / mobile scene (9:16) */
.game-container.portrait-mode {
  width: 100vw;
  height: 177.78vw;   /* 9:16 */
  max-height: 100dvh;
  max-width: 56.25dvh; /* 9:16 */
  font-size: 2.4vw;
}
@media (min-aspect-ratio: 9/16) {
  .game-container.portrait-mode { font-size: 1.35dvh; }
}

/* ============================================================
   BACKGROUND
   ============================================================ */
.game-bg {
  position: absolute; inset: 0; z-index: 0;
  background: center/cover no-repeat;
}
.game-bg-overlay {
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
}

/* ============================================================
   PARTICLES
   ============================================================ */
.particles {
  position: absolute; inset: 0;
  z-index: 1; pointer-events: none; overflow: hidden;
}
.particle { position: absolute; opacity: 0; animation: particle-float linear infinite; }
.particle-dust { width: 0.2em; height: 0.2em; border-radius: 50%; background: rgba(255,240,180,0.35); }
.particle-leaf { font-size: 1em; }
.particle-sparkle { font-size: 0.7em; }
@keyframes particle-float {
  0%   { opacity: 0; transform: translate(0, 0) rotate(0deg); }
  10%  { opacity: 0.6; }
  90%  { opacity: 0.4; }
  100% { opacity: 0; transform: translate(var(--drift-x, -40px), var(--drift-y, 100%)) rotate(var(--rot, 360deg)); }
}

/* ============================================================
   LAYOUT ELEMENTS — rendered from builder JSON
   ============================================================ */
.layout-el {
  position: absolute;
  pointer-events: none;
}
.layout-el[data-action] {
  pointer-events: auto;
}
/* Entrance animations for all layout elements */
.el-enter {
  opacity: 0 !important;
  transform: scale(0.6) !important;
}
.el-enter-active {
  opacity: 1 !important;
  transform: scale(1) !important;
  transition: opacity 0.4s ease, transform 0.55s cubic-bezier(0.34,1.56,0.64,1) !important;
}
/* Pot entrance — bounce up */
.pot-enter {
  opacity: 0 !important;
  transform: translateY(30px) scale(0.7) !important;
}
.pot-enter-active {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.22,1.5,0.36,1) !important;
}
.plant-slot-empty {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 2em;
  color: rgba(255,255,255,0.15);
  border: 2px dashed rgba(255,255,255,0.1);
  border-radius: 8px;
  transition: all 0.2s;
}
.plant-slot-empty::after {
  content: '+';
}
.layout-el:hover .plant-slot-empty {
  color: rgba(126,198,98,0.4);
  border-color: rgba(126,198,98,0.3);
}
.plant-sprite {
  image-rendering: auto;
  transform-origin: bottom center;
  animation: plant-sway 3s ease-in-out infinite;
  clip-path: inset(100% 0 0 0); /* start hidden, JS reveals */
}
@keyframes plant-sway {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(1.5deg); }
  75% { transform: rotate(-1.5deg); }
}

/* ============================================================
   POT SLOTS
   ============================================================ */
/* =========================================================
   POT SLOT SYSTEM VARIABLES
   ========================================================= */
:root {
  --pot-bg: rgba(10, 8, 5, 0.8);
  --pot-bg-strong: rgba(14, 11, 8, 0.92);
  --pot-bg-soft: rgba(18, 14, 10, 0.68);
  --pot-blur: 10px;
  --pot-text-main: #e6a832;
  --pot-text-soft: rgba(255, 244, 220, 0.9);
  --pot-text-dim: rgba(255, 233, 188, 0.64);
  --pot-text-white: #f6f3ee;
  --pot-green: #4caf50;
  --pot-green-soft: #81c784;
  --pot-blue: #4fc3f7;
  --pot-pink: #e88cb0;
  --pot-purple: #b388ff;
  --pot-rose: #ff8a80;
  --pot-yellow: #ffd54f;
  --pot-teal: #4db6ac;
  --pot-red: #e57373;
  --pot-gray-900: #111;
  --pot-gray-800: #1a1a1a;
  --pot-gray-700: #222;
  --pot-gray-600: #333;
  --pot-gray-500: #555;
  --pot-gray-400: #6a6a6a;
  --pot-shadow-soft: 0 4px 14px rgba(0, 0, 0, 0.32);
  --pot-shadow-med: 0 8px 20px rgba(0, 0, 0, 0.42);
  --pot-shadow-strong: 0 10px 30px rgba(0, 0, 0, 0.55);
  --pot-radius-xs: 4px;
  --pot-radius-sm: 6px;
  --pot-radius-md: 10px;
  --pot-radius-lg: 16px;
  --pot-radius-pill: 999px;
  --pot-transition-fast: 0.2s ease;
  --pot-transition-med: 0.28s ease;
  --pot-transition-slow: 0.32s ease;
}

/* =========================================================
   POT SLOT WRAP
   ========================================================= */
.pot-slot-wrap {
  position: relative;
  width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  border-radius: var(--pot-radius-lg);
  overflow: visible;
  isolation: isolate;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform var(--pot-transition-med), filter var(--pot-transition-med);
}
.pot-slot-wrap.state-growing {
  filter: drop-shadow(0 4px 10px rgba(79, 195, 247, 0.08));
}

/* =========================================================
   POT VISUAL AREA
   ========================================================= */
.pot-slot-visual {
  position: relative;
  width: 100%; height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: visible;
  pointer-events: none;
  z-index: 1;
}
.pot-slot-visual::before {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 10px;
  height: 14px;
  border-radius: var(--pot-radius-pill);
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.36) 0%, rgba(0,0,0,0.12) 60%, rgba(0,0,0,0) 100%);
  filter: blur(2px);
  z-index: 0;
}

/* =========================================================
   PLUS BUTTON
   ========================================================= */
.pot-slot-plus {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid rgba(230, 168, 50, 0.65);
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 221, 150, 0.18), rgba(255, 221, 150, 0) 55%),
    rgba(10, 8, 5, 0.88);
  color: var(--pot-text-main);
  font-size: 14px; font-weight: 700; line-height: 1;
  box-shadow:
    0 0 0 1px rgba(255, 214, 135, 0.06) inset,
    0 6px 16px rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: auto;
  cursor: pointer;
  z-index: 2;
  transition: transform var(--pot-transition-fast), box-shadow var(--pot-transition-fast), border-color var(--pot-transition-fast);
}
.pot-slot-plus:hover {
  transform: translate(-50%, -50%) scale(1.08);
  border-color: rgba(230, 168, 50, 0.95);
  box-shadow:
    0 0 0 1px rgba(255, 214, 135, 0.14) inset,
    0 0 14px rgba(230, 168, 50, 0.28),
    0 8px 18px rgba(0, 0, 0, 0.46);
}
.pot-slot-plus:active {
  transform: translate(-50%, -50%) scale(0.94);
}

/* =========================================================
   POT + PLANT SPRITES
   ========================================================= */
.pot-slot-sprite {
  width: 70%; aspect-ratio: 1;
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  background-size: contain;
  background-position: center bottom;
  background-repeat: no-repeat;
  image-rendering: auto;
  z-index: 1;
  pointer-events: auto;
  cursor: grab;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,0.35));
}
.pot-plant-stage {
  position: absolute;
  background-size: contain;
  background-position: center bottom;
  background-repeat: no-repeat;
  transform-origin: 50% 100%;
  z-index: 2;
  pointer-events: auto;
  transition: transform var(--pot-transition-med), filter var(--pot-transition-med), opacity var(--pot-transition-med);
}

/* ---- Rarity aura (rare → transcendent) ----
 * Uses drop-shadow on the PNG silhouette so the glow traces the plant's shape.
 * Why stacked small blurs instead of one big blur: a single drop-shadow with
 * large blur radius (~20-30px) collapses thin details (stem, leaf tips) and
 * the shadow degenerates into a rounded/square blob centered on the densest
 * part of the plant. Stacking 2-3 shadows with modest blur keeps the silhouette
 * readable while still pulsing intensity via color density.
 */
@keyframes plant-aura-pulse {
  0%, 100% {
    filter:
      drop-shadow(0 0 calc(var(--aura-min) * 0.5) var(--aura-color))
      drop-shadow(0 0 var(--aura-min) var(--aura-color));
  }
  50% {
    filter:
      drop-shadow(0 0 calc(var(--aura-max) * 0.5) var(--aura-color))
      drop-shadow(0 0 var(--aura-max) var(--aura-color));
  }
}
@keyframes plant-aura-pulse-dual {
  0%, 100% {
    filter:
      drop-shadow(0 0 calc(var(--aura-min) * 0.4) var(--aura-color))
      drop-shadow(0 0 var(--aura-min) var(--aura-color))
      drop-shadow(0 0 var(--aura-min) var(--aura-color));
  }
  50% {
    filter:
      drop-shadow(0 0 calc(var(--aura-max) * 0.4) var(--aura-color))
      drop-shadow(0 0 var(--aura-max) var(--aura-color))
      drop-shadow(0 0 var(--aura-max) var(--aura-color));
  }
}
@keyframes plant-aura-transcendent {
  0%   { filter: drop-shadow(0 0 3px hsl(  0, 95%, 65%)) drop-shadow(0 0 7px hsl(  0, 95%, 55%)) drop-shadow(0 0 10px hsl(  0, 95%, 55%)); }
  16%  { filter: drop-shadow(0 0 3px hsl( 50, 95%, 65%)) drop-shadow(0 0 7px hsl( 50, 95%, 55%)) drop-shadow(0 0 10px hsl( 50, 95%, 55%)); }
  33%  { filter: drop-shadow(0 0 3px hsl(120, 80%, 60%)) drop-shadow(0 0 7px hsl(120, 80%, 50%)) drop-shadow(0 0 10px hsl(120, 80%, 50%)); }
  50%  { filter: drop-shadow(0 0 3px hsl(190, 95%, 65%)) drop-shadow(0 0 7px hsl(190, 95%, 55%)) drop-shadow(0 0 10px hsl(190, 95%, 55%)); }
  66%  { filter: drop-shadow(0 0 3px hsl(260, 95%, 70%)) drop-shadow(0 0 7px hsl(260, 95%, 60%)) drop-shadow(0 0 10px hsl(260, 95%, 60%)); }
  83%  { filter: drop-shadow(0 0 3px hsl(310, 95%, 68%)) drop-shadow(0 0 7px hsl(310, 95%, 58%)) drop-shadow(0 0 10px hsl(310, 95%, 58%)); }
  100% { filter: drop-shadow(0 0 3px hsl(360, 95%, 65%)) drop-shadow(0 0 7px hsl(360, 95%, 55%)) drop-shadow(0 0 10px hsl(360, 95%, 55%)); }
}

.pot-plant-stage.plant-aura-rare {
  --aura-color: #5aa6ff;
  --aura-min: 2px; --aura-max: 5px;
  animation: plant-aura-pulse 3s ease-in-out infinite;
}
.pot-plant-stage.plant-aura-legendary {
  --aura-color: #ffc552;
  --aura-min: 3px; --aura-max: 7px;
  animation: plant-aura-pulse 2.5s ease-in-out infinite;
}
.pot-plant-stage.plant-aura-epic {
  --aura-color: #d07aff;
  --aura-min: 3px; --aura-max: 8px;
  animation: plant-aura-pulse-dual 2s ease-in-out infinite;
}
.pot-plant-stage.plant-aura-mythic {
  --aura-color: #ff6a4d;
  --aura-min: 4px; --aura-max: 10px;
  animation: plant-aura-pulse-dual 1.5s ease-in-out infinite;
}
.pot-plant-stage.plant-aura-transcendent {
  animation: plant-aura-transcendent 5s linear infinite;
}

/* Disable aura on hover-scaled plants? No — glow tracks transform fine. */
/* Respect reduced-motion preference: hold the aura steady instead of pulsing */
@media (prefers-reduced-motion: reduce) {
  .pot-plant-stage[class*="plant-aura-"] {
    animation: none;
    filter: drop-shadow(0 0 var(--aura-max, 8px) var(--aura-color, #5aa6ff));
  }
}
/* Soft shadow at the base of the plant where the stem meets the soil */
.pot-plant-base-shadow {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.32) 35%,
    rgba(0, 0, 0, 0.12) 65%,
    rgba(0, 0, 0, 0) 100%);
  filter: blur(0.6px);
  pointer-events: none;
  z-index: 1;
  transition: width var(--pot-transition-med), height var(--pot-transition-med),
              left var(--pot-transition-med), bottom var(--pot-transition-med);
}
/* Soil layer inside pot — all positioning done inline from config */
.pot-soil-layer {
  position: absolute;
  background-size: 100% auto;
  background-position: center 40%;
  background-repeat: no-repeat;
  z-index: 1;
  pointer-events: none;
}

.pot-slot-wrap.state-no-pot .pot-slot-sprite { display: none; }
.pot-slot-wrap.state-no-pot .pot-plant-stage,
.pot-slot-wrap.state-has-pot .pot-plant-stage,
.pot-slot-wrap.state-has-soil .pot-plant-stage { opacity: 0; }
.pot-slot-wrap.state-growing .pot-plant-stage { opacity: 1; }
.pot-slot-wrap.state-growing:hover .pot-plant-stage {
  transform: scale(1.02);
  transform-origin: 50% 100%;
}
/* Dead/withered plants: same subtle hover bump as alive plants, preserving the tilt */
.pot-slot-wrap.state-growing.is-withered:hover .pot-plant-stage,
.pot-slot-wrap.state-growing:hover .pot-plant-stage.pot-plant-dead {
  transform: rotate(6deg) scale(0.97);
}

/* =========================================================
   LABEL
   ========================================================= */
.pot-slot-label {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--pot-text-main);
  font-size: 11px; line-height: 1.1;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.42);
  text-align: center;
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 6px;
}

/* =========================================================
   STATE: NO-POT
   ========================================================= */
.pot-slot-wrap.state-no-pot .pot-slot-visual {
  border: none;
  border-radius: 0;
  background: none;
}
.pot-slot-wrap.state-no-pot .pot-slot-visual::after {
  content: "";
  position: absolute;
  bottom: 8%;
  left: 50%;
  transform: translateX(-50%);
  width: 55%;
  height: 42%;
  background: rgba(0, 0, 0, 0.14);
  border-radius: 6px 6px 22% 22% / 6px 6px 35% 35%;
  pointer-events: none;
}
/* Dashed pot-shape outline via SVG mask */
.pot-slot-wrap.state-no-pot .pot-slot-visual::before {
  content: "";
  position: absolute;
  bottom: 6%;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 46%;
  background: none;
  border: none;
  border-radius: 0;
  filter: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 80'%3E%3Cpath d='M10,5 Q10,0 15,0 L85,0 Q90,0 90,5 L82,65 Q80,78 65,78 L35,78 Q20,78 18,65 Z' fill='none' stroke='%23e6a832' stroke-width='1.5' stroke-dasharray='5,4' opacity='0.4'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom;
  z-index: 2;
  pointer-events: none;
}
.pot-slot-wrap.state-no-pot .pot-slot-label {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: #555;
}
/* Soil picker popup */
.soil-picker {
  position: absolute; bottom: 105%; left: 50%; transform: translateX(-50%);
  background:
    linear-gradient(180deg, rgba(30,22,14,0.97) 0%, rgba(14,10,6,0.98) 100%);
  border: 1px solid rgba(255,222,173,0.12);
  border-radius: 14px;
  padding: 10px;
  display: flex; gap: 8px;
  z-index: 100;
  pointer-events: auto;
  box-shadow: 0 8px 30px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,210,120,0.04) inset;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: pot-pop 0.2s ease-out;
}
.soil-picker-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 8px 6px; border-radius: 10px;
  border: 1.5px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.03);
  color: #f0e8d0; cursor: pointer;
  font-family: inherit; font-size: 11px;
  transition: all var(--pot-transition-fast);
  min-width: 72px;
}
.soil-picker-btn:hover {
  background: rgba(230,168,50,0.15);
  border-color: rgba(230,168,50,0.5);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.soil-picker-btn:active {
  transform: translateY(0) scale(0.97);
}
.soil-bag-img {
  width: 48px; height: 48px;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}
.soil-picker-btn .soil-name {
  font-weight: 700;
  color: var(--pot-text-soft);
  font-size: 11px;
}
.soil-picker-btn .soil-cost {
  font-size: 10px; color: var(--pot-text-main); font-weight: 800;
}
.soil-picker-btn .soil-bonus {
  font-size: 9px; color: var(--pot-green-soft); font-weight: 700;
}
@keyframes pot-pop {
  0% { transform: translateX(-50%) scale(0.85); opacity: 0; }
  100% { transform: translateX(-50%) scale(1); opacity: 1; }
}
/* Seed picker — centered modal overlay */
.seed-picker-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.65);
  z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  animation: seed-fade-in 0.2s ease-out;
}
@keyframes seed-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.seed-picker {
  background: linear-gradient(170deg, rgba(30,22,14,0.98), rgba(18,12,8,0.98));
  border: 2px solid rgba(100,180,80,0.4);
  border-radius: 18px;
  padding: 20px 22px;
  display: flex; flex-direction: column; gap: 10px;
  width: min(560px, 94vw);
  max-height: 80vh;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.05);
  animation: pot-pop 0.25s ease-out;
}
.seed-picker .seed-list,
.seed-picker .pollen-list {
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  touch-action: pan-y;
  flex: 1;
  display: flex; flex-direction: column; gap: 10px;
  min-height: 0;
}
.seed-picker .seed-list::-webkit-scrollbar,
.seed-picker .pollen-list::-webkit-scrollbar { width: 4px; }
.seed-picker .seed-list::-webkit-scrollbar-thumb,
.seed-picker .pollen-list::-webkit-scrollbar-thumb { background: rgba(100,180,80,0.3); border-radius: 4px; }
.seed-picker::-webkit-scrollbar { width: 4px; }
.seed-picker::-webkit-scrollbar-thumb { background: rgba(100,180,80,0.3); border-radius: 4px; }

.seed-picker-header {
  display: flex; align-items: center; justify-content: center;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(230,168,50,0.15);
  position: relative;
}
.seed-picker-title {
  color: #e6a832;
  font-weight: 700;
  font-size: max(20px, 1.4vw);
  letter-spacing: 0.3px;
}
.seed-picker-close {
  position: absolute; right: 0; top: -4px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: #f0e8d0;
  width: 36px; height: 36px;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
  font-family: inherit;
}
.seed-picker-close:hover {
  background: rgba(255,80,80,0.3);
  border-color: rgba(255,80,80,0.5);
}
.seed-picker-btn {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.03);
  color: #f0e8d0; cursor: pointer;
  font-family: inherit;
  transition: all 0.15s;
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
  flex-shrink: 0;
}
.seed-picker-btn:hover {
  background: rgba(100,180,80,0.15);
  border-color: rgba(100,180,80,0.5);
  transform: translateX(3px);
}
.seed-picker-btn:active {
  transform: scale(0.97);
}
.seed-picker-btn .seed-icon {
  font-size: max(40px, 2.6vw);
  line-height: 1;
  width: max(50px, 3.2vw);
  text-align: center;
  flex-shrink: 0;
}
.seed-picker-btn .seed-icon-img {
  width: max(54px, 3.4vw);
  height: max(54px, 3.4vw);
  object-fit: contain;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.18), rgba(0,0,0,0.35));
  border: 2px solid rgba(255,255,255,0.18);
  box-shadow: 0 2px 8px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.15);
  padding: 4px;
}
.seed-picker-btn .seed-info {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.seed-picker-btn .seed-name {
  font-size: max(17px, 1.1vw);
  font-weight: 700;
  line-height: 1.25;
  color: #f0e8d0;
  white-space: normal;
  word-break: break-word;
}
.seed-picker-btn .seed-meta {
  display: flex; align-items: center; gap: 8px;
}
.seed-picker-btn .seed-rarity {
  font-size: max(12px, 0.75vw);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.seed-picker-btn .seed-dna-bar {
  display: flex; height: 7px; border-radius: 4px;
  overflow: hidden; gap: 1px;
  margin-top: 2px;
}
.seed-picker-btn .seed-dna-bar span {
  display: block; border-radius: 2px;
}
.seed-picker-btn .seed-right {
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  flex-shrink: 0;
}
.seed-picker-btn .seed-qty {
  background: rgba(230,168,50,0.85);
  color: #1a1a2e;
  font-size: max(15px, 0.95vw);
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 10px;
  line-height: 1.3;
}
.seed-picker-btn .seed-cost {
  font-size: max(13px, 0.8vw); color: #e6a832; font-weight: 700;
}

/* Seed picker — search bar */
.seed-search-wrap {
  padding: 0 0 8px;
}

/* Seed picker — empty pots counter */
.seed-picker-pots {
  position: absolute; left: 12px; top: 50%;
  transform: translateY(-50%);
  font-size: max(12px, 0.75vw);
  color: rgba(230,168,50,0.7);
  font-weight: 600;
  letter-spacing: 0.2px;
}

/* Seed picker — group separators */
.seed-group-label {
  font-size: max(11px, 0.7vw);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(230,168,50,0.55);
  padding: 4px 4px 4px;
  border-bottom: 1px solid rgba(230,168,50,0.12);
  flex-shrink: 0;
}

/* Seed picker — collapsible rarity headers inside Hybrids */
.seed-picker .seed-rarity-header {
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.seed-picker .seed-rarity-header .seed-rarity-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: max(18px, 1.1vw);
  transition: transform 0.15s;
  opacity: 0.85;
}
.seed-picker .seed-rarity-header.is-open .seed-rarity-arrow { transform: rotate(90deg); }
.seed-picker .seed-rarity-header:hover { transform: none; filter: brightness(1.2); }

/* Notifications: clickable rows get pointer + subtle hover + chevron */
.notif-row.notif-clickable {
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.notif-row.notif-clickable:hover { background: rgba(230,168,50,0.12); }
.notif-row.notif-clickable:active { transform: scale(0.99); }
.notif-arrow {
  font-size: 1.4em;
  line-height: 1;
  color: rgba(240,232,208,0.4);
  align-self: center;
  flex-shrink: 0;
  padding: 0 4px;
  transition: color 0.15s, transform 0.15s;
}
.notif-row.notif-clickable:hover .notif-arrow {
  color: rgba(230,168,50,0.85);
  transform: translateX(3px);
}

/* Seed picker — already growing badge */
.seed-badge-growing {
  background: rgba(100,180,80,0.25);
  color: #7cd44e;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 6px;
  letter-spacing: 0.3px;
  white-space: nowrap;
  border: 1px solid rgba(100,180,80,0.3);
}

/* Seed picker — preselected highlight */
.seed-picker-btn.seed-preselect {
  border-color: rgba(100,180,80,0.7) !important;
  box-shadow: 0 0 12px rgba(100,180,80,0.3);
}

/* "Plant another?" toast */
.plant-another-toast {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, rgba(30,22,14,0.97), rgba(18,12,8,0.97));
  border: 1px solid rgba(100,180,80,0.5);
  border-radius: 14px;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 9500;
  color: #f0e8d0;
  font-family: inherit;
  font-size: max(14px, 0.9vw);
  font-weight: 600;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
  animation: seed-fade-in 0.2s ease-out;
  white-space: nowrap;
}
.plant-another-btn {
  background: linear-gradient(135deg, #50b450, #3a8a3a);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 8px 18px;
  font-family: inherit;
  font-size: max(14px, 0.9vw);
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s;
}
.plant-another-btn:hover {
  background: linear-gradient(135deg, #60c860, #50b450);
  transform: scale(1.05);
}

/* ============================================================
   SOIL BAG POUR ANIMATION
   ============================================================ */
.soil-anim-overlay {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  overflow: visible;
}

/* Bag */
.soil-bag {
  position: absolute;
  border-radius: 6px;
  transform: translateY(-40px);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s;
  z-index: 2;
}
.soil-bag-body {
  width: 100%; height: 100%;
  border-radius: 6px;
  border: 2px solid rgba(255,255,255,0.2);
  box-shadow: 0 3px 10px rgba(0,0,0,0.4);
  position: relative;
}
.soil-bag-body::after {
  content: '';
  position: absolute; top: -6px; left: 25%; width: 50%; height: 8px;
  background: rgba(139,90,43,0.8);
  border-radius: 3px 3px 0 0;
  border: 1px solid rgba(255,255,255,0.15);
}
.soil-bag-label {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.2em;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}

.soil-bag-enter {
  transform: translateY(0);
  opacity: 1;
}
.soil-bag-tilt {
  transform: translateY(0) rotate(-35deg);
  transform-origin: top right;
  transition: transform 0.3s ease-in;
}
.soil-bag-exit {
  transform: translateY(-60px) rotate(-35deg) scale(0.5);
  opacity: 0;
  transition: transform 0.4s ease-in, opacity 0.3s ease-in;
}

/* Soil particles */
.soil-particle {
  position: absolute;
  border-radius: 50% 45% 55% 50%;
  opacity: 1;
  z-index: 1;
  transition: none;
  box-shadow: inset 0 -1px 1px rgba(0,0,0,0.25), 0 1px 1px rgba(0,0,0,0.2);
}
.soil-particle-clump {
  border-radius: 55% 45% 50% 60%;
  box-shadow: inset 0 -2px 2px rgba(0,0,0,0.35), 0 1px 2px rgba(0,0,0,0.3);
}
.soil-particle-fall {
  transform: translate(var(--drift), var(--fall)) rotate(var(--rot, 0deg));
  opacity: 0;
  transition: transform 0.65s cubic-bezier(0.55, 0, 1, 0.45), opacity 0.65s ease-in;
}

/* Soil fill rising */
.soil-fill-rise {
  position: absolute;
  bottom: 20%; left: 15%; right: 15%;
  height: 0;
  border-radius: 50% 50% 4px 4px;
  opacity: 0.7;
  z-index: 0;
  transition: height 0.6s ease-out, opacity 0.6s;
}
.soil-fill-rise.soil-fill-active {
  height: 25%;
  opacity: 0;
}

/* Dust puff */
.soil-dust {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, rgba(190, 150, 90, 0.75), rgba(140, 100, 50, 0.45) 60%, rgba(120, 85, 40, 0) 100%);
  filter: blur(1.5px);
  z-index: 3;
}
.soil-dust-puff {
  transform: translate(var(--dx), var(--dy)) scale(2.2);
  opacity: 0;
  transition: transform 0.6s ease-out, opacity 0.55s ease-out;
}

.layout-el img {
  width: 100%; height: 100%;
  object-fit: contain; pointer-events: none;
  display: block;
}
.layout-el[data-anchor-top] img { object-position: top; }
/* Tap-animated images: shrink to content so bounce only affects the icon */
.layout-el.tap-icon img {
  width: auto; height: auto;
  max-width: 100%; max-height: 100%;
  margin: auto;
}
/* Clickable elements */
.layout-el[data-action] {
  cursor: pointer;
  transition: filter 0.15s;
}
.layout-el[data-action]:hover {
  filter: brightness(1.15);
}

/* CSS element classes (from builder) */
.css-shelf-board {
  width: 100%; height: 100%;
  background: linear-gradient(180deg, #a08060, #8b6b45, #7a5c38);
  border-radius: 4px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,220,180,0.2);
}
.css-rope {
  width: 100%; height: 100%;
  background: linear-gradient(90deg, #7a6548, #a08968, #7a6548);
  border-radius: 2px;
  box-shadow: 1px 0 2px rgba(0,0,0,0.3);
}
.css-pot-rim {
  width: 100%; height: 100%;
  background: linear-gradient(180deg, #d4804a, #b86830);
  border-radius: 4px 4px 0 0;
}
.css-pot-body {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #c4703a, #a85a2a, #8e4e24);
  border-radius: 2px 2px 10px 10px;
  box-shadow: inset -4px 0 6px rgba(0,0,0,0.15), inset 4px 0 6px rgba(255,200,150,0.1), 0 4px 8px rgba(0,0,0,0.3);
}
.css-panel-left-bg {
  width: 100%; height: 100%;
  background: rgba(240,228,200,0.88);
  border-radius: 0 0 10px 0;
}
.css-panel-right-bg {
  width: 100%; height: 100%;
  background: rgba(180,100,90,0.75);
  border-radius: 10px 0 0 10px;
  border: 2px solid rgba(150,80,70,0.5);
  border-right: none;
  backdrop-filter: blur(4px);
}
.css-tab {
  width: 100%; height: 100%;
  padding: 6px 12px;
  border: 1px solid #c8b090;
  border-top: none;
  border-radius: 0 0 8px 8px;
  background: #f0e4cc;
  color: #4a3018;
  font-weight: 600; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
}
.css-soil {
  width: 100%; height: 100%;
  background: linear-gradient(180deg, #3a2810, #2a1c0c);
  border-radius: 2px;
}
.css-text {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: #f0e8d0; font-weight: 700;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
}
.css-forage-timer {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; white-space: nowrap; overflow: hidden;
  border: none; border-radius: 6px;
  color: #fff; background: rgba(76,175,80,0.15);
  text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
}

/* Sera action buttons (positioned via builder) */
.css-sera-btn {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700; white-space: nowrap;
  color: #f0e8d0;
  background: rgba(20, 14, 8, 0.8);
  border: 2px solid rgba(160, 120, 60, 0.4);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  text-shadow:
    -1px -1px 0 rgba(60,30,5,0.6),
     1px  1px 0 rgba(60,30,5,0.6),
     0 2px 4px rgba(0,0,0,0.4);
}
.css-sera-btn:hover {
  background: rgba(230, 168, 50, 0.2);
  border-color: rgba(230, 168, 50, 0.5);
  transform: scale(1.03);
}
.css-sera-btn:active {
  transform: scale(0.97);
}


/* HUD value labels (coins, diamonds, energy, water) */
.css-hud-value {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700; white-space: nowrap; overflow: hidden;
  color: #fff;
  text-shadow:
    -1px -1px 0 rgba(60,30,5,0.8),
     1px -1px 0 rgba(60,30,5,0.8),
    -1px  1px 0 rgba(60,30,5,0.8),
     1px  1px 0 rgba(60,30,5,0.8),
     0 2px 4px rgba(0,0,0,0.4);
}

/* ============================================================
   SCENE OVERLAY (modals / sub-scenes)
   ============================================================ */
.scene-overlay {
  position: absolute; inset: 0; z-index: 200;
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: scene-fade-in 0.3s ease-out;
}
@keyframes scene-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.scene-overlay .scene-content {
  position: absolute; inset: 0;
}

/* ============================================================
   RESOURCE SPEND — flying badge from action source toward HUD chip
   ============================================================ */
.resource-spend-badge {
  position: absolute;
  z-index: 600;
  pointer-events: none;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #ff6b6b;
  text-shadow: 0 0 6px rgba(255,80,80,0.55), 0 2px 4px rgba(0,0,0,0.6);
  padding: 4px 10px;
  border-radius: 14px;
  background: rgba(40,10,10,0.78);
  border: 1px solid rgba(255,107,107,0.55);
  box-shadow: 0 0 12px rgba(255,80,80,0.35), 0 4px 12px rgba(0,0,0,0.5);
  transform: translate(-50%, -50%) scale(0.6);
  white-space: nowrap;
  animation: resource-spend-fly 0.85s cubic-bezier(0.55, 0.05, 0.4, 1) forwards;
}
@keyframes resource-spend-fly {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  15%  { opacity: 1; transform: translate(-50%, -50%) scale(1.15); }
  30%  { transform: translate(-50%, -50%) scale(1); }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.35);
  }
}
.resource-spend-pulse {
  animation: resource-spend-pulse-anim 0.55s ease-out;
}
@keyframes resource-spend-pulse-anim {
  0%   { transform: scale(1); filter: brightness(1); }
  30%  { transform: scale(1.18); filter: brightness(1.6) drop-shadow(0 0 8px rgba(255,80,80,0.7)); }
  60%  { transform: scale(0.94); }
  100% { transform: scale(1); filter: brightness(1); }
}

/* ============================================================
   ACTION TOAST (visual feedback for preview)
   ============================================================ */
.action-toast {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  background: radial-gradient(ellipse at center, rgba(40,30,15,0.95), rgba(30,22,10,0.92));
  border: 1px solid rgba(230,168,50,0.4);
  box-shadow: 0 0 20px rgba(230,168,50,0.25), 0 8px 32px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.08);
  color: #f0c850;
  padding: 12px 24px;
  border-radius: 12px;
  font-size: 13px; font-weight: 600;
  font-family: 'Fredoka', sans-serif;
  letter-spacing: 0.3px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
  z-index: 9999; pointer-events: none;
  animation: toast-center 1.6s ease-out forwards;
}
@keyframes toast-center {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
  12%  { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
  22%  { transform: translate(-50%, -50%) scale(0.97); }
  30%  { transform: translate(-50%, -50%) scale(1); }
  75%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.95) translateY(-10px); }
}
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  .action-toast {
    font-size: 16px;
    padding: 14px 30px;
    border-radius: 14px;
    letter-spacing: 0.4px;
  }
}
.toast-plant-img {
  height: 1.8em;
  width: 1.8em;
  vertical-align: middle;
  margin-right: 0.3em;
  object-fit: contain;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.18), rgba(0,0,0,0.35));
  border: 1px solid rgba(255,255,255,0.18);
  padding: 2px;
}

/* Urgent toast — for "out of resource" alerts, bigger & attention-grabbing */
.action-toast.urgent {
  background: radial-gradient(ellipse at center, rgba(60,20,20,0.96), rgba(30,10,10,0.94));
  border: 2px solid #ff7a3a;
  color: #ffe4a0;
  font-size: 22px;
  font-weight: 700;
  padding: 20px 38px;
  letter-spacing: 0.5px;
  box-shadow:
    0 0 32px rgba(255,122,58,0.55),
    0 0 0 4px rgba(255,122,58,0.15),
    0 10px 36px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(255,255,255,0.1);
  text-shadow: 0 2px 6px rgba(0,0,0,0.6), 0 0 12px rgba(255,180,100,0.4);
  animation: toast-urgent 2.2s ease-out forwards;
}
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  .action-toast.urgent {
    font-size: 28px;
    padding: 26px 52px;
  }
}
@keyframes toast-urgent {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.6) rotate(-2deg); }
  10%  { opacity: 1; transform: translate(-50%, -50%) scale(1.15) rotate(1deg); }
  18%  { transform: translate(-50%, -50%) scale(0.95) rotate(-1deg); }
  26%  { transform: translate(-50%, -50%) scale(1.05) rotate(0deg); }
  34%  { transform: translate(-50%, -50%) scale(1); }
  50%  { transform: translate(-50%, -50%) scale(1.03); }
  66%  { transform: translate(-50%, -50%) scale(1); }
  85%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.95) translateY(-14px); }
}

/* ============================================================
   ANIMATIONS (from builder)
   ============================================================ */
.anim-sway { animation: anim-sway 3s ease-in-out infinite; }
@keyframes anim-sway {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(2deg); }
  75% { transform: rotate(-2deg); }
}
.anim-bounce { animation: anim-bounce 1s ease-in-out infinite; }
@keyframes anim-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
/* Forage result inside game-modal */
.forage-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.2em 1em;
  gap: 0.5em;
}
.forage-result-icon {
  font-size: 3.5em;
  line-height: 1;
}
.forage-result-icon img { width: 1em; height: 1em; object-fit: contain; }
img.inline-icon {
  width: 1em; height: 1em;
  object-fit: contain;
  vertical-align: middle;
  display: inline-block;
}
.forage-result-icon.forage-loading {
  animation: forage-search 1.2s ease-in-out infinite;
}
.forage-result-icon.forage-reveal {
  animation: forage-pop 0.5s ease-out;
}
@keyframes forage-search {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.7; }
  25% { transform: scale(1.1) rotate(-8deg); }
  50% { transform: scale(1) rotate(0deg); opacity: 1; }
  75% { transform: scale(1.1) rotate(8deg); }
}
@keyframes forage-pop {
  0%   { transform: scale(0); opacity: 0; }
  50%  { transform: scale(1.3); opacity: 1; }
  70%  { transform: scale(0.9); }
  100% { transform: scale(1); }
}
.forage-result-label {
  font-size: 1.1em;
  font-weight: 700;
  color: #f0e4cc;
  text-shadow: 0 1px 3px rgba(0,0,0,0.4);
  white-space: nowrap;
}
.forage-result-label.forage-error {
  color: #e74c3c;
}
.forage-result-sub {
  font-size: 0.75em;
  color: rgba(240,232,208,0.5);
}
.forage-ok-btn {
  margin-top: 0.8em;
  padding: 0.5em 2.2em;
  border: none;
  border-radius: 10px;
  background: linear-gradient(135deg, #7ec662, #4caf50);
  color: #fff;
  font-family: 'Fredoka', sans-serif;
  font-size: 1em;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(0,0,0,0.3);
  transition: transform 0.15s, box-shadow 0.15s;
}
.forage-ok-btn:active {
  transform: scale(0.93);
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.anim-pulse { animation: anim-pulse 2s ease-in-out infinite; }
@keyframes anim-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.08); opacity: 0.85; }
}
.anim-glow { animation: anim-glow 2s ease-in-out infinite; }
@keyframes anim-glow {
  0%, 100% { filter: brightness(1) drop-shadow(0 0 2px rgba(126,198,98,0.3)); }
  50% { filter: brightness(1.2) drop-shadow(0 0 8px rgba(126,198,98,0.6)); }
}
.shop-tile-bounce {
  animation: shop-bounce 0.35s ease;
}
@keyframes shop-bounce {
  0%   { transform: scale(1); }
  30%  { transform: scale(0.9); }
  60%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}
.anim-float { animation: anim-float 4s ease-in-out infinite; }
@keyframes anim-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
.anim-spin { animation: anim-spin 3s linear infinite; }
@keyframes anim-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.anim-shake { animation: anim-shake 0.4s ease-in-out infinite; }
@keyframes anim-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  75% { transform: translateX(3px); }
}
.anim-fade-in-out { animation: anim-fade-in-out 3s ease-in-out infinite; }
@keyframes anim-fade-in-out {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}
.anim-swing { animation: anim-swing 2s ease-in-out infinite; transform-origin: top center; }
@keyframes anim-swing {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(5deg); }
  75% { transform: rotate(-5deg); }
}
.anim-sparkle { animation: anim-sparkle 1.5s ease-in-out infinite; }
@keyframes anim-sparkle {
  0%, 100% { filter: brightness(1); transform: scale(1); }
  50% { filter: brightness(1.5); transform: scale(1.15); }
}
.anim-slide-in-left { animation: anim-slide-in-left 0.6s ease-out both; }
@keyframes anim-slide-in-left {
  0% { transform: translateX(-100%); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}
.anim-slide-in-right { animation: anim-slide-in-right 0.6s ease-out both; }
@keyframes anim-slide-in-right {
  0% { transform: translateX(100%); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}
.anim-drop-in { animation: anim-drop-in 0.5s ease-out both; }
@keyframes anim-drop-in {
  0% { transform: translateY(-40px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}
.anim-pop { animation: anim-pop 0.5s ease-out both; }
@keyframes anim-pop {
  0% { transform: scale(0.3); opacity: 0; }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); opacity: 1; }
}
.anim-tap-bounce { animation: anim-tap-bounce 0.4s ease-out; }
@keyframes anim-tap-bounce {
  0% { transform: scale(1); }
  30% { transform: scale(0.85); }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); }
}
.anim-tap-jelly { animation: anim-tap-jelly 0.6s ease-out; }
@keyframes anim-tap-jelly {
  0% { transform: scale(1, 1); }
  20% { transform: scale(0.9, 1.1); }
  40% { transform: scale(1.1, 0.9); }
  60% { transform: scale(0.95, 1.05); }
  80% { transform: scale(1.02, 0.98); }
  100% { transform: scale(1, 1); }
}
.anim-tap-wiggle { animation: anim-tap-wiggle 0.5s ease-out; }
@keyframes anim-tap-wiggle {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(-8deg); }
  40% { transform: rotate(6deg); }
  60% { transform: rotate(-4deg); }
  80% { transform: rotate(2deg); }
}
.anim-tap-flip { animation: anim-tap-flip 0.6s ease-out; }
@keyframes anim-tap-flip {
  0% { transform: perspective(400px) rotateY(0); }
  50% { transform: perspective(400px) rotateY(180deg); }
  100% { transform: perspective(400px) rotateY(360deg); }
}
.anim-tap-heartbeat { animation: anim-tap-heartbeat 0.6s ease-out; }
@keyframes anim-tap-heartbeat {
  0%, 100% { transform: scale(1); }
  15% { transform: scale(1.25); }
  30% { transform: scale(1); }
  45% { transform: scale(1.15); }
  60% { transform: scale(1); }
}
.anim-tap-flash { animation: anim-tap-flash 0.4s ease-out; }
@keyframes anim-tap-flash {
  0%, 50%, 100% { opacity: 1; }
  25%, 75% { opacity: 0.2; }
}
.anim-tap-rubber { animation: anim-tap-rubber 0.7s ease-out; }
@keyframes anim-tap-rubber {
  0% { transform: scale(1); }
  30% { transform: scaleX(1.25) scaleY(0.75); }
  40% { transform: scaleX(0.75) scaleY(1.25); }
  50% { transform: scaleX(1.15) scaleY(0.85); }
  65% { transform: scaleX(0.95) scaleY(1.05); }
  75% { transform: scaleX(1.05) scaleY(0.95); }
  100% { transform: scale(1); }
}
.anim-tap-tada { animation: anim-tap-tada 0.8s ease-out; }
@keyframes anim-tap-tada {
  0%, 100% { transform: scale(1) rotate(0deg); }
  10%, 20% { transform: scale(0.9) rotate(-3deg); }
  30%, 50%, 70%, 90% { transform: scale(1.1) rotate(3deg); }
  40%, 60%, 80% { transform: scale(1.1) rotate(-3deg); }
}
.anim-tap-punch { animation: anim-tap-punch 0.3s ease-out; }
@keyframes anim-tap-punch {
  0% { transform: scale(1); }
  50% { transform: scale(1.4); }
  100% { transform: scale(1); }
}
.anim-tap-ripple { animation: anim-tap-ripple 0.5s ease-out; }
@keyframes anim-tap-ripple {
  0% { box-shadow: 0 0 0 0 rgba(230,168,50,0.6); }
  100% { box-shadow: 0 0 0 20px rgba(230,168,50,0); }
}

/* ============================================================
   PLANT DRAG & DROP
   ============================================================ */
.plant-drag-ghost {
  position: fixed;
  z-index: 10000;
  pointer-events: none;
  opacity: 0.85;
  transform: scale(1.1);
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5));
  animation: plant-sway 1.5s ease-in-out infinite;
  transform-origin: bottom center;
}

/* ============================================================
   WATERING CAN ANIMATION
   ============================================================ */
.water-anim-overlay {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  overflow: visible;
}
.water-can {
  position: absolute;
  top: -10%;
  right: -30%;
  line-height: 1;
  opacity: 0;
  transform: translateX(30px) rotate(0deg);
  transition: transform 0.3s ease-out, opacity 0.2s;
  transform-origin: center bottom;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.3));
}
.water-can-enter {
  opacity: 1;
  transform: translateX(0) rotate(0deg);
}
.water-can-pour {
  transform: translateX(-10px) rotate(-30deg);
  transition: transform 0.25s ease-in;
}
.water-can-exit {
  opacity: 0;
  transform: translateX(30px) rotate(-30deg) scale(0.7);
  transition: transform 0.3s ease-in, opacity 0.2s ease-in;
}
.water-drop-particle {
  position: absolute;
  border-radius: 50%;
  background: rgba(100, 180, 240, 0.8);
  box-shadow: 0 0 3px rgba(100, 180, 240, 0.5);
  z-index: 1;
}
.water-drop-fall {
  transform: translate(var(--drift), var(--fall));
  opacity: 0;
  transition: transform 0.45s cubic-bezier(0.55, 0, 1, 0.45), opacity 0.45s ease-in;
}
.water-splash {
  position: absolute;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(100, 180, 240, 0.6);
  z-index: 2;
}
.water-splash-pop {
  transform: translate(var(--dx), var(--dy));
  opacity: 0;
  transition: transform 0.35s ease-out, opacity 0.3s ease-out;
}

/* ============================================================
   POT BOUNCE — water, fertilizer, insecticide
   ============================================================ */
.pot-bounce {
  animation: pot-bounce-anim 0.4s ease-out;
  transform-origin: center bottom;
}
@keyframes pot-bounce-anim {
  0%   { transform: scale(1, 1); }
  20%  { transform: scale(1.05, 0.92); }
  40%  { transform: scale(0.97, 1.06); }
  60%  { transform: scale(1.02, 0.98); }
  80%  { transform: scale(0.99, 1.01); }
  100% { transform: scale(1, 1); }
}

/* ============================================================
   STAGE-UP — scale + glow transition
   ============================================================ */
.pot-stage-up {
  animation: pot-stage-up-anim 0.8s ease-out;
  transform-origin: center bottom;
}
@keyframes pot-stage-up-anim {
  0%   { transform: scale(0.8); opacity: 0.4; filter: brightness(2); }
  30%  { transform: scale(1.1); opacity: 1; filter: brightness(1.5); }
  60%  { transform: scale(0.97); filter: brightness(1.1); }
  100% { transform: scale(1); opacity: 1; filter: brightness(1); }
}

/* ============================================================
   STAGE-UP SPARKLE EFFECT
   ============================================================ */
.stage-up-overlay {
  position: fixed;
  z-index: 9998;
  pointer-events: none;
  overflow: visible;
}
.stage-up-flash {
  position: absolute;
  inset: -10%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(126,198,98,0.4) 0%, rgba(126,198,98,0) 70%);
  animation: stage-flash 0.6s ease-out forwards;
}
@keyframes stage-flash {
  0% { transform: scale(0.3); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.8; }
  100% { transform: scale(1.5); opacity: 0; }
}
.stage-up-sparkle {
  position: absolute;
  line-height: 1;
  opacity: 1;
  z-index: 2;
  filter: drop-shadow(0 0 4px rgba(126,198,98,0.6));
}
.stage-up-sparkle-fly {
  transform: translate(var(--dx), var(--dy));
  opacity: 0;
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.3, 1), opacity 0.7s ease-out;
}

.pot-drag-ghost {
  position: fixed;
  z-index: 10000;
  pointer-events: none;
  opacity: 0.85;
  transform: scale(1.1);
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.5));
  transform-origin: bottom center;
}

/* ============================================================
   SHARED PANEL STYLES (shop + inventory)
   ============================================================ */
.inv-panel, .shop-panel {
  position: absolute;
  display: flex; flex-direction: column;
  background: rgba(20, 14, 8, 0.9);
  border: 2px solid rgba(160, 120, 60, 0.35);
  border-radius: 10px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overflow: hidden;
  font-family: 'Fredoka', sans-serif;
  max-height: 100%;
}

/* Panel header */
.panel-header {
  padding: 0.4em 0.6em;
  background: rgba(0, 0, 0, 0.35);
  border-bottom: 2px solid rgba(160, 120, 60, 0.3);
  font-size: 0.8em; font-weight: 700;
  color: #e6a832;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  flex-shrink: 0;
}

/* Scrollable body */
.inv-scroll, .shop-scroll {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}
.inv-scroll::-webkit-scrollbar, .shop-scroll::-webkit-scrollbar { width: 3px; }
.inv-scroll::-webkit-scrollbar-thumb, .shop-scroll::-webkit-scrollbar-thumb {
  background: rgba(230,168,50,0.25); border-radius: 3px;
}

/* ---- Collapsible sections ---- */
.panel-section {
  border-bottom: 1px solid rgba(160, 120, 60, 0.15);
}
.panel-section:last-child { border-bottom: none; }

.panel-section-header {
  display: flex; align-items: center; gap: 0.3em;
  padding: 0.35em 0.5em;
  cursor: pointer;
  transition: background 0.15s;
  user-select: none;
}
.panel-section-header:hover {
  background: rgba(255, 255, 255, 0.04);
}
.section-icon { font-size: 0.7em; flex-shrink: 0; }
.section-label {
  font-size: 0.6em; font-weight: 700;
  color: #e6a832;
  flex: 1;
}
.section-count {
  font-size: 0.5em; font-weight: 700;
  color: rgba(240, 232, 208, 0.45);
  background: rgba(255,255,255,0.06);
  padding: 0.1em 0.4em;
  border-radius: 4px;
}
.section-arrow {
  font-size: 0.45em;
  color: rgba(240, 232, 208, 0.35);
  flex-shrink: 0;
}

.panel-section-body {
  padding: 0.2em 0.4em 0.4em;
}
.panel-section-body.collapsed {
  display: none;
}

.section-empty {
  font-size: 0.5em;
  color: rgba(240, 232, 208, 0.25);
  padding: 0.6em;
  text-align: center;
  font-style: italic;
}

.section-show-more {
  font-size: 0.5em; font-weight: 600;
  color: #e6a832;
  text-align: center;
  padding: 0.3em;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.15s;
}
.section-show-more:hover { opacity: 1; }

.section-total {
  font-size: 0.5em; font-weight: 700;
  color: rgba(230, 168, 50, 0.7);
  text-align: right;
  padding: 0.3em 0.2em 0;
  border-top: 1px solid rgba(160, 120, 60, 0.12);
  margin-top: 0.3em;
}

/* ---- 2-column tile grid ---- */
.panel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.3em;
}

/* ---- Tile card (shared inventory + shop) ---- */
.panel-tile {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 0.1em;
  padding: 0.35em 0.2em;
  min-height: 3.8em;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(200, 170, 100, 0.15);
  border-radius: 10px;
  cursor: default;
  transition: all 0.12s;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.panel-tile:hover {
  background: rgba(230, 168, 50, 0.12);
  border-color: rgba(230, 168, 50, 0.35);
  box-shadow: 0 2px 8px rgba(230,168,50,0.1);
}
.tile-icon {
  font-size: 1.4em;
  line-height: 1;
}
img.tile-icon-img {
  width: 1.8em; height: 1.8em;
  object-fit: contain;
  object-position: center;
  flex: 0 0 auto;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}
.game-modal-body img.tile-icon-img {
  width: 2.4em; height: 2.4em;
}
.tile-name {
  font-size: 0.5em; font-weight: 600;
  color: #f0e8d0;
  text-align: center; line-height: 1.15;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  word-break: break-word; width: 100%;
}
.tile-count {
  font-size: 0.5em; font-weight: 700;
  color: #e6a832;
}
.tile-price {
  font-size: 0.42em; font-weight: 600;
  color: rgba(230, 168, 50, 0.55);
}
.tile-cost {
  font-size: 0.45em; font-weight: 700;
  color: #e6a832;
}
.tile-desc {
  font-size: 0.38em; font-weight: 400;
  color: rgba(240,232,208,0.5);
  text-align: center; line-height: 1.15;
  width: 100%;
}
.tile-timer {
  font-size: 0.4em; font-weight: 600;
  color: rgba(230,168,50,0.7);
  font-family: 'Fredoka', sans-serif;
}
.tile-action-btn {
  margin-top: 0.3em;
  padding: 0.35em 0.9em;
  border-radius: 8px;
  font-size: 0.42em;
  font-weight: 700;
  font-family: 'Fredoka', sans-serif;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  pointer-events: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.35);
}
.tile-action-btn.buy {
  background: linear-gradient(135deg, #7ec662, #4caf50);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.18);
}
.tile-action-btn.sell {
  background: linear-gradient(135deg, #e6a832, #c88c32);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.18);
}
.panel-tile.disabled .tile-action-btn {
  opacity: 0.45;
  filter: grayscale(0.6);
}

/* Shop hint banner — explains WHY the player was sent to the shop */
.shop-hint-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  margin: 0 0 14px 0;
  background: linear-gradient(135deg, rgba(126,198,98,0.18), rgba(76,175,80,0.12));
  border: 1px solid rgba(126,198,98,0.45);
  border-left: 4px solid #7ec662;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06);
  animation: shop-hint-slide-in 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.shop-hint-icon {
  font-size: 1.9em;
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}
.shop-hint-text {
  flex: 1;
  color: #f0e8d0;
  font-family: 'Fredoka', sans-serif;
  font-size: 0.95em;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.2px;
}
@keyframes shop-hint-slide-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Diamond Shop offers in shop modal */
.diamond-offers-sep {
  text-align: center;
  font-size: 0.7em;
  font-weight: 700;
  color: #2cb5e8;
  padding: 0.6em 0 0.3em;
  border-top: 1px solid rgba(44,181,232,0.2);
  margin-top: 0.5em;
  font-family: 'Fredoka', sans-serif;
}
.diamond-offer-tile {
  position: relative;
  border-color: rgba(44,181,232,0.25) !important;
  background: linear-gradient(135deg, rgba(44,181,232,0.08) 0%, transparent 60%) !important;
  cursor: pointer !important;
}
.diamond-offer-tile:hover {
  border-color: rgba(44,181,232,0.5) !important;
  box-shadow: 0 2px 12px rgba(44,181,232,0.15) !important;
}
.offer-badge {
  position: absolute;
  top: 4px; right: 4px;
  font-size: 0.35em;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  color: #fff;
}
.offer-discount { background: linear-gradient(135deg, #e74c3c, #c0392b); }
.offer-best { background: linear-gradient(135deg, #f0c050, #d4a017); color: #1a1510; }
.offer-popular { background: linear-gradient(135deg, #e74c3c, #e91e63); }
.tile-price-tag {
  font-size: 0.55em;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #2cb5e8, #1a8fc4);
  padding: 3px 10px;
  border-radius: 6px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  margin-top: 2px;
}

/* Orders: ready to deliver — glowing green border (legacy tiles) */
.panel-tile.order-ready {
  border: 2px solid rgba(126,198,98,0.7);
  box-shadow: 0 0 10px rgba(126,198,98,0.35), 0 0 3px rgba(126,198,98,0.2) inset;
  animation: order-ready-glow 1.8s ease-in-out infinite;
}
@keyframes order-ready-glow {
  0%, 100% { box-shadow: 0 0 8px rgba(126,198,98,0.3), 0 0 2px rgba(126,198,98,0.15) inset; }
  50%      { box-shadow: 0 0 16px rgba(126,198,98,0.5), 0 0 5px rgba(126,198,98,0.3) inset; }
}

/* ---- Orders: horizontal panel-tile rows (layout glue only) ---- */
.ord-list { display: flex; flex-direction: column; gap: 0.5em; }

.ord-tile.panel-tile {
  background: rgba(40,36,28,0.85) !important;
  border: 1.5px solid #655A3B !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5) !important;
  /* override below */
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.6em;
  padding: 0.5em 0.6em 0.9em;
  position: relative;
  min-height: 0;
}
.ord-tile.order-ready { cursor: pointer; }
.ord-tile.is-fulfilling {
  animation: order-fulfill 0.5s ease-out forwards !important;
  pointer-events: none;
}
@keyframes order-fulfill {
  0%   { transform: scale(1); background: rgba(255,255,255,0.05); }
  30%  { transform: scale(1.03); background: rgba(126,198,98,0.25); border-color: rgba(126,198,98,0.8); box-shadow: 0 0 20px rgba(126,198,98,0.5); }
  100% { transform: scale(0.95) translateX(30px); opacity: 0; background: rgba(126,198,98,0.3); }
}

.ord-npc {
  display: flex; flex-direction: column; align-items: center; gap: 0.15em;
  min-width: 3em; flex-shrink: 0;
}
.ord-npc .tile-icon { font-size: 2em; }
.ord-npc .tile-desc { font-size: 0.55em; white-space: nowrap; color: #E8C594; font-weight: 600; }

.ord-request {
  display: flex; align-items: center; gap: 0.4em;
  flex: 1; min-width: 0;
}
.ord-request .tile-icon { font-size: 1.8em; flex-shrink: 0; }
.ord-request img.tile-icon-img { width: 2.4em; height: 2.4em; }
.ord-request .tile-name {
  text-align: left; -webkit-line-clamp: 1;
  font-size: 0.6em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  display: block;
}
.ord-request .tile-name strong { color: #f0c050; font-size: 1.15em; font-weight: 800; }

.ord-right {
  display: flex; flex-direction: column;
  align-items: flex-end; gap: 0.25em; flex-shrink: 0;
}
.ord-right .tile-cost { font-size: 0.65em; white-space: nowrap; color: #EDBE4F; font-weight: 800; }
.ord-right .tile-timer { font-size: 0.6em; white-space: nowrap; color: #C3902D; font-weight: 700; }
.ord-tile .tile-action-btn {
  pointer-events: none;
  background: linear-gradient(180deg, #7EC662, #4A9E2F) !important;
  color: #fff !important; font-weight: 800 !important;
  padding: 4px 12px !important; border-radius: 8px !important;
  border: 1px solid #5CB13A !important;
  font-size: 0.65em !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.ord-missing {
  position: absolute;
  bottom: 2px;
  left: 8px;
  right: 8px;
  font-size: 0.42em;
  color: #e0a866;
  text-align: center;
  opacity: 0.85;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ord-missing b { color: #EDBE4F; font-weight: 800; }
.ord-missing { font-size: 0.5em !important; color: #C3902D !important; }

/* Season Pass: claimable tile — glowing border */
.panel-tile.bp-claimable {
  border-color: rgba(126,198,98,0.6);
  box-shadow: 0 0 8px rgba(126,198,98,0.3), 0 0 2px rgba(126,198,98,0.2) inset;
  animation: bp-glow 1.8s ease-in-out infinite;
}
@keyframes bp-glow {
  0%, 100% { box-shadow: 0 0 6px rgba(126,198,98,0.25), 0 0 2px rgba(126,198,98,0.15) inset; }
  50%      { box-shadow: 0 0 14px rgba(126,198,98,0.45), 0 0 4px rgba(126,198,98,0.25) inset; }
}

/* Season Pass: claimed tile — dark overlay */
.panel-tile.bp-claimed {
  background: linear-gradient(135deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.2) 100%);
  opacity: 0.6;
}

/* Season Pass: row gap */
.bp-tile-row {
  margin-bottom: 3px !important;
}

/* Active upgrades bar — in-game overlay */
.active-upgrades-bar {
  position: absolute;
  top: 12%; right: 1%;
  display: flex; gap: 6px;
  z-index: 90;
  pointer-events: none;
}
.upgrade-pill {
  position: relative;
  padding: 3px 10px;
  border-radius: 12px;
  background: rgba(20,18,12,0.75);
  border: 1px solid rgba(230,168,50,0.35);
  overflow: hidden;
  pointer-events: auto;
}
.upgrade-pill-fill {
  position: absolute; inset: 0;
  background: rgba(230,168,50,0.15);
  border-radius: 12px;
  transition: width 0.5s linear;
}
.upgrade-pill-content {
  position: relative;
  font-size: 11px; font-weight: 600;
  color: #f0e8d0;
  white-space: nowrap;
}

/* Greenhouse active upgrades banner */
.gh-active-banner {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 8px 10px;
  margin-bottom: 6px;
  background: rgba(100,220,80,0.08);
  border: 1px solid rgba(100,220,80,0.2);
  border-radius: 10px;
}
.gh-active-chip {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  background: rgba(20,18,12,0.6);
  border: 1px solid rgba(100,220,80,0.25);
  border-radius: 8px;
  min-width: 0;
}
.gh-chip-icon { font-size: 14px; line-height: 1; flex-shrink: 0; }
.gh-chip-time {
  font-size: 11px; font-weight: 700;
  color: #a8e88a;
  white-space: nowrap;
}
.gh-chip-bar {
  width: 36px; height: 4px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px;
  overflow: hidden;
  flex-shrink: 0;
}
.gh-chip-bar-fill {
  height: 100%;
  background: #a8e88a;
  border-radius: 2px;
  transition: width 0.5s linear;
}

/* Shop tile — clickable */
.shop-tile { cursor: pointer; }
.shop-tile.disabled {
  opacity: 0.35;
  cursor: default;
}

/* Highlight tile the player was sent here to buy */
.shop-highlight-need {
  border-color: #ffd24a !important;
  box-shadow: 0 0 0 2px #ffd24a, 0 0 18px rgba(255,210,74,0.6) !important;
  animation: shop-need-bounce 0.5s ease 3;
  z-index: 2;
}
@keyframes shop-need-bounce {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}

/* Rarity tinting: only a subtle border on the tile. No background gradient
   (avoided the square glow look) and no ring on the image (avoided weird
   interactions with the natural drop-shadow on the plant sprite). The rarity
   label badge text colour does the rest of the visual differentiation. */
.panel-tile.rarity-common   { border-color: rgba(180,180,180,0.2); }
.panel-tile.rarity-uncommon { border-color: rgba(80,180,80,0.35); }
.panel-tile.rarity-rare     { border-color: rgba(60,130,230,0.35); }
.panel-tile.rarity-legendary{ border-color: rgba(200,140,50,0.45); }
.panel-tile.rarity-epic     { border-color: rgba(160,80,200,0.35); }
.panel-tile.rarity-mythic   { border-color: rgba(230,50,80,0.35); }

/* Rarity label badge */
.tile-rarity {
  font-size: 0.38em; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.04em;
  padding: 0.05em 0.4em; border-radius: 3px;
  line-height: 1.3;
}
.rarity-common .tile-rarity   { color: rgba(180,180,180,0.7); }
.rarity-uncommon .tile-rarity { color: #5cb85c; }
.rarity-rare .tile-rarity     { color: #4a9af5; }
.rarity-legendary .tile-rarity{ color: #e6a832; }
.rarity-epic .tile-rarity     { color: #b050e0; }
.rarity-mythic .tile-rarity   { color: #e63250; }

/* ---- Inventory footer / sell button ---- */
.inv-footer {
  padding: 0.35em;
  border-top: 1px solid rgba(160, 120, 60, 0.25);
  background: rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}
.inv-sell-btn {
  width: 100%;
  padding: 0.4em 0;
  border: 1px solid rgba(76, 175, 80, 0.4);
  border-radius: 6px;
  background: rgba(76, 175, 80, 0.15);
  color: #7ec662;
  font-family: 'Fredoka', sans-serif;
  font-size: 0.55em; font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
}
.inv-sell-btn:hover:not(:disabled) {
  background: rgba(76, 175, 80, 0.28);
}
.inv-sell-btn:disabled {
  opacity: 0.4;
  cursor: default;
}


/* ============================================================
   LOADING STATE
   ============================================================ */
.game-loading {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 16px;
  font-size: 1.2em; color: #888;
  z-index: 500;
  background: #0a0806;
}
.load-logo {
  width: 140px; height: 140px;
  object-fit: contain;
  filter: drop-shadow(0 4px 20px rgba(230,168,50,0.25));
  animation: logo-breathe 2.4s ease-in-out infinite alternate;
}
@keyframes logo-breathe {
  from { transform: scale(1); opacity: 0.85; }
  to   { transform: scale(1.04); opacity: 1; }
}
.load-spinner {
  width: 32px; height: 32px;
  border: 3px solid rgba(230,168,50,0.15);
  border-top-color: #e6a832;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.load-text {
  font-size: 0.85em; color: #e6a832;
  font-family: 'Fredoka', sans-serif;
  font-weight: 500;
  letter-spacing: 0.03em;
}
.load-bar {
  width: 60%; max-width: 220px; height: 5px;
  background: rgba(255,255,255,0.08);
  border-radius: 3px; overflow: hidden;
}
.load-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #e6a832, #f0c040);
  border-radius: 3px;
  transition: width 0.2s ease;
}

/* ============================================================
   PLANT CARD — harvest result card overlay
   ============================================================ */
.plant-card-overlay {
  position: absolute; inset: 0;
  z-index: 500;
  background: rgba(0,0,0,0.6);
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  backdrop-filter: blur(4px);
}
.plant-card-overlay.open { opacity: 1; }
.plant-card {
  position: relative;
  width: min(85vw, 300px);
  background: linear-gradient(160deg, rgba(40,36,30,0.97) 0%, rgba(30,28,24,0.98) 100%);
  border: 1px solid rgba(230,168,50,0.25);
  border-radius: 16px;
  padding: 24px 20px 18px;
  text-align: center;
  box-shadow: 0 8px 40px rgba(0,0,0,0.6), 0 0 30px rgba(230,168,50,0.08);
  transform: scale(0.85) translateY(20px);
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
.plant-card-overlay.open .plant-card {
  transform: scale(1) translateY(0);
}
/* Rarity glow */
.plant-card.rarity-uncommon { border-color: rgba(80,180,80,0.4); box-shadow: 0 8px 40px rgba(0,0,0,0.6), 0 0 25px rgba(80,180,80,0.1); }
.plant-card.rarity-rare { border-color: rgba(60,130,230,0.4); box-shadow: 0 8px 40px rgba(0,0,0,0.6), 0 0 25px rgba(60,130,230,0.12); }
.plant-card.rarity-legendary { border-color: rgba(200,140,50,0.5); box-shadow: 0 8px 40px rgba(0,0,0,0.6), 0 0 30px rgba(200,140,50,0.15); }
.plant-card.rarity-epic { border-color: rgba(199,125,255,0.5); box-shadow: 0 8px 40px rgba(0,0,0,0.6), 0 0 30px rgba(199,125,255,0.15); }
.plant-card.rarity-mythic { border-color: rgba(255,107,107,0.5); box-shadow: 0 8px 40px rgba(0,0,0,0.6), 0 0 35px rgba(255,107,107,0.18); }

.plant-card-like {
  position: absolute; top: 10px; right: 10px;
  background: rgba(255,100,110,0.18);
  border: 1px solid rgba(255,120,130,0.55);
  border-radius: 50%; width: 46px; height: 46px;
  font-size: 24px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.15s, background 0.2s, border-color 0.2s, box-shadow 0.2s;
  box-shadow: 0 0 0 0 rgba(255,100,120,0.55);
  animation: plantCardLikePulse 1.8s ease-in-out infinite;
}
.plant-card-like:hover { background: rgba(255,100,120,0.28); transform: scale(1.18); animation-play-state: paused; }
.plant-card-like:active { transform: scale(0.92); }
.plant-card-like.liked {
  border-color: rgba(255,90,110,0.85);
  background: rgba(255,90,110,0.22);
  animation: none;
  box-shadow: 0 0 18px rgba(255,90,110,0.45);
}
@keyframes plantCardLikePulse {
  0%   { box-shadow: 0 0 0 0   rgba(255,100,120,0.55); transform: scale(1); }
  50%  { box-shadow: 0 0 0 10px rgba(255,100,120,0);    transform: scale(1.06); }
  100% { box-shadow: 0 0 0 0   rgba(255,100,120,0);    transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .plant-card-like { animation: none; }
}

.plant-card-icon { font-size: 48px; margin-bottom: 6px; }
.plant-card-name {
  font-size: 18px; font-weight: 700;
  color: #f0e8d0;
  margin-bottom: 2px;
}
.plant-card-rarity {
  font-size: 12px; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
}
.plant-card-price {
  font-size: 14px; color: #e6a832;
  margin-bottom: 10px;
}

.plant-card-dna { margin: 8px 0 10px; }
.plant-card-dna-bar {
  display: flex; height: 6px;
  border-radius: 3px; overflow: hidden;
  background: rgba(255,255,255,0.05);
}
.dna-bar-seg { min-width: 4px; }
.plant-card-dna-labels {
  font-size: 10px; color: rgba(240,232,208,0.5);
  margin-top: 4px;
}

.plant-card-discovery {
  margin: 10px 0;
  padding: 8px;
  background: rgba(34,197,94,0.1);
  border: 1px solid rgba(34,197,94,0.2);
  border-radius: 8px;
}
.plant-card-discovery-title { font-size: 14px; font-weight: 700; color: #22c55e; }
.plant-card-discovery-reward { font-size: 12px; color: #e6a832; margin-top: 2px; }

.plant-card-actions {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 14px;
}
.plant-card-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.04);
  color: #f0e8d0;
  font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.plant-card-btn:hover { background: rgba(255,255,255,0.08); transform: translateY(-1px); }
.plant-card-btn:active { transform: scale(0.97); }
.pc-btn-icon { font-size: 16px; }

.pc-quick-sell { border-color: rgba(230,168,50,0.3); }
.pc-quick-sell:hover { border-color: rgba(230,168,50,0.6); box-shadow: 0 0 10px rgba(230,168,50,0.15); }
.pc-list-sale { border-color: rgba(79,195,247,0.3); }
.pc-list-sale:hover { border-color: rgba(79,195,247,0.6); box-shadow: 0 0 10px rgba(79,195,247,0.15); }
.pc-keep { border-color: rgba(129,199,132,0.3); }
.pc-keep:hover { border-color: rgba(129,199,132,0.6); box-shadow: 0 0 10px rgba(129,199,132,0.15); }

/* ============================================================
   LIST FOR SALE — screen after harvest
   ============================================================ */
.list-sale-panel {
  background: rgba(20,18,12,0.95);
  border: 1px solid rgba(230,168,50,0.25);
  border-radius: 16px;
  padding: 20px 18px;
  width: min(320px, 85vw);
  display: flex; flex-direction: column; gap: 16px;
  font-family: 'Fredoka', sans-serif;
}
.list-sale-header {
  display: flex; align-items: center; gap: 10px;
  justify-content: center;
}
.list-sale-flower { font-size: 28px; }
.list-sale-name {
  font-size: 16px; font-weight: 700;
  color: #f0e8d0;
}
.list-sale-section { display: flex; flex-direction: column; gap: 8px; }
.list-sale-label {
  font-size: 11px; font-weight: 600;
  color: rgba(240,232,208,0.5);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.list-sale-targets { display: flex; gap: 8px; }
.list-sale-target {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; gap: 4px;
  padding: 10px 8px;
  border-radius: 10px;
  border: 1.5px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.03);
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.list-sale-target:hover { background: rgba(255,255,255,0.06); }
.list-sale-target.active {
  border-color: rgba(79,195,247,0.6);
  background: rgba(79,195,247,0.1);
  box-shadow: 0 0 12px rgba(79,195,247,0.1);
}
.ls-target-icon { font-size: 18px; }
.ls-target-name {
  font-size: 11px; font-weight: 600;
  color: #f0e8d0;
  text-align: center;
}

/* Price controls */
.list-sale-price-row {
  display: flex; align-items: center; gap: 8px;
  justify-content: center;
}
.ls-price-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(230,168,50,0.3);
  background: rgba(230,168,50,0.08);
  color: #e6a832;
  font-size: 18px; font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
  display: flex; align-items: center; justify-content: center;
}
.ls-price-btn:hover { background: rgba(230,168,50,0.18); border-color: rgba(230,168,50,0.5); }
.ls-price-btn:active { transform: scale(0.92); }
.ls-price-display {
  display: flex; align-items: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(230,168,50,0.25);
  border-radius: 10px;
  padding: 6px 12px;
  gap: 2px;
}
.ls-price-input {
  width: 60px;
  background: transparent;
  border: none;
  color: #e6a832;
  font-size: 20px; font-weight: 700;
  text-align: center;
  font-family: 'Fredoka', sans-serif;
  outline: none;
  -moz-appearance: textfield;
}
.ls-price-input::-webkit-inner-spin-button,
.ls-price-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.ls-price-c {
  font-size: 14px; font-weight: 600;
  color: rgba(230,168,50,0.6);
}
.ls-price-hint {
  display: flex; justify-content: space-between;
  font-size: 10px; font-weight: 500;
  color: rgba(240,232,208,0.35);
  padding: 0 4px;
}
.ls-price-base { color: rgba(230,168,50,0.5); }

.list-sale-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.pc-list-confirm { border-color: rgba(79,195,247,0.4) !important; }
.pc-list-confirm:hover { border-color: rgba(79,195,247,0.7) !important; box-shadow: 0 0 10px rgba(79,195,247,0.2); }

/* ============================================================
   BOTTOM BAR — 5 navigation buttons
   ============================================================ */
.bottom-bar {
  position: absolute;
  bottom: 1%; left: 50%;
  transform: translateX(-50%);
  display: flex; gap: 0.3em;
  z-index: 100;
  padding: 0.3em;
  background: none;
  border: none;
}
.bottom-bar-btn {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 0.1em;
  padding: 0.2em;
  background: none;
  border: none;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), filter 0.15s;
  color: #f0e8d0;
  font-family: 'Fredoka', sans-serif;
  position: relative;
}
/* Engagement badge — small red dot/count in top-right corner. Doesn't affect icon layout. */
.bottom-bar-btn .bb-badge,
.layout-el > .bb-badge {
  position: absolute;
  top: 2px; right: 4px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  background: linear-gradient(135deg, #ff4060, #c91e3a);
  color: #fff;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 0 0 2px rgba(20,15,8,0.85), 0 2px 8px rgba(255,80,100,0.55);
  pointer-events: none;
  font-family: 'Fredoka', sans-serif;
  animation: bb-badge-pulse 2.4s ease-in-out infinite;
  z-index: 10;
}
/* On mobile layout nav buttons (bigger PNGs), enlarge badge + position further from edge */
.layout-el > .bb-badge {
  top: 6%; right: 6%;
  min-width: 22px; height: 22px;
  font-size: 13px;
  line-height: 22px;
  padding: 0 6px;
  border-radius: 11px;
}
@keyframes bb-badge-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 2px rgba(20,15,8,0.85), 0 2px 8px rgba(255,80,100,0.55); }
  50%      { transform: scale(1.14); box-shadow: 0 0 0 2px rgba(20,15,8,0.85), 0 2px 14px rgba(255,80,100,0.85); }
}
/* Entrance animation */
.bb-enter {
  opacity: 0 !important;
  transform: translateY(60px) scale(0.5) !important;
}
.bb-enter-active {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.34,1.56,0.64,1) !important;
}
.bottom-bar-btn:hover {
  transform: scale(1.08);
  filter: brightness(1.15);
}
.bottom-bar-btn:active {
  transform: scale(0.95);
}
.bottom-bar-btn .bb-icon {
  font-size: 2.2em;
  line-height: 1;
}
.bottom-bar-btn .bb-img {
  width: 7em; height: 7em;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
}
.bottom-bar-btn .bb-label {
  font-size: 0.5em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  opacity: 0.7;
}
.bottom-bar-btn.active {
  filter: brightness(1.2);
}

/* ============================================================
   FORAGE FLOATING BUTTON (desktop/wide)
   ============================================================ */
.forage-float-btn {
  position: absolute;
  bottom: 10%; right: 3%;
  z-index: 99;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  width: 5.5em; height: 5.5em;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), filter 0.15s;
  font-family: 'Fredoka', sans-serif;
}
/* Entrance animation */
.float-enter-right {
  opacity: 0 !important;
  transform: translateX(80px) scale(0.5) !important;
}
.float-enter-right.enter-active {
  opacity: 1 !important;
  transform: translateX(0) scale(1) !important;
  transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.34,1.56,0.64,1) !important;
}
.forage-float-btn:hover {
  transform: scale(1.08);
  filter: brightness(1.15);
}
.forage-float-btn:active { transform: scale(0.95); }
.forage-float-btn .forage-icon { font-size: 1.6em; line-height: 1; }
.forage-float-btn .forage-label { font-size: 0.35em; font-weight: 700; color: #7ec662; text-transform: uppercase; }
.float-btn-img {
  width: 100%; height: 100%;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
}
.forage-float-btn .forage-timer { font-size: 0.35em; font-weight: 600; color: rgba(230,168,50,0.8); }
.forage-float-btn.on-cooldown {
  border-color: rgba(160,120,60,0.3);
  background: radial-gradient(circle, rgba(100,80,40,0.2) 0%, rgba(20,14,8,0.85) 70%);
  animation: none;
  opacity: 0.7;
}
@keyframes forage-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(76,175,80,0.2); }
  50% { box-shadow: 0 0 18px rgba(76,175,80,0.4); }
}

/* Upgrade floating button (desktop/wide) */
/* Orders ready indicator — top-right, above the upgrade-timer strip on portrait */
.orders-indicator {
  position: absolute;
  top: 2%;
  right: 2%;
  z-index: 150;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  border-radius: 24px;
  background: radial-gradient(ellipse at center, rgba(80,160,50,0.98), rgba(30,70,20,0.95));
  border: 2.5px solid #b6ff6e;
  color: #f4ffe0;
  font-family: 'Fredoka', sans-serif;
  font-weight: 800;
  font-size: 15px;
  line-height: 1;
  box-shadow: 0 0 22px rgba(182,255,110,0.6), 0 0 8px rgba(126,198,98,0.8), 0 4px 14px rgba(0,0,0,0.5);
  cursor: pointer;
  animation: orders-pulse 1.4s ease-in-out infinite;
  transition: transform 0.15s;
  -webkit-tap-highlight-color: transparent;
  text-shadow: 0 1px 2px rgba(0,0,0,0.55);
}
.orders-indicator:hover { transform: scale(1.08); }
.orders-indicator:active { transform: scale(0.95); }
.orders-indicator .oi-icon {
  font-size: 20px;
  display: inline-block;
  animation: orders-icon-bounce 0.9s ease-in-out infinite;
}
.orders-indicator .oi-count {
  color: #fff176;
  font-size: 18px;
  font-weight: 900;
  text-shadow: 0 0 8px rgba(255,241,118,0.7), 0 1px 2px rgba(0,0,0,0.7);
}
.orders-indicator .oi-label {
  font-size: 13px;
  font-weight: 800;
  opacity: 1;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #fff;
}
@keyframes orders-pulse {
  0%, 100% { box-shadow: 0 0 22px rgba(182,255,110,0.6),  0 0 8px rgba(126,198,98,0.8), 0 4px 14px rgba(0,0,0,0.5); transform: scale(1); }
  50%      { box-shadow: 0 0 40px rgba(182,255,110,0.95), 0 0 16px rgba(126,198,98,1),  0 4px 14px rgba(0,0,0,0.5); transform: scale(1.05); }
}
@keyframes orders-icon-bounce {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50%      { transform: translateY(-3px) rotate(4deg); }
}

.upgrade-float-btn {
  position: absolute;
  bottom: 10%; left: 3%;
  z-index: 99;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  width: 5.5em; height: 5.5em;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.34,1.56,0.64,1), filter 0.15s;
  font-family: 'Fredoka', sans-serif;
}
/* Entrance animation */
.float-enter-left {
  opacity: 0 !important;
  transform: translateX(-80px) scale(0.5) !important;
}
.float-enter-left.enter-active {
  opacity: 1 !important;
  transform: translateX(0) scale(1) !important;
  transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.34,1.56,0.64,1) !important;
}
.upgrade-float-btn:hover {
  border-color: rgba(230,168,50,0.7);
  background: radial-gradient(circle, rgba(230,168,50,0.4) 0%, rgba(20,14,8,0.9) 70%);
  transform: scale(1.08);
}
.upgrade-float-btn:active { transform: scale(0.95); }
.upgrade-float-btn .upgrade-float-icon { font-size: 1.6em; line-height: 1; }
.upgrade-float-btn .upgrade-float-label { font-size: 0.32em; font-weight: 700; color: rgba(230,168,50,0.8); text-transform: uppercase; }
.upgrade-float-btn.has-active {
  border-color: rgba(100,220,80,0.5);
  background: radial-gradient(circle, rgba(100,220,80,0.2) 0%, rgba(20,14,8,0.9) 70%);
  animation: upgrade-glow 2s ease-in-out infinite;
}
.upgrade-float-btn.has-active .upgrade-float-label { color: rgba(100,220,80,0.9); }
.upgrade-float-badge {
  position: absolute; top: -2px; right: -2px;
  min-width: 16px; height: 16px;
  background: #e6a832; color: #1a1408;
  font-size: 10px; font-weight: 800;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px; line-height: 1;
}
@keyframes upgrade-glow {
  0%, 100% { box-shadow: 0 0 6px rgba(100,220,80,0.15); }
  50% { box-shadow: 0 0 16px rgba(100,220,80,0.35); }
}


/* ============================================================
   PURCHASE CONFIRMATION MODAL
   ============================================================ */
.purchase-overlay {
  position: absolute; inset: 0; z-index: 800;
  background: rgba(0,0,0,0.6); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.25s ease;
  pointer-events: none;
}
.purchase-overlay.visible { opacity: 1; pointer-events: auto; }
.purchase-modal {
  background: linear-gradient(165deg, #1a2a44 0%, #0f1928 100%);
  border: 1px solid #2a3a5c; border-radius: 16px;
  padding: 1.5em 1.8em; text-align: center;
  min-width: 220px; max-width: 320px; width: 80%;
  box-shadow: 0 12px 40px rgba(0,0,0,0.6), 0 0 60px rgba(42,100,220,0.1);
  position: relative;
  transform: scale(0.9); transition: transform 0.25s ease;
  font-family: 'Fredoka', sans-serif;
}
.purchase-overlay.visible .purchase-modal { transform: scale(1); }
.purchase-close {
  position: absolute; top: 8px; right: 10px;
  background: none; border: none; color: #6b7a99; font-size: 1.4em;
  cursor: pointer; line-height: 1; padding: 4px;
}
.purchase-close:hover { color: #fff; }
.purchase-icon { font-size: 2.5em; margin-bottom: 0.2em; }
.purchase-title {
  font-size: 1.2em; font-weight: 700; color: #e0e6ed;
  margin-bottom: 0.2em;
}
.purchase-diamonds {
  font-size: 1.4em; font-weight: 700; color: #5bc0ff;
  margin-bottom: 0.3em;
}
.purchase-bonus {
  font-size: 0.85em; color: #b388ff; margin-bottom: 0.15em;
}
.purchase-price-row {
  display: flex; align-items: center; justify-content: center;
  gap: 0.5em; margin: 0.5em 0;
}
.purchase-original-price {
  font-size: 0.9em; color: #6b7a99; text-decoration: line-through;
}
.purchase-price {
  font-size: 1.3em; font-weight: 700; color: #fff;
}
.purchase-discount {
  font-size: 0.75em; font-weight: 700; color: #1a2a44;
  background: #f0c050; border-radius: 6px; padding: 2px 6px;
}
.purchase-buy-btn {
  width: 100%; padding: 0.7em 1em; border: none; border-radius: 12px;
  background: linear-gradient(135deg, #27ae60, #2ecc71);
  color: #fff; font-family: 'Fredoka', sans-serif;
  font-size: 1.1em; font-weight: 700; cursor: pointer;
  box-shadow: 0 4px 12px rgba(39,174,96,0.3);
  transition: transform 0.1s, box-shadow 0.1s;
  margin-top: 0.5em;
}
.purchase-buy-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(39,174,96,0.4); }
.purchase-buy-btn:active { transform: translateY(0); }
.purchase-buy-btn:disabled { opacity: 0.7; cursor: wait; }
.purchase-secure {
  font-size: 0.7em; color: #4a5c7a; margin-top: 0.6em;
}

/* Success celebration */
.purchase-success { overflow: hidden; }
.purchase-success-icon {
  font-size: 3em; margin-bottom: 0.1em;
  animation: purchase-bounce 0.6s ease-out;
}
.purchase-success-sub {
  font-size: 0.85em; color: #8aa0c2; margin-bottom: 0.2em;
}
.purchase-success-msg {
  font-size: 0.8em; color: #7ec662; font-weight: 600;
}
.purchase-collect-btn {
  background: linear-gradient(135deg, #5b4fa0, #7c6fd6) !important;
  box-shadow: 0 4px 12px rgba(91,79,160,0.4) !important;
  animation: purchase-pulse 1.5s ease-in-out infinite;
}
.purchase-confetti {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
}
.confetti-particle {
  position: absolute; top: -10px; opacity: 0;
  animation: confetti-fall linear forwards;
}
@keyframes confetti-fall {
  0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(400px) rotate(720deg); opacity: 0; }
}
@keyframes purchase-bounce {
  0%   { transform: scale(0.3); opacity: 0; }
  50%  { transform: scale(1.2); }
  70%  { transform: scale(0.9); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes purchase-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}

/* ============================================================
   GAME MODAL — slide-in panels for Shop, Inventory, etc.
   ============================================================ */
.game-modal-overlay {
  position: absolute; inset: 0;
  z-index: 300;
  background: rgba(0,0,0,0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: scene-fade-in 0.2s ease-out;
}
.game-modal {
  position: absolute;
  top: 2%; bottom: 9%;
  left: 50%; transform: translateX(-50%);
  width: 62%;
  display: flex; flex-direction: column;
  background: linear-gradient(165deg, #2a1f14 0%, #1a2418 40%, #1c1a28 100%);
  border: 2px solid rgba(200, 160, 80, 0.35);
  border-radius: 14px;
  overflow: hidden;
  font-family: 'Fredoka', sans-serif;
  animation: modal-slide-up 0.25s ease-out;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.04);
}
@keyframes modal-slide-up {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.game-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.5em 0.8em;
  background: linear-gradient(90deg, rgba(230,168,50,0.12), rgba(200,140,60,0.06));
  border-bottom: 1px solid rgba(230,168,50,0.2);
  flex-shrink: 0;
}
.game-modal-title {
  font-size: 1.1em; font-weight: 700;
  color: #f0c050;
  text-shadow: 0 1px 6px rgba(230,168,50,0.3);
}
.game-modal-close {
  background: none; border: none;
  color: rgba(240,232,208,0.5);
  font-size: 1.3em; cursor: pointer;
  padding: 0.15em 0.4em;
  transition: all 0.15s;
  border-radius: 6px;
}
.game-modal-close:hover { color: #f0c050; background: rgba(230,168,50,0.1); }

/* Modal tabs */
.game-modal-tabs {
  display: flex;
  background: rgba(0,0,0,0.15);
  border-bottom: 1px solid rgba(230,168,50,0.1);
  flex-shrink: 0;
}
.game-modal-tab {
  flex: 1;
  padding: 0.45em 0.3em;
  text-align: center;
  font-size: 0.7em; font-weight: 600;
  color: rgba(240,232,208,0.45);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all 0.15s;
  background: none; border-top: none; border-left: none; border-right: none;
  font-family: 'Fredoka', sans-serif;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.game-modal-tab:hover {
  color: rgba(240,232,208,0.85);
  background: rgba(230,168,50,0.08);
}
.game-modal-tab.active {
  color: #f0c050;
  border-bottom-color: #f0c050;
  background: rgba(230,168,50,0.06);
}
.game-modal-body {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  padding: 8px;
  font-size: 1.25em;
}
.game-modal-body::-webkit-scrollbar { width: 4px; }
.game-modal-body::-webkit-scrollbar-thumb {
  background: rgba(230,168,50,0.25); border-radius: 3px;
}

/* Modal uses larger tiles */
.game-modal-body .panel-grid {
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.5em;
}
.game-modal-body .panel-tile {
  padding: 0.5em 0.3em;
  min-height: 5em;
  gap: 0.15em;
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  border-color: rgba(200,170,100,0.18);
}
.game-modal-body .tile-icon {
  font-size: 2.2em;
}
.game-modal-body .tile-name {
  font-size: 0.85em;
}
.game-modal-body .tile-cost,
.game-modal-body .tile-price {
  font-size: 0.7em;
}
.game-modal-body .tile-count {
  font-size: 0.7em;
}
.game-modal-body .tile-rarity {
  font-size: 0.55em;
}
.game-modal-body .inv-sell-btn {
  font-size: 0.85em;
  padding: 0.5em 0;
}

/* Modal empty state */
.modal-empty {
  display: flex; align-items: center; justify-content: center;
  height: 100%;
  font-size: 0.95em; color: rgba(240,232,208,0.3);
  font-style: italic;
}

/* ============================================================
   REWARD POPUP (Daily Login, Welcome Back, Bonuses)
   ============================================================ */
.reward-popup-modal {
  display: flex; align-items: center; justify-content: center;
}
.reward-popup-content {
  position: relative; z-index: 50;
  display: flex; flex-direction: column; align-items: center;
  padding: 1.2em 1em;
  gap: 0.4em;
  text-align: center;
  width: 100%; height: 100%;
  justify-content: center;
}
.reward-popup-icon {
  font-size: 3em;
  line-height: 1;
  animation: forage-pop 0.5s ease-out;
}
.reward-popup-title {
  font-size: 1.3em; font-weight: 700;
  color: #f0c050;
  text-shadow: 0 1px 6px rgba(230,168,50,0.3);
}
.reward-popup-subtitle {
  font-size: 0.8em;
  color: rgba(240,232,208,0.5);
  margin-bottom: 0.3em;
}
.reward-popup-list {
  display: flex; flex-direction: column; gap: 0.3em;
  width: 100%; max-width: 240px;
}
.reward-popup-row {
  display: flex; align-items: center; gap: 0.5em;
  padding: 0.4em 0.6em;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(160,120,60,0.15);
  border-radius: 8px;
}
.reward-popup-row-icon { font-size: 1.3em; }
.reward-popup-row-label {
  flex: 1; text-align: left;
  font-size: 0.85em; font-weight: 600;
  color: rgba(240,232,208,0.85);
}
.reward-popup-row-amount {
  font-size: 0.95em; font-weight: 800;
}
.reward-popup-btn {
  margin-top: 0.8em;
  padding: 0.5em 2.2em;
  border: none; border-radius: 10px;
  background: linear-gradient(135deg, #7ec662, #4caf50);
  color: #fff;
  font-family: 'Fredoka', sans-serif;
  font-size: 1em; font-weight: 700;
  cursor: pointer;
  box-shadow: 0 3px 8px rgba(0,0,0,0.3);
  transition: transform 0.12s;
}
.reward-popup-btn:active { transform: scale(0.95); }

/* ============================================================
   WEEKEND BONUS BANNER
   ============================================================ */
/* Weekend bonus — floating pill, desktop & mobile (party purple→magenta→pink palette) */
.weekend-banner {
  position: absolute; top: 10px; left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px 6px 12px;
  background: linear-gradient(95deg, #4c1d95 0%, #7e22ce 25%, #c026d3 50%, #ec4899 75%, #7e22ce 100%);
  background-size: 220% 100%;
  background-position: 0% 0%;
  border: 1px solid rgba(244,180,255,0.55);
  border-radius: 999px;
  box-shadow: 0 4px 18px rgba(192,38,211,0.45), 0 0 0 1px rgba(244,180,255,0.15), inset 0 1px 0 rgba(255,255,255,0.28);
  font-family: 'Fredoka', sans-serif;
  font-size: 0.78em;
  color: #fff;
  text-shadow: 0 1px 2px rgba(20,0,40,0.55);
  animation: weekend-slide-in 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), weekend-gradient-shift 6s linear infinite;
  overflow: hidden;
  max-width: calc(100% - 20px);
  white-space: nowrap;
}
.weekend-shimmer {
  position: absolute; top: 0; bottom: 0; left: -40%; width: 40%;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,0.5) 50%, transparent 100%);
  pointer-events: none;
  animation: weekend-shimmer 3.2s ease-in-out infinite;
}
.weekend-label { font-weight: 600; letter-spacing: 0.3px; white-space: nowrap; }
.weekend-label b { font-weight: 800; letter-spacing: 0.5px; }
.weekend-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px;
  background: rgba(30,10,50,0.55);
  border: 1px solid rgba(255,200,235,0.35);
  border-radius: 999px;
  font-weight: 700;
  white-space: nowrap;
}
.weekend-chip .wc-mult { color: #ffe7f7; font-weight: 800; }
.weekend-chip .wc-icon { display: inline-flex; align-items: center; font-size: 1em; }
.weekend-chip .wc-icon img.inline-icon { width: 1.1em; height: 1.1em; }
.weekend-dismiss {
  background: rgba(0,0,0,0.28); border: none;
  color: rgba(255,240,250,0.75);
  width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.85em; cursor: pointer;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.weekend-dismiss:hover { background: rgba(0,0,0,0.55); color: #fff; transform: scale(1.1); }

@keyframes weekend-slide-in {
  from { transform: translate(-50%, -40px); opacity: 0; }
  to   { transform: translate(-50%, 0); opacity: 1; }
}
@keyframes weekend-gradient-shift {
  0%   { background-position: 0% 0%; }
  100% { background-position: 200% 0%; }
}
@keyframes weekend-shimmer {
  0%, 100% { left: -40%; }
  50%      { left: 120%; }
}

@media (max-width: 500px) {
  .weekend-banner { font-size: 0.72em; gap: 5px; padding: 5px 6px 5px 10px; top: 6px; }
  .weekend-label b { display: none; }
  .weekend-chip { padding: 2px 7px; }
}
@media (max-width: 360px) {
  .weekend-banner { top: 4px; gap: 4px; padding: 4px 5px 4px 8px; }
  .weekend-label { font-size: 1.1em; }
}

/* ============================================================
   REFERRAL
   ============================================================ */
.referral-header {
  text-align: center;
  margin-bottom: 0.6em;
}
.referral-header-icon {
  font-size: 2.2em;
  line-height: 1;
}
.referral-header-title {
  font-size: 1.05em; font-weight: 700;
  color: #f0c050;
  margin: 0.15em 0;
}
.referral-header-sub {
  font-size: 0.7em;
  color: rgba(240,232,208,0.45);
}
.referral-card {
  background: rgba(230,168,50,0.08);
  border: 1px solid rgba(230,168,50,0.2);
  border-radius: 10px;
  padding: 0.6em;
  margin-bottom: 0.6em;
}
.referral-card-title {
  font-size: 0.7em; font-weight: 700;
  color: #e6a832;
  text-align: center;
  margin-bottom: 0.4em;
}
.referral-rewards-grid {
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  gap: 2px 0.6em;
  font-size: 0.8em;
}
.referral-col-header {
  color: rgba(240,232,208,0.5);
  font-weight: 700; text-align: center;
}
.referral-row-label {
  color: rgba(240,232,208,0.85);
}
.referral-val {
  text-align: center; font-weight: 700;
  color: rgba(240,232,208,0.9);
}
.referral-note {
  font-size: 0.65em;
  color: rgba(240,232,208,0.4);
  text-align: center;
  margin-top: 0.3em;
}
.referral-link-card {
  background: rgba(44,181,232,0.08);
  border: 1px solid rgba(44,181,232,0.2);
  border-radius: 10px;
  padding: 0.6em;
  margin-bottom: 0.6em;
}
.referral-link-label {
  font-size: 0.7em;
  color: rgba(240,232,208,0.5);
  margin-bottom: 0.3em;
}
.referral-link-row {
  display: flex; gap: 0.3em; align-items: center;
}
.referral-link-input {
  flex: 1;
  padding: 0.4em;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(44,181,232,0.25);
  border-radius: 6px;
  color: #e0ddd4;
  font-size: 0.7em;
  font-family: 'Fredoka', sans-serif;
}
.referral-copy-btn {
  padding: 0.4em 0.7em;
  background: #2cb5e8;
  color: #fff;
  border: none; border-radius: 6px;
  font-weight: 700; cursor: pointer;
  font-size: 0.75em;
  font-family: 'Fredoka', sans-serif;
  white-space: nowrap;
  transition: transform 0.12s;
}
.referral-copy-btn:active { transform: scale(0.95); }
.referral-code-display {
  font-size: 0.6em;
  color: rgba(240,232,208,0.35);
  text-align: center;
  margin-top: 0.2em;
}
.referral-stats {
  display: flex; justify-content: space-between;
  font-size: 0.75em;
  color: rgba(240,232,208,0.5);
  margin-bottom: 0.6em;
  padding: 0 0.2em;
}
.referral-stats strong {
  color: rgba(240,232,208,0.9);
}
.referral-list {
  border-top: 1px solid rgba(160,120,60,0.15);
  padding-top: 0.5em;
  margin-bottom: 0.5em;
}
.referral-list-title {
  font-size: 0.7em;
  color: rgba(240,232,208,0.5);
  margin-bottom: 0.3em;
}
.referral-list-row {
  display: flex; justify-content: space-between;
  padding: 0.25em 0;
  font-size: 0.8em;
  color: rgba(240,232,208,0.85);
}
.referral-status { font-weight: 600; }
.referral-status.status-claimed { color: #7ec662; }
.referral-status.status-ready { color: #e6a832; }
.referral-status.status-pending { color: rgba(240,232,208,0.4); }
.referral-share-label {
  font-size: 0.7em;
  color: rgba(240,232,208,0.5);
  text-align: center;
  margin-bottom: 0.3em;
}
.referral-share-buttons {
  display: flex; gap: 0.3em; justify-content: center; flex-wrap: wrap;
}
.referral-share-btn {
  padding: 0.35em 0.6em;
  color: #fff;
  display: inline-flex; align-items: center; gap: 0.3em;
  border: none; border-radius: 8px;
  font-weight: 700; cursor: pointer;
  font-size: 0.7em;
  font-family: 'Fredoka', sans-serif;
  transition: transform 0.12s;
}
.referral-share-btn:active { transform: scale(0.95); }

/* ============================================================
   AVATAR PICKER
   ============================================================ */
.avatar-section {
  text-align: center;
  margin-bottom: 0.8em;
  padding-bottom: 0.8em;
  border-bottom: 1px solid rgba(160,120,60,0.15);
}
.avatar-current {
  font-size: 3em;
  line-height: 1.2;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
}
.avatar-username {
  font-size: 0.85em;
  font-weight: 700;
  color: rgba(240,232,208,0.8);
  margin: 0.15em 0 0.5em;
}
.avatar-picker-label {
  font-size: 0.65em;
  color: rgba(240,232,208,0.4);
  margin-bottom: 0.4em;
}
.avatar-picker {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  max-width: 260px;
  margin: 0 auto;
}
.avatar-option {
  font-size: 1.5em;
  width: 100%; aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.05);
  border: 2px solid rgba(160,120,60,0.15);
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.2s, background 0.2s;
}
.avatar-option:hover {
  background: rgba(255,255,255,0.1);
  transform: scale(1.12);
}
.avatar-option:active { transform: scale(0.95); }
.avatar-option.selected {
  border-color: #e6a832;
  background: rgba(230,168,50,0.15);
  box-shadow: 0 0 8px rgba(230,168,50,0.3);
}

/* ============================================================
   FEED — Full-screen social view
   ============================================================ */
.fd-overlay {
  position: absolute; inset: 0; z-index: 400;
  background: #f4f1ec;
  display: flex; flex-direction: column;
  font-family: 'Fredoka', sans-serif;
  animation: scene-fade-in 0.2s ease-out;
}
.fd-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.5em 0.8em;
  background: linear-gradient(90deg, #fff8ee, #fef6e8);
  border-bottom: 1px solid #e8dcc8;
  flex-shrink: 0;
}
.fd-back-btn {
  background: none; border: none; color: #7a6e5a;
  font-family: 'Fredoka', sans-serif; font-size: 0.85em;
  cursor: pointer;
}
.fd-title { font-size: 1.1em; font-weight: 700; color: #c8922a; display: flex; align-items: center; gap: 0.4em; }
.fd-logo { height: 2.8em; width: auto; }
.fd-iframe { flex: 1; width: 100%; border: 0; display: block; background: #f4f1ec; min-height: 0; }
/* Bare overlay (no header bar) — iframe fills, ✕ floats top-right. */
.fd-overlay-bare .fd-iframe { width: 100%; height: 100%; flex: 1; }
.fd-close-floating {
  position: absolute;
  top: max(12px, env(safe-area-inset-top, 12px));
  right: max(12px, env(safe-area-inset-right, 12px));
  z-index: 10;
  width: 36px; height: 36px;
  border: none;
  border-radius: 50%;
  background: rgba(20, 24, 18, 0.78);
  color: #f5f0e3;
  font-size: 18px; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.08) inset;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.12s ease, background 0.15s ease;
}
.fd-close-floating:hover { background: rgba(20, 24, 18, 0.92); transform: scale(1.05); }
.fd-close-floating:active { transform: scale(0.94); }
.fd-scroll {
  flex: 1; overflow-y: auto; overflow-x: hidden;
  padding: 0.6em;
  -webkit-overflow-scrolling: touch;
}

/* Trending */
.fd-trending {
  display: flex; gap: 0.4em; overflow-x: auto;
  padding-bottom: 0.5em; margin-bottom: 0.5em;
  scrollbar-width: none;
}
.fd-trending::-webkit-scrollbar { display: none; }
.fd-trending-label {
  font-size: 0.7em; color: #9a8e7a;
  white-space: nowrap; align-self: center;
}
.fd-trending-tag {
  padding: 0.25em 0.5em; border-radius: 12px;
  background: #fff3dc; border: 1px solid #e8d8b4;
  color: #b07d1a; font-size: 0.65em; font-weight: 600;
  font-family: 'Fredoka', sans-serif; cursor: pointer;
  white-space: nowrap; transition: background 0.15s;
}
.fd-trending-tag:hover { background: #ffe9c0; }
.fd-tag-count { color: #b5a88e; margin-left: 2px; }

/* Filter bar */
.fd-filter {
  display: flex; align-items: center; gap: 0.5em;
  padding: 0.4em 0.6em; margin-bottom: 0.5em;
  background: #fff6e6; border: 1px solid #e8d8b4;
  border-radius: 8px; font-size: 0.75em; color: #6a5d48;
}
.fd-filter-clear {
  background: #fde8e6; border: 1px solid #f0b8b2;
  color: #d63c2f; border-radius: 4px; padding: 0.1em 0.4em;
  cursor: pointer; font-size: 0.85em;
}

/* Composer */
.fd-composer {
  display: flex; gap: 0.5em;
  padding: 0.6em; margin-bottom: 0.5em;
  background: #ffffff; border: 1px solid #e0d6c4;
  border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.fd-composer-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: #fff; font-size: 16px; flex-shrink: 0;
}
.fd-composer-body { flex: 1; min-width: 0; }
.fd-cat-pills { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 0.4em; }
.fd-cat-pill {
  padding: 2px 8px; border-radius: 10px;
  background: #f5f0e8; border: 1px solid #e0d6c4;
  color: #9a8e7a; font-size: 0.6em; font-weight: 600;
  font-family: 'Fredoka', sans-serif; cursor: pointer;
  transition: all 0.15s;
}
.fd-cat-pill.active {
  background: #fff3dc; border-color: #d4a84a;
  color: #b07d1a;
}
.fd-input-wrap { position: relative; margin-bottom: 0.3em; }
.fd-input-wrap textarea {
  width: 100%; min-height: 50px; max-height: 150px; resize: vertical;
  padding: 0.5em; background: #faf7f2;
  border: 1px solid #e0d6c4; border-radius: 8px;
  color: #3a3428; font-family: 'Fredoka', sans-serif;
  font-size: 0.8em; outline: none;
}
.fd-input-wrap textarea:focus { border-color: #d4a84a; }
.fd-char-counter {
  position: absolute; bottom: 6px; right: 8px;
  font-size: 0.55em; color: #b5a88e;
}
.fd-char-counter.warn { color: #c8922a; }
.fd-char-counter.danger { color: #d63c2f; }
.fd-media-previews { display: flex; gap: 0.4em; flex-wrap: wrap; }
.fd-preview {
  position: relative; display: inline-flex;
  align-items: center; justify-content: center;
}
.fd-photo-previews { display: flex; gap: 0.4em; flex-wrap: wrap; }
.fd-preview img, .fd-preview video { max-width: 150px; max-height: 100px; border-radius: 8px; object-fit: cover; }
.fd-preview-remove {
  position: absolute; top: -6px; right: -6px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #e74c3c; border: none; color: #fff;
  font-size: 12px; cursor: pointer; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.fd-toolbar {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 0.3em;
}
.fd-tools { display: flex; gap: 0.3em; }
.fd-tool-btn {
  padding: 0.2em 0.4em; background: none;
  border: 1px solid #e0d6c4; border-radius: 6px;
  color: #9a8e7a; font-size: 0.7em;
  font-family: 'Fredoka', sans-serif; cursor: pointer;
}
.fd-tool-btn:hover { background: #f5f0e8; }
.fd-post-btn {
  padding: 0.3em 1em; background: linear-gradient(135deg, #e6a832, #d4804a);
  color: #fff; border: none; border-radius: 8px;
  font-weight: 700; font-size: 0.75em;
  font-family: 'Fredoka', sans-serif; cursor: pointer;
}
.fd-post-btn:disabled { opacity: 0.5; }

/* Pickers */
.fd-picker {
  background: #faf7f2; border: 1px solid #e0d6c4;
  border-radius: 8px; margin-top: 0.4em; padding: 0.4em;
  max-height: 200px; overflow-y: auto;
}
.fd-picker-tabs { display: flex; gap: 2px; margin-bottom: 0.3em; }
.fd-picker-tab {
  padding: 2px 8px; background: none; border: none;
  border-bottom: 2px solid transparent;
  color: #9a8e7a; font-size: 1.1em; cursor: pointer;
}
.fd-picker-tab.active { border-bottom-color: #d4a84a; }
.fd-picker-grid {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px;
}
.fd-picker-grid button {
  background: none; border: none; font-size: 1.2em;
  cursor: pointer; padding: 2px; border-radius: 4px;
}
.fd-picker-grid button:hover { background: #ede6d8; }
.fd-sticker-grid { grid-template-columns: repeat(5, 1fr); }
.fd-sticker-grid button { font-size: 1.8em; }
.fd-gif-picker {
  display: flex; flex-direction: column; gap: 0.3em;
  max-height: 220px !important; overflow: hidden !important;
}
.fd-gif-search {
  padding: 0.3em 0.5em; background: #ffffff;
  border: 1px solid #e0d6c4; border-radius: 6px;
  color: #3a3428; font-family: 'Fredoka', sans-serif;
  font-size: 0.75em; outline: none;
  flex-shrink: 0;
}
.fd-gif-grid {
  display: flex !important;
  flex-wrap: wrap;
  gap: 3px;
  overflow-y: auto;
  max-height: 180px;
}
.fd-gif-grid img {
  height: 60px; width: auto;
  border-radius: 4px; cursor: pointer;
  flex-shrink: 0;
}
.fd-gif-loading { font-size: 0.7em; color: #b5a88e; text-align: center; padding: 1em; }

/* Feed tabs */
.fd-tabs {
  display: flex; gap: 4px; flex-wrap: wrap;
  margin-bottom: 0.5em;
}
.fd-tab {
  padding: 3px 10px; border-radius: 12px;
  background: #f5f0e8; border: 1px solid #e0d6c4;
  color: #9a8e7a; font-size: 0.65em; font-weight: 600;
  font-family: 'Fredoka', sans-serif; cursor: pointer;
  transition: all 0.15s;
}
.fd-tab.active {
  background: #fff3dc; border-color: #d4a84a;
  color: #b07d1a;
}

/* Posts */
.fd-posts { display: flex; flex-direction: column; gap: 0.5em; }
.fd-empty {
  text-align: center; padding: 2em;
  color: #b5a88e; font-size: 0.85em;
}
.fd-post {
  display: flex; gap: 0.5em;
  padding: 0.6em; border-radius: 12px;
  background: #ffffff; border: 1px solid #e0d6c4;
  border-left: 3px solid #ddd4c2;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.fd-post-trading { border-left-color: #4a9fd4; }
.fd-post-looking_for { border-left-color: #b07dd6; }
.fd-post-show_off { border-left-color: #d4a84a; }
.fd-post-discovery { border-left-color: #3ab06a; }
.fd-post-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: #fff; font-size: 14px; flex-shrink: 0;
}
.fd-post-body { flex: 1; min-width: 0; }
.fd-post-header {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  margin-bottom: 0.2em;
}
.fd-post-author { font-size: 0.8em; font-weight: 700; color: #b07d1a; }
.fd-post-level {
  font-size: 0.55em; color: #b07d1a;
  background: #fff3dc; padding: 1px 5px; border-radius: 8px;
}
.fd-post-badge {
  font-size: 0.55em; font-weight: 600; padding: 1px 6px;
  border-radius: 8px;
}
.fd-post-time {
  font-size: 0.55em; color: #b5a88e;
  margin-left: auto;
}
.fd-post-message {
  font-size: 0.8em; color: #4a4238;
  line-height: 1.4; word-break: break-word; white-space: pre-wrap;
  margin-bottom: 0.3em;
}
.fd-hashtag { color: #c8922a; font-weight: 600; cursor: pointer; }
.fd-hashtag:hover { text-decoration: underline; }
.fd-post-gallery {
  display: flex; gap: 4px; margin-top: 0.3em;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
}
.fd-post-gallery .fd-post-photo,
.fd-post-gallery video {
  height: 160px; width: auto; max-width: 80%;
  border-radius: 6px; object-fit: cover;
  cursor: pointer; display: block; flex-shrink: 0;
  scroll-snap-align: start;
}
.fd-post-gallery.fd-gallery-1 .fd-post-photo,
.fd-post-gallery.fd-gallery-1 video {
  height: auto; max-height: 280px; max-width: 100%;
  object-fit: contain;
}
.fd-post-photo, .fd-post-gif {
  max-width: 100%; max-height: 280px; border-radius: 6px;
  cursor: pointer; display: block;
}
.fd-post-sticker { font-size: 3em; margin-top: 0.2em; }
.fd-post-actions {
  display: flex; gap: 0.8em; margin-top: 0.4em;
  padding-top: 0.3em; border-top: 1px solid #ede6d8;
}
.fd-action-btn {
  background: none; border: none;
  color: #b5a88e; font-size: 0.7em;
  font-family: 'Fredoka', sans-serif; cursor: pointer;
}
.fd-action-btn:hover { color: #7a6e5a; }
.fd-action-btn.liked { color: #e85d75; }

/* Comments */
.fd-comments {
  margin-top: 0.4em; padding-top: 0.3em;
  border-top: 1px solid #ede6d8;
}
.fd-no-comments { font-size: 0.65em; color: #b5a88e; padding: 0.3em 0; }
.fd-comment {
  padding: 0.3em 0; font-size: 0.75em;
  border-bottom: 1px solid #f0ebe2;
}
.fd-comment:last-child { border-bottom: none; }
.fd-reply { margin-left: 1.2em; border-left: 2px solid #e0d6c4; padding-left: 0.5em; }
.fd-comment-author { font-weight: 700; color: #b07d1a; }
.fd-comment-level {
  font-size: 0.8em; color: #b07d1a;
  background: #fff3dc; padding: 0 4px; border-radius: 6px;
}
.fd-comment-text { color: #5a5248; }
.fd-comment-time { font-size: 0.8em; color: #b5a88e; }
.fd-comment-meta { display: flex; gap: 0.6em; align-items: center; margin-top: 2px; }
.fd-reply-btn {
  background: none; border: none; color: #b5a88e;
  font-size: 0.8em; cursor: pointer; font-family: 'Fredoka', sans-serif;
}
.fd-reply-btn:hover { color: #c8922a; }
.fd-comment-photo, .fd-comment-gif-img {
  max-width: 200px; max-height: 150px; border-radius: 6px; margin-top: 4px; display: block;
}
.fd-comment-row, .fd-reply-row {
  display: flex; gap: 4px; margin-top: 0.3em; align-items: center;
}
.fd-comment-input {
  flex: 1; padding: 0.3em 0.5em;
  background: #faf7f2; border: 1px solid #e0d6c4;
  border-radius: 6px; color: #3a3428;
  font-family: 'Fredoka', sans-serif; font-size: 0.75em; outline: none;
}
.fd-comment-input:focus { border-color: #d4a84a; }
.fd-comment-gif-btn {
  padding: 0.2em 0.4em; background: none;
  border: 1px solid #e0d6c4; border-radius: 4px;
  color: #b5a88e; font-size: 0.65em;
  font-family: 'Fredoka', sans-serif; cursor: pointer;
}
.fd-comment-send, .fd-reply-send {
  padding: 0.3em 0.6em;
  background: linear-gradient(135deg, #e6a832, #d4804a);
  color: #fff; border: none; border-radius: 6px;
  font-weight: 700; font-size: 0.65em;
  font-family: 'Fredoka', sans-serif; cursor: pointer;
}
.fd-comment-gif-picker {
  margin-top: 0.3em; padding: 0.3em;
  background: #faf7f2; border: 1px solid #e0d6c4;
  border-radius: 6px;
}
.fd-comment-gif-search {
  width: 100%; padding: 0.25em 0.4em; margin-bottom: 0.3em;
  background: #ffffff; border: 1px solid #e0d6c4;
  border-radius: 4px; color: #3a3428;
  font-family: 'Fredoka', sans-serif; font-size: 0.7em; outline: none;
}
.fd-comment-gif-grid {
  display: flex !important;
  flex-wrap: wrap;
  gap: 3px;
  max-height: 120px; overflow-y: auto;
}
.fd-comment-gif-grid img {
  height: 50px; width: auto;
  border-radius: 4px; cursor: pointer;
  flex-shrink: 0;
}
.fd-comment-media-preview, .fd-reply-media-preview {
  display: flex; align-items: center; gap: 0.3em;
  margin: 0.3em 0;
}
.fd-comment-media-preview img, .fd-reply-media-preview img {
  max-height: 50px; border-radius: 4px;
}
.fd-comment-preview-remove, .fd-reply-preview-remove {
  background: none; border: none; color: #c0392b;
  font-size: 0.8em; cursor: pointer; padding: 0.2em;
}

/* Load more */
.fd-load-more {
  width: 100%; padding: 0.5em;
  background: #ffffff; border: 1px solid #e0d6c4;
  border-radius: 8px; color: #9a8e7a;
  font-size: 0.8em; font-weight: 600;
  font-family: 'Fredoka', sans-serif; cursor: pointer;
  margin-top: 0.5em;
}
.fd-load-more:hover { border-color: #d4a84a; color: #b07d1a; }

/* Lightbox */
.fd-lightbox {
  position: absolute; inset: 0; z-index: 500;
  background: rgba(0,0,0,0.85);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.fd-lightbox img { max-width: 95%; max-height: 95%; object-fit: contain; }

/* Feed mobile — large, clear touch targets */
@media (max-width: 768px) {
  .fd-header { padding: 0.6em 0.8em; }
  .fd-back-btn { font-size: 1.1em; padding: 10px 14px; }
  .fd-tab {
    padding: 10px 16px; font-size: 1em;
  }
  .fd-tool-btn {
    padding: 10px 14px; font-size: 1.1em;
    min-height: 44px; min-width: 44px;
  }
  .fd-post-btn {
    padding: 10px 22px; font-size: 1.1em;
    min-height: 44px;
  }
  .fd-post-message { font-size: 1em; line-height: 1.5; }
  .fd-post-author { font-size: 1em; }
  .fd-post-level { font-size: 0.85em; }
  .fd-post-time { font-size: 0.85em; }
  .fd-action-btn {
    font-size: 1.1em;
    padding: 10px 14px;
    min-height: 44px;
  }
  .fd-share-btn, .fd-like-btn, .fd-comment-toggle {
    min-height: 44px; min-width: 48px;
    display: inline-flex; align-items: center; justify-content: center;
    gap: 4px;
  }
  .fd-comment-row, .fd-reply-row {
    gap: 8px;
    flex-wrap: wrap;
  }
  .fd-comment-input, .fd-reply-input {
    padding: 10px 12px; font-size: 1em;
    min-height: 44px;
    flex: 1 1 100%;
  }
  .fd-comment-gif-btn, .fd-comment-media-btn, .fd-reply-media-btn {
    padding: 8px 12px; font-size: 1.1em;
    min-height: 44px; min-width: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .fd-comment-send, .fd-reply-send {
    padding: 10px 20px; font-size: 1em;
    min-height: 44px;
  }
  .fd-reply-btn {
    padding: 8px 14px; font-size: 0.95em;
    min-height: 40px;
  }
  .fd-no-comments { font-size: 0.95em; }
  .fd-comment-author { font-size: 0.95em; }
  .fd-comment-text { font-size: 0.95em; }
  .fd-comment-time { font-size: 0.85em; }
  .fd-load-more {
    padding: 14px; font-size: 1em;
    min-height: 48px;
  }
  .fd-gif-search, .fd-comment-gif-search, .fd-reply-gif-search {
    padding: 10px 12px; font-size: 1em;
    min-height: 44px;
  }
  .fd-picker-grid button { font-size: 1.5em; padding: 6px; }
}

/* ============================================================
   FLOWER SHOP
   ============================================================ */
.fs-rent-bar {
  margin-bottom: 0.6em;
}
.fs-rent-status {
  display: flex; align-items: center; gap: 0.5em;
  padding: 0.5em 0.7em;
  border-radius: 10px;
  font-size: 0.8em;
}
.fs-rent-active {
  background: rgba(126,198,98,0.1);
  border: 1px solid rgba(126,198,98,0.3);
  color: #7ec662;
}
.fs-rent-closed {
  background: rgba(231,76,60,0.1);
  border: 1px solid rgba(231,76,60,0.3);
  color: #e74c3c;
  flex-wrap: wrap;
}
.fs-rent-icon { font-size: 1.2em; }
.fs-rent-text { flex: 1; }
.fs-rent-btn {
  padding: 0.4em 0.8em;
  background: linear-gradient(135deg, #e6a832, #d4804a);
  color: #1a1510;
  border: none; border-radius: 8px;
  font-weight: 700; font-size: 0.85em;
  font-family: 'Fredoka', sans-serif;
  cursor: pointer;
  transition: transform 0.12s;
}
.fs-rent-btn:hover { transform: scale(1.03); }
.fs-rent-btn:active { transform: scale(0.97); }
.fs-rent-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Listings */
.fs-listings {
  display: flex; flex-direction: column; gap: 6px;
}
.fs-listing-row {
  display: flex; align-items: center; gap: 0.6em;
  padding: 0.5em 0.6em;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(160,120,60,0.15);
  border-radius: 8px;
}
.fs-listing-icon { font-size: 1.6em; flex-shrink: 0; }
.fs-listing-info { flex: 1; min-width: 0; }
.fs-listing-name {
  font-size: 0.85em; font-weight: 700;
  color: rgba(240,232,208,0.9);
}
.fs-listing-meta {
  font-size: 0.65em;
  color: rgba(240,232,208,0.45);
  margin-top: 2px;
}
.fs-cancel-btn {
  background: rgba(231,76,60,0.15);
  border: 1px solid rgba(231,76,60,0.3);
  color: #e74c3c;
  border-radius: 6px;
  padding: 0.3em 0.5em;
  font-size: 0.8em;
  cursor: pointer;
  font-family: 'Fredoka', sans-serif;
  transition: transform 0.12s;
}
.fs-cancel-btn:hover { background: rgba(231,76,60,0.25); }

/* Inventory grid */
.fs-inv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4em;
}

/* Sell modal overlay */
.fs-sell-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 9000;
  display: flex; align-items: center; justify-content: center;
}
.fs-sell-panel {
  background: linear-gradient(180deg, rgba(30,22,14,0.98), rgba(14,10,6,0.99));
  border: 1px solid rgba(200,170,100,0.2);
  border-radius: 16px;
  width: 90%; max-width: 360px;
  overflow: hidden;
  animation: modal-slide-up 0.2s ease-out;
}
.fs-sell-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.6em 0.8em;
  background: linear-gradient(90deg, rgba(230,168,50,0.12), rgba(200,140,60,0.06));
  border-bottom: 1px solid rgba(230,168,50,0.2);
  font-weight: 700; color: #f0c050;
  font-size: 0.95em;
}
.fs-sell-close {
  background: none; border: none; color: rgba(240,232,208,0.5);
  font-size: 1.3em; cursor: pointer;
}
.fs-sell-body {
  padding: 0.8em;
  display: flex; flex-direction: column; gap: 0.7em;
}
.fs-buy-hero {
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 0.3em;
  min-height: 110px;
  font-size: 2.5em; line-height: 1;
}
.fs-buy-hero img.fs-buy-hero-img {
  width: auto; height: 110px; max-width: 100%;
  object-fit: contain; image-rendering: -webkit-optimize-contrast;
}
.fs-sell-field label {
  display: block; font-size: 0.7em;
  color: rgba(240,232,208,0.5);
  margin-bottom: 0.3em;
}
.fs-sell-qty-row {
  display: flex; gap: 0.3em; align-items: center;
}
.fs-sell-qty-row input {
  width: 50px; text-align: center;
  padding: 0.35em;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(200,170,100,0.2);
  border-radius: 6px;
  color: #f0e8d0;
  font-family: 'Fredoka', sans-serif;
  font-size: 0.9em;
}
.fs-qty-btn {
  padding: 0.35em 0.6em;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(200,170,100,0.2);
  border-radius: 6px;
  color: #f0e8d0;
  font-family: 'Fredoka', sans-serif;
  cursor: pointer; font-size: 0.85em;
}
.fs-qty-max { font-size: 0.7em; }
.fs-sell-body > .fs-sell-field > input[type="number"] {
  width: 100%; padding: 0.4em;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(200,170,100,0.2);
  border-radius: 6px;
  color: #f0e8d0;
  font-family: 'Fredoka', sans-serif;
  font-size: 0.9em;
}
.fs-sell-dest {
  display: flex; gap: 0.3em;
}
.fs-dest-btn {
  flex: 1;
  padding: 0.4em 0.3em;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(160,120,60,0.2);
  border-radius: 8px;
  color: rgba(240,232,208,0.6);
  font-size: 0.75em; font-weight: 600;
  font-family: 'Fredoka', sans-serif;
  cursor: pointer;
  transition: all 0.15s;
}
.fs-dest-btn.active {
  background: rgba(230,168,50,0.15);
  border-color: rgba(230,168,50,0.4);
  color: #f0c050;
}
.fs-sell-summary {
  text-align: center;
  font-size: 0.85em; font-weight: 700;
  color: #e6a832;
}
.fs-sell-confirm {
  padding: 0.6em;
  background: linear-gradient(135deg, #7ec662, #4caf50);
  color: #fff; border: none;
  border-radius: 10px;
  font-size: 0.95em; font-weight: 700;
  font-family: 'Fredoka', sans-serif;
  cursor: pointer;
  transition: transform 0.12s;
}
.fs-sell-confirm:hover { transform: scale(1.02); }
.fs-sell-confirm:active { transform: scale(0.97); }
.fs-sell-confirm:disabled { opacity: 0.5; cursor: not-allowed; }

/* Browse tab */
.fs-shop-header {
  display: flex; align-items: center; gap: 0.6em;
  padding: 0.5em 0.6em;
  background: rgba(230,168,50,0.08);
  border: 1px solid rgba(230,168,50,0.2);
  border-radius: 10px;
  margin-bottom: 0.6em;
}
.fs-back-btn {
  padding: 0.3em 0.6em;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(200,170,100,0.2);
  border-radius: 6px;
  color: rgba(240,232,208,0.7);
  font-size: 0.7em;
  font-family: 'Fredoka', sans-serif;
  cursor: pointer;
  white-space: nowrap;
}
.fs-shop-info { flex: 1; min-width: 0; }
.fs-shop-name-row {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5em;
}
.fs-shop-name {
  font-size: 0.9em; font-weight: 700;
  color: #f0c050;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fs-follow-btn {
  flex: 0 0 auto;
  padding: 0.3em 0.7em;
  background: linear-gradient(180deg, #4ade80, #22c55e);
  color: #0e1d12;
  border: none;
  border-radius: 999px;
  font-family: 'Fredoka', sans-serif;
  font-size: 0.65em;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(74,222,128,0.3);
  transition: transform 0.12s, box-shadow 0.12s;
  white-space: nowrap;
}
.fs-follow-btn:hover:not(:disabled) { transform: scale(1.05); }
.fs-follow-btn:disabled { opacity: 0.6; cursor: wait; }
.fs-follow-btn.following {
  background: rgba(255,255,255,0.06);
  color: #4ade80;
  border: 1px solid rgba(74,222,128,0.4);
  box-shadow: none;
}
.fs-shop-stats {
  font-size: 0.6em;
  color: rgba(240,232,208,0.5);
  display: flex; gap: 0.6em; flex-wrap: wrap;
  margin-top: 2px;
}
.fs-browse-list {
  display: flex; flex-direction: column; gap: 6px;
}
.fs-browse-row {
  display: flex; align-items: center; gap: 0.5em;
  padding: 0.5em 0.5em;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(160,120,60,0.15);
  border-radius: 8px;
}
.fs-browse-icon { font-size: 1.5em; flex-shrink: 0; }
img.fs-browse-avatar {
  width: 1.5em; height: 1.5em;
  object-fit: contain;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}
.fs-browse-info { flex: 1; min-width: 0; }
.fs-browse-name {
  font-size: 0.8em; font-weight: 700;
  color: rgba(240,232,208,0.9);
}
.fs-browse-meta {
  font-size: 0.6em;
  color: rgba(240,232,208,0.45);
  display: flex; gap: 0.4em; align-items: center;
  margin-top: 2px;
}
.fs-rarity-badge {
  padding: 1px 5px;
  border-radius: 4px;
  color: #fff;
  font-size: 0.9em;
  font-weight: 600;
  text-transform: uppercase;
}
.fs-seller-link {
  color: #5bb8e8;
  cursor: pointer;
  text-decoration: none;
}
.fs-seller-link:hover { text-decoration: underline; }
.fs-browse-right {
  text-align: right;
  flex-shrink: 0;
}
.fs-browse-price {
  font-size: 0.85em; font-weight: 700;
  color: #e6a832;
}
.fs-buy-btn {
  padding: 0.3em 0.7em;
  background: linear-gradient(135deg, #e6a832, #d4804a);
  color: #1a1510;
  border: none; border-radius: 6px;
  font-weight: 700; font-size: 0.7em;
  font-family: 'Fredoka', sans-serif;
  cursor: pointer;
  margin-top: 3px;
}
.fs-buy-btn:hover { transform: scale(1.03); }
.fs-own-label {
  font-size: 0.6em;
  color: rgba(240,232,208,0.3);
}

/* Builder modal overrides for flower shop */
.builder-modal .bm-body .fs-rent-status {
  box-shadow: 0 4px 12px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06);
}
.builder-modal .bm-body .fs-listing-row {
  background: rgba(0,0,0,0.2);
  border: 1.5px solid rgba(200,170,100,0.35);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.6), 0 8px 24px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.06);
}
.builder-modal .bm-body .fs-listing-icon {
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.7));
}
.builder-modal .bm-body .fs-listing-name,
.builder-modal .bm-body .fs-browse-name {
  text-shadow: 0 2px 6px rgba(0,0,0,0.7), 0 1px 2px rgba(0,0,0,0.5);
}
.builder-modal .bm-body .fs-browse-row {
  background: rgba(0,0,0,0.2);
  border: 1.5px solid rgba(200,170,100,0.35);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.6), 0 8px 24px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.06);
}
.builder-modal .bm-body .fs-browse-icon {
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.7));
}
.builder-modal .bm-body .fs-shop-header {
  box-shadow: 0 4px 12px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06);
}

/* ============================================================
   NOTIFICATIONS
   ============================================================ */
.notif-list {
  display: flex; flex-direction: column; gap: 6px;
}
.notif-row {
  display: flex; align-items: flex-start; gap: 0.6em;
  padding: 0.5em 0.6em;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(160,120,60,0.15);
  border-radius: 8px;
  transition: background 0.15s;
}
.notif-row.notif-unread {
  background: rgba(230,168,50,0.08);
  border-color: rgba(230,168,50,0.25);
}
.notif-icon {
  font-size: 1.6em;
  line-height: 1;
  flex-shrink: 0;
}
.notif-content { flex: 1; min-width: 0; }
.notif-subject {
  font-size: 0.85em; font-weight: 700;
  color: rgba(240,232,208,0.9);
}
.notif-body {
  font-size: 0.7em;
  color: rgba(240,232,208,0.5);
  margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.notif-time {
  font-size: 0.6em;
  color: rgba(240,232,208,0.3);
  margin-top: 3px;
}

/* ============================================================
   ONBOARDING — spotlight backdrop + floating tooltip card + arrow.
   Two card modes: `.onb-card-center` (concept steps, full modal)
   and `.onb-card-tooltip` (target steps, attached to a highlighted element).
   ============================================================ */
.onb-backdrop {
  position: fixed; inset: 0;
  background: rgba(8,4,16,0.55);
  z-index: 9998;
  animation: onbFadeIn 0.25s ease;
}
.onb-backdrop-solid { background: rgba(8,4,16,0.72); }
.onb-backdrop-passthrough { pointer-events: none; background: transparent; }
@keyframes onbFadeIn { from { opacity: 0; } to { opacity: 1; } }
.onb-spotlight {
  position: fixed;
  z-index: 9999;
  border-radius: 12px;
  pointer-events: none;
  box-shadow:
    0 0 0 9999px rgba(8,4,16,0.72),
    inset 0 0 0 2px rgba(230,168,50,0.9),
    0 0 18px rgba(230,168,50,0.35);
  animation: onbSpotlightPulse 1.8s ease-in-out infinite;
  transition: top 0.25s, left 0.25s, width 0.25s, height 0.25s;
}
@keyframes onbSpotlightPulse {
  0%, 100% { outline: 3px solid rgba(230,168,50,0.0); outline-offset: 4px; }
  50%      { outline: 3px solid rgba(230,168,50,0.7); outline-offset: 10px; }
}
/* Bouncing pointer — replaces the cutout spotlight for gated steps. */
.onb-pointer {
  position: fixed;
  z-index: 9998; /* below toast (9999) so toast wins on overlap */
  font-size: 64px;
  line-height: 1;
  pointer-events: none;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.55));
  animation: onbPointerBounce 1.0s ease-in-out infinite;
  transition: top 0.25s, left 0.25s;
  will-change: transform;
}
@keyframes onbPointerBounce {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, -14px); }
}

/* Hide onboarding when transient UI competes for the same attention slot:
   toasts (animate at center) and pickers/modals (full-screen overlays).
   We DO NOT hide for plant-detail-panel or plant-card-overlay — those are
   exactly where the next action button lives, and the pointer is
   re-targeted to that button by JS. */
body:has(.action-toast) .onb-pointer,
body:has(.action-toast) .onb-card-banner,
body:has(.action-toast) .onb-card-tooltip,
body:has(.action-toast) .onb-backdrop,
body:has(.soil-picker) .onb-pointer,
body:has(.soil-picker) .onb-card-banner,
body:has(.seed-picker-overlay) .onb-pointer,
body:has(.seed-picker-overlay) .onb-card-banner,
body:has(.game-modal-overlay) .onb-pointer,
body:has(.game-modal-overlay) .onb-card-banner {
  visibility: hidden;
}
.onb-card {
  position: fixed;
  z-index: 10000;
  box-sizing: border-box;
  background: linear-gradient(180deg, #23202f 0%, #1a1623 100%);
  border: 1px solid rgba(230,168,50,0.35);
  border-radius: 14px;
  padding: 18px 20px 16px;
  color: #f0e8d0;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.03);
  animation: onbCardIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes onbCardIn {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}
.onb-card-center {
  left: 50%; top: 50%;
  bottom: auto; right: auto;
  transform: translate(-50%, -50%);
  width: min(90vw, 380px);
  max-height: 90vh;
  overflow-y: auto;
  text-align: center;
  padding: 22px 22px 18px;
}
.onb-card-center.onboarding-tip,
.onb-card-tooltip { width: min(92vw, 320px); }
.onb-card-tooltip { text-align: left; }

/* Banner mode — gated steps. Pinned to bottom of viewport so it never
   overlaps the spotlighted work area. */
.onb-card-banner {
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom, 0px));
  top: auto;
  transform: translateX(-50%);
  width: min(92vw, 380px);
  max-height: 40vh;
  overflow-y: auto;
  text-align: center;
  padding: 14px 18px 12px;
}
.onb-card-banner .onb-arrow { display: none; }

.onb-progress {
  display: flex; justify-content: center; gap: 5px;
  margin-bottom: 12px;
}
.onb-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(240,232,208,0.18);
  transition: background 0.2s, transform 0.2s;
}
.onb-dot.done { background: rgba(100,180,120,0.55); }
.onb-dot.active { background: #e6a832; transform: scale(1.45); box-shadow: 0 0 8px rgba(230,168,50,0.6); }

.onb-emoji {
  font-size: 44px; line-height: 1;
  margin-bottom: 8px;
  text-align: center;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.4));
  animation: onbEmojiPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.onb-card-center .onb-emoji { font-size: 52px; margin-bottom: 10px; }
@keyframes onbEmojiPop {
  0%   { transform: scale(0.5) rotate(-10deg); opacity: 0; }
  100% { transform: scale(1)   rotate(0);      opacity: 1; }
}
.onb-title {
  font-size: 17px; font-weight: 800;
  color: #f0e8d0;
  margin-bottom: 7px;
  text-align: center;
  letter-spacing: 0.3px;
}
.onb-card-center .onb-title { font-size: 18px; margin-bottom: 8px; }
.onb-body {
  font-size: 13px; line-height: 1.55;
  color: rgba(240,232,208,0.86);
  margin-bottom: 14px;
  padding: 0 4px;
}
.onb-card-center .onb-body { margin-bottom: 18px; padding: 0 6px; text-align: center; }
.onb-body b { color: #e6a832; font-weight: 700; }
.onb-actions {
  display: flex; justify-content: center; gap: 8px;
  flex-wrap: wrap;
}
.onb-btn-primary, .onb-btn-secondary, .onb-btn-skip {
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 12px; font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.1s, background 0.15s, filter 0.15s, border-color 0.15s;
}
.onb-card-center .onb-btn-primary,
.onb-card-center .onb-btn-secondary,
.onb-card-center .onb-btn-skip { padding: 9px 16px; font-size: 13px; }
.onb-btn-primary {
  background: linear-gradient(135deg, #e6a832, #c78a1e);
  color: #2a1e08;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.35);
}
.onb-btn-primary:hover  { transform: translateY(-1px); filter: brightness(1.08); }
.onb-btn-primary:active { transform: translateY(1px); }
.onb-btn-secondary {
  background: rgba(255,255,255,0.08);
  color: rgba(240,232,208,0.82);
  border-color: rgba(255,255,255,0.12);
}
.onb-btn-secondary:hover { background: rgba(255,255,255,0.14); }
.onb-btn-skip {
  background: transparent;
  color: rgba(240,232,208,0.42);
  border-color: transparent;
}
.onb-btn-skip:hover { color: rgba(240,232,208,0.75); }

/* Tip — shown via .game-modal shell, reuses .onb-card-center sizing */
.onb-tip-tag {
  display: inline-block;
  font-size: 10px; font-weight: 800;
  letter-spacing: 2px;
  color: #2a1e08;
  background: linear-gradient(135deg, #f0c050, #e6a832);
  padding: 3px 10px; border-radius: 12px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.onboarding-tip .onb-emoji { font-size: 44px; }

/* Gated step — waiting indicator + success flash */
.onb-wait {
  display: flex; align-items: center; justify-content: center;
  gap: 5px;
  margin: -4px 0 12px;
  font-size: 11px; letter-spacing: 0.5px;
  color: rgba(240,232,208,0.55);
}
.onb-wait-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(230,168,50,0.75);
  animation: onbWaitBounce 1.1s infinite ease-in-out;
}
.onb-wait-dot:nth-child(2) { animation-delay: 0.15s; }
.onb-wait-dot:nth-child(3) { animation-delay: 0.3s; }
.onb-wait-label { margin-left: 4px; }
@keyframes onbWaitBounce {
  0%, 80%, 100% { transform: translateY(0); opacity: 0.5; }
  40%           { transform: translateY(-4px); opacity: 1; }
}
.onb-card-success {
  border-color: rgba(100,200,120,0.75);
  box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 0 2px rgba(100,200,120,0.35);
  animation: onbCardSuccess 0.6s ease;
}
@keyframes onbCardSuccess {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}

/* Pulse halo on pot-detail action buttons the first time they appear */
.onb-action-pulse {
  position: relative;
  animation: onbActionPulse 1.4s ease-out infinite;
  outline: 2px solid rgba(230,168,50,0.8);
  outline-offset: 3px;
  border-radius: inherit;
}
@keyframes onbActionPulse {
  0%   { box-shadow: 0 0 0 0   rgba(230,168,50,0.75); }
  70%  { box-shadow: 0 0 0 12px rgba(230,168,50,0); }
  100% { box-shadow: 0 0 0 0   rgba(230,168,50,0); }
}

/* Arrow pointing from tooltip toward the highlighted target */
.onb-arrow {
  position: absolute;
  width: 0; height: 0;
  border: 10px solid transparent;
}
.onb-card.onb-side-below  .onb-arrow {
  top: -20px; transform: translateX(-10px);
  border-bottom-color: rgba(230,168,50,0.55);
  filter: drop-shadow(0 -1px 0 rgba(0,0,0,0.35));
}
.onb-card.onb-side-above  .onb-arrow {
  bottom: -20px; transform: translateX(-10px);
  border-top-color: rgba(230,168,50,0.55);
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.35));
}
.onb-card.onb-side-right  .onb-arrow {
  left: -20px; transform: translateY(-10px);
  border-right-color: rgba(230,168,50,0.55);
  filter: drop-shadow(-1px 0 0 rgba(0,0,0,0.35));
}
.onb-card.onb-side-left   .onb-arrow {
  right: -20px; transform: translateY(-10px);
  border-left-color: rgba(230,168,50,0.55);
  filter: drop-shadow(1px 0 0 rgba(0,0,0,0.35));
}

/* News feed — social-style post cards with header, photo, body */
.news-feed {
  display: flex; flex-direction: column; gap: 10px;
}
.news-post {
  position: relative;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border: 1px solid rgba(160,120,60,0.18);
  border-top: 2px solid var(--news-accent, #e6a832);
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.15s;
}
a.news-post-linked { text-decoration: none; color: inherit; cursor: pointer; }
.news-post:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.news-post-head {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 11px 7px;
}
.news-avatar {
  width: 34px; height: 34px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25em;
  background: color-mix(in srgb, var(--news-accent, #e6a832) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--news-accent, #e6a832) 38%, transparent);
  border-radius: 50%;
  line-height: 1;
}
.news-head-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.news-head-user {
  font-size: 0.78em; font-weight: 700;
  color: rgba(240,232,208,0.92);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.news-head-meta {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.62em;
  color: rgba(240,232,208,0.45);
}
.news-chip {
  font-size: 0.95em; font-weight: 700;
  letter-spacing: 0.6px; text-transform: uppercase;
  padding: 2px 7px; border-radius: 10px;
  line-height: 1.2;
}
.news-head-time { flex-shrink: 0; }
.news-post-photo {
  width: 100%;
  height: 170px;
  background: #fbf6e9;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  box-sizing: border-box;
  overflow: hidden;
}
.news-post-photo img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}
.news-post-body {
  padding: 8px 12px 11px;
  font-size: 0.75em; line-height: 1.45;
  color: rgba(240,232,208,0.86);
}
.news-new-badge {
  position: absolute; top: 8px; right: 8px;
  font-size: 0.55em; font-weight: 800;
  letter-spacing: 1px;
  color: #fff;
  background: #e74c3c;
  padding: 2px 6px; border-radius: 4px;
  z-index: 2;
  box-shadow: 0 0 0 0 rgba(231,76,60,0.6);
  animation: newsPulse 1.6s infinite;
}

/* Discovery fallback — procedural artwork when no photo is uploaded */
.news-discovery-fallback {
  position: relative;
  height: 170px;
  padding: 0;
  background:
    radial-gradient(ellipse at 30% 30%, color-mix(in srgb, var(--acc, #a855f7) 55%, transparent), transparent 60%),
    radial-gradient(ellipse at 75% 75%, color-mix(in srgb, var(--acc, #a855f7) 35%, transparent), transparent 65%),
    linear-gradient(135deg, #1a1133 0%, #261647 55%, #0d0824 100%);
  overflow: hidden;
}
.news-discovery-fallback::before {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    115deg,
    transparent 0 28px,
    rgba(255,255,255,0.03) 28px 29px
  );
  pointer-events: none;
}
.news-discovery-fallback::after {
  content: '';
  position: absolute;
  top: -30%; left: -30%;
  width: 60%; height: 160%;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.12) 50%, transparent 60%);
  animation: ndfShimmer 4.5s ease-in-out infinite;
  pointer-events: none;
}
.ndf-orb {
  position: absolute;
  left: 50%; top: 50%;
  width: 90px; height: 90px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--acc, #a855f7) 85%, white 15%) 0%, color-mix(in srgb, var(--acc, #a855f7) 25%, transparent) 55%, transparent 70%);
  filter: blur(2px);
  animation: ndfPulse 2.8s ease-in-out infinite;
}
.ndf-dna {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-size: 48px;
  line-height: 1;
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--acc, #a855f7) 60%, transparent)) drop-shadow(0 2px 3px rgba(0,0,0,0.45));
  animation: ndfFloat 3.4s ease-in-out infinite;
}
.ndf-petal {
  position: absolute;
  font-size: 16px;
  opacity: 0.75;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4));
  animation: ndfOrbit 6s linear infinite;
}
.ndf-petal-1 { top: 22%;  left: 18%; animation-delay: 0s;    }
.ndf-petal-2 { top: 68%;  left: 22%; animation-delay: -1.5s; font-size: 18px; }
.ndf-petal-3 { top: 26%;  left: 78%; animation-delay: -3s;   font-size: 14px; }
.ndf-petal-4 { top: 72%;  left: 76%; animation-delay: -4.5s; font-size: 17px; }
.ndf-label {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  font-size: 9px; font-weight: 800;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  background: rgba(0,0,0,0.38);
  padding: 3px 9px;
  border-radius: 10px;
  backdrop-filter: blur(4px);
  border: 1px solid color-mix(in srgb, var(--acc, #a855f7) 50%, transparent);
}
@keyframes ndfShimmer {
  0%   { transform: translateX(-20%); }
  50%  { transform: translateX(180%); }
  100% { transform: translateX(180%); }
}
@keyframes ndfPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1);    opacity: 0.75; }
  50%      { transform: translate(-50%, -50%) scale(1.12); opacity: 1;    }
}
@keyframes ndfFloat {
  0%, 100% { transform: translate(-50%, -50%) rotate(-3deg); }
  50%      { transform: translate(-50%, -54%) rotate(3deg);  }
}
@keyframes ndfOrbit {
  0%   { transform: translateY(0)     rotate(0deg);   opacity: 0.45; }
  25%  { opacity: 0.9; }
  50%  { transform: translateY(-8px)  rotate(180deg); opacity: 0.75; }
  75%  { opacity: 0.9; }
  100% { transform: translateY(0)     rotate(360deg); opacity: 0.45; }
}
@keyframes newsPulse {
  0%   { box-shadow: 0 0 0 0 rgba(231,76,60,0.6); }
  70%  { box-shadow: 0 0 0 8px rgba(231,76,60,0); }
  100% { box-shadow: 0 0 0 0 rgba(231,76,60,0); }
}

/* Notification floating badge */
.notif-badge-float {
  position: absolute;
  bottom: -4px; right: -4px;
  min-width: 18px; height: 18px;
  background: #e74c3c;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  font-family: 'Fredoka', sans-serif;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
  box-shadow: 0 2px 6px rgba(231,76,60,0.5);
  z-index: 100;
  pointer-events: none;
  line-height: 1;
}

/* Builder modal overrides for notifications */
.builder-modal .bm-body .notif-row {
  background: rgba(0,0,0,0.2);
  border: 1.5px solid rgba(200,170,100,0.35);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.6), 0 8px 24px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.06);
}
.builder-modal .bm-body .notif-row.notif-unread {
  background: rgba(230,168,50,0.1);
  border-color: rgba(230,168,50,0.4);
}
.builder-modal .bm-body .notif-icon {
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.7));
}
.builder-modal .bm-body .notif-subject {
  text-shadow: 0 2px 6px rgba(0,0,0,0.7), 0 1px 2px rgba(0,0,0,0.5);
}

/* ============================================================
   SETTINGS
   ============================================================ */
.settings-list {
  display: flex; flex-direction: column; gap: 6px;
}
.setting-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.5em 0.6em;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(160,120,60,0.15);
  border-radius: 8px;
}
.setting-info { flex: 1; }
.setting-name {
  font-size: 0.95em; font-weight: 600;
  color: rgba(240,232,208,0.9);
}
.setting-desc {
  font-size: 0.7em;
  color: rgba(240,232,208,0.4);
  margin-top: 2px;
}
.setting-toggle {
  padding: 0.3em 0.8em;
  border: 1px solid rgba(160,120,60,0.3);
  border-radius: 6px;
  background: rgba(0,0,0,0.3);
  color: rgba(240,232,208,0.5);
  font-size: 0.8em; font-weight: 600;
  cursor: pointer;
  font-family: 'Fredoka', sans-serif;
  transition: all 0.15s;
}
.setting-toggle.toggle-on {
  background: rgba(126,198,98,0.25);
  border-color: rgba(126,198,98,0.5);
  color: #7ec662;
}
.settings-invite-btn {
  display: block;
  width: 100%;
  margin-top: 0.6em;
  padding: 0.6em;
  border: 1px solid rgba(44,181,232,0.3);
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(44,181,232,0.15), rgba(44,181,232,0.05));
  color: #5bb8e8;
  font-family: 'Fredoka', sans-serif;
  font-size: 0.95em; font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}
.settings-invite-btn:hover {
  background: linear-gradient(135deg, rgba(44,181,232,0.25), rgba(44,181,232,0.1));
  border-color: rgba(44,181,232,0.5);
}
.settings-invite-btn:active { transform: scale(0.97); }
.codex-header {
  font-size: 0.85em;
  color: rgba(240,232,208,0.6);
  margin-bottom: 0.5em;
  text-align: center;
}
.codex-header strong { color: #e6a832; }

/* ============================================================
   ACHIEVEMENTS
   ============================================================ */
.ach-summary {
  text-align: center;
  font-size: 0.8em;
  color: rgba(240,232,208,0.5);
  margin-bottom: 0.5em;
}
.ach-list { display: flex; flex-direction: column; gap: 5px; }
.ach-card {
  display: flex; align-items: center; gap: 0.5em;
  padding: 0.45em 0.5em;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(160,120,60,0.15);
  border-radius: 8px;
}
.ach-card.done {
  border-color: rgba(126,198,98,0.3);
  background: rgba(126,198,98,0.04);
}
.ach-icon { font-size: 1.6em; flex-shrink: 0; }
.ach-info { flex: 1; min-width: 0; }
.ach-name { font-size: 0.8em; font-weight: 600; color: rgba(240,232,208,0.85); }
.ach-desc { font-size: 0.65em; color: rgba(240,232,208,0.35); margin-top: 1px; }
.ach-reward {
  font-size: 0.65em; font-weight: 600;
  color: #e6a832;
  flex-shrink: 0;
  text-align: right;
}
.ach-card.done .ach-reward { color: #7ec662; font-size: 0.85em; }

/* ============================================================
   SEASON PASS
   ============================================================ */
.bp-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 0.5em;
}
.bp-season-name { font-size: 0.9em; font-weight: 700; color: #e6a832; }
.bp-season-dates { font-size: 0.6em; color: rgba(240,232,208,0.35); margin-top: 1px; }
.bp-days-left {
  font-size: 0.7em; font-weight: 700;
  color: rgba(240,232,208,0.5);
  background: rgba(255,255,255,0.04);
  padding: 0.3em 0.5em;
  border-radius: 6px;
}
.bp-progress { margin-bottom: 0.5em; }
.bp-progress-top {
  display: flex; justify-content: space-between;
  font-size: 0.65em; color: rgba(240,232,208,0.5);
  margin-bottom: 3px;
}
.bp-progress-top strong { color: #e6a832; }
.bp-progress-bar {
  height: 6px; border-radius: 3px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
}
.bp-progress-fill {
  height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, #2cb5e8, #e6a832);
  transition: width 0.3s;
}

/* Tasks */
.bp-tasks {
  margin-bottom: 0.5em;
  padding: 0.4em;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(160,120,60,0.1);
  border-radius: 8px;
}
.bp-tasks-header {
  display: flex; justify-content: space-between;
  font-size: 0.7em; font-weight: 700; color: #e6a832;
  margin-bottom: 0.3em;
}
.bp-tasks-count { font-weight: 400; color: rgba(240,232,208,0.4); }
.bp-task {
  display: flex; align-items: center; gap: 0.4em;
  padding: 0.35em 0.4em;
  margin-bottom: 3px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(160,120,60,0.08);
  border-radius: 6px;
}
.bp-task.done { border-color: rgba(126,198,98,0.2); }
.bp-task-info { flex: 1; }
.bp-task-label { font-size: 0.65em; color: rgba(240,232,208,0.7); }
.bp-task.done .bp-task-label { text-decoration: line-through; color: #7ec662; }
.bp-task-prog { color: rgba(240,232,208,0.35); }
.bp-task-bar {
  height: 4px; border-radius: 2px;
  background: rgba(255,255,255,0.04);
  margin-top: 2px;
}
.bp-task-fill { height: 100%; border-radius: 2px; transition: width 0.3s; }
.bp-task-reward { flex-shrink: 0; text-align: right; }
.bp-task-claimed { font-size: 0.6em; color: #7ec662; }
.bp-task-sxp { font-size: 0.6em; color: rgba(240,232,208,0.35); }
.bp-task-claim-btn {
  font-size: 0.6em; font-weight: 700;
  padding: 3px 8px;
  background: #e6a832; color: rgba(20,14,8,0.95);
  border: none; border-radius: 4px;
  cursor: pointer;
  font-family: 'Fredoka', sans-serif;
}

/* Track */
.bp-track-labels {
  display: flex; justify-content: space-between;
  font-size: 0.6em; color: rgba(240,232,208,0.3);
  padding: 0 0.3em;
  margin-bottom: 0.3em;
}
.bp-track { display: flex; flex-direction: column; align-items: center; }
.bp-level-row {
  display: flex; align-items: center; gap: 0.3em;
  width: 100%;
}
.bp-reward-card {
  flex: 1;
  display: flex; align-items: center; gap: 0.3em;
  padding: 0.35em 0.4em;
  border-radius: 7px;
  border: 1px solid rgba(160,120,60,0.15);
  background: rgba(255,255,255,0.03);
  cursor: default;
  transition: all 0.15s;
}
.bp-reward-card.claimable {
  border-color: rgba(126,198,98,0.5);
  background: rgba(126,198,98,0.08);
  cursor: pointer;
}
.bp-reward-card.claimable:hover { background: rgba(126,198,98,0.15); }
.bp-reward-card.claimed { opacity: 0.4; }
.bp-reward-card.locked { opacity: 0.35; }
.bp-reward-card.locked-premium {
  opacity: 0.3;
  border-color: rgba(168,85,247,0.2);
}
.bp-reward-card-empty { flex: 1; }
.bp-r-icon { font-size: 1.3em; }
.bp-r-text { font-size: 0.6em; color: rgba(240,232,208,0.7); font-weight: 600; }
.bp-level-pill {
  width: 1.8em; height: 1.8em;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 0.6em; font-weight: 700;
  background: rgba(255,255,255,0.06);
  color: rgba(240,232,208,0.3);
  flex-shrink: 0;
}
.bp-level-pill.done { background: rgba(126,198,98,0.2); color: #7ec662; }
.bp-level-pill.active { background: rgba(230,168,50,0.25); color: #e6a832; box-shadow: 0 0 6px rgba(230,168,50,0.3); }
.bp-row-connector {
  display: flex; justify-content: center;
  height: 8px;
}
.bp-connector-line {
  width: 2px; height: 100%;
  background: rgba(255,255,255,0.06);
}
.bp-connector-line.done { background: rgba(126,198,98,0.3); }

/* Premium CTA */
.bp-premium-cta {
  margin-top: 0.5em;
  padding: 0.4em;
  text-align: center;
  border-top: 1px solid rgba(160,120,60,0.1);
}
.bp-cta-text { font-size: 0.65em; color: rgba(240,232,208,0.4); margin-bottom: 0.3em; }
.bp-premium-btn {
  padding: 0.35em 1em;
  border: 1px solid rgba(168,85,247,0.5);
  border-radius: 6px;
  background: rgba(168,85,247,0.15);
  color: #a855f7;
  font-size: 0.7em; font-weight: 700;
  cursor: pointer;
  font-family: 'Fredoka', sans-serif;
  transition: all 0.15s;
}
.bp-premium-btn:hover { background: rgba(168,85,247,0.25); }

/* ============================================================
   ACTIVITIES — Wheel & Mystery
   ============================================================ */
.wheel-wrap {
  display: flex; justify-content: center;
  margin-bottom: 0.5em;
}
.wheel-wrap canvas { max-width: 100%; height: auto; }
.wheel-spin-area {
  text-align: center;
  margin-bottom: 0.5em;
}
.wheel-spin-btn {
  padding: 0.5em 1.5em;
  border: 2px solid rgba(230,168,50,0.5);
  border-radius: 8px;
  background: rgba(230,168,50,0.15);
  color: #e6a832;
  font-size: 0.75em; font-weight: 700;
  cursor: pointer;
  font-family: 'Fredoka', sans-serif;
  transition: all 0.15s;
}
.wheel-spin-btn.free {
  border-color: rgba(126,198,98,0.5);
  background: rgba(126,198,98,0.15);
  color: #7ec662;
}
.wheel-spin-btn:hover { transform: scale(1.05); }
.wheel-spin-btn:disabled { opacity: 0.5; cursor: default; transform: none; }
.wheel-info {
  font-size: 0.5em;
  color: rgba(240,232,208,0.35);
  margin-top: 4px;
}
.wheel-jackpot-info {
  text-align: center;
  padding: 0.4em;
  background: rgba(255,45,85,0.06);
  border: 1px solid rgba(255,45,85,0.2);
  border-radius: 8px;
  margin-bottom: 0.5em;
}
.wheel-jackpot-title {
  font-size: 0.5em; font-weight: 700;
  color: #ff2d55;
  margin-bottom: 2px;
}
.wheel-jackpot-list {
  font-size: 0.5em;
  color: rgba(240,232,208,0.5);
  line-height: 1.6;
}
.wheel-jackpot-list strong { color: rgba(240,232,208,0.7); }
.wheel-history {
  border-top: 1px solid rgba(160,120,60,0.15);
  padding-top: 0.4em;
}
.wheel-history-title {
  font-size: 0.5em;
  color: rgba(240,232,208,0.3);
  margin-bottom: 4px;
}
.wheel-history-row {
  display: flex; justify-content: space-between;
  font-size: 0.5em;
  color: rgba(240,232,208,0.45);
  padding: 2px 0;
}

/* Mystery */
.mystery-header { text-align: center; margin-bottom: 0.6em; }
.mystery-badge {
  font-size: 0.45em; font-weight: 700;
  color: #c0392b;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.mystery-icon { font-size: 1.8em; margin: 4px 0; }
.mystery-title {
  font-size: 0.65em; font-weight: 600;
  color: #e6a832;
}
.mystery-target {
  font-size: 0.8em; font-weight: 700;
  color: rgba(240,232,208,0.9);
  margin-top: 2px;
}
.mystery-section-label {
  font-size: 0.5em;
  color: rgba(240,232,208,0.4);
  margin-bottom: 4px;
}
.mystery-dna-bar { margin-bottom: 0.6em; }
.mystery-dna-row {
  display: flex; gap: 5px; justify-content: center;
}
.mystery-dna-chip {
  text-align: center;
  padding: 0.4em 0.3em;
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(160,120,60,0.2);
  flex: 1; max-width: 6em;
}
.mystery-dna-chip.market {
  background: rgba(44,181,232,0.06);
  border-color: rgba(44,181,232,0.3);
}
.mystery-dna-icon { font-size: 1.3em; }
.mystery-dna-name { font-size: 0.5em; font-weight: 700; color: rgba(240,232,208,0.8); margin-top: 2px; }
.mystery-dna-pct { font-size: 0.45em; color: rgba(240,232,208,0.4); }
.mystery-dna-market {
  font-size: 0.4em; font-weight: 700;
  color: #2cb5e8;
  background: rgba(44,181,232,0.12);
  padding: 1px 4px; border-radius: 3px;
  margin-top: 2px;
}
.mystery-dna-shop { font-size: 0.4em; color: #27ae60; margin-top: 2px; }
.mystery-complete {
  text-align: center;
  padding: 0.8em;
  background: rgba(39,174,96,0.08);
  border: 1px solid rgba(39,174,96,0.25);
  border-radius: 10px;
  margin-bottom: 0.5em;
}
.mystery-complete-title { font-size: 0.7em; font-weight: 700; color: #27ae60; }
.mystery-complete-sub { font-size: 0.5em; color: rgba(240,232,208,0.4); margin-top: 3px; }
.mystery-steps { margin-bottom: 0.5em; }
.mystery-step {
  display: flex; align-items: center; gap: 0.4em;
  padding: 0.4em;
  margin-bottom: 4px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(160,120,60,0.12);
  border-radius: 8px;
}
.mystery-step-num {
  width: 1.4em; height: 1.4em;
  border-radius: 50%;
  background: #e6a832;
  color: rgba(20,14,8,0.95);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.55em;
  flex-shrink: 0;
}
.mystery-step-body { flex: 1; }
.mystery-step-text { font-size: 0.5em; color: rgba(240,232,208,0.7); }
.mystery-step-text strong { color: rgba(240,232,208,0.9); }
.mystery-step-result { font-size: 0.45em; color: rgba(240,232,208,0.35); margin-top: 1px; }
.mystery-step-market {
  font-size: 0.8em;
  background: rgba(44,181,232,0.12);
  padding: 0 3px; border-radius: 3px;
}
.mystery-reward {
  text-align: center;
  padding: 0.4em;
  background: rgba(230,168,50,0.06);
  border: 1px solid rgba(230,168,50,0.12);
  border-radius: 8px;
  margin-bottom: 0.5em;
}
.mystery-reward-row {
  display: flex; justify-content: center; gap: 0.8em;
  font-size: 0.6em;
  color: rgba(240,232,208,0.7);
  margin-top: 3px;
}
.mystery-community {
  text-align: center;
  font-size: 0.5em;
  color: rgba(240,232,208,0.25);
  padding-top: 0.4em;
  border-top: 1px solid rgba(160,120,60,0.1);
}

/* ============================================================
   ORDERS & CRATES
   ============================================================ */
/* Orders progress + refresh use .panel-tile shell; just layout glue below */

/* Crate cards - Figma style */
.game-modal-body .panel-grid .panel-tile[data-crate-idx] {
  background: rgba(40,36,28,0.85) !important;
  border: 2px solid #A47219 !important;
  border-radius: 16px !important;
  padding: 14px 10px !important;
  min-height: 8em !important;
  gap: 6px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.5);
  transition: all 0.15s;
}
.game-modal-body .panel-grid .panel-tile[data-crate-idx]:hover {
  border-color: #EDBE4F !important;
  box-shadow: 0 4px 20px rgba(237,190,79,0.2);
}
.game-modal-body .panel-grid .panel-tile[data-crate-idx] .tile-icon {
  font-size: 3em !important;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5));
}
.game-modal-body .panel-grid .panel-tile[data-crate-idx] .tile-name {
  font-size: 0.85em !important;
  font-weight: 800 !important;
  color: #EDBE4F !important;
  text-shadow: 0 1px 4px #000;
}
.game-modal-body .panel-grid .panel-tile[data-crate-idx] .tile-cost {
  background: linear-gradient(180deg, #D4A843, #B8862D) !important;
  color: #fff !important;
  font-weight: 800 !important;
  padding: 6px 18px !important;
  border-radius: 8px !important;
  font-size: 0.75em !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  border: 1px solid #A47219;
}
.game-modal-body .panel-grid .panel-tile[data-crate-idx] .tile-timer {
  font-size: 0.7em;
  color: #C3902D;
  font-weight: 700;
}
.ord-progress.panel-tile {
  flex-direction: column;
  align-items: stretch;
  gap: 0.4em;
  padding: 0.5em 0.6em;
  min-height: 0;
  margin-bottom: 0.5em;
}
.ord-progress-info {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 0.55em; color: #f0e8d0;
}
.ord-progress-info strong { color: #EDBE4F; font-size: 1.15em; text-shadow: 0 1px 4px #000; }
.ord-progress-bar {
  background: rgba(49,45,35,0.8) !important;
  border: 1px solid #655A3B !important;
  height: 5px; border-radius: 3px;
  background: rgba(0,0,0,0.25);
  overflow: hidden;
}
.ord-progress-fill {
  background: linear-gradient(90deg, #F1BF59, #D69D2A) !important;
  height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, #e6a832, #f0c050);
  transition: width 0.3s;
}

.ord-refresh.panel-tile {
  background: rgba(128,96,6,0.15) !important;
  border: 1.5px solid #A47219 !important;
  border-radius: 12px !important;
  flex-direction: row; align-items: center; justify-content: center;
  padding: 0.5em 0.6em; min-height: 0;
  margin-top: 0.5em;
  color: #b388ff;
  border-color: rgba(179,136,255,0.4);
  background: rgba(179,136,255,0.08);
  cursor: pointer;
}
.ord-refresh.panel-tile:hover {
  background: rgba(179,136,255,0.2);
  border-color: rgba(179,136,255,0.6);
  box-shadow: 0 2px 8px rgba(179,136,255,0.18);
}
.ord-refresh .tile-name {
  font-size: 0.6em; color: #b388ff;
  text-align: center; -webkit-line-clamp: 1; display: block;
}
.ord-refresh.disabled { opacity: 0.4; cursor: default; }
.ord-refresh.disabled:hover {
  background: rgba(179,136,255,0.08);
  border-color: rgba(179,136,255,0.4);
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

/* Crates */
.crates-list { display: flex; flex-direction: column; gap: 6px; }
.crate-card {
  display: flex; align-items: center; gap: 0.6em;
  padding: 0.5em;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(160,120,60,0.15);
  border-radius: 8px;
}
.crate-card.ready {
  border-color: rgba(230,168,50,0.5);
  background: rgba(230,168,50,0.06);
}
.crate-icon { font-size: 1.6em; }
.crate-info { flex: 1; }
.crate-name {
  font-size: 0.65em; font-weight: 600;
  color: rgba(240,232,208,0.8);
}
.crate-timer {
  font-size: 0.5em;
  color: rgba(240,232,208,0.4);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
.crate-progress-bar {
  height: 3px; border-radius: 2px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
  margin-top: 3px;
}
.crate-progress-fill {
  height: 100%; border-radius: 2px;
  background: linear-gradient(90deg, #e6a832, #f0c050);
  transition: width 0.3s;
}
.crate-collect-btn {
  padding: 0.3em 0.8em;
  border: 1px solid rgba(230,168,50,0.5);
  border-radius: 6px;
  background: rgba(230,168,50,0.2);
  color: #e6a832;
  font-size: 0.6em; font-weight: 600;
  cursor: pointer;
  font-family: 'Fredoka', sans-serif;
  margin-top: 3px;
  transition: all 0.15s;
}
.crate-collect-btn:hover {
  background: rgba(230,168,50,0.35);
  transform: scale(1.05);
}
/* Crate reveal: identical-size icon slot for both plant images and supply
   emojis so reward rows line up cleanly. */
.crate-reward-row {
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-size: 1.05em;
}
.crate-reward-img,
.crate-reward-emoji {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.crate-reward-img {
  object-fit: contain;
  padding: 2px;
}
.crate-reward-emoji { font-size: 28px; }
.crate-reward-name { color: #f0e4cc; font-weight: 600; }
.crate-reward-amount { color: #7ec662; font-weight: 700; }

/* ============================================================
   POT HUD — game mechanics overlay on growing pots
   ============================================================ */
/* HUD: minimal on-pot — only dots + action indicator */
.pot-hud {
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: auto;
  gap: 3px;
  z-index: 5;
  pointer-events: none;
}
.pot-hud > * {
  pointer-events: auto;
}
.pot-slot-wrap.state-no-pot .pot-hud { display: none; }

/* Action indicator bubble — shows next required action */
.pot-action-indicator {
  position: absolute;
  width: clamp(15px, 3.75vw, 20px);
  height: clamp(15px, 3.75vw, 20px);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(10,8,5,0.9);
  border: 1.5px solid rgba(255,255,255,0.15);
  font-size: clamp(8px, 2.25vw, 11px);
  line-height: 1;
  z-index: 6;
  pointer-events: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
  animation: pot-indicator-pulse 2s ease-in-out infinite;
}
.pot-action-indicator.needs-water { border-color: rgba(79,195,247,0.7); }
.pot-action-indicator.timer-active { border-color: rgba(76,175,80,0.5); animation: hourglass-flip 2s ease-in-out infinite; }
.pot-action-indicator.harvest-ready { border-color: rgba(232,140,176,0.8); }
.pot-action-indicator.has-pest { border-color: rgba(255,152,0,0.7); }
.pot-action-indicator.seeds-ready { border-color: rgba(129,199,132,0.8); }
.pot-action-indicator.is-dead { border-color: rgba(229,115,115,0.7); }

@keyframes pot-indicator-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.12); }
}
@keyframes hourglass-flip {
  0%, 100% { transform: translate(-50%, -50%) rotate(0deg); }
  25%      { transform: translate(-50%, -50%) rotate(180deg); }
  50%, 75% { transform: translate(-50%, -50%) rotate(180deg) scale(1.05); }
}

/* =========================================================
   PLANT DETAIL PANEL — centered modal on tap
   ========================================================= */
.plant-detail-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 9000;
  align-items: center;
  justify-content: center;
}
.plant-detail-overlay.open { display: flex; }

.plant-detail-panel {
  background:
    linear-gradient(180deg, rgba(30,22,14,0.98) 0%, rgba(14,10,6,0.99) 100%);
  border: 1px solid rgba(255,222,173,0.12);
  border-radius: 18px;
  padding: 16px;
  width: min(320px, 90vw);
  max-height: 80vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,210,120,0.04) inset;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  animation: panel-pop-in 0.2s ease-out;
}
@keyframes panel-pop-in {
  0% { transform: scale(0.9); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* =========================================================
   UPGRADES SHOP
   ========================================================= */
.upgrade-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.upgrade-panel {
  background: linear-gradient(180deg, rgba(30,22,14,0.98) 0%, rgba(14,10,6,0.99) 100%);
  border: 1px solid rgba(255,222,173,0.12);
  border-radius: 18px;
  padding: 16px;
  width: min(360px, 92vw);
  max-height: 80vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,210,120,0.04) inset;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  animation: panel-pop-in 0.2s ease-out;
}
.upgrade-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.upgrade-header h3 {
  color: var(--pot-text-main);
  font-size: 16px;
  font-weight: 800;
}
.upgrade-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.upgrade-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.03);
  transition: all var(--pot-transition-fast);
}
.upgrade-card.upgrade-active {
  background: rgba(76,175,80,0.08);
  border-color: rgba(76,175,80,0.25);
}
.upgrade-card.upgrade-locked {
  opacity: 0.45;
}
.upgrade-card.upgrade-expensive {
  opacity: 0.7;
}
.upgrade-icon {
  font-size: 24px;
  line-height: 1;
  flex-shrink: 0;
  width: 36px;
  text-align: center;
}
.upgrade-info {
  flex: 1;
  min-width: 0;
}
.upgrade-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--pot-text-soft);
}
.upgrade-desc {
  font-size: 10px;
  color: var(--pot-text-dim);
  margin-top: 2px;
}
.upgrade-timer {
  font-size: 10px;
  color: var(--pot-green-soft);
  font-weight: 700;
  margin-top: 3px;
}
.upgrade-lock {
  font-size: 10px;
  color: var(--pot-red);
  font-weight: 700;
  margin-top: 3px;
}
.upgrade-action {
  flex-shrink: 0;
}
.upgrade-buy-btn {
  padding: 6px 12px;
  border-radius: 8px;
  border: 1.5px solid rgba(230,168,50,0.5);
  background: rgba(230,168,50,0.1);
  color: var(--pot-text-main);
  font-size: 12px;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  transition: all var(--pot-transition-fast);
}
.upgrade-buy-btn:hover {
  background: rgba(230,168,50,0.2);
  border-color: rgba(230,168,50,0.8);
  box-shadow: 0 0 10px rgba(230,168,50,0.2);
}
.upgrade-buy-btn:disabled {
  opacity: 0.4;
  cursor: default;
}
.upgrade-active-badge {
  font-size: 10px;
  font-weight: 800;
  color: var(--pot-green);
  padding: 4px 8px;
  border-radius: var(--pot-radius-pill);
  background: rgba(76,175,80,0.1);
  border: 1px solid rgba(76,175,80,0.2);
}

.plant-detail-header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.plant-detail-thumb {
  width: 56px; height: 56px;
  border-radius: 12px;
  background-size: contain;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-color: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  flex-shrink: 0;
}
.plant-detail-info {
  flex: 1;
  min-width: 0;
}
.plant-detail-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--pot-text-main);
  line-height: 1.2;
}
.plant-detail-stage {
  font-size: 11px;
  color: var(--pot-text-dim);
  margin-top: 2px;
}
.plant-detail-close {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(255,255,255,0.05);
  color: #aaa;
  font-size: 16px;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: all 0.15s;
}
.plant-detail-close:hover { background: rgba(255,255,255,0.1); color: #fff; }

/* Detail panel sections */
.plant-detail-dots {
  display: flex;
  gap: 6px;
  justify-content: center;
}
.plant-detail-dots .pot-stage-dot {
  width: 8px; height: 8px; flex: 0 0 8px;
}

.plant-detail-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.04);
}
.plant-detail-section-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--pot-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.plant-detail-water {
  display: flex;
  align-items: center;
  gap: 5px;
}
.plant-detail-water .water-drop {
  width: 16px; height: 16px; flex: 0 0 16px;
}

.plant-detail-timer {
  display: flex;
  align-items: center;
  gap: 8px;
}
.plant-detail-timer .pot-progress-bar {
  flex: 1;
  height: 6px;
}
.plant-detail-timer .pot-progress-time {
  font-size: 12px;
  min-width: 36px;
}

.plant-detail-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}
/* Labeled action buttons in detail panel */
.detail-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 10px 6px;
  border-radius: 10px;
  border: 1.5px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  transition: all var(--pot-transition-fast);
  min-width: 52px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.detail-action-btn:hover {
  background: rgba(255,255,255,0.08);
  transform: translateY(-1px);
}
.detail-action-btn:active {
  transform: scale(0.95);
}
.da-icon {
  font-size: 20px;
  line-height: 1;
}
.da-label {
  font-size: 9px;
  font-weight: 700;
  color: var(--pot-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1;
}
/* Colored borders per action type */
.detail-action-btn.water-btn { border-color: rgba(79,195,247,0.5); }
.detail-action-btn.water-btn:hover { border-color: rgba(79,195,247,0.8); box-shadow: 0 0 10px rgba(79,195,247,0.2); }
.detail-action-btn.harvest-btn { border-color: rgba(232,140,176,0.5); }
.detail-action-btn.harvest-btn:hover { border-color: rgba(232,140,176,0.8); box-shadow: 0 0 10px rgba(232,140,176,0.2); }
.detail-action-btn.pollen-btn { border-color: rgba(179,136,255,0.5); }
.detail-action-btn.pollen-btn:hover { border-color: rgba(179,136,255,0.8); box-shadow: 0 0 10px rgba(179,136,255,0.2); }
.detail-action-btn.pollinate-btn { border-color: rgba(255,138,128,0.5); }
.detail-action-btn.pollinate-btn:hover { border-color: rgba(255,138,128,0.8); box-shadow: 0 0 10px rgba(255,138,128,0.2); }
.detail-action-btn.seed-collect-btn { border-color: rgba(129,199,132,0.5); }
.detail-action-btn.seed-collect-btn:hover { border-color: rgba(129,199,132,0.8); box-shadow: 0 0 10px rgba(129,199,132,0.2); }
.detail-action-btn.instant-grow-btn { border-color: rgba(168,230,255,0.5); }
.detail-action-btn.instant-grow-btn:hover { border-color: rgba(168,230,255,0.8); box-shadow: 0 0 10px rgba(168,230,255,0.3); }
.detail-action-btn.fert-btn { border-color: rgba(255,213,79,0.5); }
.detail-action-btn.fert-btn:hover { border-color: rgba(255,213,79,0.8); box-shadow: 0 0 10px rgba(255,213,79,0.2); }
.detail-action-btn.insecticide-btn { border-color: rgba(77,182,172,0.5); }
.detail-action-btn.insecticide-btn:hover { border-color: rgba(77,182,172,0.8); box-shadow: 0 0 10px rgba(77,182,172,0.2); }
.detail-action-btn.revive-btn { border-color: rgba(168,230,255,0.5); }
.detail-action-btn.revive-btn:hover { border-color: rgba(168,230,255,0.8); box-shadow: 0 0 10px rgba(168,230,255,0.3); }
.detail-action-btn.remove-btn { border-color: rgba(229,115,115,0.5); }
.detail-action-btn.remove-btn:hover { border-color: rgba(229,115,115,0.8); box-shadow: 0 0 10px rgba(229,115,115,0.2); }

/* Status message */
.plant-detail-status {
  text-align: center;
  font-size: 12px;
  font-weight: 700;
  padding: 8px 12px;
  border-radius: 8px;
  line-height: 1.4;
}
.plant-detail-status.status-water {
  color: var(--pot-blue);
  background: rgba(79,195,247,0.08);
  border: 1px solid rgba(79,195,247,0.15);
}
.plant-detail-status.status-success {
  color: var(--pot-green-soft);
  background: rgba(76,175,80,0.08);
  border: 1px solid rgba(76,175,80,0.15);
}
.plant-detail-status.status-growing {
  color: var(--pot-text-dim);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.05);
}
.plant-detail-status.status-danger {
  color: var(--pot-red);
  background: rgba(229,115,115,0.08);
  border: 1px solid rgba(229,115,115,0.15);
}

.plant-detail-dead {
  text-align: center;
  padding: 8px;
}
.plant-detail-dead .pot-dead-label {
  font-size: 13px;
  padding: 6px 14px;
}

/* ---- Stage dots ---- */
.pot-stage-dots {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 8px;
}

/* Mini progress bar on pot HUD */
.pot-mini-progress {
  width: 100%;
  height: 3px;
  border-radius: 2px;
  background: rgba(255,255,255,0.08);
  overflow: hidden;
}
.pot-mini-fill {
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, #3f9d44, #4caf50, #85d989);
  transition: width 0.3s ease;
  box-shadow: 0 0 4px rgba(76,175,80,0.3);
}
.pot-stage-dot {
  width: 6px; height: 6px; flex: 0 0 6px;
  border-radius: 50%;
  background: var(--pot-gray-600);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 1px 2px rgba(0,0,0,0.32);
  transition: transform var(--pot-transition-fast), background var(--pot-transition-fast), box-shadow var(--pot-transition-fast);
}
.pot-stage-dot.completed {
  background: var(--pot-green);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.08) inset,
    0 0 8px rgba(76,175,80,0.32);
}
.pot-stage-dot.current {
  background: var(--pot-text-main);
  box-shadow:
    0 0 0 1px rgba(255,246,214,0.22) inset,
    0 0 10px rgba(230,168,50,0.52),
    0 0 18px rgba(230,168,50,0.22);
  animation: pot-stage-current-pulse 1.2s ease-in-out infinite;
}

/* ---- Water meter ---- */
.pot-water-meter {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 16px;
}
.water-drop {
  position: relative;
  width: 14px; height: 14px; flex: 0 0 14px;
  transform: rotate(45deg);
  border-radius: 50% 50% 50% 0;
  border: 1.5px solid var(--pot-gray-500);
  background: transparent;
  box-sizing: border-box;
  transition: border-color var(--pot-transition-fast), background var(--pot-transition-fast), box-shadow var(--pot-transition-fast), opacity var(--pot-transition-fast);
  font-size: 0; /* hide emoji text */
  color: transparent;
  overflow: hidden;
}
.water-drop::before {
  content: "";
  position: absolute; inset: 2px;
  border-radius: inherit;
  background: transparent;
}
.water-drop.filled {
  border-color: rgba(79,195,247,0.9);
  background: linear-gradient(180deg, rgba(138,224,255,0.95) 0%, rgba(79,195,247,0.95) 72%, rgba(44,146,212,0.96) 100%);
  box-shadow:
    0 0 8px rgba(79,195,247,0.34),
    0 0 0 1px rgba(255,255,255,0.06) inset;
}
.water-drop.filled::before {
  background: linear-gradient(180deg, rgba(255,255,255,0.36), rgba(255,255,255,0) 70%);
}
.water-drop:not(.filled) { opacity: 0.9; }

/* ---- Progress bar + timer ---- */
.pot-progress-wrap {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 14px;
}
.pot-progress-bar {
  position: relative;
  height: 4px;
  border-radius: var(--pot-radius-pill);
  background: var(--pot-gray-700);
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 1px 3px rgba(0,0,0,0.32);
}
.pot-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #3f9d44 0%, #4caf50 55%, #85d989 100%);
  box-shadow:
    0 0 10px rgba(76,175,80,0.2),
    0 0 0 1px rgba(255,255,255,0.04) inset;
  transition: width 0.3s ease;
}
.pot-progress-time {
  color: var(--pot-text-white);
  font-size: 10px; line-height: 1;
  font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  letter-spacing: 0.02em;
  opacity: 0.96;
  text-align: right;
  min-width: 28px;
}

/* ---- Action buttons container ---- */
.pot-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  min-height: 32px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.pot-actions::-webkit-scrollbar { display: none; }

/* ---- Action button base ---- */
.pot-action-btn {
  position: relative;
  width: 28px; height: 28px;
  min-width: 32px; min-height: 32px;
  flex: 0 0 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.12);
  background:
    radial-gradient(circle at 35% 30%, rgba(255,255,255,0.12), rgba(255,255,255,0) 40%),
    rgba(10,8,5,0.74);
  color: #fff;
  font-size: 15px; line-height: 1;
  padding: 0;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.035) inset,
    0 4px 10px rgba(0,0,0,0.38);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  transition: transform var(--pot-transition-fast), border-color var(--pot-transition-fast), box-shadow var(--pot-transition-fast), background var(--pot-transition-fast);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.pot-action-btn::after {
  content: "";
  position: absolute; inset: -2px;
  border-radius: 50%;
  opacity: 0;
  transition: opacity var(--pot-transition-fast), box-shadow var(--pot-transition-fast);
  pointer-events: none;
}
.pot-action-btn:hover {
  transform: scale(1.15);
  filter: brightness(1.06);
}
.pot-action-btn:hover::after { opacity: 1; }
.pot-action-btn:active {
  animation: pot-btn-bounce 0.22s ease;
  transform: scale(0.95);
}

/* ---- Button variants ---- */
.pot-action-btn.water-btn {
  border-color: rgba(79,195,247,0.78);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04) inset, 0 4px 10px rgba(0,0,0,0.38), 0 0 10px rgba(79,195,247,0.16);
}
.pot-action-btn.water-btn:hover::after { box-shadow: 0 0 14px rgba(79,195,247,0.5); }

.pot-action-btn.harvest-btn {
  border-color: rgba(232,140,176,0.82);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04) inset, 0 4px 10px rgba(0,0,0,0.38), 0 0 10px rgba(232,140,176,0.16);
}
.pot-action-btn.harvest-btn:hover::after { box-shadow: 0 0 14px rgba(232,140,176,0.46); }

.pot-action-btn.pollen-btn {
  border-color: rgba(179,136,255,0.82);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04) inset, 0 4px 10px rgba(0,0,0,0.38), 0 0 10px rgba(179,136,255,0.18);
}
.pot-action-btn.pollen-btn:hover::after { box-shadow: 0 0 14px rgba(179,136,255,0.5); }

.pot-action-btn.pollinate-btn {
  border-color: rgba(255,138,128,0.82);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04) inset, 0 4px 10px rgba(0,0,0,0.38), 0 0 10px rgba(255,138,128,0.18);
}
.pot-action-btn.pollinate-btn:hover::after { box-shadow: 0 0 14px rgba(255,138,128,0.46); }

.pot-action-btn.seed-collect-btn {
  border-color: rgba(129,199,132,0.82);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04) inset, 0 4px 10px rgba(0,0,0,0.38), 0 0 10px rgba(129,199,132,0.18);
}
.pot-action-btn.seed-collect-btn:hover::after { box-shadow: 0 0 14px rgba(129,199,132,0.46); }

.pot-action-btn.fert-btn {
  border-color: rgba(255,213,79,0.86);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04) inset, 0 4px 10px rgba(0,0,0,0.38), 0 0 10px rgba(255,213,79,0.18);
}
.pot-action-btn.fert-btn:hover::after { box-shadow: 0 0 14px rgba(255,213,79,0.46); }

.pot-action-btn.insecticide-btn {
  border-color: rgba(77,182,172,0.84);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04) inset, 0 4px 10px rgba(0,0,0,0.38), 0 0 10px rgba(77,182,172,0.18);
}
.pot-action-btn.insecticide-btn:hover::after { box-shadow: 0 0 14px rgba(77,182,172,0.46); }

.pot-action-btn.remove-btn {
  border-color: rgba(229,115,115,0.84);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.04) inset, 0 4px 10px rgba(0,0,0,0.38), 0 0 10px rgba(229,115,115,0.18);
}
.pot-action-btn.remove-btn:hover::after { box-shadow: 0 0 14px rgba(229,115,115,0.48); }

/* ---- Seed timer pill ---- */
.pot-seed-timer {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 4px 9px;
  border-radius: var(--pot-radius-pill);
  background: linear-gradient(180deg, rgba(34,58,25,0.94), rgba(20,40,15,0.94));
  border: 1px solid rgba(129,199,132,0.22);
  color: var(--pot-green-soft);
  font-size: 10px; line-height: 1; font-weight: 800;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.02) inset,
    0 4px 12px rgba(0,0,0,0.34),
    0 0 12px rgba(76,175,80,0.16);
  white-space: nowrap;
}

/* ---- Dead label ---- */
.pot-dead-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  max-width: 100%;
  padding: 4px 8px;
  border-radius: var(--pot-radius-pill);
  background: linear-gradient(180deg, rgba(58,18,18,0.92), rgba(40,12,12,0.92));
  border: 1px solid rgba(229,115,115,0.22);
  color: var(--pot-red);
  font-size: 10px; line-height: 1; font-weight: 800;
  box-shadow: 0 4px 12px rgba(0,0,0,0.34), 0 0 10px rgba(229,115,115,0.12);
}

/* ---- Drought overlay ---- */
.pot-drought-overlay {
  position: absolute;
  inset: auto 6px 16px 6px;
  height: 12px;
  border-radius: var(--pot-radius-pill);
  pointer-events: none;
  z-index: 3;
  background: radial-gradient(circle at center, rgba(255,183,77,0.44) 0%, rgba(255,145,0,0.26) 44%, rgba(255,145,0,0) 100%);
  filter: blur(1px);
  animation: pot-drought-pulse 1.2s ease-in-out infinite;
}

/* ---- Affliction overlay (pest/disease) ---- */
.pot-affliction-overlay {
  position: absolute;
  pointer-events: none;
  z-index: 3;
  font-size: max(14px, 1vw);
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.35));
}
.pot-affliction-overlay.pest {
  right: 8px; top: 8px;
  animation: pot-bug-bounce 1s ease-in-out infinite;
}
.pot-affliction-overlay.disease {
  left: 8px; top: 12px;
  animation: pot-disease-float 1.6s ease-in-out infinite;
}

/* =========================================================
   ANIMATIONS
   ========================================================= */
@keyframes pot-stage-current-pulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 1px rgba(255,246,214,0.22) inset, 0 0 10px rgba(230,168,50,0.42), 0 0 18px rgba(230,168,50,0.18);
  }
  50% {
    transform: scale(1.18);
    box-shadow: 0 0 0 1px rgba(255,246,214,0.26) inset, 0 0 14px rgba(230,168,50,0.62), 0 0 24px rgba(230,168,50,0.28);
  }
}
@keyframes pot-btn-bounce {
  0% { transform: scale(1); }
  35% { transform: scale(0.9); }
  65% { transform: scale(1.08); }
  100% { transform: scale(0.95); }
}
@keyframes pot-drought-pulse {
  0%, 100% { opacity: 0.72; transform: scaleX(1); }
  50% { opacity: 1; transform: scaleX(1.04); }
}
@keyframes pot-bug-bounce {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-3px) rotate(4deg); }
}
@keyframes pot-disease-float {
  0%, 100% { transform: translateY(0) scale(0.95); opacity: 0.6; }
  50% { transform: translateY(-5px) scale(1.12); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .pot-stage-dot.current,
  .pot-drought-overlay,
  .pot-affliction-overlay { animation: none !important; }
  .pot-action-btn, .pot-slot-plus, .pot-plant-stage,
  .pot-progress-fill, .pot-stage-dot, .water-drop { transition: none !important; }
}

/* ============================================================
   1. BUY POT — pop-in bounce
   ============================================================ */
.pot-pop-in {
  animation: pot-pop-in-anim 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  transform-origin: center bottom;
}
@keyframes pot-pop-in-anim {
  0%   { transform: scale(0); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  80%  { transform: scale(0.95); }
  100% { transform: scale(1); opacity: 1; }
}

/* ============================================================
   2. PLANT SEED — seed drop plop
   ============================================================ */
.seed-drop-overlay {
  position: fixed;
  z-index: 9998;
  pointer-events: none;
  overflow: visible;
}
.seed-drop-emoji {
  position: absolute;
  font-size: 1.4em;
  line-height: 1;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
}
.seed-drop-fall {
  animation: seed-drop-fall-anim 0.5s cubic-bezier(0.55, 0, 1, 0.45) forwards;
}
@keyframes seed-drop-fall-anim {
  0%   { opacity: 1; transform: translateX(-50%) translateY(-30px) scale(1.2); }
  70%  { opacity: 1; transform: translateX(-50%) translateY(var(--land-y)) scale(1); }
  85%  { opacity: 1; transform: translateX(-50%) translateY(calc(var(--land-y) - 5px)) scale(1.1, 0.9); }
  100% { opacity: 0; transform: translateX(-50%) translateY(var(--land-y)) scale(0.5); }
}
.seed-dirt-particle {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: #8b6b45;
  opacity: 0;
}
.seed-dirt-fly {
  animation: seed-dirt-fly-anim 0.4s ease-out forwards;
}
@keyframes seed-dirt-fly-anim {
  0%   { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.3); }
}

/* ============================================================
   3. HARVEST — flower flies to inventory + coins burst
   ============================================================ */
.harvest-overlay {
  position: fixed;
  z-index: 9998;
  pointer-events: none;
  overflow: visible;
}
.harvest-flower-clone {
  position: absolute;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  transform-origin: center center;
  animation: harvest-fly-up 0.8s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}
@keyframes harvest-fly-up {
  0%   { transform: scale(1); opacity: 1; }
  40%  { transform: scale(1.2) translateY(-20px); opacity: 1; }
  100% { transform: scale(0.3) translate(var(--fly-x), var(--fly-y)); opacity: 0; }
}
.harvest-coin-particle {
  position: absolute;
  font-size: 0.9em;
  line-height: 1;
  opacity: 0;
}
.harvest-coin-burst {
  animation: harvest-coin-burst-anim 0.7s ease-out forwards;
}
@keyframes harvest-coin-burst-anim {
  0%   { opacity: 1; transform: translate(0, 0) scale(1); }
  50%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.4); }
}
.harvest-pop {
  animation: harvest-pop-anim 0.4s ease-out;
  transform-origin: center bottom;
}
@keyframes harvest-pop-anim {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.3); }
  60%  { transform: scale(0.9); }
  100% { transform: scale(1); }
}

/* ============================================================
   4. COLLECT POLLEN — yellow particles rise
   ============================================================ */
.pollen-collect-overlay {
  position: fixed;
  z-index: 9998;
  pointer-events: none;
  overflow: visible;
}
.pollen-rise-particle {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffd700, #e6a832);
  box-shadow: 0 0 4px rgba(255, 215, 0, 0.6);
  opacity: 0;
}
.pollen-rise-go {
  animation: pollen-rise-anim 1s ease-out forwards;
}
@keyframes pollen-rise-anim {
  0%   { opacity: 1; transform: translate(0, 0) scale(1); }
  30%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.3); }
}

/* ============================================================
   5. POLLINATE — pollen rain falls on plant
   ============================================================ */
.pollinate-overlay {
  position: fixed;
  z-index: 9998;
  pointer-events: none;
  overflow: visible;
}
.pollinate-rain-particle {
  position: absolute;
  border-radius: 60% 40% 55% 45%;
  background: radial-gradient(circle at 35% 35%, #fff5b0, #ffd54a 50%, #f5a623 100%);
  box-shadow: 0 0 6px rgba(255, 200, 30, 0.7), inset 0 -1px 1px rgba(180, 100, 0, 0.4);
  opacity: 0;
}
.pollinate-rain-fall {
  animation: pollinate-rain-anim 1s cubic-bezier(0.4, 0, 0.6, 1) forwards;
}
@keyframes pollinate-rain-anim {
  0%   { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(0.7); }
  60%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot, 0deg)) scale(1.4); }
}
.pollinate-flash {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255, 240, 130, 0.65) 0%,
    rgba(255, 200, 50, 0.35) 35%,
    transparent 75%);
  animation: pollinate-flash-anim 0.7s ease-out forwards;
}
@keyframes pollinate-flash-anim {
  0%   { transform: scale(0.3); opacity: 1; }
  60%  { transform: scale(1.3); opacity: 0.8; }
  100% { transform: scale(1.9); opacity: 0; }
}

/* Bee that flies in, hovers, leaves */
.pollinate-bee {
  position: absolute;
  font-size: 22px;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.4));
  z-index: 5;
  pointer-events: none;
}
.pollinate-bee-fly {
  animation: pollinate-bee-anim 2.2s ease-in-out forwards;
}
@keyframes pollinate-bee-anim {
  0%   { transform: translate(0, 0) rotate(-5deg) scale(0.8); opacity: 0; }
  10%  { opacity: 1; }
  25%  { transform: translate(40%, 8px) rotate(8deg) scale(1.1); }
  35%  { transform: translate(60%, -4px) rotate(-6deg) scale(1.1); }
  45%  { transform: translate(80%, 12px) rotate(4deg) scale(1.15); }
  55%  { transform: translate(60%, 0px) rotate(-8deg) scale(1.1); }
  70%  { transform: translate(90%, -8px) rotate(10deg) scale(1.05); opacity: 1; }
  100% { transform: translate(180%, -30px) rotate(15deg) scale(0.7); opacity: 0; }
}

/* Sparkles bursting around the flower */
.pollinate-sparkle {
  position: absolute;
  line-height: 1;
  filter: drop-shadow(0 0 4px rgba(255, 220, 100, 0.8));
  opacity: 0;
  pointer-events: none;
}
.pollinate-sparkle-fly {
  animation: pollinate-sparkle-anim 0.9s ease-out forwards;
}
@keyframes pollinate-sparkle-anim {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.4) rotate(0deg); }
  30%  { opacity: 1; transform: translate(calc(var(--dx) * 0.4), calc(var(--dy) * 0.4)) scale(1.2) rotate(180deg); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.6) rotate(360deg); }
}

/* "Pollinated!" floating label */
.pollinate-label {
  position: absolute;
  transform: translateX(-50%) translateY(0) scale(0.6);
  color: #fff5d0;
  font-family: Fredoka, sans-serif;
  font-weight: 700;
  font-size: 14px;
  text-shadow:
    0 0 6px rgba(255, 200, 50, 0.9),
    0 2px 4px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: 6;
}
.pollinate-label-rise {
  animation: pollinate-label-anim 1.4s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}
@keyframes pollinate-label-anim {
  0%   { opacity: 0; transform: translateX(-50%) translateY(0) scale(0.6); }
  20%  { opacity: 1; transform: translateX(-50%) translateY(-10px) scale(1.1); }
  60%  { opacity: 1; transform: translateX(-50%) translateY(-30px) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-50px) scale(0.9); }
}

/* ============================================================
   6. COLLECT SEEDS — seeds pop out
   ============================================================ */
.seed-collect-overlay {
  position: fixed;
  z-index: 9998;
  pointer-events: none;
  overflow: visible;
}
.seed-pop-particle {
  position: absolute;
  font-size: 0.8em;
  line-height: 1;
  opacity: 0;
}
.seed-pop-fly {
  animation: seed-pop-fly-anim 0.8s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}
@keyframes seed-pop-fly-anim {
  0%   { opacity: 1; transform: translate(0, 0) scale(1); }
  40%  { opacity: 1; transform: translate(calc(var(--dx) * 0.5), calc(var(--dy) - 15px)) scale(1.1); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.4); }
}

/* ============================================================
   7. PEST APPEARS — shake + bugs crawl
   ============================================================ */
.pest-appear-overlay {
  position: fixed;
  z-index: 9998;
  pointer-events: none;
  overflow: visible;
}
.pest-shake {
  animation: pest-shake-anim 0.5s ease-out;
  transform-origin: center bottom;
}
@keyframes pest-shake-anim {
  0%, 100% { transform: translateX(0); }
  10% { transform: translateX(-4px) rotate(-2deg); }
  30% { transform: translateX(4px) rotate(2deg); }
  50% { transform: translateX(-3px) rotate(-1deg); }
  70% { transform: translateX(3px) rotate(1deg); }
  90% { transform: translateX(-1px); }
}
.pest-bug {
  position: absolute;
  font-size: 0.7em;
  line-height: 1;
  opacity: 0;
}
.pest-bug-crawl {
  animation: pest-bug-crawl-anim 1s ease-out forwards;
}
@keyframes pest-bug-crawl-anim {
  0%   { opacity: 0; transform: translate(var(--from-x), var(--from-y)) scale(0.3); }
  30%  { opacity: 1; transform: translate(calc(var(--from-x) * 0.5), calc(var(--from-y) * 0.5)) scale(0.8); }
  100% { opacity: 1; transform: translate(var(--dx), var(--dy)) scale(1); }
}

/* ============================================================
   8. DISEASE APPEARS — green/purple mist
   ============================================================ */
.disease-appear-overlay {
  position: fixed;
  z-index: 9998;
  pointer-events: none;
  overflow: visible;
}
.disease-mist {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
}
.disease-mist-rise {
  animation: disease-mist-anim 1.2s ease-out forwards;
}
@keyframes disease-mist-anim {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.5); }
  20%  { opacity: 0.6; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.5); }
}

/* ============================================================
   9. INSECTICIDE — spray + bugs flee
   ============================================================ */
.insecticide-overlay {
  position: fixed;
  z-index: 9998;
  pointer-events: none;
  overflow: visible;
}
.spray-particle {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(100, 180, 240, 0.8);
  box-shadow: 0 0 3px rgba(100, 180, 240, 0.5);
  opacity: 0;
}
.spray-burst {
  animation: spray-burst-anim 0.5s ease-out forwards;
}
@keyframes spray-burst-anim {
  0%   { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.3); }
}
.flee-bug {
  position: absolute;
  font-size: 0.7em;
  line-height: 1;
  opacity: 0;
}
.flee-bug-go {
  animation: flee-bug-anim 0.7s ease-out forwards;
}
@keyframes flee-bug-anim {
  0%   { opacity: 1; transform: translate(0, 0) scale(1) rotate(0deg); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.3) rotate(var(--rot, 180deg)); }
}

/* ============================================================
   10. FERTILIZER — green particles absorb
   ============================================================ */
.fertilizer-overlay {
  position: fixed;
  z-index: 9998;
  pointer-events: none;
  overflow: visible;
}
.fert-sparkle {
  position: absolute;
  font-size: 0.6em;
  line-height: 1;
  opacity: 0;
}
.fert-sparkle-fall {
  animation: fert-sparkle-fall-anim 0.8s ease-in forwards;
}
@keyframes fert-sparkle-fall-anim {
  0%   { opacity: 1; transform: translate(0, -20px) scale(1); }
  70%  { opacity: 0.8; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.2); }
}

/* ============================================================
   11. PLANT DIES — wilt animation
   ============================================================ */
.pot-plant-dead {
  /* No grayscale/darken — we already use a dedicated withered sprite from the asset config.
     Just a slight tilt + scale-down to communicate "wilted" without nuking the colors. */
  transform: rotate(6deg) scale(0.95);
  transform-origin: center bottom;
}
.plant-death-wilt {
  animation: plant-death-wilt-anim 1s ease-in forwards;
  transform-origin: center bottom;
}
@keyframes plant-death-wilt-anim {
  0%   { transform: rotate(0deg); filter: saturate(1); }
  50%  { transform: rotate(8deg); filter: saturate(0.3); }
  100% { transform: rotate(12deg) scale(0.95); filter: saturate(0) brightness(0.7); }
}

/* ============================================================
   12. DISCOVERY — celebration confetti
   ============================================================ */
.celebration-overlay {
  position: fixed;
  z-index: 9998;
  pointer-events: none;
  overflow: visible;
}
.confetti-particle {
  position: absolute;
  width: 6px; height: 6px;
  opacity: 0;
}
.confetti-burst {
  animation: confetti-burst-anim 1.2s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}
@keyframes confetti-burst-anim {
  0%   { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
  30%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot, 360deg)) scale(0.3); }
}
.celebration-new-text {
  position: absolute;
  left: 50%;
  top: 10%;
  transform: translateX(-50%);
  font-size: 1.4em;
  font-weight: 800;
  color: #ffd700;
  text-shadow: 0 2px 6px rgba(0,0,0,0.6), 0 0 10px rgba(255,215,0,0.4);
  opacity: 0;
  animation: celebration-text-anim 1s ease-out forwards;
}
@keyframes celebration-text-anim {
  0%   { opacity: 0; transform: translateX(-50%) scale(0.3); }
  30%  { opacity: 1; transform: translateX(-50%) scale(1.2); }
  60%  { opacity: 1; transform: translateX(-50%) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) scale(1) translateY(-10px); }
}
.celebration-glow {
  position: absolute;
  inset: -15%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.3) 0%, transparent 70%);
  animation: celebration-glow-anim 1s ease-out forwards;
}
@keyframes celebration-glow-anim {
  0%   { transform: scale(0.3); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}

/* ============================================================
   PORTRAIT MODE — pot HUD adjustments
   ============================================================ */
.portrait-mode .pot-hud {
  bottom: auto;
  top: -2px;
  transform: translateY(-100%);
}
.portrait-mode {
  padding-top: 10px;
}
.portrait-mode .active-upgrades-bar {
  display: none !important;
}

/* Mobile modal overrides — wider + larger text */
.portrait-mode .game-modal:not(.builder-modal) {
  width: 92%;
  top: 1%; bottom: 6%;
  font-size: 1.3em;
}
.portrait-mode .game-modal:not(.builder-modal) .game-modal-tab {
  font-size: 11px;
  padding: 0.4em 0.2em;
}
.portrait-mode .game-modal:not(.builder-modal) .game-modal-tab.active {
  font-size: 13px;
}
.portrait-mode .game-modal-title {
  font-size: 1.2em;
}
.portrait-mode .game-modal-body {
  font-size: 1.4em;
  padding: 10px;
}

/* ============================================================
   BUILDER MODAL — positions read from builder template zones
   ============================================================ */
.builder-modal {
  border: none;
  background: transparent;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  border-radius: 18px;
  padding: 0;
  overflow: hidden;
}
.portrait-mode .builder-modal {
  width: 96%;
  top: 1%; bottom: 2%;
  font-size: 1.3em;
}
/* All builder modal children are absolutely positioned by JS */
.builder-modal .bm-title {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff8e0;
  font-size: 1.15em;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  font-family: 'Fredoka', sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.builder-modal .bm-close {
  background: url('media/uploads/optimized/x-button.webp') center / contain no-repeat;
  border: none;
  color: transparent;
  cursor: pointer;
  padding: 0;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.4));
  z-index: 10;
}
.builder-modal .bm-close:hover { transform: scale(1.1); }
.builder-modal .bm-tabs {
  display: flex;
  gap: 2px;
  align-items: stretch;
  background: none;
  border: none;
  height: 100%;
}
.builder-modal .bm-tabs .game-modal-tab {
  flex: 1;
  background: url('media/uploads/optimized/element-tab.webp') center / 100% 100% no-repeat;
  border: none;
  border-radius: 0;
  color: rgba(240,232,208,0.6);
  padding: 0;
  margin: 0;
  font-size: clamp(11px, 2.8vw, 18px);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.builder-modal .bm-tabs .game-modal-tab:hover {
  background-color: transparent;
  color: rgba(240,232,208,0.9);
}
.builder-modal .bm-tabs .game-modal-tab.active {
  background: url('media/uploads/optimized/element-tab-highlight.webp') center / 100% 100% no-repeat;
  color: #fff8e0;
  border-bottom-color: transparent;
  text-shadow: 0 1px 4px rgba(230,168,50,0.4);
  font-weight: 700;
}
.builder-modal .bm-body {
  overflow-y: auto;
  overflow-x: hidden;
  padding: 6px;
  font-size: 1.2em;
}
.builder-modal .bm-body::-webkit-scrollbar { width: 4px; }
.builder-modal .bm-body::-webkit-scrollbar-thumb {
  background: rgba(230,168,50,0.25); border-radius: 3px;
}
.builder-modal .bm-body .panel-grid {
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.5em;
}
.builder-modal .bm-body .panel-tile {
  padding: 0.5em 0.3em; min-height: 5em; gap: 0.15em;
  border-radius: 12px;
  background: rgba(0,0,0,0.2);
  border: 1.5px solid rgba(200,170,100,0.35);
  box-shadow: 0 4px 12px rgba(0,0,0,0.6), 0 8px 24px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.06);
}
.builder-modal .bm-body .tile-icon { font-size: 2.2em; filter: drop-shadow(0 3px 6px rgba(0,0,0,0.7)); }
.builder-modal .bm-body .tile-name { font-size: 0.85em; text-shadow: 0 2px 6px rgba(0,0,0,0.7), 0 1px 2px rgba(0,0,0,0.5); }
.builder-modal .bm-body .tile-cost,
.builder-modal .bm-body .tile-price { font-size: 0.7em; text-shadow: 0 2px 6px rgba(0,0,0,0.8), 0 1px 2px rgba(0,0,0,0.6); }
.builder-modal .bm-body .tile-count { font-size: 0.7em; text-shadow: 0 2px 4px rgba(0,0,0,0.6); }
.builder-modal .bm-body .tile-rarity { font-size: 0.55em; text-shadow: 0 2px 4px rgba(0,0,0,0.6); }
.builder-modal .bm-body .inv-sell-btn { font-size: 0.85em; padding: 0.5em 0; }

/* ---- Unified builder-modal styles for settings, avatar, referral ---- */
.builder-modal .bm-body .setting-row {
  background: rgba(0,0,0,0.2);
  border: 1.5px solid rgba(200,170,100,0.35);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.6), 0 8px 24px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.06);
  padding: 0.6em 0.8em;
}
.builder-modal .bm-body .setting-name {
  text-shadow: 0 2px 6px rgba(0,0,0,0.7), 0 1px 2px rgba(0,0,0,0.5);
}
.builder-modal .bm-body .setting-desc {
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.builder-modal .bm-body .setting-toggle {
  background: rgba(0,0,0,0.35);
  border: 1.5px solid rgba(200,170,100,0.35);
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.builder-modal .bm-body .avatar-section {
  border-bottom-color: rgba(200,170,100,0.25);
}
.builder-modal .bm-body .avatar-current {
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.7));
}
.builder-modal .bm-body .avatar-username {
  text-shadow: 0 2px 6px rgba(0,0,0,0.7), 0 1px 2px rgba(0,0,0,0.5);
}
.builder-modal .bm-body .avatar-option {
  background: rgba(0,0,0,0.2);
  border: 1.5px solid rgba(200,170,100,0.35);
  box-shadow: 0 3px 8px rgba(0,0,0,0.5);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
}
.builder-modal .bm-body .avatar-option.selected {
  box-shadow: 0 0 10px rgba(230,168,50,0.4), 0 3px 8px rgba(0,0,0,0.5);
}
.builder-modal .bm-body .referral-card,
.builder-modal .bm-body .referral-link-card {
  background: rgba(0,0,0,0.2);
  border: 1.5px solid rgba(200,170,100,0.35);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.6), 0 8px 24px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.06);
}
.builder-modal .bm-body .referral-header-icon {
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.7));
}
.builder-modal .bm-body .referral-header-title {
  text-shadow: 0 2px 6px rgba(0,0,0,0.7), 0 1px 2px rgba(0,0,0,0.5);
}
.builder-modal .bm-body .referral-list-row {
  background: rgba(0,0,0,0.2);
  border: 1.5px solid rgba(200,170,100,0.2);
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.builder-modal .bm-body .settings-invite-btn {
  box-shadow: 0 3px 10px rgba(0,0,0,0.5);
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.builder-modal .bm-body .ach-card {
  background: rgba(0,0,0,0.2);
  border: 1.5px solid rgba(200,170,100,0.35);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.6), 0 8px 24px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.06);
}
.builder-modal .bm-body .ach-icon {
  filter: drop-shadow(0 3px 6px rgba(0,0,0,0.7));
}

/* Mobile active upgrade timers */
.mob-upgrade-timers {
  display: none;
}
.portrait-mode .mob-upgrade-timers {
  display: flex;
  position: absolute;
  top: 9%; right: 2%;
  z-index: 98;
  flex-direction: column;
  gap: 4px;
  pointer-events: none;
}
.portrait-mode .mob-upgrade-timer-item {
  background: rgba(255, 248, 230, 0.9);
  color: #5a3e10;
  font-size: 1.1em;
  font-weight: 700;
  font-family: 'Fredoka', sans-serif;
  padding: 5px 14px;
  border-radius: 10px;
  border: 1px solid rgba(230, 168, 50, 0.4);
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

/* Mobile pot pagination arrows */
.mob-pot-arrow {
  display: none;
}
.portrait-mode .mob-pot-arrow {
  display: flex;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 98;
  width: 38px; height: 60px;
  align-items: center; justify-content: center;
  font-size: 2em;
  font-weight: 700;
  color: rgba(255,248,230,0.9);
  background: rgba(20,14,8,0.5);
  border: 1px solid rgba(230,168,50,0.35);
  border-radius: 12px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: all 0.2s;
  font-family: 'Fredoka', sans-serif;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
  -webkit-tap-highlight-color: transparent;
}
.portrait-mode .mob-pot-arrow:active {
  transform: translateY(-50%) scale(0.9);
  background: rgba(230,168,50,0.3);
}
.portrait-mode .mob-pot-arrow-left { left: 2px; }
.portrait-mode .mob-pot-arrow-right { right: 2px; }

.mob-pot-page-indicator {
  display: none;
}
.portrait-mode .mob-pot-page-indicator {
  display: block;
  position: absolute;
  bottom: 2%; left: 50%;
  transform: translateX(-50%);
  z-index: 98;
  font-family: 'Fredoka', sans-serif;
  font-size: 0.85em;
  font-weight: 600;
  color: rgba(255,248,230,0.6);
  background: rgba(20,14,8,0.4);
  padding: 3px 12px;
  border-radius: 10px;
  letter-spacing: 0.05em;
}

/* Icon value speech bubble */
.icon-value-bubble {
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  margin-top: 6px;
  background: rgba(255, 248, 230, 0.93);
  color: #5a3e10;
  font-size: 1.8em; font-weight: 800;
  font-family: 'Fredoka', sans-serif;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1.5px solid rgba(230, 168, 50, 0.5);
  white-space: nowrap;
  pointer-events: none;
  z-index: 50;
  animation: bubble-pop 0.25s ease-out;
  box-shadow: 0 3px 10px rgba(0,0,0,0.2);
  text-shadow: none;
}
.icon-value-bubble::before {
  content: '';
  position: absolute;
  top: -6px; left: 50%;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid rgba(230, 168, 50, 0.5);
}
.icon-value-bubble::after {
  content: '';
  position: absolute;
  top: -4px; left: 50%;
  transform: translateX(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid rgba(255, 248, 230, 0.93);
}
@keyframes bubble-pop {
  0% { opacity: 0; transform: translateX(-50%) scale(0.7); }
  100% { opacity: 1; transform: translateX(-50%) scale(1); }
}

/* ---- Entry overlay (Quick Play / Register / Log In) ---- */
#entry-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: radial-gradient(ellipse at center, #142318 0%, #050a07 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  font-family: 'Fredoka', -apple-system, BlinkMacSystemFont, sans-serif;
  animation: entry-fade-in 0.4s ease-out;
}
@keyframes entry-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
#entry-overlay .entry-card {
  background: rgba(20, 35, 24, 0.92);
  border: 1px solid rgba(120, 200, 140, 0.25);
  border-radius: 22px;
  padding: 36px 32px 28px;
  max-width: 420px;
  width: 100%;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 80px rgba(80, 200, 120, 0.08);
  backdrop-filter: blur(8px);
  animation: entry-slide-up 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
@keyframes entry-slide-up {
  from { opacity: 0; transform: translateY(24px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
#entry-overlay .entry-logo {
  width: 120px;
  height: auto;
  margin-bottom: 10px;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
}
#entry-overlay .entry-title {
  color: #f0e8d0;
  font-size: 1.5em;
  font-weight: 600;
  margin: 0 0 6px;
  letter-spacing: 0.3px;
}
#entry-overlay .entry-sub {
  color: rgba(240, 232, 208, 0.55);
  font-size: 0.9em;
  line-height: 1.4;
  margin: 0 0 22px;
}
#entry-overlay .entry-err {
  color: #e85d75;
  font-size: 0.85em;
  min-height: 1.2em;
  margin-bottom: 8px;
}
#entry-overlay .entry-btn {
  display: block;
  width: 100%;
  padding: 14px 18px;
  border: none;
  border-radius: 12px;
  font-size: 1em;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  margin-bottom: 10px;
  transition: transform 0.12s, opacity 0.2s, box-shadow 0.2s;
  letter-spacing: 0.2px;
}
#entry-overlay .entry-btn:hover { opacity: 0.93; }
#entry-overlay .entry-btn:active { transform: scale(0.98); }
#entry-overlay .entry-btn:disabled { opacity: 0.55; cursor: not-allowed; }
#entry-overlay .entry-btn-primary {
  background: linear-gradient(135deg, #4caf50, #2e7d32);
  color: #fff;
  box-shadow: 0 6px 20px rgba(76, 175, 80, 0.35);
  font-size: 1.1em;
  padding: 16px 18px;
}
#entry-overlay .entry-btn-primary:hover {
  box-shadow: 0 8px 24px rgba(76, 175, 80, 0.5);
}
#entry-overlay .entry-btn-secondary {
  background: rgba(255, 255, 255, 0.08);
  color: #f0e8d0;
  border: 1px solid rgba(240, 232, 208, 0.25);
}
#entry-overlay .entry-btn-ghost {
  background: transparent;
  color: rgba(240, 232, 208, 0.75);
  border: 1px solid rgba(240, 232, 208, 0.15);
  margin-bottom: 0;
}
#entry-overlay .entry-hint {
  color: rgba(240, 232, 208, 0.45);
  font-size: 0.72em;
  line-height: 1.45;
  margin: 2px 0 18px;
  padding: 0 6px;
}
#entry-overlay .entry-hint strong {
  color: rgba(240, 232, 208, 0.7);
}
#entry-overlay .entry-divider {
  color: rgba(240, 232, 208, 0.35);
  font-size: 0.8em;
  margin: 14px 0 12px;
  position: relative;
}
#entry-overlay .entry-divider::before,
#entry-overlay .entry-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 40%;
  height: 1px;
  background: rgba(240, 232, 208, 0.15);
}
#entry-overlay .entry-divider::before { left: 0; }
#entry-overlay .entry-divider::after { right: 0; }
@media (max-width: 520px) {
  #entry-overlay .entry-card { padding: 28px 22px 22px; }
  #entry-overlay .entry-logo { width: 96px; }
  #entry-overlay .entry-title { font-size: 1.3em; }
}

/* ============================================================
   LEADERBOARD — layout glue only; visuals come from .panel-tile
   and .tile-* classes (feedback_reuse_modal_css).
   ============================================================ */

/* Sub-nav sits inside .game-modal-body padding, so give it a bit of breathing room */
.lb-subtabs {
  margin: -8px -8px 0.5em -8px; /* cancel body padding so it hugs the edges */
}

.lb-content { display: flex; flex-direction: column; gap: 0.5em; }

/* Vertical stack of full-width panel tiles */
/* Leaderboard single-category view */
.lb-banner {
  display: flex; align-items: center; gap: 12px;
  padding: 20px 16px; position: relative;
  min-height: 70px; margin-bottom: 10px;
  border-radius: 14px; overflow: hidden;
}
.lb-banner-frame {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: fill; pointer-events: none;
}
.lb-banner-info { flex: 1; position: relative; z-index: 1; min-width: 0; }
.lb-banner-title {
  font-weight: 800; font-size: 1.2em;
  background: linear-gradient(180deg, #F1BF59, #D69D2A);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  line-height: 1.2;
}
.lb-banner-desc { font-size: 0.75em; color: #E8C594; font-weight: 500; margin-top: 2px; text-shadow: 0 1px 4px #000; }
.lb-banner-timer { display: flex; flex-direction: column; align-items: center; gap: 1px; position: relative; z-index: 1; flex-shrink: 0; }
.lb-banner-timer span { font-size: 0.8em; font-weight: 800; color: #C3902D; text-shadow: 0 2px 6px #000; }

/* Dropdown */
.lb-dropdown-wrap { position: relative; z-index: 10; flex-shrink: 0; }
.lb-dropdown-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px; background: rgba(60,55,41,0.6);
  border: 1.5px solid #A47219; border-radius: 10px; cursor: pointer;
}
.lb-dropdown-btn span { font-weight: 800; font-size: 0.85em; color: #EDBE4F; text-shadow: 0 1px 4px #000; }
.lb-dropdown-btn img { width: 14px; height: 10px; }
.lb-dropdown-list {
  position: absolute; top: 100%; right: 0; margin-top: 4px;
  background: rgba(30,25,18,0.97); border: 1.5px solid #A47219;
  border-radius: 10px; overflow: hidden; min-width: 150px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.7); display: none;
}
.lb-dropdown-list.open { display: block; }
.lb-dropdown-item {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; cursor: pointer;
  font-weight: 700; font-size: 0.8em; color: #E8C594;
}
.lb-dropdown-item:hover, .lb-dropdown-item.selected { background: rgba(164,114,25,0.3); color: #EDBE4F; }

/* Player rows — full width, tall */
.lb-player-row {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 14px; position: relative;
  min-height: 62px; border-radius: 10px; overflow: hidden; margin-bottom: 2px;
}
.lb-player-row .lb-prow-frame {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: fill; pointer-events: none; z-index: 0;
}
.lb-prow-rank {
  position: relative; z-index: 1; min-width: 30px;
  text-align: center; font-weight: 800; font-size: 1em; color: #C3902D;
  text-shadow: 0 1px 4px #000;
}
.lb-prow-rank img { width: 28px; height: 34px; object-fit: contain; }
.lb-prow-avatar {
  position: relative; z-index: 1; width: 38px; height: 38px; flex-shrink: 0;
  border-radius: 50%; border: 2px solid #A47219;
  display: flex; align-items: center; justify-content: center;
  background: rgba(60,55,41,0.5); font-size: 1.4em;
}
.lb-prow-name {
  position: relative; z-index: 1; flex: 1;
  font-weight: 800; font-size: 0.9em; color: #FFF;
  text-shadow: 0 1px 0 #510F06;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lb-prow-score {
  position: relative; z-index: 1; font-weight: 800; font-size: 1em;
  color: #FFF; text-shadow: 0 2px 8px #000;
  display: flex; align-items: center; gap: 4px;
}
.lb-prow-score img { width: 24px; height: 22px; object-fit: contain; }

/* Highlight current user row */
.lb-player-row.lb-is-me {
  border: 2px solid #EDBE4F;
  box-shadow: 0 0 12px rgba(237,190,79,0.35), inset 0 0 8px rgba(237,190,79,0.1);
  border-radius: 12px;
}
.lb-player-row.lb-is-me .lb-prow-name {
  color: #EDBE4F;
}
.lb-sep-line { width: 100%; height: 1px; margin: 0; opacity: 0.3; }
.lb-my-rank-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; margin-top: 6px; border-radius: 10px;
  background: rgba(128,96,6,0.12); border: 1px solid rgba(164,114,25,0.3);
  font-size: 0.8em; color: #C3902D; font-weight: 700;
}

/* Category sections */
.lb-cat-header {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 4px 6px; margin-top: 8px;
  border-bottom: 1px solid rgba(164,114,25,0.3);
}
.lb-cat-header .lb-cat-icon { font-size: 1.4em; }
.lb-cat-header .lb-cat-name {
  flex: 1; font-weight: 800; font-size: 0.95em;
  background: linear-gradient(180deg, #F1BF59, #D69D2A);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.lb-cat-header .lb-cat-period {
  font-size: 0.7em; color: #C3902D; font-weight: 600;
}
.lb-cat-empty-msg {
  font-size: 0.78em; color: #7a6d50; padding: 10px 14px;
  font-style: italic;
}
.lb-cat-my-rank {
  font-size: 0.9em; color: #EDBE4F; font-weight: 800;
  padding: 10px 14px;
  background: rgba(128,96,6,0.2); border: 1.5px solid #A47219;
  border-radius: 10px; margin: 4px 0 2px;
  text-shadow: 0 1px 4px #000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3), inset 0 0 8px rgba(0,0,0,0.2);
}
.lb-cat-tap {
  font-size: 0.72em; color: #EDBE4F; font-weight: 700;
  padding: 6px 14px 10px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(164,114,25,0.12); border: 1px solid rgba(164,114,25,0.3);
  border-radius: 8px; margin: 4px 0 4px 0;
  transition: all 0.15s;
}
.lb-cat-tap:hover {
  background: rgba(164,114,25,0.25); border-color: #A47219;
  color: #FFE545;
}
.lb-cat-tap:active { transform: scale(0.97); }
.lb-empty-msg { font-size: 0.85em; color: #655A3B; padding: 20px 0; text-align: center; }

.lb-card-head {
  display: flex; align-items: center; gap: 0.5em;
  padding-bottom: 0.35em;
  border-bottom: 1px solid rgba(230,168,50,0.15);
}
.lb-card-head .tile-name { text-align: left; flex: 1; font-size: 0.7em; }
.lb-card-head .tile-icon { font-size: 1.4em; }
.lb-card-head .tile-price { font-size: 0.5em; }

.lb-card-top { display: flex; flex-direction: column; gap: 0.2em; }

.lb-card-foot {
  display: flex; align-items: center; gap: 0.6em;
  padding-top: 0.35em;
  border-top: 1px solid rgba(230,168,50,0.15);
}
.lb-card-foot .tile-cost { font-size: 0.55em; }
.lb-card-foot .tile-desc { font-size: 0.45em; }
.lb-card-foot .lb-card-more { margin-left: auto; }

/* --- Compact ranking row inside a card (top-3 preview + HoF) --- */
.lb-row {
  display: flex; align-items: center; gap: 0.5em;
  padding: 0.3em 0.45em;
  border-radius: 8px;
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(230,168,50,0.08);
  font-size: 0.55em;
}
.lb-row.is-top3 {
  background: rgba(230,168,50,0.1);
  border-color: rgba(230,168,50,0.25);
}
.lb-row.is-me {
  background: rgba(98,212,255,0.15);
  border-color: rgba(98,212,255,0.35);
}
.lb-row-rank { min-width: 1.8em; font-weight: 700; color: #f0c050; }
.lb-row-avatar { font-size: 1.2em; line-height: 1; }
.lb-row-name {
  flex: 1; color: #f0e8d0; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lb-row-score { color: #f0c050; font-weight: 700; }

/* --- Full-width horizontal tile used for detail list & my-rank row --- */
.lb-row-tile.panel-tile {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5em;
  padding: 0.45em 0.6em;
  min-height: 0;
}
.lb-row-tile .lb-row-rank { min-width: 2em; font-size: 0.9em; }
.lb-row-tile .lb-row-avatar { font-size: 1.4em; }
.lb-row-tile .lb-row-name { flex: 1; text-align: left; }
.lb-row-tile.is-top3 {
  background: rgba(230,168,50,0.1);
  border-color: rgba(230,168,50,0.3);
}
.lb-row-tile.is-me {
  background: rgba(98,212,255,0.13);
  border-color: rgba(98,212,255,0.35);
}

.lb-detail-separator { margin-top: 0.5em; }

/* --- Countdown + header + back as .panel-tile one-liners --- */
.lb-countdown.panel-tile,
.lb-detail-header.panel-tile,
.lb-bonus-info.panel-tile {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 0.5em 0.6em;
  min-height: 0;
}
.lb-detail-header.panel-tile { justify-content: flex-start; }
.lb-detail-header .tile-name { flex: 1; text-align: left; }

.lb-back.panel-tile {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: 0.4em 0.6em;
  min-height: 0;
  border: 1px solid rgba(230,168,50,0.15);
  color: inherit;
  font: inherit;
  text-align: left;
}
.lb-back:hover { background: rgba(230,168,50,0.15); }

/* Small hints below lists */
.lb-gap-note, .lb-total {
  display: block;
  text-align: center;
  padding: 0.4em 0.2em;
  font-size: 0.55em !important;
}

/* --- Hall of Fame: per-season sub-group inside a category card --- */
.lb-hof-grid { display: flex; flex-direction: column; gap: 0.5em; }
.lb-hof-season { display: flex; flex-direction: column; gap: 0.2em; }
.lb-hof-season-key {
  font-size: 0.5em !important;
  color: rgba(240,232,208,0.6);
  text-transform: uppercase; letter-spacing: 0.5px;
  padding: 0.15em 0;
}

/* ---- Save account dialog (account.js) — wood & gold, matches game modals ---- */
.save-account-card {
  width: min(380px, 88vw);
  background: linear-gradient(170deg, #3a2716 0%, #2a1d12 55%, #1f160d 100%);
  border: 3px solid #A47219;
  border-radius: 18px;
  padding: 1.2em 1.3em 1.1em;
  color: #f4e7c8;
  font-family: 'Fredoka', sans-serif;
  text-align: center;
  box-shadow: 0 12px 40px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,220,150,0.12);
  animation: modal-slide-up 0.25s ease-out;
}
.save-account-card .sa-icon { font-size: 2.2em; line-height: 1; }
.save-account-card .sa-title { font-weight: 800; font-size: 1.35em; color: #FFD36B; margin-top: 0.2em; text-shadow: 0 2px 0 #5a3a10; }
.save-account-card .sa-sub { color: #E8C594; font-size: 0.92em; margin: 0.4em 0 0.9em; line-height: 1.35; }
.save-account-card .sa-form { display: grid; gap: 0.55em; text-align: left; }
.save-account-card label { display: grid; gap: 0.2em; font-size: 0.8em; font-weight: 700; color: #C3902D; text-transform: uppercase; letter-spacing: 0.04em; }
.save-account-card input {
  font: inherit; font-size: 1.05rem; text-transform: none; letter-spacing: 0;
  padding: 0.55em 0.7em; border-radius: 10px;
  background: #1a120a; color: #fff3d6; border: 1px solid #655A3B;
}
.save-account-card input:focus { outline: 2px solid #FFAD0E; outline-offset: 1px; }
.save-account-card .sa-err { min-height: 1.1em; color: #ff8a73; font-size: 0.85em; }
.save-account-card .sa-actions { display: flex; gap: 0.6em; justify-content: flex-end; }
.save-account-card button { font: inherit; font-weight: 800; border-radius: 12px; padding: 0.55em 1.1em; cursor: pointer; }
.save-account-card .sa-later { background: transparent; color: #E8C594; border: 1px solid #655A3B; }
.save-account-card .sa-save { background: linear-gradient(180deg, #7ccf4a, #3f9a24); color: #fff; border: 2px solid #2d6e18; box-shadow: 0 3px 0 #23560f; }
.save-account-card .sa-save:disabled { opacity: 0.6; }


/* ===== Design pass A (2026-11-01) ===== */
/* Fill the letterbox bars with a soft, dimmed copy of the scene. */
html { background: #0a0806; }
body { background: transparent !important; }
body::before {
  content: ''; position: fixed; inset: -40px; z-index: -1; pointer-events: none;
  background: url('media/uploads/optimized/background-wide.webp') center / cover no-repeat;
  filter: blur(22px) brightness(0.45) saturate(1.1);
}
html.is-mob body::before { background-image: url('media/uploads/optimized/background-mobil.webp'); }

/* Only the next purchasable slot is visible. */
.pot-slot-wrap.is-extra-empty { opacity: 0 !important; pointer-events: none !important; }
.pot-slot-wrap.is-extra-empty * { pointer-events: none !important; }

/* Mobile HUD values under the icons. */
.mob-hud-value .css-hud-value {
  font-family: 'Fredoka', sans-serif; font-weight: 800; font-size: 11px; line-height: 1;
  color: #fff7df; text-align: center; white-space: nowrap;
  text-shadow: 0 1px 0 #3a2410, 0 0 4px rgba(0,0,0,0.8);
}

/* Weekend banner in the game's wood & gold instead of neon purple. */
.weekend-banner {
  background: linear-gradient(180deg, #6b4423 0%, #4a2e17 100%) !important;
  border: 2px solid #A47219 !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,220,150,0.25) !important;
  color: #FFE6A8 !important;
  animation: none !important;
}
html.is-mob .weekend-banner { top: 17.5% !important; font-size: 0.62em !important; }

/* Coin icon next to shop prices. */
.coin-ico { height: 1.05em; width: auto; vertical-align: -0.18em; margin-left: 0.15em; }

/* Daily reward "Collect": game-style green button instead of flat blue. */
.daily-claim-btn {
  background: linear-gradient(180deg, #7ccf4a, #3f9a24) !important;
  border: 2px solid #2d6e18 !important;
  box-shadow: 0 3px 0 #23560f !important;
  color: #fff !important; font-weight: 800 !important; border-radius: 12px !important;
}

/* ===== Design pass B (2026-11-01): one visual family for every popup =====
   Plant panel, seed/soil pickers and tutorial cards used flat dark web cards;
   they now share the wood + gold language of the Shop/Daily/Activities frames.
   No backdrop-filter (it caused lag on the panel before). */
.plant-detail-panel,
.seed-picker,
.soil-picker,
.onb-card,
.need-diamonds-overlay > div {
  background: linear-gradient(170deg, #3d2a18 0%, #2b1e12 55%, #1f160d 100%) !important;
  border: 3px solid #A47219 !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,220,150,0.14), inset 0 0 0 1px rgba(60,35,10,0.6) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  color: #f4e7c8;
}
.plant-detail-panel { width: min(360px, 92vw); border-radius: 20px; }
.onb-card { border-radius: 18px; }

/* Bigger, tactile action buttons in the plant panel */
.plant-detail-actions { gap: 8px !important; justify-content: center; }
.detail-action-btn {
  min-width: 74px; padding: 10px 12px 8px;
  border: 2px solid #8a5f1c;
  background: linear-gradient(180deg, #5c3d1f 0%, #3b2612 100%);
  box-shadow: 0 3px 0 #24170a, inset 0 1px 0 rgba(255,220,150,0.18);
  border-radius: 14px;
}
.detail-action-btn:hover { background: linear-gradient(180deg, #6b4825 0%, #452d15 100%); }
.detail-action-btn .da-icon { font-size: 26px; }
.detail-action-btn .da-label { font-size: 11px; color: #FFD36B; }
.detail-action-btn.water-btn,
.detail-action-btn.harvest-btn,
.detail-action-btn.seed-collect-btn {
  border-color: #2d6e18;
  background: linear-gradient(180deg, #7ccf4a 0%, #3f9a24 100%);
  box-shadow: 0 3px 0 #23560f, inset 0 1px 0 rgba(255,255,255,0.3);
}
.detail-action-btn.water-btn .da-label,
.detail-action-btn.harvest-btn .da-label,
.detail-action-btn.seed-collect-btn .da-label { color: #fff; text-shadow: 0 1px 0 #23560f; }

/* Tutorial pointer hand must not cover the text it points at */
.onb-pointer { opacity: 0.92; }


/* ===== Plant panel = "Poppup" design (Plantoria_Update V5) ===== */
.plant-detail-panel {
  width: clamp(340px, 32vw, 620px) !important;
  padding: clamp(14px, 1.6vw, 26px) !important;
  gap: clamp(10px, 1vw, 16px) !important;
  border: 2px solid #c48b25 !important;
  border-radius: 18px !important;
  background: #2b2920 url('media/uploads/optimized/modal-background-verde.webp') center / cover !important;
  box-shadow: 0 16px 50px rgba(0,0,0,0.65), inset 0 0 0 1px rgba(0,0,0,0.35) !important;
  font-family: 'Fredoka', sans-serif;
}
.plant-detail-header { align-items: flex-start !important; gap: clamp(12px, 1.2vw, 20px) !important; position: relative; }
.plant-detail-thumb {
  width: clamp(84px, 8vw, 140px) !important; height: clamp(92px, 8.8vw, 156px) !important;
  border-radius: 10px !important;
  background-color: rgba(0,0,0,0.18) !important;
  border: 1px solid rgba(232,197,148,0.28) !important;
  background-size: 82% !important;
}
.plant-detail-name {
  font-size: clamp(22px, 2.2vw, 40px) !important; font-weight: 700 !important;
  color: #f0c97a !important; line-height: 1.05 !important;
  text-shadow: 0 2px 0 rgba(0,0,0,0.35);
  padding-right: 44px;
}
.plant-detail-stage {
  display: inline-block; margin-top: 6px !important;
  padding: 2px 8px; border-radius: 5px;
  background: linear-gradient(180deg, #93dc2c, #5aa51b);
  color: #fff !important; font-size: clamp(9px, 0.7vw, 12px) !important; font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35);
}
.plant-detail-stage.is-dead { background: linear-gradient(180deg, #b86a4a, #7d3b22); }
.plant-detail-progress-label { color: #e8c594; font-size: clamp(12px, 1vw, 19px); margin-top: 8px; }
.plant-detail-dots { justify-content: flex-start !important; gap: clamp(8px, 0.7vw, 13px) !important; margin-top: 6px; }
.plant-detail-dots .pot-stage-dot {
  width: clamp(12px, 1vw, 18px) !important; height: clamp(12px, 1vw, 18px) !important; flex: 0 0 auto !important;
  background: #171615 !important; border: none !important; box-shadow: inset 0 1px 2px rgba(0,0,0,0.6) !important;
}
.plant-detail-dots .pot-stage-dot.completed { background: #90dd20 !important; box-shadow: 0 0 6px rgba(144,221,32,0.5) !important; }
.plant-detail-dots .pot-stage-dot.current { background: #ffc711 !important; box-shadow: 0 0 10px rgba(255,199,17,0.75) !important; }
.plant-detail-close {
  position: absolute; top: 0; right: 0;
  width: clamp(32px, 2.6vw, 46px) !important; height: clamp(28px, 2.3vw, 40px) !important;
  border: none !important; border-radius: 0 !important;
  background: url('media/uploads/optimized/ui-close-btn.webp') center / contain no-repeat !important;
  color: transparent !important; font-size: 0 !important;
}
.plant-detail-close:hover { filter: brightness(1.1); background-color: transparent !important; }

.plant-detail-section {
  padding: clamp(10px, 1vw, 16px) clamp(14px, 1.3vw, 24px) !important;
  border-radius: 14px !important;
  background: rgba(255,240,200,0.035) !important;
  border: 1px solid rgba(232,197,148,0.22) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 2px 6px rgba(0,0,0,0.25);
}
.plant-detail-section-label {
  color: #e8c594 !important; font-size: clamp(13px, 1.1vw, 22px) !important;
  font-weight: 500 !important; letter-spacing: 0.02em !important;
}
/* Water: real drops, empty ones outlined */
.plant-detail-water { gap: 6px !important; }
.plant-detail-water .water-drop {
  width: auto !important; height: auto !important; flex: 0 0 auto !important;
  transform: none !important; border: none !important; border-radius: 0 !important;
  background: none !important; box-shadow: none !important; overflow: visible !important;
  font-size: clamp(20px, 1.8vw, 34px) !important; color: initial !important; line-height: 1;
}
.plant-detail-water .water-drop::before {
  content: '💧'; position: static !important; inset: auto !important; background: none !important;
  font-size: inherit; display: block;
}
.plant-detail-water .water-drop:not(.filled)::before { filter: grayscale(1) brightness(0.55); opacity: 0.45; }
/* Growth bar */
.plant-detail-timer .pot-progress-bar {
  height: clamp(12px, 1.1vw, 22px) !important; border-radius: 999px !important;
  background: #4c4536 !important; box-shadow: inset 0 2px 3px rgba(0,0,0,0.4) !important;
}
.plant-detail-timer .pot-progress-fill {
  background: linear-gradient(180deg, #fec901 0%, #ed9f01 55%, #dd9001 100%) !important;
  box-shadow: 0 0 8px rgba(254,201,1,0.35) !important;
}
.plant-detail-timer .pot-progress-time {
  color: #e8b14a !important; font-family: 'Fredoka', sans-serif !important;
  font-weight: 700 !important; font-size: clamp(14px, 1.2vw, 24px) !important; min-width: 3ch;
}
/* Status line: lime-bordered card */
.plant-detail-status {
  border-radius: 12px !important; padding: 10px 14px !important; text-align: center;
  font-weight: 700 !important; font-size: clamp(12px, 0.95vw, 17px) !important; color: #fff !important;
  background: rgba(60,70,30,0.55) !important; border: 2px solid #8fd630 !important;
}
.plant-detail-status.status-danger { border-color: #e2584a !important; background: rgba(90,30,20,0.55) !important; }
.plant-detail-status.status-water { border-color: #3aa7e8 !important; background: rgba(20,50,70,0.5) !important; }
.plant-detail-status.status-growing { border-color: #c48b25 !important; background: rgba(70,50,15,0.5) !important; }

/* Action tiles */
.plant-detail-actions { display: flex !important; flex-wrap: wrap; justify-content: center !important; gap: clamp(6px, 0.6vw, 10px) !important; }
.plant-detail-actions .detail-action-btn {
  width: clamp(70px, 6.8vw, 130px); min-width: 0 !important;
  aspect-ratio: 130 / 112; padding: 6px 4px !important;
  justify-content: center; gap: 2px !important;
  background: #1b1612 !important; border: 2px solid #8a6a40 !important;
  border-radius: 8px !important; box-shadow: 0 3px 8px rgba(0,0,0,0.35) !important;
}
.plant-detail-actions .detail-action-btn:hover { transform: translateY(-2px); filter: brightness(1.12); }
.plant-detail-actions .detail-action-btn .da-icon { font-size: clamp(26px, 2.4vw, 46px) !important; }
.plant-detail-actions .detail-action-btn .da-label {
  color: #e8c594 !important; font-size: clamp(11px, 1.05vw, 21px) !important; font-weight: 600 !important;
  text-shadow: none !important; white-space: nowrap;
}
.plant-detail-actions .water-btn { border-color: #3aa7e8 !important; }
.plant-detail-actions .harvest-btn { border-color: #a5445f !important; }
.plant-detail-actions .pollen-btn { border-color: #7e3e99 !important; }
.plant-detail-actions .pollinate-btn { border-color: #b8344f !important; }
.plant-detail-actions .fert-btn { border-color: #8f4b40 !important; }
.plant-detail-actions .seed-collect-btn { border-color: #8fd630 !important; }
.plant-detail-actions .insecticide-btn { border-color: #b07ad0 !important; }
.plant-detail-actions .instant-grow-btn { border-color: #3fb6e8 !important; width: clamp(110px, 10vw, 190px); }
.plant-detail-actions .water-btn .da-label,
.plant-detail-actions .harvest-btn .da-label,
.plant-detail-actions .seed-collect-btn .da-label { color: #e8c594 !important; }
/* Poppup design: fixes after first live check */
.plant-detail-panel {
  /* The felt image has its own inner frame: zoom into its seamless centre. */
  background: #2b2920 url('media/uploads/optimized/modal-background-verde.webp') center / 320% auto !important;
  max-height: 94vh !important; overflow-y: auto !important; scrollbar-width: none;
}
.plant-detail-panel::-webkit-scrollbar { display: none; }
.plant-detail-status.status-growing { display: none !important; }
.plant-detail-actions .detail-action-btn {
  aspect-ratio: auto !important;
  width: clamp(68px, 6.6vw, 124px) !important;
  height: clamp(60px, 5.8vw, 108px) !important;
  flex: 0 0 auto !important;
}
.plant-detail-actions .instant-grow-btn { width: clamp(96px, 8.6vw, 160px) !important; }
.plant-detail-actions .instant-grow-btn .da-label,
.plant-detail-actions .revive-btn .da-label { white-space: normal !important; line-height: 1.05; font-size: clamp(10px, 0.85vw, 17px) !important; text-align: center; }
.plant-detail-water .water-drop { margin: 0 !important; }

/* Plant panel tweaks: title-case labels, darker felt like the mockup */
.plant-detail-actions .detail-action-btn .da-label { text-transform: none !important; letter-spacing: 0 !important; }
.plant-detail-panel {
  background:
    linear-gradient(rgba(30,28,20,0.45), rgba(30,28,20,0.45)),
    #2b2920 url('media/uploads/optimized/modal-background-verde.webp') center / 320% auto !important;
}

/* ===== Daily Reward = V5 "Daily Reward" design ===== */
.panel-grid:has(> .dl-tile) { gap: clamp(6px, 0.8vw, 12px) !important; }
.dl-tile {
  position: relative;
  display: flex !important; flex-direction: column; align-items: center; justify-content: space-between;
  gap: 6px; padding: 0 0 8px !important; overflow: visible !important;
  background: rgba(255,240,200,0.05) !important;
  border: 2px solid rgba(232,197,148,0.18) !important; border-radius: 10px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3) !important;
  opacity: 1 !important; filter: none !important;
}
.dl-day {
  width: 100%; padding: 4px 0; text-align: center;
  font-weight: 800; font-size: clamp(10px, 0.9vw, 16px); color: #fff;
  background: rgba(255,255,255,0.06); border-radius: 8px 8px 0 0;
  text-shadow: 0 1px 0 rgba(0,0,0,0.5);
}
.dl-icon { display: grid; place-items: center; min-height: clamp(34px, 3.4vw, 60px); }
.dl-gem { width: clamp(34px, 3.2vw, 58px); height: auto; filter: drop-shadow(0 3px 6px rgba(0,0,0,0.4)); }
.dl-gift { font-size: clamp(30px, 3vw, 54px); }
.dl-gem-sm { width: 1.1em; vertical-align: -0.15em; }
.dl-amount {
  min-width: 70%; text-align: center; padding: 3px 6px; border-radius: 6px;
  background: rgba(0,0,0,0.35);
  color: #f0c97a; font-weight: 800; font-size: clamp(10px, 0.95vw, 17px); white-space: nowrap;
}
.dl-crate { font-size: 0.85em; }
.dl-claimed { border-color: #6cb33a !important; background: rgba(110,180,60,0.12) !important; }
.dl-claimed .dl-day { background: rgba(110,180,60,0.25); }
.dl-check {
  position: absolute; top: -9px; left: -9px; z-index: 2;
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 900; color: #fff;
  background: linear-gradient(180deg, #8fd630, #4f9a1c); border: 2px solid #1b2b0c;
}
.dl-current { border-color: #e6a832 !important; background: rgba(230,168,50,0.14) !important; box-shadow: 0 0 14px rgba(230,168,50,0.35) !important; }
.dl-current .dl-day { background: rgba(230,168,50,0.35); }
.dl-future { opacity: 0.88 !important; }
.daily-claim-btn {
  display: block; width: auto !important; min-width: 40%; margin: 6px auto 0;
  padding: 0.45em 2.4em !important; font-size: clamp(16px, 1.5vw, 26px) !important;
  background: linear-gradient(180deg, #ffe07a 0%, #f2b627 55%, #d98e0f 100%) !important;
  border: 3px solid #7a4a0c !important; border-radius: 14px !important;
  box-shadow: 0 4px 0 #5a3507, inset 0 2px 0 rgba(255,255,255,0.5) !important;
  color: #fff !important; font-weight: 800 !important;
  text-shadow: -1px -1px 0 #5a3507, 1px -1px 0 #5a3507, -1px 1px 0 #5a3507, 1px 2px 0 #5a3507 !important;
}

/* Wood modals: the box-shadow sat on a transparent rectangle larger than the
   wood art, so it read as a pale "double frame". Shadow the art itself instead. */
.game-modal.builder-modal { box-shadow: none !important; }
.game-modal.builder-modal .bm-layer img { filter: drop-shadow(0 10px 24px rgba(0,0,0,0.55)); }

/* ===== Shop + Inventory cards = "Shop_Seed" / "Inventory" designs ===== */
.game-modal-body .panel-grid:has(> .shop-tile),
.game-modal-body .panel-grid:has(.tile-count) {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0.45em !important;
}
html.is-mob .game-modal-body .panel-grid:has(> .shop-tile),
html.is-mob .game-modal-body .panel-grid:has(.tile-count) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }

.game-modal-body .panel-tile.shop-tile,
.game-modal-body .panel-grid:has(.tile-count) > .panel-tile {
  justify-content: flex-start !important;
  gap: 0.18em !important;
  padding: 0.45em 0.2em 0 !important;
  min-height: 0 !important;
  border: 2px solid #b38a3c !important;
  border-radius: 10px !important;
  background:
    radial-gradient(ellipse 55% 38% at 50% 26%, rgba(255,196,90,0.28), transparent 70%),
    rgba(18,14,9,0.55) !important;
  box-shadow: 0 3px 8px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,220,150,0.12) !important;
}
/* lighter bottom band holding the Buy button (shop only) */
.game-modal-body .panel-tile.shop-tile {
  background:
    linear-gradient(to bottom, transparent 77%, rgba(160,110,45,0.38) 77%),
    radial-gradient(ellipse 55% 38% at 50% 26%, rgba(255,196,90,0.28), transparent 70%),
    rgba(18,14,9,0.55) !important;
}
.game-modal-body .panel-grid:has(.tile-count) > .panel-tile { padding-bottom: 0.4em !important; }
.game-modal-body .panel-tile:hover { border-color: #e6b44e !important; transform: translateY(-1px); }
.game-modal-body .panel-tile.shop-tile img.tile-icon-img,
.game-modal-body .panel-grid:has(.tile-count) img.tile-icon-img { width: 2em; height: 2em; }
.game-modal-body .panel-tile .tile-name { color: #fff !important; font-weight: 700 !important; font-size: 0.48em !important; text-shadow: 0 1px 0 rgba(0,0,0,0.5); }
.game-modal-body .panel-tile .tile-cost,
.game-modal-body .panel-tile .tile-count {
  display: inline-flex; align-items: center; gap: 0.25em;
  padding: 0.15em 0.7em; border-radius: 6px;
  background: rgba(0,0,0,0.42);
  color: #f0c97a !important; font-weight: 800 !important; font-size: 0.45em !important;
}
.game-modal-body .panel-tile .tile-cost .coin-ico { order: -1; margin: 0; height: 1.2em; }
.game-modal-body .panel-tile .tile-action-btn.buy {
  margin: 0.55em 0 0.45em !important;
  padding: 0.2em 1.6em !important;
  background: linear-gradient(180deg, #ffe07a 0%, #f2b627 55%, #d98e0f 100%) !important;
  border: 2px solid #7a4a0c !important; border-radius: 8px !important;
  color: #4a2a05 !important; text-transform: none !important; letter-spacing: 0 !important;
  font-size: 0.42em !important; font-weight: 800 !important;
  box-shadow: 0 2px 0 #5a3507, inset 0 1px 0 rgba(255,255,255,0.5) !important;
}
.game-modal-body .panel-tile .tile-action-btn.buy svg,
.game-modal-body .panel-tile .tile-action-btn.buy img { display: none; }
.game-modal-body .panel-tile.disabled { filter: grayscale(0.35) brightness(0.85); }
/* Shop/Inventory cards: type sizes closer to the mockup */
.game-modal-body .panel-tile .tile-name { font-size: 0.66em !important; margin-top: 0.1em; }
.game-modal-body .panel-tile .tile-cost,
.game-modal-body .panel-tile .tile-count { font-size: 0.6em !important; padding: 0.12em 0.8em; }
.game-modal-body .panel-tile .tile-action-btn.buy { font-size: 0.58em !important; padding: 0.15em 1.9em !important; margin: 0.5em 0 0.4em !important; }
.game-modal-body .panel-tile.shop-tile img.tile-icon-img,
.game-modal-body .panel-grid:has(.tile-count) img.tile-icon-img { width: 1.75em; height: 1.75em; }
.game-modal-body .panel-tile.shop-tile {
  background:
    linear-gradient(to bottom, transparent 74%, rgba(160,110,45,0.38) 74%),
    radial-gradient(ellipse 55% 38% at 50% 24%, rgba(255,196,90,0.28), transparent 70%),
    rgba(18,14,9,0.55) !important;
}
.game-modal-body .panel-tile .tile-action-btn.sell {
  margin: 0.45em 0 0.1em !important; padding: 0.15em 1.6em !important;
  background: linear-gradient(180deg, #ffe07a 0%, #f2b627 55%, #d98e0f 100%) !important;
  border: 2px solid #7a4a0c !important; border-radius: 8px !important;
  color: #4a2a05 !important; text-transform: none !important; letter-spacing: 0 !important;
  font-size: 0.55em !important; font-weight: 800 !important;
  box-shadow: 0 2px 0 #5a3507, inset 0 1px 0 rgba(255,255,255,0.5) !important;
}


/* ===== Game icons (icons.js) replacing emoji ===== */
img.gi { display: inline-block; width: auto; height: 1.2em; vertical-align: -0.22em; object-fit: contain; pointer-events: none; user-select: none; }
img.gi-inline { height: 1.15em; margin: 0 0.05em; }
.reward-popup-icon img.gi { height: 2.4em; vertical-align: middle; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.45)); }
.reward-popup-icon img.gi-medal { height: 3.4em; }
.reward-popup-row-icon img.gi { height: 1.5em; vertical-align: middle; }
.tile-icon img.gi { height: 2.2em; vertical-align: middle; }
.tile-icon img.gi-medal { height: 2.8em; }
img.gi-locked { filter: grayscale(1) brightness(0.55); opacity: 0.75; }
.gh-chip-icon img.gi, .upgrade-icon img.gi { height: 1.6em; vertical-align: middle; }
img.gi-crate-big { height: 1.15em; vertical-align: middle; }
img.gi-badge { height: 1.25em; vertical-align: middle; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.5)); }
img.gi-avatar { height: 100%; width: 100%; max-height: 1.6em; max-width: 1.6em; border-radius: 50%; object-fit: cover; vertical-align: middle; }
[data-action="hud-avatar"] img.gi-avatar { max-height: none; max-width: none; height: 1.55em; width: 1.55em; }
.avatar-option img.gi-avatar { height: 2.4em; width: 2.4em; max-height: none; max-width: none; }
img.gi-npc { height: 1.4em; width: 1.4em; border-radius: 50%; vertical-align: middle; }
img.gi-fx { height: 1em; width: 1em; }

.avatar-current img.gi-avatar-big { height: 3.2em; width: 3.2em; max-height: none; max-width: none; box-shadow: 0 0 0 3px #c48b25, 0 6px 16px rgba(0,0,0,0.5); }
/* Plant panel action tiles: game art instead of emoji */
.plant-detail-actions .da-icon img,
.plant-detail-actions .da-icon img.toast-plant-img { height: clamp(28px, 2.6vw, 50px) !important; width: auto !important; max-width: 100%; object-fit: contain; vertical-align: middle; margin: 0 !important; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.45)); }
img.gi-round { border-radius: 50%; }
.plant-detail-actions .da-icon img.toast-plant-img { background: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; padding: 0 !important; }


/* ===== UI symbols (inline SVG from icons.js) ===== */
svg.gi-svg { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -0.17em; fill: currentColor; flex: 0 0 auto; }
svg.gi-inline-svg { width: 1em; height: 1em; }
svg.gi-liked { color: #e85d75; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4)); }
svg.gi-unliked { color: #f0e8d0; }
svg.gi-online { color: #6cd13a; width: 0.8em; height: 0.8em; vertical-align: -0.05em; }
svg.gi-offline { color: #6b6b6b; width: 0.8em; height: 0.8em; vertical-align: -0.05em; }
.plant-card-like svg.gi-svg, [data-spc-love] svg.gi-svg { width: 1.4em; height: 1.4em; }
.onb-emoji svg.gi-svg { width: 1.6em; height: 1.6em; color: #f0c97a; }
.entry-btn svg.gi-svg { color: #f0c97a; }
.settings-toggle svg.gi-svg, .settings-invite-btn svg.gi-svg { color: #f0c97a; }
img.gi-plant { height: 1.25em; vertical-align: -0.3em; }

/* Settings action buttons: readable white text on the coloured buttons */
.settings-invite-btn { color: #fff !important; -webkit-text-fill-color: #fff !important; background-clip: border-box !important; -webkit-background-clip: border-box !important; text-shadow: 0 1px 0 rgba(0,0,0,0.45) !important; font-weight: 800 !important; }
.settings-invite-btn span { color: rgba(255,255,255,0.85) !important; -webkit-text-fill-color: rgba(255,255,255,0.85) !important; }
.settings-invite-btn svg.gi-svg { color: #fff !important; }

/* Shop QA: one icon size for every card, band only on cards with a Buy button */
.game-modal-body .panel-tile .tile-icon { display: grid; place-items: center; height: 1.85em; line-height: 1; font-size: 1em; }
.game-modal-body .panel-tile .tile-icon img,
.game-modal-body .panel-tile img.tile-icon-img { height: 1.75em !important; width: auto !important; max-width: 100%; object-fit: contain; }
.game-modal-body .panel-tile.shop-tile:not(:has(.tile-action-btn)) {
  background: radial-gradient(ellipse 55% 38% at 50% 24%, rgba(255,196,90,0.28), transparent 70%), rgba(18,14,9,0.55) !important;
  padding-bottom: 0.45em !important;
}
.game-modal-body .panel-tile .tile-desc { font-size: 0.4em !important; line-height: 1.2; min-height: 2.4em; }

.game-modal-body .panel-tile .tile-icon { font-size: 1.4em !important; height: 1.9em; }
.game-modal-body .panel-tile .tile-icon img { height: 1.75em !important; }
.purchase-icon img.gi { height: 2.6em; }

/* Shop cards: action/price button always pinned to the card bottom so rows line up */
.game-modal-body .panel-tile.shop-tile > :last-child { margin-top: auto !important; }

/* ===== Mobile fit pass (texts must stay inside their buttons) ===== */
/* Modal tabs: shrink text to fit instead of spilling out of the tab art */
html.is-mob .game-modal-tab { font-size: clamp(11px, 3.4vw, 15px) !important; padding-left: 4px !important; padding-right: 4px !important; letter-spacing: -0.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.game-modal-tab { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* HUD player name: keep clear of the avatar frame, never overflow the plate */
html.is-mob [data-action="hud-username"] .css-hud-value,
html.is-mob [data-action="hud-username"] .css-text { padding-left: 7px; font-size: 12px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; display: block; }
/* Weekend banner on phones: compact but complete (label + both chips) */
html.is-mob .weekend-banner { width: max-content !important; max-width: 92vw; padding: 3px 6px 3px 9px !important; gap: 5px !important; }
html.is-mob .weekend-banner .weekend-label { display: inline !important; font-size: 0.95em; }
html.is-mob .weekend-banner .weekend-chip { padding: 1px 6px !important; }
/* Achievement / shop cards: long names wrap inside the card */
.game-modal-body .panel-tile .tile-name { white-space: normal !important; overflow-wrap: anywhere; word-break: normal; hyphens: auto; }
html.is-mob .game-modal-body .panel-tile .tile-name { font-size: 0.6em !important; }
html.is-mob .game-modal-body .panel-tile .tile-desc { font-size: 0.42em !important; }
/* Plant panel tiles: long labels (Instant Grow, Revive) wrap instead of spilling */
.plant-detail-actions .detail-action-btn .da-label { white-space: normal !important; text-align: center; line-height: 1.05; }
html.is-mob .plant-detail-actions .instant-grow-btn .da-label,
html.is-mob .plant-detail-actions .revive-btn .da-label { font-size: 11px !important; }
/* Leaderboard sub-tabs (icon + text): smaller on phones instead of cut off */
.lb-subtabs .game-modal-tab { overflow: visible !important; text-overflow: clip !important; }
html.is-mob .lb-subtabs .game-modal-tab { font-size: 10.5px !important; gap: 3px !important; padding-left: 2px !important; padding-right: 2px !important; }
html.is-mob .lb-subtabs .game-modal-tab img { width: 16px !important; height: 16px !important; }

/* HUD player name: use the whole plate, left-aligned after the avatar (padding set in fitHudName) */
[data-action="hud-username"] { width: 19.5% !important; }
[data-action="hud-username"] .css-hud-value,
[data-action="hud-username"] .css-text { display: block !important; width: 100%; box-sizing: border-box; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Diamond sinks: crate skip, recipe reveal */
.crate-skip-btn { position: relative; z-index: 1; border: 1px solid #c48b25; background: linear-gradient(#5b3a14, #3d260c); color: #f0c97a; font-weight: 800; font-size: 0.68em; border-radius: 999px; padding: 3px 9px; cursor: pointer; white-space: nowrap; }
.crate-skip-btn img, .crate-skip-btn svg { height: 1.1em; vertical-align: -0.2em; }
.recipe-reveal { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 12px; }
.recipe-reveal-btn { align-self: center; border: 2px solid #c48b25; background: linear-gradient(#6b4518, #42290c); color: #f0c97a; font-weight: 800; border-radius: 999px; padding: 7px 16px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.recipe-reveal-btn svg, .recipe-reveal-btn img { height: 1.15em; }
.recipe-card { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(0,0,0,0.28); border: 1px solid rgba(196,139,37,0.5); color: #f3e6c4; }
.recipe-card img { width: 46px; height: 46px; object-fit: contain; filter: brightness(0.25) drop-shadow(0 0 4px rgba(240,201,122,0.6)); }
.recipe-card strong { display: block; color: #f0c97a; }
.recipe-card span { font-size: 0.85em; opacity: 0.85; }

/* Plant detail open during the tutorial: the action buttons (Water, Boost, Harvest) sit in the lower half of
   the panel, right where the banner is. Shrink the banner to a one-line strip at the very bottom; the pointer
   still shows which button to tap. (2.11.2026, phones 390x664 had Water/Boost hidden under the banner) */
body:has(.plant-detail-overlay.open) .onb-card-banner {
  max-height: none;
  padding: 8px 14px;
  bottom: max(8px, env(safe-area-inset-bottom, 0px));
  width: min(92vw, 360px);
}
body:has(.plant-detail-overlay.open) .onb-card-banner .onb-emoji,
body:has(.plant-detail-overlay.open) .onb-card-banner .onb-body,
body:has(.plant-detail-overlay.open) .onb-card-banner .onb-wait,
body:has(.plant-detail-overlay.open) .onb-card-banner .onb-progress,
body:has(.plant-detail-overlay.open) .onb-card-banner .onb-actions { display: none; }
body:has(.plant-detail-overlay.open) .onb-card-banner .onb-title { font-size: 15px; margin: 0; }


/* ===== Tutorial: game art instead of emoji, side pointer on phones ===== */
.onb-emoji img.onb-art { height: 1.15em; width: auto; max-width: 2.2em; object-fit: contain; vertical-align: middle; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.45)); }
.onb-emoji img.onb-art-logo { height: 2em; max-width: 4em; }
.onb-body img.gi-inline { height: 1.2em; vertical-align: -0.25em; }
.onb-pointer.onb-pointer-up { animation-name: onbPointerUp; }
@keyframes onbPointerUp {
  0%, 100% { transform: translate(-50%, 0) rotate(180deg); }
  50%      { transform: translate(-50%, 12px) rotate(180deg); }
}
/* "Instant Grow 3💎": the price wraps as one piece, never "(3" / "💎)" */
.detail-action-btn .da-cost { display: inline-block; white-space: nowrap; }
/* Short phones (iPhone SE): the bottom banner scrolled and hid "Skip tutorial" */
@media (max-height: 720px) {
  .onb-card-banner { max-height: 48vh; padding: 10px 14px 8px; }
  .onb-card-banner .onb-emoji { display: none; }
  .onb-card-banner .onb-progress { margin-bottom: 4px; }
}

/* Desktop HUD (2.11.2026): the avatar did not fill the round opening of the profile frame, and the
   username started under the avatar ("Player" hidden) and sat a bit high on the plate. */
.game-container:not(.portrait-mode) .layout-el[data-action="hud-avatar"] .gi-avatar {
  /* Centred on the frame's round opening (it sat ~2.5px left of the avatar's centre,
     leaving a light crescent on one side). The avatar art is a circle at ~91.5% of
     its square, so 1.21 makes the drawn circle just cover the opening's edge. */
  transform: translate(-3.6%, 0.85%) scale(1.21);
}
.game-container:not(.portrait-mode) .layout-el[data-action="hud-username"] {
  left: 9.2% !important;
  width: 14.6% !important;
  top: calc(6.44% + 7px) !important;
}
/* Planted pot: arrow beside the pot (pointing at it), never over the plant art */
.onb-pointer.onb-pointer-left { animation-name: onbPointerLeft; }
.onb-pointer.onb-pointer-right { animation-name: onbPointerRight; }
@keyframes onbPointerLeft {
  0%, 100% { transform: translate(-50%, 0) rotate(90deg); }
  50%      { transform: translate(calc(-50% + 12px), 0) rotate(90deg); }
}
@keyframes onbPointerRight {
  0%, 100% { transform: translate(-50%, 0) rotate(-90deg); }
  50%      { transform: translate(calc(-50% - 12px), 0) rotate(-90deg); }
}

/* Tutorial pointer v2 (2.11.2026): a chunky gold arrow in the game's gold-frame style instead of the thin
   cream icon, with a soft pulsing glow. Lifted a little so its tip stops just above the button to tap. */
.onb-pointer { opacity: 1; font-size: 0; filter: drop-shadow(0 5px 6px rgba(40, 20, 0, 0.55)); }
.onb-pointer > svg { display: none; }
.onb-pointer::before {
  content: '';
  display: block;
  width: 50px;
  height: 61px;
  margin-top: -6px;
  background: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2056%2068%22%3E%3Cdefs%3E%3ClinearGradient%20id=%22g%22%20x1=%220%22%20y1=%220%22%20x2=%220%22%20y2=%221%22%3E%3Cstop%20offset=%220%22%20stop-color=%22%23fff2b8%22/%3E%3Cstop%20offset=%22.45%22%20stop-color=%22%23f7c34a%22/%3E%3Cstop%20offset=%221%22%20stop-color=%22%23d0800f%22/%3E%3C/linearGradient%3E%3ClinearGradient%20id=%22s%22%20x1=%220%22%20y1=%220%22%20x2=%221%22%20y2=%220%22%3E%3Cstop%20offset=%220%22%20stop-color=%22%23fff%22%20stop-opacity=%22.75%22/%3E%3Cstop%20offset=%221%22%20stop-color=%22%23fff%22%20stop-opacity=%220%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath%20d=%22M20%205Q20%203%2022%203H34Q36%203%2036%205V33H48Q51%2033%2049%2036L30%2063Q28%2066%2026%2063L7%2036Q5%2033%208%2033H20Z%22%20fill=%22url%28%23g%29%22%20stroke=%22%235a3208%22%20stroke-width=%223.2%22%20stroke-linejoin=%22round%22/%3E%3Cpath%20d=%22M23.5%207V35H13.5L26%2053%22%20fill=%22none%22%20stroke=%22url%28%23s%29%22%20stroke-width=%223%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22/%3E%3C/svg%3E") center / contain no-repeat;
  animation: onbArrowGlow 1.0s ease-in-out infinite;
}
@keyframes onbArrowGlow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(255, 214, 90, 0)); }
  50%      { filter: drop-shadow(0 0 10px rgba(255, 214, 90, 0.95)); }
}
@media (max-width: 600px) { .onb-pointer::before { width: 42px; height: 51px; } }
@media (prefers-reduced-motion: reduce) { .onb-pointer, .onb-pointer::before { animation: none; } }
/* The JS places the arrow box 64px above the target (old 64px icon). The gold arrow is shorter, so on phones
   push the down-pointing one lower until its tip touches the pot rim instead of floating above it. */
@media (max-width: 600px) {
  .onb-pointer:not(.onb-pointer-up):not(.onb-pointer-left):not(.onb-pointer-right)::before { margin-top: 18px; }
}
/* Side arrows (planted pot): the box sits ~34px from the pot; move the arrow along its own axis toward the pot
   (the box is rotated, so margin-top on ::before pushes the arrow toward its tip). */
.onb-pointer.onb-pointer-left::before,
.onb-pointer.onb-pointer-right::before { margin-top: 22px; }

/* Tutorial sell step (2.11.2026): the "First Bloom" achievement modal is queued behind the flower card and its
   .game-modal-overlay hid the whole tutorial, so nothing said what to tap. While the flower card is on top:
   show the banner (compact, title only), no arrow (it would cover "List for Sale"), and make Quick Sell glow. */
body:has(.plant-card-overlay.open) .onb-card-banner { visibility: visible; max-height: none; padding: 8px 14px; bottom: max(8px, env(safe-area-inset-bottom, 0px)); width: min(92vw, 360px); }
body:has(.plant-card-overlay.open) .onb-card-banner .onb-emoji,
body:has(.plant-card-overlay.open) .onb-card-banner .onb-body,
body:has(.plant-card-overlay.open) .onb-card-banner .onb-wait,
body:has(.plant-card-overlay.open) .onb-card-banner .onb-progress,
body:has(.plant-card-overlay.open) .onb-card-banner .onb-actions { display: none; }
body:has(.plant-card-overlay.open) .onb-card-banner .onb-title { font-size: 15px; margin: 0; }
body:has(.plant-card-overlay.open) .onb-pointer { display: none !important; }
body:has(.onb-card-gated) .plant-card-overlay.open #pc-quick-sell {
  border-color: #f7c34a !important;
  animation: onbSellGlow 1.1s ease-in-out infinite;
}
@keyframes onbSellGlow {
  0%, 100% { box-shadow: 0 0 0 2px rgba(247, 195, 74, 0.9), 0 0 6px rgba(247, 195, 74, 0.4); }
  50%      { box-shadow: 0 0 0 3px rgba(255, 220, 120, 1), 0 0 22px rgba(247, 195, 74, 0.95); }
}

/* Diamond moments (2.11.2026): Instant Grow hint, refill offer */
.ig-hint { flex-basis: 100%; margin: 4px 2px 0; padding: 8px 10px; border-radius: 10px; font-size: 13px; line-height: 1.35;
  color: #f6ead0; background: rgba(44, 181, 232, 0.12); border: 1px solid rgba(44, 181, 232, 0.45); text-align: center; }
.ig-hint b { color: #7fd8ff; }
.detail-action-btn .da-cost s { opacity: 0.6; margin-right: 3px; }
.pl-refill-card { width: min(340px, 86vw); padding: 20px 18px 14px; text-align: center; color: #f4e7c8; border-radius: 18px;
  background: linear-gradient(170deg, #3d2a18 0%, #2b1e12 55%, #1f160d 100%); border: 3px solid #A47219;
  box-shadow: 0 12px 40px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,220,150,0.14); font-family: 'Fredoka', sans-serif; animation: modal-slide-up 0.25s ease-out; }
.pl-refill-icon img, .pl-refill-icon svg { width: 54px; height: 54px; object-fit: contain; }
.pl-refill-title { font-size: 20px; font-weight: 700; color: #ffd77a; margin: 6px 0 4px; }
.pl-refill-sub { font-size: 14px; color: rgba(244,231,200,0.85); margin-bottom: 14px; }
.pl-refill-buy { width: 100%; min-height: 46px; border: 0; border-radius: 12px; font: 700 16px 'Fredoka', sans-serif; color: #fff; cursor: pointer;
  background: linear-gradient(135deg, #2cb5e8, #1a8fc0); box-shadow: 0 3px 10px rgba(44,181,232,0.35); }
.pl-refill-have { font-size: 12px; color: rgba(244,231,200,0.6); margin-top: 6px; }
.pl-refill-row { display: flex; justify-content: center; gap: 14px; margin-top: 8px; }
.pl-refill-row button { border: 0; background: transparent; color: #b0bec5; font: 14px 'Fredoka', sans-serif; text-decoration: underline; cursor: pointer; padding: 6px; }

/* ===== Phones: game windows as full-screen sheets (2.11.2026) =====
   The builder frame image left a 249x363 content box on a 390x664 phone and every size was relative to a
   ~9px base, so names were 8px, descriptions 6px and Buy buttons 16px tall. On portrait phones the window
   now fills the screen with a thin gold frame, tabs are pills, text has fixed readable sizes and grids use
   two columns. Desktop and landscape keep the builder frame. */
.game-container.portrait-mode .game-modal.builder-modal {
  position: fixed !important;
  left: 8px !important; right: 8px !important;
  top: max(8px, env(safe-area-inset-top, 0px)) !important;
  bottom: max(8px, env(safe-area-inset-bottom, 0px)) !important;
  width: auto !important; height: auto !important; max-width: none !important; max-height: none !important;
  transform: none !important;
  display: flex !important; flex-direction: column;
  padding: 0 0 8px !important;
  background: linear-gradient(170deg, #3d2a18 0%, #2b1e12 55%, #1f160d 100%) !important;
  border: 3px solid #A47219 !important; border-radius: 18px !important;
  box-shadow: 0 12px 40px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,220,150,0.14) !important;
  font-size: 15px !important;
  overflow: hidden;
}
.game-container.portrait-mode .builder-modal > .bm-layer { display: none !important; }
.game-container.portrait-mode .builder-modal > .game-modal-title,
.game-container.portrait-mode .builder-modal > .game-modal-tabs,
.game-container.portrait-mode .builder-modal > .game-modal-body {
  position: relative !important; left: auto !important; top: auto !important;
  width: auto !important; height: auto !important; transform: none !important;
}
.game-container.portrait-mode .builder-modal > .game-modal-title {
  flex: none; display: block !important; text-align: center;
  padding: 14px 56px 10px !important; margin: 0 !important;
  font-size: 21px !important; line-height: 1.2 !important; color: #ffd77a !important;
  background: linear-gradient(180deg, rgba(164,114,25,0.35), rgba(0,0,0,0)) !important;
  border-bottom: 1px solid rgba(255,215,122,0.18);
}
.game-container.portrait-mode .builder-modal > .game-modal-close {
  position: absolute !important; top: 6px !important; right: 6px !important; left: auto !important;
  width: 44px !important; height: 44px !important; transform: none !important;
}
.game-container.portrait-mode .builder-modal > .game-modal-tabs {
  flex: none; display: flex !important; gap: 6px; overflow-x: auto; overflow-y: hidden;
  padding: 8px 10px !important; margin: 0 !important; scrollbar-width: none;
  background: none !important;
}
.game-container.portrait-mode .builder-modal > .game-modal-tabs::-webkit-scrollbar { display: none; }
.game-container.portrait-mode .builder-modal .game-modal-tab {
  flex: none !important; width: auto !important; height: 38px !important; min-width: 0 !important;
  padding: 0 14px !important; margin: 0 !important;
  display: inline-flex !important; align-items: center; justify-content: center;
  font-size: 14px !important; line-height: 1 !important; white-space: nowrap; color: #f4e7c8 !important;
  background: rgba(0,0,0,0.28) !important; background-image: none !important;
  border: 1px solid rgba(255,215,122,0.35) !important; border-radius: 19px !important;
  text-shadow: none !important; transform: none !important;
}
.game-container.portrait-mode .builder-modal .game-modal-tab.active {
  background: linear-gradient(180deg, #ffd77a, #e0a63a) !important; color: #3a2408 !important;
  border-color: #ffd77a !important;
}
.game-container.portrait-mode .builder-modal > .game-modal-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto !important; -webkit-overflow-scrolling: touch;
  padding: 6px 10px 10px !important; font-size: 15px !important;
}
/* tiles: two columns, readable text, real buttons */
html .game-container.portrait-mode .builder-modal .game-modal-body .panel-grid.panel-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important;
}
html .game-container.portrait-mode .builder-modal .game-modal-body .panel-tile {
  padding: 10px 8px !important; height: auto !important; min-height: 0 !important;
}
html .game-container.portrait-mode .builder-modal .game-modal-body .panel-tile .tile-icon {
  width: 60px !important; height: 60px !important; font-size: 44px !important;
}
html .game-container.portrait-mode .builder-modal .game-modal-body .panel-tile .tile-icon img,
html .game-container.portrait-mode .builder-modal .game-modal-body .panel-tile .tile-icon .gi { width: 100% !important; height: 100% !important; }
html .game-container.portrait-mode .builder-modal .game-modal-body .panel-tile .tile-name {
  font-size: 15px !important; line-height: 1.2 !important; height: auto !important; white-space: normal !important;
  overflow: visible !important; text-overflow: clip !important; margin: 6px 0 2px !important;
}
html .game-container.portrait-mode .builder-modal .game-modal-body .panel-tile .tile-desc {
  font-size: 12px !important; line-height: 1.3 !important; height: auto !important; white-space: normal !important;
  overflow: visible !important; -webkit-line-clamp: unset !important;
}
html .game-container.portrait-mode .builder-modal .game-modal-body .panel-tile .tile-cost,
html .game-container.portrait-mode .builder-modal .game-modal-body .panel-tile .tile-count,
html .game-container.portrait-mode .builder-modal .game-modal-body .panel-tile .tile-price-tag,
html .game-container.portrait-mode .builder-modal .game-modal-body .panel-tile .tile-timer,
html .game-container.portrait-mode .builder-modal .game-modal-body .panel-tile .tile-rarity {
  font-size: 14px !important; line-height: 1.3 !important; height: auto !important;
}
html .game-container.portrait-mode .builder-modal .game-modal-body .panel-tile .tile-cost .coin-ico,
html .game-container.portrait-mode .builder-modal .game-modal-body .panel-tile .tile-cost img { width: 16px !important; height: 16px !important; }
html .game-container.portrait-mode .builder-modal .game-modal-body .panel-tile .tile-action-btn,
html .game-container.portrait-mode .builder-modal .game-modal-body .fs-buy-btn,
html .game-container.portrait-mode .builder-modal .game-modal-body .referral-share-btn,
html .game-container.portrait-mode .builder-modal .game-modal-body .referral-copy-btn,
html .game-container.portrait-mode .builder-modal .game-modal-body .setting-toggle {
  min-height: 40px !important; min-width: 64px !important; font-size: 15px !important; padding: 8px 14px !important;
}
html .game-container.portrait-mode .builder-modal .game-modal-body .panel-tile .tile-action-btn { width: 100% !important; margin: 6px 0 0 !important; padding: 0 10px !important; display: flex !important; align-items: center; justify-content: center; box-sizing: border-box; }
/* generic floor for small text anywhere in the window body */
html .game-container.portrait-mode .builder-modal .game-modal-body small,
html .game-container.portrait-mode .builder-modal .game-modal-body [class*="-sub"],
html .game-container.portrait-mode .builder-modal .game-modal-body [class*="-meta"],
html .game-container.portrait-mode .builder-modal .game-modal-body [class*="-hint"],
html .game-container.portrait-mode .builder-modal .game-modal-body [class*="-label"] { font-size: 12px !important; }
/* inline em sizes (orders cards etc.) and small classes: never under 12px on phones */
html .game-container.portrait-mode .builder-modal .game-modal-body [style*="font-size: 0.4"],
html .game-container.portrait-mode .builder-modal .game-modal-body [style*="font-size: 0.5"],
html .game-container.portrait-mode .builder-modal .game-modal-body [style*="font-size: 0.6"],
html .game-container.portrait-mode .builder-modal .game-modal-body [style*="font-size: 0.7"],
html .game-container.portrait-mode .builder-modal .game-modal-body [style*="font-size:0.5"],
html .game-container.portrait-mode .builder-modal .game-modal-body [style*="font-size:0.6"],
html .game-container.portrait-mode .builder-modal .game-modal-body [style*="font-size:0.7"],
html .game-container.portrait-mode .builder-modal .game-modal-body .wheel-info,
html .game-container.portrait-mode .builder-modal .game-modal-body .notif-time,
html .game-container.portrait-mode .builder-modal .game-modal-body .referral-note,
html .game-container.portrait-mode .builder-modal .game-modal-body .referral-code-display,
html .game-container.portrait-mode .builder-modal .game-modal-body .referral-card-title,
html .game-container.portrait-mode .builder-modal .game-modal-body .referral-card-title *,
html .game-container.portrait-mode .builder-modal .game-modal-body .fs-rarity-badge,
html .game-container.portrait-mode .builder-modal .game-modal-body .lb-cat-period,
html .game-container.portrait-mode .builder-modal .game-modal-body .lb-cat-tap,
html .game-container.portrait-mode .builder-modal .game-modal-body .panel-tile .tile-timer { font-size: 12px !important; line-height: 1.3 !important; }
html .game-container.portrait-mode .builder-modal .game-modal-body .notif-body,
html .game-container.portrait-mode .builder-modal .game-modal-body .setting-desc { font-size: 13px !important; line-height: 1.35 !important; }
/* Orders on phones: wrap the "Need ..." line instead of cutting it, keep the merchant name inside the card,
   let the "next crate" dots wrap instead of running off the right edge */
html .game-container.portrait-mode .builder-modal .game-modal-body [style*="text-overflow: ellipsis"] {
  white-space: normal !important; overflow: hidden !important; text-overflow: clip !important;
  display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-height: 1.25 !important;
}
html .game-container.portrait-mode .builder-modal .game-modal-body [style*="min-height: 80px"] {
  padding: 16px 12px 20px !important; gap: 8px !important;
}
html .game-container.portrait-mode .builder-modal .game-modal-body [style*="margin-left: auto"][style*="flex-shrink: 0"] { display: none !important; }
html .game-container.portrait-mode .builder-modal .game-modal-body [style*="width: 30px; height: 30px"] {
  width: 24px !important; height: 24px !important;
}
/* Phone HUD (2.11.2026): the frame opening is 41px wide centred at (40.8, 28.8) on a 390px phone, the avatar
   box is 38px centred at (42, 30) and its drawn circle is ~91.5% of the box, so it sat small with a grey ring
   around it. Scale it to cover the opening and nudge it 1.2px up-left. */
.game-container.portrait-mode .layout-el[data-action="hud-avatar"] .gi-avatar {
  transform: translate(-3.2%, -3.2%) scale(1.24);
}

/* ===== Phones: popups outside the game windows (2.11.2026) =====
   Purchase confirm was sized from the ~9px game base (title 11px, bonus 8px, discount 7px, close 15x21px,
   Buy Now 26px tall). Upgrade descriptions were 10px with 30px buttons. */
.game-container.portrait-mode .purchase-modal { font-size: 15px !important; width: min(92vw, 360px) !important; max-width: none !important; box-sizing: border-box; }
.game-container.portrait-mode .purchase-modal .purchase-close {
  width: 44px !important; height: 44px !important; font-size: 24px !important; line-height: 44px !important;
  top: 4px !important; right: 4px !important; display: flex !important; align-items: center; justify-content: center;
}
.game-container.portrait-mode .purchase-modal .purchase-buy-btn { min-height: 52px !important; font-size: 18px !important; }
.game-container.portrait-mode .purchase-modal .purchase-secure { font-size: 12px !important; }
html.is-mob .upgrade-overlay .upgrade-panel .upgrade-desc,
html.is-mob .upgrade-overlay .upgrade-panel .upgrade-lock { font-size: 13px !important; line-height: 1.35 !important; }
html.is-mob .upgrade-overlay .upgrade-panel button { min-height: 40px !important; font-size: 14px !important; }
html.is-mob .upgrade-overlay .upgrade-panel .plant-detail-close { width: 44px !important; height: 44px !important; font-size: 24px !important; }
.game-container.portrait-mode .list-sale-panel .list-sale-label,
.game-container.portrait-mode .list-sale-panel .ls-target-name,
.game-container.portrait-mode .list-sale-panel [class*="ls-price"],
.game-container.portrait-mode .list-sale-panel [class*="ls-min"],
.game-container.portrait-mode .list-sale-panel [class*="ls-max"] { font-size: 13px !important; }

/* Reward popups (daily reward, invite reminder, crate rewards) close by tapping outside: on phones they stay a
   centred card instead of a full-screen sheet, so there is always room around them to tap. */
.game-container.portrait-mode .game-modal.builder-modal.reward-popup-modal {
  left: 50% !important; top: 50% !important; right: auto !important; bottom: auto !important;
  transform: translate(-50%, -50%) !important;
  width: min(90vw, 360px) !important; height: auto !important; max-height: 84vh !important;
  padding: 0 !important;
}
.game-container.portrait-mode .game-modal.builder-modal.reward-popup-modal .reward-popup-content {
  max-height: 84vh; overflow-y: auto; padding: 22px 18px 18px !important; width: auto !important; height: auto !important;
}

/* Tutorial: "Part 1 of 2 · Grow & sell" label above the dots (2.11.2026) */
.onb-part { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #e0b450; margin-bottom: 6px; text-align: center; }
body:has(.plant-detail-overlay.open) .onb-card-banner .onb-part,
body:has(.plant-card-overlay.open) .onb-card-banner .onb-part { display: none; }

/* Continue with Google (entry card + save-your-garden dialog) */
#entry-overlay .entry-google { display: flex; justify-content: center; margin: 0 0 10px; min-height: 44px; }
#entry-overlay .entry-google[hidden], .save-account-card .sa-google[hidden] { display: none !important; }
.save-account-card .sa-google { display: flex; justify-content: center; margin: 0.8em 0 0.2em; min-height: 44px; }
.save-account-card .sa-or { text-align: center; font-size: 0.8em; opacity: 0.7; margin: 0.4em 0 0.2em; text-transform: uppercase; letter-spacing: 0.08em; }
/* Save your garden: Google first, email form on request */
.save-account-card .sa-art { height: 1.6em; width: auto; vertical-align: middle; filter: drop-shadow(0 3px 6px rgba(0,0,0,0.4)); }
.save-account-card .sa-alt { display: flex; justify-content: center; gap: 1.4em; margin: 0.7em 0 0.1em; }
.save-account-card .sa-alt[hidden], .save-account-card .sa-form[hidden] { display: none !important; }
.save-account-card .sa-link { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0.3em 0.2em !important; color: #E8C594; font-weight: 700; font-size: 0.88em; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.save-account-card .sa-link.sa-later-top { color: #a8957a; text-decoration: none; }

/* Desktop: lower the down-pointing tutorial arrow so its tip reaches the pot rim (phones have their own value) */
@media (min-width: 601px) {
  .onb-pointer:not(.onb-pointer-up):not(.onb-pointer-left):not(.onb-pointer-right)::before { margin-top: 10px; }
}

/* "+" badge on the HUD diamonds icon (opens the diamond packs) */
.hud-plus {
  position: absolute; right: -4px; top: -4px; z-index: 5;
  width: 18px; height: 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font: 800 14px/1 'Fredoka', sans-serif; color: #fff;
  background: linear-gradient(180deg, #7ed957, #3e9a2a); border: 2px solid #1f4d12;
  box-shadow: 0 2px 4px rgba(0,0,0,0.45); pointer-events: none;
}
@media (min-width: 601px) { .hud-plus { width: 22px; height: 22px; font-size: 17px; right: -2px; top: -2px; } }

/* Starter offer tile in the Diamond Shop */
.diamond-offer-tile.starter-offer-tile { border-color: #f7c34a !important; box-shadow: 0 0 0 2px rgba(247,195,74,.6), 0 0 18px rgba(247,195,74,.45) !important; grid-column: 1 / -1; }

/* Phones: player name in its own pill between the avatar ring and the coins (was squeezed on the plate edge) */
.game-container.portrait-mode .layout-el[data-action="hud-username"] {
  left: 17.1% !important; top: 0.8% !important; width: 20.3% !important; height: 3.3% !important;
  display: flex !important; align-items: center; justify-content: center; box-sizing: border-box; padding: 0 3px;
  background: linear-gradient(180deg, rgba(74,47,18,0.96), rgba(40,24,9,0.96)); border: 1.5px solid #c99a3c;
  border-radius: 12px; box-shadow: 0 2px 5px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,230,160,0.25); overflow: hidden;
}
.game-container.portrait-mode .layout-el[data-action="hud-username"] .css-hud-value {
  padding-left: 0 !important; padding-right: 0 !important; width: 100%; text-align: center; white-space: nowrap;
  overflow: hidden; text-overflow: clip !important; letter-spacing: -0.1px; color: #fff4d6 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.9) !important;
}

/* Pot badges drawn as images (icons have no text, so they were never shown):
   sick plants get a bigger badge with a coloured ring, seeds show the seed art. */
.pot-action-indicator img { width: 82% !important; height: 82% !important; object-fit: contain; margin: 0 !important; vertical-align: middle; }
.pot-action-indicator.has-pest, .pot-action-indicator.has-disease, .pot-action-indicator.seeds-ready {
  width: clamp(24px, 5vw, 30px); height: clamp(24px, 5vw, 30px); border-width: 2px;
}
.pot-action-indicator.has-pest { border-color: #ff9800; background: rgba(50,25,0,0.92); box-shadow: 0 0 10px rgba(255,152,0,0.6), 0 2px 8px rgba(0,0,0,0.5); }
.pot-action-indicator.has-disease { border-color: #e53935; background: rgba(55,8,8,0.92); box-shadow: 0 0 12px rgba(229,57,53,0.7), 0 2px 8px rgba(0,0,0,0.5); }
.pot-action-indicator.seeds-ready { border-color: #81c784; background: rgba(12,30,12,0.92); }
.pot-affliction-overlay img.gi-badge { height: clamp(24px, 2.4vw, 36px) !important; width: auto !important; }

/* Player avatars everywhere (leaderboard, flower card community/admirers, sale card): same art as the HUD */
.lb-row-avatar img.gi-avatar, .lb-prow-avatar img.gi-avatar, .spc-user-avatar img.gi-avatar,
.spc-admirer-avatar img.gi-avatar, .sc-visit-avatar img.gi-avatar {
  width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 50%; margin: 0 !important; display: block;
}
.lb-row-avatar, .lb-prow-avatar, .spc-user-avatar, .spc-admirer-avatar, .sc-visit-avatar { overflow: hidden; }

/* ---- Desktop game windows: the notifications window look instead of the wooden template ----
   The template images are hidden and the builder zones (inline absolute positions) become a
   simple column: title, tabs, body. Bigger than the wooden frame, so more room for the game. */
.builder-modal.pl-skin {
  top: 5% !important; bottom: 5% !important; height: auto !important;
  width: min(1040px, 72%) !important; left: 50% !important; transform: translateX(-50%);
  display: flex !important; flex-direction: column;
  background: linear-gradient(180deg, #3b2a17, #241911 12%, #1b130c) !important;
  border: 3px solid #c8963e !important; border-radius: 22px !important;
  box-shadow: 0 0 0 2px #4a3216, 0 24px 60px rgba(0,0,0,.6) !important;
}
.builder-modal.pl-skin > .bm-layer { display: none !important; }
.builder-modal.pl-skin > .bm-title, .builder-modal.pl-skin > .bm-tabs, .builder-modal.pl-skin > .bm-body {
  position: relative !important; left: auto !important; top: auto !important; width: auto !important; height: auto !important;
}
.builder-modal.pl-skin > .bm-title {
  flex: none; padding: 14px 64px 12px; font-size: 1.6em; color: #ffd36b; text-shadow: 0 2px 0 #5a3a12;
  border-bottom: 1px solid rgba(200,150,62,.35);
}
.builder-modal.pl-skin > .bm-close {
  position: absolute !important; left: auto !important; right: 14px !important; top: 12px !important;
  width: 36px !important; height: 36px !important; z-index: 60 !important;
  background: linear-gradient(#e2833b, #b24a1c) !important; border: 2px solid #ffcf7a !important; border-radius: 10px !important;
  color: #fff !important; display: grid !important; place-items: center; filter: none;
  box-shadow: 0 2px 0 #7a2e0f;
}
.builder-modal.pl-skin > .bm-close::before { content: "\2715"; font: 700 17px/1 'Fredoka', sans-serif; color: #fff; }
.builder-modal.pl-skin > .bm-tabs {
  flex: none; margin: 12px 16px 2px; padding: 4px; gap: 5px; background: rgba(0,0,0,.28); border-radius: 14px;
}
.builder-modal.pl-skin > .bm-tabs .game-modal-tab {
  height: auto; padding: 10px 6px; border-radius: 10px; background: none !important; color: #cdb88f;
  font-size: 16px; font-weight: 700; text-shadow: none; white-space: nowrap;
}
.builder-modal.pl-skin > .bm-tabs .game-modal-tab:hover { background: rgba(255,220,150,.06) !important; color: #f3e6c8; }
.builder-modal.pl-skin > .bm-tabs .game-modal-tab.active {
  background: linear-gradient(#ffd77d, #e9a93a) !important; color: #3a2208; box-shadow: 0 2px 0 #8a5a17; text-shadow: none;
}
.builder-modal.pl-skin > .bm-body { flex: 1; min-height: 0; padding: 12px 16px 16px; }
.builder-modal.pl-skin > .bm-body .panel-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.builder-modal.pl-skin > .bm-body::-webkit-scrollbar { width: 10px; }
.builder-modal.pl-skin > .bm-body::-webkit-scrollbar-track { background: rgba(0,0,0,.25); border-radius: 10px; margin: 6px 0; }
.builder-modal.pl-skin > .bm-body::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #ffd77d, #c8892c); border-radius: 10px; border: 2px solid #1d140c; }
.builder-modal.pl-skin > .bm-body::-webkit-scrollbar-button { display: none; height: 0; }
@supports (-moz-appearance: none) { .builder-modal.pl-skin > .bm-body { scrollbar-width: thin; scrollbar-color: #d9a441 rgba(0,0,0,.25); } }


/* ===== Tutorial cards on phones (5.11.2026): text was 13px, now readable at a glance =====
   One short line per card, bigger title, no "Waiting for you..." line (the arrow already says it). */
@media (max-width: 600px) {
  .onb-card-banner, .onb-card-center { width: min(94vw, 420px); }
  .onb-title, .onb-card-center .onb-title { font-size: 22px; line-height: 1.25; margin-bottom: 6px; }
  .onb-body, .onb-card-center .onb-body { font-size: 17px; line-height: 1.45; margin-bottom: 12px; }
  .onb-card-banner .onb-wait { display: none; }
  .onb-card-center .onb-btn-primary { font-size: 17px; padding: 12px 22px; }
  .onb-btn-skip, .onb-card-center .onb-btn-skip { font-size: 13px; }
  .onb-card button { font-family: inherit; }
  body:has(.plant-detail-overlay.open) .onb-card-banner .onb-title { font-size: 19px; }
}

/* Google profile photo in the HUD: WebKit (iPhone Safari and the iOS app) draws the opaque photo
   square and ignores its border-radius, so round the box around it instead. */
.css-hud-value:has(> img.gi-avatar-photo) { border-radius: 50%; overflow: hidden; -webkit-mask-image: -webkit-radial-gradient(white, black); }

/* Phone HUD, Google photo: the round clip sits on the avatar box, which is ~1.2px right/below the frame's
   opening, so a light crescent of the frame showed on the left. Move the clipped photo onto the opening. */
.game-container.portrait-mode .layout-el[data-action="hud-avatar"] .css-hud-value:has(> img.gi-avatar-photo) { transform: translate(-2.6px, -1.5px) scale(1.15); }
.game-container.portrait-mode .layout-el[data-action="hud-avatar"] .css-hud-value > img.gi-avatar-photo { transform: none; }