* { box-sizing: border-box; }
:root {
  --ink: #142321;
  --muted: #53635d;
  --blue: #245c73;
  --water: #49a8d8;
  --green: #4f8c42;
  --dry: #c99248;
  --danger: #b84432;
  --cream: #fff8e6;
  --card: rgba(255, 248, 230, .96);
}
html, body { margin: 0; min-height: 100%; background: linear-gradient(#9bd8ff 0 42%, #84b85d 42% 100%); color: var(--ink); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
body { min-height: 100dvh; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
.screen { min-height: 100dvh; padding: max(14px, env(safe-area-inset-top)) 12px max(16px, env(safe-area-inset-bottom)); }
.start-screen, .result-screen { display: flex; flex-direction: column; justify-content: center; gap: 14px; max-width: 520px; margin: 0 auto; }
.back-link, .topbar a, .topbar button { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; padding: 9px 12px; border-radius: 8px; border: 0; background: rgba(255,248,230,.9); color: var(--ink); text-decoration: none; font-weight: 900; box-shadow: 0 8px 18px rgba(30, 25, 15, .14); }
.title-block, .result-card, .panel, .weather-card, .resources, .log-wrap { border: 2px solid rgba(20,35,33,.14); border-radius: 8px; background: var(--card); box-shadow: 0 12px 28px rgba(33, 27, 16, .16); }
.title-block { padding: 18px; }
.eyebrow { margin: 0 0 6px; color: rgba(20,35,33,.7); font-size: 12px; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
h1 { margin: 0; color: var(--blue); font-size: clamp(42px, 14vw, 72px); line-height: .9; }
p { margin: 0; }
.title-block p:last-child { margin-top: 12px; font-weight: 800; line-height: 1.35; }
.primary, .secondary, .actions button { min-height: 48px; border: 0; border-radius: 8px; padding: 11px 12px; font-weight: 950; color: #fff; background: linear-gradient(#32758e, #1f5267); box-shadow: inset 0 -3px 0 rgba(0,0,0,.2); }
.secondary { background: linear-gradient(#638160, #3e5f3c); }
.game-screen { display: grid; gap: 10px; max-width: 760px; margin: 0 auto; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.topbar div { text-align: center; }
.topbar strong, .topbar span { display: block; }
.topbar span { color: var(--muted); font-size: 12px; font-weight: 800; }
.weather-card { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 10px; }
.label { display: block; color: var(--muted); font-size: 11px; font-weight: 950; text-transform: uppercase; letter-spacing: .06em; }
.resources { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; overflow: hidden; padding: 0; background: rgba(20,35,33,.14); }
.resources div { min-height: 54px; padding: 8px; background: var(--card); }
.resources span, .resources strong { display: block; }
.resources span { color: var(--muted); font-size: 11px; font-weight: 900; }
.resources strong { font-size: 18px; }
.map { min-height: 300px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.field { position: relative; min-height: 142px; border: 2px solid rgba(20,35,33,.18); border-radius: 8px; padding: 9px; overflow: hidden; text-align: left; background: linear-gradient(135deg, #80b95f, #b6c45b); box-shadow: inset 0 -26px 0 rgba(96, 63, 31, .12); }
.field.is-selected { outline: 4px solid rgba(73,168,216,.75); }
.field.is-watering::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(105deg, rgba(73,168,216,.0) 0 13px, rgba(73,168,216,.45) 14px 18px); animation: rain .8s linear infinite; pointer-events: none; }
.field.is-critical { background: linear-gradient(135deg, #c99a48, #d7ba66); }
@keyframes rain { from { background-position: 0 0; } to { background-position: 34px 0; } }
.crop { display: inline-flex; align-items: center; gap: 6px; padding: 5px 7px; border-radius: 999px; background: rgba(255,248,230,.88); font-weight: 950; }
.field-name { margin-top: 8px; display: block; font-size: 18px; font-weight: 950; }
.meter { position: relative; height: 10px; margin-top: 8px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,.48); }
.meter span { position: absolute; inset: 0 auto 0 0; width: 50%; background: var(--danger); }
.field small { position: relative; display: block; margin-top: 5px; font-weight: 850; color: rgba(20,35,33,.78); }
.wagon { position: absolute; right: 9px; bottom: 9px; width: 38px; height: 24px; border-radius: 5px; background: #c84632; box-shadow: -11px 10px 0 -6px #1b1e1d, 16px 10px 0 -6px #1b1e1d; z-index: 2; }
.pump { position: absolute; left: 9px; bottom: 9px; width: 28px; height: 28px; border-radius: 50%; background: #245c73; border: 5px solid #49a8d8; z-index: 2; }
.panel { padding: 10px; }
.selection strong { display: block; font-size: 20px; color: var(--blue); }
.selection p { margin-top: 4px; color: #35433f; font-weight: 750; line-height: 1.3; }
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.actions button:disabled { opacity: .42; }
.log-wrap { padding: 10px; }
.log { max-height: 116px; overflow: auto; display: grid; gap: 6px; margin-top: 7px; color: #24332f; font-size: 13px; font-weight: 750; }
.log p { padding: 7px 8px; border-radius: 8px; background: rgba(255,255,255,.48); }
.result-card { padding: 18px; display: grid; gap: 12px; }
.breakdown { display: grid; gap: 7px; }
.breakdown div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,.55); font-weight: 850; }
@media (min-width: 720px) {
  .game-screen { grid-template-columns: 1.1fr .9fr; align-items: start; }
  .topbar, .weather-card, .resources { grid-column: 1 / -1; }
  .map { min-height: 420px; }
}
@media (max-width: 380px) {
  .resources strong { font-size: 16px; }
  .map { gap: 6px; }
  .field { min-height: 132px; padding: 7px; }
  .actions button { min-height: 44px; font-size: 14px; }
}