:root {
  --bg-main: #181a20;
  --bg-card: #232634;
  --bg-card2: #232634cc;
  --primary: #7f9cff;
  --primary-dark: #4b5fd6;
  --accent: #ffb86b;
  --text-main: #f3f6fa;
  --text-muted: #b7b9c7;
  --border: #2c2f3a;
  --shadow: 0 4px 32px #0008;
  --radius: 14px;
  --radius-sm: 8px;
  --input-bg: #232634;
  --input-border: #35384a;
  --input-focus: #7f9cff;
  --category-title: #a6b3ff;
  --result-green: #6ee7b7;
  --btn-bg: linear-gradient(90deg, #7f9cff 0%, #4b5fd6 100%);
  --btn-hover: linear-gradient(90deg, #4b5fd6 0%, #7f9cff 100%);
}

.gagcontainer {
  margin: 40px auto;
  background: var(--bg-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 38px 28px 28px 28px;
  position: relative;
  overflow: hidden;
  margin-top: 54px;
  z-index: 1;
}
.gagcontainer::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 80% 10%, #7f9cff22 0%, transparent 70%);
  z-index: 0;
  pointer-events: none;
}
h2 {
  text-align: center;
  margin-bottom: 28px;
  font-size: 2.4em;
  letter-spacing: 1.5px;
  color: var(--primary);
  font-weight: 700;
  text-shadow: 0 2px 16px #7f9cff33;
  z-index: 1;
  position: relative;
}
.input-row {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 28px;
  flex-wrap: wrap;
  z-index: 1;
  position: relative;
}
.input-row label {
  font-weight: 500;
  min-width: 110px;
  color: var(--accent);
  font-size: 1.13em;
  letter-spacing: 0.5px;
}
.input-row input[type="number"] {
  width: 120px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--input-border);
  background: var(--input-bg);
  color: var(--text-main);
  font-size: 1.15em;
  outline: none;
  transition: border 0.18s;
  box-shadow: 0 1px 6px #0004;
}
.input-row input[type="number"]:focus {
  border-color: var(--input-focus);
}
.section-title {
  font-size: 1.18em;
  font-weight: bold;
  margin: 28px 0 12px 0;
  color: var(--category-title);
  border-bottom: 1px solid var(--border);
  padding-bottom: 5px;
  letter-spacing: 0.5px;
  z-index: 1;
  position: relative;
}
#categoryContainer {
  display: flex;
  flex-direction: column;
  gap: 22px 0;
  margin-bottom: 10px;
}
.category {
  background: var(--bg-card2);
  border-radius: var(--radius-sm);
  padding: 14px 16px 16px 16px;
  margin-bottom: 0;
  min-width: 0;
  flex: none;
  box-sizing: border-box;
  box-shadow: 0 2px 12px #0003;
  border: 1px solid var(--border);
  transition: box-shadow 0.18s, border 0.18s;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.category:hover {
  box-shadow: 0 4px 24px #7f9cff22;
  border-color: var(--primary);
}
.category-title {
  font-weight: bold;
  margin-bottom: 10px;
  color: var(--category-title);
  font-size: 1.07em;
  letter-spacing: 0.2px;
  width: 100%;
  text-align: left;
  border-bottom: 1px solid var(--border);
  padding-bottom: 3px;
}
.category > div:not(.category-title) {
  display: flex;
  flex-direction: row;
  gap: 0;
  overflow-x: auto;
  padding-bottom: 6px;
  margin-top: 6px;
  width: 100%;
}
.category > div:not(.category-title)::-webkit-scrollbar {
  height: 8px;
}
.category > div:not(.category-title)::-webkit-scrollbar-thumb {
  background: #35384a;
  border-radius: 8px;
}
.checkbox {
  display: block;
  margin-bottom: 5px;
  font-size: 1em;
  cursor: pointer;
  user-select: none;
  color: var(--text-muted);
  transition: color 0.15s;
}
.checkbox input[type="checkbox"] {
  margin-right: 7px;
  accent-color: var(--primary);
  transform: scale(1.13);
  vertical-align: middle;
}
.checkbox input[type="checkbox"]:checked + span,
.checkbox input[type="checkbox"]:checked ~ span {
  color: var(--primary);
  font-weight: 500;
}
#modifiers {
  gap: 13px 28px;
  margin-bottom: 12px;
}
.fruit-row {
  margin-bottom: 12px;
  z-index: 1;
  position: relative;
}
.result-row {
  margin: 38px 0 0 0;
  text-align: center;
  z-index: 1;
  position: relative;
}
#value {
  font-size: 2.4em;
  font-weight: bold;
  color: var(--result-green);
  margin-top: 10px;
  letter-spacing: 1.2px;
  display: inline-block;
  min-width: 130px;
  text-shadow: 0 2px 12px #6ee7b733;
}
.btn-row {
  text-align: center;
  margin-top: 22px;
  z-index: 1;
  position: relative;
}
button, .mod-btn, .fruit-btn {
  background: var(--btn-bg);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 12px 34px;
  font-size: 1.13em;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s, box-shadow 0.18s;
  margin: 0 10px;
  box-shadow: 0 2px 12px #0004;
  letter-spacing: 0.5px;
}
button:hover, .mod-btn:hover, .fruit-btn:hover {
  background: var(--btn-hover);
  box-shadow: 0 4px 24px #7f9cff33;
}
.mod-btn, .fruit-btn {
  display: inline-block;
  padding: 8px 18px;
  margin: 4px 8px 4px 0;
  border-radius: 18px;
  background: #232634;
  color: var(--text-muted);
  border: 2px solid var(--input-border);
  font-size: 1em;
  font-weight: 500;
  cursor: pointer;
  transition: 
    background 0.18s, 
    color 0.18s, 
    border 0.18s, 
    box-shadow 0.18s;
  user-select: none;
  outline: none;
  min-width: 90px;
  text-align: center;
  box-shadow: 0 1px 6px #0002;
}
.mod-btn.active, .fruit-btn.active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
  box-shadow: 0 2px 12px #7f9cff33;
}
.mod-btn:active, .fruit-btn:active {
  background: var(--primary-dark);
}
.mod-btn[disabled], .fruit-btn[disabled] {
  opacity: 0.5;
  pointer-events: none;
}
#modifiers .checkbox, .fruit-row .checkbox {
  display: none !important;
}
.plant-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 8px 10px 6px 10px;
  margin: 4px 8px 4px 0;
  border-radius: 18px;
  background: #232634;
  color: var(--text-muted, #b7b9c7);
  border: 2px solid var(--input-border, #35384a);
  font-size: 1em;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, border 0.18s, box-shadow 0.18s;
  user-select: none;
  outline: none;
  min-width: 90px;
  min-height: 90px;
  text-align: center;
  box-shadow: 0 1px 6px #0002;
}
.plant-btn .plant-img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  margin-bottom: 4px;
  display: block;
  pointer-events: none;
  user-select: none;
}
.plant-btn .plant-label {
  font-size: 0.98em;
  margin-top: 2px;
  color: inherit;
  font-weight: 500;
  text-shadow: 0 1px 4px #0003;
  pointer-events: none;
  user-select: none;
}
.plant-btn.active {
  background: var(--primary, #7f9cff);
  color: #fff;
  border-color: var(--primary, #7f9cff);
  box-shadow: 0 2px 12px #7f9cff33;
}
.plant-btn:active {
  background: var(--primary-dark, #4b5fd6);
}
.base-price-row {
  color: var(--accent);
  font-size: 1.08em;
  margin: 4px 0 0 0;
  padding-left: 2px;
  min-height: 1.5em;
}
.info-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  width: 100%;
  gap: 12px;
  z-index: 2;
  position: relative;
}
.info-left, .info-right {
  font-size: 1.08em;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 6px 0;
  background: linear-gradient(270deg, #7f9cff, #232634 40%, #7f9cff 80%, #232634 100%);
  background-size: 400% 100%;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  animation: smooth-gradient-move 8s linear infinite;
  -webkit-text-fill-color: transparent;
}
@keyframes smooth-gradient-move {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0 0;
  }
}

@keyframes gradient-move-loop {
  0% { background-position: 0% 0; }
  100% { background-position: 100% 0; }
}

.mod-btn.active#modbtn-wet,
.mod-btn:hover#modbtn-wet {
  background: #4a6fa3;
  color: #fff;
  border-color: #4a6fa3;
}
.mod-btn.active#modbtn-chilled,
.mod-btn:hover#modbtn-chilled {
  background: #6c6f7a;
  color: #fff;
  border-color: #6c6f7a;
}
.mod-btn.active#modbtn-disco,
.mod-btn:hover#modbtn-disco {
  background: #6c3bbf;
  color: #fff;
  border-color: #6c3bbf;
  animation: disco-color-cycle 15s steps(5) infinite;
}
.mod-btn.active#modbtn-choc,
.mod-btn:hover#modbtn-choc {
  background: #4b2e13;
  color: #fff;
  border-color: #4b2e13;
}
.mod-btn.active#modbtn-bloodlit,
.mod-btn:hover#modbtn-bloodlit {
  background: #6b1a1a;
  color: #fff;
  border-color: #6b1a1a;
}
.mod-btn.active#modbtn-heavenly,
.mod-btn:hover#modbtn-heavenly {
  background: linear-gradient(90deg, #ffe066 0%, #fffbe6 100%);
  color: #bfa700;
  border-color: #ffe066;
  box-shadow: 0 2px 12px #ffe06655;
  text-shadow: 0 1px 8px #fffbe6, 0 0px 2px #bfa700;
}
.mod-btn.active#modbtn-celestial,
.mod-btn:hover#modbtn-celestial {
  background: #a85c8c;
  color: #fff;
  border-color: #a85c8c;
}
.mod-btn.active#modbtn-moonlit,
.mod-btn:hover#modbtn-moonlit {
  background: #5e3a7c;
  color: #fff;
  border-color: #5e3a7c;
}
.mod-btn.active#modbtn-frozen,
.mod-btn:hover#modbtn-frozen {
  background: #3b5c7e;
  color: #fff;
  border-color: #3b5c7e;
}
.mod-btn.active#modbtn-zomb,
.mod-btn:hover#modbtn-zomb {
  background: #4e7c4e;
  color: #fff;
  border-color: #4e7c4e;
}
.mod-btn.active#modbtn-shocked,
.mod-btn:hover#modbtn-shocked {
  background: #b1a84a;
  color: #232634;
  border-color: #b1a84a;
}
.mod-btn.active#modbtn-plasma,
.mod-btn:hover#modbtn-plasma {
  background: #a84a8c;
  color: #fff;
  border-color: #a84a8c;
}
.mod-btn.active#modbtn-voidtouched,
.mod-btn:hover#modbtn-voidtouched {
  background: #2a003a;
  color: #fff;
  border-color: #2a003a;
}
.mod-btn.active#modbtn-pollinated,
.mod-btn:hover#modbtn-pollinated {
  background: #ffe066;
  color: #232634;
  border-color: #ffe066;
}
.mod-btn.active#modbtn-honeyglazed,
.mod-btn:hover#modbtn-honeyglazed {
  background: #ffd700;
  color: #232634;
  border-color: #ffd700;
}
.mod-btn.active#modbtn-burnt,
.mod-btn:hover#modbtn-burnt {
  background: #a0522d;
  color: #fff;
  border-color: #a0522d;
  box-shadow: 0 2px 12px #a0522d55;
}
.mod-btn.active#modbtn-cooked,
.mod-btn:hover#modbtn-cooked {
  background: #ffb347;
  color: #232634;
  border-color: #ffb347;
  box-shadow: 0 2px 12px #ffb34755;
}
.mod-btn.active#modbtn-dawnbound,
.mod-btn:hover#modbtn-dawnbound {
  background: linear-gradient(90deg, #ffb347 0%, #ffe066 100%);
  color: #a86c00;
  border-color: #ffe066;
  box-shadow: 0 2px 12px #ffe06655;
  text-shadow: 0 1px 8px #fffbe6, 0 0px 2px #bfa700;
}
.mod-btn.active#modbtn-meteoric,
.mod-btn:hover#modbtn-meteoric {
  background: linear-gradient(90deg, #ff5e13 0%, #ffb347 100%);
  color: #fff;
  border-color: #ff5e13;
  box-shadow: 0 2px 12px #ffb34755;
}
.mod-btn.active#modbtn-molten,
.mod-btn:hover#modbtn-molten {
  background: #a83232;
  color: #fff;
  border-color: #a83232;
  box-shadow: 0 2px 12px #a8323255;
}
.mod-btn.active#modbtn-alienlike,
.mod-btn:hover#modbtn-alienlike {
  background: #7d5fff;
  color: #fff;
  border-color: #7d5fff;
}
.mod-btn.active#modbtn-sundried,
.mod-btn:hover#modbtn-sundried {
  background: #e1a95f;
  color: #232634;
  border-color: #e1a95f;
}
.mod-btn.active#modbtn-galactic,
.mod-btn:hover#modbtn-galactic {
  background: #2e2b5f;
  color: #fff;
  border-color: #2e2b5f;
}
.mod-btn.active#modbtn-windstruck,
.mod-btn:hover#modbtn-windstruck {
  background: #b2f0f7;
  color: #232634;
  border-color: #b2f0f7;
}
.mod-btn.active#modbtn-paradisal,
.mod-btn:hover#modbtn-paradisal {
  background: #6ee7b7;
  color: #232634;
  border-color: #6ee7b7;
}
.mod-btn.active#modbtn-twisted,
.mod-btn:hover#modbtn-twisted {
  background: #b45309;
  color: #fff;
  border-color: #b45309;
}
.mod-btn.active#modbtn-verdant,
.mod-btn:hover#modbtn-verdant {
  background: #4ade80;
  color: #232634;
  border-color: #4ade80;
}
.mod-btn.active#modbtn-aurora,
.mod-btn:hover#modbtn-aurora {
  background: linear-gradient(90deg, #7fffd4 0%, #6a5acd 100%);
  color: #fff;
  border-color: #7fffd4;
  box-shadow: 0 2px 12px #7fffd488;
}
.mod-btn.active#modbtn-drenched,
.mod-btn:hover#modbtn-drenched {
  background: linear-gradient(90deg, #4fc3f7 0%, #1976d2 100%);
  color: #fff;
  border-color: #4fc3f7;
  box-shadow: 0 2px 12px #4fc3f788;
}
.mod-btn.active#modbtn-cloudtouched,
.mod-btn:hover#modbtn-cloudtouched {
  background: #b3e0ff;
  color: #232634;
  border-color: #b3e0ff;
}
.mod-btn.active#modbtn-fried,
.mod-btn:hover#modbtn-fried {
  background: #ffb347;
  color: #232634;
  border-color: #ffb347;
}
.mod-btn.active#modbtn-sandy,
.mod-btn:hover#modbtn-sandy {
  background: #ffe4b5;
  color: #232634;
  border-color: #ffe4b5;
}
.mod-btn.active#modbtn-amber,
.mod-btn:hover#modbtn-amber {
  background: #ffc107;
  color: #232634;
  border-color: #ffc107;
}
.mod-btn.active#modbtn-oldamber,
.mod-btn:hover#modbtn-oldamber {
  background: #ffda6a;
  color: #232634;
  border-color: #ffda6a;
}
.mod-btn.active#modbtn-ancientamber,
.mod-btn:hover#modbtn-ancientamber {
  background: #ffbf00;
  color: #232634;
  border-color: #ffbf00;
}
.mod-btn.active#modbtn-clay,
.mod-btn:hover#modbtn-clay {
  background: #b87333;
  color: #fff;
  border-color: #b87333;
}
.mod-btn.active#modbtn-ceramic,
.mod-btn:hover#modbtn-ceramic {
  background: #e0e0e0;
  color: #232634;
  border-color: #e0e0e0;
}
.mod-btn.active#modbtn-disco,
.mod-btn:hover#modbtn-disco {
  background: #a259ff;
}
.mod-btn.active#modbtn-choc,
.mod-btn:hover#modbtn-choc {
  background: #7b4f27;
}
.mod-btn.active#modbtn-bloodlit,
.mod-btn:hover#modbtn-bloodlit {
  background: #a80000;
  color: #fff;
}
.mod-btn.active#modbtn-celestial,
.mod-btn:hover#modbtn-celestial {
  background: #ffb6e6;
  color: #a8007a;
}
.mod-btn.active#modbtn-moonlit,
.mod-btn:hover#modbtn-moonlit {
  background: #a259ff;
}
.mod-btn.active#modbtn-frozen,
.mod-btn:hover#modbtn-frozen {
  background: #aee7ff;
}
.mod-btn.active#modbtn-zomb,
.mod-btn:hover#modbtn-zomb {
  background: #baffb1;
}
.mod-btn.active#modbtn-shocked,
.mod-btn:hover#modbtn-shocked {
  background: #fff9b1;
}
.mod-btn.active#modbtn-plasma,
.mod-btn:hover#modbtn-plasma {
  background: #ff7ce6;
  color: #a8007a;
}
.mod-btn.active#modbtn-voidtouched,
.mod-btn:hover#modbtn-voidtouched {
  background: #3a0066;
  color: #fff;
}
.mod-btn.active#modbtn-pollinated,
.mod-btn:hover#modbtn-pollinated,
.mod-btn.active#modbtn-honeyglazed,
.mod-btn:hover#modbtn-honeyglazed {
  background: #ffe066;
}

