:root {
  --bg: #16240f;
  --panel: #21331a;
  --panel2: #2b4222;
  --soil: #6b4a2b;
  --soil2: #5a3d22;
  --green: #7fbf3f;
  --green2: #a5d66a;
  --gold: #f1c40f;
  --text: #eef3e2;
  --muted: #9db089;
}
* { box-sizing: border-box; }
html, body { margin: 0; touch-action: manipulation; }
button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; font-family: inherit; }

body {
  background: radial-gradient(circle at 50% 0%, #24371a, var(--bg));
  color: var(--text);
  font-family: system-ui, -apple-system, sans-serif;
  min-height: 100vh; min-height: 100dvh;
}
#app { max-width: 560px; margin: 0 auto; padding: 12px 12px 40px; }

header { text-align: center; }
header h1 { margin: 8px 0 4px; font-size: 26px; color: var(--green2); }
.money { font-size: 30px; font-weight: bold; color: var(--gold); text-shadow: 0 2px 6px rgba(0,0,0,0.5); }

section { margin-top: 16px; }
section h2 { font-size: 16px; color: var(--green2); margin: 0 0 8px; }
.hint { font-size: 12px; color: var(--muted); margin: 10px 2px 0; }

/* --- Ekin seçici --- */
#crop-picker { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.crop-btn {
  flex: 0 0 auto; min-width: 92px;
  background: var(--panel); color: var(--text);
  border: 2px solid transparent; border-radius: 12px;
  padding: 8px 6px; cursor: pointer; text-align: center;
}
.crop-btn .crop-ic { font-size: 26px; }
.crop-btn .crop-nm { font-weight: bold; font-size: 13px; margin: 2px 0; }
.crop-btn .crop-meta { font-size: 10px; color: var(--muted); line-height: 1.3; }
.crop-btn.sel { border-color: var(--green); background: var(--panel2); }
.crop-btn.cant { opacity: 0.55; }

/* --- Tarla --- */
.farm-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.farm-actions { display: flex; gap: 8px; }
.act {
  background: var(--panel2); color: var(--text); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 9px; padding: 8px 10px; cursor: pointer; font-size: 13px; font-weight: bold;
}
.act:active { transform: scale(0.96); }

#farm { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px; }
.plot {
  aspect-ratio: 1 / 1;
  border-radius: 12px; cursor: pointer;
  border: 2px solid rgba(0,0,0,0.25);
  background: linear-gradient(160deg, var(--soil), var(--soil2));
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 4px; color: var(--text); overflow: hidden;
}
.plot:active { transform: scale(0.96); }
.plot.locked { background: #1a2413; border-style: dashed; opacity: 0.5; cursor: default; }
.plot.buy { background: linear-gradient(160deg, #3a4d2a, #2b3d1e); border-color: var(--green); }
.plot.empty { background: linear-gradient(160deg, #6b4a2b, #4f3720); }
.plot.ready { background: linear-gradient(160deg, #3f6a24, #2e5019); border-color: var(--green2); animation: readyGlow 1.3s ease-in-out infinite; }
.plot.growing { background: linear-gradient(160deg, #5a4127, #43301c); }
@keyframes readyGlow {
  0%,100% { box-shadow: 0 0 0 0 rgba(165,214,106,0.4); }
  50%     { box-shadow: 0 0 12px 2px rgba(165,214,106,0.6); }
}
.lock { font-size: 26px; }
.plot-cost { font-size: 12px; font-weight: bold; color: var(--gold); }
.soil { font-size: 26px; color: rgba(255,255,255,0.35); font-weight: bold; }
.crop-emoji { font-size: 34px; line-height: 1; }
.crop-emoji.ripe { animation: bob 0.9s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
.plot-lbl { font-size: 11px; color: var(--text); font-weight: bold; }
.plot.ready .plot-lbl { color: var(--green2); }
.pbar { width: 82%; height: 6px; background: rgba(0,0,0,0.35); border-radius: 4px; overflow: hidden; }
.pbar span { display: block; height: 100%; background: linear-gradient(90deg, var(--green), var(--green2)); border-radius: 4px; }

/* --- İstatistik --- */
#stats { background: var(--panel); border-radius: 12px; padding: 6px 12px; }
.stat-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.06); font-size: 14px; }
.stat-row:last-child { border-bottom: none; }
.stat-row b { color: var(--green2); }

/* --- Footer --- */
footer { margin-top: 20px; display: flex; align-items: center; justify-content: space-between; }
#save-status { font-size: 12px; color: var(--muted); }
#save-status.flash { color: var(--green2); }
#reset-btn { background: transparent; color: var(--muted); border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; padding: 6px 12px; cursor: pointer; font-size: 12px; }

/* --- Toast --- */
#toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px);
  background: #1b2a12; color: var(--text); border: 1px solid var(--green);
  padding: 10px 16px; border-radius: 10px; font-size: 14px; font-weight: bold;
  opacity: 0; transition: opacity 0.25s, transform 0.25s; pointer-events: none; z-index: 200;
  box-shadow: 0 6px 20px rgba(0,0,0,0.5);
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#toast.hidden { display: block; }