.mod-btn.active#modbtn-dawnbound,
.mod-btn:hover#modbtn-dawnbound {
  background: linear-gradient(90deg, #ffe066 0%, #fffbe6 100%);
  color: #bfa700;
  border-color: #ffe066;
  box-shadow: 0 2px 12px #ffe06655;
  text-shadow: 0 1px 8px #fffbe6, 0 0px 2px #bfa700;
}
.mod-btn.active#modbtn-meteoric,
.mod-btn:hover#modbtn-meteoric {
  background: linear-gradient(90deg, #ffb347 0%, #ff5e13 100%);
  color: #fff;
  border-color: #ff5e13;
  box-shadow: 0 2px 12px #ffb34755;
}
.mod-btn.active#modbtn-molten,
.mod-btn:hover#modbtn-molten {
  background: #ff3b3b;
  color: #fff;
  border-color: #a83232;
  box-shadow: 0 2px 12px #a8323255;
}

@keyframes disco-color-cycle {
  0%   { background-color: #c0392b; }
  20%  { background-color: #8e44ad; }
  40%  { background-color: #ffe066; }
  60%  { background-color: #7cff7c; }
  80%  { background-color: #5fd6ff; }
  100% { background-color: #c0392b; }
}

.mod-btn.active#modbtn-heavenly,
.mod-btn:hover#modbtn-heavenly {
  background: linear-gradient(90deg, #ffe066 0%, #fffbe6 100%);
  color: #bfa700;
  border-color: #ffe066;
  box-shadow: 0 2px 12px #ffe06655;
  text-shadow: 0 1px 8px #fffbe6, 0 0px 2px #bfa700;
}
.mod-btn.active#modbtn-alienlike,
.mod-btn:hover#modbtn-alienlike {
  background: #7d5fff;
  color: #fff;
  border-color: #7d5fff;
}
.mod-btn.active#modbtn-sundried,
.mod-btn:hover#modbtn-sundried {
  background: #e1a95f;
  color: #232634;
  border-color: #e1a95f;
}
.mod-btn.active#modbtn-galactic,
.mod-btn:hover#modbtn-galactic {
  background: #2e2b5f;
  color: #fff;
  border-color: #2e2b5f;
}
.mod-btn.active#modbtn-windstruck,
.mod-btn:hover#modbtn-windstruck {
  background: #b2f0f7;
  color: #232634;
  border-color: #b2f0f7;
}
.mod-btn.active#modbtn-paradisal,
.mod-btn:hover#modbtn-paradisal {
  background: #6ee7b7;
  color: #232634;
  border-color: #6ee7b7;
}
.mod-btn.active#modbtn-twisted,
.mod-btn:hover#modbtn-twisted {
  background: #b45309;
  color: #fff;
  border-color: #b45309;
}
.mod-btn.active#modbtn-verdant,
.mod-btn:hover#modbtn-verdant {
  background: #4ade80;
  color: #232634;
  border-color: #4ade80;
}
.mod-btn.active#modbtn-aurora,
.mod-btn:hover#modbtn-aurora {
  background: linear-gradient(90deg, #7fffd4 0%, #6a5acd 100%);
  color: #fff;
  border-color: #7fffd4;
  box-shadow: 0 2px 12px #7fffd488;
}
.mod-btn.active#modbtn-drenched,
.mod-btn:hover#modbtn-drenched {
  background: linear-gradient(90deg, #4fc3f7 0%, #1976d2 100%);
  color: #fff;
  border-color: #4fc3f7;
  box-shadow: 0 2px 12px #4fc3f788;
}
.mod-btn.active#modbtn-cloudtouched,
.mod-btn:hover#modbtn-cloudtouched {
  background: #b3e0ff;
  color: #232634;
  border-color: #b3e0ff;
}
.mod-btn.active#modbtn-fried,
.mod-btn:hover#modbtn-fried {
  background: #ffb347;
  color: #232634;
  border-color: #ffb347;
}
.mod-btn.active#modbtn-sandy,
.mod-btn:hover#modbtn-sandy {
  background: #ffe4b5;
  color: #232634;
  border-color: #ffe4b5;
}
.mod-btn.active#modbtn-amber,
.mod-btn:hover#modbtn-amber {
  background: #ffc107;
  color: #232634;
  border-color: #ffc107;
}
.mod-btn.active#modbtn-clay,
.mod-btn:hover#modbtn-clay {
  background: #b87333;
  color: #fff;
  border-color: #b87333;
}
.mod-btn.active#modbtn-ceramic,
.mod-btn:hover#modbtn-ceramic {
  background: #e0e0e0;
  color: #232634;
  border-color: #e0e0e0;
}
.mod-btn.active#modbtn-ancientamber,
.mod-btn:hover#modbtn-ancientamber {
  background: #ffbf00;
  color: #232634;
  border-color: #ffbf00;
}



.fruit-btn.active#fruitbtn-rainbow,
.fruit-btn:hover#fruitbtn-rainbow {
  background: linear-gradient(90deg, #ff6ec4 0%, #f9ff6e 20%, #6efff9 40%, #6e8cff 60%, #ff6ec4 80%, #f9ff6e 100%);
  color: #fff;
  border-color: #ff6ec4;
  box-shadow: 0 2px 12px #ff6ec488, 0 0 8px #f9ff6e88;
  animation: rainbow-shine 2s linear infinite;
}
@keyframes rainbow-shine {
  0% { background-position: 0% 0; }
  100% { background-position: 100% 0; }
}
.fruit-btn.active#fruitbtn-gold,
.fruit-btn:hover#fruitbtn-gold {
  background: linear-gradient(90deg, #ffd700 0%, #fffbe6 100%);
  color: #bfa700;
  border-color: #ffd700;
  box-shadow: 0 2px 12px #ffd70088, 0 0 8px #fffbe688;
  text-shadow: 0 1px 8px #fffbe6, 0 0px 2px #bfa700;
}



#rain-canvas {
  position: fixed;
  left: 0; top: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
  opacity: 0.28;
}
@keyframes search-shake {
  0% { transform: scale(1) rotate(0deg);}
  10% { transform: scale(1.08) rotate(4deg);}
  20% { transform: scale(1.08) rotate(-4deg);}
  30% { transform: scale(1.06) rotate(3deg);}
  40% { transform: scale(1.06) rotate(-3deg);}
  50% { transform: scale(1.04) rotate(2deg);}
  60% { transform: scale(1.04) rotate(-2deg);}
  70% { transform: scale(1.02) rotate(1deg);}
  80% { transform: scale(1.02) rotate(-1deg);}
  90% { transform: scale(1) rotate(0deg);}
  100% { transform: scale(1) rotate(0deg);}
}
.plant-btn.search-highlight {
  animation: search-shake 1.1s cubic-bezier(.36,.07,.19,.97) 1;
  box-shadow: 0 0 0 4px #ffe06699, 0 2px 12px #ffe06655;
  z-index: 10;
}
#plant-search-suggestion {
  position: absolute;
  background: #232634;
  border: 1.5px solid #35384a;
  border-radius: 8px;
  color: #f3f6fa;
  font-size: 1.08em;
  box-shadow: 0 2px 12px #0008;
  z-index: 100;
  display: none;
  max-height: 220px;
  overflow-y: auto;
  min-width: 220px;
  padding: 2px 0;
  left: 50%;
  transform: translateX(-50%);
  top: 64px;
}
#plant-search-suggestion > div {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px;
  cursor: pointer;
  transition: background 0.13s;
}
#plant-search-suggestion > div:hover {
  background: #35384a;
}
#plant-search-suggestion > div img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  border-radius: 6px;
  background: #181a20;
  margin-right: 6px;
  flex-shrink: 0;
  box-shadow: 0 1px 4px #0005;
}



.mod-btn:hover,
.mod-btn.active {
  position: relative;
  overflow: hidden;
}
.mod-btn:hover::after,
.mod-btn.active::after {
  content: "";
  position: absolute;
  top: 0; left: -100%;
  width: 200%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.10) 40%,
    rgba(255,255,255,0.32) 48%,
    rgba(255,255,255,0.65) 52%,
    rgba(255,255,255,0.32) 56%,
    rgba(255,255,255,0.10) 60%,
    rgba(255,255,255,0) 100%
  );
  pointer-events: none;
  z-index: 2;
  animation: shining-move 3.5s cubic-bezier(.4,.7,.3,1) infinite;
}

@keyframes shining-move {
  0% { left: -100%; }
  100% { left: 100%; }
}



.fruit-btn:hover,
.fruit-btn.active {
  position: relative;
  overflow: hidden;
}

.fruit-btn:hover::after,
.fruit-btn.active::after {
  content: "";
  position: absolute;
  top: 0; left: -100%;
  width: 200%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.10) 40%,
    rgba(255,255,255,0.32) 48%,
    rgba(255,255,255,0.65) 52%,
    rgba(255,255,255,0.32) 56%,
    rgba(255,255,255,0.10) 60%,
    rgba(255,255,255,0) 100%
  );
  pointer-events: none;
  z-index: 2;
  animation: shining-move 3.5s cubic-bezier(.4,.7,.3,1) infinite;
}